/* =============================================================
   Maison Tonton Ville — carte numérique
   Identité : « la brasserie tunisienne du centre-ville ».
   Système complet = une grille, deux familles typo,
   une famille de dessin (Qallaline simplifié), cinq couleurs utiles.
   Zéro webfont, zéro dépendance, zéro image.
   ============================================================= */

:root{
  /* --- palette officielle, cinq couleurs utiles --- */
  --papier:   #F2E8D7;   /* crème plâtre — fond principal */
  --texte:    #312B27;   /* brun manganèse — texte, prix, filets */
  --heritage: #8A2E3B;   /* rouge chéchia — titres, sceau */
  --ocre:     #D0A03C;   /* ocre Qallaline — DÉCOR SEULEMENT, jamais de texte */
  --maison:   #476753;   /* vert Qallaline — cave, bar, végétal */
  --mer:      #2F6378;   /* bleu Tunis — poisson et fruits de mer */

  /* nuances du papier (pas des couleurs de plus) */
  --papier-clair: #F7F0E3;
  --papier-ombre: #E3D5BD;
  --filet:        rgba(49,43,39,.22);
  --filet-fin:    rgba(49,43,39,.12);
  --texte-doux:   rgba(49,43,39,.62);

  /* accent de section, réassigné par [data-tone] */
  --accent: var(--heritage);

  --serif: "Iowan Old Style", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--sans);
  --font-title: var(--serif);

  --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;   /* pas de mode sombre : l'identité est une carte papier */
}

/* piles CJK / arabe distinctes (contrat §Codes langue et polices) */
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; }
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; }

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; height:100%;
  background:var(--papier);
  color:var(--texte);
  font-family:var(--font-body);
  font-size:17px; line-height:1.45;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
body{ overflow:hidden; -webkit-tap-highlight-color:rgba(138,46,59,.14); }
body.is-loading *{ transition:none !important; }

h1,h2,h3,p,ul,li{ margin:0; padding:0; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:var(--heritage); }

/* frise Qallaline : losanges géométriques, 8 % d'opacité, décor seul */
.frieze{
  height:14px; margin:16px auto 0; max-width:230px;
  opacity:.55;
  background-image:
    repeating-linear-gradient(45deg,  var(--ocre) 0 1.5px, transparent 1.5px 11px),
    repeating-linear-gradient(-45deg, var(--ocre) 0 1.5px, transparent 1.5px 11px);
  border-top:1px solid var(--filet-fin);
  border-bottom:1px solid var(--filet-fin);
}

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

/* =============================================================
   1. LANDING
   ============================================================= */
.screen--lang{ background:var(--papier); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.lang-inner{
  position:relative;
  min-height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--sat) + 24px) calc(var(--sar) + 18px) calc(var(--sab) + 24px) calc(var(--sal) + 18px);
  text-align:center;
}
/* filigrane Qallaline en coin, 6 % — un seul motif, discret */
.lang-inner::before{
  content:""; position:absolute; top:0; inset-inline-end:0; right:0;
  width:180px; height:180px;
  opacity:.06;
  background-image:
    repeating-linear-gradient(45deg,  var(--texte) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(-45deg, var(--texte) 0 2px, transparent 2px 16px);
  pointer-events:none;
}
.brand{ position:relative; }
.brand__seal{ width:58px; height:58px; display:block; margin:0 auto 14px; }
.brand__eyebrow{
  font-family:var(--sans);
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--texte-doux);
}
.brand__name{
  margin-top:8px;
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(30px, 9.4vw, 44px);
  line-height:1.04;
  color:var(--heritage);
}
.brand__maison{
  display:block;
  font-size:.42em; font-weight:400;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--texte);
  margin-bottom:8px;
}
.brand__tag{ margin-top:10px; font-size:15px; color:var(--texte-doux); }
.brand__alias{ margin-top:4px; font-family:var(--serif); font-size:14px; color:var(--texte-doux); }
.brand__alias em{ font-style:normal; font-weight:700; color:var(--heritage); }

.lang-title{
  margin-top:26px; margin-bottom:14px;
  font-family:var(--sans);
  font-size:12px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--texte-doux);
}

.lang-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:9px;
  max-width:430px; width:100%; margin:0 auto;
}
.lang-btn{
  width:100%; min-height:58px;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  text-align:start;
  background:var(--papier-clair);
  border:1px solid var(--filet);
  color:var(--texte);
  transition:background .12s ease, border-color .12s ease;
}
.lang-btn:active{ background:#fff; }
.lang-btn.is-current{ border-color:var(--heritage); box-shadow:inset 0 0 0 1px var(--heritage); }
.lang-btn__flag{ font-size:23px; line-height:1; flex:none; }
.lang-btn__label{ font-size:17px; 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:18px; }
.lang-btn[lang="ja"] .lang-btn__label{ font-family:"Hiragino Sans","Noto Sans CJK JP","Yu Gothic",sans-serif; font-size:18px; }
.lang-btn[lang="ar"] .lang-btn__label{ font-family:"Geeza Pro","Noto Naskh Arabic",Tahoma,sans-serif; font-size:19px; }

.lang-foot{ margin-top:22px; font-size:13.5px; color:var(--texte-doux); }

/* =============================================================
   2. HISTOIRE
   ============================================================= */
.screen--story{ background:var(--papier); }
/* topbar de l'écran histoire : même famille que celle du livre, mais sur
   fond crème (pas l'ombre du livre) — l'histoire se lit avant d'entrer
   dans la carte. Donne un accès sommaire en un geste depuis cet écran. */
.screen--story .topbar{ background:var(--papier); }
.story-paper{
  position:relative;
  flex:1; display:flex; flex-direction:column;
  background:var(--papier);
  overflow:hidden;
}
.story-scroll{
  position:relative; z-index:1;
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:22px calc(var(--sar) + 22px) 10px calc(var(--sal) + 22px);
}

/* --- portrait de Monsieur Ange : composé en fond de l'écran histoire,
   jamais posé sur le texte (le texte est sur .story-scroll, z-index 1,
   toujours au-dessus). Rien ne s'affiche tant que --portrait-img n'est
   pas fourni : c'est un emplacement prêt, pas un placeholder visuel.
   Portrait branché : app/img/portrait-ange.jpg (aquarelle V15 recadrée,
   compressée 62 Ko). Opacité, masque et RTL gérés ci-dessous. --- */
.story__portrait{
  --portrait-img:url("../img/portrait-ange.jpg");
  position:absolute; z-index:0;
  inset-block-end:0; bottom:0;
  inset-inline-end:0; right:0;
  width:52%; max-width:260px;
  aspect-ratio:3/4;
  opacity:.12;
  background-image:var(--portrait-img, none);
  background-size:cover; background-position:top center;
  mix-blend-mode:multiply;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to top, black 50%, transparent 100%);
          mask-image:linear-gradient(to top, black 50%, transparent 100%);
}
html[dir="rtl"] .story__portrait{ right:auto; inset-inline-end:auto; left:0; inset-inline-start:0; }
.story-kicker{
  font-family:var(--sans);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--texte-doux);
}
.story-note{
  margin-top:14px; padding:12px 14px;
  background:var(--papier-clair);
  border:1px solid var(--filet-fin);
  border-inline-start:3px solid var(--heritage);
  border-left:3px solid var(--heritage);
  font-size:15px; color:var(--texte);
}
html[dir="rtl"] .story-note{ border-left:1px solid var(--filet-fin); border-right:3px solid var(--heritage); }
.story-title{
  margin-top:28px;
  font-family:var(--font-title);
  font-weight:700; font-size:29px; line-height:1.16;
  color:var(--heritage);
}
/* rythme de lecture : un écran qui se lit, pas une fiche qu'on scanne —
   interligne plus ample et respiration franche entre paragraphes. */
.story-body{ margin-top:18px; font-size:17px; line-height:1.68; }
.story-body p{ margin-bottom:20px; }
.story-body p:last-child{ margin-bottom:0; }
.story-notices{ margin-top:14px; padding-top:14px; border-top:1px solid var(--filet-fin); }
.story-notices li{ font-family:var(--sans); font-size:12.5px; color:var(--texte-doux); padding-top:6px; }
.story-notices__hint{ color:var(--texte) !important; font-weight:600; }
.story-actions{
  display:flex; align-items:center; gap:10px;
  padding:12px calc(var(--sar) + 16px) calc(12px + var(--sab)) calc(var(--sal) + 16px);
  border-top:1px solid var(--filet);
  background:var(--papier);
}
.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--primary{ flex:1; background:var(--heritage); color:var(--papier-clair); border:1px solid var(--heritage); }
.btn--primary:active{ background:#75252f; }
.btn--ghost{ min-width:var(--tap); border:1px solid var(--filet); color:var(--texte-doux); }

/* =============================================================
   3. LE LIVRE
   ============================================================= */
.screen--book{ background:var(--papier-ombre); }

.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:var(--papier-ombre);
  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:.12em; text-transform:uppercase;
  color:var(--heritage);
  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(--texte);
}
.iconbtn:active{ background:rgba(49,43,39,.08); }
.iconbtn__glyph{ font-size:19px; line-height:1.15; }
.iconbtn__txt{
  font-family:var(--sans); font-size:10px; letter-spacing:.05em;
  color:var(--texte-doux);
  max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* --- scène --- */
.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(--papier);
  border:1px solid var(--filet-fin);
  border-inline-start:2px solid var(--accent);
  border-left:2px solid var(--accent);
  overflow:hidden;
}
html[dir="rtl"] .page{ border-left:1px solid var(--filet-fin); border-right:2px solid var(--accent); }
.page.is-current{ display:flex; }

/* code couleur de section : une seule couleur par catégorie */
.page[data-tone="mer"]{      --accent: var(--mer); }
.page[data-tone="maison"]{   --accent: var(--maison); }
.page[data-tone="heritage"]{ --accent: var(--heritage); }

.page__scroll{
  position:relative;
  flex:1; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:18px 30px 24px;
}

/* --- entête de section --- */
.sec-head{ text-align:center; padding-bottom:10px; }
.sec-head__num{
  font-family:var(--sans);
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--texte-doux);
}
.sec-head__name{
  margin-top:6px;
  font-family:var(--font-title);
  font-weight:700; font-size:26px; line-height:1.1;
  color:var(--accent);
}
.sec-head__fr{ margin-top:3px; font-family:var(--serif); font-size:12.5px; color:var(--texte-doux); }
.sec-head .frieze{ margin-top:12px; max-width:150px; }

/* --- un plat --- */
.dish{
  display:flex; align-items:flex-start; gap:14px;
  padding:11px 0;
  border-bottom:1px solid var(--filet-fin);
}
.dish:last-child{ border-bottom:0; }
.dish__txt{ flex:1; min-width:0; }
.dish__name{ font-size:17.5px; font-weight:600; line-height:1.3; color:var(--texte); }
html[lang="ar"] .dish__name{ font-size:19px; }
/* ligne 2 : name_fr TOUJOURS visible — le serveur lit celle-là */
.dish__fr{
  margin-top:2px;
  font-family:var(--serif);
  font-size:13.5px; color:var(--texte-doux);
  direction:ltr; text-align:start; unicode-bidi:isolate;
}
html[dir="rtl"] .dish__fr{ text-align:right; }
.dish__desc{ margin-top:4px; font-size:13.5px; line-height:1.4; color:var(--texte-doux); }

.dish__price{
  flex:none;
  text-align:end;
  padding-top:2px;
  white-space:nowrap;
  direction:ltr; unicode-bidi:isolate;
  font-variant-numeric:tabular-nums;
  -webkit-font-feature-settings:"tnum" 1;
  font-feature-settings:"tnum" 1;
}
html[dir="rtl"] .dish__price{ text-align:left; }
.dish__amount{
  font-family:var(--serif);
  font-size:17px; font-weight:700;
  color:var(--texte);
}
.dish__unit{ font-family:var(--sans); font-size:12px; color:var(--texte-doux); }
.dish__amount--market{
  font-family:var(--sans);
  font-size:12.5px; font-weight:600; font-style:normal;
  color:var(--heritage);
  white-space:normal;
  direction:inherit;
  display:inline-block; max-width:96px; text-align:end;
}

/* --- encarts éditoriaux en tête de section --- */
.note{
  margin:0 0 14px;
  padding:11px 13px;
  background:var(--papier-clair);
  border:1px solid var(--filet-fin);
  border-inline-start:3px solid var(--accent);
  border-left:3px solid var(--accent);
}
html[dir="rtl"] .note{ border-left:1px solid var(--filet-fin); border-right:3px solid var(--accent); }
.note--strong{ background:var(--papier); border-width:1px; border-inline-start-width:4px; border-left-width:4px; }
html[dir="rtl"] .note--strong{ border-left-width:1px; border-right-width:4px; }
.note__title{
  font-family:var(--font-title); font-weight:700; font-size:17px;
  color:var(--accent); margin-bottom:4px;
}
.note__txt{ font-size:14px; line-height:1.45; color:var(--texte); }
.note__badge{
  display:inline-block; margin-top:8px;
  padding:5px 10px;
  border:1px solid var(--accent);
  color:var(--accent);
  font-family:var(--sans); font-size:13px; font-weight:700;
  letter-spacing:.02em;
}
/* l'unité au poids ne se lit pas comme une note de bas de page */
.dish__unit--weight{ color:var(--accent); font-weight:700; }
.dish__weightnote{
  margin-top:3px;
  font-family:var(--sans); font-size:10.5px; font-weight:600;
  letter-spacing:.02em;
  color:var(--accent);
  white-space:normal; max-width:92px;
  text-align:end;
}
html[dir="rtl"] .dish__weightnote{ text-align:left; }

/* --- bloc Wi-Fi (écran histoire) --- */
.wifi{
  margin-top:18px;
  padding:13px 15px;
  border:1px solid var(--filet);
  background:var(--papier-clair);
}
.wifi__title{
  font-family:var(--font-title); font-weight:700; font-size:17px;
  color:var(--maison);
}
.wifi__grid{ margin-top:8px; display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-items:baseline; }
.wifi__grid dt{ font-family:var(--sans); font-size:12px; color:var(--texte-doux); }
.wifi__grid dd{
  margin:0;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:16px; font-weight:700; letter-spacing:.04em;
  color:var(--texte);
  word-break:break-all;
}
.wifi__qr{ margin-top:10px; }
.wifi__qr[data-pending]{ display:none; }   /* rien tant que le QR n'est pas fourni */
.wifi__qr img, .wifi__qr svg{ display:block; width:132px; height:132px; }
.wifi__hint{ margin-top:9px; font-family:var(--sans); font-size:12.5px; line-height:1.4; color:var(--texte-doux); }

/* --- page de fin --- */
.endcard{ text-align:center; padding-top:10px; }
.endcard__title{ margin-top:14px; font-family:var(--font-title); font-weight:700; font-size:25px; color:var(--heritage); }
.endcard__txt{ margin-top:10px; font-size:15.5px; color:var(--texte-doux); }
.endcard__cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap); margin-top:18px; padding:0 22px;
  background:var(--heritage); color:var(--papier-clair);
  border:1px solid var(--heritage);
  font-family:var(--sans); font-size:16px; font-weight:600;
  text-decoration:none;
}
.endcard__cta[data-pending]{ background:transparent; color:var(--texte-doux); border-color:var(--filet); }
.endcard__pending{ margin-top:10px; font-family:var(--sans); font-size:11.5px; color:var(--texte-doux); }
.endcard__refs{ margin-top:22px; padding-top:12px; border-top:1px solid var(--filet-fin); }
.endcard__refline{ font-family:var(--sans); font-size:12.5px; color:var(--texte-doux); }
.logo-slot{ min-height:0; }   /* emplacement logo partenaire : vide tant que le client ne fournit rien */
.endcard__sign{ margin-top:18px; font-family:var(--serif); font-weight:700; font-size:15px; color:var(--heritage); }
.endcard__addr{ margin-top:4px; font-family:var(--sans); font-size:12.5px; color:var(--texte-doux); }
.endcard .frieze{ max-width:130px; }

/* --- flèches de bord --- */
.nav-edge{
  position:absolute; top:50%;
  transform:translateY(-50%);
  width:48px; height:58px;
  display:flex; align-items:center; justify-content:center;
  background:var(--papier-ombre);
  border:1px solid var(--filet);
  color:var(--texte);
  font-size:26px; line-height:1;
  z-index:6;
}
.nav-edge--prev{ inset-inline-start:-1px; left:-1px; }
.nav-edge--next{ inset-inline-end:-1px; right:-1px; }
html[dir="rtl"] .nav-edge--prev{ left:auto; right:-1px; }
html[dir="rtl"] .nav-edge--next{ right:auto; left:-1px; }
.nav-edge:active{ background:var(--heritage); color:var(--papier-clair); }
.nav-edge[disabled]{ opacity:.28; }
html[dir="rtl"] .nav-edge span{ display:inline-block; transform:scaleX(-1); }

/* --- couche d'animation --- */
.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(--papier);
  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(--papier);
  border:1px solid var(--filet);
  will-change:transform;
}

/* --- pied : progression + devise (mentionnée une seule fois) --- */
.progress{
  flex:none;
  display:flex; align-items:center; gap:10px;
  padding:7px calc(var(--sar) + 14px) calc(var(--sab) + 7px) calc(var(--sal) + 14px);
  background:var(--papier-ombre);
  border-top:1px solid var(--filet-fin);
}
.progress__bar{ flex:1; height:2px; background:rgba(49,43,39,.14); overflow:hidden; }
.progress__bar i{ display:block; height:100%; width:0; background:var(--accent, var(--heritage)); transition:width .35s ease; }
.progress__cur{
  font-family:var(--sans); font-size:11px;
  color:var(--texte-doux);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52%;
}
.progress__label{
  font-family:var(--sans); font-size:11.5px; letter-spacing:.06em;
  color:var(--texte-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(49,43,39,.5); }
.sheet__panel{
  position:relative; margin-top:auto; width:100%; max-height:84%;
  background:var(--papier);
  border-top:2px solid var(--heritage);
  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(--heritage);
  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; }

.toc li + li{ border-top:1px solid var(--filet-fin); }
.toc__btn{ width:100%; min-height:52px; display:flex; align-items:center; gap:12px; padding:8px 2px; text-align:start; }
.toc__num{
  flex:none; width:24px;
  font-family:var(--sans); font-size:12px; color:var(--texte-doux);
  font-variant-numeric:tabular-nums;
}
.toc__name{ flex:1; font-size:16.5px; font-weight:600; }
.toc__fr{ font-family:var(--serif); font-size:12.5px; font-weight:400; color:var(--texte-doux); direction:ltr; unicode-bidi:isolate; }
.toc__btn.is-current .toc__name{ color:var(--heritage); }
.lang-grid--sheet .lang-btn{ background:var(--papier-clair); }

/* =============================================================
   Révélation progressive au scroll (écran histoire)
   Léger, pas gadget : sans JS ou avec prefers-reduced-motion, le contenu
   reste pleinement visible dès le rendu — voir app.js. La classe
   .reveal--pending n'est ajoutée par le script que si l'animation est
   effectivement possible et souhaitée.
   ============================================================= */
.reveal{ transition:opacity .55s ease, transform .55s ease; }
.reveal.reveal--pending{ opacity:0; transform:translateY(12px); }
.reveal.is-visible{ opacity:1; transform:none; }

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

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

@media (min-width:620px){
  .book{ max-width:600px; margin-left:auto; margin-right:auto; }
  .page__scroll{ padding-left:44px; padding-right:44px; }
  .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(--heritage); }
  .story-scroll{ max-width:620px; width:100%; margin:0 auto; }
}
@media (max-height:560px){
  .brand__seal{ width:44px; height:44px; margin-bottom:8px; }
  .brand__name{ font-size:28px; }
  .lang-btn{ min-height:52px; }
}

/* =============================================================
   Message noscript — style déplacé ici depuis un attribut style
   inline pour permettre une CSP style-src 'self' sans 'unsafe-inline'.
   ============================================================= */
.noscript-msg{ padding:1.5rem; font:16px/1.5 Georgia,serif; }