/* =========================================================================
   Design System "The Serene Curator" - Reiki RKL
   Variables et configuration globale
   ========================================================================= */

   @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap');

   :root {
     /* Couleurs de base - Académie */
     --color-primary: #1B263B;
     --color-primary-dim: #121A2A;
     --color-on-primary: #ffffff;
   
     --color-secondary: #5C677D;
     --color-secondary-container: #CFD8E6;
     --color-on-secondary-container: #1B263B;
   
     --color-background: #E0E0E0;
     --color-surface: #E0E0E0;
     --color-surface-container-lowest: #F5F5F5; /* Légèrement plus clair pour détacher */
     --color-surface-container-low: #EBEBEB;
     --color-surface-container: #E0E0E0;
   
     --color-on-surface: #1B263B; /* Remplace le noir */
     --color-outline-variant: rgba(27, 38, 59, 0.2); /* Ligne fine indigo */
   
     --color-accent: #A21220; /* Rouge Sceau */
     --color-on-accent: #ffffff;
   
     /* Ombres et Flous */
     --shadow-ambient: none; /* Suppression des ombres pour un style rigoureux */
     --glass-bg: rgba(224, 224, 224, 0.85); /* Fond verre plus opaque */
     
     /* Typographie */
     --font-headline: 'EB Garamond', serif;
     --font-body: 'Montserrat', sans-serif;
     
     --text-display-lg: 3.5rem;
     --text-headline: 2.5rem;
     --text-title: 1.5rem;
     --text-body-lg: 1rem;
   }
   
   /* =========================================================================
      Reset & Base
      ========================================================================= */
   *, *::before, *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   
   html {
     scroll-snap-type: y mandatory;
     scroll-behavior: smooth;
   }
   
   body {
     font-family: var(--font-body);
     font-weight: 300; /* Montserrat Light/Regular pour clarté */
     background-color: var(--color-background);
     color: var(--color-on-surface);
     line-height: 1.8; /* Interlignage généreux */
     overflow-x: clip; /* Fix bug Chrome scroll-snap */
     -webkit-font-smoothing: antialiased;
   }
   
   img, video {
     max-width: 100%;
     height: auto;
     display: block;
   }
   
   a {
     color: inherit;
     text-decoration: none;
   }
   
   /* =========================================================================
      Typographie
      ========================================================================= */
   h1, h2, h3, h4, .font-serif {
     font-family: var(--font-headline);
     font-weight: 400;
     line-height: 1.2;
     color: var(--color-on-surface);
   }
   
   h1 {
     font-size: var(--text-display-lg);
     letter-spacing: -0.02em;
     margin-bottom: 2rem;
   }
   
   h2 {
     font-size: var(--text-headline);
     margin-bottom: 1.5rem;
   }
   
   h3 {
     font-size: var(--text-title);
     margin-bottom: 1rem;
   }
   
   .label {
     font-family: var(--font-body);
     font-size: 0.875rem;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     color: var(--color-primary);
     margin-bottom: 1rem;
     display: inline-block;
   }
   
   /* =========================================================================
      Utilities & Containers
      ========================================================================= */
   .container {
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 5%;
   }
   
   .section {
     padding: 160px 0; /* Espaces accrus - Concept de "Ma" */
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     scroll-snap-align: start;
     scroll-snap-stop: always;
   }
   
   .bg-surface { background-color: var(--color-surface); }
   .bg-surface-lowest { background-color: var(--color-surface-container-lowest); }
   .bg-surface-low { background-color: var(--color-surface-container-low); }
   .bg-surface-container { background-color: var(--color-surface-container); }
   
   .radius-card { border-radius: 0; }
   .radius-full { border-radius: 0; }
   
   /* Hierarchy / Elevation via Tonal Layering (No 1px borders) */
   .card {
     background-color: var(--color-surface-container-lowest);
     border-radius: 0;
     border: 1px solid var(--color-outline-variant);
     padding: 4rem 3rem;
   }
   
   .glass-nav {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 1000;
     background: var(--glass-bg);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     padding: 1.5rem 0;
     border-bottom: 1px solid rgba(178, 178, 172, 0.15); /* Ghost border */
     transition: all 0.3s ease;
   }
   
   .nav-inner {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   
   .nav-links {
     display: flex;
     gap: 2.5rem;
     align-items: center;
   }
   
   .nav-links a {
     font-size: 0.95rem;
     font-weight: 500;
     transition: color 0.3s ease;
   }
   
   .nav-links a:hover {
     color: var(--color-primary);
   }
   
   /* =========================================================================
      Boutons & Éléments Interactifs
      ========================================================================= */
   .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 1rem 3rem;
     font-family: var(--font-body);
     font-size: 0.95rem;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     font-weight: 500;
     border-radius: 0; /* Angles droits */
     cursor: pointer;
     transition: all 0.3s ease;
     border: 1px solid transparent;
   }
   
   .btn-primary {
     background-color: var(--color-accent); /* Rouge Sceau */
     color: var(--color-on-accent);
   }
   
   .btn-primary:hover {
     background-color: #8c0f1b; /* Légèrement plus foncé */
     color: var(--color-on-accent);
   }
   
   .btn-secondary, .btn-outline {
     background: transparent;
     color: var(--color-primary);
     border: 1px solid var(--color-primary);
   }
   
   .btn-secondary:hover, .btn-outline:hover {
     background: var(--color-primary);
     color: var(--color-on-primary);
   }
   
   .chip {
     display: inline-block;
     padding: 0.5rem 1.5rem;
     border-radius: 0;
     border: 1px solid var(--color-outline-variant);
     background-color: transparent;
     color: var(--color-primary);
     font-size: 0.875rem;
     font-weight: 500;
     letter-spacing: 0.05em;
     text-transform: uppercase;
   }
   
   /* =========================================================================
      Layouts Asymétriques & Heros
      ========================================================================= */
   .hero {
     min-height: 100vh;
     display: flex;
     align-items: center;
     padding-top: 100px; /* offset for fixed nav */
   }

   .hero-video {
     position: relative;
     min-height: 100vh;
     display: flex;
     align-items: center;
     overflow: hidden;
     padding-top: 100px; /* offset for fixed nav */
   }

   .hero-video .video-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: 0;
   }

   .hero-video .video-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 25%, rgba(0,0,0,0) 50%);
     z-index: 0;
   }

   .hero-video h1, .hero-video p, .hero-video .label {
     color: #ffffff;
     text-shadow: 0 4px 12px rgba(0,0,0,0.4);
   }
   
   .split-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 6rem; /* Plus d'espace vide */
     align-items: center;
   }
   
   .split-grid.reverse .text-content {
     order: 2;
   }
   .split-grid.reverse .media-content {
     order: 1;
   }
   
   .media-content img {
     border-radius: 0; /* Angles droits */
     width: 100%;
     object-fit: cover;
     border: 1px solid var(--color-outline-variant);
   }
   
   /* Floating overlap effect */
   .overlap-card {
     position: relative;
     margin-top: -100px;
     margin-left: 10%;
     margin-right: 10%;
     z-index: 10;
     background: var(--color-surface-container-lowest);
   }
   
   /* =========================================================================
      Liste & Formulaires
      ========================================================================= */
   /* List without divider lines */
   .feature-list {
     list-style: none;
   }
   
   .feature-list li {
     margin-bottom: 2rem;
     padding-bottom: 2rem;
   }
   
   /* Inputs */
   .form-group {
     margin-bottom: 1.5rem;
   }
   
   .form-control {
     width: 100%;
     background-color: var(--color-surface-container-low);
     border: 1px solid var(--color-outline-variant);
     border-radius: 0;
     padding: 1.25rem;
     font-family: var(--font-body);
     font-size: 1rem;
     color: var(--color-on-surface);
     transition: all 0.3s ease;
   }
   
   .form-control:focus {
     outline: none;
     background-color: var(--color-surface-container-lowest);
     box-shadow: inset 0 -2px 0 var(--color-primary);
   }
   
   /* =========================================================================
      Footer
      ========================================================================= */
   .site-footer {
     background-color: var(--color-surface-container-low);
     padding: 6rem 0 3rem;
   }
   
   .footer-grid {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr;
     gap: 4rem;
   }
   
   .footer-bottom {
     margin-top: 5rem;
     padding-top: 2rem;
     border-top: 1px solid rgba(178, 178, 172, 0.15); /* Ghost border */
     display: flex;
     justify-content: space-between;
     font-size: 0.875rem;
     opacity: 0.7;
   }
   
   /* =========================================================================
      Responsive
      ========================================================================= */
   @media (max-width: 900px) {
     :root {
       --text-display-lg: 2.5rem;
       --text-headline: 2rem;
     }
     .split-grid {
       grid-template-columns: 1fr;
       gap: 3rem;
     }
     .split-grid.reverse .text-content, .split-grid.reverse .media-content {
       order: 0;
     }
     .footer-grid {
       grid-template-columns: 1fr;
       gap: 3rem;
     }
     .nav-links {
       display: none; /* Mobile menu needed */
     }
   }
   
   /* =========================================================================
      Scroll Snapping Elements
      ========================================================================= */
   .hero-video, .hero, .site-footer {
     scroll-snap-align: start;
     scroll-snap-stop: always;
   }
   
   /* =========================================================================
      Animations (Entrance)
      ========================================================================= */
   .fade-up {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
   }
   
   .fade-up.visible {
     opacity: 1;
     transform: translateY(0);
   }