/* ==========================================================================
   Bella Tchag - couche PWA & confort mobile
   Chargee APRES style.css : ne remplace rien, corrige et complete.
   Ecrite en mobile first (uniquement des min-width).
   ========================================================================== */

:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --nav-h: 70px;
}

/* --------------------------------------------------------------------------
   1. Encoche / Dynamic Island (PWA installee, status bar transparente)
   -------------------------------------------------------------------------- */

/* Bandeau opaque derriere la status bar, sinon le contenu defile dessous. */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--sat);
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 1001;
  pointer-events: none;
}

/* La navbar est en position fixed : elle ignore le padding du body,
   il faut donc lui donner l'encoche explicitement. */
.navbar {
  top: var(--sat);
  padding-left: var(--sal);
  padding-right: var(--sar);
}

/* Le menu mobile s'ouvre sous la navbar, encoche comprise.
   Au-dela de 768 px le menu redevient une barre horizontale : ces regles
   doivent alors etre relachees, sinon la barre prend toute la hauteur. */
.nav-menu {
  top: calc(var(--nav-h) + var(--sat));
  height: calc(100vh - var(--nav-h) - var(--sat));
  height: calc(100dvh - var(--nav-h) - var(--sat));
  padding-bottom: calc(2rem + var(--sab));
  overflow-y: auto;
}

@media (min-width: 769px) {
  .nav-menu {
    top: auto;
    height: auto;
    padding-bottom: 0;
    overflow-y: visible;
  }
}

/* Le hero compense deja la navbar (80px) : on y ajoute l'encoche. */
.hero {
  padding-top: calc(80px + var(--sat));
}

/* Bas d'ecran : barre gestuelle iOS / Android. */
footer,
.footer {
  padding-bottom: calc(2rem + var(--sab));
}

/* --------------------------------------------------------------------------
   2. Confort tactile
   -------------------------------------------------------------------------- */

/* 16px minimum : en dessous, iOS zoome tout seul a la saisie. */
input,
select,
textarea {
  font-size: 16px;
}

/* Cibles tactiles : 44x44 minimum. */
.nav-link,
.nav-toggle,
.btn,
.btn-primary,
.btn-secondary,
.btn-contact,
.lang-switcher a,
button {
  min-height: 44px;
}

.nav-toggle {
  min-width: 44px;
  align-items: center;
  justify-content: center;
}

/* Pas de surlignage bleu au tap sur mobile. */
a,
button {
  -webkit-tap-highlight-color: transparent;
}

/* Le texte ne touche jamais le bord de l'ecran. */
.container {
  padding-left: max(20px, var(--sal));
  padding-right: max(20px, var(--sar));
}

@media (min-width: 640px) {
  .container {
    padding-left: max(24px, var(--sal));
    padding-right: max(24px, var(--sar));
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: max(32px, var(--sal));
    padding-right: max(32px, var(--sar));
  }
}

/* Aucun debordement horizontal a 375px. */
img,
video,
iframe,
table {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   3. Banniere de mise a jour (js/pwa.js)
   -------------------------------------------------------------------------- */

.pwa-update {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: calc(1rem + var(--sab));
  z-index: 2000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--color-white, #fff);
  color: var(--color-gray-dark, #333);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  animation: pwa-rise 0.3s ease both;
}

.pwa-update-text {
  flex: 1 1 100%;
  font-size: 0.95rem;
  font-weight: 500;
}

.pwa-update button {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.pwa-update-go {
  background: var(--color-primary, #c0392b);
  color: #fff;
}

.pwa-update-go:hover {
  background: var(--color-primary-dark, #a93226);
}

.pwa-update-go:focus-visible,
.pwa-update-later:focus-visible {
  outline: 2px solid var(--color-primary, #c0392b);
  outline-offset: 2px;
}

.pwa-update-later {
  background: #eee;
  color: #444;
}

.pwa-update-later:hover {
  background: #e0e0e0;
}

@keyframes pwa-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (min-width: 640px) {
  .pwa-update {
    left: auto;
    right: 1.5rem;
    max-width: 420px;
  }
  .pwa-update-text { flex: 1 1 100%; }
  .pwa-update button { flex: 0 0 auto; }
}

/* --------------------------------------------------------------------------
   4. Version affichee dans le pied de page
   -------------------------------------------------------------------------- */

.site-version {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .pwa-update { animation: none; }
}

/* --------------------------------------------------------------------------
   5. Barre de navigation : tout doit tenir dans 375 px
   Sans cela, le bouton menu sort de l'ecran (masque par overflow-x: hidden)
   et la navigation devient inaccessible sur telephone.
   -------------------------------------------------------------------------- */

.nav-wrapper {
  gap: 0.5rem;
}

.logo h2 {
  font-size: 1.25rem;
  letter-spacing: 1px;
}

.logo-subtitle {
  font-size: 0.6rem;
  letter-spacing: 0.5px;
}

.lang-switcher {
  padding-left: 0.5rem;
  gap: 0.25rem;
}

.lang-btn {
  padding: 0.4rem 0.5rem;
}

/* Sur mobile le drapeau suffit : le code FR/EN prend une place inutile. */
.lang-btn .lang-code {
  display: none;
}

@media (min-width: 480px) {
  .logo h2 { font-size: 1.5rem; }
  .lang-btn .lang-code { display: inline; }
}

@media (min-width: 640px) {
  .logo h2 { font-size: 1.8rem; letter-spacing: 2px; }
  .logo-subtitle { font-size: 0.7rem; letter-spacing: 1px; }
  .lang-switcher { padding-left: 2rem; gap: 0.5rem; }
  .lang-btn { padding: 0.5rem 0.8rem; }
}

/* --------------------------------------------------------------------------
   6. Hero : l'invitation a faire defiler chevauchait les boutons
   -------------------------------------------------------------------------- */

.hero-scroll {
  display: none;
}

@media (min-width: 768px) {
  .hero-scroll { display: block; }
}

/* --------------------------------------------------------------------------
   7. Grilles a colonnes fixes : une seule colonne sur telephone
   Ces grilles restaient a 2 ou 3 colonnes sous 375 px et depassaient du
   cadre. Le debordement etait invisible (body a overflow-x: hidden) mais
   coupait reellement une partie des images et du texte.
   -------------------------------------------------------------------------- */

.format-block,
.spectacle-content,
.franchise-content,
.contact-content,
.form-row {
  grid-template-columns: 1fr;
  gap: 2rem;
}

.spectacle-features {
  grid-template-columns: 1fr;
}

/* Le sens inverse (rtl) sert a alterner texte/image sur grand ecran :
   en une seule colonne il ne fait qu'inverser l'ordre de lecture. */
.format-block.reverse {
  direction: ltr;
}

/* L'image secondaire debordait de 30 px hors du cadre. */
.format-image-secondary {
  position: static;
  width: 100%;
  margin-top: 1rem;
  right: auto;
  bottom: auto;
}

@media (min-width: 768px) {
  .format-block,
  .spectacle-content,
  .form-row { grid-template-columns: 1fr 1fr; gap: 3rem; }

  .franchise-content { grid-template-columns: 1.5fr 1fr; }
  .contact-content   { grid-template-columns: 1fr 2fr; }
  .spectacle-features { grid-template-columns: repeat(3, 1fr); }
  .format-block.reverse { direction: rtl; }

  .format-image-secondary {
    position: absolute;
    width: 50%;
    right: -30px;
    bottom: -30px;
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   8. Animations laterales : plus de decalage hors cadre sur telephone
   AOS place les blocs a +/-100 px avant de les faire apparaitre. Sur un
   ecran de 375 px cela cree une zone vide a droite ; on remplace la
   translation laterale par une translation verticale, sans toucher au
   rendu sur grand ecran.
   -------------------------------------------------------------------------- */

html {
  overflow-x: hidden;
}

html [data-aos="fade-left"]:not(.aos-animate),
html [data-aos="fade-right"]:not(.aos-animate) {
  transform: translate3d(0, 30px, 0);
}

@media (min-width: 768px) {
  html [data-aos="fade-left"]:not(.aos-animate)  { transform: translate3d(100px, 0, 0); }
  html [data-aos="fade-right"]:not(.aos-animate) { transform: translate3d(-100px, 0, 0); }
}

/* --------------------------------------------------------------------------
   9. Menu mobile : cibles tactiles et lisibilite
   -------------------------------------------------------------------------- */

/* Les liens etaient hauts de 34 px : sous le minimum tactile de 44 px.
   min-height seul ne suffit pas sur un element inline, d'ou le display flex. */
.nav-menu .nav-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
}

@media (min-width: 769px) {
  .nav-menu .nav-link { width: auto; }
}

/* Sur telephone le titre du hero se superpose a l'enseigne photographiee
   en arriere-plan : on densifie le voile pour garder le texte lisible. */
.hero-overlay {
  background: linear-gradient(135deg,
      rgba(44, 32, 19, 0.92) 0%,
      rgba(192, 57, 43, 0.85) 100%);
}

@media (min-width: 768px) {
  .hero-overlay {
    background: linear-gradient(135deg,
        rgba(44, 32, 19, 0.85) 0%,
        rgba(192, 57, 43, 0.7) 100%);
  }
}

/* --------------------------------------------------------------------------
   10. Le nom de la marque reste sur une seule ligne
   Le gap ajoute dans la barre comprimait le bloc logo, coupant
   "BELLA TCHAG" en deux lignes sur grand ecran.
   -------------------------------------------------------------------------- */

.navbar .logo {
  flex-shrink: 0;
}

.navbar .logo h2 {
  white-space: nowrap;
}

/* Au-dela du mobile on rend au bloc de navigation son espacement d'origine :
   le gap ajoute pour le telephone faisait passer le menu sur deux lignes. */
@media (min-width: 769px) {
  .nav-wrapper { gap: 0; }
  .nav-menu { flex-wrap: nowrap; }
}