/* =========================================================
   ALPHA ΩPERA — VERSION MOBILE UNIQUEMENT (≤ 768px)
   TOUT est dans @media → desktop strictement intact.
   ========================================================= */

@media (max-width: 768px) {

  /* ===== 1. ANTI-DÉBORDEMENT — overflow:clip ne casse pas position:sticky (iOS-safe) ===== */
  html, body {
    overflow-x: clip;
    max-width: 100vw;
  }
  img, video, svg { max-width: 100%; height: auto; }
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100vw;
    box-sizing: border-box;
  }
  section { max-width: 100vw; overflow-x: clip; }
  h1, h2, h3, h4, p { word-wrap: break-word; overflow-wrap: break-word; }

  /* ===== 2. NAVIGATION (burger à droite, logo gauche, rien d'autre) ===== */
  .nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 16px !important;
  }
  .nav-links { display: none !important; }
  .nav-cta, .nav-right a.btn { display: none !important; }
  .nav-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
  }
  .nav-burger {
    display: flex !important;
    flex-direction: column !important;
    width: 38px !important;
    height: 38px !important;
    padding: 8px !important;
    border: 1px solid rgba(201,168,76,0.4) !important;
    background: rgba(0,0,0,0.55) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 6px;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }
  .nav-burger span {
    margin: 0 !important;
    width: 20px !important;
    height: 1.5px !important;
    background: var(--or-clair) !important;
  }
  .nav-burger span:nth-child(2) { width: 14px !important; }
  .nav-logo-img { height: 36px !important; width: auto !important; }

  /* ===== 3. HERO — N'IMPOSE RIEN sur la mécanique (sticky/curtain).
     On laisse l'animation desktop fonctionner : 180vh est déjà défini dans index.html @media. ===== */
  /* (Aucun override sur .hero-shell ou .hero-pin — l'animation curtain reste intacte.) */

  /* Texte du hero — un peu plus tassé sur mobile */
  .hero-reveal .h-display, .hero-reveal h1 { font-size: clamp(36px, 11vw, 56px) !important; line-height: 1.05 !important; }
  .hero-reveal .h-sub, .hero-reveal p { font-size: 14px !important; line-height: 1.5 !important; padding: 0 12px; }
  .hero-logo-full { width: clamp(220px, 64vw, 320px) !important; }

  /* ===== 4. VITRINE (La Carte) — 1 carte pleine largeur + flèches discrètes ===== */
  .vitrine-carousel { padding: 26px 8px !important; }
  .vitrine-stage {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    touch-action: pan-y;
    position: relative !important;
  }
  /* Toutes les cartes : layout 1 colonne, neutralise les transforms desktop, + compactes */
  .vitrine-card {
    grid-template-columns: 1fr !important;
    padding: 14px 12px !important;        /* + serré (16x14 → 14x12) */
    gap: 8px !important;                  /* gap réduit */
    max-width: calc(100vw - 72px) !important;
    width: calc(100vw - 72px) !important; /* + étroite (56 → 72) */
    box-sizing: border-box !important;
    margin: 0 auto !important;
  }
  /* La carte active est seule au centre, statique */
  .vitrine-card[data-pos="active"] {
    position: relative !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    opacity: 1 !important;
    z-index: 5 !important;
    pointer-events: auto !important;
  }
  /* Toutes les autres cartes sont totalement masquées */
  .vitrine-card[data-pos="prev"],
  .vitrine-card[data-pos="next"],
  .vitrine-card[data-pos="hidden-left"],
  .vitrine-card[data-pos="hidden-right"] {
    display: none !important;
  }
  /* Image vitrine : plus compacte verticalement (16/9 au lieu de 16/10 = moins haute) */
  .vitrine-card-image,
  .vitrine-card-img,
  .vitrine-card-media {
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .vitrine-card-image img,
  .vitrine-card-img img,
  .vitrine-card-img-bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .vitrine-card-tier { font-size: 10px !important; letter-spacing: 0.3em !important; }
  .vitrine-card-title { font-size: 20px !important; line-height: 1.1 !important; margin: 2px 0 2px !important; }
  .vitrine-card-tagline { font-size: 12.5px !important; line-height: 1.35 !important; }
  .vitrine-card-desc { font-size: 12px !important; line-height: 1.45 !important; }
  .vitrine-card-meta { gap: 6px !important; flex-wrap: wrap !important; margin: 4px 0 !important; }
  .vitrine-card-meta-label { font-size: 8.5px !important; letter-spacing: 0.2em !important; }
  .vitrine-card-meta-value { font-size: 11.5px !important; }
  .vitrine-card-actions { margin-top: 6px !important; }
  .vitrine-card-actions .btn { font-size: 10px !important; padding: 9px 14px !important; }

  /* Flèches Vitrine — icône seule, transparente, collée au bord */
  .vitrine-arrow, .vitrine-nav-arrow, #vitrinePrev, #vitrineNext {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 56px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--or-clair) !important;
    font-size: 26px !important;
    z-index: 10 !important;
    padding: 0 !important;
    opacity: 0.8;
  }
  #vitrinePrev { left: 2px !important; }
  #vitrineNext { right: 2px !important; }

  /* ===== 5. SERVICES 3D — carte unique CENTRÉE (préserve le translate(-50%) desktop) ===== */
  /* IMPORTANT : svc-carousel a 40px de padding latéral en desktop → on coupe sur mobile */
  .svc-carousel, .services-carousel {
    padding-left: 8px !important;
    padding-right: 8px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .svc-stage {
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 4px !important;
    overflow: hidden !important;
    touch-action: pan-y;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Toutes les cartes : layout 1 colonne, largeur SOUS contrôle */
  .svc-card {
    grid-template-columns: 1fr !important;
    width: calc(100vw - 60px) !important;
    max-width: calc(100vw - 60px) !important;
    padding: 16px 14px !important;
    box-sizing: border-box !important;
  }
  /* Active : on conserve position absolute + left:50% + translate(-50%) du desktop pour le centrage,
     mais on remet la stage en flux (avec une hauteur intrinsèque dérivée de la carte active) */
  .svc-card[data-pos="active"] {
    position: relative !important;          /* sort du flow absolu pour donner la hauteur au stage */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 auto !important;              /* centre horizontalement */
    opacity: 1 !important;
    filter: none !important;
    z-index: 5 !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    height: auto !important;
  }
  /* Les autres cartes sont cachées (svp pas en .display:none qui casse la nav,
     mais en visibility + position:absolute hors écran) */
  .svc-card[data-pos="prev"],
  .svc-card[data-pos="next"],
  .svc-card[data-pos="hidden-left"],
  .svc-card[data-pos="hidden-right"] {
    display: none !important;
  }
  .svc-card-title { font-size: 20px !important; line-height: 1.15 !important; }
  .svc-card-desc { font-size: 12.5px !important; line-height: 1.5 !important; }
  .svc-card-tier, .svc-card-eyebrow { font-size: 10.5px !important; letter-spacing: 0.3em !important; }
  .svc-card-actions .btn { font-size: 10.5px !important; padding: 11px 16px !important; }

  .svc-nav-btn, #svcPrev, #svcNext {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 56px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--or-clair) !important;
    font-size: 26px !important;
    z-index: 10 !important;
    padding: 0 !important;
    opacity: 0.8;
  }
  #svcPrev { left: 2px !important; }
  #svcNext { right: 2px !important; }

  /* ===== 6. WIZARD DEVIS — bouton Suivant entier + step-dots propres ===== */
  .wizard {
    padding: 26px 14px !important;
    margin: 0 10px !important;
    max-width: calc(100vw - 20px) !important;
    box-sizing: border-box !important;
  }
  .wizard-progress {
    padding: 6px 4px 14px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    gap: 4px !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch;
  }
  /* La ligne horizontale qui barre les ronds : on cache TOUTES les variantes possibles */
  .wizard-progress-track,
  .wizard-progress-bar,
  .wizard-progress::before,
  .wizard-progress::after,
  .wizard-progress hr,
  .wizard-progress .line { display: none !important; }
  .wizard-step-dot { min-width: 56px !important; padding: 2px !important; flex: 0 0 auto !important; }
  .wizard-step-dot .circle {
    width: 28px !important;
    height: 28px !important;
    font-size: 11.5px !important;
    background: rgba(0,0,0,0.85) !important;     /* opaque pour cacher toute ligne derrière */
    border: 1px solid var(--or-line) !important;
  }
  .wizard-step-dot.is-active .circle {
    background: var(--or) !important;
    color: var(--noir) !important;
  }
  .wizard-step-dot .label { font-size: 9px !important; line-height: 1.2; }

  /* Wizard nav : Suivant centré ET pleine largeur ET visible */
  .wizard-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding-top: 18px !important;
  }
  .wizard-nav-info {
    text-align: center !important;
    font-size: 12px !important;
    order: 1 !important;
  }
  .btn-prev {
    order: 3 !important;
    width: 100% !important;
    padding: 14px !important;
    font-size: 11.5px !important;
  }
  .btn-prev.is-hidden { display: none !important; }
  .wizard-nav .btn,
  #btnNext {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    font-size: 11.5px !important;
    letter-spacing: 0.22em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    white-space: normal;
  }

  /* Cards d'options dans le wizard */
  .opt-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .opt-card { padding: 14px 10px !important; }
  .opt-card-title { font-size: 13.5px !important; line-height: 1.2 !important; }
  .opt-card-desc { font-size: 11px !important; line-height: 1.35 !important; }
  .opt-card-icon { font-size: 22px !important; }

  .wizard-step-title { font-size: 22px !important; line-height: 1.15 !important; }
  .wizard-step-sub { font-size: 12.5px !important; line-height: 1.4 !important; }
  .wizard-step-eyebrow { font-size: 10.5px !important; letter-spacing: 0.32em !important; }

  .field input, .field textarea, .field select { font-size: 14px !important; padding: 12px 14px !important; }
  .field label { font-size: 11px !important; letter-spacing: 0.22em !important; }
  .recap { padding: 16px 14px !important; }
  .recap-row { font-size: 12px !important; padding: 8px 0 !important; }
  .recap-row .key { font-size: 11px !important; }
  .contact-actions { grid-template-columns: 1fr !important; gap: 10px !important; max-width: 100% !important; }
  .action-btn { padding: 14px 16px !important; }
  .action-btn-title { font-size: 14px !important; }
  .action-btn-desc { font-size: 11.5px !important; }

  /* ===== 7. GALERIE 3D — flèches discrètes + drag fluide ===== */
  .gallery { padding-top: 50px !important; padding-bottom: 50px !important; }
  .gallery .section-head { margin-bottom: 8px !important; }
  .circular-gallery {
    margin-top: -10px !important;
    height: clamp(420px, 64vh, 580px) !important;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    position: relative !important;
  }
  /* Cache les vieux contrôles ronds */
  .circ-nav, .circ-nav-btn, .gallery .controls-row { display: none !important; }
  #circPrev, #circNext, button[id*="circPrev"], button[id*="circNext"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 56px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--or-clair) !important;
    font-size: 28px !important;
    z-index: 20 !important;
    padding: 0 !important;
    opacity: 0.75;
  }
  #circPrev { left: 4px !important; }
  #circNext { right: 4px !important; }

  /* ===== 8. RÉSEAUX SOCIAUX — vrais ronds (jamais ovales) ===== */
  .social-icons {
    gap: 14px !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  .social-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    padding: 11px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
  }
  .social-icon svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 22px !important;
    max-height: 22px !important;
  }

  /* ===== 9. BURGER MENU OVERLAY ===== */
  .nav-secondary-eyebrow {
    text-decoration: none !important;
    border-bottom: none !important;
    background: none !important;
    font-size: 10px !important;
    letter-spacing: 0.42em !important;
    margin-bottom: 24px !important;
  }
  .nav-secondary-eyebrow::before,
  .nav-secondary-eyebrow::after { display: none !important; content: '' !important; }

  /* CRITIQUE — quand le burger est ouvert, on cache la barre dorée du nav qui passait
     sur le titre "Maison Alpha Ωpera" et la barre de progression de la page */
  body:has(.nav-secondary-overlay.is-open) .nav::after,
  body:has(.nav-secondary-overlay.is-open) .page-progress {
    display: none !important;
    opacity: 0 !important;
  }
  /* Fallback : on dégage le fond du nav pendant le burger pour ne pas qu'il barre le contenu */
  body:has(.nav-secondary-overlay.is-open) .nav {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  body:has(.nav-secondary-overlay.is-open) .nav.scrolled {
    background: transparent !important;
  }
  .nav-secondary-link {
    font-size: clamp(20px, 6.4vw, 28px) !important;
    line-height: 1.15 !important;
    margin: 7px 0 !important;
    text-decoration: none !important;
  }
  .nav-secondary-content {
    padding: 28px 24px !important;
    gap: 0 !important;
  }
  .nav-secondary-tertiary {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center;
  }
  .nav-secondary-tertiary a { font-size: 11px !important; letter-spacing: 0.24em !important; }
  .nav-secondary-divider { margin: 18px 0 14px !important; }

  /* ===== 10. SECTIONS — espacements + titres ===== */
  section { padding: 64px 0 !important; }
  .section-head { margin-bottom: 22px !important; padding: 0 16px; }
  .section-head .eyebrow { font-size: 10.5px !important; letter-spacing: 0.36em !important; }
  .section-head h2, .section-head .h-display {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.1 !important;
    margin: 8px 0 !important;
  }
  .section-head .lede, .section-head p {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    padding: 0 6px;
  }

  /* ===== 11. RÉPERTOIRE — 1 colonne large ===== */
  .styles-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .style-card {
    padding: 22px 18px !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .style-card-title { font-size: 18px !important; }
  .style-card-desc {
    font-size: 13px !important;
    line-height: 1.5 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* ===== 12. À PROPOS + MANIFESTO — texte lisible ===== */
  .about-grid, .manifesto-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .about-text p, .manifesto p, .stat-card-label, .stat-card-value {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
  .stat-card-value { font-size: clamp(28px, 8vw, 36px) !important; line-height: 1 !important; }
  .stat-card-label { font-size: 10.5px !important; letter-spacing: 0.3em !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .stat-card { padding: 16px 12px !important; }

  /* ===== 13. FOOTER ===== */
  .footer { padding: 50px 0 30px !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer-col-title { font-size: 11px !important; letter-spacing: 0.32em !important; }
  .footer-col a, .footer-col p, .footer-col li { font-size: 13px !important; line-height: 1.7 !important; }
  .footer-bottom { font-size: 11px !important; padding-top: 20px !important; text-align: center; flex-direction: column; gap: 8px; }

  /* ===== 14. POLICE LISIBLE petits écrits (Inter pour clarté) ===== */
  .eyebrow, .cat-meta, .footer-col-title,
  .nav-secondary-tertiary a, .tile-info .cat, .circ-cat,
  .vitrine-card-meta-label, .stat-card-label, .stat-card-delta,
  .recap-row .key, .field label, small, .small {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 500 !important;
  }

  /* ===== 15. Anti-overflow générique sur cards ===== */
  .pack-card, .service-card, .opt-card, .tile, .photo-tile, .style-card, .stat-card {
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* ===== 16. Page Nous rejoindre & Contact ===== */
  .roles-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .role-card { padding: 22px 18px !important; }
  .role-card-title { font-size: 18px !important; }
  .role-card-desc { font-size: 13px !important; line-height: 1.5; }
  .recruit-form, .contact-form { padding: 22px 18px !important; }
  .recruit-form .field, .contact-form .field { margin-bottom: 14px; }

  /* ===== 17. Page Artistes (sous-pages) ===== */
  .cat-grid, .artist-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .cat-card, .artist-card { padding: 12px 10px !important; }
  .cat-card-title, .artist-card-title { font-size: 13.5px !important; }
  .cat-card-meta, .artist-card-meta { font-size: 10.5px !important; }

  /* ===== 18. WIZARD : champs textarea/label — empêche débordement
     ("Votre vision, vos détails, vos exigences" passe sur plusieurs lignes) ===== */
  .field label {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.4 !important;
    display: block !important;
    max-width: 100% !important;
  }
  .field textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    resize: vertical;
  }

  /* ===== 19. BONUS MODAL — agrandir titre + recentrer contenu ===== */
  .bonus-overlay { padding: 0 !important; }
  .bonus-box {
    padding: 38px 18px 28px !important;
    margin: 0 auto !important;
    max-width: calc(100vw - 16px) !important;
    width: calc(100vw - 16px) !important;
    max-height: 90vh !important;
    border-radius: 8px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  .bonus-eyebrow { font-size: 10.5px !important; text-align: center !important; }
  .bonus-title {
    font-size: clamp(26px, 8.5vw, 34px) !important;
    line-height: 1.1 !important;
    margin: 8px auto 12px !important;
    text-align: center !important;
  }
  .bonus-sub {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 auto 22px !important;
    text-align: center !important;
    max-width: 100% !important;
  }
  /* Cartes bonus : 1 colonne pleine largeur, contenu CENTRÉ */
  .bonus-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 22px !important;
  }
  .bonus-card {
    padding: 18px 16px 18px 60px !important;
    text-align: left !important;
  }
  .bonus-card-icon { left: 18px !important; top: 18px !important; font-size: 26px !important; }
  .bonus-card-check { top: 18px !important; right: 14px !important; }
  .bonus-card-title { font-size: 15.5px !important; }
  .bonus-card-tagline { font-size: 9.5px !important; letter-spacing: 0.26em !important; }
  .bonus-card-desc { font-size: 12.5px !important; line-height: 1.45 !important; }
  .bonus-actions {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .bonus-actions .btn { width: 100% !important; padding: 14px !important; font-size: 11.5px !important; }
  .bonus-close-x { top: 10px !important; right: 10px !important; width: 32px !important; height: 32px !important; }

  /* Le launcher (carte qui ouvre le modal) — agrandir le mot Bonus */
  .bonus-launcher {
    padding: 16px 14px !important;
    gap: 12px !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  .bonus-launcher > div:nth-child(2) > div:first-child {
    font-size: 19px !important;        /* "Ajouter des bonus à votre événement" plus gros */
    line-height: 1.2 !important;
  }
  .bonus-launcher em {
    font-size: 24px !important;        /* le mot "bonus" lui-même encore plus gros */
  }
  #bonusLauncherDesc { font-size: 12px !important; line-height: 1.4 !important; }

  /* ===== 20. PAGES SERVICES — anti-débordement complet ===== */
  .service-hero, .service-section, .service-detail,
  .pack-hero, .pack-detail {
    max-width: 100vw !important;
    overflow-x: clip !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  .service-grid, .pack-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .service-card, .pack-card, .feature-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 22px 18px !important;
    margin: 0 !important;
  }
  /* Hero / band des pages services : centrer et fitter */
  .service-hero h1, .service-hero .h-display,
  .pack-hero h1, .pack-hero .h-display {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.1 !important;
    word-wrap: break-word;
  }
  .service-hero, .pack-hero { text-align: center; }
  .service-hero img, .pack-hero img,
  .service-section img, .pack-section img {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Pour images parallaxées / décoratives qui peuvent flotter */
  .service-bg, .pack-bg, .service-decor, .pack-decor {
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  /* CTA buttons : pleine largeur */
  .service-cta, .pack-cta, .service-section .btn, .pack-section .btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ===== 21. GALERIE — resserrer LÉGÈREMENT le ring 3D
     On laisse les transforms JS-driven gérer la rotation pour ne pas casser
     le système, mais on réduit prudemment la taille des cartes. ===== */
  .circ-item {
    width: 130px !important;
    height: 190px !important;
    margin-left: -65px !important;
    margin-top: -95px !important;
  }

  /* ===== 22. PAGE COMPOSER (orchestre / sur-mesure) — dézoomer ===== */
  .composer { padding: 50px 0 !important; }
  .composer .container { padding: 0 12px !important; }
  .composer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    max-width: 100% !important;
  }
  .composer-col-title {
    font-size: 11px !important;
    letter-spacing: 0.28em !important;
  }
  .composer-col-title::before { width: 22px !important; }
  .instruments-palette {
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .inst-icon {
    padding: 10px 6px !important;
    min-width: 0 !important;
  }
  .inst-icon-img { width: 36px !important; height: 36px !important; }
  .inst-icon-name { font-size: 10px !important; line-height: 1.2 !important; }
  /* Stage (la scène) : pleine largeur, sans débordement */
  .stage {
    min-height: 420px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .stage-level { padding: 8px 6px !important; }
  .stage-level-label { font-size: 9px !important; }
  .stage-piece { width: 60px !important; height: 80px !important; }
  .stage-piece.is-wide { width: 80px !important; }
  .stage-piece img { max-width: 90% !important; }
  .stage-piece-name { font-size: 9px !important; }
  .stage-reset {
    width: 30px !important;
    height: 30px !important;
    top: 8px !important;
    right: 8px !important;
    font-size: 14px !important;
  }
  /* CTA band orchestre */
  .rep-cta-band { padding: 50px 16px !important; }
  .rep-cta-band h2 { font-size: clamp(26px, 8vw, 36px) !important; line-height: 1.1 !important; }
  .rep-cta-band p { font-size: 13.5px !important; line-height: 1.5 !important; }

  /* ===== 23. RUBBER-BAND iOS — supprimer l'overscroll pour stabiliser le hero ===== */
  html, body { overscroll-behavior-y: contain; }

  /* ===== 24. Hero — image entière + chevrons centrés ===== */
  .hero-scroll {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: 28px !important;
  }
  .hero-scroll-chevron { width: 22px !important; height: 22px !important; }

  /* ===== 25. CALENDRIER RDV TÉLÉPHONIQUE — tout fit dans le téléphone ===== */
  .phone-scheduler {
    padding: 18px 12px !important;
    margin: 18px 0 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #phoneScheduler {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .phone-scheduler-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .phone-scheduler-title {
    font-size: 16px !important;
    text-align: center !important;
  }
  .phone-slot-label {
    font-size: 10.5px !important;
    letter-spacing: 0.24em !important;
    margin: 14px 0 8px !important;
    text-align: center !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }
  /* Mini-cal compact pour mobile */
  .mini-cal,
  #phoneMiniCal {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto 16px !important;
    padding: 12px 8px !important;
    box-sizing: border-box !important;
  }
  .mini-cal-head { margin-bottom: 10px !important; }
  .mini-cal .cal-nav-btn,
  #phoneMcPrev, #phoneMcNext {
    width: 28px !important;
    height: 28px !important;
    font-size: 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 1px solid var(--or-line) !important;
    color: var(--or-clair) !important;
  }
  .mini-cal .cal-month-label,
  #phoneMcMonth {
    font-size: 13.5px !important;
    letter-spacing: 0.02em !important;
  }
  .mini-cal .cal-weekdays {
    gap: 2px !important;
    margin-bottom: 4px !important;
  }
  .mini-cal .cal-weekdays div {
    font-size: 9.5px !important;
    letter-spacing: 0.12em !important;
    padding: 2px 0 !important;
  }
  .mini-cal .cal-days {
    gap: 2px !important;
  }
  .mini-cal .cal-day {
    font-size: 12px !important;
    min-height: 30px !important;
    aspect-ratio: 1 !important;
  }
  .mini-cal .cal-day.is-selected {
    font-size: 12.5px !important;
  }
  /* Phone slots (créneaux horaires) : 2 colonnes sur mobile */
  #phoneScheduler .phone-slots,
  .phone-slots {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  #phoneScheduler .phone-slot,
  .phone-slot {
    padding: 10px 4px !important;
    font-size: 11.5px !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
  }

  /* ===== 26. SERVICES CAROUSEL (index) — cards comme la vitrine, jamais qui débordent ===== */
  /* Stage et carousel : container forcé pour rester dans l'écran */
  .svc-section, .services-section, #services {
    overflow-x: clip !important;
    max-width: 100vw !important;
  }
  .svc-stage {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 8px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  /* Card services : MÊME largeur que vitrine (calc(100vw - 56px) pour laisser de la place aux flèches) */
  .svc-card {
    width: calc(100vw - 60px) !important;
    max-width: calc(100vw - 60px) !important;
    box-sizing: border-box !important;
    padding: 16px 14px !important;
    margin: 0 auto !important;
  }
  /* Conteneur image : aspect-ratio fixe + min-height retiré → l'image remplit proprement */
  .svc-card-img {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
  }
  /* Image elle-même : remplit le conteneur en restant cohérente (cover) */
  .svc-card-img img,
  .svc-card-img-bg,
  .svc-card-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  /* Titres et textes svc-card : tailles raisonnables, mots qui passent à la ligne */
  .svc-card-title {
    font-size: 20px !important;
    line-height: 1.15 !important;
    word-wrap: break-word !important;
  }
  .svc-card-tagline {
    font-size: 13px !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
  }
  .svc-card-desc {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    word-wrap: break-word !important;
  }
  /* Meta (durée, format, etc.) en flex-wrap */
  .svc-card-meta {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* CTAs : pleine largeur, jamais qui débordent */
  .svc-card-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .svc-card-actions .btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 11px !important;
    padding: 12px 16px !important;
  }

  /* ===== 27. GALERIE — agrandir les photos (ce qui les rapproche visuellement) ===== */
  .circ-item {
    width: 170px !important;       /* + grand qu'avant (130) */
    height: 245px !important;
    margin-left: -85px !important;
    margin-top: -122px !important;
  }
  .circular-gallery {
    height: clamp(460px, 70vh, 620px) !important;
  }

  /* ===== 28. FOOTER — centrer tout sur mobile (logo brand inclus) ===== */
  .footer,
  .footer-grid,
  .footer-col,
  .footer-brand,
  .footer-bottom,
  .footer-bottom-links,
  .footer-credits {
    text-align: center !important;
  }
  .footer-col,
  .footer-brand {
    align-items: center !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Le logo lui-même centré horizontalement */
  .footer-brand img {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
  .footer-brand p {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 90% !important;
  }
  .footer-col ul,
  .footer-col-list {
    padding-left: 0 !important;
    list-style: none !important;
    text-align: center !important;
  }
  .footer-col li,
  .footer-col-list li {
    text-align: center !important;
    list-style: none !important;
  }
  .footer-col-title {
    text-align: center !important;
    margin-bottom: 10px !important;
  }
  .footer-bottom,
  .footer-bottom-row,
  .footer-bottom .legal,
  .footer-bottom-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-align: center !important;
    width: 100% !important;
  }
  .footer-bottom a,
  .footer-bottom .legal a,
  .footer-bottom-links a {
    display: block !important;
    text-align: center !important;
    width: auto !important;
  }
  .footer-bottom > span,
  .footer-bottom > div { text-align: center !important; }
}

/* ===== 19. Très petits écrans (≤ 380px) — ajustements supplémentaires ===== */
@media (max-width: 380px) {
  .nav-logo-img { height: 32px !important; }
  .vitrine-card { padding: 14px 12px !important; width: calc(100vw - 50px) !important; max-width: calc(100vw - 50px) !important; }
  .vitrine-card-title { font-size: 20px !important; }
  .svc-card { padding: 14px 12px !important; width: calc(100vw - 50px) !important; max-width: calc(100vw - 50px) !important; }
  .container { padding-left: 12px !important; padding-right: 12px !important; }
  .opt-grid { grid-template-columns: 1fr !important; }
  .social-icon { width: 42px !important; height: 42px !important; min-width: 42px !important; padding: 10px !important; }
  .cat-grid, .artist-grid { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
}