/* ============================================
   CYCLES HORIZON - RESPONSIVE STYLES
   Mobile-First Breakpoints
   ============================================ */

/* ============================================
   TABLET (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
  :root {
    --section-padding: 80px 0;
  }

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

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

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  /* Atelier Section */
  .atelier-grid {
    gap: 40px;
  }

  .atelier-image img {
    height: 400px;
  }

  /* Hero Stats */
  .hero-stats {
    gap: 40px;
  }

  .hero-stat-value {
    font-size: 2.5rem;
  }
}

/* ============================================
   TABLET PORTRAIT (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
  :root {
    --section-padding: 60px 0;
  }

  /* Navigation */
  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 350px;
    height: 100vh;
    background: var(--bg-carbon);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    transition: right var(--transition-normal);
    border-left: 1px solid var(--border-tech);
    z-index: 999;
  }

  .nav-menu.active {
    right: 0;
  }

  .nav-link {
    font-size: 1.5rem;
  }

  /* Symptome : le bouton burger ne mesurait que 35 x 26 px (3 barres de 25 px
     + 5 px de padding), tres en dessous des 44 px recommandes au doigt, alors
     que c'est le seul acces au menu sur telephone. On elargit la zone tactile
     sans toucher au dessin : les barres restent a 25 px, centrees. La marge
     negative compense l'elargissement pour que le pictogramme ne se decale
     pas vers la gauche. */
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -5px;
    z-index: 1001;
  }

  .menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* Mobile menu overlay */
  .nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998;
  }

  .nav-overlay.active {
    display: block;
  }

  /* Grids */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Hero */
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

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

  .hero-stats {
    flex-direction: column;
    gap: 30px;
  }

  /* Atelier Section */
  .atelier-grid {
    grid-template-columns: 1fr;
  }

  .atelier-image {
    order: -1;
  }

  .atelier-image img {
    height: 300px;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .footer-brand .logo {
    justify-content: center;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-contact-item {
    justify-content: center;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer-bottom-links {
    justify-content: center;
  }

  /* Universe Cards */
  .universe-card {
    min-height: 350px;
  }

  /* Page Header */
  .page-header {
    padding: 140px 0 60px;
  }

  /* Section Header */
  .section-header {
    margin-bottom: 40px;
  }

  /* Brands */
  .brands-slider {
    gap: 30px;
  }

  .brand-item img {
    height: 30px;
  }

  /* Symptome : l'indicateur de defilement (souris + molette + "SCROLL") est en
     position: absolute, bottom: 20-40px. Hors du flux, il ne reserve aucune
     place : des que le hero se resserre sur telephone, le bloc de statistiques
     descend jusque sous lui et la souris chevauche "100 % PASSION". S'y ajoute
     le bandeau maquette fixe, qui recouvre le bas de l'ecran.
     Une molette de souris n'a de toute facon aucun sens au doigt : on masque. */
  .scroll-indicator {
    display: none;
  }
}

/* Meme defaut en paysage sur telephone, ou la largeur peut depasser 768px
   alors que la hauteur utile tombe sous 450px : le hero est encore plus
   comprime que en portrait. */
@media (max-height: 600px) {
  .scroll-indicator {
    display: none;
  }
}

/* ============================================
   MOBILE (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
  :root {
    --section-padding: 50px 0;
  }

  /* Symptome : a 14px de racine, les textes secondaires du site (0,9 a 0,95rem)
     retombaient a 12,6-13,3px, sous le seuil de confort de lecture sur
     telephone. 15px les remonte a 13,5-14,3px sans grossir les titres, qui
     sont en clamp(). */
  html {
    font-size: 15px;
  }

  .container {
    padding: 0 15px;
  }

  /* Logo */
  .logo-icon {
    width: 38px;
    height: 38px;
    font-size: 1.2rem;
  }

  .logo-text {
    font-size: 1.2rem;
  }

  /* Hero */
  .hero-badge {
    font-size: 0.75rem;
    padding: 6px 15px;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-stat-value {
    font-size: 2rem;
  }

  .hero-stat-label {
    font-size: 0.8rem;
  }

  /* Cards */
  .card {
    padding: 20px;
  }

  .card-icon {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }

  /* Universe Cards */
  .universe-card {
    min-height: 300px;
  }

  .universe-card-content {
    padding: 20px;
  }

  .universe-card h3 {
    font-size: 1.5rem;
  }

  /* Buttons */
  .btn {
    padding: 12px 24px;
    font-size: 1rem;
  }

  /* Page Header */
  .page-header {
    padding: 120px 0 50px;
  }

  .breadcrumb {
    font-size: 0.8rem;
    gap: 10px;
  }

  /* Atelier Feature */
  .atelier-feature {
    flex-direction: column;
    text-align: center;
  }

  .atelier-feature-icon {
    margin: 0 auto;
  }

  /* Symptome : sous 16px, Safari iOS zoome automatiquement sur le champ des
     qu'on le touche, et la page reste ensuite decalee. 16px en dur (et non en
     rem, qui suivrait la racine reduite ci-dessus) supprime ce zoom. */
  .form-input,
  .form-textarea {
    padding: 12px 15px;
    font-size: 16px;
  }

  /* Footer */
  .footer {
    padding: 50px 0 20px;
  }

  .footer-grid {
    gap: 30px;
  }

  .footer-column h4 {
    margin-bottom: 15px;
  }

  .footer-links {
    gap: 10px;
  }
}

/* ============================================
   LARGE SCREENS (min-width: 1400px)
   ============================================ */
@media (min-width: 1400px) {
  :root {
    --container-width: 1320px;
  }

  .hero-content {
    max-width: 1000px;
  }

  .hero-stats {
    gap: 80px;
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }

  .fade-in,
  .slide-in-left,
  .slide-in-right,
  .scale-in {
    opacity: 1;
    transform: none;
  }

  .parallax-bg {
    position: absolute;
    transform: none !important;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .navbar,
  .footer-social,
  .btn,
  .scroll-indicator {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .hero {
    min-height: auto;
    padding: 50px 0;
  }

  .section {
    padding: 30px 0;
  }

  a {
    text-decoration: underline;
  }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects that might cause issues on touch */
  .hover-lift:hover {
    transform: none;
  }

  .card:hover {
    transform: none;
  }

  .universe-card:hover {
    transform: none;
  }

  .universe-card:hover .universe-card-bg {
    transform: none;
  }

  /* Make touch targets larger */
  .nav-link {
    padding: 10px 0;
  }

  .footer-links a {
    padding: 8px 0;
    display: inline-block;
  }
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */
@media (prefers-contrast: high) {
  :root {
    --border-tech: rgba(255, 255, 255, 0.3);
    --border-tech-hover: rgba(255, 255, 255, 0.5);
    --text-secondary: #c0c0c0;
  }

  .card,
  .universe-card,
  .hud-box {
    border-width: 2px;
  }
}

/* ============================================
   DARK MODE PREFERENCE (already dark, but ensure)
   ============================================ */
@media (prefers-color-scheme: light) {
  /* Site stays dark regardless of system preference */
  /* This is intentional for the racing aesthetic */
}

/* ============================================
   BANDEAU MAQUETTE - RESERVE SOUS LE FOOTER
   Volontairement en fin de fichier : .footer est
   redefini plus haut dans les media queries, la reserve
   doit donc etre reaffirmee apres pour ne pas etre ecrasee.
   ============================================ */
.footer {
  padding-bottom: calc(30px + var(--mockup-banner-height));
}

@media (max-width: 768px) {
  :root {
    --mockup-banner-height: 56px;
  }

  .mockup-banner {
    font-size: 0.75rem;
    padding: 8px 12px;
  }

  .footer {
    padding-bottom: calc(20px + var(--mockup-banner-height));
  }
}

@media (max-width: 480px) {
  :root {
    --mockup-banner-height: 72px;
  }

  .footer {
    padding-bottom: calc(20px + var(--mockup-banner-height));
  }
}