/* ============================================
   MOBILE MENU FIX - Opified Vitrine
   Correction du responsive et du menu mobile
   ============================================ */

/* ===========================================
   0. CORRECTION DOUBLE HEADER - CACHER LE HEADER DU LAYOUT
   =========================================== */

/*
  PROBLÈME IDENTIFIÉ :
  - Le PublicLayout (sk) a un header sticky avec bg-midnight/90
  - La page LANDING a son propre header fixed avec bg-white/80
  - Les deux s'affichent en même temps = double header

  SOLUTION :
  - Cacher le header du PublicLayout (le premier header avec bg-midnight)
  - Garder le header de la page LANDING (header avec bg-white qui est le design voulu)
*/

/* Cacher le header du PublicLayout (fond sombre) */
header[class*="sticky"][class*="top-0"][class*="bg-midnight"],
header[class*="sticky"][class*="border-interface"],
.min-h-screen.flex-col > header[class*="sticky"] {
  display: none !important;
}

/* S'assurer que le header de la page LANDING (fond clair) est visible et fonctionnel */
nav[class*="fixed"][class*="top-0"][class*="bg-white"],
[class*="fixed"][class*="top-0"][class*="bg-white\\/80"],
[class*="fixed"][class*="w-full"][class*="top-0"][class*="z-50"]:not(header) {
  display: flex !important;
  position: fixed !important;
  top: 0 !important;
  z-index: 9999 !important;
}


/* Ajuster le contenu principal pour tenir compte du header fixe (80px) */
main.flex-grow,
.flex-grow {
  padding-top: 0 !important;
}

/* Le premier élément après le header doit avoir un margin-top */
.min-h-screen > div:first-child,
[class*="bg-\\[\\#FBFBFA\\]"],
[class*="bg-\\[\\#022c22\\]"] {
  padding-top: 80px !important;
}

/* ===========================================
   1. CORRECTION DU BOUTON HAMBURGER
   =========================================== */

/* Cibler le bouton hamburger (lg:hidden ou md:hidden avec icône) */
/* La nav LANDING utilise lg:hidden (1024px), le layout utilise md:hidden (768px) */
nav button[class*="lg:hidden"],
header button[class*="lg:hidden"],
header button[class*="md:hidden"],
.sticky button[class*="md:hidden"],
[class*="sticky"] button[class*="md:hidden"],
[class*="fixed"] button[class*="lg:hidden"] {
  /* Augmenter la zone de tap pour mobile */
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 12px !important;

  /* S'assurer qu'il est cliquable */
  position: relative !important;
  z-index: 100 !important;

  /* Améliorer la réponse au touch */
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;

  /* Feedback visuel */
  cursor: pointer !important;

  /* Transition pour le feedback */
  transition: all 0.2s ease !important;
}

/* Effet au tap/hover */
header button.md\\:hidden:active,
.sticky button.md\\:hidden:active,
[class*="sticky"] button[class*="md:hidden"]:active {
  background-color: rgba(152, 255, 204, 0.1) !important;
  transform: scale(0.95) !important;
}

/* S'assurer que l'icône SVG ne bloque pas les clics */
header button.md\\:hidden svg,
.sticky button.md\\:hidden svg,
[class*="sticky"] button[class*="md:hidden"] svg {
  pointer-events: none !important;
  width: 24px !important;
  height: 24px !important;
}

/* ===========================================
   2. CORRECTION DU MENU MOBILE (dropdown)
   =========================================== */

/* Menu mobile quand il est ouvert */
.md\\:hidden.bg-carbon,
[class*="md:hidden"][class*="bg-carbon"] {
  /* Positionnement correct */
  position: relative !important;
  z-index: 99 !important;

  /* Animation d'ouverture */
  animation: slideDown 0.3s ease forwards !important;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Boutons du menu mobile */
.md\\:hidden.bg-carbon button,
[class*="md:hidden"][class*="bg-carbon"] button {
  /* Zone de tap appropriée */
  min-height: 48px !important;
  padding: 12px 16px !important;

  /* Améliorer la lisibilité */
  font-size: 16px !important;

  /* Touch-friendly */
  touch-action: manipulation !important;
}

/* ===========================================
   3. CORRECTIONS RESPONSIVE HEADER
   =========================================== */

/* Header sur mobile */
@media (max-width: 767px) {
  /* Header sticky */
  header,
  .sticky,
  [class*="sticky"][class*="top-0"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Container dans le header */
  header .container,
  header > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Logo - ne pas le réduire trop */
  header img[alt="Opified"],
  .sticky img[alt="Opified"] {
    height: 32px !important;
    width: auto !important;
  }

  /* Texte du logo */
  header .font-heading,
  header span[class*="font-heading"] {
    font-size: 18px !important;
  }
}

/* ===========================================
   4. CORRECTIONS RESPONSIVE GÉNÉRALES
   =========================================== */

@media (max-width: 767px) {
  /* S'assurer que le contenu principal ne déborde pas */
  main,
  .min-h-screen {
    overflow-x: hidden !important;
  }

  /* Titres responsifs */
  h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }

  h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }

  /* Padding général */
  .px-10,
  [class*="px-10"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .p-10,
  [class*="p-10"] {
    padding: 16px !important;
  }
}

/* ===========================================
   5. OPI CLAIM HIGHLIGHTS
   =========================================== */

.hl-ok {
  background: rgba(0, 200, 0, 0.15);
  border-bottom: 1px solid rgba(0, 200, 0, 0.45);
}

.hl-bad {
  background: rgba(255, 0, 0, 0.12);
  border-bottom: 1px solid rgba(255, 0, 0, 0.35);
}

.hl-warn {
  background: rgba(255, 165, 0, 0.18);
  border-bottom: 1px solid rgba(255, 165, 0, 0.45);
}

/* Tooltip hover pour segments avec conditions */
.hl-has-tooltip {
  position: relative;
  cursor: help;
}

.hl-has-tooltip::after {
  content: attr(data-condition);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1E293B;
  color: #F3F6F8;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  max-width: 320px;
  width: max-content;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.hl-has-tooltip::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1E293B;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 100;
}

.hl-has-tooltip:hover::after,
.hl-has-tooltip:hover::before {
  opacity: 1;
}

/* ===========================================
   5. TABLETTES (768px - 1023px)
   =========================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  /* Ajustements pour tablettes */
  .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Grilles 2 colonnes max sur tablette */
  .lg\\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ===========================================
   6. AMÉLIORATIONS DESKTOP
   =========================================== */

@media (min-width: 1024px) {
  /* Navigation desktop - s'assurer qu'elle est bien visible */
  nav.hidden.md\\:flex,
  [class*="hidden"][class*="md:flex"] {
    display: flex !important;
  }

  /* Bouton hamburger caché sur desktop */
  header button.md\\:hidden,
  .sticky button.md\\:hidden {
    display: none !important;
  }
}

/* ===========================================
   7. ACCESSIBILITÉ
   =========================================== */

/* Focus visible pour accessibilité */
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent-primary, #98FFCC) !important;
  outline-offset: 2px !important;
}

/* Réduire les animations si l'utilisateur préfère */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===========================================
   8. FIX SPÉCIFIQUE POUR iOS SAFARI
   =========================================== */

/* Correction du height: 100vh sur iOS */
@supports (-webkit-touch-callout: none) {
  .min-h-screen {
    min-height: -webkit-fill-available !important;
  }
}

/* Prévenir le zoom automatique sur les inputs iOS */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ===========================================
   9. CORRECTION DES SECTIONS ANIMÉES
   =========================================== */

/*
  PROBLÈME: La section "Concrètement, ça donne quoi ?" a un sticky top-0
  qui la colle au top de la page, mais le header fait 80px.
  Le titre est donc caché derrière le header.
*/

/* Cibler TOUTES les sections sticky qui ont top-0 */
div[class*="sticky"][class*="top-0"],
section[class*="sticky"][class*="top-0"],
[class*="sticky"][class*="top-0"][class*="h-screen"],
[class*="sticky"][class*="top-0"][class*="flex"][class*="flex-col"] {
  /* Décaler pour tenir compte du header (80px) */
  top: 80px !important;
}

/* Les sections avec h-screen doivent réduire leur hauteur */
[class*="sticky"][class*="top-0"][class*="h-screen"] {
  height: calc(100vh - 80px) !important;
  min-height: calc(100vh - 80px) !important;
}

/* Ajouter du padding en haut pour les contenus */
[class*="sticky"][class*="top-0"] > div:first-child {
  padding-top: 24px !important;
}

/* Spécifiquement pour la section avec le titre "Concrètement" */
[class*="sticky"][class*="top-0"][class*="justify-center"] {
  padding-top: 24px !important;
}

/* Ajustement ciblé pour la section sticky "Concrètement, ça donne quoi ?" */
/* Évite la coupe du titre dans la section "Concrètement, ça donne quoi ?" */
section[class*="h-[500vh]"] > div[class*="sticky"][class*="top-0"],
section.h-\\[500vh\\] > div.sticky.top-0 {
  overflow: visible !important;
}


section[class*="h-[500vh]"] h2,
section.h-\\[500vh\\] h2 {
  display: inline-block !important;
  line-height: 1.2 !important;
  padding-top: 0.2em !important;
  margin-top: 4px !important;
  overflow: visible !important;
}

/* Fallback CSS: centrer le bloc et masquer l'animation dans la section "Concrètement" */
section[class*="h-[500vh]"] .module-anim-container,
section.h-\\[500vh\\] .module-anim-container {
  display: none !important;
}

section[class*="h-[500vh]"] div[class*="min-h-"][class*="flex"][class*="gap-"],
section.h-\\[500vh\\] div[class*="min-h-"][class*="flex"][class*="gap-"] {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 12px !important;
}

section[class*="h-[500vh]"] div[class*="min-h-"][class*="flex"][class*="gap-"] p,
section.h-\\[500vh\\] div[class*="min-h-"][class*="flex"][class*="gap-"] p {
  max-width: 720px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Titres h2 dans les sections sticky - ajouter de l'espace */
[class*="sticky"][class*="top-0"] h2 {
  margin-top: 40px !important;
  padding-top: 0 !important;
}

/* Sur mobile et tablette */
@media (max-width: 1023px) {
  div[class*="sticky"][class*="top-0"],
  section[class*="sticky"][class*="top-0"],
  [class*="sticky"][class*="top-0"][class*="h-screen"] {
    top: 80px !important;
    height: calc(100vh - 80px) !important;
    padding: 16px !important;
    padding-top: 24px !important;
  }

  /* Textes plus petits sur mobile */
  [class*="sticky"][class*="top-0"] h2 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
    margin-top: 32px !important;
  }

  [class*="sticky"][class*="top-0"] p[class*="text-xl"],
  [class*="sticky"][class*="top-0"] p[class*="text-2xl"] {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  /* Cartes de comparaison en colonne */
  [class*="sticky"][class*="top-0"] [class*="grid"][class*="lg:grid-cols-2"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ===========================================
   10. CORRECTION SECTION RÉFÉRENCE/JUSTIFICATION
   =========================================== */

/* Section avec le texte "Chaque proposition est associée..." */
[class*="flex"][class*="flex-col"][class*="justify-center"] p[class*="text-emerald"],
[class*="flex"][class*="flex-col"][class*="justify-center"] p[class*="text-2xl"] {
  margin-top: 20px !important;
  padding-top: 10px !important;
}

/* S'assurer que le contenu principal a assez d'espace */
main > div:first-child,
.flex-grow > div:first-child {
  padding-top: 20px !important;
}

/* ===========================================
   11. AMÉLIORATIONS GÉNÉRALES DU SCROLL
   =========================================== */

/* Smooth scroll mais respecter les préférences */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px; /* Tenir compte du header */
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ===========================================
   12. FIX POUR LES CARTES RISQUE/CONFORME
   =========================================== */

/* S'assurer que les cartes sont visibles entièrement */
[class*="rounded-3xl"][class*="shadow"],
[class*="rounded-2xl"][class*="shadow"] {
  max-width: 100% !important;
  overflow: visible !important;
}

@media (max-width: 767px) {
  /* Cartes en colonne sur mobile */
  [class*="grid"][class*="lg:grid-cols-2"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Réduire la taille des cartes sur mobile */
  [class*="rounded-3xl"][class*="p-8"],
  [class*="rounded-2xl"][class*="p-8"] {
    padding: 20px !important;
  }
}