/* ==========================================
   GLM - GOURSAHO LEGAL MANAGEMENT
   Styles Responsive - Mobile First
   ========================================== */

/* ==========================================
   TABLETTE (768px et plus)
   ========================================== */

@media (min-width: 768px) {
  /* LAYOUT */
  .section {
    padding-top: var(--section-padding-tablet);
    padding-bottom: var(--section-padding-tablet);
  }

  .container {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
  }

  /* TYPOGRAPHIE */
  h1 {
    margin-bottom: var(--space-2xl);
  }

  h2 {
    margin-bottom: var(--space-xl);
  }

  /* GRIDS */
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* HERO */
  .hero {
    min-height: 600px;
  }

  .hero-carousel {
    height: 600px;
  }

  .hero-content {
    padding: var(--space-3xl) var(--space-2xl);
  }

  /* PAGE HERO */
  .page-hero {
    padding: var(--space-5xl) 0 var(--space-4xl);
  }

  /* CARDS */
  .card {
    padding: var(--space-2xl) var(--space-xl);
  }

  /* FOOTER */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* STATS */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================
   PETIT ORDINATEUR (1024px et plus)
   ========================================== */

@media (min-width: 1024px) {
  /* LAYOUT */
  .section {
    padding-top: var(--section-padding-desktop);
    padding-bottom: var(--section-padding-desktop);
  }

  /* HEADER */
  .header-inner {
    height: var(--header-height);
  }

  .logo img {
    height: 55px;
  }

  /* NAVIGATION */
  .nav {
    display: flex;
  }

  .mobile-menu-btn {
    display: none;
  }

  .mobile-menu {
    display: none;
  }

  /* HERO */
  .hero {
    min-height: 700px;
    margin-top: var(--header-height);
  }

  .hero-carousel {
    height: 700px;
  }

  .page-hero {
    margin-top: var(--header-height);
  }

  /* GRIDS */
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* FOOTER */
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* STATS */
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* TWO COLUMN LAYOUTS */
  .two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
  }

  .two-column-reverse {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
  }

  .two-column-reverse > :first-child {
    order: 2;
  }

  .two-column-reverse > :last-child {
    order: 1;
  }

  /* 60/40 SPLIT */
  .col-60-40 {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: var(--space-3xl);
  }

  .col-40-60 {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: var(--space-3xl);
  }
}

/* ==========================================
   DESKTOP (1280px et plus)
   ========================================== */

@media (min-width: 1280px) {
  /* CONTAINER */
  .container {
    padding-left: var(--space-2xl);
    padding-right: var(--space-2xl);
  }

  /* HERO */
  .hero {
    min-height: 750px;
  }

  .hero-carousel {
    height: 750px;
  }

  .hero-title {
    font-size: clamp(3rem, 4vw, 4rem);
  }

  /* SECTION HEADER */
  .section-header {
    margin-bottom: var(--space-4xl);
  }

  /* CARDS */
  .card {
    padding: var(--space-3xl);
  }
}

/* ==========================================
   GRAND DESKTOP (1440px et plus)
   ========================================== */

@media (min-width: 1440px) {
  /* HERO */
  .hero {
    min-height: 800px;
  }

  /* STATS */
  .stat-item {
    padding: var(--space-2xl);
  }
}

/* ==========================================
   UTILITAIRES RESPONSIVE
   ========================================== */

/* Masquer sur mobile */
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Masquer sur tablette */
@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet {
    display: none !important;
  }
}

/* Masquer sur desktop */
@media (min-width: 1024px) {
  .hide-desktop {
    display: none !important;
  }
}

/* Afficher uniquement sur mobile */
.show-mobile {
  display: block;
}

@media (min-width: 768px) {
  .show-mobile {
    display: none !important;
  }
}

/* Afficher uniquement sur tablette */
.show-tablet {
  display: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .show-tablet {
    display: block !important;
  }
}

/* Afficher uniquement sur desktop */
.show-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .show-desktop {
    display: block !important;
  }
}

/* ==========================================
   ALIGNEMENT TEXTE RESPONSIVE
   ========================================== */

@media (max-width: 767px) {
  .text-center-mobile {
    text-align: center !important;
  }

  .text-left-mobile {
    text-align: left !important;
  }
}

@media (min-width: 1024px) {
  .text-left-desktop {
    text-align: left !important;
  }

  .text-center-desktop {
    text-align: center !important;
  }
}

/* ==========================================
   ESPACEMENTS RESPONSIVE
   ========================================== */

@media (max-width: 767px) {
  .gap-mobile-sm {
    gap: var(--space-sm) !important;
  }

  .gap-mobile-md {
    gap: var(--space-md) !important;
  }

  .gap-mobile-lg {
    gap: var(--space-lg) !important;
  }
}

/* ==========================================
   IMAGES RESPONSIVE
   ========================================== */

.img-responsive {
  width: 100%;
  height: auto;
  display: block;
}

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ==========================================
   VIDÉO RESPONSIVE
   ========================================== */

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* Ratio 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
}

.video-wrapper iframe,
.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================
   PRINT STYLES
   ========================================== */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

  .header,
  .footer,
  .mobile-menu-btn,
  .btn {
    display: none !important;
  }
}