/* =============================================================
   Tonton Ville — carte numérique
   Transposition fidèle, page par page, de la carte imprimée
   (voir design_ref/page_01..16.png : c'est la maquette).
   Typo : Bitter (slab serif, OFL), auto-hébergée, repli Georgia.
   Palette : rouge chéchia, crème, doré, sarcelle, olive.
   CSP style-src 'self' : aucun style inline nulle part.
   ============================================================= */

/* ---------- Bitter, latin, variable (wght 400–700) ---------- */
@font-face{
  font-family:'Bitter';
  src:url('../fonts/bitter-var.woff2') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Bitter';
  src:url('../fonts/bitter-italic-var.woff2') format('woff2');
  font-weight:400 700;
  font-style:italic;
  font-display:swap;
}
/* Repli aux métriques de Bitter : Georgia est 22 % plus large, ce qui faisait passer
   « Tonton Ville » sur deux lignes au démarrage puis sur une seule à l'arrivée de Bitter.
   size-adjust est ignoré par les anciens Safari (comportement d'avant, sans régression). */
@font-face{
  font-family:'Bitter-repli';
  src:local('Georgia');
  size-adjust:82%;
  font-display:swap;
}

:root{
  /* --- palette de la carte imprimée --- */
  --creme:      #F2E9D9;   /* fond de page */
  --creme-2:    #EDE0C6;   /* encadrés, fond des QR */
  --encre:      #2D2521;   /* titres et texte */
  --encre-doux: rgba(45,37,33,.66);
  --rouge:      #8B2332;   /* rouge chéchia : couverture, bandes */
  --rouge-vif:  #A94836;   /* eyebrows, descriptions italiques */
  --or:         #C89B3F;   /* filets et illustrations dorées */
  --or-pale:    #E8D9B5;
  --sarcelle:   #2E6470;   /* la mer, page 16 */
  --olive:      #77804C;   /* le terroir, la maison */
  --olive-doux: #8A8A57;   /* légendes olive */
  --filet:      rgba(45,37,33,.2);
  --filet-fin:  rgba(45,37,33,.12);
  --hairline:   rgba(200,155,63,.45);   /* filets fins dorés entre plats */

  --serif: 'Bitter', 'Bitter-repli', Georgia, 'Times New Roman', serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-title: var(--serif);
  --font-body:  var(--serif);
  --font-caps:  var(--sans);

  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --tap: 48px;

  color-scheme: only light;   /* la carte est un objet papier : pas de mode sombre */
}

/* piles CJK / arabe distinctes — inchangées (contrat langues) */
html[lang="zh"]{ --font-body:"PingFang SC","Noto Sans CJK SC","Source Han Sans SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
                 --font-title:"Songti SC","Noto Serif CJK SC","STSong","PingFang SC",serif; }
html[lang="ja"]{ --font-body:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans CJK JP","Yu Gothic","Meiryo",sans-serif;
                 --font-title:"Hiragino Mincho ProN","Noto Serif CJK JP","Yu Mincho",serif; }
/* Le coréen ne se coupe pas au milieu d'un mot : keep-all respecte les eojeol.
   Les valeurs latines (SSID, mot de passe) gardent leur break-all local, plus spécifique. */
html[lang="ko"]{ word-break:keep-all; overflow-wrap:break-word; }

html[lang="ko"]{ --font-body:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","Nanum Gothic",sans-serif;
                 --font-title:"Nanum Myeongjo","Noto Serif KR","Apple SD Gothic Neo",serif; }
html[lang="ar"]{ --font-body:"Geeza Pro","Noto Naskh Arabic","Al Bayan","Segoe UI",Tahoma,sans-serif;
                 --font-title:"Al Bayan","Noto Naskh Arabic","Geeza Pro",Tahoma,serif; }

/* Le chinois, le japonais et l'arabe n'ont PAS d'italique. Là où la carte en
   emploie une (descriptions, notes, légendes, remerciements), le navigateur
   fabrique une pente synthétique : c'est une faute de typographie et ça se
   lit mal. On la neutralise pour ces trois écritures — y compris sur les mots
   latins qu'elles contiennent, comme le veut l'usage. */
html[lang="zh"] *, html[lang="ja"] *, html[lang="ko"] *, html[lang="ar"] *{ font-style:normal; }

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; height:100%;
  background:var(--creme);
  color:var(--encre);
  font-family:var(--font-body);
  font-size:16px; line-height:1.45;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
body{ overflow:hidden; -webkit-tap-highlight-color:rgba(139,35,50,.14); }
body.is-loading *{ transition:none !important; }

h1,h2,h3,h4,p,ul,li,figure,figcaption{ margin:0; padding:0; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:var(--rouge); }

/* petites capitales espacées — la voix typographique des étiquettes de la carte */
.caps{
  font-family:var(--font-caps);
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.screen{ position:fixed; inset:0; display:none; flex-direction:column; }
.screen.is-active{ display:flex; }
[hidden]{ display:none !important; }

/* =============================================================
   1. ENTRÉE — reprend la couverture : rouge, bande sarcelle,
   rosace dorée, nom en slab crème.
   ============================================================= */
.screen--lang{ background:var(--rouge); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.cover-edge{
  position:absolute; top:0; bottom:0; left:0; width:14px;
  background:var(--sarcelle);
}
html[dir="rtl"] .cover-edge{ left:auto; right:0; }
.cover-rosace{ position:absolute; pointer-events:none; }
.cover-rosace svg{ display:block; width:100%; height:100%; }
.cover-rosace--screen{
  top:-38px; right:-34px; width:190px; height:190px; opacity:.9;
}
html[dir="rtl"] .cover-rosace--screen{ right:auto; left:-34px; }

.lang-inner{
  position:relative;
  min-height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--sat) + 44px) calc(var(--sar) + 34px) calc(var(--sab) + 26px) calc(var(--sal) + 34px);
  text-align:start;
  max-width:560px; margin:0 auto; width:100%;
}
.cover-house{
  font-family:var(--font-caps); font-weight:700;
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--or);
}
.cover-name{
  font-family:var(--serif); font-weight:700;
  color:var(--creme);
  line-height:1.02;
}
.cover-name--screen{ margin-top:18px; font-size:clamp(44px, 13vw, 64px); }
.cover-rule{ margin-top:20px; width:150px; height:2px; background:var(--or); }
.cover-tag{
  margin-top:14px;
  font-family:var(--serif); font-style:italic;
  font-size:18px; color:var(--creme);
}

.lang-title{
  margin-top:34px; margin-bottom:12px;
  font-family:var(--font-caps);
  font-size:11px; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--or);
}
.lang-grid{
  /* minmax(0,…) : sans cela le contenu impose sa largeur minimale et la grille déborde de 3 px à 320 px */
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:9px;
  width:100%;
}
.lang-btn{
  width:100%; min-height:56px;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  text-align:start;
  background:transparent;
  border:1px solid rgba(242,233,217,.4);
  color:var(--creme);
  transition:background .12s ease, border-color .12s ease;
}
.lang-btn:active{ background:rgba(242,233,217,.12); }
.lang-btn.is-current{ border-color:var(--or); box-shadow:inset 0 0 0 1px var(--or); }
.lang-btn__flag{ font-size:21px; line-height:1; flex:none; }
.lang-btn__label{ font-size:16px; line-height:1.2; font-weight:600; }
.lang-btn[lang="zh"] .lang-btn__label{ font-family:"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif; font-size:17px; }
.lang-btn[lang="ja"] .lang-btn__label{ font-family:"Hiragino Sans","Noto Sans CJK JP","Yu Gothic",sans-serif; font-size:17px; }
.lang-btn[lang="ko"] .lang-btn__label{ font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif; font-size:17px; }
.lang-btn[lang="ar"] .lang-btn__label{ font-family:"Geeza Pro","Noto Naskh Arabic",Tahoma,sans-serif; font-size:18px; }
.lang-foot{
  margin-top:26px;
  font-family:var(--font-caps); font-weight:700;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(242,233,217,.7);
}

/* panneau langue dans le livre : mêmes boutons, sur crème */
.lang-grid--sheet .lang-btn{ border-color:var(--filet); color:var(--encre); background:#F7F0E1; }
.lang-grid--sheet .lang-btn:active{ background:#fff; }
.lang-grid--sheet .lang-btn.is-current{ border-color:var(--rouge); box-shadow:inset 0 0 0 1px var(--rouge); }

/* =============================================================
   2. ÉCRAN HISTOIRE — la blague de traduction d'abord, en grand
   et avec chaleur, puis le récit, le portrait, le Wi-Fi.
   ============================================================= */
.screen--story{ background:var(--creme); }
.story-scroll{
  flex:1; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:calc(var(--sat) + 14px) calc(var(--sar) + 24px) 16px calc(var(--sal) + 24px);
  max-width:620px; width:100%; margin:0 auto;
}
.story-back{
  min-height:var(--tap); min-width:var(--tap);
  margin-left:-12px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:22px; color:var(--encre-doux);
}
html[dir="rtl"] .story-back{ margin-left:0; margin-right:-12px; }
html[dir="rtl"] .story-back span{ display:inline-block; transform:scaleX(-1); }
/* la blague d'excuse : un mot d'accueil, pas une mention légale */
.story-disclaimer{
  margin:10px 0 6px;
  padding:18px 20px 18px 18px;
  background:var(--creme-2);
  border:1px solid var(--hairline);
  border-left:3px solid var(--rouge-vif);
  border-radius:2px;
  font-family:var(--serif); font-style:italic;
  font-size:17px; line-height:1.7; letter-spacing:.005em;
  color:var(--encre);
}
/* lisibilité mobile : pas d'italique synthétique pour les écritures non latines, interlignage adapté */
html[lang="zh"] .story-disclaimer, html[lang="ja"] .story-disclaimer, html[lang="ko"] .story-disclaimer{ font-style:normal; font-size:16px; line-height:1.85; letter-spacing:.02em; }
html[lang="ar"] .story-disclaimer{ font-style:normal; font-size:18px; line-height:1.9; }
html[dir="rtl"] .story-disclaimer{ border-left:1px solid var(--hairline); border-right:3px solid var(--rouge-vif); padding:18px 18px 18px 20px; }
.story-eyebrow{
  margin-top:22px;
  font-family:var(--font-caps); font-weight:700;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--rouge-vif);
}
.story-title{
  margin-top:6px;
  font-family:var(--font-title); font-weight:700;
  font-size:clamp(27px, 7.6vw, 34px); line-height:1.08;
  color:var(--encre);
}
.story-duo{ margin-top:14px; }
.story-body p{
  font-family:var(--serif);
  font-size:14px; line-height:1.62;
  margin-bottom:12px;
}
.story-portrait{ margin:6px 0 0; max-width:280px; }
.story-portrait img{ width:100%; height:auto; border:1px solid var(--filet-fin); }
.story-portrait figcaption{ margin-top:8px; }
.wifibox{
  margin-top:18px;
  padding:14px 16px;
  background:var(--rouge);
  color:var(--creme);
}
.wifibox__title{
  font-family:var(--font-caps); font-weight:700;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--creme);
}
.wifibox__body{ margin-top:10px; display:flex; gap:14px; align-items:flex-start; }
.qrframe--creme{ background:var(--creme-2); }
.wifibox__grid{ margin:0; }
.wifibox__grid dt{
  font-family:var(--font-caps); font-weight:700;
  font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(242,233,217,.75);
  margin-top:6px;
}
.wifibox__grid dt:first-child{ margin-top:0; }
.wifibox__grid dd{
  margin:1px 0 0;
  font-family:var(--font-caps); font-weight:700;
  font-size:13px; letter-spacing:.06em;
  color:var(--creme);
  word-break:break-all;
}
.wifibox__hint{
  margin-top:10px;
  font-family:var(--serif); font-style:italic;
  font-size:11px; color:rgba(242,233,217,.85);
}
.story-actions{
  flex:none;
  padding:12px calc(var(--sar) + 16px) calc(12px + var(--sab)) calc(var(--sal) + 16px);
  border-top:1px solid var(--filet);
  background:var(--creme);
}
.btn--primary{
  width:100%;
  background:var(--rouge); color:var(--creme);
  border:1px solid var(--rouge);
  font-family:var(--serif); font-weight:700;
}
.btn--primary:active{ background:#6f1b28; }
@media (min-width:520px){
  .story-duo{ display:grid; grid-template-columns:1.2fr .8fr; gap:18px; align-items:start; }
  .story-actions{ max-width:620px; width:100%; margin:0 auto; }
}

/* =============================================================
   3. LE LIVRE
   ============================================================= */
.screen--book{ background:#E4D7BE; }

.topbar{
  flex:none;
  display:flex; align-items:center; gap:6px;
  padding:calc(var(--sat) + 4px) calc(var(--sar) + 6px) 4px calc(var(--sal) + 6px);
  background:#E4D7BE;
  border-bottom:1px solid var(--filet-fin);
}
.topbar__title{
  flex:1; text-align:center;
  font-family:var(--serif); font-weight:700;
  font-size:15px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rouge);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.iconbtn{
  min-height:var(--tap); min-width:var(--tap); padding:4px 8px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--encre);
}
.iconbtn:active{ background:rgba(45,37,33,.08); }
.iconbtn__glyph{ font-size:19px; line-height:1.15; }
.iconbtn__txt{
  font-family:var(--sans); font-size:10px; letter-spacing:.05em;
  color:var(--encre-doux);
  max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.book{
  position:relative; flex:1; min-height:0;
  margin:0 calc(var(--sar) + 7px) 0 calc(var(--sal) + 7px);
  perspective:1400px;
}
.book__stage{ position:absolute; inset:0; }

.page{
  position:absolute; inset:0;
  display:none; flex-direction:column;
  background:var(--creme);
  border:1px solid var(--filet-fin);
  overflow:hidden;
}
.page.is-current{ display:flex; }
.page__scroll{
  position:relative;
  /* z-index explicite : crée le contexte d'empilement qui retient les
     illustrations en z-index:-1. Sans lui elles remontent et sont peintes
     SOUS le fond crème de .page — 4 illustrations étaient invisibles. */
  z-index:0;
  flex:1; min-height:0;
  display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  padding:16px 24px 18px;
}
/* les illustrations absolues passent sous le texte, au-dessus du fond */
.deco--corner, .deco--edge, .deco--side{ z-index:-1; }

/* accents par ton (filet de titre, folio) */
.tone-rouge{ color:var(--rouge); }
.tone-rougevif{ color:var(--rouge-vif); }
.tone-or{ color:var(--or); }
.tone-mer{ color:var(--sarcelle); }
.tone-olive{ color:var(--olive-doux); }

/* --- en-tête courant --- */
.run{
  flex:none;
  font-family:var(--font-caps); font-weight:700;
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--rouge-vif);
  padding-bottom:10px;
}

/* --- en-tête de page (eyebrow, titre, sous-titre, filet) --- */
.ph{ flex:none; padding-bottom:14px; }
.ph__eyebrow{
  font-family:var(--font-caps); font-weight:700;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--rouge-vif);
}
.ph__eyebrow--or{ color:var(--or); }
.ph__eyebrow--mer{ color:var(--sarcelle); }
.ph__eyebrow--olive{ color:var(--olive-doux); }
.ph__title{
  margin-top:6px;
  font-family:var(--font-title); font-weight:700;
  font-size:clamp(26px, 7.4vw, 34px); line-height:1.06;
  color:var(--encre);
}
.ph__sub{
  margin-top:8px;
  font-family:var(--serif); font-style:italic;
  font-size:13.5px; line-height:1.45;
  color:var(--encre);
}
.ph__rule{ margin-top:12px; height:2px; background:var(--rouge); }
.ph__rule--or{ background:var(--or); }
.ph__rule--mer{ background:var(--sarcelle); }
.ph__rule--olive{ background:var(--olive); }

/* --- colonnes --- */
.cols{ display:grid; grid-template-columns:1fr; gap:0 26px; }
/* Deux colonnes seulement quand la place existe. Sur téléphone, deux
   colonnes de 150 px serraient noms et prix : c'était le « trop condensé ». */
.cols--2{ grid-template-columns:1fr; }
@media (min-width:520px){ .cols--2{ grid-template-columns:1fr 1fr; } }

/* Objet de rubrique dans l'en-tête de page : colonne réservée à côté du
   titre, jamais par-dessus. La grille suit dir : en arabe l'objet passe à
   gauche sans que le dessin soit retourné. */
.ph--obj{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; }
.ph--obj > *{ grid-column:1; }
.ph--obj > .tv-objet{ grid-column:2; grid-row:1 / span 3; align-self:center; }
.ph--obj > .ph__rule{ grid-column:1 / -1; }
/* Valeurs d'objets.css (pack du 10/09), reprises telles quelles. */
.tv-objet{
  display:block; width:clamp(64px, 18vw, 84px); aspect-ratio:4/3; height:auto;
  object-fit:contain; flex:none; opacity:.78; pointer-events:none;
}
.tv-objet--rameau{ width:160px; max-width:45%; opacity:.55; margin:18px auto 0; }

/* --- sous-section --- */
.sec{ padding-top:18px; }
.sec__head{ padding-bottom:6px; border-bottom:2px solid var(--rouge); margin-bottom:4px; }
.sec__name{
  font-family:var(--font-caps); font-weight:700;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--rouge);
}
.sec__fr{
  font-family:var(--serif); font-size:10.5px; color:var(--encre-doux);
  direction:ltr; unicode-bidi:isolate; text-align:start;
  letter-spacing:.06em; text-transform:uppercase;
}
.sec--mer .sec__head{ border-color:var(--sarcelle); }
.sec--mer .sec__name{ color:var(--sarcelle); }
.sec--or .sec__head{ border-color:var(--or); }
.sec--or .sec__name{ color:var(--or); }
.sec--olive .sec__head{ border-color:var(--olive); }
.sec--olive .sec__name{ color:var(--olive-doux); }
/* variante « LES MEZZAS DE LA MER » : italique sarcelle, sans filet plein */
.sec--mer-italic .sec__head{ border-bottom:0; padding-bottom:0; margin-bottom:2px; }
.sec--mer-italic .sec__name{
  font-family:var(--serif); font-style:italic;
  letter-spacing:.14em; font-size:12px;
  color:var(--sarcelle);
}
/* variante « APRÈS LE DESSERT » : italique gris, discret */
.sec--grey-italic .sec__head{ border-bottom:0; padding-bottom:0; margin-bottom:2px; }
.sec--grey-italic .sec__name{
  font-family:var(--serif); font-style:italic;
  letter-spacing:.14em; font-size:12px;
  color:var(--encre-doux);
}
/* note sous l'en-tête de sous-section (ex. les Ojjas) */
.sec__note{
  margin-top:6px;
  font-family:var(--serif); font-style:italic;
  font-size:12px; line-height:1.45;
  color:var(--encre);
}

/* --- un plat : nom serif à gauche, prix gras à droite --- */
.dishes{ }
.dish{ padding:11px 0; }
.dishes--lined .dish{ border-bottom:1px solid var(--hairline); }
.dishes--lined .dish:last-child{ border-bottom:0; }
.dish__row{ display:flex; align-items:baseline; gap:12px; }
.dish__name{
  flex:1; min-width:0;
  font-family:var(--serif); font-weight:600;
  /* Lisibilité au téléphone SANS casser la composition : 15 px est le point
     d'équilibre mesuré. À 16 px, quatre pages du livre débordaient de leur
     cadre sur un écran de 390 x 844 et il fallait scroller dans une page
     qu on est censé tourner. */
  font-size:15px; line-height:1.32;
  color:var(--encre);
}
html[lang="ar"] .dish__name{ font-size:16px; }
.dish__price{
  flex:none;
  font-family:var(--serif); font-weight:700;
  font-size:15px;
  color:var(--encre);
  direction:ltr; unicode-bidi:isolate;
  font-variant-numeric:tabular-nums;
  -webkit-font-feature-settings:"tnum" 1;
  font-feature-settings:"tnum" 1;
  white-space:nowrap;
}
.dish__price--accent{ color:var(--rouge); }
.dish__price--market{
  font-size:12.5px; white-space:normal; max-width:96px; text-align:end;
}
/* ligne 2 : name_fr toujours visible hors français — le serveur lit celle-là */
.dish__fr{
  margin-top:1px;
  font-family:'Bitter', Georgia, serif;
  font-size:12.5px; color:var(--encre-doux);
  direction:ltr; unicode-bidi:isolate; text-align:start;
}
html[dir="rtl"] .dish__fr{ text-align:right; }
/* description : italique rouge, petit — exactement la carte */
.dish__desc{
  margin-top:3px;
  font-family:var(--serif); font-style:italic;
  font-size:12.5px; line-height:1.45;
  color:var(--rouge-vif);
}
/* « Prix pour 100 grammes » sous le prix, aligné à droite */
.dish__per100{
  margin-top:1px;
  font-family:var(--serif); font-style:italic;
  font-size:10px; line-height:1.3;
  color:var(--encre-doux);
  text-align:end;
}

/* note partagée par plusieurs plats (garniture, couscous du jour…) */
.dish-note{
  padding:4px 0 9px;
  font-family:var(--serif); font-style:italic;
  font-size:12.5px; line-height:1.5;
  color:var(--rouge-vif);
}
.dishes--lined .dish-note{ border-bottom:1px solid var(--hairline); }
.dishes--lined .dish-note:last-child{ border-bottom:0; }

/* --- plats « belles pièces » (page 9) : gros nom, tiret coloré, prix rouge --- */
.dish--feature{ padding:16px 0; }
.dish--feature .dish__dash{ width:34px; height:3px; margin-bottom:10px; background:var(--olive); }
.dish--feature.dish--alt .dish__dash{ background:var(--or); }
.dish--feature .dish__name{ font-size:19px; font-weight:700; }
.dish--feature .dish__price{ font-size:18px; color:var(--rouge); }
.dish--feature .dish__desc{
  font-size:12.5px; color:var(--encre); margin-top:6px;
}
.dish--feature .dish__desc--red{ color:var(--rouge-vif); }

/* --- encadrés (note de pesée p7, réservation p10) --- */
.pnote{
  margin-top:14px;
  padding:10px 14px;
  background:var(--creme-2);
  border:1px solid var(--hairline);
  font-family:var(--serif); font-style:italic;
  font-size:12px; line-height:1.5;
  color:var(--encre);
}
.pnote--bar{
  background:transparent; border:0;
  border-left:2px solid var(--encre);
  padding:6px 0 6px 16px;
}
html[dir="rtl"] .pnote--bar{ border-left:0; border-right:2px solid var(--encre); padding:6px 16px 6px 0; }
/* renvoi italique simple (p6 : « voir À réserver page 10 ») */
.pxref{
  margin-top:18px;
  font-family:var(--serif); font-style:italic;
  font-size:13px; line-height:1.5;
  color:var(--encre);
}

/* --- pied de page : devise + folio --- */
.pfoot{
  margin-top:auto; padding-top:18px;
  flex:none;
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.pfoot__cur{
  font-family:var(--font-caps);
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--encre-doux);
}
.pfoot__folio{
  font-family:var(--font-caps); font-weight:700;
  font-size:10.5px; letter-spacing:.14em;
  color:var(--rouge-vif);
  direction:ltr; unicode-bidi:isolate;
}
.pfoot__folio--or{ color:var(--or); }
.pfoot__folio--olive{ color:var(--olive-doux); }
.pfoot__folio--mer{ color:var(--sarcelle); }

/* --- bande rouge en pied de page (p12 : BOUTEILLES · PRIX EN TND) --- */
.pband{
  margin:18px -24px -18px;
  padding:16px 22px 14px;
  background:var(--rouge);
  color:var(--creme);
  position:relative;
}
.pband__label{
  font-family:var(--font-caps); font-weight:700;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--creme);
  margin-top:26px;
}
.pband__folio{
  position:absolute; bottom:10px; right:18px;
  font-family:var(--font-caps); font-weight:700;
  font-size:10.5px; color:var(--creme);
  direction:ltr; unicode-bidi:isolate;
}
html[dir="rtl"] .pband__folio{ right:auto; left:18px; }
.pband__deco{ position:absolute; top:-34px; right:34px; width:96px; height:86px; }
html[dir="rtl"] .pband__deco{ right:auto; left:34px; }
.pband__deco svg{ display:block; width:100%; height:100%; }

/* --- illustrations filaires dorées --- */
.deco{ pointer-events:none; }
.deco svg{ display:block; width:100%; height:100%; }
.deco--corner{
  position:absolute; bottom:52px; right:22px;
  width:120px; height:64px; opacity:.95;
}
html[dir="rtl"] .deco--corner{ right:auto; left:22px; }
.deco--edge{
  position:absolute; top:38%; right:-6px; width:40px; height:260px;
  opacity:.8;
}
html[dir="rtl"] .deco--edge{ right:auto; left:-6px; }
.deco--center{
  margin:22px auto 0; width:170px; height:120px;
}
.deco--wide{
  margin:26px 0 0; width:100%; max-width:420px; height:80px;
  align-self:center;
}
.deco--side{
  position:absolute; bottom:110px; right:14px; width:96px; height:auto;
  opacity:.92;
}
/* illustration bitmap extraite de la carte (trait fin, fond transparent) */
.illus{ display:block; width:100%; height:auto; }
html[dir="rtl"] .deco--side{ right:auto; left:16px; }

/* =============================================================
   Pages spéciales
   ============================================================= */

/* ---------- page 1 : couverture ---------- */
.pg--cover{ background:var(--rouge); color:var(--creme); }
.pg--cover .page__scroll{ padding:0; }
.cover-in{
  position:relative; flex:1; min-height:0;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:24% 34px 54px calc(34px + 14px);
}
html[dir="rtl"] .cover-in{ padding:60px calc(34px + 14px) 54px 34px; }
.cover-rosace--page{ top:-30px; right:-28px; width:200px; height:200px; }
html[dir="rtl"] .cover-rosace--page{ right:auto; left:-28px; }
.cover-name--page{ font-size:clamp(46px, 14vw, 72px); margin-top:20px; }
.cover-values{
  margin-top:12px;
  font-family:var(--font-caps); font-weight:700;
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--or);
}
.cover-rule--short{ margin-top:14px; width:96px; height:1px; background:var(--or); opacity:.75; }
.cover-foot{
  position:absolute; bottom:26px; left:48px; right:34px;
  font-family:var(--font-caps); font-weight:700;
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--creme);
  opacity:.92;
}

/* ---------- page 2 : Chez Ange ---------- */
.duo{ display:grid; grid-template-columns:1.15fr .85fr; gap:18px; align-items:start; padding-top:6px; }
.prose p{
  font-family:var(--serif);
  font-size:12.5px; line-height:1.62;
  margin-bottom:12px;
}
.prose p:last-child{ margin-bottom:0; }
.portrait{ }
.portrait img{ width:100%; height:auto; border:1px solid var(--filet-fin); }
.portrait figcaption{ margin-top:10px; }
.portrait__cap{
  font-family:var(--font-caps); font-weight:700;
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--olive-doux);
  line-height:1.5;
}
.portrait__sub{
  margin-top:4px;
  font-family:var(--serif); font-style:italic;
  font-size:11px; color:var(--encre);
}
.street{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; margin-top:18px; }
.street img{ width:150px; height:auto; border:1px solid var(--filet-fin); }
.street__cap{
  margin-top:6px;
  font-family:var(--font-caps); font-weight:700;
  font-size:8.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rouge-vif);
}
.street__quote{
  font-family:var(--serif); font-style:italic;
  font-size:13px; line-height:1.55;
  color:var(--encre);
}

/* ---------- page 3 : Notre table + bande Wi-Fi ---------- */
.pg--table .prose p{ font-size:13.5px; }
.redband{
  margin:auto -24px -18px;   /* pleine largeur, colle au bas de page */
  padding:18px 22px calc(14px);
  background:var(--rouge);
  color:var(--creme);
  position:relative;
}
.redband__grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.redband__title{
  font-family:var(--font-caps); font-weight:700;
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--creme);
  display:flex; align-items:center; gap:8px;
  min-height:22px;
}
.redband__title svg{ width:20px; height:16px; flex:none; }
.redband__body{ margin-top:10px; display:flex; gap:12px; align-items:flex-start; }
.qrframe{
  flex:none; padding:6px; background:var(--creme-2);
}
.qrframe img{ width:76px; height:76px; }
.redband__net p{
  font-family:var(--font-caps); font-weight:700;
  font-size:10.5px; letter-spacing:.1em;
  color:var(--creme);
  line-height:1.7;
  word-break:break-all;
}
.redband__hint{
  margin-top:8px;
  font-family:var(--serif); font-style:italic;
  font-size:10.5px; color:rgba(242,233,217,.85);
}
.langshort{
  display:block; width:100%;
  border:1px solid rgba(242,233,217,.5);
  padding:10px 12px;
  text-align:start;
  color:var(--creme);
}
.langshort:active{ background:rgba(242,233,217,.12); }
.langshort__codes{
  font-family:var(--font-caps); font-weight:700;
  font-size:11px; letter-spacing:.12em;
  line-height:1.7;
}
.langshort__hint{
  margin-top:6px;
  font-family:var(--serif); font-style:italic;
  font-size:10.5px; color:rgba(242,233,217,.85);
}
.redband__press{ margin-top:16px; padding-top:12px; border-top:1px solid rgba(242,233,217,.3); }
.redband__pressnames{
  margin-top:6px;
  font-family:var(--font-caps); font-weight:700;
  font-size:10px; letter-spacing:.08em;
  color:var(--creme);
}
.redband__folio{
  position:absolute; bottom:8px; right:16px;
  font-family:var(--font-caps); font-weight:700;
  font-size:10px; color:var(--creme);
  direction:ltr; unicode-bidi:isolate;
}
html[dir="rtl"] .redband__folio{ right:auto; left:16px; }

/* ---------- page 15 : trois cartes ---------- */
.tricards{ display:flex; flex-direction:column; gap:14px; padding-top:8px; }
.tricard{
  border-radius:6px;
  padding:18px 20px;
  color:var(--creme);
  display:grid; grid-template-columns:64px 1fr; gap:16px; align-items:start;
}
.tricard--mer{ background:var(--sarcelle); }
.tricard--rouge{ background:#A0342F; }
.tricard--olive{ background:var(--olive); }
.tricard__icon{ padding-top:22px; }
.tricard__icon svg{ width:60px; height:44px; }
.tricard__label{
  font-family:var(--font-caps); font-weight:700;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--creme);
}
.tricard__txt{
  margin-top:10px;
  font-family:var(--serif);
  font-size:13px; line-height:1.55;
  color:var(--creme);
}
.pg--closing .pclose{
  margin-top:18px;
  font-family:var(--serif); font-style:italic;
  font-size:13px; line-height:1.5;
  color:var(--encre);
}

/* ---------- page 16 : clôture sarcelle + avis ---------- */
.pg--finale{ background:var(--sarcelle); color:var(--creme); }
.pg--finale .page__scroll{ padding:24px 30px 20px; }
.pg--finale .cover-edge{ width:10px; background:var(--rouge); }
.finale-rosace{ top:-26px; right:-30px; width:180px; height:180px; opacity:.95; }
html[dir="rtl"] .finale-rosace{ right:auto; left:-30px; }
.finale__name{
  margin-top:36px;
  font-family:var(--serif); font-weight:700;
  font-size:clamp(34px, 10vw, 46px); line-height:1;
  color:var(--creme);
}
.finale__eyebrow{
  margin-top:8px;
  font-family:var(--font-caps); font-weight:700;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--or);
}
.finale__invite{
  margin-top:34px;
  font-family:var(--serif); font-style:italic;
  font-size:15px; line-height:1.5;
  color:var(--creme);
}
.finale__cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap);
  margin-top:20px; padding:0 24px;
  background:var(--creme); color:var(--sarcelle);
  border:1px solid var(--creme);
  font-family:var(--serif); font-weight:700; font-size:15px;
  text-decoration:none;
  align-self:flex-start;
}
.finale__rule{ margin-top:34px; width:100%; height:1px; background:var(--or); opacity:.7; }
.finale__notices{ margin-top:16px; }
.finale__notices li{
  font-family:var(--serif); font-size:11.5px; line-height:1.5;
  color:rgba(242,233,217,.85);
  padding-top:4px;
}
.finale__thanks{
  margin-top:auto; padding-top:30px;
  font-family:var(--serif); font-weight:700;
  font-size:19px; color:var(--creme);
}
.finale__addr{
  margin-top:8px;
  font-family:var(--font-caps); font-weight:700;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--creme);
  direction:ltr; unicode-bidi:isolate; text-align:start;
}
html[dir="rtl"] .finale__addr{ text-align:right; }

/* =============================================================
   Navigation du livre — discrète, comme la carte papier :
   deux chevrons ancrés dans la barre de progression, jamais
   par-dessus le texte des pages (le swipe et le tap sur les
   bords restent les gestes principaux).
   ============================================================= */
.nav-edge{
  flex:none;
  width:44px; height:44px; min-width:44px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0;
  color:var(--encre-doux);
  font-size:22px; line-height:1;
  opacity:.7;
  transition:opacity .25s ease;
}
.nav-edge:active{ background:rgba(45,37,33,.07); color:var(--rouge); }
.nav-edge[disabled]{ opacity:.18; }
html[dir="rtl"] .nav-edge span{ display:inline-block; transform:scaleX(-1); }

/* --- couche d'animation (contrat flipbook.js : ne pas renommer) --- */
.book__flip{
  position:absolute; inset:0;
  pointer-events:none; z-index:5;
  -webkit-transform-style:preserve-3d; transform-style:preserve-3d;
  display:none;
}
.book__flip.is-running{ display:block; }
.flip-leaf{
  position:absolute; inset:0;
  -webkit-transform-style:preserve-3d; transform-style:preserve-3d;
  -webkit-transform-origin:0% 50%; transform-origin:0% 50%;
  will-change:transform;
}
html[dir="rtl"] .flip-leaf{ -webkit-transform-origin:100% 50%; transform-origin:100% 50%; }
.flip-face{
  position:absolute; inset:0; overflow:hidden;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  background:var(--creme);
  border:1px solid var(--filet);
}
.flip-face--back{ -webkit-transform:rotateY(180deg); transform:rotateY(180deg); }
.book.is-flat .book__flip{ perspective:none; }
.flat-slide{
  position:absolute; inset:0; overflow:hidden;
  background:var(--creme);
  border:1px solid var(--filet);
  will-change:transform;
}
/* les clones de pages spéciales gardent leur fond dans la couche d'animation */
.flip-face .pg--cover, .flat-slide .pg--cover{ background:var(--rouge); }
.flip-face .pg--finale, .flat-slide .pg--finale{ background:var(--sarcelle); }

/* --- progression (accueille aussi les chevrons de navigation) --- */
.progress{
  flex:none;
  display:flex; align-items:center; gap:8px;
  padding:2px calc(var(--sar) + 6px) calc(var(--sab) + 2px) calc(var(--sal) + 6px);
  background:#E4D7BE;
  border-top:1px solid var(--filet-fin);
}
.progress__bar{ flex:1; height:2px; background:rgba(45,37,33,.14); overflow:hidden; }
.progress__bar i{ display:block; height:100%; width:0; background:var(--rouge); transition:width .35s ease; }
.progress__label{
  font-family:var(--sans); font-size:11.5px; letter-spacing:.06em;
  color:var(--encre-doux);
  direction:ltr; unicode-bidi:isolate;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* =============================================================
   Panneaux (sommaire / langue)
   ============================================================= */
.sheet{ position:fixed; inset:0; z-index:40; display:flex; }
.sheet__backdrop{ position:absolute; inset:0; background:rgba(45,37,33,.5); }
.sheet__panel{
  position:relative; margin-top:auto; width:100%; max-height:84%;
  background:var(--creme);
  border-top:2px solid var(--rouge);
  padding:16px 18px calc(20px + var(--sab));
  padding-left:calc(18px + var(--sal));
  padding-right:calc(18px + var(--sar));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  animation:sheet-up .2s ease-out;
}
@keyframes sheet-up{ from{ transform:translateY(12%) } to{ transform:none } }
.sheet__title{
  font-family:var(--font-title); font-weight:700; font-size:21px;
  color:var(--rouge);
  padding-inline-end:52px; padding-right:52px;
  margin-bottom:10px;
}
html[dir="rtl"] .sheet__title{ padding-right:0; padding-left:52px; }
.sheet__close{
  position:absolute; top:10px;
  inset-inline-end:12px; right:12px;
  min-height:var(--tap); min-width:var(--tap); font-size:18px;
  border:0;
}
html[dir="rtl"] .sheet__close{ right:auto; left:12px; }
.btn{
  min-height:var(--tap); padding:0 20px;
  font-family:var(--sans); font-size:16px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn--ghost{ min-width:var(--tap); border:1px solid var(--filet); color:var(--encre-doux); }

.toc li + li{ border-top:1px solid var(--filet-fin); }
.toc__btn{ width:100%; min-height:50px; display:flex; align-items:center; gap:12px; padding:8px 2px; text-align:start; }
.toc__num{
  flex:none; width:26px;
  font-family:var(--font-caps); font-weight:700; font-size:11px;
  color:var(--rouge-vif);
  font-variant-numeric:tabular-nums;
  direction:ltr; unicode-bidi:isolate;
}
.toc__name{ flex:1; font-family:var(--serif); font-size:15.5px; font-weight:600; }
.toc__fr{
  display:block;
  font-family:'Bitter', Georgia, serif; font-size:11.5px; font-weight:400;
  color:var(--encre-doux);
  direction:ltr; unicode-bidi:isolate; text-align:start;
}
.toc__btn.is-current .toc__name{ color:var(--rouge); }

/* =============================================================
   Accessibilité & divers
   ============================================================= */
:focus-visible{ outline:2px solid var(--rouge); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

@media (min-width:620px){
  .book{ width:100%; max-width:620px; margin-left:auto; margin-right:auto; }
  .page__scroll{ padding-left:40px; padding-right:40px; }
  .pband{ margin-left:-40px; margin-right:-40px; padding-left:40px; padding-right:40px; }
  .redband{ margin-left:-40px; margin-right:-40px; padding-left:40px; padding-right:40px; }
  .sheet__panel{ max-width:560px; margin-left:auto; margin-right:auto; margin-bottom:auto; margin-top:auto; border:1px solid var(--filet); border-top:2px solid var(--rouge); }
  .dish__name{ font-size:15.5px; }
  .dish__price{ font-size:15.5px; }
}

/* très petits écrans : les deux colonnes de la carte se serrent mais tiennent */
@media (max-width:360px){
  .cols--2{ gap:0 16px; }
  .dish__name{ font-size:13px; }
  .dish__price{ font-size:13px; }
  .page__scroll{ padding-left:16px; padding-right:16px; }
  .redband{ margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px; }
  .pband{ margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px; }
}

.noscript-msg{ padding:1.5rem; font:16px/1.5 Georgia,serif; }

/* =============================================================
   PARCOURS DE FIN — mise à jour du 09/09/2026
   Lecture simple, libellés de pagination, page « un dernier mot »,
   panneau Wi-Fi, page Bab Tounès & autour de Tunis.
   Référence : Figma 7zlbV8d67KhfFYdSRaJaZy, page 339:2754
   (340:2 avis + Wi-Fi, 340:49 adresses, 340:96 panneau Wi-Fi).
   Palette et typo : celles de la carte, aucun nouveau jeu de couleurs.
   ============================================================= */

/* ---------- boutons partagés ---------- */
.btn--wide{ width:100%; }
.btn--outline{
  flex:1 1 0; min-width:0;
  border:1px solid var(--sarcelle); color:var(--sarcelle);
  background:transparent;
  font-family:var(--sans); font-weight:700;
  text-align:center; text-decoration:none;
}
.btn--outline:active{ background:rgba(46,100,112,.1); }
.btn--plain{
  background:transparent; border:0; color:var(--sarcelle);
  font-family:var(--sans); font-weight:700; text-decoration:none;
}
.btn--plain:active{ background:rgba(46,100,112,.08); }
.btn--onred{
  border:1px solid var(--creme); color:var(--creme); background:transparent;
  font-family:var(--sans); font-weight:700;
}
.btn--onred:active{ background:rgba(242,233,217,.16); }
.btn--onteal{
  border:1px solid var(--creme); color:var(--creme); background:transparent;
  font-family:var(--sans); font-weight:700;
}
.btn--onteal:active{ background:rgba(242,233,217,.16); }
.btn--creme{
  background:var(--creme); color:var(--sarcelle); border:1px solid var(--creme);
  font-family:var(--sans); font-weight:700;
}
.btn--creme:active{ background:var(--creme-2); }
a.btn{ text-decoration:none; }

/* page 3 : la bande rouge n'a plus de QR, elle a un bouton */
.redband__body--wifi{ display:block; }
.redband__body--wifi .btn{ margin-top:10px; font-size:14px; min-height:44px; }

/* accueil : la carte d'abord, le livre en second */
.story-actions--duo{ display:flex; flex-direction:column; gap:8px; }
.wifibox__intro{ margin-top:8px; margin-bottom:12px; font-size:14px; }

/* ---------- 1. lecture simple : un seul défilement, pas de pagination ---------- */
.screen--list{ background:var(--creme); }
.listview{
  flex:1; min-height:0;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  padding-bottom:calc(24px + var(--sab));
}
/* les mêmes nœuds `.pg` que le livre, sortis de leur cadre de page */
.listview .pg{
  position:static; height:auto; min-height:0;
  box-shadow:none; border-radius:0;
  border-bottom:1px solid var(--filet-fin);
  transform:none; opacity:1; visibility:visible;
  display:block;
}
.listview .pg[aria-hidden="true"]{ display:block; }
.listview .page__scroll{
  position:relative;
  overflow:visible; height:auto; min-height:0; flex:none;
  display:block;
  padding-top:20px; padding-bottom:26px;
}
.listview .pg--cover{ border-bottom:0; }

/* ---------- 2. mode livre : des libellés, pas seulement des flèches ---------- */
.progress{ align-items:stretch; gap:2px; }
.progress__mid{
  flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:4px 2px;
}
.progress__mid .progress__bar{ width:100%; flex:none; }
.progress__next{
  font-family:var(--sans); font-size:10.5px; letter-spacing:.03em;
  color:var(--encre-doux);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-align:center;
}
.pagebtn{
  flex:none; max-width:34%;
  min-height:var(--tap);
  display:flex; align-items:center; justify-content:center; gap:3px;
  padding:4px 6px;
  background:transparent; border:0;
  color:var(--sarcelle);
  transition:opacity .25s ease;
}
.pagebtn:active{ background:rgba(46,100,112,.09); }
.pagebtn[disabled]{ opacity:.28; }
.pagebtn__glyph{ font-size:20px; line-height:1; }
.pagebtn__txt{
  font-family:var(--sans); font-size:11.5px; font-weight:700; line-height:1.15;
  text-align:center;
}
html[dir="rtl"] .pagebtn__glyph{ display:inline-block; transform:scaleX(-1); }

/* ---------- 3. pages ajoutées : avis, adresses ---------- */
.screen--page{ background:var(--creme); }
.pagebar{
  flex:none;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:calc(var(--sat) + 12px) calc(var(--sar) + 18px) 8px calc(var(--sal) + 18px);
  background:var(--creme);
}
.pagebar__brand{
  font-family:var(--font-title); font-weight:700; font-size:22px;
  color:var(--rouge);
}
.pagebar__lang{
  min-height:var(--tap); padding:4px 10px;
  display:flex; align-items:center; gap:6px;
  background:transparent; border:0;
  font-family:var(--sans); font-size:13px; font-weight:700;
  color:var(--sarcelle);
}
.pagebar__lang:active{ background:rgba(46,100,112,.09); }
.pagescroll{
  flex:1; min-height:0;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  padding:8px calc(var(--sar) + 18px) calc(28px + var(--sab)) calc(var(--sal) + 18px);
}
@media (min-width:430px){
  .pagebar{ padding-left:calc(var(--sal) + 24px); padding-right:calc(var(--sar) + 24px); }
  .pagescroll{ padding-left:calc(var(--sal) + 24px); padding-right:calc(var(--sar) + 24px); }
}

/* blocs de texte communs aux deux pages */
.jkicker{
  font-family:var(--font-caps); font-weight:700;
  font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--rouge-vif);
}
.jkicker--sm{ font-size:10px; }
.jkicker--or{ color:var(--or); }
.jtitle{
  margin-top:8px;
  font-family:var(--font-title); font-weight:500; font-size:31px; line-height:1.15;
  color:var(--encre);
}
.jtitle--sm{ font-size:26px; margin-top:6px; }
.jintro{ margin-top:18px; font-size:16px; line-height:1.45; color:var(--encre); }
.jbody{ margin-top:12px; font-size:16px; line-height:1.45; color:var(--encre); }
.jbody--sm{ margin-top:6px; font-size:15px; }
.jbody--strong{ font-weight:700; }
/* ---------- page 16 : la lettre, composee DANS le livre ----------
   Aucun encadre blanc ailleurs dans la carte : la lettre se pose a plat sur
   le creme, avec les objets deja existants — l encadre .pnote, la prose, le
   filet or. Elle se lit comme une lettre sans devenir une carte web. */
.pnote--letter{
  font-style:normal; font-weight:600;
  font-size:16px; line-height:1.35;
  color:var(--rouge);
}
.prose--letter{ margin-top:14px; }
.prose--letter p:last-child{ margin-bottom:0; }
.psign{
  margin-top:16px; padding-top:12px;
  border-top:1px solid var(--hairline);
  text-align:end; text-align:right;
  font-family:var(--font-title); font-style:italic;
  font-size:14.5px; color:var(--rouge);
}
[dir=rtl] .psign{ text-align:left; }
/* Émoticônes : à la suite du texte, jamais avant. La pile emoji du système
   garde leur couleur ; sans elle, la Bitter tomberait sur un glyphe manquant. */
.jemo{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size:.86em; line-height:1;
  margin-inline-start:.35em; margin-left:.35em;
  white-space:nowrap;
}
[dir="rtl"] .jemo{ margin-left:0; margin-right:.35em; }
.btn--google{ margin-top:18px; }
/* la rosace comme les autres illustrations de page, pas en filigrane */
.deco--rosace{
  margin-top:18px; margin-inline-start:auto; margin-left:auto;
  width:62px; height:62px; opacity:.5;
}
[dir=rtl] .deco--rosace{ margin-left:0; margin-right:auto; }
.deco--rosace svg{ display:block; width:100%; height:100%; }
/* La ligne de cloture, juste sous le bouton : elle repond a la lettre. */
.jthanks{
  margin-top:16px;
  font-family:var(--font-title); font-style:italic;
  font-size:16px; line-height:1.4;
  color:var(--rouge);
}
.jrule--vif{ background:var(--rouge-vif); opacity:.55; }
.jhair{ height:1px; background:var(--creme-2); margin:14px 0 0; }
.jgroup{
  margin-top:20px;
  font-family:var(--font-caps); font-weight:700;
  font-size:11px; letter-spacing:.11em;
  color:var(--sarcelle);
}
.jhours{
  margin-top:18px;
  font-family:var(--font-title); font-style:italic; font-size:14px;
  color:var(--encre-doux);
}
/* Pied de page : UNE famille, UNE echelle, UNE couleur. Le bas de la page
   empilait quatre styles differents et cassait l unite de la lettre. */
.jfoot{ margin-top:24px; }
.jfoot__rule{ height:1px; background:var(--hairline); }
.jnotices{ margin-top:14px; }
.jnotices li,
.jaddr{
  font-family:var(--font-title);
  font-size:12.5px; line-height:1.55;
  color:var(--encre-doux);
}
.jnotices li{ margin-top:6px; }
/* L adresse est une chaine latine : en contexte RTL le « 96 » initial
   sautait a la fin de la ligne. On l isole, comme les prix et les noms
   francais sous les plats. */
.jaddr{
  margin-top:12px;
  direction:ltr; unicode-bidi:isolate;
  text-align:start;
}

/* le clin d'œil final, sous le bouton : léger, jamais culpabilisant */
.jbody--strong + .btn{ margin-top:14px; }

/* encart Wi-Fi sarcelle (maquette 340:158) */
.wificard{
  position:relative; overflow:hidden;
  margin-top:26px; padding:22px;
  background:var(--sarcelle); color:var(--creme);
}
.wificard__rosace{
  position:absolute; top:-18px; right:-6px;
  width:102px; height:102px;
  opacity:.8; pointer-events:none;
}
html[dir="rtl"] .wificard__rosace{ right:auto; left:-6px; }
.wificard__rosace svg{ display:block; width:100%; height:100%; }
.wificard__intro{ margin:13px 0 18px; font-size:16px; line-height:1.4; }
.wificard .btn--onteal{ position:relative; }

/* navigation de fin de page */
.endnav{ margin-top:24px; display:flex; flex-direction:column; gap:8px; }
.pg .endnav{ margin-top:22px; }

/* ---------- 4. Bab Tounès ---------- */
.babhead{
  margin-top:24px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.babhead__deco{ flex:none; width:58px; height:40px; }
.babhead__deco svg{ display:block; width:100%; height:100%; }
.babname{
  margin-top:2px;
  font-family:var(--font-title); font-weight:500; font-size:34px; line-height:1.1;
  color:var(--rouge);
}
.babcuisine{
  margin-top:3px;
  font-family:var(--font-title); font-style:italic; font-size:17px;
  color:var(--encre);
}
/* Emplacements photo : aucun visuel inventé tant que les originaux
   @bab_tounes ne sont pas fournis (statut PENDING_INSTAGRAM_ORIGINALS). */
/* Logo et plat réels de Bab Tounès (fournis le 09/09/2026). Le logo arrive
   sur fond blanc : plutôt que de tenter un détourage qui laisserait un halo,
   on l'assume en pastille bordée d'or — c'est ainsi qu'on présente le logo
   d'une maison invitée. */
.bablogo{
  width:76px; height:76px; flex:none;
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:3px;
  padding:5px;
}
.babphoto-real{ margin-top:18px; }
.babphoto-real img{
  width:100%; height:auto;
  border:1px solid var(--filet-fin);
  background:var(--creme-2);
}

.babphotos{ margin-top:22px; display:flex; gap:12px; }
.babphoto{
  position:relative; height:164px;
  display:flex; flex-direction:column; justify-content:center; gap:34px;
  padding:10px;
  background:var(--creme-2);
  border:1px dashed var(--rouge-vif);
  text-decoration:none;
}
/* proportions de la maquette (194 / 112 pour 318 de large) conservées à
   toutes les largeurs : base 0 explicite, sinon le texte du cadre pèse */
.babphoto--food{ flex:194 1 0%; min-width:0; }
.babphoto--room{ flex:112 1 0%; min-width:0; }
.babphoto__label{ font-size:15px; color:var(--encre); }
.babphoto__src{ font-size:12px; color:var(--sarcelle); }
.babstatus{ margin-top:8px; font-size:12px; color:var(--rouge-vif); }
.babduo{ margin-top:10px; display:flex; gap:12px; }
.babaddr{ margin-top:14px; font-size:14px; line-height:1.4; color:var(--encre); }
.babtel{ margin-top:7px; font-size:14px; line-height:1.5; }
.babtel__a{ color:var(--sarcelle); text-decoration:none;
  /* zone tactile 44 px (audit 10/09) sans grossir le texte */
  display:inline-flex; align-items:center; min-height:44px; min-width:44px; }

/* ---------- 5. autour de Tunis ---------- */
.placename{
  margin-top:15px;
  font-family:var(--font-title); font-weight:500; font-size:23px; line-height:1.15;
  color:var(--encre);
}
.jgroup + .placename{ margin-top:12px; }
.maplink{
  margin-top:7px;
  min-height:var(--tap);
  display:flex; align-items:center; gap:6px;
  font-family:var(--sans); font-size:16px; font-weight:700;
  color:var(--sarcelle); text-decoration:none;
}
.maplink:active{ color:var(--rouge); }
.extarrow{ display:inline-block; font-size:14px; }
html[dir="rtl"] .extarrow{ transform:scaleX(-1); }
.recos__deco{
  margin-top:20px; margin-inline-start:auto; margin-left:auto;
  width:64px; height:36px; opacity:.45;
}

/* ---------- pages 16 et 17 : le parcours de fin est dans le livre ----------
   Mêmes blocs qu'auparavant, désormais rendus dans une .pg comme les autres
   pages, donc dans un conteneur flex en colonne. */
.pg--journey .page__scroll{ padding:18px 26px 20px; }

/* les quatre lieux : photographies locales, ratio 3:2, dimensions déclarées
   dans le HTML pour qu'aucun texte ne saute au chargement */
.placephoto{ margin:10px 0 0; }
.placephoto img{
  display:block; width:100%; height:auto;
  border:1px solid var(--filet-fin);
  background:var(--creme-2);
}
/* crédit imposé par les licences CC BY-SA — ne pas retirer */
.jcredit{
  margin-top:14px;
  font-size:11px; line-height:1.5; color:var(--encre-doux);
}

/* Bouton d'avis : dessiné comme un vrai bouton Google — fond blanc, « G »
   quadricolore, libellé sombre. Le bouton rouge précédent ne se lisait pas
   comme une action Google et n'appelait pas le clic. */
.btn--google{
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--encre);
  border:1px solid #DADCE0; border-radius:6px;
  padding:15px 18px;
  font-family:var(--sans); font-weight:700; font-size:16px;
  box-shadow:0 1px 2px rgba(60,64,67,.16);
}
.btn--google:active{ background:#F7F8F8; }
.btn--brand{ display:flex; align-items:center; justify-content:center; }
.btn__glogo{
  width:20px; height:20px; flex:0 0 20px;
  margin-inline-end:12px; margin-right:12px;
}
.btn__glogo svg{ display:block; width:100%; height:100%; }
.btn__glabel{ min-width:0; }
[dir="rtl"] .btn__glogo{ margin-right:0; margin-left:12px; }

/* disponibilité : c'est un statut, pas une description */
.dish__avail{ font-style:italic; color:var(--sarcelle); }
html[dir="rtl"] .recos__deco{ margin-left:0; margin-right:auto; }
.recos__deco svg{ display:block; width:100%; height:100%; }

/* ---------- 6. panneau Wi-Fi (maquette 340:96) ---------- */
/* Une page web ne peut pas connecter le téléphone au réseau : on affiche
   les identifiants et la marche à suivre, jamais une fausse connexion. */
.sheet--wifi .sheet__backdrop{ background:rgba(45,37,33,.62); }
.wifipanel{
  position:relative;
  margin-top:auto; width:100%; max-height:92%;
  background:var(--sarcelle); color:var(--creme);
  border-top:2px solid var(--or);
  padding:26px calc(22px + var(--sar)) calc(24px + var(--sab)) calc(22px + var(--sal));
  /* la rosace déborde volontairement du cadre : on la coupe au lieu de
     laisser le panneau défiler latéralement */
  overflow-x:clip; overflow-y:auto; -webkit-overflow-scrolling:touch;
  animation:sheet-up .2s ease-out;
}
@supports not (overflow:clip){ .wifipanel{ overflow-x:hidden; } }
.wifipanel__rosace{
  position:absolute; top:-18px; right:-14px;
  width:142px; height:142px; opacity:.8; pointer-events:none;
}
html[dir="rtl"] .wifipanel__rosace{ right:auto; left:-14px; }
.wifipanel__rosace svg{ display:block; width:100%; height:100%; }
.wifipanel__brand{
  position:relative;
  font-family:var(--font-title); font-weight:500; font-size:30px; line-height:1.1;
}
.wifipanel__title{
  position:relative;
  margin-top:12px;
  font-family:var(--font-title); font-weight:500; font-size:23px; line-height:1.15;
}
.wifipanel__rule{ height:1px; background:var(--or); margin:26px 0 22px; }
.wifipanel__label{
  font-family:var(--font-caps); font-weight:700;
  font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--or);
  margin-top:20px;
}
.wifipanel__rule + .wifipanel__label{ margin-top:0; }
.wifipanel__value{
  margin-top:4px;
  font-family:var(--sans); font-weight:600; font-size:22px; letter-spacing:.03em;
  word-break:break-all;
  direction:ltr; unicode-bidi:isolate;
  -webkit-user-select:text; user-select:text;
}
html[dir="rtl"] .wifipanel__value{ text-align:right; }
.wifipanel__howto{ margin-top:22px; font-size:16px; line-height:1.4; }
.wifipanel__howto + .btn{ margin-top:20px; width:100%; }
.wifipanel__feedback{
  min-height:19px; margin-top:10px;
  font-size:13px; line-height:1.4;
  color:rgba(242,233,217,.85);
}
.wifipanel__feedback.is-ok{ color:var(--creme); font-weight:700; }
.wifipanel__feedback.is-ko{ color:#F0C98A; }
.wifipanel__feedback + .btn{ margin-top:10px; width:100%; }

/* zone de copie technique : hors écran, jamais lue par les lecteurs d'écran */
.offscreen{
  position:absolute; left:-9999px; top:0;
  width:1px; height:1px; opacity:0;
}

/* ---------- 7. petits écrans : 360 px et en dessous ---------- */
@media (max-width:389px){
  .pagebar{ padding-left:calc(var(--sal) + 14px); padding-right:calc(var(--sar) + 14px); }
  .pagescroll{ padding-left:calc(var(--sal) + 14px); padding-right:calc(var(--sar) + 14px); }
  .jtitle{ font-size:27px; }
  .jtitle--sm{ font-size:23px; }
    .babname{ font-size:30px; }
  .babphoto{ height:150px; gap:26px; }
  .babduo{ gap:8px; }
  .pagebtn__txt{ font-size:10.5px; }
  .progress__next{ font-size:10px; }
  .wifipanel__value{ font-size:20px; }
}

/* =============================================================
   8. CONFORT DE LECTURE (10/09) — surcouche des pages du livre
   Demande propriétaire : « on se perce les yeux, trop condensé ».
   On garde palette, familles, filets et composition ; on relève
   seulement les corps, les interlignes, l'air entre les plats et le
   contraste du texte secondaire. Une page peut défiler : la lisibilité
   au téléphone prime sur « tout tenir sans défiler ».
   ============================================================= */
:root{ --encre-doux: rgba(45,37,33,.76); }

.page__scroll{ padding:20px 24px 22px; }
.run{ font-size:11px; padding-bottom:12px; }
.ph{ padding-bottom:18px; }
.ph__eyebrow{ font-size:11.5px; }
.ph__sub{ font-size:15px; line-height:1.5; margin-top:10px; }

.sec{ padding-top:28px; }
.sec__head{ padding-bottom:8px; margin-bottom:6px; }
.sec__name{ font-size:13px; letter-spacing:.14em; }
.sec__fr{ font-size:11.5px; margin-top:2px; }
.sec--mer-italic .sec__name, .sec--grey-italic .sec__name{ font-size:13.5px; }
.sec__note{ font-size:14px; line-height:1.55; margin-top:8px; }

.dish{ padding:15px 0; }
.dish__row{ gap:16px; }
.dish__name{ font-size:17px; line-height:1.3; }
html[lang="ar"] .dish__name{ font-size:18px; }
.dish__price{ font-size:17px; }
.dish__price--market{ font-size:14px; max-width:112px; line-height:1.3; }
.dish__fr{ font-size:13.5px; margin-top:3px; }
.dish__desc{ font-size:14.5px; line-height:1.5; margin-top:5px; }
.dish__per100{ font-size:12px; margin-top:2px; }
.dish-note{ font-size:14.5px; line-height:1.55; padding:6px 0 14px; }

.dish--feature{ padding:20px 0; }
.dish--feature .dish__name{ font-size:21px; }
.dish--feature .dish__price{ font-size:19px; }
.dish--feature .dish__desc{ font-size:14.5px; margin-top:8px; }

.pnote{ margin-top:20px; font-size:14.5px; line-height:1.55; }
.pnote:not(.pnote--bar){ padding:14px 16px; }
.pg--closing .pclose{ font-size:15px; line-height:1.55; }
.pxref{ font-size:15px; line-height:1.55; margin-top:22px; }
.pfoot{ padding-top:24px; }
.pfoot__cur{ font-size:10.5px; }
.pfoot__folio{ font-size:11.5px; }

.prose p{ font-size:15px; line-height:1.65; margin-bottom:14px; }
/* Chez Ange : mise en page d'origine rétablie (demande propriétaire 10/09) */
.pg--ange .prose p{ font-size:12.5px; line-height:1.62; margin-bottom:12px; }
.pg--table .prose p{ font-size:15px; }


/* Page 5 : les Mezzas en grand (demande propriétaire 10/09) — même
   composition que les belles pièces de la page 9, aux couleurs de la mer. */
.sec--mer-italic .sec__name{ font-size:17px; letter-spacing:.1em; }
.sec--mer-italic .dish__dash{ background:var(--sarcelle); }
.sec--mer-italic .dish--alt .dish__dash{ background:var(--or); }

/* Décors d'angle dans le flux (10/09). Positionnés en absolu à 52 px du
   bas, ils visaient des pages qui tenaient sur un écran ; les pages
   défilant désormais, ils tombaient sur le texte (poisson sur la note des
   Mezzas). Ils se posent maintenant sous le contenu, calés à droite (à
   gauche en arabe), juste au-dessus du folio — jamais sur un plat. */
.deco--corner, .deco--side{
  position:relative; bottom:auto; right:auto; left:auto;
  flex:none; align-self:flex-end; margin-top:auto; padding-top:14px;
}
.deco--corner{ box-sizing:content-box; }
.deco--corner + .pfoot, .deco--side + .pfoot{ margin-top:0; }
html[dir="rtl"] .deco--corner, html[dir="rtl"] .deco--side{ left:auto; right:auto; }

/* =============================================================
   9. MA SÉLECTION (10/09) — module selection.js, isolé et réversible
   Mémo montré au serveur : rien n'est transmis. Retirer cette section
   avec le module. Aucun corps de texte existant n'est réduit.
   ============================================================= */
/* + près du prix : zone tactile 44 × 44, pastille de 30 px. Les marges
   négatives empêchent la zone de grandir la ligne ou de pousser le prix. */
.sel-add{
  flex:none; align-self:center;
  width:44px; height:44px; margin:-10px -10px -10px -6px; padding:0;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
html[dir="rtl"] .sel-add{ margin:-10px -6px -10px -10px; }
.sel-add__dot{
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--or); background:var(--creme);
  font-family:var(--sans); font-size:19px; font-weight:600; line-height:1;
  color:var(--rouge);
}
.sel-add.is-on .sel-add__dot{ background:var(--rouge); border-color:var(--rouge); color:var(--creme); font-size:14px; font-weight:700; }
.sel-add:active .sel-add__dot{ background:var(--creme-2); }

/* « Ma sélection » : un outil de la barre du haut, comme Sommaire et Langue
   (carnet + compteur). Même zone tactile (48 px), aucune surface sur la
   carte. Sous 360 px, le libellé s'efface pour laisser le titre entier. */
.sel-top__glyph{ position:relative; display:block; width:22px; height:22px; color:var(--encre); }
.sel-top__glyph svg{ display:block; width:22px; height:22px; }
.sel-top__n{
  position:absolute; top:-6px; right:-10px;
  min-width:18px; height:18px; padding:0 4px; border-radius:9px;
  background:var(--rouge); color:var(--creme);
  font-family:var(--sans); font-size:11px; font-weight:700; line-height:18px; text-align:center;
}
html[dir="rtl"] .sel-top__n{ right:auto; left:-10px; }
.sel-top__n.is-bump{ animation:sel-bump .5s ease-out; }
@keyframes sel-bump{ 0%{ transform:scale(1) } 40%{ transform:scale(1.35) } 100%{ transform:scale(1) } }
@media (prefers-reduced-motion:reduce){ .sel-top__n.is-bump{ animation:none; } }
@media (max-width:359px){ .sel-top .iconbtn__txt{ display:none; } }

.sel-money{ unicode-bidi:isolate; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* panneau : styles des feuilles existantes (.sheet, .btn, .pnote) */
.selpanel__empty{ font-family:var(--serif); font-size:16px; line-height:1.5; color:var(--encre); padding:6px 0 14px; }
.selpanel__list{ list-style:none; }
.selline{ padding:12px 0; border-bottom:1px solid var(--hairline); }
.selline__top{ display:flex; align-items:flex-start; }
.selline__names{ flex:1; min-width:0; }
.selline__name{ font-family:var(--serif); font-weight:600; font-size:17px; line-height:1.3; color:var(--encre); }
/* le français sous la langue du client : lisible, pas minuscule */
.selline__name--fr, .selsrv__name--fr, .selsrv__unit--fr, .selsrv__nt--fr{ font-family:'Bitter', Georgia, serif; unicode-bidi:isolate; text-align:left; }
html[dir="rtl"] .selline__name--fr, html[dir="rtl"] .selsrv__name--fr,
html[dir="rtl"] .selsrv__unit--fr, html[dir="rtl"] .selsrv__nt--fr{ text-align:right; }
.selline__name--fr{ margin-top:2px; font-size:14.5px; font-weight:400; }
.selline__del{ flex:none; width:44px; height:44px; margin:-8px -10px 0 4px; font-size:16px; color:var(--encre-doux); }
html[dir="rtl"] .selline__del{ margin:-8px 4px 0 -10px; }
.selline__unit{ margin-top:4px; font-family:var(--serif); font-size:15px; color:var(--encre); }
.selqty{ display:flex; align-items:center; margin-top:8px; }
.selqty__btn{
  width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:22px; line-height:1;
  color:var(--rouge); border:1px solid var(--hairline); background:var(--creme-2);
}
.selqty__btn:disabled{ opacity:.35; }
.selqty__n{ min-width:40px; text-align:center; font-family:var(--serif); font-weight:700; font-size:17px; }
.selpanel__notice{ margin-top:14px; }

/* suggestion : un seul petit bloc calme, ignorable, masquable */
.selsug{ display:flex; align-items:flex-start; margin-top:14px; padding:10px 0 10px 14px; border-left:2px solid var(--or); }
html[dir="rtl"] .selsug{ padding:10px 14px 10px 0; border-left:0; border-right:2px solid var(--or); }
.selsug__txt{ flex:1; min-width:0; }
.selsug__hint{ font-family:var(--serif); font-style:italic; font-size:15.5px; line-height:1.45; color:var(--encre); }
.selsug__go{ min-height:44px; padding:0; margin-top:2px; text-align:start; }
.selsug__x{ flex:none; width:44px; height:44px; margin:-6px -8px 0 6px; font-size:15px; color:var(--encre-doux); }
html[dir="rtl"] .selsug__x{ margin:-6px 6px 0 -8px; }

/* « Montrer au serveur » toujours à portée : collé au bas du panneau */
.selpanel__actions{
  position:-webkit-sticky; position:sticky; bottom:calc(-20px - var(--sab));
  margin:16px -18px calc(-20px - var(--sab)); padding:10px 18px calc(12px + var(--sab));
  background:var(--creme); border-top:1px solid var(--hairline);
}
.selpanel__actions .btn + .btn{ margin-top:6px; }
.sel-live{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* vue serveur : plein écran crème, gros corps, rien d'autre */
.selsrv{
  position:fixed; inset:0; z-index:50; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--creme);
  padding:calc(var(--sat) + 8px) calc(var(--sar) + 22px) calc(var(--sab) + 28px) calc(var(--sal) + 22px);
}
.selsrv__back{ padding:0 4px; }
.selsrv__title{
  margin-top:6px; padding-bottom:10px; border-bottom:2px solid var(--rouge);
  font-family:var(--font-title); font-weight:700; font-size:28px; color:var(--rouge);
}
.selsrv__list{ list-style:none; }
.selsrv__line{ display:flex; align-items:flex-start; flex-wrap:wrap; padding:14px 0; border-bottom:1px solid var(--hairline); }
.selsrv__q{ flex:none; min-width:58px; font-family:var(--serif); font-weight:700; font-size:24px; color:var(--rouge); unicode-bidi:isolate; }
.selsrv__names{ flex:1; min-width:0; }
.selsrv__name{ font-family:var(--serif); font-weight:700; font-size:23px; line-height:1.25; color:var(--encre); }
.selsrv__name--fr{ margin-top:3px; font-size:20px; font-weight:600; color:var(--encre); }
.selsrv__unit{ margin-top:6px; font-family:var(--serif); font-size:18px; color:var(--encre); }
.selsrv__unit--fr{ margin-top:2px; font-size:16px; }
.selsrv__notice{ margin-top:20px; }
.selsrv__nt{ font-family:var(--serif); font-style:italic; font-size:17px; line-height:1.5; color:var(--encre); }
.selsrv__nt--fr{ margin-top:6px; font-size:16px; }

/* =============================================================
   10. AUDIT UX (10/09) — ajustements mesurés, réversibles
   ============================================================= */
/* Contraste : l'or (#C89B3F) et l'olive (#8A8A57) écrits en petites
   capitales sur le crème donnaient 2,1:1 et 3,0:1 (minimum 4,5:1). Aucune
   nuance existante de la palette ne passe ; on fonce la MÊME teinte pour le
   texte seulement. Filets, objets et illustrations gardent l'or d'origine. */
:root{ --or-texte:#80611E; --olive-texte:#616B37; }
.tone-or, .ph__eyebrow--or, .sec--or .sec__name, .pfoot__folio--or, .jkicker--or{ color:var(--or-texte); }
.tone-olive, .ph__eyebrow--olive, .sec--olive .sec__name, .pfoot__folio--olive{ color:var(--olive-texte); }

/* Sommaire : les rubriques de chaque page sous son titre, dans la langue
   lue (sens de lecture compris), pour aller droit aux Mezzas ou aux desserts. */
.toc__sub{
  display:block; margin-top:2px;
  font-family:var(--font-body); font-size:13px; font-weight:400; line-height:1.4;
  color:var(--encre-doux);
}

/* Bulles du bord (page 7) : tenues dans la marge de la page, elles ne
   frôlent plus les boutons + ni les prix, quelle que soit la longueur. */
.deco--edge{ width:20px; right:-2px; }
html[dir="rtl"] .deco--edge{ right:auto; left:-2px; }

/* Texte agrandi à 200 % (≈ 195 px utiles) : la colonne de carte peut
   rétrécir sous la largeur de son contenu, les mots longs passent à la
   ligne au lieu de sortir du cadre. */
.cols, .cols--2{ grid-template-columns:minmax(0, 1fr); }
@media (min-width:520px){ .cols--2{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } }
.sec__name, .sec__fr, .ph__title, .dish__name{ overflow-wrap:break-word; word-wrap:break-word; }
.dish__price--market{ flex:0 1 auto; min-width:0; }

/* =============================================================
   11. PAGE AVIS — pack V2.1 (10/09) : citation sourcée + raccord
   Tonton Ville hors citation ; composants du livre, palette actuelle.
   ============================================================= */
.rv-open{ font-size:16px; line-height:1.55; }
.rv-open strong{ font-weight:700; color:var(--encre); }
.rvq{ display:flex; align-items:center; gap:14px; margin:18px 0 6px; padding:12px 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.rvq__box{ flex:1; min-width:0; }
.rvq__text{ margin:0; font-family:var(--font-title); font-style:italic; font-size:17px; line-height:1.45; color:var(--encre); }
.rvq__text::before{ content:open-quote; } .rvq__text::after{ content:close-quote; }
html[lang="fr"] .rvq__text{ quotes:"« " " »"; }
html[lang="es"] .rvq__text, html[lang="it"] .rvq__text, html[lang="pt"] .rvq__text, html[lang="ar"] .rvq__text{ quotes:"«" "»"; }
html[lang="en"] .rvq__text, html[lang="zh"] .rvq__text{ quotes:"“" "”"; }
html[lang="ja"] .rvq__text{ quotes:"「" "」"; }
.rvq__by{ margin-top:6px; font-family:var(--font-caps); font-size:12.5px; letter-spacing:.04em; color:var(--encre-doux); }
.rvq__portrait{ flex:none; width:76px; height:auto; }
.rv-bridge{ margin-top:10px; font-family:var(--font-title); font-weight:700; font-size:17px; line-height:1.4; color:var(--rouge); }
.rv-action{ margin-top:18px; }
.rv-effort{ font-family:var(--serif); font-style:italic; font-size:15px; line-height:1.5; color:var(--encre); }
.rv-action .btn--google{ margin-top:10px; }
.rv-thanks{ margin-top:26px; font-family:var(--font-title); font-weight:700; font-size:20px; line-height:1.3; color:var(--rouge); }
.rv-return{ margin-top:6px; font-family:var(--serif); font-size:15.5px; line-height:1.55; color:var(--encre); }
.rv-next{ margin-top:18px; padding-top:12px; border-top:1px solid var(--hairline); }
.rv-next__title{ font-family:var(--font-title); font-weight:700; font-size:16px; color:var(--encre); }
.rv-next__go{ min-height:44px; padding:0; }

/* =============================================================
   12. AIDE AU CHOIX (10/09) — factuelle et discrète
   ============================================================= */
.dish__fmt{ font-size:12.5px; }
.pxref--go{ margin-top:22px; padding-top:12px; border-top:1px solid var(--hairline); }
.pxref__go{ min-height:44px; padding:0; font-family:var(--serif); font-style:normal; font-weight:700; font-size:15px; }
.backbar{ flex:none; padding:2px calc(var(--sar) + 10px) 0 calc(var(--sal) + 10px); background:#E4D7BE; }
.backbar__btn{ min-height:44px; padding:0 6px; font-size:14px; }

/* =============================================================
   13. RÉCIT D'ACCUEIL EN CHAPITRES (10/09)
   ============================================================= */
.story-ch + .story-ch{ margin-top:20px; padding-top:18px; border-top:1px solid var(--hairline); }
.story-lead{
  margin-bottom:6px !important;
  font-family:var(--font-caps); font-weight:700;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--rouge-vif);
}
.story-ch:last-child p:not(.story-lead){ font-style:italic; }
/* Pas d'italique de synthèse ni d'espacement de capitales pour les écritures sans italique ni majuscules :
   la règle générale html[lang] * perdait face à la spécificité de la ligne ci-dessus. */
html[lang="zh"] .story-ch:last-child p, html[lang="ja"] .story-ch:last-child p, html[lang="ko"] .story-ch:last-child p, html[lang="ar"] .story-ch:last-child p{ font-style:normal; }
html[lang="zh"] .story-lead, html[lang="ja"] .story-lead, html[lang="ko"] .story-lead{ letter-spacing:.04em; font-size:12.5px; }

/* =============================================================
   14. PACK V2 (10/09) : arabe, évitement clavier
   ============================================================= */
/* TV-AUD-005 : rappel français des rubriques aligné à droite en arabe,
   lecture française conservée (direction ltr) */
html[dir="rtl"] .sec__fr{ text-align:right; }
/* TV-AUD-004 : lien d'évitement, visible seulement au focus clavier */
.skip-link{
  position:absolute; top:-200px; left:8px; z-index:60;
  min-height:44px; padding:0 14px; border-radius:4px;
  background:var(--rouge); color:var(--creme);
  font-family:var(--sans); font-size:14px; font-weight:700;
}
.skip-link:focus{ top:8px; }
html[dir="rtl"] .skip-link{ left:auto; right:8px; }

/* =============================================================
   Badges éditoriaux premium V2 (Figma « TV Premium Badge V2 », nœud 6:36)
   Logo SVG local 18 px, hauteur 28 px, toujours SOUS le nom : la ligne nom + prix n'est
   jamais modifiée. Sans animation. Compatible anciens iPhone (flex + margin, pas de gap).
   ============================================================= */
.tv-dish-badge-slot{
  display:-webkit-box; display:flex; -webkit-box-align:center; align-items:center;
  margin-top:6px; min-height:28px; min-width:0;
}
.tv-premium-badge{
  display:-webkit-inline-box; display:inline-flex; -webkit-box-align:center; align-items:center;
  height:28px; max-width:100%; box-sizing:border-box;
  padding:5px 10px 5px 8px;
  border:1px solid #E9DFC9; border-radius:999px;
  background:#F7F2E8; color:#173D34;
  font-family:var(--font-caps); font-size:10px; font-weight:600;
  line-height:1; letter-spacing:.04em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tv-premium-badge__logo{
  display:block; width:18px; height:18px; -webkit-box-flex:0; flex:0 0 18px;
  margin-right:6px;
}
.tv-premium-badge__label{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
html[lang="zh"] .tv-premium-badge, html[lang="ja"] .tv-premium-badge, html[lang="ko"] .tv-premium-badge{ letter-spacing:0; text-transform:none; font-size:11px; }
/* arabe : logo à droite du libellé. En RTL, l'ordre normal (row) place déjà le premier enfant
   à droite : pas de row-reverse (il inverserait l'ordre et mettrait le logo à gauche). */
html[dir="rtl"] .tv-premium-badge{ letter-spacing:0; text-transform:none; font-size:11px; padding:5px 8px 5px 10px; }
html[dir="rtl"] .tv-premium-badge__logo{ margin-right:0; margin-left:6px; }
@media (prefers-reduced-motion:reduce){ .tv-premium-badge{ transition:none !important; animation:none !important; } }

/* RC 2026-09-14 : lisibilité et secours anciens Safari, sans changer le livre. */
.screen, .sheet, .book__stage, .page, .sheet__backdrop { top:0; right:0; bottom:0; left:0; }
@supports (height:100dvh) { .screen, .sheet { height:100dvh; bottom:auto; } }
button:focus, a:focus, [tabindex]:focus { outline:2px solid var(--sarcelle); outline-offset:3px; }
@supports selector(:focus-visible) {
  button:focus:not(:focus-visible), a:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) { outline:none; }
  :focus-visible { outline:2px solid var(--sarcelle); outline-offset:3px; }
}
.screen--lang button:focus { outline-color:var(--creme); }
.dish__fr { font-size:14px; }
.sec__fr { font-size:13px; }
.data-error {
  position:fixed; z-index:100; top:0; right:0; bottom:0; left:0;
  padding:calc(28px + var(--sat)) calc(24px + var(--sar)) calc(28px + var(--sab)) calc(24px + var(--sal));
  display:flex; flex-direction:column; justify-content:center; gap:20px;
  background:var(--creme); color:var(--encre); font-size:17px; line-height:1.5;
}
.data-error p + p, .data-error .btn { margin-top:16px; }

/* Retouches UX 17/09 : respiration sans allonger, prochaine page lisible, signature discrète de la maison. */
.cols > :first-child > .sec:first-child{ padding-top:16px; }
.progress__next{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.25; }
.selpanel__sign{ margin:16px 0 2px; text-align:center; font-family:var(--font-caps); font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--or-texte); }
html[dir="rtl"] .selpanel__sign, html[lang="zh"] .selpanel__sign, html[lang="ja"] .selpanel__sign, html[lang="ko"] .selpanel__sign{ letter-spacing:0; text-transform:none; font-size:12px; }

/* Écritures sans majuscules (zh, ja, ko) : l'espacement large des petites capitales latines
   écartait les caractères (« 1 9 5 0 년 부 터 »). Mesuré par controle_espacement_cjk.mjs. */
html[lang="zh"] .cover-house,
html[lang="zh"] .cover-values,
html[lang="zh"] .cover-foot,
html[lang="zh"] .ph__eyebrow,
html[lang="zh"] .portrait__cap,
html[lang="zh"] .street__cap,
html[lang="zh"] .redband__title,
html[lang="zh"] .redband__net p,
html[lang="zh"] .sec__name,
html[lang="zh"] .pfoot__cur,
html[lang="zh"] .pband__label,
html[lang="zh"] .tricard__label,
html[lang="zh"] .jkicker,
html[lang="zh"] .jgroup,
html[lang="zh"] .story-eyebrow,
html[lang="ja"] .cover-house,
html[lang="ja"] .cover-values,
html[lang="ja"] .cover-foot,
html[lang="ja"] .ph__eyebrow,
html[lang="ja"] .portrait__cap,
html[lang="ja"] .street__cap,
html[lang="ja"] .redband__title,
html[lang="ja"] .redband__net p,
html[lang="ja"] .sec__name,
html[lang="ja"] .pfoot__cur,
html[lang="ja"] .pband__label,
html[lang="ja"] .tricard__label,
html[lang="ja"] .jkicker,
html[lang="ja"] .jgroup,
html[lang="ja"] .story-eyebrow,
html[lang="ko"] .cover-house,
html[lang="ko"] .cover-values,
html[lang="ko"] .cover-foot,
html[lang="ko"] .ph__eyebrow,
html[lang="ko"] .portrait__cap,
html[lang="ko"] .street__cap,
html[lang="ko"] .redband__title,
html[lang="ko"] .redband__net p,
html[lang="ko"] .sec__name,
html[lang="ko"] .pfoot__cur,
html[lang="ko"] .pband__label,
html[lang="ko"] .tricard__label,
html[lang="ko"] .jkicker,
html[lang="ko"] .jgroup,
html[lang="ko"] .story-eyebrow{ letter-spacing:.04em; }
/* codes de langue : les idéogrammes et le hangul se lisent sans espacement de capitales */
.langshort__cjk{ letter-spacing:.02em; white-space:nowrap; }