/**
 * GVA Heading - 7 Styles CSS
 * 
 * Styles modernes avec décoration tricolore
 * Palette ADA : Bleu #0ea5e9, Orange #f97316, Vert #84cc16
 */

/* ============================================
   VARIABLES CSS - Palette ADA
   ============================================ */
:root {
   --c-blue: #0ea5e9;
   --c-orange: #f97316;
   --c-green: #84cc16;
   --text-color: #1e293b;
}

/* ============================================
   UTILITAIRES - Couleurs de fond
   ============================================ */
.bg-blue { background: var(--c-blue); }
.bg-orange { background: var(--c-orange); }
.bg-green { background: var(--c-green); }

/* ============================================
   STYLE 1 : FIDÈLE & MODERNE
   3 points à gauche + soulignement
   ============================================ */
.title-faithful {
   display: flex;
   align-items: center;
   gap: 15px;
}

.decor-dots {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.decor-dots .dot {
   width: 8px;
   height: 8px;
   border-radius: 2px;
}

.text-faithful {
   font-size: 1.8rem;
   font-weight: 700;
   font-style: italic; 
   color: var(--text-color);
   position: relative;
   padding-bottom: 15px;
   margin: 0;
}

.text-faithful::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 60px; 
   height: 5px;
   background-color: var(--c-green);
   border-radius: 10px;
}

/* ============================================
   STYLE 2 : BARRES HORIZONTALES SUPÉRIEURES
   3 barres au-dessus du titre
   ============================================ */
.style-trio-top-wrapper .decor {
   display: flex;
   gap: 5px;
   margin-bottom: 15px;
}

.style-trio-top-wrapper .box {
   width: 30px;
   height: 4px;
   border-radius: 2px;
}

.style-trio-top-wrapper h1,
.style-trio-top-wrapper h2,
.style-trio-top-wrapper h3,
.style-trio-top-wrapper h4,
.style-trio-top-wrapper h5,
.style-trio-top-wrapper h6 {
   padding-bottom: 15px;
   display: inline-block;
   margin: 0;
}

/* ============================================
   STYLE 3 : SOULIGNEMENT TRICOLORE
   Trait multicolore sous le titre
   ============================================ */
.style-tricolor-line {
   font-style: italic;
   position: relative;
   padding-bottom: 15px;
   margin: 0;
}

.style-tricolor-line::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 120px;
   height: 6px;
   border-radius: 3px;
   background: linear-gradient(90deg, 
      var(--c-blue) 0%, var(--c-blue) 33.33%, 
      var(--c-orange) 33.33%, var(--c-orange) 66.66%, 
      var(--c-green) 66.66%, var(--c-green) 100%);
}

/* ============================================
   STYLE 4 : CERCLES LATÉRAUX + SOULIGNÉ
   3 cercles à gauche + soulignement
   ============================================ */
.style-circles-wrapper {
   display: flex;
   align-items: flex-start;
   gap: 15px;
   position: relative;
}

.style-circles-wrapper .dots-col {
   display: flex;
   flex-direction: column;
   gap: 6px;
   padding-top: 8px;
}

.style-circles-wrapper .circle {
   width: 10px;
   height: 10px;
   border-radius: 50%;
}

.style-circles-title {
   font-weight: 700;
   position: relative;
   padding-bottom: 10px;
   margin: 0;
}

.style-circles-title::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 60px; 
   height: 5px;
   background-color: var(--c-green);
   border-radius: 10px;
}

/* ============================================
   STYLE 5 : BARRE LATÉRALE DÉGRADÉE
   Barre verticale dégradée à gauche
   ============================================ */
.style-pill {
   padding-left: 25px;
   position: relative;
   margin: 0;
}

.style-pill::before {
   content: '';
   position: absolute;
   left: 0;
   top: 5px;
   bottom: 5px;
   width: 8px;
   border-radius: 20px;
   background: linear-gradient(to bottom, var(--c-blue), var(--c-orange), var(--c-green));
}

/* ============================================
   STYLE 6 : CONSTRUCTION GÉOMÉTRIQUE
   Blocs en grille à gauche
   ============================================ */
.style-blocks-wrapper {
   display: flex;
   align-items: flex-start;
   gap: 20px;
}

.style-blocks-wrapper .grid-decor {
   display: grid;
   grid-template-columns: 8px 8px;
   grid-template-rows: 8px 8px;
   gap: 3px;
   margin-top: 5px;
}

.grid-decor .b1 {
   background: var(--c-blue);
   grid-column: 1 / 3;
   width: 100%;
   height: 8px;
   border-radius: 2px;
}

.grid-decor .b2 {
   background: var(--c-orange);
   width: 8px;
   height: 8px;
   border-radius: 1px;
}

.grid-decor .b3 {
   background: var(--c-green);
   width: 8px;
   height: 8px;
   border-radius: 1px;
}

.style-blocks-wrapper h1,
.style-blocks-wrapper h2,
.style-blocks-wrapper h3,
.style-blocks-wrapper h4,
.style-blocks-wrapper h5,
.style-blocks-wrapper h6 {
   padding-bottom: 8px;
   display: inline-block;
   margin: 0;
}

/* ============================================
   STYLE 7 : BARRES HORIZONTALES INFÉRIEURES
   3 barres sous le titre
   ============================================ */
.style-trio-bottom-wrapper h1,
.style-trio-bottom-wrapper h2,
.style-trio-bottom-wrapper h3,
.style-trio-bottom-wrapper h4,
.style-trio-bottom-wrapper h5,
.style-trio-bottom-wrapper h6 {
   margin: 0 0 15px 0;
}

.style-trio-bottom-wrapper .decor {
   display: flex;
   gap: 5px;
}

.style-trio-bottom-wrapper .box {
   width: 30px;
   height: 4px;
   border-radius: 2px;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Tablette */
@media (max-width: 992px) {
   .text-faithful {
      font-size: 1.5rem;
   }
   
   .style-pill {
      padding-left: 20px;
   }
}

/* Mobile */
@media (max-width: 768px) {
   .text-faithful {
      font-size: 1.3rem;
   }
   
   .title-faithful {
      gap: 12px;
   }
   
   .decor-dots .dot {
      width: 6px;
      height: 6px;
   }
   
   .style-circles-wrapper .circle {
      width: 8px;
      height: 8px;
   }
   
   .style-blocks-wrapper {
      gap: 15px;
   }
   
   .style-pill {
      padding-left: 18px;
   }
   
   .style-pill::before {
      width: 6px;
   }
}

@media (max-width: 576px) {
   .text-faithful::after {
      width: 50px;
      height: 4px;
   }
   
   .style-tricolor-line::after {
      width: 100px;
      height: 5px;
   }
   
   .style-circles-title::after {
      width: 50px;
      height: 4px;
   }
   
   .style-trio-top-wrapper .box,
   .style-trio-bottom-wrapper .box {
      width: 25px;
      height: 3px;
   }
}

/* ============================================
   ALIGNEMENT
   ============================================ */

/* Alignement Centre */
.align-center .title-faithful,
.align-center .style-circles-wrapper,
.align-center .style-blocks-wrapper,
.align-center .style-trio-top-wrapper,
.align-center .style-trio-bottom-wrapper {
   justify-content: center;
}

.align-center .text-faithful::after,
.align-center .style-tricolor-line::after,
.align-center .style-circles-title::after {
   left: 50%;
   transform: translateX(-50%);
}

.align-center .style-pill::before {
   left: 50%;
   transform: translateX(-50%);
}

.align-center .style-pill {
   padding-left: 0;
   text-align: center;
}

/* Alignement Droite */
.align-right .title-faithful,
.align-right .style-circles-wrapper,
.align-right .style-blocks-wrapper,
.align-right .style-trio-top-wrapper,
.align-right .style-trio-bottom-wrapper {
   justify-content: flex-end;
}

.align-right .text-faithful::after,
.align-right .style-tricolor-line::after,
.align-right .style-circles-title::after {
   left: auto;
   right: 0;
}

.align-right .style-pill::before {
   left: auto;
   right: 0;
}

.align-right .style-pill {
   padding-left: 0;
   padding-right: 25px;
   text-align: right;
}

/* ============================================
   DESCRIPTION
   ============================================ */
.title-desc {
   margin-top: 20px;
   line-height: 1.6;
}