/* L'Atelier 212 — final responsive and overflow safety net v2.11.1 */
html { max-width: 100%; overflow-x: hidden; }
body { max-width: 100%; overflow-x: clip; }
img, picture, svg, video, canvas, iframe { max-width: 100%; height: auto; }
iframe { width: 100%; }

/* Prevent long labels, URLs and generated content from breaking cards/layouts. */
.site-main :where(h1,h2,h3,h4,h5,h6,p,li,a,button,label,strong,small,span),
.site-footer :where(a,p,li),
.site-header :where(a,button) {
  overflow-wrap: anywhere;
}

/* Inputs must remain inside their cards on phones and tablets. */
.site-main :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.woocommerce :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  max-width: 100%;
  box-sizing: border-box;
}

/* CTA labels may wrap instead of overflowing their container. */
.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  max-width: 100%;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}

/* Tables remain usable rather than stretching the entire page. */
.table-scroll,
.casino-payout-table,
.woocommerce table.shop_table,
.wp-block-table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Horizontal navs remain accessible on compact screens. */
.casino-game-nav,
.casino-game-nav__track,
.event-filters,
.member-tabs,
.project-filters {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

/* Stable, readable title scale without oversized mobile headings. */
.site-main h1 { font-size: clamp(2rem, 5vw, 4.8rem); line-height: 1.02; }
.site-main h2 { font-size: clamp(1.55rem, 3.4vw, 3.1rem); line-height: 1.08; }
.site-main h3 { font-size: clamp(1.15rem, 2.1vw, 1.7rem); line-height: 1.15; }

/* Avoid layout jumps from cards/images with very long content. */
:where(.card, .project-card, .casino-card, .event-card-v211, .member-card, .shop-card) {
  min-width: 0;
}

@media (max-width: 782px) {
  .site-main { min-width: 0; }
  .site-main :where(.container, .wrap, .section-inner, .content-wrap) { min-width: 0; }
  .button,
  button,
  input[type="submit"] { min-height: 44px; }
  .site-main :where(input, select, textarea, button) { font-size: max(16px, 1em); }
}

@media (max-width: 480px) {
  .site-main h1 { font-size: clamp(1.9rem, 11vw, 3rem); }
  .site-main h2 { font-size: clamp(1.45rem, 8vw, 2.25rem); }
  .site-main h3 { font-size: clamp(1.1rem, 5.8vw, 1.55rem); }
  .button,
  button,
  input[type="submit"] { width: auto; }
}

/* ================================================================
 * v2.11.1 — Mobile hotfix after real-device QA
 * Fixes homepage hero flex collapse and Casino symbol wrapping.
 * ================================================================ */

/* Text should wrap at normal word boundaries.  v2.11.0 used `anywhere`
 * on every span/button as an overflow safety net; that also split visual
 * casino symbols such as BAR and could make compact UI labels look broken. */
.site-main :where(h1,h2,h3,h4,h5,h6,p,li,a,label,strong,small),
.site-footer :where(a,p,li),
.site-header :where(a,button) {
  overflow-wrap: break-word;
  word-break: normal;
}
.site-main :where(span,button) {
  word-break: normal;
}

@media (max-width: 900px) {
  /* The homepage hero has two normal-flow children on mobile (content +
   * footer).  Keeping the desktop flex row made them compete for width and
   * could collapse the copy to a few characters per line on real phones. */
  .hero {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .hero__grid {
    display: block !important;
    width: calc(100% - (var(--mobile-gutter, 16px) * 2)) !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    margin-inline: auto !important;
  }
  .hero__content,
  .hero__lead,
  .hero__actions {
    width: 100% !important;
    min-width: 0 !important;
  }
  .hero__lead {
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
  .hero__footer {
    position: static !important;
    width: calc(100% - (var(--mobile-gutter, 16px) * 2)) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 24px auto 0 !important;
    flex-wrap: wrap !important;
  }

  /* Casino cards and live games must always stay inside the viewport. */
  .casino-live-page,
  .casino-live-page .casino-live-section,
  .casino-live-page .casino-live-section > .container,
  .casino-live-layout,
  .live-game-panel,
  .live-game-info,
  .jackpot-cabinet,
  .jackpot-machine--live,
  .jackpot-reel,
  .jackpot-reel__window {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .casino-live-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .live-game-panel,
  .live-game-info {
    width: 100% !important;
    overflow: hidden !important;
  }
  .jackpot-cabinet {
    width: 100% !important;
  }
  .jackpot-machine--live {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
  .jackpot-reel {
    overflow: hidden !important;
  }
  .jackpot-reel__window {
    overflow: hidden !important;
  }
  .jackpot-reel__window > span,
  [data-jackpot-symbol] {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    place-items: center !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
    line-height: 1 !important;
  }
  .casino-symbol-chip,
  .poker-card strong,
  .poker-card__corner,
  .blackjack-card__suit,
  .blackjack-card__corner,
  .blackjack-card__bottom {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }
  .live-game-info h2 {
    max-width: 100% !important;
  }
  .casino-payout-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 520px) {
  .jackpot-cabinet {
    padding: .65rem !important;
    border-radius: 18px 18px 10px 10px !important;
  }
  .jackpot-cabinet__topline,
  .jackpot-cabinet__foot {
    gap: .45rem !important;
  }
  .jackpot-machine--live {
    padding: .45rem !important;
    gap: .3rem !important;
  }
  .jackpot-reel {
    padding: .25rem .18rem .35rem !important;
  }
  .jackpot-reel__window {
    min-height: 102px !important;
  }
  .jackpot-reel__window > span,
  [data-jackpot-symbol] {
    font-size: clamp(2rem, 10.2vw, 3.15rem) !important;
  }
  .jackpot-reel small {
    font-size: .36rem !important;
    letter-spacing: .075em !important;
  }
  .jackpot-cabinet__topline {
    font-size: .5rem !important;
    letter-spacing: .12em !important;
  }
  .jackpot-cabinet__foot {
    font-size: .4rem !important;
    letter-spacing: .065em !important;
  }
  .casino-live-status {
    font-size: .8rem !important;
    line-height: 1.4 !important;
  }
  .live-game-info h2 {
    font-size: clamp(1.75rem, 8.8vw, 2.35rem) !important;
    line-height: .98 !important;
  }
  .casino-payout-table {
    font-size: .7rem !important;
  }

  /* Keep the assistant useful without masking a large part of the current
   * card while the mobile action dock is visible. */
  .client-help__launcher {
    min-height: 42px !important;
    padding: .55rem .7rem !important;
    font-size: .68rem !important;
  }
  .client-help__launcher-mark {
    display: none !important;
  }
}

/* v2.11.2 — Project cards: clearer mobile hierarchy (Premium 500 € + all tattoo projects). */
@media (max-width: 720px) {
  .tattoo-project-card__frame {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  .tattoo-project-card__media {
    width: 100%;
    aspect-ratio: 4 / 5 !important;
    max-height: 430px;
    min-height: 0;
    background: #050505;
    overflow: hidden;
  }

  .tattoo-project-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center !important;
  }

  .tattoo-project-card__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: .9rem .9rem 1rem !important;
  }

  .tattoo-project-card__meta { order: 1; display:flex !important; gap:.45rem; flex-wrap:wrap; justify-content:space-between; }
  .tattoo-project-card__badges { order: 2; margin:.45rem 0 .15rem; }
  .tattoo-project-card h3 { order: 3; margin:.3rem 0 .55rem; font-size:clamp(1.35rem,7vw,1.85rem) !important; line-height:1.02; }
  .tattoo-project-card__facts { order: 4; grid-template-columns:repeat(2,minmax(0,1fr)) !important; margin-top:.15rem; }
  .tattoo-project-card__facts > div { padding:.55rem .5rem .55rem 0 !important; }
  .tattoo-project-card__facts > div + div { padding-left:.55rem !important; border-left:1px solid rgba(244,241,234,.08) !important; border-top:0 !important; }
  .tattoo-project-card__extra { order: 5; grid-template-columns:repeat(3,minmax(0,1fr)) !important; margin:.55rem 0 .1rem; }
  .tattoo-project-card__price { order: 6; margin-top:.55rem; padding-top:.6rem; }
  .tattoo-project-card__price .amount,
  .tattoo-project-card__price strong { font-size:clamp(1.55rem,8vw,2rem) !important; }
  .tattoo-project-card__actions { order: 7; display:grid !important; grid-template-columns:1fr !important; gap:.42rem; margin-top:.65rem; }
  .tattoo-project-card__actions .button { min-height:3.15rem; padding:.78rem .9rem; font-size:.72rem; line-height:1.2; text-align:center; white-space:normal; }
  .tattoo-project-card__actions .text-link { display:flex !important; justify-content:center; margin-top:.05rem; padding:.55rem; border:1px solid rgba(216,188,127,.18); border-radius:999px; color:#d8bc7f !important; font-size:.64rem; text-decoration:none; }
  .tattoo-project-card__tools { order: 8; display:grid; grid-template-columns:1fr 1fr; gap:.42rem; margin:.65rem 0 0; }
  .tattoo-project-card__tools button { width:100%; min-height:2.7rem; justify-content:center; font-size:.64rem; }

  /* Secondary information comes after the purchase path instead of pushing it below the fold. */
  .tattoo-project-card__story { order: 9; margin-top:.75rem !important; padding-top:.7rem; max-height:none !important; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; font-size:.68rem !important; line-height:1.48 !important; }
  .tattoo-project-card__rules { order: 10; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; font-size:.62rem !important; line-height:1.45 !important; }
  .tattoo-project-card__adaptation { order: 11; font-size:.62rem !important; line-height:1.45 !important; }
  .tattoo-project-card__unique { order: 12; display:none; }
  .tattoo-project-card__installment { order: 13; display:none !important; }
  .tattoo-project-card__purchase-note { order: 14; display:none !important; }
  .tattoo-project-card__ready { order: 15; text-align:center; }

  /* Premium 500 €: extra compact and purchase-first. */
  .tattoo-project-card[data-project-category="premium"] .tattoo-project-card__media {
    aspect-ratio: 4 / 4.7 !important;
    max-height: 390px;
  }
  .tattoo-project-card[data-project-category="premium"] .tattoo-project-card__story {
    -webkit-line-clamp:2;
  }
  .tattoo-project-card[data-project-category="premium"] .tattoo-project-card__rules {
    display:none;
  }
  .tattoo-project-card[data-project-category="premium"] .tattoo-project-card__copy {
    padding-bottom:.85rem !important;
  }
}

@media (max-width: 440px) {
  .tattoo-project-card__media { max-height: 380px; }
  .tattoo-project-card[data-project-category="premium"] .tattoo-project-card__media { max-height: 350px; }
  .tattoo-project-card__facts strong { font-size:.68rem; }
  .tattoo-project-card__extra strong { font-size:.64rem; }
  .tattoo-project-card__copy { padding:.8rem .75rem .9rem !important; }
}


/* v2.12.2 — description courte toujours visible avant les données techniques */
@media(max-width:720px){
  .tattoo-project-card__summary{order:4!important;margin:.35rem 0 .55rem!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:4!important;overflow:hidden!important;font-size:.76rem!important;line-height:1.5!important;color:rgba(244,241,234,.8)!important}
  .tattoo-project-card__facts{order:5!important}.tattoo-project-card__extra{order:6!important}.tattoo-project-card__price{order:7!important}.tattoo-project-card__actions{order:8!important}.tattoo-project-card__tools{order:9!important}.tattoo-project-card__flow{order:10!important}.tattoo-project-card__more{order:11!important}.tattoo-project-card__secondary{order:12!important}
}