/**
 * GVA Title Styles - CSS des 10 Styles de Titres
 * 
 * Variables CSS pour personnalisation facile
 * Compatible avec le thème dardev_ada
 */

/* ============================================
   VARIABLES CSS - À personnaliser selon le thème
   ============================================ */
:root {
   --title-brand-primary: #0ea5e9;   /* Bleu principal */
   --title-brand-secondary: #0f172a; /* Texte foncé */
   --title-brand-accent: #38bdf8;    /* Accent plus clair */
   --title-brand-bg: #f8fafc;        /* Fond très clair */
}

/* ============================================
   WRAPPER & BASE
   ============================================ */
.gva-title-styles-wrapper {
   padding: 30px 0;
}

.gva-title-styled {
   margin: 0;
   line-height: 1.3;
}

/* ============================================
   STYLE 1 : SANDWICH BORDER (Centré + Lignes)
   ============================================ */
.gva-title-styled.style-sandwich {
   font-weight: 700; 
   text-align: center; 
   border-top: 1px solid #e2e8f0; 
   border-bottom: 1px solid #e2e8f0;
   padding: 12px 0; 
   width: fit-content; 
   margin: 0 auto;
   color: var(--title-brand-secondary);
}

/* ============================================
   STYLE 2 : GRADIENT LEFT (Fond Dégradé)
   ============================================ */
.gva-title-styled.style-gradient_left {
   font-weight: 700; 
   padding: 12px 20px; 
   background: linear-gradient(90deg, #f0f9ff 0%, transparent 100%);
   border-left: 4px solid var(--title-brand-primary);
   color: var(--title-brand-secondary);
}

/* ============================================
   STYLE 3 : CORNER MARK (Coin Marqué)
   ============================================ */
.gva-title-styled.style-corner {
   font-weight: 700; 
   position: relative; 
   display: inline-block; 
   padding-right: 15px; 
   padding-bottom: 8px;
   color: var(--title-brand-secondary);
}

.gva-title-styled.style-corner::after {
   content: ''; 
   position: absolute; 
   bottom: 0; 
   right: 0; 
   width: 12px; 
   height: 12px;
   border-bottom: 3px solid var(--title-brand-primary); 
   border-right: 3px solid var(--title-brand-primary);
}

/* ============================================
   STYLE 4 : LEFT BAR (Simple Barre)
   ============================================ */
.gva-title-styled.style-left_bar {
   border-left: 4px solid var(--title-brand-primary);
   padding-left: 20px;
   color: var(--title-brand-secondary);
   font-weight: 700;
   line-height: 1.3;
   margin: 0;
}

/* ============================================
   STYLE 5 : CENTER TRAIT (Trait Centré)
   ============================================ */
.gva-title-styled.style-center_trait {
   text-align: center;
   color: var(--title-brand-secondary);
   font-weight: 700;
   margin-bottom: 15px;
   position: relative;
   padding-bottom: 15px;
}

.gva-title-styled.style-center_trait::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 50px;
   height: 3px;
   background-color: var(--title-brand-primary);
   border-radius: 2px;
}

/* ============================================
   STYLE 6 : DOTTED LINE (Pointillés)
   ============================================ */
.gva-title-styled.style-dotted {
   font-weight: 600;
   color: #475569;
   border-bottom: 3px dotted #cbd5e1;
   padding-bottom: 5px;
   display: inline-block;
}

/* ============================================
   STYLE 7 : THE SLASH (Barre Oblique)
   ============================================ */
.gva-title-styled.style-slash {
   font-weight: 800;
   color: var(--title-brand-secondary);
   position: relative;
   padding-left: 25px;
}

.gva-title-styled.style-slash::before {
   content: '';
   position: absolute;
   left: 0;
   top: 5px;
   bottom: 5px;
   width: 5px;
   background-color: var(--title-brand-primary);
   transform: skewX(-20deg);
}

/* ============================================
   STYLE 8 : GRADIENT BAR (Barre Dégradée)
   ============================================ */
.gva-title-styled.style-gradient_bar {
   font-weight: 800;
   color: var(--title-brand-secondary);
   position: relative;
   padding-bottom: 10px;
   display: inline-block;
}

.gva-title-styled.style-gradient_bar::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 60%; 
   height: 6px;
   border-radius: 6px;
   background: linear-gradient(90deg, var(--title-brand-primary), var(--title-brand-accent));
}

/* ============================================
   STYLE 9 : TWO TONE (Bicolore)
   ============================================ */
.gva-title-styled.style-two_tone {
   font-weight: 800;
   color: var(--title-brand-secondary);
   text-transform: uppercase;
   border-left: 6px solid var(--title-brand-primary);
   padding-left: 20px;
   line-height: 1.2;
}

.gva-title-styled.style-two_tone .highlight,
.gva-title-styled.style-two_tone span {
   color: var(--title-brand-primary);
}

/* ============================================
   STYLE 10 : TEXT SLASH (Préfixe //)
   ============================================ */
.gva-title-styled.style-slash_text {
   font-weight: 700;
   color: var(--title-brand-secondary);
}

.gva-title-styled.style-slash_text::before {
   content: '//'; 
   color: var(--title-brand-primary); 
   margin-right: 10px; 
   font-weight: 900;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
   /* Réduire padding sur mobile */
   .gva-title-styled.style-gradient_left {
      padding: 10px 15px;
   }
   
   .gva-title-styled.style-left_bar {
      padding-left: 15px;
   }
   
   .gva-title-styled.style-two_tone {
      padding-left: 15px;
      font-size: 1.3rem;
   }
   
   /* Réduire largeur barre gradient */
   .gva-title-styled.style-gradient_bar::after {
      width: 80%;
   }
}

@media (max-width: 576px) {
   /* Ajustements pour très petits écrans */
   .gva-title-styled.style-sandwich {
      padding: 10px 15px;
   }
   
   .gva-title-styled.style-slash::before {
      width: 4px;
   }
   
   .gva-title-styled.style-slash_text::before {
      font-size: 0.9em;
   }
}

/* ============================================
   UTILITAIRES
   ============================================ */

/* Override text-align si besoin */
.gva-title-styled.text-left {
   text-align: left !important;
}

.gva-title-styled.text-center {
   text-align: center !important;
}

.gva-title-styled.text-right {
   text-align: right !important;
}

/* Pour les styles qui utilisent inline-block, permettre le centrage */
.gva-title-styled.text-center.style-dotted,
.gva-title-styled.text-center.style-gradient_bar,
.gva-title-styled.text-center.style-corner {
   margin-left: auto;
   margin-right: auto;
}