/* ============================================================
   MOBILE — lisibilité avant graphisme (2026-08-28, demande Pierre)
   Chargé APRÈS le <style> local de chaque page → prioritaire.
   Cible les classes communes aux pages produits/services.
   ============================================================ */
@media (max-width: 700px) {

  html, body { overflow-x: hidden; }
  img, picture, video, iframe { max-width: 100%; }

  /* ── Hero vidéo (home, pour-vous) : sur mobile l'autoplay YouTube est bloqué et laisse voir
        le titre / logo YouTube → on sert une image fixe tirée de la vidéo à la place ── */
  /* (28/08, Pierre) : la photo derrière le logo rendait mal sur mobile → fond sombre uni, plus de vidéo ni de poster */
  .video-bg { background: #050518 url("../medias/chateau-de-cercamp-mise-en-lumiere.jpg") center / cover no-repeat; }
  .page-home .hero::before { background: radial-gradient(ellipse at 50% 40%, rgba(5,5,24,0.5) 0%, rgba(5,5,24,0.85) 85%) !important; }
  .video-bg iframe, .video-bg .yt-wrap, .video-bg video, .video-bg::before { display: none !important; }
  /* Hero home mobile : logo → « L'ingénierie du spectacle… » → titre → boutons → réseaux */
  .page-home .hero-content { display: flex; flex-direction: column; align-items: center; }
  .page-home .hero-logo { order: 0; margin-bottom: 1.6rem !important; }
  .page-home .hero-eyebrow { order: 1; margin: 0 0 1.6rem !important; }
  .page-home .home-hero-title { order: 2; }
  .page-home .hero-cta-row { order: 3; }
  .page-home .hero-social { order: 4; }
  /* Bloc Halloween : photo en haut, texte dessous sur fond sombre (plus de texte par-dessus l'image) */
  .hw-feature { display: block !important; min-height: 0 !important; background: #0b0512; }
  .hw-feature-bg { position: relative !important; inset: auto !important; z-index: 0 !important; height: 210px; }
  .hw-feature-bg img, .hw-feature-bg picture { height: 100% !important; }
  .hw-feature::after { display: none !important; }
  .hw-feature-inner { padding: 1.4rem 1.3rem 1.6rem !important; max-width: none !important; }

  /* ── Header : hors accueil, plus de menu, juste un retour à l'accueil ── */
  body:not(.page-home) .mainnav {
    position: relative !important; padding: 0.55rem 1rem !important; gap: 0 !important;
    background: var(--cosmos-deep, #050518) !important; border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  body:not(.page-home) .mainnav .nav-burger,
  body:not(.page-home) .mainnav .menu-primary,
  body:not(.page-home) .mainnav .nav-cta { display: none !important; }
  body:not(.page-home) .mainnav .brand { display: inline-flex !important; align-items: center; gap: 0.6rem; text-decoration: none; }
  body:not(.page-home) .mainnav .brand-logo { height: 30px !important; }
  body:not(.page-home) .mainnav .brand .tag { display: none !important; }
  body:not(.page-home) .mainnav .brand::after {
    content: "← Accueil"; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(255,255,255,0.75); font-family: inherit; font-weight: 500;
  }
  /* Version anglaise : le libellé est du contenu généré en CSS, donc il ne peut
     pas passer par {{ ui.* }} — on le surcharge sur l'attribut lang de <html>
     (2026-08-29). Rattrapé par une capture mobile, invisible au scan du HTML. */
  html[lang="en"] body:not(.page-home) .mainnav .brand::after { content: "← Home"; }
  body:not(.page-home) .breadcrumb-bar, body:not(.page-home) .breadcrumb { display: none !important; }
  body.nav-locked { overflow: auto !important; }

  /* ── Hero : plus de 100vh, le titre arrive tout de suite ── */
  body:not(.page-home) .hero { min-height: 0 !important; height: auto !important; padding: 2.4rem 1.2rem 2.6rem !important; }
  body:not(.page-home) .hero-content { padding: 0 !important; max-width: none !important; }
  body:not(.page-home) .hero h1 { font-size: clamp(2rem, 9vw, 2.6rem) !important; line-height: 1.08 !important; margin-bottom: 1rem !important; }
  body:not(.page-home) .hero p { font-size: 1rem !important; line-height: 1.55 !important; }

  body:not(.page-home) .scroll-cue, body:not(.page-home) .scroll-indicator, body:not(.page-home) .hero-scroll { display: none !important; }

  /* ── Sections : moins de vide, contenu pleine largeur ── */
  body:not(.page-home) section { padding-top: 2.6rem !important; padding-bottom: 2.6rem !important; padding-left: 1.2rem !important; padding-right: 1.2rem !important; }
  body:not(.page-home) .section-head { margin-bottom: 1.6rem !important; max-width: none !important; }
  body:not(.page-home) .section-head .eyebrow { margin-bottom: 0.8rem !important; }
  body:not(.page-home) .section-head h2 { margin-bottom: 0.8rem !important; }
  body:not(.page-home) .section-head p { font-size: 0.98rem !important; }
  .reassurance-band { padding: 1.4rem 1.2rem !important; }
  .reassurance-band .pill, .reassurance-band span { font-size: 0.85rem !important; }
  body:not(.page-home) .final-cta { padding: 3.5rem 1.2rem !important; }
  body:not(.page-home) .final-cta h2 { font-size: clamp(2rem, 9vw, 2.6rem) !important; }
  body:not(.page-home) .final-cta p { font-size: 1rem !important; margin-bottom: 1.6rem !important; }

  /* ── Catalogue : cartes pleine largeur, texte qui respire ── */
  .catalog-grid { flex-direction: column !important; gap: 0.8rem !important; align-items: stretch !important; }
  .catalog-item { flex: none !important; width: 100% !important; max-width: none !important; padding: 1.2rem 1.2rem 1.3rem !important; }
  .catalog-item h3 { font-size: 1.25rem !important; margin-bottom: 0.5rem !important; }
  .catalog-item p { font-size: 0.97rem !important; line-height: 1.55 !important; }
  .catalog-item .icon { display: none !important; }

  /* ── Étapes : numéro en ligne, plus de cercle géant ── */
  .process-track::before { display: none !important; }
  .process-step { display: block !important; margin: 0 0 1.4rem !important; padding-left: 0 !important; }
  .step-num {
    display: inline !important; width: auto !important; height: auto !important; border: 0 !important; border-radius: 0 !important;
    background: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 0.5rem 0 0 !important;
    font-size: 1.05rem !important; vertical-align: baseline;
  }
  .step-content { display: inline !important; }
  .step-content h3 { display: inline !important; font-size: 1.15rem !important; margin: 0 !important; }
  .step-content p { display: block !important; margin: 0.35rem 0 0 !important; font-size: 0.97rem !important; line-height: 1.55 !important; }

  /* ── Réalisation phare : stats en liste, rien ne déborde ── */
  .case-card { display: block !important; padding: 1.2rem !important; border-radius: 16px !important; box-shadow: none !important; max-width: 100% !important; }
  .case-card h3 { font-size: 1.4rem !important; }
  .case-card p { font-size: 0.97rem !important; line-height: 1.55 !important; }
  .case-stats { display: block !important; margin: 1rem 0 !important; }
  .case-stat {
    display: flex !important; align-items: baseline !important; gap: 0.5rem !important; padding: 0.4rem 0 !important;
    background: none !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; border-radius: 0 !important; text-align: left !important;
  }
  .case-stat::before { content: "•"; color: var(--service-color, #fbbf24); flex: none; }
  .case-stat .num { font-size: 1.05rem !important; display: inline !important; margin: 0 !important; }
  .case-stat .label-stat { font-size: 0.8rem !important; letter-spacing: 0.04em !important; text-transform: none !important; display: inline !important; margin: 0 !important; }
  .case-photo { width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 16 / 10 !important; margin: 1.2rem 0 0 !important; border-radius: 12px !important; transform: none !important; }
  .case-photo img, .case-photo picture, .case-photo iframe { width: 100% !important; height: 100% !important; object-fit: cover; }

  /* ── Bandes vidéo : une colonne ── */
  .video-band .video-grid, .video-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
}

/* Contact (et toute page avec .trust-band) : la ligne de clients défile au lieu de déborder — 28/08 */
@media (max-width: 700px) {
  .trust-band { overflow: hidden !important; padding: 2rem 0 2.2rem !important; }
  .trust-band .trust-logos { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 2.2rem !important; width: max-content !important; max-width: none !important; margin: 0 !important; animation: trust-scroll 45s linear infinite; }
  .trust-band .trust-logo { font-size: 0.95rem !important; }
}
