/* ============================================================
   ALKEBULAN ACADEMY — Responsive CSS
   Injecté via <link> dans TOUTES les pages
   Utilise !important car les styles inline Tailwind ont priorité
   ============================================================ */

/* --- IMAGES --- */
img {
  max-width: 100% !important;
  height: auto !important;
}

/* --- GRILLES --- */
@media (max-width: 767px) {
  [class*="grid-cols-"] {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  [class*="lg:grid-cols-"][class*="md:grid-cols-"] {
    /* Laisse Tailwind gérer si md: est présent */
  }
  [class*="grid-cols-"]:not([class*="md:"]):not([class*="sm:"]):not([class*="lg:"]) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* --- NAVIGATION (Header) --- */
@media (max-width: 640px) {
  /* Logo du header plus petit */
  header img, 
  [class*="header"] img[class*="h-"],
  img[alt="Alkebulan Academy"],
  img[src*="logo"] {
    height: 32px !important;
    width: auto !important;
  }

  /* Le MENU — caché sur mobile, remplacé par hamburger */
  .menu-desktop, 
  [class*="header"] nav,
  header nav {
    display: none !important;
  }

  /* Bouton hamburger visible */
  .menu-mobile-btn {
    display: flex !important;
  }

  /* Réduire le padding du header */
  header, [class*="header"] {
    padding: 8px 12px !important;
    height: auto !important;
  }

  /* La section héro — empiler les colonnes */
  [class*="flex"][class*="flex-row"] {
    flex-direction: column !important;
  }
}

@media (min-width: 641px) {
  .menu-mobile-btn {
    display: none !important;
  }
  .menu-mobile-panel {
    display: none !important;
  }
}

/* --- HERO SECTION --- */
@media (max-width: 640px) {
  /* Texte héro plus petit */
  h1, [class*="text-5xl"], [class*="text-4xl"], [class*="text-3xl"] {
    font-size: clamp(1.5rem, 8vw, 2.5rem) !important;
    line-height: 1.2 !important;
  }

  h2, [class*="text-2xl"] {
    font-size: clamp(1.2rem, 6vw, 1.8rem) !important;
  }

  /* Périphérie — remonter le texte héro */
  .hero-text, [class*="hero"] p {
    margin-top: 0 !important;
  }
}

/* --- CARTES (cours, features, équipe) --- */
@media (max-width: 640px) {
  /* Cartes en pleine largeur */
  [class*="rounded-2xl"], [class*="rounded-xl"], [class*="rounded-lg"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Padding réduit sur mobile */
  [class*="p-8"], [class*="p-6"], [class*="p-10"] {
    padding: 16px !important;
  }

  /* Gap vertical pour les colonnes empilées */
  [class*="gap-"] {
    gap: 12px !important;
  }
}

/* --- MODALE (Lecteur) --- */
@media (max-width: 640px) {
  /* Le conteneur modale prend toute la largeur */
  [class*="modal"] [class*="max-w-"],
  [id*="modal"] [class*="max-w-"],
  [class*="fixed"][class*="inset-0"] > div > div {
    max-width: calc(100vw - 16px) !important;
    width: calc(100vw - 16px) !important;
    margin: 8px !important;
    max-height: 98vh !important;
    overflow-y: auto !important;
  }

  /* Les 2 colonnes (texte + audio) deviennent 1 colonne */
  [class*="modal"] [class*="grid-cols-2"],
  .lecteur-grid-2cols {
    grid-template-columns: 1fr !important;
  }

  /* Hauteur adaptative pour les colonnes */
  [class*="modal"] [class*="h-["] {
    height: auto !important;
    min-height: auto !important;
  }

  /* Barre audio plus compacte */
  audio, [class*="audio"] {
    width: 100% !important;
  }
}

/* --- TABLEAUX (admin, classement) --- */
@media (max-width: 640px) {
  table, thead, tbody, th, td, tr {
    display: block !important;
  }
  thead tr {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
  }
  td {
    padding-left: 50% !important;
    position: relative !important;
    text-align: right !important;
    border-bottom: 1px solid rgba(212,168,67,0.2) !important;
  }
  td::before {
    content: attr(data-label);
    position: absolute !important;
    left: 12px !important;
    font-weight: 600 !important;
    color: #7B2D8E !important;
  }
}

/* --- FORMULAIRES (connexion, inscription) --- */
@media (max-width: 640px) {
  input, select, textarea, button {
    font-size: 16px !important; /* Évite le zoom auto sur iOS */
    min-height: 44px !important; /* Touch friendly */
  }
}

/* --- BOUTONS --- */
button, a, [class*="btn"], [class*="button"] {
  min-height: 44px !important;
}

/* --- ACCUEIL / HERO — image de fond sur mobile --- */
@media (max-width: 640px) {
  [style*="background-image"] {
    background-size: cover !important;
    background-position: center !important;
  }
}

/* --- ADMIN DASHBOARD --- */
@media (max-width: 640px) {
  /* KPI cards : 1 par ligne */
  [class*="admin-kpi"], [class*="kpi-card"] {
    width: 100% !important;
  }

  /* Sidebar caché */
  [class*="sidebar"], [class*="side-bar"] {
    display: none !important;
  }
}

/* --- PHOTOS PHARAONS --- */
@media (max-width: 640px) {
  /* Grille photos : 1 colonne */
  [class*="photos-grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* --- FOOTER --- */
@media (max-width: 640px) {
  footer [class*="grid-cols-"] {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  footer [class*="justify-"] {
    justify-content: center !important;
  }

  footer .flex-col {
    align-items: center !important;
  }
}

/* --- LECTEUR AUDIO MOBILE --- */
@media (max-width: 640px) {
  /* Arbre réduit */
  .lecteur-arbre {
    max-height: 200px !important;
    overflow-y: auto !important;
  }

  /* Barre de recherche */
  .lecteur-search {
    width: 100% !important;
  }
}

/* --- DROPDOWN MENU MOBILE --- */
@media (max-width: 640px) {
  [class*="dropdown"] {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
}

/* --- SÉLECTEUR LANGUE (FR/EN) --- */
@media (max-width: 640px) {
  .lang-switcher {
    position: static !important;
    margin: 4px !important;
  }
}

/* --- HEADER ALKEBULAN — Responsive Mobile --- */
@media (max-width: 768px) {
  /* Badge ALKEBULAN ACADEMY — plus petit */
  header span[style*="font-size:1.6rem"] {
    font-size: 1.1rem !important;
    padding: 4px 12px !important;
  }
  header span[style*="font-size:1.6rem"] span[style*="font-size:1rem"] {
    font-size: 0.8rem !important;
  }

  /* Bouton casque central — plus petit et espacement réduit */
  button[onclick*="ouvrirLecteurMobile"][style*="left:50%"] {
    gap: 6px !important;
    padding: 8px 14px !important;
  }
  button[onclick*="ouvrirLecteurMobile"][style*="left:50%"] span.material-symbols-outlined {
    font-size: 24px !important;
  }

  /* Drapeaux FR/EN — plus petits */
  header div[style*="right:175px"] button {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }

  /* Bouton MENU — plus petit */
  button[id="alkebulanMenuBtn"],
  button[onclick="alkebulanToggleMenu()"][style*="right:16px"] {
    padding: 8px 16px !important;
    font-size: 12px !important;
    gap: 6px !important;
  }
}

@media (max-width: 500px) {
  /* Badge — encore plus petit */
  header span[style*="font-size:1.6rem"] {
    font-size: 0.85rem !important;
    padding: 3px 8px !important;
    max-width: 40vw !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  /* Cacher le ACADEMY sur très petit écran */
  header span[style*="font-size:1.6rem"] span[style*="font-size:1rem"] {
    display: none !important;
  }

  /* Drapeaux FR/EN → se déplacent dans le header à gauche du MENU */
  header div[style*="right:175px"] {
    right: 130px !important;
    gap: 3px !important;
  }
  header div[style*="right:175px"] button {
    padding: 3px 6px !important;
    font-size: 10px !important;
  }
  header div[style*="right:175px"] button span[style*="font-size:16px"] {
    font-size: 12px !important;
  }
  header div[style*="right:175px"] button span:not([style*="font-size"]) {
    display: none !important; /* Cache le texte FR/EN, garde juste le drapeau */
  }

  /* Casque → plus petit encore */
  button[onclick*="ouvrirLecteurMobile"][style*="left:50%"] {
    padding: 6px 10px !important;
    gap: 4px !important;
  }
  button[onclick*="ouvrirLecteurMobile"][style*="left:50%"] span.material-symbols-outlined {
    font-size: 20px !important;
  }

  /* Menu bouton */
  button[id="alkebulanMenuBtn"],
  button[onclick="alkebulanToggleMenu()"][style*="right:16px"] {
    padding: 6px 12px !important;
    font-size: 10px !important;
  }
  button[id="alkebulanMenuBtn"] span[id="alkebulanMenuLabel"] {
    font-size: 10px !important;
  }

  /* Dropdown menu — pleine largeur */
  #alkebulanMenuDropdown,
  div[id="alkebulanMenuDropdown"] {
    width: calc(100% - 16px) !important;
    right: 8px !important;
    top: 68px !important;
  }

  /* Padding du header réduit */
  header div[class*="pl-4"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Hauteur header réduite */
  header div[class*="h-16"] {
    height: 56px !important;
  }
}

/* --- PAGE CONNEXION — centrage vertical --- */
@media (max-width: 500px) {
  /* La carte en elle-même a déjà max-w-md + mx-auto, mais le padding peut être réduit */
  main.flex-1 .max-w-md > div[class*="rounded-2xl"] {
    padding: 24px !important;
  }
  
  /* S'assurer que les champs OTP sont bien centrés */
  #otp-container {
    gap: 8px !important;
  }
  #otp-container .otp-input {
    width: 40px !important;
    height: 50px !important;
    font-size: 1.4rem !important;
  }

  /* Centrer le bouton Valider */
  #btn-valid, #btn-continuer {
    min-width: 100% !important;
  }
}