/* ===================================
   RESPONSIVE.CSS - Media queries centralisés
   =================================== */

/* ===================================
   BREAKPOINTS
   Mobile: 0-640px
   Tablet: 641px-1023px
   Desktop: 1024px-1919px
   Large Desktop: 1920px-2559px
   Ultra-wide: 2560px+
   =================================== */

/* ===================================
   MOBILE (max-width: 640px)
   =================================== */

@media (max-width: 640px) {
  /* Typography mobile */
  :root {
    font-size: 14px;
  }
  
  h1 {
    font-size: var(--font-size-3xl);
  }
  
  h2 {
    font-size: var(--font-size-2xl);
  }
  
  h3 {
    font-size: var(--font-size-xl);
  }
  
  h4 {
    font-size: var(--font-size-lg);
  }
  
  /* Spacing mobile */
  section {
    padding: var(--spacing-2xl) var(--spacing-md);
  }
  
  .container {
    padding: 0 var(--spacing-md);
  }
  
  /* Grid mobile - 1 colonne par défaut */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  /* Buttons mobile */
  .btn {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-sm);
  }
  
  /* Hide on mobile */
  .hide-mobile {
    display: none !important;
  }
  
  /* Show only on mobile */
  .show-mobile {
    display: block !important;
  }
  
  /* ===================================
     STAGIAIRE SECTION - MOBILE
     =================================== */
  
  .stagiaire-section {
    align-items: center;
    padding-bottom: 0;
  }
  
  .section-title {
    font-size: var(--font-size-2xl);
    top: 20px;
  }
  
  .galaxy-container {
    width: 350px;
    height: 350px;
  }
  
  .email-center {
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .circle-1 { 
    width: 140px; 
    height: 140px; 
  }
  
  .circle-2 { 
    width: 230px; 
    height: 230px; 
  }
  
  .circle-3 { 
    width: 320px; 
    height: 320px; 
  }
  
  .stagiaire-img {
    width: 35px;
    height: 35px;
    font-size: 10px;
  }
  
  /* ===================================
     LEITMOTIFS SECTION - MOBILE
     =================================== */
  
  .leitmotifs-content {
    height: auto;
    min-height: 400px;
    max-height: 80vh;
  }
  
  .mobile-version {
    display: block !important;
    height: auto;
    padding: clamp(0.5rem, 2vw, 1rem);
  }
  
  .mobile-Pan-wrapper {
    width: min(256px, 80vw);
  }
  
  .mobile-version .Pan-text {
    min-height: 140px;
    padding: var(--spacing-md);
  }
  
  .mobile-version .Pan-text h3 {
    font-size: var(--font-size-lg);
  }
  
  .mobile-version .Pan-text p {
    font-size: var(--font-size-xs);
  }
  
  .mobile-version .Pan-image {
    min-height: 140px;
  }
  
  .mobile-version .Pan-image img {
    /* height: 50%; */
  }
  
  .mobile-version .Pan-image .Pan-label {
    padding: var(--spacing-sm);
  }
  
  .mobile-version .Pan-image .Pan-label p {
    font-size: var(--font-size-xs);
  }
  
  .desktop-version {
    display: none !important;
  }
  
  /* ===================================
     LOADER - MOBILE
     =================================== */
  
  .loader-content {
    gap: 3px;
  }
  
  .left-text {
    font-size: var(--font-size-5xl);
    letter-spacing: -3px;
  }
  
  .counter-frame {
    width: 32px;
    height: 58px;
  }
  
  .counter-number {
    font-size: var(--font-size-5xl);
    height: 58px;
  }
  
  .hero-content h1 {
    font-size: var(--font-size-4xl);
  }
  
  .hero-content p {
    font-size: var(--font-size-lg);
  }
  
  /* ===================================
     HERO BANNER - MOBILE
     =================================== */
  
  #flip-grid {
    grid-template-columns: repeat(5, 1fr);
    /* Les lignes sont définies dynamiquement en JS */
  }
  
  /* ===================================
     COLLABORATEURS SECTION - MOBILE
     =================================== */
  
  .collaborateurs-section {
    padding: var(--spacing-lg) var(--spacing-sm);
  }

  .collaborateurs-container {
    flex-direction: column;
    height: auto;
    min-height: 600px;
    padding: var(--spacing-sm);
  }

  .collaborateur-panel {
    min-height: 80px;
    margin: 5px 0;
  }

  .collaborateur-panel.active {
    min-height: 500px;
    flex: none;
  }

  .collaborateur-panel.active .image-zone {
    height: 200px;
  }

  .collaborateur-panel.inactive {
    min-height: 60px;
    flex: none;
  }

  .content-zone {
    padding: var(--spacing-lg);
  }

  .collaborateur-panel.active .content-zone {
    padding: var(--spacing-xl);
  }

  .collaborateur-panel.inactive .name-block {
    writing-mode: horizontal-tb;
  }

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

  .icon-bubble {
    height: 60px;
    font-size: 24px;
  }

  .collaborateur-nom {
    font-size: var(--font-size-xl);
  }

  .collaborateur-panel.active .collaborateur-nom {
    font-size: var(--font-size-2xl);
  }
  
  /* ===================================
     PROJECTS SECTION - MOBILE
     =================================== */
  
  .project {
    padding: var(--spacing-lg);
  }

  .project-content {
    flex-direction: column;
    gap: var(--spacing-xl);
  }

  .project-image {
    width: 300px !important ;
    height: 300px !important;
  }

  .project-title {
    font-size: var(--font-size-1xl);
    text-transform: none;
  }

  .project-description {
    font-size: var(--font-size-4xl);
    text-transform: none;
  }

  .floating-image {
    width: 40px;
    height: 40px;
  }
  
  /* ===================================
     FOOTER - MOBILE
     =================================== */
  
  .info-section {
    grid-template-columns: 1fr;
    padding: var(--spacing-2xl) var(--spacing-lg);
  }
  
  .footer-bottom {
    padding: var(--spacing-lg);
  }
}

/* ===================================
   MOBILE LANDSCAPE (max-width: 640px) et (orientation: landscape)
   =================================== */

@media (max-width: 640px) and (orientation: landscape) {
  section {
    padding: var(--spacing-xl) var(--spacing-md);
  }
  
  /* Hauteurs réduites pour landscape */
  .h-screen {
    height: auto;
    min-height: 100vh;
  }
}

/* ===================================
   PETIT MOBILE (max-width: 400px)
   =================================== */

@media (max-width: 400px) {
  :root {
    font-size: 13px;
  }
  
  section {
    padding: var(--spacing-xl) var(--spacing-sm);
  }
  
  .container {
    padding: 0 var(--spacing-sm);
  }
  
  h1 {
    font-size: var(--font-size-2xl);
  }
  
  h2 {
    font-size: var(--font-size-xl);
  }
  
  /* ===================================
     LOADER - TRÈS PETIT MOBILE
     =================================== */
  
  .loader-content {
    gap: 2px;
  }
  
  .left-text {
    font-size: var(--font-size-4xl);
    letter-spacing: -2px;
  }
  
  .counter-frame {
    width: 26px;
    height: 48px;
  }
  
  .counter-number {
    font-size: var(--font-size-4xl);
    height: 48px;
  }
  
  .hero-content h1 {
    font-size: var(--font-size-3xl);
    padding: 0 var(--spacing-lg);
  }
  
  .hero-content p {
    font-size: var(--font-size-base);
    padding: 0 var(--spacing-lg);
  }
  
  /* ===================================
     COLLABORATEURS SECTION - TRÈS PETIT MOBILE
     =================================== */
  
  .collaborateur-panel.active .image-zone {
    height: 150px;
  }

  .icon-bubble {
    height: 50px;
    font-size: 20px;
  }

  .content-zone {
    padding: var(--spacing-md);
  }

  .collaborateur-panel.active .content-zone {
    padding: var(--spacing-lg);
  }
}

/* ===================================
   TABLETTE (641px - 1023px)
   =================================== */

@media (min-width: 641px) and (max-width: 1023px) {
  :root {
    font-size: 15px;
  }
  
  /* Spacing tablette */
  section {
    padding: var(--spacing-3xl) var(--spacing-lg);
  }
  
  /* Grid tablette - 2 colonnes */
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Hide on tablet */
  .hide-tablet {
    display: none !important;
  }
  
  /* Show only on tablet */
  .show-tablet {
    display: block !important;
  }
  
  /* ===================================
     LEITMOTIFS SECTION - TABLETTE
     =================================== */
  
  .leitmotifs-title {
    font-size: var(--font-size-4xl);
  }
  
  /* Afficher la version Desktop */
  .desktop-version {
    display: block !important;
  }
  
  /* Masquer la version Mobile */
  .mobile-version {
    display: none !important;
  }
  
  /* Ajuster la hauteur du conteneur */
  .leitmotifs-content {
    height: 10vm;
  }

  
  /* ===================================
     HERO BANNER - TABLETTE
     =================================== */
  
  #flip-grid {
    grid-template-columns: repeat(7, 1fr);
    /* Les lignes sont définies dynamiquement en JS */
  }
  
  .back .letter-overlay {
    font-size: var(--font-size-6xl);
  }
}

/* ===================================
   DESKTOP (1024px - 1919px)
   =================================== */

@media (min-width: 1024px) and (max-width: 1919px) {
  /* Grid desktop - colonnes complètes */
  .grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  
  /* Hide on desktop */
  .hide-desktop {
    display: none !important;
  }
  
  /* Show only on desktop */
  .show-desktop {
    display: block !important;
  }
  
  /* ===================================
     HERO BANNER - DESKTOP
     =================================== */
  
  #flip-grid {
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(5, 1fr);
  }
  
  .back .letter-overlay {
    font-size: var(--font-size-6xl);
  }
}

/* ===================================
   LARGE DESKTOP (1920px - 2559px)
   =================================== */

@media (min-width: 1920px) and (max-width: 2559px) {
  :root {
    font-size: 18px;
  }
  
  .container {
    max-width: 1600px;
  }
  
  section {
    padding: var(--spacing-4xl) var(--spacing-2xl);
  }
  
  /* ===================================
     HERO BANNER - LARGE DESKTOP
     =================================== */
  
  #flip-grid {
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(5, 1fr);
  }
}

/* ===================================
   ULTRA-WIDE (2560px+)
   =================================== */

@media (min-width: 2560px) {
  :root {
    font-size: 20px;
  }
  
  .container {
    max-width: 1800px;
  }
  
  section {
    padding: var(--spacing-4xl) var(--spacing-3xl);
  }
  
  /* ===================================
     HERO BANNER - ULTRA-WIDE
     =================================== */
  
  #flip-grid {
    grid-template-columns: repeat(11, 1fr);
    grid-template-rows: repeat(5, 1fr);
  }
}

/* ===================================
   RESPONSIVE UTILITIES
   =================================== */

/* Affichage responsive */
@media (max-width: 640px) {
  .flex-col-mobile {
    flex-direction: column;
  }
  
  .text-center-mobile {
    text-align: center;
  }
  
  .w-full-mobile {
    width: 100%;
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  .flex-col-tablet {
    flex-direction: column;
  }
  
  .text-center-tablet {
    text-align: center;
  }
}

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

@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a, a:visited {
    text-decoration: underline;
  }
  
  a[href]:after {
    content: " (" attr(href) ")";
  }
  
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }
  
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
  
  p {
    orphans: 3;
    widows: 3;
  }
  
  .no-print {
    display: none !important;
  }
}

/* ===================================
   ACCESSIBILITÉ - PREFERS REDUCED MOTION
   =================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===================================
   DARK MODE (si besoin futur)
   =================================== */

/* @media (prefers-color-scheme: ) {
  /* Variables dark mode (optionnel pour le futur) 
  :root {
    --color-text-primary: #f8f9fa;
    --color-text-secondary: #e5e7eb;
    --color-gray-dark: #f8f9fa;
    --color-white: #1f2937;
    --color-white-soft: #111827;
  }
} */