/* Mise en forme du site (couleurs, tailles, animations CSS). Inutile de modifier ce fichier pour changer les textes. */
/* Site 1, « la carte » : une vraie carte de restaurant en papier, posée sur une table sombre, qui s'ouvre.
   Au repos (sans JS, sans WebGL, ou mouvement réduit), la carte est simplement ouverte : tout le contenu est là. */
:root {
  --nuit:#06222B; --nuit2:#0C3642; --papier:#F4FBFA; --encre:#06222B; --encre2:#3F5E63;
  --cyan:#F2B705; --orange:#F2B705; --brule:#8A6500; --clair:#E9FBF8; --discret:#8DB5B5;
  --titre:"Playfair Display", Georgia, serif; --texte:"Manrope", system-ui, sans-serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .024 0 0 0 0 .133 0 0 0 0 .169 0 0 0 -.5 .3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --emb-h:136px;
  --ease-sortie:cubic-bezier(.2,0,0,1);
  color-scheme:dark;
}
@media (min-width:960px) { :root { --emb-h:176px; } }
* { box-sizing:border-box; }
html { overflow-x:hidden; overflow-x:clip; scroll-behavior:auto; }
body {
  margin:0; color:var(--clair); font:400 1rem/1.6 var(--texte); -webkit-font-smoothing:antialiased;
  background:var(--nuit) radial-gradient(ellipse 70% 900px at 50% 260px, var(--nuit2), rgba(12,54,66,0) 72%) no-repeat;
  padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px));
}
.avant-service .haut, .avant-service .carte { visibility:hidden; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
.carte :focus-visible { outline-color:var(--brule); }

/* En-tête, sur la table */
.lg { display:block; --g:#F2B705; --w:#fff; color:#fff; width:104px; height:73px; }
.haut { max-width:1120px; margin:0 auto; padding-block:24px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.haut ul { display:flex; gap:24px; list-style:none; margin:0; padding:0; }
.haut a.n { text-decoration:none; font-weight:600; font-size:.875rem; display:inline-flex; min-height:44px; align-items:center; border-bottom:2px solid transparent; transition:border-color .15s; }
.haut a.n:hover { border-bottom-color:var(--orange); }
@media (hover:hover) and (pointer:fine) {
  .haut a:has(.lg) .lg { transition-property:transform; transition-duration:180ms; transition-timing-function:var(--ease-sortie); }
  .haut a:has(.lg):hover .lg { transform:rotate(-4deg); }
}

/* La carte : deux volets de papier. Mobile : volets empilés. Bureau : dépliant ouvert, charnière au centre. */
.carte { position:relative; max-width:1120px; margin:8px auto 0; row-gap:16px; display:grid; grid-template-columns:minmax(0,1fr); color:var(--encre); scroll-margin-top:16px; }
@media (min-width:960px) { .carte { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.ombre-table { position:absolute; inset:0; border-radius:4px; pointer-events:none;
  box-shadow:0 46px 80px -28px rgba(1,10,13,.8), 0 14px 28px -10px rgba(1,10,13,.55); }
.page, .couv { position:relative; background:var(--papier) var(--grain); padding:12px; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.page { border-radius:4px; }
@media (min-width:960px) {
  .page-g { border-radius:4px 0 0 4px; }
  .page-d { border-radius:0 4px 4px 0; }
  .page-g::after, .page-d::before { content:""; position:absolute; top:0; bottom:0; width:44px; pointer-events:none; }
  .page-g::after { right:0; background:linear-gradient(to left, rgba(6,34,43,.12), rgba(6,34,43,0)); }
  .page-d::before { left:0; background:linear-gradient(to right, rgba(6,34,43,.14), rgba(6,34,43,0)); }
}
.int { position:relative; height:100%; border:3px double rgba(6,34,43,.36); border-radius:2px; padding:32px 20px; display:flex; flex-direction:column; gap:40px; text-align:center; align-items:center; }
@media (min-width:960px) { .int { padding:48px 44px; gap:44px; } }
#p1 .int, .couv .int { padding-top:calc(var(--emb-h) + 20px); }
.voile { position:absolute; inset:0; background:var(--nuit); opacity:0; pointer-events:none; border-radius:inherit; }
.ombre-d { position:absolute; inset:0; opacity:0; pointer-events:none; background:linear-gradient(90deg, rgba(6,34,43,.6), rgba(6,34,43,0) 75%); }

/* Couverture : visible seulement pendant l'ouverture (au repos elle est retournée, donc cachée). */
.couv { position:absolute; inset:0; z-index:20; visibility:hidden; border-radius:4px; }
@media (min-width:960px) { .couv { left:50%; border-radius:0 4px 4px 0; } }
.couv .int { justify-content:flex-start; gap:22px; }
.couv-mot { display:block; width:min(250px,64%); height:auto; aspect-ratio:2019/603; --w:var(--encre); color:var(--encre); }
.couv-titre { margin:0; font:italic 400 2rem/1.1 var(--titre); }
.couv-sur { margin:0; font:600 .75rem/1.5 var(--texte); letter-spacing:.18em; text-transform:uppercase; color:var(--encre2); }
.couv-pied { margin:12px 0 0; font:italic 400 1rem/1.5 var(--titre); color:var(--encre2); }

/* Emblème : les lunettes posées en tête de la page gauche. SVG au repos, canvas WebGL par-dessus si disponible. */
.embleme { position:absolute; z-index:25; top:27px; left:0; width:100%; height:var(--emb-h); display:grid; place-items:center; pointer-events:none; }
@media (min-width:960px) { .embleme { width:50%; } .embleme canvas { left:-12%; width:124%; } }
.embleme svg { grid-area:1/1; width:min(280px,70%); height:auto; aspect-ratio:1906/820; --g:#B58500; color:var(--encre); transition-property:opacity; transition-duration:300ms; }
.embleme canvas { position:absolute; left:-16px; top:-64px; width:calc(100% + 32px); height:calc(100% + 128px); opacity:0; transition-property:opacity; transition-duration:300ms; }
.embleme.gl-ok canvas { opacity:1; }
.embleme.gl-ok svg { opacity:0; }

/* Ornement : filet et losange */
.filet { display:flex; align-items:center; gap:12px; width:min(220px,60%); }
.filet::before, .filet::after { content:""; flex:1; height:1px; background:rgba(6,34,43,.32); }
.filet span { width:7px; height:7px; background:var(--brule); transform:rotate(45deg); }

/* Contenu imprimé */
.entete { display:flex; flex-direction:column; gap:16px; align-items:center; }
.it { font:italic 400 1.2rem/1.4 var(--titre); color:var(--encre2); margin:0; }
h1 { font:700 clamp(2.074rem,5.4vw,3.05rem)/1.1 var(--titre); letter-spacing:-.01em; margin:0; text-wrap:balance; max-width:16ch; }
h2 { font:700 1.728rem/1.15 var(--titre); margin:0; text-wrap:balance; }
.sous { max-width:44ch; color:var(--encre2); margin:0; }

.plat { position:relative; width:100%; background:#fff; border:1px solid rgba(6,34,43,.18); border-radius:2px; padding:36px 24px 24px; display:flex; flex-direction:column; gap:16px; align-items:center; box-shadow:0 10px 22px -16px rgba(6,34,43,.5); }
.tampon { position:absolute; top:-18px; right:16px; transform:rotate(5deg); background:var(--orange); color:#06222B; font:700 .9375rem/1 var(--titre); padding:10px 14px; border-radius:2px; box-shadow:0 2px 0 rgba(6,34,43,.18); }
.plat h3 { font:700 1.44rem/1.2 var(--titre); margin:0; text-wrap:balance; max-width:22ch; }
.plat p { margin:0; color:var(--encre2); font-size:.875rem; max-width:46ch; }
.ligne { display:flex; align-items:center; gap:16px; }
.play { position:relative; width:52px; height:52px; border-radius:50%; border:0; background:var(--encre); color:var(--papier); display:grid; place-items:center; cursor:pointer; flex:none;
  transition-property:scale; transition-duration:150ms; transition-timing-function:var(--ease-sortie); }
.play:active { scale:.96; }
.ic { grid-area:1/1; width:20px; height:20px; transition-property:opacity,transform; transition-duration:220ms; transition-timing-function:var(--ease-sortie); }
.ic-pause { opacity:0; transform:scale(.4) rotate(-45deg); }
.play[aria-pressed="true"] .ic-play { opacity:0; transform:scale(.4) rotate(45deg); }
.play[aria-pressed="true"] .ic-pause { opacity:1; transform:none; }
.duree { font-weight:600; font-variant-numeric:tabular-nums; }

.bouton { display:inline-flex; align-items:center; min-height:44px; padding:0 24px; background:var(--encre); color:var(--papier); font:600 .9375rem var(--texte); border-radius:2px; text-decoration:none; }
.precedents { width:100%; display:flex; flex-direction:column; gap:24px; align-items:center; }
.liste { width:100%; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; text-align:left; }
/* Chaque plat est un petit ticket : il se soulève au survol. */
.liste li { position:relative; isolation:isolate; display:flex; flex-direction:column; gap:4px; padding:12px; margin-inline:-12px;
  transition-property:transform; transition-duration:220ms; transition-timing-function:var(--ease-sortie); }
.liste li::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:2px; background:#fff; opacity:0;
  box-shadow:0 12px 20px -12px rgba(6,34,43,.55), 0 0 0 1px rgba(6,34,43,.08);
  transition-property:opacity; transition-duration:220ms; transition-timing-function:var(--ease-sortie); }
.liste li:focus-within::before { opacity:1; }
@media (hover:hover) and (pointer:fine) {
  .liste li:hover { transform:translateY(-3px) rotate(-.4deg); }
  .liste li:hover::before { opacity:1; }
}
.liste .l1 { display:flex; align-items:flex-end; gap:8px; }
.liste .t { flex:0 1 auto; font:700 1.2rem/1.25 var(--titre); }
.nw { white-space:nowrap; }
/* Points de conduite alignés sur la dernière ligne du titre, jamais plus courts que 3 rem. */
.liste .pt { flex:1 0 3rem; border-bottom:2px dotted rgba(6,34,43,.42); margin-bottom:.4em; }
.liste .d { font-weight:600; font-size:.875rem; line-height:1.7; white-space:nowrap; font-variant-numeric:tabular-nums; }
.liste .e { font:italic 400 .9375rem/1.5 var(--titre); color:var(--encre2); }
.liste a { text-decoration:none; }
.liste a:hover .t { text-decoration:underline; text-decoration-color:var(--brule); text-underline-offset:4px; }
.emporter { display:flex; flex-direction:column; gap:12px; align-items:center; scroll-margin-top:16px; }
.emporter .l { display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:center; }
.emporter a { font-weight:600; min-height:44px; display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--encre); }
.emporter a span { text-decoration:underline; text-decoration-color:rgba(6,34,43,.45); text-underline-offset:4px; }
.emporter a:hover span { text-decoration-color:var(--brule); }
.ico { width:22px; height:22px; flex:none; }
.service { font:italic 400 .9375rem var(--titre); color:var(--encre2); margin:0; }

/* Hors de la carte, sur la table */
.pied { max-width:1120px; margin:56px auto 0; padding-block:24px 40px; border-top:1px solid rgba(233,251,248,.16); font-size:.875rem; color:var(--discret); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
/* Pages B : listes compactes (titre, points, durée, n°). */
.liste-archives li { padding-block:8px; }
.liste-archives .t { font-size:1.0625rem; }
.liste-archives .e { font-size:.875rem; }
.dos-lunettes { width:min(200px,56%); height:auto; aspect-ratio:1906/820; --g:#B58500; color:var(--encre); }
#propos .int { padding-top:56px; gap:32px; }
.dos-vide { flex:none; width:100%; height:clamp(240px, 40vh, 380px); }
.rubrique { display:flex; flex-direction:column; gap:6px; align-items:center; }
.couv-intitule { margin:0 0 -8px; font:italic 400 1.35rem/1.3 var(--titre); color:var(--encre2); }
.couv-titre { font-size:1.6rem; }
.precedents .filet { margin-top:-8px; }
/* Mobile : « À propos » courte, juste le logo, le titre, l'espace réservé et le bouton. */
@media (max-width:959px) {
  #propos .int { padding-top:32px; gap:20px; }
  #propos .dos-lunettes { width:150px; }
  #propos .dos-vide { height:100px; }
  #propos .bas-page { gap:8px; }
}
.page-d .folio:empty, .folio:empty { display:none; }
/* Le livret recentré dépasse à droite (moitié vide) : on coupe sans créer de défilement. */
main { overflow-x:clip; }

/* Pied de page : folio et boutons de tournage, poussés en bas de la page. */
.bas-page { margin-top:auto; width:100%; display:flex; flex-direction:column; gap:12px; align-items:center; }
.folio { margin:0; font:italic 400 .875rem/1.4 var(--titre); color:var(--encre2); }
.nav-page { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.nav-page:empty { display:none; }
.lien-page { display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border:1px solid rgba(6,34,43,.5); border-radius:2px; background:transparent; color:var(--encre);
  font:600 .875rem var(--texte); text-decoration:none; cursor:pointer; transition-property:background-color; transition-duration:150ms; }
.lien-page:hover { background:rgba(6,34,43,.06); }
@media (min-width:960px) { .seul-mobile { display:none; } }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:-1px; }

/* Sans JS : chaque page a sa propre ombre. Avec JS : les pages s'empilent par côté (même cellule de grille). */
.carte:not(.js-livret) .ombre-table { display:none; }
.carte:not(.js-livret) .page { box-shadow:0 30px 60px -28px rgba(1,10,13,.8); }
@media (min-width:960px) { .carte:not(.js-livret) { row-gap:32px; } }
.js-livret { row-gap:0; }
.js-livret > .page { grid-row:1; grid-column:1; }
.page.cachee { visibility:hidden !important; }
.sans-embleme .embleme { visibility:hidden; }
/* Ordre d'empilement mobile : la page de plus petit numéro est dessus. */
#p1 { z-index:9; } #p2 { z-index:8; } #p3 { z-index:7; } #p4 { z-index:6; } #propos { z-index:5; }
@media (min-width:960px) {
  .js-livret > .page-d { grid-column:2; }
  /* Bureau : à droite le feuillet de plus petit numéro est dessus, à gauche le dernier tourné. */
  #p1 { z-index:1; } #p3 { z-index:3; } #propos { z-index:5; }
  /* Les lunettes reposent sur la page 1 : la page 3 qui se pose les recouvre vraiment. */
  .js-livret > .embleme { z-index:2; }
  /* Dernière page seule : le livret se recentre d'une demi-largeur (symétrique de la couverture fermée). */
  .js-livret.seule { transform:translateX(25%); }
  .js-livret.seule .ombre-table { transform:scaleX(.5); transform-origin:0 50%; }
  /* Sans JS, « À propos » est centrée sous les doubles pages. */
  .carte:not(.js-livret) #propos { grid-column:1 / -1; justify-self:center; width:calc(50% - 0px); }
}
/* Mobile avec JS : une page à la fois, chaque page garde sa propre hauteur ; le livret suit (hauteur posée par JS). */
@media (max-width:959px) {
  .js-livret > .page { position:absolute; top:0; left:0; right:0; }
}
.pli, .assombri { position:absolute; inset:0; pointer-events:none; opacity:0; z-index:4; border-radius:inherit; }
.pli { background:linear-gradient(90deg, rgba(6,34,43,.6), rgba(6,34,43,0) 65%); transform-origin:0 50%; }
.assombri { background:var(--nuit); }
@media (min-width:960px) { .page-g > .pli { background:linear-gradient(270deg, rgba(6,34,43,.6), rgba(6,34,43,0) 65%); transform-origin:100% 50%; } }
button.n { appearance:none; background:none; border:0; border-bottom:2px solid transparent; padding:0; color:inherit; font:600 .875rem/1.6 var(--texte); cursor:pointer; display:inline-flex; min-height:44px; align-items:center; transition:border-color .15s; }
button.n:hover { border-bottom-color:var(--orange); }
button.n[aria-pressed="true"] { border-bottom-color:var(--orange); }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition:none !important; }
  .liste li:hover { transform:none; }
}
.plat h3 a{color:inherit;text-decoration:none;text-underline-offset:4px;text-decoration-color:var(--brule)}
.plat h3 a:hover{text-decoration:underline}
.dos-vide { display:grid; place-content:center; gap:8px; text-align:center; }
.dos-encours { font:italic 400 1.44rem/1.3 var(--titre); color:var(--encre2); margin:0; }
.dos-sous { font-size:.9375rem; color:var(--encre2); margin:0; max-width:34ch; }