/* ==========================================================================
   MATRICE BLOG CSS - VERSION V7 (FINALE & COMPLÈTE)
   ========================================================================== */

/* --- 0. FONTS & RESET --- */
@font-face {
  font-family: 'G-Manuscript';
  src: url('../static/fonts/G-Manuscript.woff2') format('woff2');
  font-weight: normal; font-style: normal;
}

html, body {
  background-color: #070707 !important;
  background-image: none !important;
  margin: 0; padding: 0; 
  min-height: 100vh; 
  width: 100%;
  
  /* SÉCURITÉ ANTI-SCROLL HORIZONTAL */
  max-width: 100vw;
  overflow-x: hidden;
}

/* --- 1. VARIABLES --- */
:root {
  --color-orange-brand: #f37021;
  --color-text-white: #eeeeee;
  --font-main: "Inter", sans-serif;
  --font-script: 'G-Manuscript', cursive;
  --dl-color-theme-neutral-light: #fbfaf9;
}

/* --- 2. CONTENEUR PRINCIPAL --- */
.matrixblog-container10 {
  width: 100%; 
  display: flex; 
  min-height: 100vh; 
  align-items: center; 
  flex-direction: column;
  
  background-image: radial-gradient(circle at center, rgb(5, 11, 36) 1.00%, rgb(7, 7, 7) 72.00%, rgb(7, 7, 7) 97.00%) !important;
  background-repeat: no-repeat; background-size: cover;
  
  color: var(--color-text-white); font-family: var(--font-main);
  
  /* Sécurité largeur */
  max-width: 100%;
  box-sizing: border-box;
}
.matrixblog-navlink1 { display: contents; text-decoration: none; color: inherit; }

/* --- 3. HEADER (Sans THQ) --- */
.matrixblog-header {
  flex: 0 0 auto; 
  width: 100%; 
  min-height: 150px; 
  display: flex;
  background-color: transparent !important; 
  border-bottom: 1px solid rgba(255,255,255,0.1); 
  padding: 0;
  
  /* Flex wrap pour éviter la casse */
  flex-wrap: wrap; 
}

.matrixblog-nom {
  flex: 0 0 auto; width: 40%; display: flex; padding-left: 3rem;
  flex-direction: column; justify-content: center; align-items: flex-start;
  box-sizing: border-box;
}

.matrixblog-text10 {
  color: #fbfaf9; font-size: 7em; margin: 0; font-family: var(--font-script);
  line-height: 0.8; padding-top: 1rem;
  
  /* Sécurité si nom très long */
  max-width: 100%;
  word-wrap: break-word;
}

.matrixblog-text { display: flex; width: 100%; align-items: flex-start; }

.matrixblog-text11 {
  color: var(--color-orange-brand); font-family: var(--font-main); font-size: 1.5rem;
  letter-spacing: 1px; text-transform: uppercase; margin-top: -5px; padding-bottom: 1rem;
  
  display: none; /* CACHÉ SUR DESKTOP PAR DÉFAUT */
}

.matrixblog-container11 {
  flex: 1; /* Prend le reste de la place */
  display: flex; flex-direction: column;
  justify-content: center; padding-right: 3rem; align-items: flex-end;
  box-sizing: border-box;
}

.matrixblog-text13 {
  color: rgba(243, 112, 33, 0.667); 
  
  /* TAILLE FLUIDE MAGIQUE (Min: 1.5rem, Idéal: 3.5vw, Max: 3.5em) */
  font-size: clamp(1.5rem, 3.5vw, 3.5em);
  
  text-align: right;
  font-weight: 700; font-family: var(--font-main); margin: 0;
  
  max-width: 100%;
  word-wrap: break-word;
}

/* --- 4. CORPS --- */
.matrixblog-body {
  flex: 1; width: 100%; max-width: 1200px; display: flex; margin-top: 3rem; flex-direction: column;
}
.matrixblog-brief { width: 100%; display: flex; flex-direction: column; margin-bottom: 3rem; }
.matrixblog-titre { padding: 0 3rem; display: flex; flex-direction: column; }
.matrixblog-text14 {
  color: #fff; font-size: 3em; font-weight: 700; margin-bottom: 0.5rem; line-height: 1.1;
}

.matrixblog-text15 {
  color: #fbfaf9 !important; 
  opacity: 0.85 !important;
}

.matrixblog-chapeau { padding: 0 4rem; }
.matrixblog-text16 {
  color: #eee; font-size: 1.5em; font-style: italic; font-weight: 300;
  border-left: 4px solid var(--color-orange-brand); padding-left: 1.5rem;
}
.matrixblog-developpement { padding: 0 4rem; margin-bottom: 4rem; background-color: transparent !important; }

/* ==========================================================================
   ZONE DE CONTENU BLINDÉE (#force-blog-design)
   ========================================================================== */
#force-blog-design {
  width: 100%; display: block; background: transparent !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 300 !important; font-size: 1.25em !important;
  line-height: 1.5 !important; color: #fbfaf9 !important;
  text-align: left !important; white-space: normal !important;
}

#force-blog-design * {
  color: #fbfaf9 !important; font-family: "Inter", sans-serif !important;
  background-color: transparent !important; margin-top: 0 !important; margin-bottom: 0 !important;
}

#force-blog-design p, #force-blog-design div {
  display: block; margin-bottom: 1rem !important; min-height: 1rem;
}

/* TITRES UNIFIÉS */
#force-blog-design h1, 
#force-blog-design h2, 
#force-blog-design h3, 
#force-blog-design h4, 
#force-blog-design h5, 
#force-blog-design h6, 
#force-blog-design strong {
  color: #fbfaf9 !important; 
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important; 
  font-size: 1.25em !important; 
  margin-top: 0.75rem !important; 
  margin-bottom: 0.75rem !important;
  line-height: 1.2 !important; 
  display: block; 
  white-space: normal !important;
}

#force-blog-design ul, #force-blog-design ol {
  margin-bottom: 1rem !important; padding-left: 2rem;
}
#force-blog-design li { margin-bottom: 0.25rem !important; }
#force-blog-design a { color: var(--color-orange-brand) !important; text-decoration: underline; }
#force-blog-design img {
  max-width: 100%; height: auto; border-radius: 8px; margin: 1.5rem 0 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* --- 5. FOOTER SÉCURISÉ --- */
.matrixblog-footer {
  width: 100%; 
  height: 120px; 
  display: flex; 
  justify-content: center; /* Centre le contenu principal */
  align-items: center;
  background-color: #070707; 
  border-top: 1px solid #333; 
  position: relative; /* Base pour l'absolu */
  padding: 0 2rem; /* Marges de sécurité */
  box-sizing: border-box;
}

.footer-text-dark { 
  color: #666; font-size: 0.9rem; text-decoration: none; font-family: var(--font-main); 
}
.matrixblog-navlink2 { color: #666; margin-left: 5px; text-decoration: none; }

.matrixblog-liens {
  position: absolute;
  right: 2rem; /* Collé à droite */
  display: flex;
  gap: 1rem;
}

.matrixblog-image1, .matrixblog-image2 { 
  height: 25px; width: auto; filter: invert(0.4); transition: 0.3s; 
  display: block;
}
.matrixblog-image1:hover, .matrixblog-image2:hover { filter: invert(1); }

/* Force les titres d'articles en blanc, tous états confondus */
.matrixblog-text14 a,
.matrixblog-text14 a:link,
.matrixblog-text14 a:visited,
.matrixblog-text14 a:hover,
.matrixblog-text14 a:active {
  color: #fbfaf9 !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease;
}

.matrixblog-text14 a:hover {
  opacity: 0.85;  /* Feedback visuel subtil au survol */
}

/* Sécurise le bouton "Lire la suite" en orange */
.read-more-btn,
.read-more-btn:link,
.read-more-btn:visited {
  color: #f37021 !important;
  text-decoration: underline !important;
}

.read-more-btn:hover {
  opacity: 0.85;  /* Même effet que le titre */
}


/* --- 6. RESPONSIVE --- */
@media(max-width: 1400px) {
  .matrixblog-header { flex-direction: column; padding: 1rem 0; height: auto; }
  .matrixblog-nom { width: 100%; padding: 0 2rem; }
  .matrixblog-text10 { font-size: 6em; }
  
  /* Affiche le sous-titre sur petit écran */
  .matrixblog-text11 { display: block; margin-top: -5px; }
  
  /* Cache le slogan sur petit écran */
  .matrixblog-container11 { display: none; }
}

@media(max-width: 992px) {
  .matrixblog-text10 { font-size: 4em; }
  .matrixblog-titre, .matrixblog-chapeau, .matrixblog-developpement { padding: 0 1.5rem; }
  
  /* FOOTER MOBILE : On passe en vertical */
  .matrixblog-footer { 
    flex-direction: column; 
    height: auto; 
    padding: 2rem; 
    gap: 1rem; 
    text-align: center;
  }
  
  /* Les liens ne sont plus absolus en mobile */
  .matrixblog-liens { 
    position: static; 
    right: auto; 
    justify-content: center;
    margin-top: 0.5rem;
  }
}