/* Big M — jeux concours (inc/concours.php) : section de la page Jeu concours, et bande sur la
   fiche des restaurants participants. Couleurs du jeu en --jc1 (haut, foncé) et --jc2 (bas),
   réglées dans l'admin ; texte blanc dessus. */

.jc, .jc-bande { --jc1: #2a1650; --jc2: #c8400a; --jc-mi: color-mix(in srgb, var(--jc1) 50%, var(--jc2)); }

/* ---------- Bandeau ---------- */
.jc-hero-cadre { padding-top: 12px; }
.jc-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 32px; padding: clamp(28px, 5vw, 64px); color: #fff; background: linear-gradient(160deg, var(--jc1) 0%, var(--jc-mi) 58%, var(--jc2) 100%); }
.jc-hero__soleil { position: absolute; z-index: -1; right: -12%; bottom: -55%; width: min(80vw, 760px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 194, 26, .5) 0%, rgba(250, 92, 25, .3) 36%, transparent 66%); pointer-events: none; }
.jc-hero__grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.jc-pastille { display: inline-flex; align-items: center; max-width: 100%; gap: 8px; margin: 0; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .02em; color: #fff; }
.jc-pastille__point { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; }
.jc--a_venir .jc-pastille__point { background: var(--yellow); }
.jc--termine .jc-pastille__point { background: rgba(255, 255, 255, .55); }
.jc-hero__titre { margin-top: 18px; font-size: clamp(40px, 6vw, 72px); line-height: 1.02; color: #fff; text-wrap: balance; }
.jc-hero__accroche { margin-top: 14px; max-width: 40ch; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; color: rgba(255, 255, 255, .94); }
.jc-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.jc-hero__condition { margin-top: 16px; max-width: 54ch; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.jc-hero__fini { margin-top: 22px; padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, .14); font-weight: 600; }
.jc-hero__fini[hidden], [data-jc-jouer][hidden] { display: none; }

/* Boutons sur fond foncé : « Je joue » en jaune, contour blanc. */
.jc .jc-btn, .jc-bande .jc-btn { background: var(--yellow); color: var(--ink); }
.jc .jc-btn:hover, .jc-bande .jc-btn:hover { background: #ffd34f; color: var(--ink); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55); }
.jc .jc-btn-contour, .jc-bande .jc-btn-contour, .elementor .jc .jc-btn-contour { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }
.jc .jc-btn-contour:hover, .jc-bande .jc-btn-contour:hover { background: #fff; color: var(--ink); }
.jc :is(.jc-btn, .jc-btn-contour):focus-visible, .jc-bande :is(.jc-btn, .jc-btn-contour):focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Compte à rebours */
.jc-compte { margin-top: 26px; }
.jc-compte__label { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .86); }
.jc-compte__cases { display: flex; gap: 10px; margin-top: 10px; }
.jc-compte__case { display: grid; justify-items: center; min-width: 78px; padding: 12px 8px 10px; border-radius: 18px; background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.jc-compte__case b { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; font-variant-numeric: tabular-nums; }
.jc-compte__case small { margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, .82); }
.jc-compte.is-fini .jc-compte__cases { display: none; }
.jc-compte--compact { margin-top: 14px; }
.jc-compte--compact .jc-compte__cases { margin-top: 8px; gap: 8px; }
.jc-compte--compact .jc-compte__case { min-width: 64px; padding: 8px 6px 7px; border-radius: 14px; }
.jc-compte--compact .jc-compte__case b { font-size: 26px; }
.jc-compte--compact .jc-compte__case small { margin-top: 3px; font-size: 12px; }

/* Téléphone avec la vidéo story */
.jc-hero__tel { justify-self: center; }
.jc-tel { position: relative; width: min(330px, 76vw); aspect-ratio: 9 / 16; padding: 9px; border-radius: 38px; background: #120a1f; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14), 0 40px 80px -30px rgba(0, 0, 0, .65); transform: rotate(3deg); transition: transform .6s var(--ease); }
.jc-tel__media { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 30px; background: #000; }
.elementor .jc-tel .jc-tel__media { height: 100%; border-radius: 30px; }
.jc-tel__boutons { position: absolute; right: 20px; bottom: 20px; display: flex; gap: 8px; }
.jc-bande__visuel .jc-tel__boutons { right: 8px; bottom: 8px; }
.jc-tel__bouton { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(18, 10, 31, .6); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.jc-tel__bouton:hover, .jc-tel__bouton:focus { background: rgba(18, 10, 31, .85); color: #fff; } /* Hello Elementor colore les boutons au survol */
.jc-tel__bouton:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.jc-tel__bouton svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jc-tel__bouton .jc-i-lecture { fill: currentColor; stroke: none; display: none; }
.jc-tel__bouton[aria-pressed="true"] .jc-i-pause { display: none; }
.jc-tel__bouton[aria-pressed="true"] .jc-i-lecture { display: inline; }
.jc-tel__bouton[data-jc-son] .jc-i-son { display: none; }
.jc-tel__bouton[data-jc-son][aria-pressed="true"] .jc-i-son { display: inline; }
.jc-tel__bouton[data-jc-son][aria-pressed="true"] .jc-i-muet { display: none; }

/* ---------- Sections ---------- */
.jc-section { padding-block: clamp(48px, 7vw, 80px) 0; }
.jc-section--etroite .jc-faq { max-width: 880px; }

.jc-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.jc-etape { position: relative; overflow: hidden; padding: 26px 22px 24px; border-radius: 24px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -30px rgba(43, 20, 6, .4); }
.jc-etape__icone { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; color: #fff; background: linear-gradient(150deg, var(--jc1), var(--jc2)); }
.jc-etape__num { position: absolute; top: 4px; right: 18px; font-family: var(--font-display); font-weight: 600; font-size: 88px; line-height: 1; color: var(--tile); }
.jc-etape__titre { position: relative; margin-top: 18px; font-size: 22px; }
.jc-etape p { position: relative; margin-top: 6px; color: var(--muted); line-height: 1.5; }

.jc-lots-fond { margin-top: clamp(48px, 7vw, 80px); padding-bottom: clamp(48px, 7vw, 80px); background: var(--tile); }
.jc-lots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.jc-lot { display: flex; flex-direction: column; gap: 6px; padding: 26px 24px; border-radius: 24px; background: var(--card); }
.jc-lot__qte { font-family: var(--font-display); font-weight: 600; font-size: clamp(52px, 5vw, 68px); line-height: 1; font-variant-numeric: tabular-nums; color: var(--jc1); background: linear-gradient(150deg, var(--jc1), var(--jc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.jc-lot__nom { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--ink); }
.jc-lot__precision { color: var(--muted); font-size: 15px; }
.jc-lot__badge { align-self: flex-start; margin-bottom: 6px; padding: 4px 12px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 13px; }
.jc-lot--principal { color: #fff; background: linear-gradient(150deg, var(--jc1), var(--jc-mi) 60%, var(--jc2)); }
.jc-lot--principal .jc-lot__qte { color: var(--yellow); background: none; -webkit-text-fill-color: currentColor; }
.jc-lot--principal :is(.jc-lot__nom, .jc-lot__precision) { color: #fff; }

.jc-recherche input { width: min(320px, 100%); min-height: 48px; padding: 0 16px; border: 2px solid rgba(43, 20, 6, .14); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; }
.jc-recherche input:focus { border-color: var(--ink); outline: none; }
.jc-recherche input:focus-visible { outline: 3px solid var(--btn); outline-offset: 2px; }
.jc-restos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.jc-restos li[hidden] { display: none; }
.jc-restos a { display: flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 10px 16px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.2; }
.elementor .jc-restos a { box-shadow: inset 0 0 0 1px var(--line); }
.jc-restos a:hover, .elementor .jc-restos a:hover { box-shadow: inset 0 0 0 2px var(--btn); color: var(--ink); }
.jc-restos small { margin-top: 2px; font-family: var(--font-text); font-weight: 400; font-size: 13px; color: var(--muted); }
.jc-restos__vide { margin-top: 16px; color: var(--muted); }

.jc-faq__item { border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.jc-faq__item + .jc-faq__item { margin-top: 10px; }
.jc-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 20px; list-style: none; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--ink); }
.jc-faq summary::-webkit-details-marker { display: none; }
.jc-faq summary::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease); }
.jc-faq__item[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.jc-faq summary:focus-visible { outline: 3px solid var(--btn); outline-offset: 2px; border-radius: 18px; }
.jc-faq__reponse { padding: 0 20px 18px; color: var(--muted); line-height: 1.55; }
.jc-faq__reponse p { margin: 0; }
.jc-faq__reponse p + p { margin-top: 8px; }

.jc-legal { padding-block: clamp(40px, 6vw, 64px) clamp(48px, 7vw, 88px); }
.jc-legal__texte { margin-top: 18px; max-width: 90ch; font-size: 13px; line-height: 1.55; color: var(--muted); }
.jc-legal__texte p { margin: 0; }
.jc-legal__texte p + p { margin-top: 8px; }

.jc-vide h1 { font-size: clamp(36px, 5vw, 56px); }
.jc-vide .prose { margin-top: 16px; max-width: 60ch; color: var(--muted); }

/* ---------- Bande des fiches restaurants (largeur du contenu de StoreLocatore) ---------- */
.jc-bande { max-width: 1200px; margin: 0 auto; padding: 40px 24px 0; }
.jc-bande[hidden] { display: none; }
.jc-bande__carte { position: relative; overflow: hidden; display: flex; gap: 28px; align-items: center; padding: 22px 28px 22px 22px; border-radius: 24px; color: #fff; background: linear-gradient(150deg, var(--jc1), var(--jc-mi) 60%, var(--jc2)); }
.jc-bande__visuel { position: relative; flex: 0 0 auto; width: 136px; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 18px; background: #000; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .7); transform: rotate(-3deg); }
.jc-bande__media { display: block; width: 100%; height: 100%; object-fit: cover; }
.elementor .jc-bande__media { height: 100%; border-radius: 0; }
.jc-bande__corps { flex: 1 1 auto; min-width: 0; }
.jc-bande__titre { margin: 12px 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; color: #fff; }
.jc-bande__texte { margin: 8px 0 0; color: rgba(255, 255, 255, .94); }
.jc-bande__condition { margin: 6px 0 0; font-size: 14px; color: rgba(255, 255, 255, .8); }
.jc-bande__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* Bannière (accueil) : largeur du site, entre deux sections. */
.jc-bande--banniere { max-width: var(--max); padding: clamp(8px, 2vw, 20px) var(--pad) clamp(16px, 3vw, 32px); }
.jc-bande--banniere .jc-bande__carte { padding: clamp(18px, 2.4vw, 28px); gap: clamp(20px, 3vw, 40px); }
.jc-bande--banniere .jc-bande__visuel { width: clamp(120px, 12vw, 168px); }
.jc-bande--banniere .jc-bande__titre { font-size: clamp(26px, 3vw, 38px); }

/* ---------- Mouvement ---------- */
@media (prefers-reduced-motion: no-preference) {
  .jc-pastille__point { animation: jc-pouls 1.8s ease-out infinite; }
  .jc--termine .jc-pastille__point { animation: none; }
  .jc-hero__soleil { animation: jc-soleil 9s ease-in-out infinite alternate; }
  .jc-hero__tel { animation: jc-flotte 6s ease-in-out infinite alternate; }
  .jc-tel:hover { transform: rotate(0deg) scale(1.02); }
  .jc-compte__case b.is-tic { animation: jc-tic .45s var(--ease); }
  .jc-etape, .jc-lot, .jc-restos a { transition: transform .35s var(--ease), box-shadow .25s ease; }
  .jc-etape:hover, .jc-lot:hover { transform: translateY(-4px); }
  .jc-restos a:hover { transform: translateY(-2px); }
  .jc-bande__visuel { transition: transform .5s var(--ease); }
  .jc-bande__carte:hover .jc-bande__visuel { transform: rotate(0deg) scale(1.04); }
}
@keyframes jc-pouls { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(61, 220, 132, 0); } }
@keyframes jc-soleil { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-5%, -7%, 0) scale(1.08); } }
@keyframes jc-flotte { from { transform: translateY(0); } to { transform: translateY(-12px); } }
@keyframes jc-tic { from { transform: translateY(-30%); opacity: .25; } }

@media (prefers-reduced-transparency: reduce) {
  .jc-compte__case, .jc-tel__bouton { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .jc-compte__case { background: rgba(18, 10, 31, .5); }
  .jc-tel__bouton { background: #120a1f; }
}

/* ---------- Tablette et mobile ---------- */
@media (max-width: 960px) {
  .jc-hero__grille { grid-template-columns: minmax(0, 1fr); }
  .jc-tel { width: min(300px, 74vw); transform: none; }
  .jc-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .jc-hero { border-radius: 24px; padding: 28px 20px 32px; }
  .jc-compte__cases { gap: 8px; }
  .jc-compte__case { flex: 1 1 0; min-width: 0; }
  .jc-hero__actions .btn { flex: 1 1 100%; }
  .jc-etapes { grid-template-columns: minmax(0, 1fr); }
  .jc-recherche, .jc-recherche input { width: 100%; }
  .jc-lots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .jc-lot { padding: 20px 16px; border-radius: 20px; }
  .jc-lot__nom { font-size: 18px; }
  .jc-lot__precision { font-size: 14px; }
  .jc-lot--principal { grid-column: 1 / -1; }
  /* Fiche : petite affiche à côté du texte, sans vidéo (données mobiles). */
  .jc-bande { padding: 24px 16px 0; }
  .jc-bande--banniere { padding: 8px 16px 24px; }
  .jc-bande--banniere .jc-bande__visuel { width: 84px; }
  .jc-bande__carte { align-items: flex-start; gap: 16px; padding: 18px 16px 20px; }
  .jc-bande__visuel { width: 84px; border-radius: 12px; transform: rotate(-3deg); }
  .jc-bande__visuel .jc-tel__boutons { display: none; }
  .jc-bande__titre { margin-top: 10px; font-size: 22px; }
  .jc-bande__texte { font-size: 15px; }
  .jc-bande .jc-pastille { padding: 5px 11px; font-size: 13px; }
  .jc-bande__actions { flex-direction: column; }
  .jc-bande__actions .btn { width: 100%; padding-inline: 16px; white-space: normal; text-align: center; }
}