/* ==========================================================================
   TIRAMYTO — pages de commande (commande.html, confirmation.html)
   S'ajoute à style.css : mêmes couleurs, mêmes polices, mêmes boutons.
   ========================================================================== */
[hidden]{display:none!important}
.btn--wa{--bg:var(--cream);--fg:var(--choc);--bd:var(--cream)}
.btn--wa svg{color:var(--gold-ink)}
.btn--wa:hover svg{color:var(--choc)}

/* ---------- Bandeau d'introduction ---------- */
.ohead{background:radial-gradient(90% 120% at 85% 0%,#4A2C20 0%,transparent 60%),var(--choc-deep) url(img/grain.png);color:var(--cream);
  padding:calc(var(--header-h) + clamp(2.2rem,5vw,3.6rem)) 0 clamp(2.4rem,5vw,3.4rem);text-align:center}
.ohead__title{font:600 clamp(2.1rem,6vw,3.9rem)/1.08 var(--serif);text-transform:uppercase;letter-spacing:.14em;text-indent:.14em}
.ohead__title--dark{color:var(--choc);margin-bottom:1rem;font-size:clamp(1.7rem,4.6vw,2.6rem)}
.ohead__text{max-width:36rem;margin:1.1rem auto 0;color:#EADFCF;font-size:1.05rem}
.steps{display:flex;justify-content:center;gap:clamp(.8rem,3vw,2.2rem);margin-top:1.8rem;flex-wrap:wrap}
.steps li{display:flex;align-items:center;gap:.6rem;font:500 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#CDBBA4}
.steps i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid rgba(200,162,124,.7);font:600 .9rem/1 var(--serif);font-style:normal;letter-spacing:0}
.steps .is-current{color:var(--cream)}
.steps .is-current i{background:var(--gold);border-color:var(--gold);color:var(--choc-deep)}
@media (max-width:520px){.steps span{display:none}.steps .is-current span{display:inline}}

/* ---------- Mise en page du formulaire ---------- */
.of-section{padding:clamp(1.6rem,4vw,3rem) 0 clamp(6rem,10vw,6rem)}
.of{display:grid;gap:1.6rem;align-items:start}
@media (min-width:1000px){.of{grid-template-columns:minmax(0,1fr) minmax(320px,380px);gap:2.2rem}.of-section{padding-bottom:5rem}}
.of__main{min-width:0}

.ocard{margin:0 0 1.4rem;min-width:0;border:1px solid rgba(184,138,62,.45);border-radius:24px;padding:clamp(1.15rem,3vw,2rem);
  background:var(--paper) url(img/grain.png);box-shadow:var(--shadow)}
.ocard__head{display:flex;align-items:center;gap:.9rem;width:100%;padding:0;margin-bottom:1.2rem}
.ocard__num{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--gold);color:var(--choc-deep);font:600 1.2rem/1 var(--serif)}
.ocard__title{font:600 clamp(1.4rem,3vw,1.8rem)/1.1 var(--serif);letter-spacing:.02em}

/* Le titre de chaque étape est flottant : sinon le <legend> se pose à cheval sur la bordure du cadre */
.ocard__head{float:left}
.ocard>*:not(legend){clear:both}
/* Lignes de commande */
.line{border:1px solid rgba(184,138,62,.38);border-radius:18px;padding:clamp(.9rem,2.4vw,1.2rem);background:rgba(255,255,255,.5);margin-bottom:1rem}
.line__top{display:flex;justify-content:space-between;align-items:center}
.line__n{font:italic 500 1.35rem/1 var(--serif)}
.line__rm{border:0;background:none;color:var(--muted);font:500 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:.5rem}
.line__rm:hover{color:var(--choc)}
.line__label{margin:1rem 0 .55rem;font:500 .7rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink)}
.flv,.fmt{display:grid;gap:.6rem}
.flv{grid-template-columns:repeat(4,minmax(0,1fr))}
.fmt{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){.flv,.fmt{grid-template-columns:repeat(2,minmax(0,1fr))}}
.flv__opt,.fmt__opt,.mode,.chip{position:relative;display:block;cursor:pointer}
.flv__opt input,.fmt__opt input,.mode input,.chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.flv__box,.fmt__box,.mode__box,.chip span{display:flex;border:1.5px solid rgba(184,138,62,.35);border-radius:16px;background:#FFFDF8;transition:border-color .25s,background-color .25s,box-shadow .25s,transform .25s var(--ease),color .25s}
.flv__box{flex-direction:column;align-items:center;gap:.35rem;padding:.7rem .4rem .6rem;text-align:center}
.flv__box img{width:72px;height:60px;object-fit:contain}
.flv__box b{font:600 .98rem/1.15 var(--serif)}
.fmt__box{flex-direction:column;gap:.1rem;padding:.75rem .85rem;height:100%}
.fmt__box b{font:600 .88rem/1.2 var(--sans)}
.fmt__box small{font-size:.74rem;line-height:1.3;color:var(--muted)}
.fmt__price{margin-top:.3rem;font:600 1.15rem/1 var(--serif);color:var(--gold-ink)}
.flv__opt:hover .flv__box,.fmt__opt:hover .fmt__box,.mode:hover .mode__box,.chip:hover span{border-color:var(--gold);transform:translateY(-2px)}
input:checked + .flv__box,input:checked + .fmt__box,input:checked + .mode__box,input:checked + span{border-color:var(--gold-ink);background:var(--kraft-soft);box-shadow:0 10px 22px -16px rgba(58,34,24,.7)}
input:focus-visible + .flv__box,input:focus-visible + .fmt__box,input:focus-visible + .mode__box,input:focus-visible + span{outline:2px solid var(--gold-ink);outline-offset:2px}
input:checked + .flv__box::after,input:checked + .fmt__box::after{content:"";position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;background:var(--gold-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.7 2.7L13 6.5' fill='none' stroke='%23FBF6EC' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.line__foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.1rem;flex-wrap:wrap}
.qty{display:inline-flex;align-items:center;border:1.5px solid rgba(184,138,62,.5);border-radius:999px;background:#FFFDF8}
.qty button{width:42px;height:42px;border:0;border-radius:50%;background:none;font:500 1.4rem/1 var(--sans);cursor:pointer;color:var(--choc);transition:background-color .2s}
.qty button:hover:not(:disabled){background:var(--kraft-soft)}
.qty button:disabled{opacity:.3;cursor:default}
.qty__n{min-width:2.4rem;text-align:center;font:600 1.15rem/1 var(--serif)}
.line__price{font:600 1.25rem/1.2 var(--serif);color:var(--choc);text-align:right}
.addline{width:100%;display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.95rem;border:1.5px dashed var(--gold);border-radius:16px;background:none;cursor:pointer;
  font:500 .78rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--choc);transition:background-color .25s,border-color .25s}
.addline span{font:400 1.4rem/1 var(--serif);color:var(--gold-ink)}
.addline:hover{background:var(--kraft-soft);border-color:var(--gold-ink)}

/* Champs */
.field{margin-top:1.15rem}
.field:first-child{margin-top:0}
.field label,.flabel{display:block;margin-bottom:.5rem;font:500 .72rem/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.field label em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--muted);font-size:.8rem}
.field input,.field textarea{width:100%;padding:.9rem 1rem;border:1.5px solid rgba(184,138,62,.5);border-radius:14px;background:#FFFDF8;color:var(--choc);font:400 1rem/1.4 var(--sans);transition:border-color .25s,box-shadow .25s;appearance:none;-webkit-appearance:none}
.field textarea{resize:vertical;min-height:84px}
.field input::placeholder,.field textarea::placeholder{color:#9A8473}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--gold-ink);box-shadow:0 0 0 3px rgba(184,138,62,.28)}
.field input[aria-invalid],.field textarea[aria-invalid]{border-color:#A33A2A;box-shadow:0 0 0 3px rgba(163,58,42,.14)}
.field input[type="date"]{min-height:50px}
.fhelp,.fnote{margin-top:.45rem;font-size:.84rem;line-height:1.45;color:var(--muted)}
.fnote{margin:.8rem 0 0;font-style:italic}
.ferr{margin-top:.5rem;font:500 .86rem/1.4 var(--sans);color:#9B2F1F}
.ferr::before{content:"! ";font-weight:600}
.grid2{display:grid;gap:0 1.2rem;margin-top:1.15rem}
@media (min-width:700px){.grid2{grid-template-columns:1fr 1fr}}
.grid2 .field{margin-top:0}
.grid2>.field+.field{margin-top:1.15rem}
@media (min-width:700px){.grid2>.field+.field{margin-top:0}}
#addrBlock{margin-top:1.15rem}

.modes{display:grid;gap:.7rem;grid-template-columns:1fr 1fr}
@media (max-width:520px){.modes{grid-template-columns:1fr}}
.mode__box{flex-direction:column;gap:.15rem;padding:.95rem 1.1rem}
.mode__box svg{width:26px;height:26px;color:var(--gold-ink);margin-bottom:.3rem}
.mode__box b{font:600 1.3rem/1.1 var(--serif)}
.mode__box small{font-size:.82rem;line-height:1.35;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip span{padding:.7rem 1.05rem;border-radius:999px;font:500 .88rem/1 var(--sans)}

/* ---------- Récapitulatif ---------- */
.osum{min-width:0}
@media (min-width:1000px){.osum{position:sticky;top:calc(var(--header-h) + 14px)}}
.osum__card{background:var(--choc) url(img/grain.png);color:var(--cream);border-radius:24px;padding:clamp(1.3rem,3vw,1.8rem);box-shadow:0 26px 50px -30px rgba(42,24,15,.85);border:1px solid rgba(184,138,62,.5)}
.osum__title{font:italic 500 1.8rem/1.1 var(--serif)}
.osum__rule{height:1px;margin:1rem 0;background:linear-gradient(90deg,var(--gold),transparent)}
.osum__list{display:grid;gap:.8rem}
.osum__item{display:grid;grid-template-columns:46px 1fr auto;gap:.8rem;align-items:center}
.osum__item img,.osum__ph{width:46px;height:46px;border-radius:12px;background:rgba(246,238,225,.92);object-fit:contain;padding:3px}
.osum__item b{display:block;font:600 .92rem/1.25 var(--sans)}
.osum__item small{display:block;font-size:.78rem;color:#CDBBA4;line-height:1.3}
.osum__p{font:600 1rem/1 var(--serif);white-space:nowrap}
.osum__empty{font-size:.9rem;color:#CDBBA4;font-style:italic}
.osum__tot{margin:1.2rem 0 0;border-top:1px solid rgba(200,162,124,.35);padding-top:1rem;display:grid;gap:.5rem}
.osum__tot div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;font-size:.92rem}
.osum__tot dt{color:#E5D8C6}
.osum__tot dd{margin:0}
.osum__grand{margin-top:.4rem;padding-top:.8rem;border-top:1px solid rgba(200,162,124,.35)}
.osum__grand dt{font:600 1.05rem/1.2 var(--sans);color:var(--cream)}
.osum__grand dt small{display:block;font-weight:400;font-size:.74rem;color:#CDBBA4}
.osum__grand dd{font:600 1.9rem/1 var(--serif);color:var(--kraft)}
.osum .btn{--bg:var(--cream);--fg:var(--choc);--bd:var(--cream);width:100%;margin-top:1.3rem}
.osum .btn:hover{--bg:var(--rose);--bd:var(--rose)}
.osum__note{margin-top:.9rem;font-size:.8rem;line-height:1.45;color:#CDBBA4;text-align:center}

/* Barre mobile */
.obar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem max(1rem,env(safe-area-inset-right)) calc(.7rem + env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));
  background:var(--choc) url(img/grain.png);border-top:1px solid rgba(184,138,62,.55);color:var(--cream);transition:transform .4s var(--ease)}
.obar.is-off{transform:translateY(110%)}
.obar__sum small{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#CDBBA4;line-height:1.2}
.obar__sum b{font:600 1.5rem/1.1 var(--serif);color:var(--kraft)}
.obar .btn{--bg:var(--cream);--fg:var(--choc);--bd:var(--cream)}
@media (min-width:1000px){.obar{display:none}}

/* ==========================================================================
   CONFIRMATION
   ========================================================================== */
.chead{background:radial-gradient(80% 110% at 90% 10%,#4A2C20 0%,transparent 62%),var(--choc-deep) url(img/grain.png);color:var(--cream);
  padding:calc(var(--header-h) + clamp(2rem,5vw,3.4rem)) 0 clamp(2.6rem,6vw,4.4rem);overflow:hidden;overflow:clip}
.chead__inner{display:grid;gap:2rem;align-items:center}
@media (min-width:900px){.chead__inner{grid-template-columns:1.1fr .9fr;gap:3rem}}
.seal{width:64px;height:64px;margin-bottom:1.2rem;color:var(--gold)}
.seal svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.seal__c{stroke-dasharray:183;stroke-dashoffset:183;animation:sealDraw 1s var(--ease) .15s forwards}
.seal__t{stroke:var(--rose);stroke-dasharray:44;stroke-dashoffset:44;animation:sealDraw .6s var(--ease) .85s forwards}
@keyframes sealDraw{to{stroke-dashoffset:0}}
.chead__title{font:italic 500 clamp(2.6rem,7vw,4.8rem)/1.04 var(--serif);margin-top:.2rem}
.chead__text{max-width:34rem;margin-top:1.1rem;color:#EADFCF;font-size:1.08rem;line-height:1.65}
.chead__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.chead__hint{margin-top:1rem;font-size:.88rem;color:#CDBBA4;max-width:32rem}
.chead__hint.is-ok{color:var(--rose)}
.chead__visual{position:relative;margin:0 auto;width:min(78vw,380px);aspect-ratio:1;display:grid;place-items:center;order:-1}
@media (min-width:900px){.chead__visual{order:0;width:min(100%,430px)}}
.chead__ring{position:absolute;inset:4%;border-radius:50%;border:1px solid rgba(184,138,62,.7);background:radial-gradient(circle at 50% 38%,rgba(246,238,225,.16),rgba(246,238,225,.03) 60%,transparent 72%);box-shadow:0 0 0 14px rgba(184,138,62,.07)}
.chead__visual img{position:relative;width:72%;max-height:78%;object-fit:contain;filter:drop-shadow(0 28px 28px rgba(0,0,0,.45));animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (max-width:899px){.chead__visual{width:min(56vw,250px)}.seal{width:52px;height:52px}}

.csec{padding:clamp(2rem,5vw,3.4rem) 0 clamp(3.4rem,8vw,6rem)}
.cgrid{display:grid;gap:2rem;align-items:start}
@media (min-width:960px){.cgrid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2.6rem}}

.ticket{position:relative;background:var(--paper) url(img/grain.png);border:1px solid rgba(184,138,62,.55);border-radius:24px;padding:clamp(1.3rem,3.4vw,2.2rem);box-shadow:var(--shadow)}
.ticket__head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-bottom:1.1rem;border-bottom:1px dashed rgba(184,138,62,.7)}
.ticket__ref{font:500 .7rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink)}
.ticket__refno{display:block;margin-top:.45rem;font:600 clamp(1.3rem,3.4vw,1.7rem)/1 var(--serif);letter-spacing:.12em;word-break:break-all}
.ticket__logo{width:56px;height:56px;border-radius:50%;flex:none}
.ticket__title{font:italic 500 1.7rem/1.1 var(--serif);margin:1.2rem 0 .8rem}
.tlines{display:grid;gap:.9rem}
.tline{display:grid;grid-template-columns:56px 1fr auto;gap:.9rem;align-items:center}
.tline img{width:56px;height:56px;border-radius:14px;background:var(--kraft-soft);object-fit:contain;padding:4px}
.tline b{display:block;font:600 .98rem/1.3 var(--sans)}
.tline small{display:block;font-size:.8rem;line-height:1.35;color:var(--muted)}
.tline__p{font:600 1.15rem/1 var(--serif);white-space:nowrap}
.ttot{margin:1.3rem 0 0;padding-top:1rem;border-top:1px dashed rgba(184,138,62,.7);display:grid;gap:.5rem}
.ttot div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;font-size:.95rem}
.ttot dt{color:var(--muted)}
.ttot dd{margin:0}
.ttot__grand{margin-top:.3rem;padding-top:.7rem;border-top:1px solid rgba(184,138,62,.3)}
.ttot__grand dt{color:var(--choc);font-weight:600}
.ttot__grand dt small{font-weight:400;color:var(--muted);font-size:.78rem}
.ttot__grand dd{font:600 1.9rem/1 var(--serif);color:var(--gold-ink)}
.tinfo{margin:1.4rem 0 0;border-top:1px dashed rgba(184,138,62,.7)}
.tinfo div{display:grid;grid-template-columns:9.5rem 1fr;gap:.8rem;padding:.7rem 0;border-bottom:1px solid rgba(184,138,62,.2)}
.tinfo dt{font:500 .7rem/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);padding-top:.15rem}
.tinfo dd{margin:0;overflow-wrap:anywhere}
@media (max-width:520px){.tinfo div{grid-template-columns:1fr;gap:.1rem}}
.ticket__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}

.next__title{font:600 clamp(1.7rem,4vw,2.2rem)/1.1 var(--serif);text-transform:uppercase;letter-spacing:.12em}
.nsteps{margin-top:1.4rem;display:grid;gap:0;position:relative}
.nsteps li{display:grid;grid-template-columns:40px 1fr;gap:1rem;padding-bottom:1.6rem;position:relative}
.nsteps li:not(:last-child)::before{content:"";position:absolute;left:19px;top:42px;bottom:2px;width:1px;background:linear-gradient(var(--gold),rgba(184,138,62,.15))}
.nsteps i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--choc);color:var(--kraft);font:600 1.2rem/1 var(--serif);font-style:normal}
.nsteps b{display:block;font:600 1.45rem/1.2 var(--serif)}
.nsteps p{margin-top:.25rem;color:var(--muted);font-size:.97rem}
.next__box{display:flex;gap:.9rem;align-items:flex-start;background:var(--kraft-soft) url(img/grain.png);border:1px solid rgba(184,138,62,.5);border-radius:18px;padding:1rem 1.2rem;margin-top:.4rem}
.next__box svg{flex:none;width:20px;height:20px;color:var(--gold-ink);margin-top:.25rem}
.next__box p{font-size:.95rem}
.next__box a{font-weight:500}
.empty{padding:calc(var(--header-h) + 3rem) 0 5rem}

@media (prefers-reduced-motion:reduce){.chead__visual img{animation:none}.seal__c,.seal__t{animation:none;stroke-dashoffset:0}}
.reduced .chead__visual img{animation:none}

/* Chiffres alignés (le Cormorant par défaut a des chiffres « elzéviriens » : le 0 ressemble à un o) */
.osum__p,.osum__grand dd,.fmt__price,.line__price,.tline__p,.ttot__grand dd,.obar__sum b,.qty__n,.ocard__num,.steps i,.nsteps i,.ticket__refno,.osum__tot dd,.line__n{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
#lnkTel{white-space:nowrap}