/**
 * CSS CASCADE LAYERS - Solution Next.js 15 + React 19
 * Basé sur recherches communauté 2025
 * @see https://www.trysmudford.com/blog/next-js-css-order/
 */

/* DÉFINITION DES COUCHES - ORDRE IMPOSÉ */
@layer reset, base, components, utilities;

/* COUCHE RESET - Priorité 1 */
@layer reset {
  /* Reset styles - toujours en premier */
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  }
}

/* COUCHE BASE - Priorité 2 */
@layer base {
  /* Styles de base du système */
  body {
    background: white;
    color: black;
    line-height: 1.6;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    margin-bottom: 0.5em;
  }

  a {
    color: #0070f3;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }
}

/* COUCHE COMPONENTS - Priorité 3 */
@layer components {
  /* Composants système */
  .btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .btn:hover {
    background: #f5f5f5;
  }

  .btn-primary {
    background: #0070f3;
    color: white;
    border-color: #0070f3;
  }

  .btn-primary:hover {
    background: #0051cc;
  }
}

/* COUCHE UTILITIES - Priorité 4 */
@layer utilities {
  /* Utilitaires finaux */
  .text-center { text-align: center; }
  .text-left { text-align: left; }
  .text-right { text-align: right; }
  
  .hidden { display: none; }
  .block { display: block; }
  .inline { display: inline; }
  
  .m-0 { margin: 0; }
  .p-0 { padding: 0; }
  .mt-4 { margin-top: 1rem; }
  .mb-4 { margin-bottom: 1rem; }
}

/* 
  NOTE IMPORTANTE :
  - Tout CSS Tailwind/externes restera "unlayered" = priorité MAX
  - L'ordre des chunks Next.js n'affecte plus l'affichage
  - Firefox + Chrome + Safari + Edge = comportement identique
  - Solution validée par communauté Next.js 2025
*/