/* L'Atmosphère · fiche d'un plat (photo en vedette, zoom sur les ingrédients, histoire, fabrication, accord) */
.fiche{--fi-or:#C4A35A;--fi-or2:#E2C07A;--fi-ral:#7C1B28;--fi-mut:#B0A797;--fi-soft:cubic-bezier(0.22,0.61,0.36,1);position:fixed;inset:0;z-index:9000;visibility:hidden;opacity:0;transition:opacity 0.5s var(--fi-soft),visibility 0s 0.5s;font-family:'Jost',sans-serif;font-weight:300;color:#fff}
.fiche.on{visibility:visible;opacity:1;transition:opacity 0.6s var(--fi-soft)}
.fiche *{box-sizing:border-box}.fiche{overflow:hidden}
.fiche button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.fiche :focus-visible{outline:2px solid var(--fi-or2);outline-offset:3px}
.fi-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 30% 50%,rgba(124,27,40,0.5),transparent 70%),rgba(8,6,5,0.93);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.fi-x{position:absolute;top:22px;right:26px;z-index:5;width:46px;height:46px;border:1px solid rgba(196,163,90,0.38);border-radius:50%;font-size:24px;line-height:1;color:var(--fi-or);transition:background 0.3s,color 0.3s}
.fi-x:hover{background:var(--fi-or);color:#000}
.fi-wrap{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2.4vw;align-items:center;padding:5vh 5vw 4vh 4vw}
/* ── la photo ── */
.fi-plate{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2vh;min-height:0}
.fi-stage{--P:min(46vw,66vh);position:relative;width:var(--P);height:var(--P);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0.7) rotate(-24deg);transition:opacity 0.9s var(--fi-soft),transform 1.1s cubic-bezier(0.34,1.3,0.64,1)}
.fiche.in .fi-stage{opacity:1;transform:none}
.fi-ring{position:absolute;inset:-5%;border:1px dashed rgba(196,163,90,0.38);border-radius:50%;animation:fiSpin 60s linear infinite;pointer-events:none}
.fi-ring.r2{inset:-11%;border:1px solid rgba(196,163,90,0.14);animation-direction:reverse;animation-duration:90s}
@keyframes fiSpin{to{transform:rotate(360deg)}}
.fi-lens{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:clip-path 0.8s var(--fi-soft),box-shadow 0.8s;filter:drop-shadow(0 30px 40px rgba(0,0,0,0.6))}
.fi-stage.zm .fi-lens{clip-path:circle(49.5% at 50% 50%);box-shadow:0 0 0 2px var(--fi-or);filter:none}
.fi-box{position:relative;width:92%;display:flex;align-items:center;justify-content:center}
.fi-img{position:relative;width:100%;aspect-ratio:var(--ar,1);transform-origin:0 0;transition:transform 1.1s var(--fi-soft);will-change:transform}
.fi-img img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;pointer-events:none}
.fi-dot{position:absolute;width:26px;height:26px;margin:0;border:1px solid var(--fi-or2);border-radius:50%;background:rgba(8,6,5,0.72);color:var(--fi-or2);font-size:12px;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%) scale(calc(1 / var(--z,1)));transition:transform 1.1s var(--fi-soft),background 0.3s,color 0.3s,box-shadow 0.3s;opacity:0;animation:fiPop 0.6s var(--fi-soft) forwards;animation-delay:calc(0.9s + var(--k) * 0.1s)}
@keyframes fiPop{from{opacity:0}to{opacity:1}}
.fi-dot::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--fi-or2);opacity:0.5;animation:fiPulse 2.4s ease-out infinite}
@keyframes fiPulse{from{transform:scale(0.7);opacity:0.7}to{transform:scale(1.5);opacity:0}}
.fi-dot:hover,.fi-dot.hl{background:var(--fi-or2);color:#000;box-shadow:0 0 18px rgba(226,192,122,0.8)}
.fi-dot.act{background:var(--fi-or2);color:#000}
.fi-cap{min-height:4.2em;max-width:min(46vw,560px);text-align:center;opacity:0;transform:translateY(8px);transition:opacity 0.7s var(--fi-soft) 0.8s,transform 0.7s var(--fi-soft) 0.8s}
.fiche.in .fi-cap{opacity:1;transform:none}
.fi-cap b{display:block;font-family:'Bodoni Moda',serif;font-style:italic;font-weight:400;font-size:15px;letter-spacing:0.28em;text-transform:uppercase;color:var(--fi-or);margin-bottom:4px}
.fi-cap span{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(17px,1.5vw,22px);line-height:1.45;color:rgba(255,255,255,0.92)}
.fi-reset{position:absolute;left:50%;bottom:-2px;transform:translate(-50%,0);padding:7px 16px;border:1px solid rgba(196,163,90,0.38);background:rgba(8,6,5,0.7);font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:var(--fi-or);opacity:0;pointer-events:none;transition:opacity 0.4s}
.fi-stage.zm .fi-reset{opacity:1;pointer-events:auto}
.fi-strip{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;opacity:0;transition:opacity 0.7s var(--fi-soft) 1.1s}
.fiche.in .fi-strip{opacity:1}
.fi-th{width:54px;height:54px;border-radius:50%;border:1px solid transparent;padding:3px;transition:border-color 0.3s,transform 0.3s;background:rgba(255,255,255,0.03)}
.fi-th img{width:100%;height:100%;object-fit:contain;display:block}
.fi-th:hover{transform:translateY(-3px)}
.fi-th.cur{border-color:var(--fi-or2)}
/* ── le texte ── */
.fi-side{min-width:0;max-height:100%;display:flex;flex-direction:column;overflow:hidden}
.fi-side>*{opacity:0;transform:translateY(14px);transition:opacity 0.7s var(--fi-soft),transform 0.7s var(--fi-soft)}
.fiche.in .fi-side>*{opacity:1;transform:none}
.fiche.in .fi-side>:nth-child(1){transition-delay:0.35s}.fiche.in .fi-side>:nth-child(2){transition-delay:0.45s}.fiche.in .fi-side>:nth-child(3){transition-delay:0.55s}.fiche.in .fi-side>:nth-child(4){transition-delay:0.65s}.fiche.in .fi-side>:nth-child(5){transition-delay:0.75s}.fiche.in .fi-side>:nth-child(6){transition-delay:0.85s}
.fi-cat{font-family:'Bodoni Moda',serif;font-style:italic;font-size:14px;letter-spacing:0.4em;text-transform:uppercase;color:var(--fi-or)}
.fi-name{font-family:'Pinyon Script',cursive;font-weight:400;font-size:clamp(46px,5.2vw,86px);line-height:1.02;margin:6px 0 4px;text-shadow:0 4px 40px rgba(0,0,0,0.8)}
.fi-tag{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(18px,1.7vw,25px);color:rgba(255,255,255,0.9);margin-bottom:16px}
.fi-tabs{display:flex;gap:2px;border-bottom:1px solid rgba(196,163,90,0.18);margin-bottom:14px;flex-wrap:wrap}
.fi-tabs button{position:relative;padding:11px 16px;font-size:12px;letter-spacing:0.24em;text-transform:uppercase;color:var(--fi-mut);transition:color 0.3s}
.fi-tabs button::after{content:'';position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--fi-or2);transform:scaleX(0);transition:transform 0.4s var(--fi-soft)}
.fi-tabs button[aria-selected=true]{color:#fff}.fi-tabs button[aria-selected=true]::after{transform:scaleX(1)}
.fi-tabs button:hover{color:var(--fi-or2)}
.fi-body{flex:1;min-height:0;overflow:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:rgba(196,163,90,0.4) transparent}
.fi-pn{display:none}.fi-pn.on{display:block;animation:fiIn 0.6s var(--fi-soft)}
@keyframes fiIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fi-li{display:flex;gap:14px;width:100%;text-align:left;padding:11px 8px;border-bottom:1px solid rgba(196,163,90,0.1);transition:background 0.3s,padding-left 0.3s}
.fi-li:hover,.fi-li.hl{background:rgba(196,163,90,0.07);padding-left:14px}
.fi-li i{flex:0 0 28px;height:28px;border:1px solid var(--fi-or2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;color:var(--fi-or2)}
.fi-li.hl i,.fi-li.act i{background:var(--fi-or2);color:#000}
.fi-li b{display:block;font-family:'Cormorant Garamond',serif;font-weight:400;font-size:21px;color:#fff}
.fi-li em{display:block;font-style:normal;font-size:14px;line-height:1.55;color:var(--fi-mut)}
.fi-story p{font-family:'Cormorant Garamond',serif;font-size:clamp(18px,1.55vw,22px);line-height:1.7;color:rgba(255,255,255,0.92);margin-bottom:14px}
.fi-story p:first-child::first-letter{font-size:2.4em;float:left;line-height:0.8;margin:6px 10px 0 0;color:var(--fi-or2);font-family:'Cormorant Garamond',serif}
.fi-play{margin:4px 0 12px;padding:10px 18px;border:1px solid var(--fi-or);color:var(--fi-or);font-size:12px;letter-spacing:0.26em;text-transform:uppercase;transition:background 0.3s,color 0.3s}
.fi-play:hover,.fi-play.run{background:var(--fi-or);color:#000}
.fi-steps{list-style:none;counter-reset:s;position:relative}
.fi-steps::before{content:'';position:absolute;left:14px;top:16px;bottom:16px;width:1px;background:rgba(196,163,90,0.25)}
.fi-steps .fi-li{position:relative}
.fi-steps .fi-li.done i{background:rgba(196,163,90,0.35);color:#fff}
.fi-steps .fi-li.act{background:rgba(196,163,90,0.09)}
.fi-pair{padding:16px 18px;border:1px solid rgba(196,163,90,0.3);background:rgba(8,6,5,0.5)}
.fi-pair small{display:block;font-size:11px;letter-spacing:0.4em;text-transform:uppercase;color:var(--fi-or);margin-bottom:6px}
.fi-pair b{display:block;font-family:'Cormorant Garamond',serif;font-weight:400;font-style:italic;font-size:24px;margin-bottom:6px}
.fi-pair p{font-size:15px;line-height:1.6;color:var(--fi-mut)}
.fi-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:14px;margin-top:10px;border-top:1px solid rgba(196,163,90,0.18)}
.fi-price{font-family:'Cormorant Garamond',serif;font-size:30px;color:var(--fi-or2);min-width:4.5em}
.fi-book{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;background:var(--fi-ral);border:1px solid var(--fi-ral);font-size:12px;letter-spacing:0.28em;text-transform:uppercase;color:#fff;text-decoration:none;transition:background 0.3s,color 0.3s}
.fi-book:hover{background:var(--fi-or);border-color:var(--fi-or);color:#000}
.fi-arr{width:44px;height:44px;border:1px solid rgba(196,163,90,0.3);color:var(--fi-or);font-size:18px;transition:background 0.3s,color 0.3s}
.fi-arr:hover{background:var(--fi-or);color:#000}
.fi-sp{flex:1}
.fi-alc{font-size:11px;color:var(--fi-mut);margin-top:10px}
body.fi-open{overflow:hidden}
/* lien « Découvrir ce plat » ajouté dans la carte du site */
.fi-disc{display:inline-block;margin-top:8px;font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:var(--fi-or2,#E2C07A);background:none;border:none;border-bottom:1px solid rgba(196,163,90,0.4);padding:2px 0;cursor:pointer;font-family:'Jost',sans-serif;font-weight:300;transition:color 0.3s,border-color 0.3s}
.fi-disc:hover{color:#fff;border-color:#fff}
/* ── mobile / portrait : colonne simple, la photo en haut, défilement vertical ── */
@media (max-width:900px),(max-aspect-ratio:1/1){
  .fiche{overflow:hidden}
  .fi-wrap{display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:60px 16px 28px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
  .fi-plate,.fi-side{flex:none;min-height:auto}
  .fi-stage{--P:min(80vw,42vh);margin:0 auto}
  .fi-cap{max-width:92vw;min-height:3.4em;margin:0 auto}
  .fi-side{overflow:visible;max-height:none}
  .fi-body{overflow:visible;padding-right:0}
  .fi-x{top:12px;right:12px;position:fixed}
  .fi-name{font-size:clamp(40px,12vw,64px)}
  .fi-strip{gap:6px}.fi-th{width:44px;height:44px}
}@media (prefers-reduced-motion:reduce){.fi-ring,.fi-dot::after{animation:none}.fi-stage,.fi-img,.fi-dot{transition-duration:0.01s}}