:root{
  --noir:#121212; --noir2:#1b1b1b; --rouge:#D32F2F; --rouge2:#B71C1C; --vert:#4CAF50;
  --creme:#FFF8F0; --blanc:#FFFFFF; --encre:#1a1a1a; --gris:#6b6b6b; --ligne:#e9e1d6;
  --display:'Bebas Neue','Arial Narrow',Impact,sans-serif; --script:'Caveat',cursive; --texte:'Work Sans',system-ui,sans-serif; --marque:'Alex Brush',cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
/* La couleur de html est celle que le navigateur peint sous la page : la zone
   d'élastique en bas sur téléphone, et la bande sous la barre d'adresse. Sans
   elle c'est le crème du body qui remontait là, et on voyait un rectangle
   blanc sous le pied de page. On prend donc la couleur de fin du pied. */
html{scroll-behavior:smooth;overflow-x:hidden;width:100%;background:#38200E}
body{font-family:var(--texte);color:var(--encre);background:var(--creme);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1120px,92vw);margin:0 auto}
h1,h2,h3,.display{font-family:var(--display);font-weight:400;letter-spacing:.02em;line-height:.95}
.script{font-family:var(--script);font-weight:600;font-size:clamp(1.35rem,2.4vw,1.75rem);color:var(--rouge)}
.section{padding:clamp(3rem,6vw,5rem) 0;position:relative}
.titre{text-align:center;margin-bottom:clamp(2rem,5vw,3.5rem)}
.titre h2{font-size:clamp(2.6rem,6vw,4.2rem);margin-top:.15rem}
.titre p.sous{max-width:34rem;margin:.75rem auto 0;color:var(--gris)}
/* isolation:isolate est la cle de l'effet de survol : elle fait du bouton son
   propre contexte d'empilement, donc le disque en z-index:-1 se dessine
   au-dessus du fond du bouton mais SOUS son texte, sans jamais disparaitre
   derriere le fond de la section. --fx est la couleur de ce disque. */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:.6rem;font-weight:600;font-size:.95rem;padding:.9rem 1.6rem;border-radius:999px;border:2px solid transparent;cursor:pointer;font-family:var(--texte);
  transition:transform .15s ease,background .2s,color .45s ease,border-color .55s ease,border-radius .6s cubic-bezier(.23,1,.32,1),padding .8s ease-out}
.btn:active{transform:scale(.96)}
.btn-rouge{background:var(--rouge);color:#fff;--fx:#121212}
.btn-blanc{background:#fff;color:var(--noir);--fx:#121212}
.btn-ligne{border-color:rgba(255,255,255,.55);color:#fff;--fx:#FFFFFF}
.btn-ligne-noir{border-color:var(--noir);color:var(--noir);--fx:#121212}

/* Effet « flow » : un disque qui se deploie du centre, les coins qui se
   resserrent, une fleche qui entre par la gauche et le texte qui lui fait
   place. Reserve aux appareils a survol reel : sur iOS un simple appui
   laisserait sinon le bouton bloque en etat survole. */
@media (hover:hover){
  .btn::before{content:"";position:absolute;z-index:-1;top:50%;left:50%;width:1rem;height:1rem;margin:-.5rem 0 0 -.5rem;border-radius:50%;
    background:var(--fx,#121212);opacity:0;transform:scale(1);
    transition:transform .8s cubic-bezier(.19,1,.22,1),opacity .5s ease}
  /* la fleche est un masque : elle prend donc automatiquement la couleur du
     texte, quelle que soit la variante de bouton */
  .btn::after{content:"";position:absolute;z-index:1;top:50%;left:-1.7rem;width:1rem;height:1rem;margin-top:-.5rem;
    background-color:currentColor;opacity:0;
    -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2012h15M13%206l6%206-6%206'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2012h15M13%206l6%206-6%206'/%3E%3C/svg%3E") center/contain no-repeat;
    transition:left .8s cubic-bezier(.34,1.56,.64,1),opacity .45s ease}
  .btn:hover,.cta-carte:hover .btn{border-radius:12px;border-color:var(--fx,#121212);padding-left:2.35rem;padding-right:.85rem;
    transition:transform .15s ease,color .45s ease,border-color .3s ease .38s,border-radius .6s cubic-bezier(.23,1,.32,1),padding .8s ease-out}
  .btn:hover::before,.cta-carte:hover .btn::before{opacity:1;transform:scale(26)}
  .btn:hover::after,.cta-carte:hover .btn::after{left:.85rem;opacity:1}
  .btn-blanc:hover,.cta-carte:hover .btn-blanc{color:#fff}
  .btn-ligne:hover,.cta-carte:hover .btn-ligne{color:var(--noir)}
  .btn-ligne-noir:hover{color:#fff}
}
/* Au doigt, pas de survol : on garde un simple retour a l'appui. */
@media (hover:none){
  .btn-rouge:active{background:var(--rouge2)}
  .btn-blanc:active{background:var(--creme)}
  .btn-ligne:active{background:rgba(255,255,255,.12)}
  .btn-ligne-noir:active{background:var(--noir);color:#fff}
}
@media (prefers-reduced-motion:reduce){.btn,.btn::before,.btn::after{transition:none}}
:focus-visible{outline:3px solid var(--vert);outline-offset:3px}

/* ---------- Courbes entre sections ---------- */
.courbe{position:absolute;left:0;right:0;width:100%;height:clamp(34px,6vw,80px);display:block;pointer-events:none}
.courbe.bas{bottom:-1px}
.courbe.haut{top:-1px;transform:scaleY(-1)}

/* ---------- Navigation ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--noir);color:#fff;border-bottom:1px solid rgba(255,255,255,.06)}
.nav{transition:opacity .4s ease,transform .4s ease}
.nav.nav-cachee{opacity:0;transform:translateY(-100%);pointer-events:none}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:1rem}
.marque{display:flex;align-items:center;gap:.5rem}
.marque img{height:34px;width:auto}
.marque span{font-family:var(--marque);font-size:2.1rem;letter-spacing:.01em;white-space:nowrap;line-height:1}
.liens{display:flex;gap:2rem;list-style:none;font-size:.9rem;font-weight:500}
.liens a{position:relative;padding:.25rem 0;color:rgba(255,255,255,.85)}
.liens a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--rouge);transition:right .2s}
.liens a:hover::after{right:0}
.tel{display:inline-flex;align-items:center;gap:.55rem;background:#fff;color:var(--noir);border-radius:999px;padding:.45rem 1rem .45rem .5rem;font-weight:600;font-size:.9rem}
.tel i{width:32px;height:32px;border-radius:50%;background:var(--rouge);display:grid;place-items:center}
.tel i svg{width:16px;height:16px;fill:#fff}
.tel small{display:block;font-size:.65rem;font-weight:500;color:var(--gris);line-height:1;margin-bottom:.15rem}
.burger{display:none;background:none;border:0;color:#fff;width:44px;height:44px;cursor:pointer}
.burger svg{width:26px;height:26px;stroke:#fff;stroke-width:2;fill:none}
.burger svg path{stroke-linecap:round;transform-box:fill-box;transform-origin:center;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .2s ease}
.burger[aria-expanded="true"] .b1{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .b2{opacity:0;transform:scaleX(0)}
.burger[aria-expanded="true"] .b3{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:860px){
  .liens{display:flex;position:absolute;left:0;right:0;top:72px;background:var(--noir);flex-direction:column;gap:0;padding:.5rem 4vw 1rem;border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden;
    opacity:0;visibility:hidden;pointer-events:none;transform:translate(16px,-10px);transition:opacity .4s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s;box-shadow:0 20px 40px rgba(0,0,0,.45)}
  .liens.ouvert{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .4s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .liens li{opacity:0;transform:translateX(36px);transition:opacity .4s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
  .liens.ouvert li{opacity:1;transform:none}
  .liens.ouvert li:nth-child(1){transition-delay:.06s}.liens.ouvert li:nth-child(2){transition-delay:.12s}.liens.ouvert li:nth-child(3){transition-delay:.18s}
  .liens.ouvert li:nth-child(4){transition-delay:.24s}.liens.ouvert li:nth-child(5){transition-delay:.3s}.liens.ouvert li:nth-child(6){transition-delay:.36s}
  .liens a{display:block;padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:1.05rem}
  .liens a::after{display:none}
  .burger{display:block}
  .tel span{display:none}
  .tel{padding:.3rem}
}

/* ---------- Héro ---------- */
.hero{position:relative;background:var(--noir);color:#fff;padding:clamp(2.5rem,6vw,5rem) 0 clamp(6rem,14vw,10rem);text-align:center;overflow:hidden}
.hero .script{color:#fff;opacity:.9}
.scene{position:relative;margin:clamp(0.5rem,2vw,1.5rem) auto 0;width:min(1060px,96vw);aspect-ratio:1/0.56}
.logo-hero{position:absolute;left:50%;top:50%;width:min(52%,620px);transform:translate(-50%,-50%);animation:pose 1.1s cubic-bezier(.2,.8,.2,1) both;will-change:transform}
.logo-hero-porte{position:absolute;inset:0;transform:translate3d(var(--dx,0px),var(--dy,0px),0);will-change:transform}
.ing{position:absolute;opacity:0;animation:paraitre .9s ease forwards;transform:translate3d(var(--dx,0px),var(--dy,0px),0);will-change:transform}
.ing-flot{width:100%;height:100%;animation:flottement var(--dur,6s) ease-in-out infinite;animation-delay:var(--decal,0s)}
.ing-tour{width:100%;height:100%;transform:rotate(var(--rot,0deg))}
.ing svg{width:100%;height:100%;display:block;filter:drop-shadow(0 12px 14px rgba(0,0,0,.5))}
@keyframes paraitre{from{opacity:0}to{opacity:1}}
@keyframes flottement{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(var(--bal,4deg))}}
.f1{width:11%;aspect-ratio:1;left:2%;top:12%;--rot:-30deg;--dur:6.4s;--bal:5deg;animation-delay:.15s}
.f2{width:9%;aspect-ratio:1;right:3%;top:8%;--rot:40deg;--dur:7.1s;--bal:-6deg;animation-delay:.25s}
.f3{width:7.5%;aspect-ratio:1;left:9%;bottom:6%;--rot:160deg;--dur:5.8s;--bal:6deg;animation-delay:.35s}
.olive{width:4.4%;aspect-ratio:1;--dur:6.8s;--bal:0deg}
.olive .ing-tour{border-radius:50%;background:radial-gradient(circle at 35% 30%,#4a4a4a,#111 60%);box-shadow:0 10px 14px rgba(0,0,0,.5)}
.o1{left:14%;top:54%;animation-delay:.3s;--dur:7.4s}
.o2{right:6%;bottom:20%;width:3.6%;animation-delay:.42s;--dur:6.1s}
.tomate{width:5.5%;aspect-ratio:1;right:14%;top:50%;animation-delay:.38s;--dur:6.6s;--bal:0deg}
.tomate .ing-tour{position:relative;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ff6b57,#c8281d 55%,#8f150e);box-shadow:0 10px 14px rgba(0,0,0,.5)}
.tomate .ing-tour::after{content:"";position:absolute;inset:28%;border-radius:50%;background:radial-gradient(circle,#ffd9a8 0,#f0a26c 45%,transparent 46%,transparent 55%,#ffefc9 56%,#f4b07a 100%);opacity:.75}
@keyframes pose{from{opacity:0;transform:translate(-50%,-40%) scale(.85)}}
.hero-texte{max-width:44rem;margin:0 auto}
.hero-texte p{font-size:clamp(1rem,1.6vw,1.15rem);color:rgba(255,255,255,.8)}
.hero-cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}
.badges{display:flex;justify-content:center;gap:1rem 2.5rem;flex-wrap:wrap;margin-top:2rem;font-size:.85rem;color:rgba(255,255,255,.65)}
.badges span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--vert);margin-right:.5rem;vertical-align:middle}
@media (max-width:900px){.scene{aspect-ratio:1/0.7}.logo-hero{width:62%}}
@media (prefers-reduced-motion:reduce){.ing-flot,.logo-hero{animation:none}.ing{opacity:1}}
@media (max-width:640px){.scene{aspect-ratio:1/0.85}.logo-hero{width:80%}.o2{right:3%;bottom:34%}.f3{left:6%;bottom:14%}.marque span{font-size:1.7rem}.marque img{height:26px;width:auto}}

/* ---------- Où nous trouver ---------- */
.tournee{background:var(--creme)}
.tournee{padding-bottom:clamp(2rem,4vw,3rem)}
.tournee .grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.jour{background:#fff;border:1px solid var(--ligne);border-radius:18px;padding:1.4rem 1.5rem;display:flex;gap:1.1rem;align-items:flex-start}
.jour .d{font-family:var(--display);font-size:2.6rem;line-height:1;color:var(--rouge);min-width:2.6rem;text-align:center}
.jour .d small{display:block;font-family:var(--texte);font-size:.7rem;color:var(--gris);letter-spacing:.06em;text-transform:uppercase;margin-top:.2rem}
.jour h3{font-family:var(--texte);font-weight:600;font-size:1.05rem;line-height:1.3}
.jour p{color:var(--gris);font-size:.92rem;margin-top:.25rem}
/* horaire du soir, sur sa propre ligne sous le lieu */
.jour p .h{display:block;margin-top:.35rem;font-weight:600;color:var(--encre);letter-spacing:.02em}
.jour.aujourdhui p .h{color:#fff}
.jour.repos{background:transparent;border-style:dashed;color:var(--gris)}
.jour.repos .d{color:#cbbfb0}
.jour.aujourdhui{background:var(--rouge);border-color:var(--rouge);box-shadow:0 14px 30px rgba(211,47,47,.32);position:relative;transform:translateY(-2px)}
.jour.aujourdhui .d{color:#fff}
.jour.aujourdhui .d small{color:rgba(255,255,255,.75)}
.jour.aujourdhui h3{color:#fff}
.jour.aujourdhui p{color:rgba(255,255,255,.85)}
.jour.aujourdhui::after{content:"Aujourd'hui";position:absolute;top:-.65rem;right:1.1rem;background:var(--noir);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .65rem;border-radius:999px}
.note{text-align:center;color:var(--gris);font-size:.9rem;margin-top:1.75rem}
.note a{color:var(--rouge);font-weight:600;border-bottom:1px solid currentColor}

/* ---------- Carte ---------- */
/* page Fidélité : une seule section, le dégradé saumon complet (identique à
   la page Réservation). Les deux courbes de fidelite.html sont repeintes en
   #FBE3D4 en haut et #EFC3A9 en bas pour raccorder. */
.carte{background:linear-gradient(180deg,#FBE3D4 0%,#F5D2BE 52%,#EFC3A9 100%)}
.vitrine{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:3rem}
.plat{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/3;background:var(--noir)}
.plat img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.plat:hover img{transform:scale(1.04)}
.plat figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.5rem 1.4rem 1.2rem;background:linear-gradient(to top,rgba(0,0,0,.78),transparent);color:#fff;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}
.plat figcaption b{font-family:var(--display);font-size:1.9rem;font-weight:400;letter-spacing:.03em;line-height:1}
.plat figcaption span{font-size:.85rem;opacity:.85}
.plat .prix{white-space:nowrap;font-family:var(--display);font-size:1.7rem;background:var(--rouge);border-radius:999px;padding:.25rem .8rem;line-height:1.2}
.colonnes{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem 4rem}
.colonnes h3{font-size:2rem;color:var(--rouge);margin-bottom:.8rem;display:flex;align-items:center;gap:.8rem}
.colonnes h3::after{content:"";flex:1;height:2px;background:var(--ligne)}
.ligne{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:.6rem;padding:.7rem 0;border-bottom:1px dashed var(--ligne)}
.ligne:last-child{border-bottom:0}
.ligne .nom{font-weight:600;font-size:1.02rem}
.ligne .pts{border-bottom:2px dotted #d8ccbd;transform:translateY(-4px)}
.ligne .p{font-family:var(--display);font-size:1.45rem;color:var(--rouge)}
.ligne .desc{grid-column:1/-1;color:var(--gris);font-size:.88rem;margin-top:-.25rem}
.carte-cta{text-align:center;margin-top:3rem}
@media (max-width:760px){.vitrine,.colonnes{grid-template-columns:1fr}.colonnes{gap:2rem}}

/* ---------- Savoir-faire ---------- */
.savoir{background:var(--creme)}
.atouts{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center;position:relative}
.atout svg{width:76px;height:76px;margin:0 auto 1rem;stroke:var(--noir);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.atout h3{font-family:var(--texte);font-weight:600;font-size:1.05rem}
.atout p{color:var(--gris);font-size:.9rem;margin-top:.35rem;max-width:16rem;margin-inline:auto}
.atout{position:relative}
.atout+.atout::before{content:"";position:absolute;left:-1rem;top:38px;width:2rem;border-top:2px dotted #cbbfb0;transform:translateX(-50%)}
@media (max-width:860px){.atouts{grid-template-columns:1fr 1fr;gap:2.5rem 1.5rem}.atout+.atout::before{display:none}}

/* ---------- Événements ---------- */
/* Degrade sur toute la largeur : clair a gauche, plus soutenu a droite. Un
   degrade qui traverse la section entiere n'a pas de bord, donc pas de trait.
   L'ancien halo circulaire, meme adouci, gardait une frontiere visible entre
   #d32f2f a gauche et #c12323 a droite. */
.evenements{background:linear-gradient(90deg,#DB3B36 0%,#D32F2F 34%,#C62B28 68%,#B22320 100%);color:#fff;overflow:hidden}
/* halo rouge foncé en haut à droite : en dégradé, sinon le bord net du cercle
   dessine une ligne en travers de la section (rouge foncé / rouge clair d'un coup) */
.evenements .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.evenements .script{color:#fff}
.evenements h2{font-size:clamp(3rem,7vw,5.2rem);margin:.1rem 0 1rem}
.evenements h2 b{display:block;font-weight:400;font-size:clamp(4rem,10vw,7.6rem);color:var(--noir)}
.evenements p{font-size:1.05rem;color:rgba(255,255,255,.92);max-width:32rem}
.evenements .note{text-align:left;margin-top:.9rem;color:rgba(255,255,255,.78)}
.types{list-style:none;display:grid;gap:.75rem;margin:1.5rem 0 2rem}
.types li{display:flex;gap:.8rem;align-items:flex-start;font-size:.98rem}
.types li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:#fff;margin-top:.15rem;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/70% no-repeat #fff;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/70% no-repeat}
.types li b{display:block;font-weight:600}
.types li span{opacity:.85;font-size:.9rem}
.pizza-ev{width:min(100%,460px);margin:0 auto;transform:rotate(8deg);filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
@media (max-width:860px){.evenements .wrap{grid-template-columns:1fr}.pizza-ev,.scene3d{width:min(72%,340px);order:-1}}

/* ---------- Réservation ---------- */
/* La page etait entierement blanche : on passe sur le creme chaud de la marque,
   en degrade, et le formulaire devient une carte posee dessus. La courbe du pied
   de page de reservation.html est peinte en #F7DFCE pour raccorder la fin. */
.reservation{background:linear-gradient(180deg,#FBE3D4 0%,#F5D2BE 52%,#EFC3A9 100%)}
/* Même fond saumon sur la page Événements. Les deux sections se suivent : on
   coupe donc le dégradé en deux moitiés qui se rejoignent exactement sur
   #F5D2BE, sinon la couleur repartirait de zéro au changement de section et on
   verrait un trait au milieu. */
/* dégradé saumon complet, pour une section isolée */
.fond-saumon{background:linear-gradient(180deg,#FBE3D4 0%,#F5D2BE 52%,#EFC3A9 100%)}
.fond-saumon-a{background:linear-gradient(180deg,#FBE3D4 0%,#F5D2BE 100%)}
.fond-saumon-b{background:linear-gradient(180deg,#F5D2BE 0%,#EFC3A9 100%)}
.form-grille{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.4rem;max-width:820px;margin:0 auto;
  background:rgba(255,252,248,.8);border:1px solid rgba(140,26,23,.12);border-radius:26px;
  padding:clamp(1.3rem,3vw,2.2rem);box-shadow:0 22px 50px rgba(120,70,40,.10)}
@media (max-width:560px){.form-grille{border-radius:20px;padding:1.1rem}}
.champ{display:flex;flex-direction:column;gap:.35rem}
.champ.large{grid-column:1/-1}
label{font-weight:600;font-size:.9rem}
input,select,textarea{font:inherit;font-size:1rem;padding:.85rem 1rem;border:2px solid var(--ligne);border-radius:16px;background:#fff;color:var(--encre);width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--rouge);outline:none;box-shadow:0 0 0 4px rgba(211,47,47,.12)}
/* les exemples doivent se lire comme des exemples : gris clair et en italique,
   pour qu'on ne les prenne pas pour du texte deja saisi */
::placeholder{color:#a79c90;opacity:1;font-style:italic}
textarea{min-height:120px;resize:vertical}
.choix{display:flex;flex-wrap:wrap;gap:.5rem}
.choix label{display:inline-flex;align-items:center;gap:.5rem;border:2px solid var(--ligne);border-radius:999px;padding:.55rem 1rem;cursor:pointer;font-weight:500;transition:.15s}
.choix input{width:auto;accent-color:var(--rouge);margin:0}
.choix label:has(input:checked){border-color:var(--rouge);background:#fff3f3;color:var(--rouge2)}
/* survol et focus clavier des pastilles : meme langage que le calendrier */
.choix label:hover{border-color:rgba(211,47,47,.5);background:#FFF6F4;color:var(--rouge2);box-shadow:0 3px 12px rgba(140,26,23,.14)}
.choix label:has(input:checked):hover{border-color:var(--rouge2);background:#FFE8E6}
.choix label:has(input:focus-visible){border-color:var(--rouge);box-shadow:0 0 0 4px rgba(211,47,47,.14)}
/* les champs de saisie reagissent aussi, plus discretement */
input:hover:not(:focus),textarea:hover:not(:focus){border-color:#e0d3c4}
.form-actions{grid-column:1/-1;display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:.5rem}
.form-actions p{color:var(--gris);font-size:.88rem}
.erreur{color:var(--rouge2);font-size:.88rem;font-weight:600;display:none}

/* ---------- Calendrier de selection de date ---------- */
/* L'animation d'apparition pose un transform sur CHAQUE .champ, ce qui fait de
   chacun un contexte d'empilement : les champs suivants se dessinaient donc
   par-dessus le calendrier, quel que soit son z-index interne. On remonte le
   champ de la date au-dessus de ses voisins (40 reste sous la barre de
   navigation, qui est a 50). */
.champ-date{position:relative;z-index:40}
.datep{position:relative}
.datep-champ{display:flex;align-items:center;justify-content:space-between;gap:.8rem;width:100%;
  font:inherit;font-size:1rem;text-align:left;padding:.85rem 1rem;border:2px solid var(--ligne);border-radius:16px;
  background:#fff;color:var(--encre);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.datep-champ:hover{border-color:rgba(211,47,47,.45);box-shadow:0 3px 12px rgba(140,26,23,.12)}
.datep-champ[aria-expanded="true"],.datep-champ:focus-visible{border-color:var(--rouge);outline:none;box-shadow:0 0 0 4px rgba(211,47,47,.12)}
.datep-champ svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--rouge);stroke-width:1.8;stroke-linecap:round}
.datep-vide{color:var(--gris)}
/* le calendrier flotte au-dessus du formulaire ; z-index 30 le place sous la
   barre de navigation (50) mais au-dessus des champs suivants */
.datep-pop{position:absolute;z-index:30;top:calc(100% + .5rem);left:0;min-width:min(348px,88vw);
  background:#fff;border:1px solid rgba(140,26,23,.10);border-radius:22px;padding:.9rem;box-shadow:0 26px 54px rgba(60,40,25,.20)}
.datep-tete{display:flex;align-items:center;gap:.4rem;margin-bottom:.7rem}
/* listes deroulantes maison : le bouton, puis la liste en surcouche */
.datep-menu{position:relative;flex:1;min-width:0}
/* le mois est le plus long des deux : sans ca « septembre » etait tronque */
#menu-mois{flex:1.5}
.datep-menu-btn{display:flex;align-items:center;justify-content:space-between;gap:.4rem;width:100%;
  font:inherit;font-size:.92rem;font-weight:600;padding:.45rem .65rem;border:1px solid var(--ligne);
  border-radius:999px;background:var(--creme);color:var(--encre);cursor:pointer;transition:.15s}
.datep-menu-btn:hover{border-color:rgba(211,47,47,.5);background:#fff;color:var(--rouge2);
  box-shadow:0 3px 12px rgba(140,26,23,.16)}
.datep-menu-btn:hover svg{stroke:var(--rouge2)}
.datep-menu-btn[aria-expanded="true"]{border-color:var(--rouge);background:#fff;box-shadow:0 0 0 3px rgba(211,47,47,.12)}
.datep-menu-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.datep-menu-btn svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--encre);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.datep-menu-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.datep-menu-liste{position:absolute;z-index:5;top:calc(100% + .35rem);left:0;right:0;min-width:9rem;max-height:13.5rem;overflow-y:auto;
  list-style:none;margin:0;padding:.3rem;background:#fff;border:1px solid rgba(140,26,23,.12);border-radius:16px;
  box-shadow:0 18px 36px rgba(60,40,25,.20);-webkit-overflow-scrolling:touch}
.datep-menu-liste li{padding:.45rem .7rem;border-radius:11px;font-size:.92rem;cursor:pointer;outline:none}
.datep-menu-liste li{transition:background .12s ease,color .12s ease}
.datep-menu-liste li:hover,.datep-menu-liste li:focus-visible{background:rgba(211,47,47,.12);color:var(--rouge2);font-weight:600}
.datep-menu-liste li.choisi:hover{background:var(--rouge2);color:#fff}
.datep-menu-liste li.choisi{background:var(--rouge);color:#fff;font-weight:600}
.datep-fleche{flex:none;width:34px;height:34px;border:1px solid var(--ligne);border-radius:50%;background:#fff;
  color:var(--encre);font-size:1.2rem;line-height:1;cursor:pointer;transition:.15s}
.datep-fleche:hover:not(:disabled){background:rgba(211,47,47,.12);border-color:rgba(211,47,47,.45);
  color:var(--rouge2);box-shadow:0 3px 10px rgba(140,26,23,.16)}
.datep-fleche:disabled{opacity:.35;cursor:default}
.datep-jours,.datep-grille{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.datep-jours span{text-align:center;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gris);padding-bottom:.3rem}
.datep-grille button{aspect-ratio:1;width:100%;padding:0;border:0;border-radius:50%;background:transparent;
  font:inherit;font-size:.92rem;font-weight:500;color:var(--encre);cursor:pointer;
  transition:background .14s ease,color .14s ease,transform .14s ease,box-shadow .14s ease}
/* le survol doit se voir : un creme sur du blanc ne se distinguait pas. On passe
   sur un rouge translucide, avec un leger grossissement et une ombre portee. */
.datep-grille button:hover:not(:disabled){background:rgba(211,47,47,.14);color:var(--rouge2);font-weight:700;
  transform:scale(1.08);box-shadow:0 3px 10px rgba(140,26,23,.18)}
.datep-grille button.actif:hover{background:var(--rouge2);color:#fff;box-shadow:0 4px 12px rgba(140,26,23,.36)}
.datep-grille button.hors{color:#c9bfb2}
.datep-grille button.passe{color:#d8d0c6;cursor:default}
.datep-grille button.aujourdhui{box-shadow:inset 0 0 0 2px var(--ligne)}
.datep-grille button.actif{background:var(--rouge);color:#fff;font-weight:700;box-shadow:none}
.datep-grille button:focus-visible{outline:2px solid var(--rouge);outline-offset:1px}
.datep-note{margin-top:.6rem;font-size:.74rem;color:var(--gris);text-align:center}
@media (max-width:560px){.datep-pop{left:auto;right:0}}
.recap{grid-column:1/-1;display:none;background:var(--creme);border:1px solid var(--ligne);border-radius:16px;padding:1.2rem 1.4rem}
.recap h3{font-family:var(--texte);font-weight:600;font-size:1rem;margin-bottom:.5rem}
.recap pre{white-space:pre-wrap;font:inherit;font-size:.92rem;color:#333}
.recap .actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1rem}
@media (max-width:640px){.form-grille{grid-template-columns:1fr}.champ.large{grid-column:auto}.form-actions{grid-column:auto}.recap{grid-column:auto}}

/* ---------- Pied ---------- */
/* pied de page dans la meme famille chaude : lueur derriere le logo, et le tout en
   bas se rechauffe vers l'orange. On reste sombre : le logo du pied est blanc. */
.pied{position:relative;color:#fff;text-align:center;padding:clamp(5rem,12vw,8rem) 0 2.5rem;
  background:
    radial-gradient(ellipse 78% 62% at 50% 14%,rgba(255,146,54,.20) 0%,transparent 64%),
    linear-gradient(180deg,#121011 0%,#1D1410 52%,#38200E 100%)}
/* le logo est cliquable et ramène à l'accueil : le lien doit être un bloc,
   sinon les marges automatiques de l'image ne la centrent plus */
.pied-logo{display:block;transition:opacity .2s ease}
.pied-logo:hover,.pied-logo:focus-visible{opacity:.82}
.pied img{width:min(220px,55vw);margin:0 auto 1.5rem}
.pied .script{color:#fff;opacity:.85}
.pied .gros{font-size:clamp(3rem,9vw,5.5rem);display:block;color:#fff;margin:.2rem 0 1.4rem;letter-spacing:.06em}
.pied .gros:hover{color:var(--rouge)}
.sociaux{display:flex;justify-content:center;gap:.8rem;margin-bottom:2.5rem}
.sociaux a{width:46px;height:46px;border:2px solid rgba(255,255,255,.35);border-radius:50%;display:grid;place-items:center;transition:.2s}
.sociaux a:hover{background:var(--rouge);border-color:var(--rouge)}
.sociaux svg{width:20px;height:20px;fill:#fff}
.pied nav{display:flex;justify-content:center;gap:1.5rem 2rem;flex-wrap:wrap;font-size:.85rem;color:rgba(255,255,255,.7);margin-bottom:2rem}
.pied nav a:hover{color:#fff}
.pied .legal{font-size:.78rem;color:rgba(255,255,255,.55)}

/* ---------- En-tête de page intérieure ---------- */
/* Meme jeu de couleurs que l'accueil : on part du noir exact de la barre de
   navigation pour que la jonction en haut reste invisible, on rechauffe vers un
   brun en descendant, et on pose une lueur orange derriere le titre plus une
   pointe de rouge en haut a droite. La courbe du bas est peinte de la couleur
   de la section suivante, la teinte de fin n'a donc rien a raccorder. */
.bandeau{position:relative;color:#fff;text-align:center;padding:clamp(3rem,7vw,5rem) 0 clamp(5rem,10vw,7rem);overflow:hidden;
  background:
    radial-gradient(ellipse 72% 68% at 50% 20%,rgba(255,146,54,.20) 0%,rgba(206,78,22,.09) 45%,transparent 70%),
    radial-gradient(ellipse 46% 58% at 88% 4%,rgba(211,47,47,.16) 0%,transparent 72%),
    linear-gradient(180deg,#121212 0%,#1C1310 44%,#2A1A10 74%,#35200E 100%)}
.bandeau .wrap{position:relative;z-index:2}
.bandeau .script{color:#fff;opacity:.9}
.bandeau h1{font-size:clamp(3.2rem,8vw,5.6rem);margin-top:.15rem}
.bandeau p.sous{max-width:36rem;margin:.9rem auto 0;color:rgba(255,255,255,.75)}
.liens a.actif{color:#fff}
.liens a.actif::after{right:0}
/* ---------- Appels à l'action en bas de page ---------- */
.cta-double{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.cta-carte{position:relative;border-radius:22px;overflow:hidden;min-height:260px;display:flex;align-items:flex-end;padding:1.8rem;color:#fff;background:var(--noir)}
.cta-carte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform .6s}
.cta-carte:hover img{transform:scale(1.04)}
.cta-carte.rouge{background:var(--rouge)}
.cta-carte.rouge img{opacity:.35}
.cta-carte > div{position:relative}
.cta-carte h3{font-size:2.4rem;margin-bottom:.4rem}
.cta-carte p{opacity:.9;margin-bottom:1rem;max-width:22rem}
.apercu-carte{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem}
.apercu-carte .item{background:#fff;border:1px solid var(--ligne);border-radius:16px;padding:1.2rem 1.3rem;display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.apercu-carte .item b{font-weight:600}
.apercu-carte .item span{font-family:var(--display);font-size:1.5rem;color:var(--rouge)}
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--ligne);padding:.4rem 0}
.faq summary{cursor:pointer;font-weight:600;padding:.9rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::after{content:"+";font-family:var(--display);font-size:1.6rem;color:var(--rouge);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--gris);padding-bottom:1rem}
/* auto-fit : la grille encaisse 3 ou 4 cartes sans laisser une ligne orpheline */
.coords{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.2rem;margin-bottom:3.5rem}
.coord{background:#fff;border:1px solid var(--ligne);border-radius:18px;padding:1.6rem;text-align:center}
.coord svg{width:34px;height:34px;stroke:var(--rouge);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;margin:0 auto .8rem}
.coord b{display:block;font-weight:600;margin-bottom:.3rem}
/* une adresse e-mail est un seul « mot » : sans ça elle déborde de la carte */
.coord a{color:var(--rouge);font-weight:600;display:inline-block;max-width:100%;overflow-wrap:anywhere}
.coord p{color:var(--gris);font-size:.92rem}
@media (max-width:760px){.cta-double,.apercu-carte,.coords{grid-template-columns:1fr}}



/* ---------- Bandeau défilant ---------- */
.ruban{background:#2A1A10;color:#fff;padding:.7rem 0;overflow:hidden;position:relative;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
.ruban-piste{display:flex;width:max-content;animation:defile 34s linear infinite}
.ruban-piste span{font-family:var(--display);font-size:clamp(.85rem,1.25vw,1.05rem);letter-spacing:.08em;padding:0 1.3rem;display:flex;align-items:center;gap:1.3rem;white-space:nowrap;color:rgba(255,255,255,.88)}
.ruban-piste span::after{content:"";width:6px;height:6px;border-radius:50%;background:#E8B93F;flex:none}
.ruban:hover .ruban-piste{animation-play-state:paused}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ruban-piste{animation:none}}
/* ---------- Pizza qui flotte en 3D ---------- */
.scene3d{perspective:1200px;width:min(100%,460px);margin:0 auto}
.pizza3d{position:relative;transform-style:preserve-3d;animation:vol3d 7s ease-in-out infinite}
.pizza3d img{width:100%;filter:drop-shadow(0 34px 30px rgba(0,0,0,.5))}
.pizza3d::after{content:"";position:absolute;left:50%;bottom:-9%;width:74%;height:7%;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(0,0,0,.42),transparent 70%);animation:ombre3d 7s ease-in-out infinite}
@keyframes vol3d{0%,100%{transform:rotateX(52deg) rotateZ(0deg) translateY(0)}50%{transform:rotateX(46deg) rotateZ(180deg) translateY(-26px)}}
@keyframes ombre3d{0%,100%{opacity:.5;transform:translateX(-50%) scale(1)}50%{opacity:.28;transform:translateX(-50%) scale(.84)}}
@media (prefers-reduced-motion:reduce){.pizza3d{animation:none;transform:rotateX(50deg)}.pizza3d::after{animation:none}}

/* ---------- Carte façon affiche ---------- */
/* Palette inversée : encre brune sur papier beige saumon (avant : crème sur bordeaux).
   Tout passe par --papier / --papier2 / --encre / --encre-fort : changer la teinte
   du papier ou de l'encre se fait sur ces quatre valeurs et nulle part ailleurs. */
.affiche{--papier:#F5DACA;--papier2:#EEC9B4;--encre:#4A322A;--encre-fort:#8C1A17;
  background:linear-gradient(180deg,#F9E5D9 0%,var(--papier) 44%,var(--papier2) 100%);
  color:var(--encre);position:relative;overflow:hidden;padding:clamp(2.5rem,5vw,4rem) 0 clamp(3rem,6vw,5rem)}
.affiche::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0,rgba(255,255,255,.5),transparent 62%);pointer-events:none}
.affiche .wrap{position:relative;z-index:2;width:min(1000px,88vw)}
.affiche-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;padding-bottom:1.6rem;border-bottom:2px solid rgba(74,50,42,.28);margin-bottom:clamp(2rem,4vw,3rem)}
.affiche-tete h1{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:clamp(3.6rem,9vw,7rem);line-height:.9;letter-spacing:-.01em;color:var(--encre-fort)}
.affiche-tete .st{font-family:var(--texte);font-size:clamp(.72rem,1.4vw,.9rem);letter-spacing:.42em;text-transform:uppercase;color:rgba(74,50,42,.78);margin-top:.6rem}
.affiche-tete .coord{background:none;border:0;padding:0;text-align:right;font-size:.9rem;line-height:1.9;color:rgba(74,50,42,.85)}
.affiche-tete .coord img{display:block;width:46px;margin:0 0 .7rem auto}
.affiche-tete .coord a{color:var(--encre-fort);font-weight:600}
.affiche-cols{display:grid;grid-template-columns:1fr 1px 1fr;gap:clamp(1.5rem,4vw,3.5rem);position:relative}
.affiche-cols .sep{background:rgba(74,50,42,.2)}
.bloc+.bloc{margin-top:clamp(2rem,4vw,3rem)}
.bloc h2{font-family:var(--texte);font-weight:600;font-size:clamp(1.1rem,2vw,1.35rem);letter-spacing:.16em;text-transform:uppercase;color:var(--encre-fort)}
.bloc h2+.filet{width:78px;height:2px;background:var(--encre-fort);opacity:.5;margin:.7rem 0 1.4rem}
.item-menu{margin-bottom:1.35rem}
.item-menu .l{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:.55rem}
.item-menu .nom{font-weight:600;font-size:1.02rem;letter-spacing:.06em;text-transform:uppercase}
.item-menu .pts{border-bottom:2px dotted rgba(74,50,42,.4);transform:translateY(-4px)}
.item-menu .px{font-weight:600;font-size:1.02rem;white-space:nowrap;color:var(--encre-fort)}
.item-menu p{color:rgba(74,50,42,.8);font-size:.9rem;margin-top:.2rem;max-width:30rem}
.item-menu.vedette .nom::after{content:"★";color:#C08A1E;margin-left:.5rem;font-size:.85rem}
/* une seule colonne : la devise qui occupait la droite a été retirée */
.affiche-bas{display:grid;grid-template-columns:1fr;gap:0;border:1px solid rgba(74,50,42,.3);border-radius:4px;margin-top:clamp(2.5rem,5vw,4rem);position:relative;z-index:2;background:rgba(255,255,255,.34)}
.affiche-bas>div{padding:clamp(1.4rem,3vw,2rem)}
.affiche-bas h3{font-family:var(--texte);font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:1rem;text-align:center;margin-bottom:1.2rem;position:relative;color:var(--encre-fort)}
.affiche-bas h3::before,.affiche-bas h3::after{content:"";position:absolute;top:50%;width:22%;height:1px;background:rgba(74,50,42,.35)}
.affiche-bas h3::before{left:0}.affiche-bas h3::after{right:0}
.supp-grille{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 2rem}
/* la boîte des suppléments occupe toute la largeur : trois colonnes, sinon les
   pointillés s'étirent sur la moitié de l'écran */
.affiche-bas .supp-grille{grid-template-columns:repeat(3,1fr)}
.supp-grille .l{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:.4rem;font-size:.92rem}
.supp-grille .pts{border-bottom:2px dotted rgba(74,50,42,.35);transform:translateY(-4px)}
/* bande « pour vos événements » : sortie de la colonne de droite et passée en pleine
   largeur, pour rééquilibrer les deux colonnes après la suppression d'un bloc */
.affiche-event{display:grid;grid-template-columns:1fr auto;gap:clamp(1.2rem,3vw,2.5rem);align-items:center;margin-top:clamp(1.6rem,3vw,2.2rem);border:1px solid rgba(74,50,42,.3);border-radius:4px;background:rgba(255,255,255,.34);padding:clamp(1.4rem,3vw,2rem);position:relative;z-index:2}
.affiche-event h3{font-family:var(--texte);font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:1rem;color:var(--encre-fort);margin-bottom:1rem}
.affiche-event .item-menu:last-of-type{margin-bottom:0}
.affiche-pied{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-top:2rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(74,50,42,.8);position:relative;z-index:2}
.affiche-pied span{display:flex;gap:.6rem;align-items:center}
.affiche-pied svg{width:15px;height:15px;fill:none;stroke:var(--encre-fort);stroke-width:1.6;flex:none}
.affiche-cta{text-align:center;margin-top:clamp(2rem,4vw,3rem);position:relative;z-index:2;display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.affiche .btn-blanc{background:var(--encre-fort);color:#FFF3EA;--fx:#3A241C}
.affiche .btn-ligne{border-color:rgba(74,50,42,.45);color:var(--encre);--fx:var(--encre-fort)}
@media (hover:hover){.affiche .btn-ligne:hover{color:#FFF3EA}}
@media (max-width:900px){
 .affiche-cols{grid-template-columns:1fr}.affiche-cols .sep{display:none}
 .affiche-tete{flex-direction:column;align-items:flex-start;gap:1.2rem}.affiche-tete .coord{text-align:left}.affiche-tete .coord img{margin-left:0}
 .affiche-event{grid-template-columns:1fr}
 .supp-grille{grid-template-columns:1fr}
 .affiche-bas .supp-grille{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){.affiche-bas .supp-grille{grid-template-columns:1fr}}

/* ---------- Vitrine : pizza en relief ---------- */
/* Jeu de couleurs chaud : la lueur orange vient de la droite, derriere la photo, et
   le cote texte reste sombre pour que le rouge de « vaut le detour » ne devienne pas
   terne. Les 28 derniers pourcents s'unifient en #5A2C10 pour se raccorder a la
   courbe de la section suivante. */
.vitrine-photo{position:relative;color:#fff;overflow:hidden;padding:clamp(3rem,6vw,5rem) 0 clamp(4rem,7vw,6rem);
  background:
    linear-gradient(180deg,#2A1A10 0%,rgba(42,26,16,0) 210px),
    linear-gradient(180deg,rgba(90,44,16,0) 72%,#5A2C10 100%),
    radial-gradient(ellipse 70% 80% at 24% 48%,rgba(255,150,58,.42) 0%,rgba(206,78,22,.20) 44%,transparent 74%),
    radial-gradient(ellipse 55% 55% at 92% 16%,rgba(255,124,42,.10) 0%,transparent 70%),
    linear-gradient(100deg,#452812 0%,#35200F 48%,#2A1B11 100%)}
.vitrine-photo .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.vitrine-txt{max-width:34rem;color:#fff}
.vitrine-txt .script{color:#fff;opacity:.92}
.vitrine-txt h2{font-size:clamp(2.8rem,6vw,4.6rem);margin:.3rem 0 .1rem;line-height:.94}
/* rouge legerement eclairci ici seulement : le --rouge de la charte (#D32F2F) tombe
   sous le seuil de contraste sur le fond orange de cette section */
.vitrine-txt h2 em{font-style:normal;color:#F0503F;display:block}
.vitrine-txt p{font-size:clamp(1rem,1.5vw,1.12rem);color:rgba(255,255,255,.88);margin-top:1.1rem}
.vitrine-txt .hero-cta{justify-content:flex-start;margin-top:1.8rem}
.vitrine-chiffres{display:flex;gap:2.4rem;flex-wrap:wrap;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.28)}
.vitrine-chiffres div b{font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.6rem);color:#fff;display:block;line-height:1}
.vitrine-chiffres div span{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.78)}
/* la pizza en relief : image fixe, sans animation, toujours visible en entier */
/* la pizza sur pelle : vraie photo, présentée en carte arrondie comme la photo
   du camion. Pas de largeur surdimensionnée ni de marge négative ici : c'est ce
   qui faisait sortir l'image du cadre sur mobile puis sur ordinateur. */
.relief{position:relative;width:min(100%,640px);margin:0 auto;border-radius:20px;overflow:hidden;box-shadow:0 28px 56px rgba(0,0,0,.55),0 0 0 6px rgba(255,255,255,.05)}
.relief img{width:100%;display:block}


@keyframes monte{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes ombreRelief{0%,100%{opacity:.75;transform:translateX(-50%) scale(1)}50%{opacity:.42;transform:translateX(-50%) scale(.86)}}
@media (max-width:860px){
 .vitrine-photo .wrap{grid-template-columns:1fr}
 .vitrine-txt{max-width:none;text-align:center}
 .vitrine-txt .hero-cta{justify-content:center}
 .vitrine-chiffres{justify-content:center;gap:1.6rem}
 .relief{order:-1;width:100%;max-width:100%;margin:0 auto 1.6rem;border-radius:16px}
}

/* le bas de la bande s'eteint sur #2A1A10, exactement la couleur de la courbe qui
   suit : sans ca la courbe posait un aplat noir en travers de la page */
@media (max-width:760px){
   }

/* ---------- Animations au scroll (GSAP, voir reveal.js) ---------- */
/* Rien n'est caché en CSS : c'est reveal.js qui pose les états de départ.
   Si le script ne charge pas, le site s'affiche normalement. */
.mot{display:inline-block;will-change:transform,opacity}
.cta-carte img{will-change:clip-path}

/* ---------- Héro (accueil) : texte + pizza ---------- */
.hero{overflow:hidden;text-align:left;padding:clamp(2rem,5vw,4rem) 0 clamp(5rem,12vw,8rem);
  background:
    radial-gradient(ellipse 60% 75% at 80% 55%,rgba(255,140,50,.32),transparent 65%),
    radial-gradient(ellipse 45% 45% at 10% 15%,rgba(255,255,255,.09),transparent 60%),
    #2a2119}
/* fondu du bas du héro vers le noir de la vitrine : plus de coupure nette.
   Le dégradé est posé sur le héro (et pas sur la vitrine) pour couvrir aussi
   la lueur orange qui remonte à droite, sinon la démarcation réapparaît. */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(160px,26vh,300px);background:linear-gradient(180deg,rgba(42,26,16,0) 0%,rgba(42,26,16,.45) 48%,rgba(42,26,16,.85) 80%,#2A1A10 100%);pointer-events:none;z-index:1}
.hero>.wrap{position:relative;z-index:2}
.hero-grille{display:grid;grid-template-columns:1fr .95fr;align-items:center;gap:clamp(1.5rem,4vw,4rem);min-height:min(74vh,700px)}
.hero-txt{max-width:36rem}
.hero .script{font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.25}
.hero-titre{font-family:var(--marque);font-weight:400;line-height:1.15;margin:.2rem 0 1.2rem;color:#fff;text-shadow:0 6px 24px rgba(0,0,0,.5)}
.hero-titre-chez{display:block;font-size:clamp(1.7rem,3.4vw,2.4rem);opacity:.92;margin-bottom:.35rem}
.hero-titre-tosca{display:inline-flex;align-items:center;gap:.5rem;font-size:clamp(4.8rem,11vw,8.5rem);line-height:1;border-bottom:2px solid rgba(255,255,255,.85);padding-bottom:.06em}
.hero-titre-citron{height:.3em;width:auto;display:inline-block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.hero-p{font-size:clamp(1rem,1.5vw,1.12rem);color:rgba(255,255,255,.8);max-width:31rem}
.hero .hero-cta{justify-content:flex-start;margin-top:1.8rem}
.hero-img{position:relative}
.hero-img-porte{transform:translate3d(var(--dx,0px),var(--dy,0px),0);will-change:transform}
.hero-img img{width:min(120%,780px);max-width:none;margin-left:-8%;filter:drop-shadow(0 40px 46px rgba(0,0,0,.6));animation:monte 7s ease-in-out infinite}
@media (max-width:860px){
 .hero{text-align:center;padding-bottom:clamp(3rem,10vw,5rem)}
 .hero-grille{grid-template-columns:1fr;min-height:0;gap:1rem}
 .hero-txt{max-width:none}
 .hero-titre{transform:none}
 .hero-p{margin:0 auto}
 .hero .hero-cta{justify-content:center}
 .hero-img img{width:min(96%,520px);margin:0 auto}
}
@media (prefers-reduced-motion:reduce){.hero-img img{animation:none}}

/* ---------- Photo du camion (page événements) ---------- */
.camion-photo{position:relative;width:min(100%,440px);margin:0 auto;border-radius:22px;overflow:hidden;transform:rotate(-2deg);box-shadow:0 30px 50px rgba(0,0,0,.45),0 0 0 6px rgba(255,255,255,.06)}
.camion-photo img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.camion-photo figcaption{position:absolute;left:1rem;bottom:1rem;font-family:var(--script);font-weight:600;font-size:1.25rem;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6)}
@media (max-width:860px){.camion-photo{width:min(84%,360px);order:-1;transform:none}}

/* ---------- Vitrine "La pizza vaut le détour" : photo à gauche, texte à droite ---------- */
@media (min-width:861px){
 .vitrine-photo .wrap{grid-template-columns:1.15fr 1fr}
 .vitrine-photo .relief{order:-1}
}

/* ---------- Formulaire de réservation : confirmation + champ piège ---------- */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.recap-info{color:#444;font-size:.95rem;margin:-.2rem 0 .8rem}
.recap .actions[hidden]{display:none}
.recap #btn-copier{background:var(--noir);color:#fff;border-color:var(--noir)}
.recap #btn-copier:hover{background:#333;border-color:#333;color:#fff}

/* ---------- Pages légales (mentions légales, confidentialité) ---------- */
.legal-page{max-width:50rem;margin:0 auto}
.legal-page h2{font-family:var(--texte);font-weight:600;font-size:clamp(1.12rem,2vw,1.35rem);margin:clamp(2.2rem,4vw,3rem) 0 .7rem}
.legal-page h2:first-child{margin-top:0}
.legal-page p{margin-bottom:.9rem}
.legal-page ul{margin:0 0 1.1rem 1.2rem;padding:0}
.legal-page li{margin-bottom:.45rem}
.legal-page a{color:var(--rouge);font-weight:500;text-decoration:underline;text-underline-offset:2px}
.legal-page dl{margin:0 0 1.1rem}
.legal-page dt{font-weight:600;margin-top:.85rem}
.legal-page dd{margin:0;color:var(--gris)}
/* encadré « à compléter » : volontairement visible, pour qu'aucune information
   d'identité manquante ne passe en ligne sans qu'on s'en aperçoive */
.legal-page .acompleter{background:#fff;border:1px solid var(--ligne);border-left:3px solid var(--rouge);border-radius:12px;padding:1rem 1.2rem;margin:1.2rem 0}
.legal-page .acompleter p{margin:0;font-size:.95rem}
.legal-page .acompleter b{color:var(--rouge)}
.legal-page .maj{font-size:.85rem;color:var(--gris);margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.2rem;border-top:1px solid var(--ligne)}
.pied .legal-liens{display:flex;justify-content:center;gap:1.4rem;flex-wrap:wrap;font-size:.78rem;margin:.7rem 0 0;color:rgba(255,255,255,.6)}
.pied .legal-liens a{color:rgba(255,255,255,.6);text-decoration:underline;text-underline-offset:2px}
.pied .legal-liens a:hover{color:#fff}

/* ---------- Carrousel des pizzas (carte) ---------- */
/* Geometrie reprise du composant « halo reel » : chaque carte est placee sur une
   ellipse a l'angle i*pas + rotation. Ici x = rx*sin(t) et l'echelle vient de
   cos(t), pour que la carte la plus grande soit au centre et non sur le cote.
   Une seule valeur (rotation) pilote position, taille et empilement : une carte
   qui parait devant EST devant, l'ordre ne peut pas contredire la perspective. */
.carrousel{margin-top:clamp(2.5rem,5vw,4rem);position:relative;z-index:2;outline:none}
.carrousel>h3{font-family:var(--texte);font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:1rem;text-align:center;color:var(--encre-fort);margin-bottom:1.4rem}
/* le fondu haut/bas remplace la coupe nette : sans lui, overflow:hidden tranche
   les ombres portees des cartes reculees et dessine un trait horizontal */
/* user-select:none : sans ça, glisser le carrousel sélectionne les noms et les
   prix des cartes, qui se surlignent en bleu. La fiche sous le carrousel reste
   sélectionnable, elle. */
.carr-scene{position:relative;height:clamp(280px,30vw,360px);touch-action:pan-y;cursor:grab;overflow:hidden;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  /* Les ombres des cartes (34 px de flou) etaient coupees net par overflow:hidden,
     ce qui dessinait un trait sur les quatre bords de la scene. On fond donc les
     bords : un degrade vertical ET un degrade horizontal, croises par
     mask-composite, pour que l'ombre se perde dans le fond. */
  --fondu:38px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20px,#000 calc(100% - 30px),transparent 100%),
                     linear-gradient(90deg,transparent 0,#000 var(--fondu),#000 calc(100% - var(--fondu)),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 20px,#000 calc(100% - 30px),transparent 100%),
                     linear-gradient(90deg,transparent 0,#000 var(--fondu),#000 calc(100% - var(--fondu)),transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect}
@media (max-width:620px){.carr-scene{height:clamp(210px,54vw,250px)}}
.carr-scene:active{cursor:grabbing}
/* le navigateur propose sinon de faire glisser la photo hors de la page */
.carr-scene img{-webkit-user-drag:none;user-select:none;pointer-events:none}
.carrousel:focus-visible .carr-scene{box-shadow:0 0 0 3px rgba(140,26,23,.45);border-radius:16px}
.carr-carte{position:absolute;left:50%;top:50%;border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 18px 34px rgba(74,50,42,.28),0 0 0 1px rgba(74,50,42,.14);will-change:transform;transform-origin:center}
.carr-carte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
/* face typographique : utilisee tant qu'il n'y a pas encore de photo */
.carr-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;padding:.55rem;text-align:center;background:linear-gradient(165deg,#FBEADF 0%,#F0CFBB 100%)}
/* la taille suit la largeur de carte (--cw, posee en JS) : a taille fixe les noms
   debordaient des cartes une fois reduites sur telephone */
.carr-txt b{font-family:var(--display);font-size:calc(var(--cw,150px)*.145);line-height:1.05;letter-spacing:.01em;color:var(--encre-fort);max-width:100%;overflow-wrap:break-word;hyphens:auto}
.carr-txt span{font-size:calc(var(--cw,150px)*.072);letter-spacing:.14em;text-transform:uppercase;color:rgba(74,50,42,.72)}
/* bandeau du nom, pose sur les cartes photo */
.carr-nom-bas{position:absolute;left:0;right:0;bottom:0;padding:.45rem .5rem;font-family:var(--display);font-size:calc(var(--cw,150px)*.105);overflow-wrap:break-word;letter-spacing:.03em;color:#fff;text-align:center;background:linear-gradient(180deg,rgba(20,12,8,0),rgba(20,12,8,.82))}
/* fiche de la pizza au centre */
.carr-fiche{max-width:34rem;margin:1.4rem auto 0;text-align:center;min-height:6.2rem}
.carr-fiche .f-nom{font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.3rem);line-height:1;color:var(--encre-fort);letter-spacing:.02em}
.carr-fiche .f-prix{display:inline-block;margin-top:.5rem;font-weight:600;font-size:.95rem;color:var(--encre-fort);border:1px solid rgba(140,26,23,.4);border-radius:999px;padding:.15rem .7rem}
.carr-fiche .f-ing{margin-top:.6rem;color:rgba(74,50,42,.8);font-size:.95rem}
.carr-fiche .f-note{margin-top:.35rem;font-size:.8rem;color:rgba(74,50,42,.6);font-style:italic}
.carr-cmd{display:flex;justify-content:center;gap:.7rem;margin-top:1rem}
.carr-cmd button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(74,50,42,.35);background:rgba(255,255,255,.5);color:var(--encre-fort);font-size:1.3rem;line-height:1;cursor:pointer;transition:.18s;display:grid;place-items:center}
.carr-cmd button:hover{background:var(--encre-fort);color:#FFF3EA;border-color:var(--encre-fort)}
.carr-cmd button:focus-visible{outline:3px solid rgba(140,26,23,.45);outline-offset:2px}
.carr-points{display:flex;justify-content:center;gap:.4rem;margin-top:.9rem}
.carr-points i{width:7px;height:7px;border-radius:50%;background:rgba(74,50,42,.28);transition:.2s}
.carr-points i.on{background:var(--encre-fort);transform:scale(1.35)}
@media (prefers-reduced-motion:reduce){.carr-carte{transition:none!important}}

/* ---------- Hero : la photo en carte nette (coins arrondis, leger angle) ---------- */
.hero-img img.photo-cadre{
  border-radius:26px;
  filter:none;
  box-shadow:0 34px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05);
  animation:monte-cadre 7s ease-in-out infinite;
}
@keyframes monte-cadre{
  0%,100%{transform:translateY(0) rotate(-2.5deg)}
  50%{transform:translateY(-14px) rotate(-2.5deg)}
}
@media (max-width:860px){
  .hero-img img.photo-cadre{border-radius:20px;box-shadow:0 20px 38px rgba(0,0,0,.55)}
}
@media (prefers-reduced-motion:reduce){
  .hero-img img.photo-cadre{animation:none;transform:rotate(-2.5deg)}
}

/* ---------- « Ou nous trouver » : le bloc semaine + QR (comme le dossier) ---------- */
.semaine{background:#fff;border:1px solid var(--ligne);border-radius:22px;
  padding:clamp(1.5rem,3.4vw,2.5rem);max-width:56rem;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:clamp(1.4rem,4vw,3rem);flex-wrap:wrap;
  box-shadow:0 18px 38px rgba(90,44,16,.10)}
.semaine-txt{flex:1 1 19rem;min-width:0}
.semaine-label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-bottom:.5rem}
.semaine-jours{font-family:var(--display);font-size:clamp(1.9rem,4.2vw,2.7rem);line-height:1;color:var(--encre)}
.semaine-h{font-family:var(--display);font-size:clamp(2.3rem,5.4vw,3.3rem);line-height:1;color:var(--rouge);margin-top:.15rem}
.semaine-p{color:var(--gris);font-size:.94rem;margin-top:.9rem;max-width:32rem}
.semaine-qr{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.55rem}
.semaine-qr img{width:clamp(116px,20vw,150px);height:auto;padding:.4rem;background:#fff;
  border:1px solid var(--ligne);border-radius:12px;transition:border-color .2s,transform .2s}
.semaine-qr span{font-weight:600;font-size:.86rem;color:var(--encre)}
.semaine-qr:hover img,.semaine-qr:focus-visible img{border-color:var(--rouge);transform:translateY(-2px)}
@media (max-width:640px){
  .semaine{flex-direction:column;align-items:flex-start;text-align:left;gap:1.5rem}
  .semaine-liens{align-self:center}
}

/* ---------- Carte : la mention de bas de carte (comme le dossier) ---------- */
.nota{margin-top:1.4rem;text-align:center;font-size:.84rem;color:rgba(74,50,42,.75);
  max-width:40rem;margin-left:auto;margin-right:auto}

/* ---------- Le QR « nos liens » + les logos sous le code ---------- */
.semaine-liens{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.semaine-apps{display:flex;align-items:center;gap:.55rem}
.semaine-apps .app{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  transition:transform .15s ease,box-shadow .2s ease}
.semaine-apps .app svg{width:17px;height:17px;fill:#fff}
.semaine-apps .app img{width:19px;height:19px;object-fit:contain}
.semaine-apps .app-site{background:var(--creme);border:1px solid var(--ligne)}
.semaine-apps .app-insta{background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4)}
.semaine-apps .app-fb{background:#1877F2}
.semaine-apps .app:hover,.semaine-apps .app:focus-visible{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.18)}

/* ---------- Carte : une seule ligne de supplement = elle prend toute la largeur ---------- */
.affiche-bas .supp-grille.supp-solo{grid-template-columns:1fr}