/* Maison Orme — feuille de style unique.
   Organisée par zone du site. Rendu identique à la version précédente,
   vérifié style calculé par style calculé sur les cinq pages, en 430,
   768 et 1440 px. */

/* ------------------------------------------------------------------ */
/* 1. Jetons                                                           */
/* ------------------------------------------------------------------ */
:root{
 --orme:#3F5A45;
 --nappe:#FFFFFF;
 --bois:#8A5A3B;
 --encre:#1F1D1A;
 --sauge:#A9B8A0;
 /* Hauteur réelle de l'en-tête, mesurée par src/site.js. */
 --header-height:96px;
 /* Les barres de navigation flottent à cette distance du haut de l'écran. */
 --header-top:12px;
 /* Lumière d'ambiance : un halo chaud, comme une suspension au-dessus d'une table,
    face à une lueur sauge. Fixée à l'écran, le contenu défile devant. */
 --lumiere:
  radial-gradient(60vmax 45vmax at 85% 8%,rgba(255,196,120,.34),rgba(255,196,120,0) 70%),
  radial-gradient(60vmax 45vmax at 10% 22%,rgba(169,184,160,.24),rgba(169,184,160,0) 70%);
 /* Grain de papier, posé uniquement sur les aplats sombres. */
 --grain-fort:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.1'/%3E%3C/svg%3E");
 color:var(--encre);
 background:var(--nappe);
 font:17px/1.6 Inter,sans-serif;
 font-synthesis:none;
}

/* ------------------------------------------------------------------ */
/* 2. Bases                                                            */
/* ------------------------------------------------------------------ */
*{box-sizing:border-box}
body,h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:Fraunces,serif;font-weight:400;line-height:1.15}
h1{font-size:64px;letter-spacing:normal}
h2{font-size:40px}
h3{font-size:24px}
p+p{margin-top:16px}
/* Toute cible cliquable fait au moins 48 px. */
a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:var(--nappe);border:0;min-height:48px;min-width:48px}
button,a,input,select{outline-offset:8px}
:focus-visible{outline:2px solid var(--bois)}
[hidden]{display:none!important}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--lumiere)}

/* ------------------------------------------------------------------ */
/* 3. Motifs communs                                                   */
/* ------------------------------------------------------------------ */
.primary{background:var(--orme);color:var(--nappe);padding:16px 24px;border:1px solid var(--orme);border-radius:8px;text-align:center}
.primary:hover,.primary:focus-visible{background:var(--encre);color:var(--nappe)}
.text-link{background:none;padding:8px 0;color:var(--orme);text-align:left;justify-content:flex-start;text-decoration:underline;text-underline-offset:8px}
.text-link:hover,.text-link:focus-visible{color:var(--bois);text-decoration-thickness:2px}
.inline-action{font:inherit;display:inline;background:transparent;color:var(--orme);text-decoration:underline;text-underline-offset:8px;padding:8px;min-height:48px}
[data-demo]:hover,[data-demo]:focus-visible{background:var(--sauge);color:var(--encre)}

/* Repère de section : numéro, filet, intitulé. */
.eyebrow{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;line-height:24px;letter-spacing:.18em;text-transform:uppercase;color:var(--bois)}
.eyebrow-num{display:inline-flex;align-items:center;gap:12px;font-variant-numeric:tabular-nums}
.eyebrow-num::after{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
.section-heading .heading-text .eyebrow,.practical .eyebrow,.menu-block .eyebrow,.page-title .eyebrow{margin-bottom:16px}

/* Ligne de conduite entre un libellé et son prix. */
.leader{flex:1 1 0;min-width:24px;align-self:flex-end;border-bottom:1px dotted var(--sauge);transform:translateY(-9px)}
.price{color:var(--bois);white-space:nowrap;font-weight:500}

/* Photographies : coins adoucis, ombre basse. */
.placeholder{background:var(--sauge);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--encre);min-height:240px;line-height:24px}
.photo{position:relative;padding:0;overflow:hidden;border-radius:16px;box-shadow:0 24px 48px -32px rgba(31,29,26,.55)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ambience{min-height:320px;background:var(--sauge)}

/* ------------------------------------------------------------------ */
/* 4. Bandeau concept, en-tête, navigation                             */
/* ------------------------------------------------------------------ */
.skip-link{position:fixed;top:8px;left:16px;z-index:100;background:var(--nappe);color:var(--orme);padding:8px 16px;border:1px solid var(--orme);transform:translateY(-200%)}
.skip-link:focus{transform:none}

.concept-band{position:relative;display:flex;flex-wrap:wrap;align-items:center;align-content:center;column-gap:16px;row-gap:0;min-height:48px;padding:8px 64px 8px 16px;background:var(--orme);background-image:var(--grain-fort);color:var(--nappe);font-size:16px;line-height:24px;text-align:left;overflow:visible}
.concept-line{display:block;flex:0 1 auto;min-width:0;max-width:none;margin:0;font-size:inherit;line-height:24px;white-space:normal;overflow:visible;scrollbar-width:none}
.concept-line::-webkit-scrollbar{display:none}
.concept-band .concept-line a{display:inline-flex;vertical-align:middle;padding:0 8px;min-height:48px}
.concept-band .concept-more{display:flex;flex:0 0 auto;position:relative;width:max-content;max-width:100%;height:24px;min-height:24px;margin:0;padding:0;justify-content:flex-start;font-size:inherit;line-height:24px;white-space:nowrap;text-decoration:underline;text-underline-offset:4px}
/* Zone de contact confortable sans épaissir la ligne. */
.concept-band .concept-more::after{content:"";position:absolute;inset:-10px 0}
.concept-close{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:48px;height:48px;padding:0;background:transparent;color:var(--nappe);font-size:32px;line-height:1}
.concept-close:hover{background:var(--encre)}
.concept-close:focus-visible{outline-color:var(--nappe);outline-offset:0}

.site-header{position:sticky;top:var(--header-top);z-index:20;width:min(1232px,calc(100% - 32px));margin:var(--header-top) auto 0;padding:12px 28px;display:flex;align-items:center;justify-content:space-between;gap:32px;background:var(--nappe);border:1px solid rgba(169,184,160,.35);border-radius:999px;box-shadow:0 12px 32px -20px rgba(31,29,26,.3)}
@supports ((backdrop-filter:blur(16px)) or (-webkit-backdrop-filter:blur(16px))){
 .site-header{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
 .site-header.menu-open{background:rgba(255,255,255,.96)}
}
@media(prefers-reduced-transparency:reduce){
 .site-header,.site-header.menu-open{background:var(--nappe);-webkit-backdrop-filter:none;backdrop-filter:none}
}
.logo{gap:8px;font-family:Fraunces,serif;font-size:32px;line-height:40px;color:var(--orme);white-space:nowrap}
.leaf{width:32px;height:40px;flex-shrink:0}
.navigation{display:flex;gap:24px;flex-wrap:wrap}
.navigation a{padding:8px 0}
.navigation a[aria-current],.navigation a:hover{color:var(--bois);text-decoration:underline;text-underline-offset:8px}
.menu-toggle{padding:8px 16px;border:1px solid rgba(169,184,160,.55);border-radius:999px;background:transparent;color:var(--orme);align-items:center;gap:16px}
.menu-icon{width:16px;height:16px;position:relative}
.menu-icon::before,.menu-icon::after{content:"";height:1px;background:currentColor;position:absolute;left:0;right:0;top:4px}
.menu-icon::after{top:12px}
.menu-open .menu-icon::before{top:8px;transform:rotate(45deg)}
.menu-open .menu-icon::after{top:8px;transform:rotate(-45deg)}
#contenu{scroll-margin-top:calc(var(--header-top) + var(--header-height))}

/* ------------------------------------------------------------------ */
/* 5. Accueil                                                          */
/* ------------------------------------------------------------------ */
/* Premier écran : photographie plein cadre, voile dégradé, texte centré. */
.welcome{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100svh - var(--header-height) - var(--header-top));padding:40px 24px;background:var(--orme);color:var(--nappe);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:0}
.welcome-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;opacity:1;z-index:0}
/* Le dégradé atteint son opacité finale juste avant le premier texte. */
.welcome::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-color:transparent;background-image:linear-gradient(to bottom,rgba(44,61,48,0) 0,rgba(44,61,48,0.72) var(--veil-start,0px),rgba(44,61,48,0.72) 100%)}
.welcome-content{width:100%;display:flex;flex-direction:column;align-items:center;position:relative;z-index:2;isolation:isolate}
.welcome-title{position:relative;margin:24px 0 0;font:400 clamp(40px,5vw,64px)/1.15 Fraunces,serif}
.hero-intro{margin-top:24px;max-width:448px;font-size:20px;line-height:32px}
.welcome .hero-intro{max-width:560px}
.opening-status{margin-top:24px;font-size:17px;line-height:24px;color:var(--orme);display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 14px;border:1px solid var(--sauge);border-radius:999px}
/* Point plein pendant le service, creux en dehors. */
.opening-status::before{content:"";width:8px;height:8px;border-radius:50%;border:1px solid currentColor;flex:none}
.opening-status.is-open::before{background:currentColor;border-color:currentColor}
.welcome .opening-status{margin-top:8px;color:var(--nappe);border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.08)}
.hero-actions{display:flex;gap:24px;align-items:center;margin-top:32px;flex-wrap:wrap}
.welcome .hero-actions{justify-content:center;margin-top:24px}
.welcome .hero-actions .text-link{justify-content:center;text-align:center}
.welcome .primary{background:var(--nappe);color:var(--orme);border-color:var(--nappe)}
.welcome .primary:hover{background:var(--sauge);color:var(--encre);border-color:var(--sauge)}
.welcome .text-link{color:var(--nappe)}
.welcome a:focus-visible{outline-color:var(--nappe)}

/* Bandeau « en bref », sous le premier écran. */
.facts{background:var(--orme);background-image:var(--grain-fort);color:var(--nappe)}
.facts ul{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px clamp(20px,3.4vw,44px);list-style:none;margin:0;padding:16px max(24px,calc((100% - 1184px) / 2))}
.facts li{display:flex;align-items:center;gap:clamp(20px,3.4vw,44px);font-size:13px;font-weight:500;line-height:24px;letter-spacing:.16em;text-transform:uppercase}
.facts li:not(:last-child)::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--sauge);opacity:.85}

/* Sections courantes de l'accueil. */
.section{max-width:1280px;margin:auto;padding:64px 48px}
.section h2{color:var(--orme)}
.section-heading{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:32px}

/* Cette semaine : titre décalé, feuille en filigrane, plats en quinconce. */
.editorial-weekly .section-heading{align-items:flex-end;border-bottom:1px solid var(--sauge);padding-bottom:24px;margin-bottom:40px}
.editorial-weekly .section-heading h2{font-size:44px;line-height:1.1}
.dish-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.dish-grid .placeholder{min-height:256px}
.dish-grid .photo{height:clamp(280px,29vw,400px)}
.dish-grid .photo img{object-position:center 60%}
.dish-caption{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:16px 0 24px}
.dish-caption h3{font-size:24px;line-height:32px}
.editorial-weekly .dish-caption{border-top:1px solid var(--sauge);margin-top:16px;padding-top:16px}
.editorial-weekly .dish-caption .price{font-family:Fraunces,serif;font-size:24px}

/* Terrasse : photographie panoramique, cartouche opaque pour le texte. */
.terrace-section{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr;max-width:1184px;min-height:608px;margin:16px auto;background:var(--orme);color:var(--nappe);border-radius:8px;overflow:hidden}
.terrace-section>.photo{position:absolute;inset:0;height:100%;min-height:100%;border-radius:0;box-shadow:none;z-index:-1}
.terrace-section>.photo img{object-position:center}
.terrace-section>div:last-child{align-self:end;justify-self:start;width:448px;max-width:calc(100% - 96px);margin:48px;padding:32px;background:var(--nappe);color:var(--encre);border-radius:8px}
.terrace-section .eyebrow{gap:16px;color:var(--orme)}
.terrace-section h2{font-size:40px;line-height:48px;color:var(--orme);margin:16px 0 24px}

/* Le midi : la photographie et le cartouche vert se chevauchent. */
.lunch{display:grid;align-items:center;border-bottom:1px solid var(--sauge)}
.editorial-lunch{position:relative;grid-template-columns:1.1fr 1fr;gap:0;border-bottom:0}
.editorial-lunch .ambience{height:496px;border-radius:8px}
.editorial-lunch .lunch-copy{position:relative;margin-left:-48px;padding:48px;background:var(--orme);background-image:var(--grain-fort);color:var(--nappe);border:1px solid var(--sauge)}
.editorial-lunch .lunch-copy::before{content:"";position:absolute;inset:8px;border:1px solid var(--sauge);pointer-events:none;opacity:.55}
.editorial-lunch .eyebrow{gap:16px;color:var(--sauge)}
.editorial-lunch h2{color:var(--nappe);font-size:32px;line-height:40px;margin-top:24px}
.editorial-lunch h2 span{font-size:40px;line-height:48px}
.formule{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.formule li{display:flex;align-items:flex-end;gap:12px;line-height:24px}
.formule .leader{border-bottom-color:rgba(255,255,255,.4);transform:translateY(-7px)}
.formule .price{flex:none;color:var(--sauge);font-family:Fraunces,serif;font-size:19px;font-weight:400}

/* Infos pratiques. */
.practical{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.practical h2{margin-bottom:24px}
.practical .text-link{margin-top:16px}
.infos-photo{margin-top:32px;height:320px}
.hours{width:100%;border-collapse:collapse;font-size:17px}
.hours th,.hours td{padding:16px 0;border-bottom:1px solid var(--sauge)}
.hours th{text-align:left;font-weight:400}
.hours td{text-align:right;line-height:24px}
.hours tr.today th,.hours tr.today td{font-weight:600;color:var(--orme)}

/* Note finale : la réservation reprise au centre, sous la feuille. */
.booking-reminder{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;justify-content:center;align-items:center;text-align:center;gap:16px;max-width:1184px;margin:0 auto clamp(48px,6vw,80px);padding:clamp(40px,5vw,64px) clamp(24px,4vw,56px);background:var(--sauge);border:0;border-radius:16px}
.band-leaf{width:34px;height:42px;color:var(--bois);flex:none}
.booking-reminder h2{color:var(--orme)}
.booking-reminder p{margin-top:0;max-width:min(44ch,100%)}
.booking-reminder .primary{margin-top:8px}

/* ------------------------------------------------------------------ */
/* 6. La carte                                                         */
/* ------------------------------------------------------------------ */
.page-title{max-width:1184px;margin:auto;padding:64px 0 48px}
.page-title h1{color:var(--orme);max-width:960px}
.menu-tabs{position:sticky;top:calc(var(--header-top) + var(--header-height) + 8px);z-index:15;width:fit-content;max-width:calc(100% - 32px);margin:0 auto;background:var(--nappe);display:flex;gap:8px;justify-content:center;border:1px solid rgba(169,184,160,.35);border-radius:999px;padding:6px;box-shadow:0 12px 32px -20px rgba(31,29,26,.3)}
.menu-tabs a{padding:8px 16px;border-radius:999px;color:var(--orme)}
.menu-tabs a:hover,.menu-tabs a:focus{background:var(--sauge)}
.menu-tabs a[aria-current="location"]{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
@supports ((backdrop-filter:blur(18px)) or (-webkit-backdrop-filter:blur(18px))){
 .menu-tabs{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
}
@media(prefers-reduced-transparency:reduce){.menu-tabs{background:var(--nappe);-webkit-backdrop-filter:none;backdrop-filter:none}}
.menu-content{max-width:1088px;margin:0 auto;padding:0 48px 64px}
.menu-block{display:grid;grid-template-columns:1fr 2fr;gap:48px;padding:48px 0;border-bottom:1px solid var(--sauge);scroll-margin-top:calc(var(--header-top) + var(--header-height) + 88px)}
.menu-block h2{font-size:32px;color:var(--orme)}
.menu-block p{margin-top:16px}
.menu-block ul{list-style:none;margin:0;padding:0}
.menu-block li{display:flex;justify-content:space-between;gap:24px;margin-top:24px;line-height:32px}
.menu-block li:first-child{margin-top:0}
.menu-block li>div{min-width:0}
.menu-block li .price{flex:none}
.veg{display:inline-flex;align-items:center;gap:8px;margin-left:8px;padding:0 8px;border-radius:8px;background:var(--sauge);color:var(--encre);font-size:17px;line-height:24px;vertical-align:middle}
.veg svg{width:16px;height:16px;flex:none}
.allergens{margin-top:32px;font-size:17px}

/* ------------------------------------------------------------------ */
/* 7. Réserver                                                         */
/* ------------------------------------------------------------------ */
.booking-layout{max-width:1184px;margin:auto;padding:0 0 80px;display:grid;grid-template-columns:3fr 2fr;gap:80px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-weight:500}
.field input,.field select{background:var(--nappe);border:1px solid var(--sauge);border-radius:8px;padding:8px 16px;min-height:56px;width:100%;min-width:0;font-size:17px;color-scheme:light}
.field input:focus,.field select:focus{border-color:var(--orme)}
.field p{font-size:17px;line-height:24px}
.field-error{color:var(--bois);font-weight:500;line-height:24px}
.field input:invalid:not(:placeholder-shown):focus{border-color:var(--bois)}
.booking-layout form>.primary{margin-top:32px;width:100%}
.booking-result{padding:24px;background:var(--sauge);margin-top:24px;border-left:4px solid var(--orme);border-radius:8px}

#booking-calendar{border:1px solid var(--orme);background:var(--nappe);padding:16px 0}
.calendar-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 8px 16px}
.calendar-heading p{font:24px/32px Fraunces,serif;color:var(--orme);text-align:center;text-transform:capitalize}
.calendar-heading button{font-size:32px;line-height:32px;min-width:48px;border:1px solid var(--sauge)}
.calendar-scroll{overflow-x:auto}
.calendar-days{display:grid;grid-template-columns:repeat(7,minmax(48px,1fr));min-width:336px}
.calendar-weekday{text-align:center;font-size:16px;line-height:32px;color:var(--orme)}
.calendar-days button{min-width:48px;min-height:48px;padding:8px;font-size:17px;border:1px solid transparent;background:var(--nappe)}
.calendar-days button:hover:not(:disabled){background:var(--sauge)}
.calendar-days button[aria-pressed="true"]{background:var(--sauge);color:var(--encre);border-color:var(--orme);font-weight:600}
.calendar-days button[aria-current="date"]{text-decoration:underline;text-underline-offset:8px}
.calendar-days button:disabled,.calendar-heading button:disabled{color:var(--bois);text-decoration:line-through;cursor:not-allowed}
.calendar-days button:focus-visible{outline-offset:-4px}
#selected-date{padding:16px 16px 0;line-height:24px;border-top:1px solid var(--sauge);margin-top:16px;font-size:17px}

.booking-aside{background:var(--sauge);padding:40px;align-self:start;border-radius:16px}
.booking-aside>.eyebrow{display:block;font-family:Fraunces,serif;font-size:32px;font-weight:400;line-height:1.15;letter-spacing:normal;text-transform:none;color:var(--encre);margin-bottom:24px}
.aside-info{border-top:1px solid var(--orme);padding-top:32px;margin-top:32px}
.aside-info h2{font-size:24px;margin-bottom:24px}

/* ------------------------------------------------------------------ */
/* 8. Infos pratiques et mentions légales                              */
/* ------------------------------------------------------------------ */
.infos-layout{max-width:1184px;margin:auto;padding:0 0 64px;display:grid;grid-template-columns:1fr 1fr;gap:96px}
.infos-layout h2{font-size:32px;color:var(--orme);margin-bottom:24px}
.infos-details>div{margin-bottom:32px;padding-bottom:16px;border-bottom:0}
.infos-details h2{font-size:24px;margin-bottom:8px}
.legal{max-width:800px;margin:auto;padding:0 24px 64px}
.legal section{margin-bottom:48px;scroll-margin-top:24px}
.legal h2{font-size:32px;margin-bottom:24px;color:var(--orme)}

/* ------------------------------------------------------------------ */
/* 9. Pied de page et éléments flottants                               */
/* ------------------------------------------------------------------ */
.site-footer{background:var(--encre);background-image:var(--grain-fort);color:var(--nappe);display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(32px,4vw,64px);padding:48px max(24px,calc((100vw - 1184px) / 2));font-size:17px}
.site-footer .logo{color:var(--nappe);margin-bottom:16px}
.site-footer p{max-width:400px}
.footer-tagline{max-width:min(34ch,100%);color:rgba(255,255,255,.78)}
.footer-col h2{font-family:Inter,sans-serif;font-size:13px;font-weight:600;line-height:24px;letter-spacing:.18em;text-transform:uppercase;color:var(--sauge);margin-bottom:12px}
.footer-col p{color:rgba(255,255,255,.78)}
.site-footer .navigation{flex-direction:column;align-items:flex-start;gap:0;margin-bottom:0}
.site-footer .navigation a{padding:0;min-height:36px;color:rgba(255,255,255,.78)}
.site-footer .navigation a:hover,.site-footer .navigation a[aria-current]{color:var(--nappe)}
.site-footer>div>a:not(.logo){min-height:36px;margin-bottom:0;color:rgba(255,255,255,.78);text-decoration:underline;text-underline-offset:8px}
.site-footer>div>a:not(.logo):hover{color:var(--nappe)}
.site-footer .footer-credit{grid-column:1/-1;max-width:none;margin-top:8px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);font-size:13px;line-height:24px;letter-spacing:.03em;color:rgba(255,255,255,.55)}

.action-bar{display:none}
.back-top{position:fixed;right:24px;bottom:24px;z-index:19;width:48px;height:48px;border:1px solid var(--orme);border-radius:50%;background:var(--nappe);color:var(--orme);font-size:24px}
.back-top:hover{background:var(--sauge)}
dialog{background:var(--nappe);color:var(--encre);border:1px solid var(--orme);border-radius:16px;padding:48px 64px 48px 32px;max-width:calc(100% - 48px);width:560px}
dialog::backdrop{background:var(--encre);opacity:.8}
.dialog-close{position:absolute;right:8px;top:8px;font-size:32px;background:var(--nappe);color:var(--orme)}

/* Couches vivantes, créées par src/site.js : feuilles qui tombent et bougie au curseur.
   Toutes deux restent derrière le contenu, au-dessus de la lumière d'ambiance. */
.chute{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.chute .f{position:absolute;top:-60px;will-change:transform}
.chute .f svg{display:block;width:100%;height:auto}
.bougie{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;z-index:-1;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(255,190,110,.16),rgba(255,190,110,.06) 55%,rgba(255,190,110,0));opacity:0;transition:opacity .8s ease}
.bougie.on{opacity:1}

/* ------------------------------------------------------------------ */
/* 10. Mouvement : court, fini, respectueux des préférences            */
/* ------------------------------------------------------------------ */
@media(prefers-reduced-motion:no-preference){
 html{scroll-behavior:smooth}
 .primary,.text-link,.menu-toggle,.navigation a,.menu-tabs a,[data-demo],.back-top{transition:background-color .24s ease,color .24s ease,transform .24s ease,border-color .28s ease,text-underline-offset .24s ease}
 .primary:hover{transform:translateY(-2px)}
 .primary:active{transform:scale(.98)}
 .text-link:hover{text-underline-offset:12px}
 .dish-grid .photo{transition:none}
 .dish-grid article:hover .photo{transform:none}
 .dish-grid .photo img{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
 /* Apparitions : chaque élément entre à son tour (classes anim / vu posées par src/site.js). */
 .anim{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
 .anim.vu{opacity:1;transform:none}
 .anim .photo img,.ambience.anim img{transform:scale(1.1);transition:transform 1.6s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
 .anim.vu:not(:hover) .photo img,.ambience.anim.vu img{transform:none}
 .eyebrow.anim .eyebrow-num::after{transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--d,0ms) + 250ms)}
 .eyebrow.anim.vu .eyebrow-num::after{transform:none}
 li.anim .leader{scale:0 1;transform-origin:left;transition:scale 1s cubic-bezier(.2,.7,.2,1) calc(var(--d,0ms) + 200ms)}
 li.anim.vu .leader{scale:1 1}
 /* Premier écran : les lignes se posent l'une après l'autre, la photo se recadre. */
 .welcome-content>*{animation:orme-monte 1s cubic-bezier(.2,.7,.2,1) both}
 .welcome-content>:nth-child(2){animation-delay:.12s}
 .welcome-content>:nth-child(3){animation-delay:.24s}
 .welcome-content>:nth-child(4){animation-delay:.36s}
 .welcome-content>:nth-child(5){animation-delay:.48s}
 .welcome-photo{animation:orme-zoom 2.4s cubic-bezier(.2,.7,.2,1) both}
 .facts li{animation:orme-monte .8s cubic-bezier(.2,.7,.2,1) both}
 .facts li:nth-child(2){animation-delay:.1s}
 .facts li:nth-child(3){animation-delay:.2s}
 .facts li:nth-child(4){animation-delay:.3s}
 /* Profondeur : la lumière d'ambiance glisse avec le défilement (--scroll posé par src/site.js). */
 body::before{inset:-20vh 0;transform:translateY(calc(var(--scroll,0) * -20vh))}
 /* Bandeau « en bref » qui défile (classe defile et copies posées par src/site.js). */
 .facts.defile{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
 .facts.defile ul{display:flex;flex-wrap:nowrap;width:max-content;justify-content:flex-start;gap:0;padding:16px 0;animation:orme-defile 38s linear infinite}
 .facts.defile ul li{padding:0 28px;white-space:nowrap;animation:none}
 .facts.defile ul li::after{content:"";display:block;width:4px;height:4px;border-radius:50%;background:var(--sauge);opacity:.85;margin-left:56px}
 .facts.defile:hover ul{animation-play-state:paused}
 @keyframes orme-defile{to{transform:translateX(-50%)}}
 @keyframes orme-tombe{to{transform:translateY(calc(100vh + 120px))}}
 @keyframes orme-virevolte{from{transform:translateX(-40px) rotate(-35deg)}to{transform:translateX(40px) rotate(55deg)}}
 @keyframes orme-monte{from{opacity:0;transform:translateY(28px)}}
 @keyframes orme-zoom{from{transform:scale(1.12)}}
 .page-title h1{animation:orme-entree .65s ease-out both}
 .booking-result:not([hidden]){animation:orme-entree .4s ease-out}
 .back-top:not([hidden]){animation:orme-menu .25s ease-out}
 .menu-open .navigation{animation:orme-menu .24s cubic-bezier(.2,.7,.2,1) both}
 .menu-icon::before,.menu-icon::after{transition:transform .22s ease,top .22s ease}
 dialog[open]{animation:orme-entree .32s cubic-bezier(.2,.7,.3,1)}
 dialog[open]::backdrop{animation:orme-voile .32s ease-out}
 @keyframes orme-entree{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
 @keyframes orme-menu{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
 @keyframes orme-voile{from{opacity:0}to{opacity:.8}}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .dish-grid article:hover .photo img{transform:scale(1.025)}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .anim{opacity:1;transform:none}
 .welcome-content>*,.welcome-photo,.facts li,.page-title h1,.booking-result,.menu-open .navigation{animation:none!important}
 .primary,.text-link,.back-top,.menu-toggle,.navigation a,.dish-grid .photo,.dish-grid .photo img{transition:none!important}
}
@media print{.anim,.anim .photo img{opacity:1!important;transform:none!important}li.anim .leader{scale:1 1!important}body::before,.chute,.bougie{display:none}}

/* ------------------------------------------------------------------ */
/* 11. Adaptations                                                     */
/* ------------------------------------------------------------------ */
@media(min-width:768px){
 .section{padding-top:80px;padding-bottom:80px}
 .booking-reminder{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px)}
}

@media(max-width:1279px){
 .page-title,.booking-layout,.infos-layout,.terrace-section,.booking-reminder{margin-left:48px;margin-right:48px}
}

@media(max-width:1023px){
 .site-footer{grid-template-columns:1fr 1fr}
}

@media(max-width:767px){
 body{padding-bottom:80px}
 :root{--header-top:8px}
 .site-header{width:calc(100% - 16px);border-radius:20px}
 :root{--lumiere:
  radial-gradient(90vw 60vw at 100% 0%,rgba(255,196,120,.30),rgba(255,196,120,0) 70%),
  radial-gradient(90vw 60vw at 0% 30%,rgba(169,184,160,.22),rgba(169,184,160,0) 70%)}
 .concept-band{padding:8px 56px 8px 16px;font-size:14px;line-height:20px;column-gap:12px}
 .concept-band a{min-height:48px}

 .site-header{padding:8px 24px 0;gap:0;flex-direction:column}
 .site-header.menu-ready{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:8px 16px}
 .site-header.menu-ready .logo{justify-content:flex-start}
 .site-header .logo{min-width:0;font-size:clamp(17px,5.5vw,24px);line-height:32px;gap:8px;min-height:48px}
 .site-header .logo span{min-width:0}
 .site-header .leaf{height:32px;width:24px}
 .site-header .menu-toggle{padding:8px 14px;gap:8px;font-size:17px}
 .menu-toggle:not([hidden]){display:inline-flex}
 .navigation{justify-content:space-between;gap:8px;flex-wrap:nowrap;width:100%;font-size:16px;line-height:24px}
 .navigation a{min-height:48px;white-space:nowrap}
 .site-header.menu-ready .navigation{grid-column:1/-1;flex-direction:column;gap:0;padding:8px 0 16px;align-items:stretch}
 .site-header.menu-ready .navigation a{justify-content:flex-start;padding:8px 16px;border-top:1px solid var(--sauge);font-size:17px}

 .welcome{min-height:calc(100svh - var(--header-height) - var(--header-top));padding:24px}
 .welcome .welcome-title{font-size:40px;line-height:48px;margin-top:24px}
 .welcome .hero-intro{margin-top:16px}
 .hero-intro{font-size:17px;line-height:24px}
 .opening-status{font-size:14px;line-height:20px}
 .welcome .opening-status{padding:8px 14px;gap:8px;align-items:center;text-wrap:balance}
 .hero-actions{flex-wrap:nowrap}
 .welcome .hero-actions{margin-top:16px;gap:16px}
 .welcome .hero-actions a{font-size:17px}
 .primary{padding:8px 16px;min-height:48px}
 .welcome-photo{object-position:55% center}

 .facts ul{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;padding:14px 16px}
 .facts li{justify-content:center;text-align:center;font-size:11px;letter-spacing:.12em;line-height:16px}
 .facts li:not(:last-child)::after{display:none}

 .section{padding:48px 24px}
 .section h2{font-size:32px}
 .section-heading{margin-bottom:24px;gap:16px}
 .section-heading a{font-size:17px;white-space:nowrap}
 .editorial-weekly .section-heading{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:32px}
 .editorial-weekly .section-heading h2{font-size:36px}
 .dish-grid{grid-template-columns:1fr;gap:32px}
 .dish-grid .placeholder{min-height:200px}
 .dish-grid .photo{height:256px}
 .dish-caption{padding:16px 0;gap:16px}

 .terrace-section{margin:16px 24px;min-height:560px}
 .terrace-section>.photo{height:100%;min-height:100%}
 .terrace-section>div:last-child{width:auto;max-width:none;margin:24px 16px;padding:24px;justify-self:stretch}
 .terrace-section h2{font-size:32px;line-height:40px}

 .lunch,.practical{grid-template-columns:1fr;gap:32px}
 .editorial-lunch{gap:0}
 .editorial-lunch .ambience{height:320px;min-height:288px}
 .editorial-lunch .lunch-copy{margin:-32px 8px 0;padding:32px 24px}
 .editorial-lunch h2{font-size:24px;line-height:32px}
 .editorial-lunch h2 span{font-size:32px;line-height:40px}
 .formule li,.menu-block li{align-items:baseline;justify-content:space-between;gap:16px}
 .formule .price,.menu-block .price{text-align:right}
 .formule .leader,.menu-block .leader{display:none}
 .infos-photo{height:256px;min-height:256px}
 .hours th,.hours td{padding:16px 0}

 .booking-reminder{margin-left:24px;margin-right:24px;align-items:flex-start;padding:clamp(40px,5vw,64px) clamp(24px,4vw,56px)}
 .booking-reminder>.primary{width:auto}

 .page-title{margin:0;padding:32px 24px}
 .page-title h1{font-size:40px;line-height:48px}
 .menu-tabs{gap:0;padding:4px;max-width:calc(100% - 16px);font-size:17px;overflow-x:auto;scrollbar-width:none}
 .menu-tabs a{padding:8px 12px;white-space:nowrap}
 .menu-content{padding:0 24px 48px}
 .menu-block{grid-template-columns:1fr;gap:24px;padding:32px 0}
 .menu-block h2{font-size:32px}
 .menu-block p{margin-top:8px}
 .menu-block li{gap:16px;line-height:24px;margin-top:24px}
 .allergens{line-height:24px}

 .booking-layout,.infos-layout{margin:0;padding:0 24px 48px;grid-template-columns:1fr;gap:40px}
 .form-grid{gap:24px 16px}
 .field:not(.full){grid-column:1/-1}
 .booking-layout form>.primary{min-height:56px}
 .booking-aside{padding:32px 24px}
 .calendar-heading{gap:0}
 .calendar-heading p{font-size:21px}
 .legal{padding-bottom:32px}

 .site-footer{grid-template-columns:1fr;gap:32px;padding:40px 24px}
 .site-footer .logo{font-size:24px}
 .site-footer .navigation{flex-wrap:wrap;justify-content:flex-start}
 .site-footer .navigation a{font-size:17px}

 .action-bar{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:16px;background:var(--nappe);border-top:1px solid var(--orme);position:fixed;bottom:0;left:0;right:0;z-index:10;line-height:24px}
 .action-bar button,.action-bar a{padding:8px;min-height:48px;font-size:17px}
 .action-bar .primary.is-secondary{color:var(--orme);background:var(--nappe);border-color:var(--nappe)}
 .action-bar a:not(.primary){color:var(--orme)}
 .back-top{display:none}
 dialog{padding:56px 24px 24px;max-width:calc(100% - 32px)}
 @supports ((backdrop-filter:blur(18px)) or (-webkit-backdrop-filter:blur(18px))){
  .site-header,.menu-tabs{background:rgba(255,255,255,.8)}
 }
 .eyebrow{font-size:12px}
}

@media(hover:none){.bougie{display:none}}
@media(max-width:767px) and (prefers-reduced-transparency:reduce){.site-header,.menu-tabs{background:var(--nappe)}}

@media(max-width:359px){
 .site-header{padding-left:16px;padding-right:16px}
 .site-header.menu-ready{padding-left:8px;padding-right:8px}
 .site-header .leaf{width:24px;height:32px}
 .navigation{gap:8px;font-size:16px}
 .hero-actions{flex-direction:column;align-items:stretch}
 .welcome .hero-actions{width:100%;align-items:center}
 .welcome .hero-actions a{max-width:100%;justify-content:center;text-align:center}
 .section-heading{flex-direction:column;align-items:flex-start}
}

/* L'appel à l'action fixe s'efface tant que celui du premier écran est visible. */
body:has(.welcome).welcome-visible .action-bar{visibility:hidden;pointer-events:none}