/* Strateg-IA — Visibilité · page Restauration
   S'ajoute à site.css : démos Table Orsane et Snack Delmio, tuiles propres à la page, roue de fidélité. */

.demo-solo{scroll-snap-align:none; justify-items:center}
.demo-solo .tel{width:min(280px,74vw); margin:0}
.demo-solo > .demo-note{font-size:.88rem; color:var(--ardoise); text-align:center; margin-top:14px}
.js .tuile:not(.en-vue) *::before{animation-play-state:paused !important}
@media (prefers-reduced-motion:reduce){ .tuile *::before{animation:none !important} }

/* ── Tuiles propres à la restauration ────────────────── */
.tuiles-3{grid-template-columns:1fr}
@media (min-width:860px){ .tuiles-3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.tuile-carte{--t-fond:var(--peche)}
.tuile-table{--t-fond:var(--cyan-pale)}
.tuile-appel{--t-fond:var(--blanc)}
.tuile-pastille{--t-fond:var(--blanc)}
.tuile-avis{--t-fond:var(--blanc)}
.tuile-appel .tv{--t-scene:var(--vert-pale)}
.tuile-pastille .tv{--t-scene:var(--cyan-pale)}
.tuile-avis .tv{--t-scene:var(--jaune-pale)}

.mini-carte{width:min(80%,210px); padding:14px 16px; border-radius:12px; background:var(--blanc); box-shadow:0 10px 24px -14px rgba(22,35,58,.4); display:grid; gap:9px}
.mini-carte b{font:700 1.02rem/1 var(--display); letter-spacing:-.02em}
.mini-carte i{display:flex; align-items:center; gap:8px; animation:poser 6s var(--ease-out) infinite backwards}
.mini-carte i::before{content:""; height:8px; width:var(--l,58%); border-radius:4px; background:var(--encre); opacity:.82}
.mini-carte i::after{content:""; flex:1; border-bottom:2px dotted #C9D2DB}
.mini-carte i span{font:700 .8rem/1 var(--texte); color:#C2552D; order:3}
.mini-carte i:nth-of-type(2){--l:44%; animation-delay:.2s}
.mini-carte i:nth-of-type(3){--l:66%; animation-delay:.4s}
.mini-carte i:nth-of-type(4){--l:38%; animation-delay:.6s}

.mini-appel{position:relative; display:grid; place-items:center; width:74px; height:74px; border-radius:50%; background:var(--vert); color:var(--blanc); box-shadow:0 12px 24px -10px rgba(30,158,87,.7)}
.mini-appel svg{width:32px; height:32px}
.mini-appel::before,.mini-appel::after{content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 2px var(--vert); animation:onde 2.4s ease-out infinite}
.mini-appel::after{animation-delay:1.2s}
@keyframes onde{from{transform:scale(1); opacity:.7} to{transform:scale(1.9); opacity:0}}

.mini-pastille{position:relative; width:118px; height:118px; padding:12px; border-radius:22px; background:linear-gradient(145deg,#2FBCE2,#0B6E8F); transform:rotate(-6deg);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45), inset 0 -6px 12px rgba(0,0,0,.14), 0 14px 22px -12px rgba(22,35,58,.55)}
.mini-pastille svg{width:100%; height:100%; border-radius:10px; background:var(--blanc); padding:7px}
.mini-pastille span{position:absolute; left:16%; right:16%; top:20%; height:3px; border-radius:3px; background:var(--jaune); box-shadow:0 0 10px 3px rgba(251,188,5,.7);
  animation:balayer-p 2.6s var(--ease-in-out) infinite alternate}
@keyframes balayer-p{from{transform:translateY(0)} to{transform:translateY(68px)}}

/* disposition « téléphone + tuiles horizontales » */
.duo{display:grid; gap:44px; margin-top:clamp(36px,5vw,64px); justify-items:center}
.duo .tuiles{margin-top:0; width:100%}
@media (min-width:980px){
  .duo{grid-template-columns:auto minmax(0,1fr); gap:72px; align-items:center; justify-items:stretch}
  .duo .tuiles{grid-template-columns:1fr; gap:16px}
  .duo .tuile{display:grid; grid-template-columns:190px minmax(0,1fr); align-items:center; padding:12px}
  .duo .tuile .tv{height:150px}
  .duo .tuile h3{margin-top:0}
  .duo .tuile > div:last-child{padding:6px 10px 6px 14px}
}

/* ── Roue de fidélité ────────────────────────────────── */
.jeu{display:grid; gap:48px; margin-top:clamp(36px,5vw,64px); align-items:center}
.jeu-roue{display:grid; justify-items:center; gap:22px; padding:clamp(24px,4vw,40px) 16px; border-radius:28px; background:
  radial-gradient(22rem 16rem at 50% 0, #FFE9A3 0, transparent 70%), var(--jaune-pale)}
.roue-cadre{position:relative; width:min(290px,76vw); aspect-ratio:1}
.roue-fleche{position:absolute; left:50%; top:-10px; z-index:3; width:30px; height:36px; margin-left:-15px; background:var(--encre);
  clip-path:polygon(50% 100%, 0 0, 100% 0); filter:drop-shadow(0 3px 3px rgba(0,0,0,.25))}
.roue{position:absolute; inset:0; border-radius:50%; border:8px solid var(--encre); overflow:hidden;
  background:conic-gradient(#FBBC05 0 60deg, #0B6E8F 0 120deg, #FFE4D6 0 180deg, #1E9E57 0 240deg, #FFF 0 300deg, #01A9D6 0 360deg);
  box-shadow:0 22px 40px -18px rgba(22,35,58,.55); transition:transform 4.2s cubic-bezier(.12,.8,.14,1)}
.roue-part{position:absolute; inset:0; transform:rotate(calc(var(--n) * 60deg + 30deg))}
.roue-part span{position:absolute; left:50%; top:9%; width:86px; margin-left:-43px; text-align:center; font:700 .82rem/1.15 var(--texte); color:var(--c,var(--encre))}
.roue-moyeu{position:absolute; left:50%; top:50%; z-index:2; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; background:var(--encre); box-shadow:inset 0 0 0 6px var(--blanc), 0 2px 6px rgba(0,0,0,.3)}
.jeu-resultat{min-height:3.2em; text-align:center; font-size:1.05rem; color:#5A4A12}
.jeu-resultat b{display:block; font:700 1.35rem/1.2 var(--display); letter-spacing:-.02em; color:var(--encre)}
.jeu-roue .btn[disabled]{opacity:.6; cursor:default}

.jeu-etapes{list-style:none; margin:0; padding:0; counter-reset:j; display:grid; gap:14px}
.jeu-etapes li{counter-increment:j; display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start; font-size:1.1rem}
.jeu-etapes li::before{content:counter(j); display:grid; place-items:center; width:38px; height:38px; border-radius:12px; font:800 1.1rem/1 var(--display); background:var(--j,var(--jaune)); color:var(--jc,var(--encre))}
.jeu-etapes li:nth-child(2){--j:var(--cyan-profond); --jc:var(--blanc)}
.jeu-etapes li:nth-child(3){--j:var(--vert); --jc:var(--blanc)}
.jeu-etapes li:nth-child(4){--j:var(--encre); --jc:var(--blanc)}
.jeu-etapes b{display:block; font:700 1.2rem/1.25 var(--display); letter-spacing:-.015em}
.jeu-etapes span{color:var(--ardoise); font-size:1rem}
.jeu-regle{margin-top:26px; padding:18px 20px; border-radius:16px; background:var(--vert-pale); color:#134F30; font-size:1rem}
.jeu-regle b{color:#0D3D24}
@media (min-width:900px){ .jeu{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:72px} }
@media (prefers-reduced-motion:reduce){ .roue{transition:none} }

/* ── Table Orsane : restaurant, aubergine et safran ──── */
.d-orsane{background:#241620; color:#F6EBDD}
.t-hero{position:relative; overflow:hidden; padding:13cqw 1.3em 1.7em; text-align:center; background:
  radial-gradient(16em 12em at 50% 34%, #5A2E3C 0, transparent 70%), #2E1B27}
.t-barre{display:flex; justify-content:space-between; align-items:center; text-align:left}
.t-barre b{font:600 1.3em/1 "Cinzel",Georgia,serif; letter-spacing:.06em; color:#F2A93B}
.t-barre span{font-size:.85em; opacity:.7}
.t-assiette{width:9.5em; height:9.5em; margin:1.2em auto .6em; filter:drop-shadow(0 .8em 1.2em rgba(0,0,0,.45)); animation:tourner 60s linear infinite}
@keyframes tourner{to{transform:rotate(360deg)}}
.t-h1{font:italic 400 1.6em/1.15 Georgia,serif}
.t-h1 span{display:block; color:#F2A93B}
.t-btn{display:block; margin-top:1.1em; padding:1em; border-radius:.7em; background:#F2A93B; color:#241620; font-weight:700; text-align:center}
.t-btn-2{margin-top:.55em; background:transparent; color:#F6EBDD; box-shadow:inset 0 0 0 1px rgba(246,235,221,.5)}
.t-titre{margin:1.9em 1.3em .7em !important; font:600 1.25em/1 "Cinzel",Georgia,serif; letter-spacing:.08em; color:#F2A93B}
.t-onglets{display:flex; gap:1.3em; margin:0 1.3em; border-bottom:1px solid #47303D; font-size:.95em; color:#B9A6A0}
.t-onglets b,.t-onglets span{padding-bottom:.6em}
.t-onglets b{color:#F6EBDD; box-shadow:0 2px 0 #F2A93B}
.t-plats{margin:0 1.3em !important}
.t-plats li{display:flex; justify-content:space-between; gap:1em; padding:.85em 0; border-bottom:1px solid #47303D}
.t-plats b{display:block; font-weight:600}
.t-plats span{font-size:.88em; color:#B9A6A0}
.t-plats i{font-weight:700; color:#F2A93B; white-space:nowrap}
.t-choix{display:flex; gap:.45em; margin:0 1.3em .5em}
.t-choix span{flex:1; padding:.7em 0; border-radius:.6em; text-align:center; font-size:.9em; background:#35212D}
.t-choix .choisi{background:#F2A93B; color:#241620; font-weight:700}
.t-bas{margin:.4em 1.3em 0}
.t-horaires{margin:0 1.3em !important}
.t-horaires li{padding:.6em 0; border-bottom:1px solid #47303D}
.t-horaires b{display:block; font-weight:600}
.t-horaires span{font-size:.9em; color:#B9A6A0}
.t-pied{margin-top:1.8em; padding:1.3em 1.3em 2.2em; font-size:.85em; color:#B9A6A0}

/* ── Snack Delmio : restauration rapide, jaune et rouge ── */
.d-delmio{background:#FFF7DB; color:#1D1A16}
.s-hero{padding:13cqw 1.3em 1.6em; background:#FFD23F}
.s-barre{display:flex; justify-content:space-between; align-items:center}
.s-barre b{font:800 1.3em/1 var(--display); letter-spacing:-.03em}
.s-ouvert{display:inline-flex; align-items:center; gap:.4em; padding:.45em .8em; border-radius:99px; background:#1D1A16; color:#fff; font:700 .72em/1 var(--texte)}
.s-ouvert i{width:.6em; height:.6em; border-radius:50%; background:#3DDC84; animation:battre 2.4s ease-in-out infinite}
.s-haut{display:grid; grid-template-columns:1fr auto; align-items:center; gap:.4em; margin-top:1.2em}
.s-h1{font:800 2.1em/1 var(--display); letter-spacing:-.04em}
.s-h1 span{display:block; color:#E63B2E}
.s-burger{width:7em; height:auto; filter:drop-shadow(0 .6em .7em rgba(120,70,0,.35))}
.s-burger .chapeau-pain{animation:pain 4.5s var(--ease-out) infinite backwards}
@keyframes pain{0%{transform:translateY(-22px); opacity:0} 14%,100%{transform:none; opacity:1}}
.s-appel{display:flex; align-items:center; justify-content:center; gap:.6em; margin-top:1.2em; padding:1.15em; border-radius:.9em; background:#E63B2E; color:#fff; font:800 1.15em/1 var(--display);
  box-shadow:0 .9em 1.6em -.8em rgba(230,59,46,.8)}
.s-appel svg{width:1.15em; height:1.15em}
.s-wa{display:block; margin-top:.55em; padding:.95em; border-radius:.8em; background:#1D1A16; color:#fff; font-weight:700; text-align:center}
.s-titre{margin:1.8em 1.3em .6em !important; font:800 1.55em/1 var(--display); letter-spacing:-.03em}
.s-plats{margin:0 1.3em !important}
.s-plats li{display:flex; justify-content:space-between; gap:1em; padding:.8em 0; border-bottom:2px dotted #E2D3A0}
.s-plats b{font-weight:700}
.s-plats i{font-weight:800; color:#E63B2E; white-space:nowrap}
.s-jeu{display:flex; align-items:center; gap:1em; margin:1.6em 1.3em 0; padding:1.1em; border-radius:1.1em; background:#1D1A16; color:#fff}
.s-roue{flex:none; width:4.4em; height:4.4em; border-radius:50%; border:.3em solid #fff;
  background:conic-gradient(#FFD23F 0 60deg, #E63B2E 0 120deg, #fff 0 180deg, #FFD23F 0 240deg, #E63B2E 0 300deg, #fff 0 360deg); animation:tourner 9s linear infinite}
.s-jeu b{display:block; font:800 1.15em/1.1 var(--display); color:#FFD23F}
.s-jeu span{font-size:.9em; color:#D8D2C2}
.s-pied{margin-top:1.8em; padding:1.3em 1.3em 2.2em; font-size:.85em; color:#7A6F55}