/* =========================================
   1. IMPORTS & VARIABLES
   ========================================= */
   @import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');
   
   :root {
       /* Palette */
       --bg-paper: #FFF2E6;       
       --pale-green: #586357;     
       --dark-green: #052102;     
       --text-main: #280D08;      
       --accent-soft: #734141;    
       --accent-strong: #3D0000;  
   
       /* Glassmorphism Variables */
       --glass-bg: rgba(255, 255, 255, 0.4);
       --glass-border: 1px solid rgba(255, 255, 255, 0.6);
       --glass-shadow: 0 8px 32px rgba(40, 13, 8, 0.05);
       --glass-blur: blur(12px);
   }
   
   * { box-sizing: border-box; }
   
   /* =========================================
      2. BASE & BODY
      ========================================= */
   body {
       margin: 0;
       font-family: 'Outfit', sans-serif;
       color: var(--text-main);
       background-color: var(--bg-paper);
       
       /* Motif vectoriel SVG encodé */
       background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 800 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M400 0q-100 200-200 400t200 400q100-200 200-400t-200-400' stroke='%23586357' stroke-width='2' fill='none' opacity='0.2'/%3E%3Cpath d='M200 0q100 300 300 500t-100 300' stroke='%23734141' stroke-width='2' fill='none' opacity='0.15'/%3E%3Cpath d='M600 0q-200 100-300 500t400 300' stroke='%23586357' stroke-width='1.5' fill='none' opacity='0.2'/%3E%3Cpath d='M100 800q100-300 400-500t-100-300' stroke='%233D0000' stroke-width='1' fill='none' opacity='0.1'/%3E%3C/svg%3E");
       
       background-size: 1000px 1000px;
       background-attachment: fixed;
       min-height: 100vh;
       overflow-x: hidden;
   }
   
   /* OVERLAY FOND AU SCROLL */
   #scroll-overlay {
       position: fixed;
       top: 0; left: 0; width: 100%; height: 100%;
       z-index: -1; 
       background-color: rgba(5, 33, 2, 0);
       transition: background-color 0.1s ease-out;
       pointer-events: none;
   }
   
   /* =========================================
      3. TYPOGRAPHIE GLOBALE
      ========================================= */
   h1, h2, h3, h4 {
       font-family: 'Clash Display', sans-serif;
       color: var(--dark-green);
       letter-spacing: 0.5px;
       margin: 0;
   }
   
   h1 { font-size: 3.5rem; margin-bottom: 0.5rem; }
   h2 { font-size: 2.5rem; margin-top: 3rem; color: var(--accent-strong); }
   p { line-height: 1.6; font-size: 1.1rem; }
   a { text-decoration: none; color: inherit; transition: 0.3s; }
   
   .italic-accent {
       font-family: 'Playfair Display', serif;
       font-style: italic;
       color: var(--accent-soft);
       font-weight: 400;
   }
   
   /* =========================================
      4. NAVIGATION (PILLULE - Conservée)
      ========================================= */
   .nav-wrapper {
       position: fixed;
       top: 20px;
       left: 0; width: 100%;
       display: flex;
       justify-content: center;
       z-index: 1000;
   }
   
   nav {
       position: relative;
       display: flex;
       background: rgba(255, 255, 255, 0.5); /* Légèrement plus transparent pour le nouveau design */
       backdrop-filter: blur(15px);
       -webkit-backdrop-filter: blur(15px);
       border: 1px solid rgba(255,255,255,0.8);
       border-radius: 50px;
       padding: 5px;
       box-shadow: 0 4px 20px rgba(5, 33, 2, 0.1);
   }
   
   nav a {
       position: relative;
       z-index: 2;
       text-decoration: none;
       color: var(--text-main);
       font-family: 'Outfit', sans-serif;
       font-weight: 500;
       padding: 12px 24px;
       border-radius: 50px;
       transition: color 0.3s ease;
   }
   
   #nav-marker {
       position: absolute;
       bottom: 5px; left: 0;
       height: 40px;
       background-color: var(--dark-green);
       border-radius: 40px;
       transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
       z-index: 1;
       opacity: 0;
   }
   
   /* Logique Couleur Nav */
   nav a.active { color: var(--bg-paper); }
   nav:hover a.active { color: var(--text-main); }
   nav a:hover, nav:hover a.active:hover { color: var(--bg-paper); }
   
   /* =========================================
      5. STRUCTURE & COMPOSANTS COMMUNS
      ========================================= */
   main {
       max-width: 1100px; /* Largeur standard pour les autres pages */
       margin: 120px auto 40px;
       padding: 20px;
   }
   
   /* La classe spécifique pour l'Accueil qui demande plus de largeur */
   .main-container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 20px;
   }
   
   /* Panneau Verre Classique (Utilisé sur Contact, A Propos, Projets) */
   .glass-panel {
       background: rgba(255, 255, 255, 0.4);
       backdrop-filter: blur(8px);
       border: 1px solid rgba(255, 255, 255, 0.6);
       border-radius: 20px;
       padding: 3rem;
       box-shadow: var(--glass-shadow);
       margin-bottom: 3rem;
       position: relative;
   }
   
   /* Nouveau Glassmorphism (Utilisé sur l'Accueil) */
   .glass-morphism {
       background: rgba(255, 255, 255, 0.3); /* Plus léger */
       backdrop-filter: var(--glass-blur);
       -webkit-backdrop-filter: var(--glass-blur);
       border: var(--glass-border);
       border-radius: 20px;
       box-shadow: var(--glass-shadow);
   }
   
   /* Boutons Standards */
   .btn {
       display: inline-block;
       background-color: var(--accent-strong);
       color: var(--bg-paper);
       padding: 12px 30px;
       border-radius: 50px;
       font-family: 'Outfit', sans-serif;
       text-transform: uppercase;
       letter-spacing: 1px;
       font-size: 0.9rem;
       text-decoration: none;
       transition: all 0.3s ease;
       cursor: pointer;
   }
   .btn:hover {
       background-color: var(--dark-green);
       transform: translateY(-2px);
       box-shadow: 0 10px 20px rgba(5, 33, 2, 0.15);
   }
   
   /* =========================================
      6. NOUVELLE PAGE D'ACCUEIL (Antoine Hay Style)
      ========================================= */
   
   /* --- A. HERO SECTION --- */
   .hero-container {
       min-height: 90vh;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding-top: 80px; /* Espace pour la nav */
       position: relative;
       margin-bottom: 4rem;
   }
   
   .hero-text-wrapper { z-index: 2; flex: 1; }
   
   .hero-subtitle {
       font-family: 'Playfair Display', serif;
       font-style: italic;
       font-size: 1.2rem;
       color: var(--accent-soft);
   }
   
   .hero-title {
       font-size: 6rem; /* Typo géante */
       line-height: 0.9;
       margin: 10px 0 20px;
       color: var(--dark-green);
   }
   
   .hero-role {
       font-size: 1.5rem;
       text-transform: uppercase;
       letter-spacing: 2px;
       color: var(--pale-green);
       margin-bottom: 3rem;
       font-weight: 400;
   }
   
   .stage-pill {
       display: inline-flex;
       align-items: center;
       gap: 10px;
       padding: 10px 20px;
       border-radius: 50px;
       background: rgba(255,255,255,0.4);
       border: 1px solid var(--dark-green);
       color: var(--dark-green);
       font-weight: 600;
       font-size: 0.9rem;
   }
   .dot {
       width: 8px; height: 8px;
       background: #2ecc71;
       border-radius: 50%;
       box-shadow: 0 0 10px #2ecc71;
   }
   
   /* Image Hero & Liquid Effect */
   .hero-visual {
       flex: 1;
       display: flex;
       justify-content: flex-end;
       position: relative;
   }
   
   .img-frame {
       width: 380px;
       height: 500px;
       padding: 10px; /* Bordure interne */
       transform: rotate(2deg);
       transition: transform 0.5s ease;
   }
   .img-frame:hover { transform: rotate(0); }
   
   .hero-img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: 12px;
   }
   
   .liquid-blob {
       position: absolute;
       top: 50%; left: 50%;
       width: 300px; height: 300px;
       background: radial-gradient(circle, rgba(115,65,65,0.2) 0%, rgba(0,0,0,0) 70%);
       transform: translate(-50%, -50%);
       z-index: -1;
   }
   
   /* --- B. SECTIONS BLOCS --- */
   .section-block { margin: 8rem 0; }
   
   .section-header {
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
       margin-bottom: 3rem;
   }
   
   .section-title { font-size: 4rem; line-height: 1; color: var(--accent-strong); }
   .section-desc { max-width: 400px; font-size: 1.1rem; color: var(--pale-green); text-align: right; }
   
   .link-arrow {
       font-size: 1.2rem;
       font-weight: 500;
       border-bottom: 1px solid var(--text-main);
       padding-bottom: 5px;
   }
   
   /* --- C. PROJETS (Liste Verticale) --- */
   .projects-vertical-list {
       display: flex;
       flex-direction: column;
       gap: 40px;
   }
   
   .project-row {
       display: flex;
       height: 350px; /* Hauteur imposante */
       overflow: hidden;
       text-decoration: none;
       color: var(--text-main);
       transition: transform 0.4s;
       border: 1px solid rgba(255,255,255,0.5); /* Bordure subtile */
   }
   .project-row:hover { transform: scale(1.02); }
   
   .project-info {
       flex: 1;
       padding: 3rem;
       display: flex;
       flex-direction: column;
       justify-content: center;
   }
   .project-info h3 { font-size: 2.5rem; margin-bottom: 1rem; color: var(--dark-green); }
   .project-cat {
       font-family: 'Outfit', sans-serif;
       text-transform: uppercase;
       font-size: 0.9rem;
       opacity: 0.7;
       letter-spacing: 1px;
   }
   
   .project-visual {
       flex: 1.5; /* L'image prend plus de place */
       height: 100%;
   }
   .project-visual img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.6s;
   }
   .project-row:hover .project-visual img { transform: scale(1.05); }
   
   /* --- D. SKILLS (Grille Verre) --- */
   .skills-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 20px;
   }
   
   .skill-card {
       padding: 2rem;
       text-align: center;
       transition: 0.3s;
   }
   .skill-card:hover {
       background: rgba(255,255,255,0.6);
       transform: translateY(-5px);
   }
   
   .skill-icon { font-size: 2.5rem; display: block; margin-bottom: 1rem; }
   .skill-card h4 { font-size: 1.5rem; margin-bottom: 1rem; }
   .skill-card ul { list-style: none; padding: 0; color: var(--pale-green); line-height: 1.8; }
   
   /* --- E. TEASER A PROPOS --- */
   .about-card {
       padding: 4rem;
       text-align: center;
       max-width: 800px;
       margin: 0 auto;
   }
   .about-card p {
       font-size: 1.5rem;
       margin: 2rem 0;
       font-family: 'Playfair Display', serif;
       font-style: italic;
       color: var(--text-main);
   }
   .btn-liquid {
       display: inline-block;
       padding: 15px 40px;
       background: var(--dark-green);
       color: #fff;
       border-radius: 50px;
       text-transform: uppercase;
       font-size: 0.9rem;
       transition: transform 0.3s;
   }
   .btn-liquid:hover { transform: scale(1.05); }
   
   /* --- F. CONTACT (Minimaliste) --- */
   .contact-block { text-align: center; padding-bottom: 6rem; }
   .contact-subtitle { font-size: 1.2rem; margin-bottom: 1rem; opacity: 0.6; }
   
   .contact-huge-link {
       font-family: 'Clash Display', sans-serif;
       font-size: 5vw; /* Taille responsive */
       font-weight: 600;
       color: var(--accent-strong);
       display: inline-flex;
       align-items: center;
       gap: 20px;
       transition: 0.3s;
   }
   .contact-huge-link svg { width: 50px; height: 50px; transition: 0.3s; }
   .contact-huge-link:hover { opacity: 0.8; letter-spacing: 2px; }
   .contact-huge-link:hover svg { transform: translate(10px, -10px); }
   
   
   /* =========================================
      7. PAGE PROJETS (GALERIE - Conservé)
      ========================================= */
   .project-gallery {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
       gap: 40px;
       margin-top: 4rem;
   }
   
   .gallery-item {
       position: relative;
       display: block;
       height: 350px;
       border-radius: 20px;
       overflow: hidden;
       text-decoration: none;
       color: white;
       box-shadow: 0 10px 30px rgba(0,0,0,0.1);
       transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
   }
   
   .gallery-bg {
       position: absolute;
       top: 0; left: 0; width: 100%; height: 100%;
       background-size: cover;
       background-position: center;
       transition: transform 0.6s ease;
       z-index: 1;
   }
   
   .gallery-overlay {
       position: absolute;
       top: 0; left: 0; width: 100%; height: 100%;
       background: linear-gradient(to top, rgba(5, 33, 2, 0.9), transparent 60%);
       z-index: 2;
       opacity: 0.8;
       transition: opacity 0.3s;
   }
   
   .gallery-content {
       position: relative;
       z-index: 3;
       height: 100%;
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
       padding: 2rem;
       transform: translateY(10px);
       transition: transform 0.4s ease;
   }
   
   .gallery-content h3 {
       color: #fff;
       font-size: 1.8rem;
       margin: 0 0 0.5rem 0;
       font-family: 'Clash Display', sans-serif;
   }
   
   .gallery-tags {
       font-family: 'Outfit', sans-serif;
       font-size: 0.9rem;
       color: rgba(255, 255, 255, 0.8);
       text-transform: uppercase;
       letter-spacing: 1px;
       opacity: 0.7;
       transition: opacity 0.3s;
   }
   
   .gallery-arrow {
       position: absolute; top: 1rem; right: 1rem;
       width: 35px; height: 35px;
       background: rgba(255,255,255,0.2);
       backdrop-filter: blur(5px);
       border-radius: 50%;
       display: flex; align-items: center; justify-content: center;
       z-index: 3; opacity: 0;
       transform: rotate(-45deg);
       transition: all 0.4s ease;
   }
   
   .gallery-item:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(5, 33, 2, 0.2); }
   .gallery-item:hover .gallery-bg { transform: scale(1.05); }
   .gallery-item:hover .gallery-content { transform: translateY(0); }
   .gallery-item:hover .gallery-tags { opacity: 1; color: var(--bg-paper); }
   .gallery-item:hover .gallery-arrow { opacity: 1; transform: rotate(0deg); background: var(--accent-strong); }
   
   
   /* =========================================
      8. PAGE A PROPOS & CONTACT (Conservé)
      ========================================= */
   /* Grille Compétences (Page A Propos) */
   .project-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
       gap: 30px;
   }
   .project-card {
       background: rgba(255, 255, 255, 0.5);
       border: 1px solid rgba(255,255,255,0.8);
       border-radius: 16px;
       overflow: hidden;
       transition: transform 0.4s;
       display: flex; flex-direction: column;
       color: var(--text-main);
       text-decoration: none;
   }
   
   /* Contact Layout */
   .contact-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; }
   .info-list { list-style: none; padding: 0; margin-top: 1.5rem; }
   .info-list li { display: flex; align-items: center; margin-bottom: 1rem; font-size: 1.1rem; }
   .info-list .icon { margin-right: 15px; font-size: 1.5rem; }
   .info-list a { color: var(--text-main); text-decoration: none; transition: color 0.3s; }
   .info-list a:hover { color: var(--accent-soft); }
   
   .btn-icon {
       display: inline-block; margin-right: 10px; padding: 8px 16px;
       border: 1px solid var(--dark-green);
       border-radius: 50px;
       text-decoration: none; color: var(--dark-green);
       font-size: 0.9rem; transition: all 0.3s ease;
   }
   .btn-icon:hover { background: var(--dark-green); color: var(--bg-paper); }
   
   /* Formulaire Contact */
   .form-group { margin-bottom: 1.5rem; }
   .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--accent-strong); font-family: 'Outfit', sans-serif; }
   .glass-form input, .glass-form textarea {
       width: 100%; padding: 15px; border-radius: 12px;
       border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.4);
       font-family: 'Outfit', sans-serif; font-size: 1rem; color: var(--text-main);
       transition: all 0.3s ease; box-shadow: inset 0 2px 5px rgba(0,0,0,0.02);
   }
   .glass-form input:focus, .glass-form textarea:focus {
       outline: none; border-color: var(--accent-soft); background: rgba(255, 255, 255, 0.8);
       box-shadow: 0 4px 15px rgba(115, 65, 65, 0.1);
   }
   ::placeholder { color: var(--pale-green); opacity: 0.7; }
   
   /* =========================================
      9. MEDIA QUERIES
      ========================================= */
   @media (max-width: 900px) {
       /* Hero */
       .hero-container { flex-direction: column-reverse; text-align: center; justify-content: center; gap: 40px; padding-top: 100px; }
       .hero-title { font-size: 4rem; }
       .img-frame { width: 280px; height: 350px; }
       
       /* Headers de section */
       .section-header { flex-direction: column; align-items: flex-start; gap: 20px; }
       .section-title { font-size: 3rem; }
       .section-desc { text-align: left; }
       
       /* Projets Vertical */
       .project-row { flex-direction: column; height: auto; }
       .project-visual { height: 250px; }
       .project-info { padding: 1.5rem; }
       
       /* Skills */
       .skills-grid { grid-template-columns: 1fr; }
       
       /* Contact */
       .contact-huge-link { font-size: 3rem; }
       .contact-layout { grid-template-columns: 1fr; gap: 2rem; }
       
       /* Galerie Grille */
       .project-gallery { grid-template-columns: 1fr; }
   }