/* ==========================================================================
   1. STRUCTURE ET BASE DES UNIVERS
   ========================================================================== */
   .univers-container, 
   .univers-detail-container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 160px 20px 80px; /* Aligné sur la hauteur de votre header de page */
       background: #0b0b0b;
       color: #fff;
       font-family: 'Inter', system-ui, sans-serif;
   }
   
   /* En-têtes style éditorial de magazine d'art */
   .univers-intro, 
   .detail-header {
       text-align: center;
       max-width: 750px;
       margin: 0 auto 100px auto;
   }
   
   .univers-intro h1, 
   .detail-header h1 {
       font-family: var(--font-title), Georgia, serif;
       font-size: clamp(3.5rem, 6vw, 5.5rem);
       font-weight: 400;
       line-height: 0.95;
       margin: 0 0 20px 0;
       color: #fff;
   }
   
   .univers-intro p, 
   .seo-lead {
       font-size: 1.15em;
       line-height: 1.9;
       color: rgba(255, 255, 255, 0.72);
   }
   
   /* Lien de retour subtil */
   .back-link {
       display: inline-block;
       color: #c6a46a;
       text-transform: uppercase;
       letter-spacing: .25em;
       font-size: .75em;
       text-decoration: none;
       margin-bottom: 25px;
       transition: color 0.3s;
   }
   .back-link:hover {
       color: #fff;
   }
   
   /* ==========================================================================
      2. VUE LOOKBOOK ACCUEIL (INDEX.PHP) - DISPOSITION 50/50 ÉQUILIBRÉE
      ========================================================================== */
   .univers-row {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 80px;
   }
   
   .univers-row.row-reverse {
       flex-direction: row-reverse;
   }
   
   .univers-text {
       flex: 1;
       position: relative;
       min-width: 0;
   }
   
   /* Grand numéro de fond artistique */
   .univers-number {
       font-size: 6em;
       font-family: var(--font-title), serif;
       color: rgba(198, 164, 106, 0.03);
       position: absolute;
       top: -65px;
       left: -15px;
       font-weight: 400;
       pointer-events: none;
   }
   
   .univers-text h2 {
       font-family: var(--font-title), serif;
       font-size: clamp(2rem, 4vw, 3rem);
       font-weight: 400;
       line-height: 1.1;
       margin: 0 0 20px 0;
       color: #c6a46a; /* Couleur or du salon */
   }
   
   .univers-description {
       font-size: 1em;
       line-height: 1.8;
       color: rgba(255, 255, 255, 0.6);
       margin-bottom: 30px;
   }
   
   /* Bouton d'exploration textuel épuré */
   .btn-explore {
       display: inline-flex;
       align-items: center;
       gap: 10px;
       color: #c6a46a;
       text-decoration: none;
       font-size: 0.8rem;
       text-transform: uppercase;
       letter-spacing: 0.2em;
       font-weight: 500;
       padding-bottom: 6px;
       border-bottom: 1px solid rgba(198, 164, 106, 0.3);
       transition: all 0.3s ease;
   }
   
   .btn-explore:hover {
       color: #fff;
       border-color: #fff;
       padding-left: 5px;
   }
   
   /* Mosaïque asymétrique de 3 images */
   .univers-mosaic {
       flex: 1.2;
       display: grid;
       grid-template-columns: repeat(12, 1fr);
       grid-template-rows: repeat(12, 1fr);
       height: 520px;
       position: relative;
   }
   
   .mosaic-item {
       overflow: hidden;
       background: #050505;
   }
   
   .mosaic-item img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
       filter: grayscale(20%); /* Effet artistique ajustable */
       transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s;
   }
   
   .univers-row:hover .mosaic-item img {
       transform: scale(1.03);
       filter: grayscale(0%);
   }
   
   /* Positionnement des blocs de la mosaïque */
   .mosaic-item.item-1 { 
       grid-column: 1 / 9; 
       grid-row: 1 / 10; 
       z-index: 2; 
       border: 1px solid rgba(255,255,255,0.05);
   }
   .mosaic-item.item-2 { 
       grid-column: 7 / 13; 
       grid-row: 4 / 12; 
       z-index: 3; 
       border: 6px solid #0b0b0b; /* Épaisseur noire pour découper l'image du fond */
   }
   .mosaic-item.item-3 { 
       grid-column: 3 / 7; 
       grid-row: 8 / 13; 
       z-index: 4; 
       border: 4px solid #0b0b0b;
   }
   
   .mosaic-placeholder {
       grid-column: 1 / 13;
       grid-row: 1 / 13;
       display: flex;
       align-items: center;
       justify-content: center;
       border: 1px dashed rgba(198, 164, 106, 0.2);
       color: rgba(255,255,255,0.3);
       font-size: 0.9em;
   }
   
   /* ==========================================================================
      3. VUE GALERIE RITMÉE & NARRATIVE (DETAILS.PHP)
      ========================================================================== */
   .editorial-gallery {
       display: flex;
       flex-direction: column;
       gap: 120px;
   }
   
   .art-piece {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 80px;
   }
   
   .art-piece.art-right {
       flex-direction: row-reverse;
   }
   
   .art-image {
       flex: 1.2;
       max-height: 650px;
       overflow: hidden;
       border: 1px solid rgba(255, 255, 255, 0.05);
       background: #050505;
   }
   
   .art-image img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
       transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
   }
   
   .art-piece:hover .art-image img {
       transform: scale(1.02);
   }
   
   .art-caption {
       flex: 0.8;
       min-width: 0;
   }
   
   .art-caption h3 {
       font-family: var(--font-title), serif;
       font-size: 2rem;
       font-weight: 400;
       margin: 0 0 20px 0;
       color: #fff;
       line-height: 1.2;
   }
   
   /* Le bloc histoire stylisé comme vos citations de témoignages */
   .art-story {
       background: rgba(255, 255, 255, 0.01);
       border-left: 2px solid #c6a46a;
       padding: 20px 24px;
       margin-bottom: 25px;
       border-top: 1px solid rgba(255, 255, 255, 0.02);
       border-right: 1px solid rgba(255, 255, 255, 0.02);
       border-bottom: 1px solid rgba(255, 255, 255, 0.02);
   }
   
   .story-label {
       display: block;
       color: #c6a46a;
       font-size: 0.68em;
       letter-spacing: 0.15em;
       text-transform: uppercase;
       margin-bottom: 8px;
       font-weight: 600;
   }
   
   .art-story p {
       font-size: 1.05em;
       line-height: 1.7;
       color: rgba(255, 255, 255, 0.85);
       margin: 0;
       font-style: italic;
   }
   
   .art-empty-story, 
   .empty-gallery {
       color: rgba(255, 255, 255, 0.4);
       font-size: 0.95em;
       line-height: 1.6;
   }
   
   .art-meta {
       font-size: 0.75em;
       color: rgba(255, 255, 255, 0.4);
       text-transform: uppercase;
       letter-spacing: 0.15em;
   }
   
   
   /* ==========================================================================
      4. RESPONSIVE DESIGN COMPLET
      ========================================================================== */
   
   /* Tablettes et écrans intermédiaires */
   @media screen and (max-width: 1024px) {
       .univers-row, 
       .art-piece {
           gap: 40px;
       }
       .univers-mosaic {
           height: 420px;
       }
   }
   
   /* Bascule en une seule colonne (Écrans verticaux & Mobiles) */
   @media screen and (max-width: 768px) {
       .univers-container, 
       .univers-detail-container {
           padding-top: 120px;
       }
       
       .univers-intro, 
       .detail-header {
           margin-bottom: 60px;
       }
       
       .univers-intro h1, 
       .detail-header h1 {
           font-size: 2.8rem;
       }
   
       .univers-row, 
       .univers-row.row-reverse, 
       .art-piece, 
       .art-piece.art-right {
           flex-direction: column;
           align-items: stretch;
           gap: 35px;
           margin-bottom: 80px;
       }
       
       .univers-text, 
       .art-caption {
           width: 100%;
       }
   
       .univers-mosaic {
           height: 340px;
           width: 100%;
       }
       
       .editorial-gallery {
           gap: 70px;
       }
   
       .art-image {
           max-height: 400px;
       }
   }