/**
 * Responsive Design System - L'Écorce Vive
 * Typography et Spacing fluides pour un design adaptatif optimal
 */

/* ===== RESPONSIVE FOUNDATION ===== */

/* Container fluide */
.container {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
}

/* Sections avec espacement fluide */
.section {
  padding-top: var(--spacing-80);
  padding-bottom: var(--spacing-80);
}

.section--compact {
  padding-top: var(--spacing-50);
  padding-bottom: var(--spacing-50);
}

.section--large {
  padding-top: var(--spacing-120);
  padding-bottom: var(--spacing-120);
}

/* ===== TYPOGRAPHY RESPONSIVE ===== */

/* Titres avec tailles fluides */
h1, .h1,
.wallter-calculator-title {
  font-size: var(--font-size-mega);
  line-height: 1.1;
  margin-bottom: var(--spacing-30);
}

h2, .h2,
.section__title,
.story__title,
.philosophy__title,
.values__title {
  font-size: var(--font-size-huge);
  line-height: 1.2;
  margin-bottom: var(--spacing-40);
}

h3, .h3,
.philosophy__item-title,
.values__item-title {
  font-size: var(--font-size-xx-large);
  line-height: 1.3;
  margin-bottom: var(--spacing-20);
}

h4, .h4 {
  font-size: var(--font-size-x-large);
  line-height: 1.4;
  margin-bottom: var(--spacing-20);
}

h5, .h5 {
  font-size: var(--font-size-large);
  line-height: 1.4;
  margin-bottom: var(--spacing-20);
}

h6, .h6 {
  font-size: var(--font-size-medium);
  line-height: 1.5;
  margin-bottom: var(--spacing-10);
}

/* Texte avec taille fluide */
p, .text-body {
  font-size: var(--font-size-large);
  line-height: 1.6;
  margin-bottom: var(--spacing-20);
}

.text-large {
  font-size: var(--font-size-large);
  line-height: 1.5;
}

.text-small {
  font-size: var(--font-size-small);
  line-height: 1.5;
}

/* ===== GRID RESPONSIVE ===== */

/* Grid fluide générique */
.grid {
  display: grid;
  gap: var(--spacing-40);
}

.grid--2-cols {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid--3-cols {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid--4-cols {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Grid avec breakpoints spécifiques */
@media (min-width: 766px) {
  .grid--md-2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (min-width: 1024px) {
  .grid--lg-2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

/* ===== BREAKPOINTS SPECIFIQUES ===== */

/* Tablettes */
@media (max-width: 1024px) {
  .hero-cover__content {
    padding: var(--spacing-60) 0;
  }
}

/* Mobile */
@media (max-width: 766px) {
  .section.legal-hero {
    padding-top: calc(60px + var(--spacing-40));
  }

  .container {
    padding-left: var(--spacing-20);
    padding-right: var(--spacing-20);
  }

  .section {
    padding-top: var(--spacing-50);
    padding-bottom: var(--spacing-50);
  }

  /* Navigation mobile */
  .nav__menu {
    position: fixed;
    top: -100vh;
    left: 0;
    width: 100%;
    background: white;
    padding: var(--spacing-40) var(--spacing-20);
    box-shadow: var(--shadow-2);
    transition: top 0.3s ease;
    z-index: 100;
  }

  .nav__menu.active {
    top: var(--header-height);
  }

  .nav__list {
    flex-direction: column;
    /* gap: var(--spacing-10); */
    text-align: center;
  }

  /* Active link mobile */
  .nav__link.active::after {
    bottom: 7px;
    height: 1px;
  }

  /* Boutons mobile */
  .hero-cover__buttons,
  .cta__buttons {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-20);
  }

  .btn {
    width: 100%;
    max-width: 280px;
  }

  /* Grilles mobile */
  .grid--2-cols,
  .grid--3-cols,
  .grid--4-cols {
    grid-template-columns: 1fr;
    gap: var(--spacing-30);
  }


  .philosophy__grid,
  .values__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-40);
  }
}

/* Mobile petit */
@media (max-width: 480px) {
  .container {
    padding-left: var(--spacing-20);
    padding-right: var(--spacing-20);
  }

  .section {
    padding-top: var(--spacing-40);
    padding-bottom: var(--spacing-40);
  }

  /* Typographie mobile */
  h1, .h1 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }

  h2, .h2 {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  /* Calculateur mobile */
  .wallter-calculator {
    padding: var(--spacing-20);
  }

  .wallter-mode-tabs {
    flex-direction: column;
    gap: var(--spacing-10);
  }

  .wallter-mode-tab {
    font-size: var(--font-size-small);
    padding: var(--spacing-20);
  }
}

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

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

/* Aspect ratios */
.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-portrait {
  aspect-ratio: 3 / 4;
}

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

/* Visibilité responsive */
.hide-mobile {
  display: block;
}

.show-mobile {
  display: none;
}

@media (max-width: 766px) {
  .hide-mobile {
    display: none;
  }

  .show-mobile {
    display: block;
  }
}

/* Alignement responsive */
.text-center-mobile {
  text-align: left;
}

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

/* Espacement responsive */
.mb-responsive {
  margin-bottom: var(--spacing-30);
}

@media (max-width: 766px) {
  .mb-responsive {
    margin-bottom: var(--spacing-20);
  }
}

/* ===== ANIMATIONS RESPONSIVE ===== */

/* Désactiver les animations sur mobile si préféré */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Parallax uniquement sur desktop */
@media (hover: hover) and (pointer: fine) {
  .parallax-element {
    transform: translateY(0);
    transition: transform 0.1s ease;
  }
}

/* Focus visible pour accessibilité */
@media (prefers-reduced-motion: no-preference) {
  :focus-visible {
    outline: 2px solid var(--color-accent-4);
    outline-offset: 2px;
    transition: outline 0.2s ease;
  }
}