/* Ream Cafe, The Rex, Daylesford — V2
   Direction A : premier ecran plein cadre, puis editorial sur gres clair.
   Palette tiree du dossier culturel : gres et ivoire (la pierre des temples),
   l'or de l'enseigne, le jade de Preah Ream en accent. Jamais de laque sombre,
   jamais d'imagerie thaie. Le logo est pose intact, sans retouche. */

@font-face { font-family:"Fraunces"; src:url("assets/fonts/Fraunces.ttf") format("truetype");
  font-weight:100 900; font-display:swap; }
@font-face { font-family:"Fraunces"; src:url("assets/fonts/Fraunces-Italic.ttf") format("truetype");
  font-weight:100 900; font-style:italic; font-display:swap; }
@font-face { font-family:"Hanken"; src:url("assets/fonts/HankenGrotesk.ttf") format("truetype");
  font-weight:100 900; font-display:swap; }

:root{
  --sand:#F4ECDE;
  --sand-2:#EBE0CC;
  --paper:#FBF7EF;
  --ink:#241C12;
  --muted:#6E5C44;
  --gold:#B8912F;
  --gold-lt:#D9B455;
  --jade:#1F6B4A;
  --line:rgba(36,28,18,.16);
  --line-soft:rgba(36,28,18,.09);

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Hanken",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  --maxw:1200px;
  --bar:56px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

.wrap{width:100%;min-width:0;max-width:var(--maxw);margin:0 auto;padding:0 var(--s3)}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;text-wrap:balance}
h2{font-size:clamp(30px,4.2vw,50px);line-height:1.06;letter-spacing:-.02em}
h3{font-size:clamp(19px,2vw,24px);line-height:1.2}
p{margin:0 0 var(--s2);max-width:62ch}
.orn{display:block;width:210px;max-width:52%;opacity:.9;margin:var(--s3) 0}
.orn.mid{margin-left:auto;margin-right:auto}

/* ---------- Barre d'etat, collee en haut ---------- */
.bar{position:sticky;top:0;z-index:60;height:var(--bar);display:flex;align-items:center;
  justify-content:space-between;gap:var(--s2);padding:0 var(--s3);
  background:rgba(36,28,18,.94);color:var(--sand);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(216,180,85,.28)}
.bar .left{display:flex;align-items:center;gap:12px;min-width:0}
.bar .status{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.bar .pip{width:8px;height:8px;border-radius:50%;background:#57C98A;flex:none;
  box-shadow:0 0 0 4px rgba(87,201,138,.2)}
.bar.shut .pip{background:#C8785A;box-shadow:0 0 0 4px rgba(200,120,90,.18)}
.bar .sep{width:1px;height:18px;background:rgba(244,236,222,.24);flex:none}
.bar .where{font-size:12.5px;color:rgba(244,236,222,.72);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.bar .nav{display:flex;align-items:center;gap:var(--s3)}
.bar .nav a{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:rgba(244,236,222,.78);transition:color .2s}
.bar .nav a:hover{color:var(--gold-lt)}
.bar .cta{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  height:38px;padding:0 6px 0 15px;border-radius:99px;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  color:#1E1606;text-decoration:none;line-height:1;
  box-shadow:0 2px 0 rgba(120,90,15,.55),0 10px 22px -10px rgba(216,180,85,.75);
  transition:transform .16s,box-shadow .16s,filter .16s}
.bar .cta:hover{transform:translateY(-1px);filter:saturate(1.08);
  box-shadow:0 3px 0 rgba(120,90,15,.55),0 16px 28px -12px rgba(216,180,85,.9)}
.bar .cta:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(120,90,15,.55)}
.bar .cta .cup{flex:none;opacity:.85}
.bar .cta .lbl{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;padding-right:3px}
/* le badge sort du flux typographique du bouton : sans cette remise a zero du
   letter-spacing, le chiffre est pousse a gauche dans son cercle */
.count{flex:none;width:26px;height:26px;border-radius:50%;background:#241C12;color:var(--gold-lt);
  display:grid;place-items:center;font-size:12px;font-weight:800;line-height:1;
  letter-spacing:0;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.count[hidden]{display:none}
/* quand le panier est vide, on rend au bouton sa marge droite */
.bar .cta:not(.has) {padding-right:15px}
.bar .cta.bump{animation:bump .42s ease}
@keyframes bump{0%,100%{transform:none}28%{transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce){.bar .cta,.bar .cta.bump{transition:none;animation:none}}
/* Le retour d'une page interieure : une pilule fantome qui repond a la pilule
   or du bouton de commande, a l'autre bout de la barre. Pas de fleche : le
   libelle dit deja ou il mene, et un glyphe de plus fait bricole. */
.bar .back{display:inline-flex;align-items:center;height:32px;padding:0 16px;
  border:1px solid rgba(244,236,222,.26);border-radius:99px;
  font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:rgba(244,236,222,.86);white-space:nowrap;
  transition:border-color .2s,color .2s,background-color .2s}
.bar .back:hover{border-color:rgba(216,180,85,.62);color:var(--gold-lt);
  background-color:rgba(216,180,85,.09)}
.bar .back:active{background-color:rgba(216,180,85,.16)}

/* ---------- Premier ecran, plein cadre ---------- */
.hero{position:relative;min-height:calc(100vh - var(--bar));display:flex;overflow:hidden;
  background:#171009}
/* L'enseigne lumineuse : elle dit QUI c'est avant qu'on lise une ligne.
   ⚠️ Elle ne vaut que sur un cadre large. Toutes les prises sont en paysage,
   et sur un ecran de telephone le `cover` n'en garde qu'une tranche
   verticale ou on lit « AM CA ». D'ou la seconde image plus bas. */
.hero .shot{position:absolute;inset:0;
  background:url("assets/photos/enseigne.webp") center 42%/cover no-repeat;
  filter:saturate(1.05) contrast(1.03)}
.hero .veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(14,10,6,.58) 0%,rgba(14,10,6,.16) 34%,rgba(14,10,6,.9) 100%)}
.hero .inner{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:var(--s4) var(--s3) var(--s5);display:flex;flex-direction:column;
  justify-content:space-between;gap:var(--s5);color:#F7F1E4}
.hero .seal img{width:clamp(112px,13vw,168px);filter:drop-shadow(0 16px 38px rgba(0,0,0,.55))}
.hero h1{font-size:clamp(40px,6.4vw,80px);line-height:.98;letter-spacing:-.03em;
  margin:0 0 var(--s2);max-width:16ch}
.hero h1 em{font-style:italic;color:var(--gold-lt)}
.hero .sub{font-size:clamp(16px,1.6vw,19px);color:rgba(247,241,228,.85);max-width:46ch;
  margin:0 0 var(--s3)}
.hero .row{display:flex;gap:12px;flex-wrap:wrap}

.btn{display:inline-block;padding:15px 30px;border-radius:12px;font-size:13px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  transition:background .2s,color .2s,border-color .2s;border:1px solid transparent;cursor:pointer}
.btn-gold{background:var(--gold);color:#1E1606}
.btn-gold:hover{background:var(--gold-lt)}
.btn-line{border-color:rgba(247,241,228,.45);color:#F7F1E4;background:none}
.btn-line:hover{border-color:var(--gold-lt);color:var(--gold-lt)}
.btn-ink{background:var(--ink);color:var(--sand)}
.btn-ink:hover{background:#3A2D1D}

/* ---------- Bande de faits ---------- */
.facts{background:var(--sand-2);border-bottom:1px solid var(--line)}
.facts .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.facts .cell{padding:var(--s3) var(--s2);border-left:1px solid var(--line)}
.facts .cell:first-child{border-left:0}
.facts .k{display:block;margin-bottom:5px}
.facts .v{font-family:var(--display);font-size:clamp(17px,1.8vw,21px);line-height:1.25;
  font-variant-numeric:tabular-nums}

/* ---------- Piece maitresse : le cafe glace ---------- */
.drink{padding:var(--s6) 0;position:relative;overflow:hidden}
.drink .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(32px,6vw,84px);align-items:center}
.drink .shotwrap{position:relative}
.drink .shotwrap img{width:100%;aspect-ratio:4/5;object-fit:cover;
  box-shadow:0 30px 60px -30px rgba(36,28,18,.5)}
.drink .shotwrap::after{content:"";position:absolute;inset:14px;
  border:1px solid rgba(216,180,85,.5);pointer-events:none}
.drink .khmer{font-family:var(--display);font-size:15px;font-style:italic;color:var(--jade);
  margin-bottom:10px}
.drink .price{display:flex;align-items:baseline;gap:14px;margin-top:var(--s3);
  padding-top:var(--s3);border-top:1px solid var(--line)}
.drink .amt{font-family:var(--display);font-size:42px;line-height:1;color:var(--gold);
  font-variant-numeric:tabular-nums}
.drink .note{font-size:14.5px;color:var(--muted)}

/* ---------- Menu, par categories ---------- */
.menu{padding:var(--s6) 0;background:var(--paper);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.menu .head{text-align:center;margin-bottom:var(--s4)}
.menu .hint{font-size:14.5px;color:var(--muted);margin:var(--s2) auto 0;max-width:48ch}

/* La surcharge du week-end, telle qu'annoncee en bas de leur menu mural. Elle
   doit se lire avant de commander, pas se decouvrir sur le ticket : centree
   sous le menu, discrete mais pas cachee. */
.menu .surcharge{margin:var(--s5) auto 0;max-width:48ch;text-align:center;
  font-size:13.5px;color:var(--muted);letter-spacing:.01em}

.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:var(--s5);
  padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.tab{border:1px solid transparent;background:none;font:inherit;font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:11px 20px;
  cursor:pointer;border-radius:99px;transition:all .18s;white-space:nowrap}
.tab:hover{color:var(--ink);border-color:var(--line)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--sand);border-color:var(--ink)}

.pan{display:none}
.pan.on{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pan.on{animation:none}}
.pan .inner{max-width:760px;margin:0 auto}
.pan .lede{max-width:60ch;margin:0 auto var(--s4);text-align:center;color:var(--muted);font-size:15.5px}

.grp{margin-bottom:var(--s5)}
.grp:last-of-type{margin-bottom:0}
.grp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);
  padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.grp-head h3{font-size:20px;color:var(--ink)}
.ph{flex:none}
.ph span{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);text-align:right}

.list{list-style:none;margin:0;padding:0}
.it{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:13px 10px;border:0;border-bottom:1px dotted rgba(36,28,18,.16);background:none;
  font:inherit;color:inherit;cursor:pointer;transition:background .15s;border-radius:2px}
.it:hover{background:rgba(184,145,47,.09)}
.it:last-child{border-bottom:0}
.it .n{flex:1 1 auto;min-width:0;font-size:16.5px}
.it .n small{display:block;font-size:13px;color:var(--muted);line-height:1.45;margin-top:3px}
.it .p{flex:none;font-variant-numeric:tabular-nums;color:var(--gold);font-weight:700;
  font-size:15.5px}
.it .p span{text-align:right}

/* les colonnes de prix et leurs en-tetes partagent la meme grille */
.grp-1 .p,.grp-1 .ph{display:grid;grid-template-columns:88px}
.grp-2 .p,.grp-2 .ph{display:grid;grid-template-columns:repeat(2,88px);gap:10px}

.it.star{background:rgba(31,107,74,.06);border-left:2px solid var(--jade);padding-left:12px}
.it.star .n{color:var(--jade);font-weight:700}
.it.star:hover{background:rgba(31,107,74,.11)}
.plain-note{color:var(--muted);font-size:15px}

.addons{margin-top:var(--s4);padding:var(--s3) var(--s2);border:1px solid rgba(184,145,47,.42);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);max-width:620px;
  margin-left:auto;margin-right:auto}
.addons div{text-align:center}
.addons div+div{border-left:1px solid rgba(184,145,47,.28)}
.addons .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  line-height:1.3;min-height:2.6em;display:flex;align-items:center;justify-content:center}
.addons .v{font-family:var(--display);font-size:20px;color:var(--gold);font-variant-numeric:tabular-nums}
.addons small{display:block;font-size:11px;color:var(--muted);margin-top:4px;line-height:1.4}

/* ---------- Tiroir de commande ---------- */
.drawer{position:fixed;inset:0;z-index:80;display:none}
.drawer.on{display:block}
.drawer .scrim{position:absolute;inset:0;background:rgba(23,16,9,.55);backdrop-filter:blur(3px)}
.drawer .panel{position:absolute;right:0;top:0;bottom:0;width:min(440px,100%);
  background:var(--paper);display:flex;flex-direction:column;
  box-shadow:-20px 0 60px rgba(23,16,9,.35);animation:slide .28s ease}
@keyframes slide{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.drawer .panel{animation:none}}
.drawer .top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2);
  padding:var(--s3);border-bottom:1px solid var(--line)}
.drawer .top h3{font-size:23px}
.drawer .top .sub{font-size:13px;color:var(--muted);margin:4px 0 0}
.drawer .x{border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--muted);
  padding:0 4px}
.drawer .body{padding:var(--s3);overflow-y:auto;flex:1;background:var(--sand)}
.opt{margin-bottom:var(--s3)}
.opt .lab{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:10px}
.opt .choices{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--paper);padding:11px 17px;font:inherit;
  font-size:14.5px;cursor:pointer;border-radius:12px;transition:all .16s;color:var(--ink)}
.chip:hover{border-color:var(--gold);background:rgba(184,145,47,.06)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--sand);border-color:var(--ink)}
.chip .plus{font-variant-numeric:tabular-nums;opacity:.62;font-size:13px;margin-left:6px}
/* Une option que la selection en cours interdit : le cafe ne sait pas faire
   « Weak + Extra shot ». On la grise au lieu de la laisser cliquable puis de
   refuser la commande : le client voit tout de suite ce qui est possible. */
.chip.off{opacity:.34;cursor:not-allowed;border-color:var(--line);background:var(--paper)}
.chip.off:hover{border-color:var(--line);background:var(--paper)}

/* une ligne repliee par categorie */
.acc{border:1px solid var(--line);border-radius:16px;background:var(--paper);margin-bottom:10px;
  overflow:hidden;transition:border-color .16s}
.acc:hover{border-color:rgba(184,145,47,.5)}
.acc.on{border-color:var(--gold)}
.acc-head{display:flex;align-items:center;gap:14px;width:100%;padding:15px 18px;border:0;
  background:none;font:inherit;cursor:pointer;text-align:left;color:inherit}
.acc-head .k{flex:none;min-width:88px;font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.acc-head .v{flex:1;min-width:0;font-size:15.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-head .car{flex:none;color:var(--muted);font-size:12px;transition:transform .2s}
.acc.on .acc-head .car{transform:rotate(180deg)}
.acc-body{display:none;padding:2px 18px 18px}
.acc.on .acc-body{display:block}
.acc-body .choices{display:flex;flex-wrap:wrap;gap:9px}

/* Options en doses : une ligne par parfum, un moins et un plus. On sort du
   flex en ligne des puces parce qu'une ligne pleine largeur laisse le nom a
   gauche et le compteur toujours au meme endroit a droite, donc pointable
   sans viser. */
.acc-body .choices.doses{display:block}
.dose{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 2px;border-bottom:1px solid var(--line)}
.dose:last-child{border-bottom:0}
.dose .dn{font-size:15px}
.dose.on .dn{font-weight:700;color:var(--gold)}
.qty button:disabled{opacity:.3;cursor:not-allowed}
.qty button:disabled:hover{background:none}

.drawer .foot{padding:var(--s3);border-top:1px solid var(--line);background:var(--paper)}
.drawer .total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--s2)}
.drawer .total b{font-family:var(--display);font-size:32px;font-variant-numeric:tabular-nums;
  color:var(--ink);font-weight:600}
.drawer .total span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.drawer .foot .btn{display:block;text-align:center;width:100%}
.drawer .small{font-size:12.5px;color:var(--muted);margin:12px 0 0;text-align:center}

/* ---------- Vitrine ---------- */
.case{padding:var(--s6) 0}
.case .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);
  margin-top:var(--s4)}
.case figure{margin:0}
.case img{width:100%;aspect-ratio:4/3;object-fit:cover}
.case figcaption{font-size:14px;color:var(--muted);margin-top:10px}
.case .lead{max-width:56ch}

/* ---------- Recit ---------- */
.story{padding:var(--s6) 0;background:var(--sand-2);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.story .grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(30px,5vw,74px);
  align-items:start}
.story .aside{margin:0}
/* Le portrait de Siv est encadre comme le medaillon de la marque : un double
   filet d'or separe par une marge creme. `outline-offset` negatif pose le
   second filet exactement au bord de la photo (8px de marge + 1px de bordure),
   sans ajouter d'element dans le HTML. Meme traitement sur story.html. */
.story .aside img,.lr-portrait img{width:100%;box-shadow:0 24px 48px -28px rgba(36,28,18,.5);
  padding:8px;background:var(--paper);border:1px solid var(--gold);
  outline:1px solid var(--gold);outline-offset:-9px}
.story .aside figcaption{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.5}
.story .cols{columns:2;column-gap:clamp(26px,3.6vw,48px);margin-top:var(--s3)}
.story .cols p{max-width:none;color:var(--muted)}
.story .cols p:first-of-type::first-letter{font-family:var(--display);font-size:58px;line-height:.82;
  float:left;padding:6px 10px 0 0;color:var(--gold)}

/* ---------- Avis ---------- */
.says{padding:var(--s6) 0;background:var(--sand-2);border-top:1px solid var(--line)}
.says .band{background:var(--paper);border:1px solid var(--line);padding:clamp(30px,4vw,52px);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,64px);
  align-items:center}
/* Sans note ni avis publies (data/reviews.json vide), la bande n'a qu'une
   colonne : on ne laisse pas une moitie de cadre vide a la place du score. */
.says .band.solo{grid-template-columns:minmax(0,1fr)}
.says .score{text-align:center;padding-right:clamp(0px,3vw,40px);
  border-right:1px solid var(--line)}
.says .stars{color:var(--gold);font-size:26px;letter-spacing:.14em;line-height:1}
.says .num{font-family:var(--display);font-size:56px;line-height:1;margin:14px 0 6px;
  font-variant-numeric:tabular-nums}
.says .num.none{font-size:34px;color:var(--muted)}
.says .cnt{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.says h2{margin-bottom:var(--s2)}
.says .why{color:var(--muted);font-size:16.5px}
.says .btn{margin-top:var(--s2)}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-top:var(--s4)}
.quotes blockquote{margin:0;padding:var(--s3);background:var(--paper);border:1px solid var(--line-soft)}
.quotes .stars{font-size:14px;margin-bottom:10px}
.quotes p{font-size:16px;margin-bottom:12px}
.quotes cite{font-style:normal;font-size:13px;color:var(--muted)}

/* ---------- Nous trouver ---------- */
.find{padding:var(--s6) 0;background:var(--ink);color:var(--sand)}
.find .eyebrow{color:var(--gold-lt)}
.find .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px)}
.find h2{color:var(--paper)}
.find .addr{font-size:19px;line-height:1.55;margin:var(--s3) 0}
.find .addr b{color:var(--gold-lt);font-weight:700}
.find .box{padding:var(--s3);border-left:2px solid var(--gold);background:rgba(216,180,85,.09);
  font-size:15.5px;color:rgba(244,236,222,.82)}
.find .box p:last-child{margin-bottom:0}
.find .dirs{margin-top:var(--s3)}
.hours{width:100%;border-collapse:collapse;margin-top:var(--s3)}
.hours th,.hours td{text-align:left;padding:11px 0;border-bottom:1px dotted rgba(244,236,222,.2);
  font-weight:400}
.hours th{color:rgba(244,236,222,.7);font-size:15.5px}
.hours td{text-align:right;font-variant-numeric:tabular-nums;color:var(--gold-lt);font-weight:700}
.hours tr.now th,.hours tr.now td{color:var(--paper)}

/* ---------- Pied ---------- */
.foot{background:#1B140C;color:rgba(244,236,222,.72);padding:var(--s6) 0 var(--s4)}
.foot .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,5vw,72px);align-items:start;padding-bottom:var(--s4);
  border-bottom:1px solid rgba(216,180,85,.22)}
.foot .mark img{width:132px;margin-bottom:var(--s2)}
.foot .mark p{font-size:14px;line-height:1.6;max-width:32ch;margin:0}
.foot h4{font-family:var(--body);font-size:11px;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-lt);margin:0 0 14px}
.foot .lines{font-size:15px;line-height:1.75;font-style:normal;color:rgba(244,236,222,.86)}
.foot .lines b{color:var(--paper);font-weight:700;display:block}
.foot .open{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font-size:15px;padding:7px 0;border-bottom:1px dotted rgba(244,236,222,.16)}
.foot .open:last-of-type{border-bottom:0}
.foot .open b{color:var(--gold-lt);font-variant-numeric:tabular-nums;font-weight:700}
.foot .soc{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s2)}
.foot .soc a{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:rgba(244,236,222,.85);border:1px solid rgba(216,180,85,.4);
  padding:9px 15px;border-radius:2px;transition:all .2s}
.foot .soc a:hover{border-color:var(--gold-lt);color:var(--gold-lt);background:rgba(216,180,85,.08)}
.foot .priv{flex-basis:100%;order:3;opacity:.75}
.foot .base{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  padding-top:var(--s3);font-size:13px;color:rgba(244,236,222,.55)}
.foot .base a{color:var(--gold-lt);text-decoration:none}

/* ---------- Apparition, sobre ---------- */
.rise{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

/* ---------- Adaptations ---------- */
@media (max-width:1040px){
  .drink .grid,.story .grid,.find .grid{grid-template-columns:minmax(0,1fr)}
  .story .aside{max-width:230px}
  .case .grid,.quotes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .says .band{grid-template-columns:minmax(0,1fr)}
  .says .score{border-right:0;border-bottom:1px solid var(--line);padding-right:0;
    padding-bottom:var(--s3)}
  .foot .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts .cell:nth-child(3){border-left:0}
  .facts .cell:nth-child(3),.facts .cell:nth-child(4){border-top:1px solid var(--line)}
}
@media (max-width:760px){
  body{font-size:16px}
  .bar{padding:0 var(--s2);gap:10px}
  .bar .nav,.bar .sep,.bar .where{display:none}
  .bar .cta{padding:9px 14px}
  .hero{min-height:auto;padding-bottom:var(--s3)}
  .hero .inner{gap:var(--s5);padding:var(--s3) var(--s3) var(--s4)}
  /* 🔑 Sur telephone, l'enseigne est illisible : un cadre etroit n'en garde
     qu'une tranche et on lit « AM CA ». On sert donc un sujet qui tient dans
     un cadre vertical. Le nom n'a pas a etre porte par la photo, le sceau du
     logo est affiche juste au-dessus. */
  .hero .shot{background-image:url("assets/photos/enseigne-mobile.webp");
    background-position:center 46%}
  .case .grid,.quotes{grid-template-columns:minmax(0,1fr)}
  .foot .grid{grid-template-columns:minmax(0,1fr)}
  .tabs{gap:4px}
  .tab{padding:9px 13px;font-size:12px}
  .story .cols{columns:1}
  .addons{grid-template-columns:minmax(0,1fr)}
  .addons div+div{border-left:0;border-top:1px solid rgba(184,145,47,.28);padding-top:12px}
  .addons .k{min-height:0}
  .drawer .panel{width:100%;top:auto;height:88vh;border-radius:14px 14px 0 0}
}
@media (max-width:420px){
  .facts .grid{grid-template-columns:minmax(0,1fr)}
  .facts .cell{border-left:0;border-top:1px solid var(--line)}
  .facts .cell:first-child{border-top:0}
}

/* ---------- Page de commande : un ticket de caisse ---------- */
.page-order{background:var(--sand-2)}
.checkout{padding:var(--s5) var(--s3) var(--s6);display:flex;justify-content:center}

.ticket{width:100%;max-width:580px;background:var(--paper);position:relative;
  border-radius:24px;box-shadow:0 34px 80px -44px rgba(36,28,18,.5)}
/* une seule dentelure, en bas, arrondie comme le reste */
.ticket::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;
  background:radial-gradient(circle at 8px 0,transparent 7.5px,var(--paper) 8px);
  background-size:16px 10px}

.tk-top{display:flex;align-items:center;gap:15px;padding:var(--s4) var(--s4) var(--s3);
  border-bottom:1px dashed rgba(36,28,18,.2)}
.tk-top img{width:52px;flex:none}
.tk-id{flex:1;min-width:0}
.tk-id b{display:block;font-size:14px;font-weight:800;letter-spacing:.2em}
.tk-id span{font-size:11.5px;color:var(--muted);letter-spacing:.06em}
.tk-tag{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(184,145,47,.5);padding:7px 14px;border-radius:99px}
.tk-tag.paid{color:var(--jade);border-color:rgba(31,107,74,.45)}

.tk-body{padding:var(--s4)}
.tk-sec{padding-bottom:var(--s4);margin-bottom:var(--s4);
  border-bottom:1px dashed rgba(36,28,18,.18)}
.tk-sec:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.tk-sec.off{opacity:.35;pointer-events:none}
.tk-sec h2{display:flex;align-items:center;gap:11px;font-family:var(--body);font-size:12px;
  font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  margin:0 0 var(--s3)}
.tk-sec h2 .no{width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--sand);
  display:grid;place-items:center;font-size:11px;flex:none}

.line{display:grid;grid-template-columns:1fr auto 74px 26px;align-items:center;gap:12px;
  padding:13px 0;border-bottom:1px dotted rgba(36,28,18,.16)}
.line:last-child{border-bottom:0}
.line .ln b{display:block;font-size:16px;font-weight:600}
.line .ln small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.line .lp{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--gold)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:99px;
  overflow:hidden}
.qty button{width:30px;height:30px;border:0;background:none;font:inherit;font-size:15px;
  cursor:pointer;color:var(--ink)}
.qty button:hover{background:rgba(184,145,47,.15)}
.qty span{min-width:24px;text-align:center;font-variant-numeric:tabular-nums;font-weight:700;
  font-size:14.5px}
.rm{border:0;background:none;font-size:19px;color:var(--muted);cursor:pointer;line-height:1}
.rm:hover{color:#A8322A}
.empty{padding:var(--s4) 0;text-align:center;color:var(--muted)}
.empty p{margin:0 auto var(--s3)}

.daytag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--jade);background:rgba(31,107,74,.1);
  padding:7px 14px;border-radius:99px;margin-bottom:16px}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.slot{display:flex;align-items:center;justify-content:center;height:46px;
  border:1px solid var(--line);background:var(--paper);font:inherit;font-size:14.5px;
  font-variant-numeric:tabular-nums;cursor:pointer;border-radius:14px;color:var(--ink);
  transition:all .15s}
.slot:hover{border-color:var(--gold);background:rgba(184,145,47,.06)}
.slot[aria-checked="true"]{background:var(--ink);color:var(--sand);border-color:var(--ink)}

.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.fld{display:block;margin-bottom:var(--s2)}
.fld:last-child{margin-bottom:0}
.fld span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
/* « (optional) » est un qualificatif, pas un titre : il hérite sinon de la
   capitale forcée et de la graisse 800 du libellé, et crie aussi fort que lui. */
.fld span i{font-weight:600;font-style:normal;text-transform:none;
  letter-spacing:.04em;opacity:.72}
.fld input{width:100%;height:48px;padding:0 16px;border:1px solid var(--line);
  background:var(--paper);font:inherit;font-size:15.5px;color:var(--ink);border-radius:14px}
.fld input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent}

.tk-cut{height:2px;background:repeating-linear-gradient(90deg,rgba(36,28,18,.3) 0 7px,
  transparent 7px 14px)}
.tk-foot{padding:var(--s4);background:var(--sand);border-radius:0 0 24px 24px}
.tk-line{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;
  font-size:14.5px;color:var(--muted)}
.tk-line b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700}
.tk-line.sur b{color:var(--gold)}
.tk-line.big{border-top:1px solid var(--line);margin-top:8px;padding-top:15px;font-size:16px;
  color:var(--ink)}
.tk-line.big b{font-family:var(--display);font-size:32px;font-weight:600}
.pay{display:block;width:100%;text-align:center;margin-top:var(--s3)}
.pay:disabled{opacity:.35;cursor:not-allowed}
.secure{font-size:12px;color:var(--muted);margin:13px 0 0;text-align:center;line-height:1.55}

.done{position:fixed;inset:0;z-index:90;background:rgba(23,16,9,.74);backdrop-filter:blur(4px);
  display:grid;place-items:center;padding:var(--s3);overflow-y:auto}
.done[hidden]{display:none}
.done-tk{max-width:430px}
.done-body{text-align:center;padding:var(--s4) var(--s3)}
.done .tick{width:56px;height:56px;border-radius:50%;background:var(--jade);color:#fff;
  display:grid;place-items:center;font-size:26px;margin:0 auto var(--s3)}
.done h2{font-size:30px;margin-bottom:8px}
.done .ref{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.done .ref b{color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.done p{margin:0 auto var(--s2);color:var(--muted);max-width:38ch}
.done .fresh{font-size:13.5px;color:var(--jade);font-weight:600}
.done .btn{margin-top:var(--s2)}

.foot.slim{padding:var(--s4) 0}
.foot.slim .base{padding-top:0;border:0}

@media (max-width:560px){
  .checkout{padding:var(--s4) var(--s2) var(--s5)}
  .tk-top{gap:12px;padding:var(--s3)}
  .tk-top img{width:42px}
  .tk-id b{font-size:12.5px;letter-spacing:.13em;white-space:nowrap}
  .tk-id span{font-size:10.5px;line-height:1.45;display:block}
  .tk-tag{padding:6px 10px;font-size:9.5px;letter-spacing:.12em}
  .tk-body{padding:var(--s3)}
  .line{grid-template-columns:1fr 74px 26px;row-gap:10px}
  .line .ln{grid-column:1 / -1}
  .line .qty{grid-column:1;justify-self:start}
  .fields{grid-template-columns:minmax(0,1fr)}
  .slots{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
}

/* Le bouton de la vitrine, qui ouvre l'onglet des patisseries */
.case .cta-line{margin:var(--s3) 0 0}

/* ------------------------------------------------------------------ */
/*  LES PATISSERIES                                                     */
/*  Une vitrine, pas une liste de prix : un article de vitrine se       */
/*  choisit a l'oeil. Meme grille sur le meme gres, cadre net comme     */
/*  le reste de l'editorial, et le prix garde l'or du menu.             */
/* ------------------------------------------------------------------ */
.grp-food .grp-head{margin-bottom:var(--s3)}
.cards{display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.card{display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line-soft);overflow:hidden}
.card .shotbox{position:relative;aspect-ratio:4/3;background:var(--sand-2)}
.card .shotbox img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card:hover .shotbox img{transform:scale(1.03)}
.card .txt{padding:14px 16px 0}
.card h4{margin:0;font-family:var(--display);font-size:17px;font-weight:600;line-height:1.3}
.card .txt small{display:block;margin-top:5px;font-size:13px;color:var(--muted);line-height:1.45}
/* Les mentions de regime, sous le nom. Discretes par choix : ce sont des
   reperes pour qui les cherche, pas un argument de vente. Liseré or fin
   plutot qu'une pastille pleine, qui crierait plus fort que le prix. */
.card .diet{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:7px 0 0;padding:0}
.card .diet li{font-size:10.5px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;
  padding:2.5px 8px;white-space:nowrap}
.card .buy{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding:14px 16px 16px}
.card .buy .p{font-variant-numeric:tabular-nums;color:var(--gold);font-weight:700;font-size:16px}
/* Le bouton porte aussi .it, qui est le crochet du moteur de commande et
   impose une ligne pleine largeur : on neutralise cette mise en page ici. */
.card .btn-add{width:auto;flex:none;display:inline-flex;justify-content:center;
  gap:0;text-align:center;border-bottom:1px solid var(--line)}
.card .btn-add:hover{background:var(--ink)}
.btn-add{border:1px solid var(--line);background:none;font:inherit;font-size:12px;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  padding:9px 16px;border-radius:999px;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s}
.btn-add:hover{background:var(--ink);color:var(--sand);border-color:var(--ink)}

/* Rupture. L'article reste visible et garde sa place : il revient demain,
   et une case qui disparait en cours de navigation desoriente. */
.card.soldout .shotbox img{filter:grayscale(1);opacity:.45}
.card.soldout h4,.card.soldout .buy .p{color:var(--muted)}
.card .out{position:absolute;left:12px;top:12px;background:var(--ink);color:var(--sand);
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 10px;border-radius:999px}
.btn-add:disabled{opacity:.4;cursor:not-allowed}
.btn-add:disabled:hover{background:none;color:var(--ink);border-color:var(--line)}
li.soldout .it{opacity:.45;cursor:not-allowed}

/* La meme rupture, vue depuis le ticket de commande */
.line.gone .ln b{text-decoration:line-through;color:var(--muted)}
.line.gone .no{color:#9B2C15;font-weight:700}

/* ── Le sceau du premier ecran passe a DROITE (Matthias, 13/09) ──────────────
   `.hero .inner` est une colonne flex : c'est `align-self` qui deplace le
   sceau sur l'axe transversal, pas `text-align`. */
.hero .seal{align-self:flex-end}

/* ── La section histoire de l'accueil : le bouton respire ────────────────────
   Il touchait presque la derniere ligne du texte. */
.story .cta-line{margin:var(--s4) 0 0}

/* ── story.html : le texte de la gerante, en entier ──────────────────────────
   La page reprend la grammaire de l'accueil, elle n'invente rien : bandeau
   sombre avec le sceau, puis alternance sable / sable fonce, meme pied de
   page. Colonne unique et large interlignage : 840 mots en deux colonnes
   obligent a remonter lire, ce que personne ne fait sur un ecran. */
.page-story{background:var(--sand)}

/* Grille de lecture a DEUX PISTES, posee le 14/09 apres retour des gerants :
   la page leur paraissait « vide et bizarre ». Le diagnostic n'etait pas le
   telephone, qui va bien, mais le BUREAU : une colonne de 740 px centree dans
   1440 laissait un ruban de texte au milieu d'un champ de sable, avec un
   portrait en timbre-poste flottant au-dessus.
   Le rail de marge porte le portrait, et la note sur les archers a cote des
   valeurs. C'est du CONTENU qui occupe le champ de droite, pas du decor.
   ⚠️ Toujours PAS de multi-colonnes : 840 mots en colonnes obligent a remonter
   lire, ce que personne ne fait sur un ecran (decision conservee). */
.lr-shell{max-width:1000px;margin:0 auto}
/* 🇰🇭 L'ornement khmer n'existe QUE dans la grille a deux pistes (>=1060 px),
   la ou une colonne de droite existe. ⚠️ Cette regle doit rester AVANT la media
   query qui le rallume : posee apres, elle l'ecrase et l'ornement s'affiche sur
   telephone au lieu du bureau, exactement l'inverse du but. Erreur faite et
   mesuree le 15/09, ne pas la refaire en deplaçant ce bloc. */
.lr-orn{display:none}
.lr-rail{margin:0 0 var(--s5)}

@media (min-width:1060px){
  .lr-shell{display:grid;grid-template-columns:minmax(0,1fr) 292px;
    gap:var(--s4);align-items:start}
  .lr-read{grid-column:1;grid-row:1;min-width:0}
  .lr-rail{grid-column:2;grid-row:1;margin:0}
  /* Le filet court sur toute la hauteur du texte : c'est lui qui relie les
     deux pistes et donne son aplomb a la page. */
  .lr-main .lr-read,.values .lr-read{padding-right:var(--s4);
    border-right:1px solid var(--line-soft)}
  /* 🔴 [15/09] LE PORTRAIT NE COLLE PLUS, decision de Matthias : « c'est
     l'image qui est fixe au scrolling et qui donne ce mauvais rendu ».
     Il defile desormais avec le texte, comme n'importe quelle illustration.
     L'intention d'origine (« accompagner la lecture ») a ete essayee jusqu'au
     bout le 15/09, y compris en lui rendant sa course complete : une photo
     epinglee pendant 1868 px de lecture fige la page et se met a lutter avec
     tout ce qui defile a cote. Ne pas la remettre. */
  .lr-portrait{max-width:none;margin:0;text-align:left}

  /* 🇰🇭 L'ORNEMENT KHMER DE LA COLONNE DE DROITE (demande de Matthias, 15/09).
     Le gardien du Reamker, sous le portrait. Il ne se repete pas et il ne
     bouge pas : il defile avec la page comme le reste, puisque plus rien n'est
     epingle sur cette page.
     🔑 Aucun masque CSS ici, et c'est voulu : le fondu est DANS le fichier
     (vignette radiale posee a la production), parce que le motif est dessine
     soude a l'anneau du logo et qu'il fallait le faire dissoudre plutot que
     le decouper. Detail dans `preparer-assets-ream.py`.
     Desktop seulement : sous 1060 px la colonne n'existe plus. */
  /* 🇰🇭 LES DEUX GARDIENS DE LA COLONNE DE DROITE. Le premier sous le portrait,
     le second en bas de colonne (demande de Matthias, « pour unifier le tout »).
     🔑 Le rail s'etire (`align-self:stretch`, sinon il s'arrete a la hauteur de
     son contenu) et devient une colonne flex : le second ornement est pousse en
     bas par `margin-top:auto`. On evite ainsi toute hauteur fixe, qui mentirait
     des que le recit change de longueur.
     ⚠️ Rien n'est `sticky` ici, et c'est deliberé : le portrait epingle a ete
     essaye puis REFUSE par Matthias le 15/09. Ne pas le reintroduire.
     🔑 Aucun masque CSS : le fondu est DANS le fichier (vignette radiale posee a
     la production), parce que le motif est dessine soude a l'anneau du logo et
     qu'il fallait le faire dissoudre plutot que le decouper. */
  .lr-main .lr-rail{align-self:stretch;display:flex;flex-direction:column}
  .lr-orn{display:block;width:100%;max-width:322px;height:auto;
    margin:var(--s5) auto 0;opacity:.9}
  /* 🔑 LE RYTHME DE LA COLONNE SE FAIT AUX MARGES AUTOMATIQUES, jamais a des
     hauteurs en dur : deux `margin-top:auto` dans un conteneur flex se
     partagent l'espace libre a parts egales, donc le symbole du milieu tombe a
     mi-hauteur et le second gardien en bas, quelle que soit la longueur du
     recit. Un jour ou Siv rallongera son texte, rien ne sera a retoucher. */
  .lr-orn-milieu{max-width:170px;margin-top:auto;opacity:.85}
  .lr-orn-bas{margin-top:auto;margin-bottom:var(--s5)}

  /* 🇰🇭 [15/09] LE DECOR KHMER DE CETTE COLONNE EST RETIRE. La volute doree du
     logo, debout et repetee, a ete montee puis REFUSEE par Matthias : « le
     motif est nul », et il glissait sur le portrait au defilement. Le glissement
     venait du portrait epingle, corrige ci-dessus ; le motif, lui, est juge sur
     piece. Avec les archers (coupes) et les deux essais de kbach du 13/09
     (invisible, puis papier peint), ca fait QUATRE refus sur la meme famille :
     ne pas reproposer de texture de fond dans cette colonne sans une direction
     explicite de sa part. 
  .lr-portrait figcaption{text-align:left}
  .lr-note{margin:0}
}

/* PREAH REAM DANS LES MARGES, l'archer de leur propre enseigne.
   La page flottait sur un aplat de sable. Trois traitements ont ete montes
   sur la vraie page avant de trancher : un kbach plein cadre (invisible des
   qu'il etait assez pale pour ne pas gener), des colonnes de kbach dans les
   marges (papier peint raye), et les archers. Les archers gagnent parce
   qu'ils sont SPECIFIQUES : l'archer est Preah Ream, d'ou vient le nom Ream,
   et c'est leur artwork, donc ni licence ni image de banque.

   🔑 DEUX CHOIX DE COMPOSITION, et c'est la que se joue l'esthetique :
   1. PAS DE SYMETRIE. Deux figures identiques, meme taille et meme hauteur,
      font un blason : c'est fige. Ici l'une est grande et haute a gauche,
      l'autre plus petite et basse a droite. La page gagne une diagonale.
   2. ELLES NE SONT PAS FIXES. Posees en absolu dans leur section, elles
      DEFILENT avec le texte : ce sont deux ponctuations a deux moments precis
      (Preah Ream a cote des valeurs qui viennent de son histoire, puis a
      nouveau a la fermeture du recit), et non un filigrane colle sur la vitre
      qu'on finit par ne plus voir.

   Calees juste a cote du bloc de lecture (demi-largeur 500 px) : elles ne
   passent jamais sous le texte, a aucune largeur. En dessous de 1200 px il
   n'y a pas de marge pour les recevoir, elles ne s'affichent pas du tout.
   ⚠️ Le motif est DETOURE, pas une vignette rectangulaire : la premiere
   version fabriquait son alpha depuis la luminance et laissait un voile gris
   sur tout le rectangle. Les quatre coins sont a alpha 0, verifie. Le fichier
   est cadre sur la forme : ses proportions (260x447) commandent celles des
   blocs ci-dessous, a ne pas modifier separement.
   Motif produit par `tools/visuels/generer-identite-ream.py`. */
@media (min-width:1200px){
  /* 🔴 [15/09] LES DEUX ARCHERS EN FILIGRANE SONT RETIRES, decision de Matthias.
     Motif : on voyait la figure COUPEE, et la mesure le confirme au lieu de le
     supposer. `assets/fond-archer.webp` fait 260x447 et la figure touche son
     propre cadre : 52 releves de bord sur 204 sont a l'opacite pleine, les
     coins a zero. Ce n'etait donc pas un halo de detourage mais un VRAI
     rognage, tranche par le bord du fichier. S'y ajoutait une seconde coupe :
     l'`overflow-x:clip` ci-dessous retranchait la figure de droite vers 1280 px.
     🔑 A NE PAS REJOUER : une figure rognee posee en filigrane finit toujours
     par montrer sa coupe a une largeur ou a une autre. Un fond decoratif doit
     etre sans bord par construction (motif qui se repete, degrade, ou image
     pleine largeur qui deborde des deux cotes), ou alors s'eteindre dans un
     masque. L'`overflow-x:clip` part avec le motif : il n'existait que pour lui,
     et il ne reste rien qui deborde. `position:relative` est conserve, le
     `position:sticky` du portrait en depend. */
  .values,.lr-main{position:relative}

}

/* 🏞️ LE BANDEAU PLEINE LARGEUR DE `story.html`, en ouverture du recit.
   Il remplace les archers en filigrane retires le 15/09. Le principe tient en
   une phrase : il DEBORDE des deux cotes, donc il n'a aucun bord a montrer,
   et c'est ce qui le rend « fluide » la ou une figure rognee ne l'etait pas.
   🔑 Il est pose en ELEMENT DE PREMIER NIVEAU, hors de `.wrap`, et pas en
   `width:100vw` avec une marge negative : le `100vw` compte la barre de
   defilement, ce qui recree une barre horizontale sur bureau. Pleine largeur
   par construction, aucun calcul a maintenir.
   Place entre les valeurs et le recit plutot qu'au milieu du texte : couper
   `.lr-main` en deux couterait le `position:sticky` du portrait sur la
   seconde moitie, et laisserait la gouttiere de droite vide, c'est-a-dire
   exactement le defaut qu'on repare. */
.lr-band{margin:0;background:#171009;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lr-band img{display:block;width:100%;height:clamp(200px,28vw,420px);
  object-fit:cover;object-position:center 52%}

/* Cette tete de page a change deux fois. Elle a d'abord ete un aplat sombre,
   que les gerants ont trouve vide. Elle a ensuite porte l'enseigne, ce qui
   reglait le vide mais rejouait LA PHOTO DU PREMIER ECRAN DE L'ACCUEIL :
   une page interieure qui reprend l'image de la page d'accueil ne devient
   jamais la page de quelqu'un. Ecartee par Matthias le 14/09.
   Elle porte maintenant l'extraction : de l'or qui coule sur du presque noir,
   la palette exacte de la marque, avec une moitie gauche assez sombre pour
   que le titre s'y pose sans lutter. Choisie en montant les quatre candidates
   en bandeau complet, voile et titre compris, plutot qu'en jugeant des
   vignettes. Recadrage decrit dans `tools/photos-ream-vraies.py`. */
.lr-hero{position:relative;isolation:isolate;color:#F7F1E4;
  padding:var(--s5) 0 var(--s4);border-bottom:1px solid rgba(247,241,228,.14);
  background:#171009 url('assets/photos/histoire.webp') center 50%/cover no-repeat}
.lr-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(23,16,9,.90) 0%,rgba(23,16,9,.80) 45%,
    rgba(23,16,9,.95) 100%)}
.lr-hero .seal img{width:clamp(88px,9vw,120px);
  filter:drop-shadow(0 16px 38px rgba(0,0,0,.55))}
.lr-hero .eyebrow{display:block;margin:var(--s3) 0 0;color:var(--gold-lt)}
.lr-hero h1{font-family:var(--display);font-weight:600;line-height:1.02;letter-spacing:-.025em;
  font-size:clamp(34px,5.8vw,64px);margin:10px 0 0;max-width:15ch}

.lr-main{padding:var(--s6) 0}
.lr-portrait{margin:0 auto var(--s5);max-width:260px;text-align:center}
.lr-portrait figcaption{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.5}

/* Le corps etait en --muted : 5,5:1 sur le sable, donc conforme, mais 840
   mots en gris chaud a cote de titres en encre donnent une page qui a l'air
   inachevee. Passe en --ink (14,3:1). */
.lr-body p{font-size:18px;line-height:1.78;margin:0 0 var(--s3);max-width:none;color:var(--ink)}

/* OUVERTURE. La lettrine a ete ECARTEE par les gerants le 14/09. Elle est
   remplacee par la salutation elle-meme, mise en Fraunces : la page s'ouvre
   sur « Hi, I'm Siv » et se ferme sur « Welcome to Ream Cafe », deux fois sa
   voix, ce qui tient les deux bouts du recit. */
.lr-body p.lr-open{font-family:var(--display);color:var(--ink);
  font-size:clamp(21px,2.9vw,28px);line-height:1.34;margin:0 0 var(--s4);
  text-wrap:balance}
/* Les deux phrases sur lesquelles tout le texte se pose. */
.lr-body p.lr-lift,.lr-body p.lr-welcome{font-family:var(--display);color:var(--ink)}
.lr-body p.lr-lift{font-size:clamp(22px,3.2vw,30px);line-height:1.3;margin:var(--s3) 0 var(--s4)}
.lr-body p.lr-welcome{font-size:clamp(20px,2.8vw,26px);margin-top:var(--s4)}

.values{background:var(--sand-2);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:var(--s5) 0}
.values h2{font-family:var(--display);font-weight:600;font-size:clamp(19px,2.6vw,24px);
  line-height:1.32;margin:0 0 var(--s3);max-width:34em}
.values ul{list-style:none;margin:0;padding:0}
.values li{display:grid;grid-template-columns:160px minmax(0,1fr);gap:var(--s2);
  align-items:baseline;padding:14px 0;border-top:1px solid var(--line)}
.values li:first-child{border-top:0}
.values b{font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold)}
.values span{color:var(--muted);line-height:1.6}

.lr-note{background:var(--sand-2);border:1px solid var(--line);border-radius:6px;
  padding:var(--s3);margin:var(--s5) 0 0}
.lr-note h2{font-family:var(--display);font-weight:600;font-size:19px;margin:0 0 10px}
.lr-note p{color:var(--muted);font-size:15px;line-height:1.7;margin:0;max-width:none}

.lr-main .cta-line{display:flex;flex-wrap:wrap;gap:12px;margin:var(--s5) 0 0}

.foot-story{margin:12px 0 0}
.foot-story a{color:var(--gold-lt);font-size:14px;font-weight:700;text-decoration:none}
.foot-story a:hover{text-decoration:underline}

@media (max-width:560px){
  .lr-main{padding:var(--s5) 0}
  .lr-body p{font-size:17px}
  .values li{grid-template-columns:minmax(0,1fr);gap:4px}
}

/* Sur telephone, la barre d'une page interieure porte trois blocs (retour,
   navigation, commande) la ou l'accueil n'en a que deux, et a 390 px les trois
   deviennent serres. La navigation saute, le retour et la commande restent.
   ⚠️ Pour VERIFIER un rendu telephone, passer la page dans une iframe de la
   largeur voulue : `--window-size=390` ne suffit pas, Chrome headless rend
   quand meme dans un viewport de 500 px et se contente de tronquer l'image,
   ce qui fait croire a un debordement qui n'existe pas. */
@media (max-width:560px){
  .page-story .bar .nav,.page-order .bar .nav{display:none}
  .bar .back{padding:0 13px;letter-spacing:.1em}
}