/* Pizzeria La Fournaise — feuille commune a index.html et commander.html.
   Extraite du <style> d'index.html : une seule source, pour que les deux
   pages ne divergent pas. */
:root{
  --bg:#14100d; --bg2:#1c1611; --card:#221a14; --card2:#2a2019;
  --line:#3a2c20; --ink:#f6ecdf; --muted:#c3ab93;
  --ember:#ef8a22; --ember2:#ff9d3c; --red:#d6451c; --cream:#f4ecdd; --olive:#8a9a4b;
  --shadow:0 24px 60px rgba(0,0,0,.55); --onEmber:#1A1006;
  /* Relief des boutons : une ombre noire courte qui les pose, doublee d'un
     halo braise TRES court. Le flou large en orange lisait comme une brume ;
     ici le halo se devine sans deborder. Trois intensites, une seule source. */
  --glow:0 4px 14px rgba(0,0,0,.34), 0 1px 8px rgba(239,138,34,.22);
  --glow-lg:0 8px 22px rgba(0,0,0,.42), 0 2px 12px rgba(239,138,34,.24);
  --glow-hover:0 10px 26px rgba(0,0,0,.46), 0 3px 16px rgba(239,138,34,.34);
  /* Point d'arrivee des ancres de la page vitrine. Le bandeau colle en haut
     et mesure 65 px ; les sections ouvrent deja sur 64 a 124 px de padding.
     Avec 84 px on atterrissait SOUS le bandeau : une tranche du bloc
     precedent restait visible (le ruban coupe en deux) et le padding entier
     s'ajoutait dessous — le grand vide au clic sur « Notre histoire ».
     A 20 px on vise l'interieur du padding : le haut de la section passe
     DERRIERE le bandeau (plus rien du ruban ne depasse) et il reste 20 px
     d'air meme sur une fenetre courte, ou le padding tombe a son minimum.
     commander.html garde 84 px : sa section n'a que ~16 px de padding haut,
     il lui faut la hauteur du bandeau pour ne rien masquer. */
  --ancre:20px;
}
/* Thème fixe : le site est en sombre, sans bascule. Le jeu de
   variables clair a été retiré — il n'était plus atteignable. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--ember);text-decoration:none}
a:hover{color:var(--ember2)}
::selection{background:var(--ember);color:#14100d}

@keyframes emberRise{0%{opacity:0;transform:translate3d(0,0,0) scale(.6)}12%{opacity:1}70%{opacity:.9}100%{opacity:0;transform:translate3d(22px,-70vh,0) scale(1.25)}}
@keyframes smokeDrift{0%{opacity:.18;transform:translate3d(-4%,0,0) scale(1)}50%{opacity:.34;transform:translate3d(6%,-3%,0) scale(1.14)}100%{opacity:.18;transform:translate3d(-4%,0,0) scale(1)}}
@keyframes flicker{0%,100%{opacity:.55}45%{opacity:.85}70%{opacity:.4}}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(138,154,75,.6)}70%{box-shadow:0 0 0 10px rgba(138,154,75,0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes drawerIn{from{transform:translateX(102%)}to{transform:translateX(0)}}
@keyframes sheetUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(var(--marquee-shift,-50%))}}
@keyframes cueDown{0%{opacity:0;transform:translateY(-6px)}50%{opacity:1}100%{opacity:0;transform:translateY(8px)}}
@keyframes itemIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

/* Hover / focus states (were style-hover attributes in the design source) */
.navlink:hover{background:var(--card);color:var(--ember2)}
.ghost:hover{border-color:var(--ember);color:var(--ember2)}
.ghost2:hover{border-color:var(--ember2);color:var(--ember2)}
.ember-btn{transition:filter .25s ease,transform .25s ease,box-shadow .25s ease}
.ember-btn:hover{filter:brightness(1.08)}
/* !important assume : ces boutons portent leur ombre en style en ligne, herite
   de la source du design, et une regle de classe ne pourrait pas la surpasser
   au survol. */
.ember-btn:hover{box-shadow:var(--glow-hover) !important}
.ember-btn.lift:hover{transform:translateY(-2px)}
.tile{transition:border-color .3s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.tile:hover{border-color:var(--ember);transform:translateY(-4px)}
.tile.warm:hover{border-color:var(--ember2)}
/* Vignette survolee : la carte se souleve et s'entoure d'un halo braise.
   Le liseré net (0 0 0 1px) dessine le contour, le flou court le rechauffe —
   meme grammaire que les boutons, sans la brume.
   Encadre par (hover:hover) : sur un ecran tactile, :hover reste colle apres
   le doigt et la derniere pizza touchee resterait allumee. */
@media (hover:hover) and (pointer:fine){
  .item:hover{transform:translateY(-5px);border-color:var(--ember);
    box-shadow:0 18px 40px rgba(0,0,0,.42),
               0 0 0 1px rgba(255,157,60,.48),
               0 6px 34px rgba(239,138,34,.38)}
  .item:hover .item-plus{border-color:var(--ember2);background:rgba(239,138,34,.18)}
}
/* Au doigt, le retour est immediat et bref : l'appui allume la carte, le
   relachement l'eteint. */
.item:active{transform:translateY(-2px) scale(.995);border-color:var(--ember);
  box-shadow:0 10px 26px rgba(0,0,0,.45), 0 0 0 1px rgba(255,157,60,.52),
             0 5px 28px rgba(239,138,34,.44)}
.item:focus-visible{outline:none;border-color:var(--ember2);
  box-shadow:0 0 0 2px rgba(255,157,60,.55), 0 12px 30px rgba(0,0,0,.4)}
.item-plus{transition:border-color .3s ease,background .3s ease}

/* Le nom et le prix des pizzas reprennent la police de « L'Effiloché » — la
   serif de la maison, déjà employée pour la pizza du moment et les grands
   titres. Les vignettes étaient en sans-serif capitales, ce qui les faisait
   lire comme une liste plutôt que comme une carte.
   Ne concerne QUE la carte : les suppléments et le panier restent en
   sans-serif, plus lisible en petits caractères et sur des listes d'options. */
.item-nom{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:21px;
  line-height:1.08;letter-spacing:-.005em;text-transform:none}
@media (max-width:520px){.item-nom{font-size:19.5px}}

/* Le prix sur la vignette : c'est l'information qu'on cherche en parcourant la
   carte, elle ne doit pas se lire à la loupe. 11,5 px -> 18 px, dans la même
   serif que le nom, avec des chiffres à chasse fixe pour que la colonne de
   prix reste alignée d'une vignette à l'autre. */
.item-prix{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:18px;
  letter-spacing:0;font-variant-numeric:tabular-nums;
  box-shadow:0 4px 14px rgba(0,0,0,.35)}
@media (max-width:520px){.item-prix{font-size:17px;padding:5px 11px}}
.ig img{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.ig:hover img{transform:scale(1.08)}
.flink{transition:color .2s ease}
.flink:hover{color:var(--ember2)}
/* Pastilles reseaux sociaux du pied de page. */
.reseau{transition:border-color .25s ease,color .25s ease,transform .25s ease}
.reseau:hover{border-color:var(--ember);color:var(--ember2);transform:translateY(-2px)}
/* Les deux boutons de la section Instagram se rangent cote a cote, et
   passent a la ligne ensemble sur un ecran etroit. */
.ig-entete{flex-wrap:wrap}
.ig-entete>a{flex:0 0 auto}
.qbtn:hover{background:var(--card);color:var(--ember2)}
.qbtn-sm:hover{color:var(--ember2)}
.field:focus{border-color:var(--ember);outline:none}
.tabs::-webkit-scrollbar{display:none}

/* Horaires : le jour courant se surligne tout seul. Le repere s'y deplace au
   lieu de designer eternellement le mardi — un visiteur du samedi soir veut
   lire SON horaire, pas celui du jour de fermeture. */
.horaires .jour{display:flex;justify-content:space-between;gap:12px;
  padding:6px 10px;margin:0 -10px;border-radius:8px;
  transition:background .3s ease,color .3s ease}
.horaires .jour-nom{color:var(--muted)}
.horaires .jour-heures{font-weight:700;color:var(--ink)}
.horaires .jour[data-ferme] .jour-heures{color:var(--muted)}
.horaires .jour.aujourdhui{background:rgba(239,138,34,.14)}
.horaires .jour.aujourdhui .jour-nom{color:var(--ember2);font-weight:700}
.horaires .jour.aujourdhui .jour-heures{color:var(--ember2)}
/* Fermé aujourd'hui : rouge plutôt qu'orange, l'information n'est pas la même. */
.horaires .jour.aujourdhui[data-ferme]{background:rgba(214,69,28,.16)}
.horaires .jour.aujourdhui[data-ferme] .jour-nom,
.horaires .jour.aujourdhui[data-ferme] .jour-heures{color:var(--red)}
/* La transition vit ici, pas dans le style en ligne : app.js réécrit ce style
   à chaque bascule, et une propriété absente de l'attribut laisse la règle CSS
   s'appliquer. C'est ce qui fait glisser la pastille au lieu de la faire
   sauter d'un onglet à l'autre. */
.tabs button{transition:background .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease}
/* Changement d'onglet : les vignettes montent en cascade courte. L'enveloppe
   porte l'animation, la carte garde son propre transform au survol — sinon
   l'un ecraserait l'autre. */
.item-in{display:flex;animation:itemIn .38s cubic-bezier(.22,1,.36,1) both}
.item-in>.item{flex:1;min-width:0}

/* Marquee. One group is narrower than a wide viewport, so two copies leave a
   visible gap mid-cycle. app.js clones the group until the track is at least
   twice the viewport and shifts by exactly one group width, which loops
   seamlessly at any screen size. */
.marquee-track{display:flex;width:max-content;will-change:transform;animation:marquee var(--marquee-duration,32s) linear infinite}
.marquee-group{display:flex;align-items:center;gap:34px;padding-right:34px;font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.marquee-group i{color:var(--ember);font-style:normal}

/* Item sheet. A bottom sheet is right on a phone, but on a wide (and often
   short) desktop viewport it pins the panel — and the Ajouter CTA — to the
   very bottom edge, so from 920px up it becomes a centred dialog instead.
   The action row sticks to the bottom of the panel either way, so it stays
   reachable without scrolling past every supplement. */
.sheet-wrap{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center}
.sheet-panel{position:relative;width:min(560px,100%);max-height:92svh;overflow-y:auto;background:var(--bg2);border:1px solid var(--line);border-radius:24px 24px 0 0;box-shadow:var(--shadow);animation:sheetUp .34s cubic-bezier(.22,1,.36,1) both}
.sheet-body{padding:20px 20px 0}
.sheet-actions{position:sticky;bottom:0;background:var(--bg2);padding:10px 0 20px}
@keyframes sheetPop{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media (min-width:920px){
  .sheet-wrap{align-items:center;padding:24px}
  .sheet-panel{max-height:min(86svh,720px);border-radius:24px;animation:sheetPop .3s cubic-bezier(.22,1,.36,1) both}
}

/* isDesktop === width >= 920 in the design source */
@media (max-width:919px){.desktop-only{display:none !important}}
@media (min-width:920px){.mobile-only{display:none !important}}
/* Sous 920px, la barre flottante du bas porte déjà l'appel à commander :
   le bouton du haut ferait doublon. Caché par défaut et révélé au-dessus du
   seuil, plutôt que l'inverse — une largeur fractionnaire (919,5 px sur un
   écran mis à l'échelle) échappait aux deux requêtes et les affichait tous
   les deux. */
.nav-cta{display:none !important}
@media (min-width:920px){.nav-cta{display:flex !important}}

/* Mobile : le hero faisait une hauteur d'écran entière avec son contenu calé
   en bas. Tout l'espace libre s'accumulait donc EN HAUT, entre le bandeau et
   le titre — près de 250 px de vide sur un grand téléphone. On le laisse
   prendre la hauteur de son contenu et on allège le rembourrage haut : le
   titre remonte, et le bandeau défilant se devine en bas de l'écran, ce qui
   invite à faire défiler. */
@media (max-width:919px){
  .hero{min-height:auto !important}
  /* Un cran plus bas qu'avant (26 -> 44 px au minimum) : le bandeau du haut
     serrait le texte, et la photo derrière méritait de respirer au-dessus. */
  .hero-inner{padding-top:clamp(44px,8vh,74px) !important;
              padding-bottom:clamp(88px,13vh,120px) !important}
}
body.is-locked .floating-bar{display:none !important}

/* Petits écrans : le bandeau (marque + accroche + téléphone) dépassait la
   largeur du viewport et faisait défiler toute la page latéralement. On
   supprime l'accroche et on resserre les espacements plutôt que de rétrécir
   le reste.
   Le bouton « Commander » ayant quitté le bandeau sur mobile, la place est
   revenue : le numéro y tient désormais en entier, et appeler reste le geste
   le plus direct depuis un téléphone. */
@media (max-width:560px){
  .nav-row{gap:10px !important;padding-left:12px !important;padding-right:12px !important}
  .nav-actions{gap:6px !important;flex:0 0 auto}
  .nav-phone{padding:9px 13px !important;font-size:13px !important}
  .nav-brand img{height:38px !important;width:38px !important}
  .nav-brand>span>span:first-child{font-size:15px !important}
  .brand-kicker{font-size:8.5px !important;letter-spacing:.18em !important}
  .nav-brand>span>span{white-space:nowrap}
}

/* Très petits téléphones (320 px) : la marque sur deux lignes et le numéro
   complet dépassaient de 7 px. Plutôt que d'amputer l'un des deux, on retire
   le contour et le rembourrage de la pastille téléphone — le numéro reste
   lisible et cliquable, et la ligne tient. */
@media (max-width:400px){
  .nav-phone{padding:6px 2px !important;border-color:transparent !important;gap:6px !important}
}
/* En 320 px, marque et numéro se touchaient encore : la ligne tenait, mais
   sans respiration. On rogne la marque plutôt que le numéro — c'est le
   téléphone qu'on vient chercher depuis un écran de cette taille. */
@media (max-width:360px){
  .nav-brand>span>span:first-child{font-size:13.5px !important}
  .brand-kicker{font-size:8px !important}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}