/*
 * CHARTE GRAPHIQUE CSS
 * Ligue de Billard Centre-Val de Loire
 * Site : https://ligue-billard-centre-val-de-loire.fr
 * Extrait le : 18 juin 2026
 * Template Joomla : theme3652 (T3 Framework / Bootstrap 3)
 * ============================================================
 */


/* ============================================================
   1. PALETTE DE COULEURS
   ============================================================ */

:root {
  /* --- Couleurs principales --- */
  --color-primary:        #1864af;   /* Bleu principal — liens, footer, boutons, accents */
  --color-primary-dark:   #124a82;   /* Bleu foncé — hover bouton primaire */
  --color-primary-darker: #0e3863;   /* Bleu très foncé — bordure bouton */
  --color-primary-hover:  #2d92cb;   /* Bleu clair — hover des liens */
  --color-nav-link:       #1864af;   /* Lien navigation actif/survolé */
  --color-nav-text:       #000000;   /* Texte navigation */

  /* --- Couleurs neutres --- */
  --color-body-text:      #909090;   /* Texte courant (gris moyen) */
  --color-heading:        #000000;   /* Titres h1–h6 */
  --color-subtext:        #999999;   /* Sous-textes, dates, méta */
  --color-dark:           #333333;   /* Texte sombre secondaire */
  --color-dark-nav:       #272727;   /* Fond input / éléments sombres */
  --color-inverse-bg:     #222222;   /* Navbar inverse */

  /* --- Couleurs de fond --- */
  --color-bg-body:        #ffffff;   /* Fond page principal */
  --color-bg-footer:      #1864af;   /* Fond footer (bleu primaire) */
  --color-bg-light:       #f5f5f5;   /* Fond léger (tableaux, code) */
  --color-bg-lighter:     #f9f9f9;   /* Fond très léger */
  --color-separator:      #efefef;   /* Bordure séparatrice (h1, hr) */
  --color-border:         #e5e5e5;   /* Bordure standard */
  --color-border-input:   #dddddd;   /* Bordure des champs de saisie */

  /* --- Couleurs texte footer --- */
  --color-footer-text:    #ffffff;   /* Texte footer */
  --color-footer-muted:   rgba(255,255,255,0.5); /* Texte footer secondaire */

  /* --- Couleurs d'état / alertes --- */
  --color-success-text:   #3c763d;
  --color-success-bg:     #dff0d8;
  --color-info-text:      #31708f;
  --color-info-bg:        #d9edf7;
  --color-warning-text:   #8a6d3b;
  --color-warning-bg:     #fcf8e3;
  --color-danger-text:    #a94442;
  --color-danger-bg:      #f2dede;
  --color-error:          #cc0000;
}


/* ============================================================
   2. TYPOGRAPHIE
   ============================================================ */

/* --- Police principale --- */
/* Google Font utilisée : Roboto (chargée via template) */
/* Fallback : sans-serif système */

body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 18px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  color: var(--color-body-text);        /* #909090 */
  background: var(--color-bg-body);    /* #ffffff */
}

/* --- Titres --- */
h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 32px;
  line-height: 38px;
  font-weight: 700;
  color: var(--color-heading);          /* #000000 */
  font-style: normal;
  text-align: left;
  margin-bottom: 30px;
  padding-bottom: 11px;
  border-bottom: 6px solid var(--color-separator);  /* #efefef */
}

h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 26px;
  line-height: 30px;
  font-weight: 700;
  color: var(--color-heading);
  font-style: normal;
  text-align: left;
  margin-bottom: 30px;
}

h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  color: var(--color-heading);
  font-style: normal;
  text-align: left;
  margin-bottom: 30px;
}

h4 {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  color: var(--color-heading);
  font-style: normal;
  text-align: left;
  margin-bottom: 20px;
}

h5 {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-heading);
}

h6 {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-heading);
}

/* --- Liens --- */
a {
  color: var(--color-primary);          /* #1864af */
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: var(--color-primary-hover);   /* #2d92cb */
  text-decoration: none;
}

/* --- Texte de taille réduite --- */
small, .small { font-size: 85%; }
.text-muted    { color: var(--color-subtext); }  /* #999999 */


/* ============================================================
   3. NAVIGATION PRINCIPALE (Mega Menu)
   ============================================================ */

.navbar {
  border: none;
  margin-bottom: 0;
  min-height: auto;
  background-color: transparent;
  border-color: var(--color-separator);  /* #efefef */
}

.navbar-default .navbar-brand {
  color: var(--color-dark);             /* #333333 */
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #1a1a1a;
  background-color: transparent;
}

/* Liens du menu */
.mega-nav a,
nav a {
  color: var(--color-nav-text);         /* #000000 */
}

.mega-nav a:hover,
nav a:hover,
.mega-nav a.active {
  color: var(--color-primary);          /* #1864af */
}


/* ============================================================
   4. BOUTONS
   ============================================================ */

/* Bouton primaire */
.btn-primary {
  color: #ffffff;
  background-color: var(--color-primary);       /* #1864af */
  border-color: #ffffff;
  transition: 0.3s;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  color: #ffffff;
  background-color: var(--color-primary-dark);  /* #124a82 */
  border-color: var(--color-primary-darker);    /* #0e3863 */
}


/* ============================================================
   5. HEADER
   ============================================================ */

/* Le header utilise des images de fond thématiques :
   - /images/EnteteSiteGauche.png       (image gauche entête)
   - /images/Entte_rencontre_CBD37.png  (variante thématique)
   Le logo : /images/Logo_LBCVL_Petit.jpg
*/

#t3-header {
  position: relative;
}

/* Zone de fil d'Ariane (breadcrumbs) */
.t3-breadcrumbs {
  background: url("/templates/theme3652/images/breadcrumbs-image-1.jpg");
  background-size: cover;
}


/* ============================================================
   6. FOOTER
   ============================================================ */

.t3-footer {
  background: var(--color-bg-footer);  /* #1864af — bleu primaire */
  color: var(--color-footer-text);     /* #ffffff */
}

.t3-footer a {
  color: #ffffff;
}

.t3-footer .muted,
.t3-footer small {
  color: var(--color-footer-muted);    /* rgba(255,255,255,0.5) */
}


/* ============================================================
   7. MODULES / WIDGETS
   ============================================================ */

.module-title {
  background: transparent;
  color: inherit;
  font-size: 20px;
  margin: 0 0 9px 0;
  padding: 0;
}


/* ============================================================
   8. ICÔNES
   ============================================================ */

/* Le site utilise les librairies d'icônes suivantes :
   - Font Awesome 4.x  (/templates/theme3652/fonts/font-awesome/)
   - Material Design Icons  (/templates/theme3652/fonts/material-design/)
   - Material Icons  (/templates/theme3652/fonts/material-icons/)
   - Glyphicons  (/templates/theme3652/fonts/glyphicons/)
   - Linearicons  (/templates/theme3652/fonts/linearicons/)
   - Thin icons  (/templates/theme3652/fonts/thin/)
*/


/* ============================================================
   9. GRILLE & MISE EN PAGE
   ============================================================ */

/* Bootstrap 3 — breakpoints :
   - xs : < 480px
   - sm : >= 768px
   - md : >= 992px
   - lg : >= 1200px
   (valeurs issues de body-data-holder:before content)
*/

/* Conteneur principal responsive Bootstrap 3 */
.container {
  /* max-width standard Bootstrap 3 :
     768px+  → 750px
     992px+  → 970px
     1200px+ → 1170px
  */
}


/* ============================================================
   10. CHAMPS DE FORMULAIRE
   ============================================================ */

input,
textarea,
select {
  font-size: 16px;
  color: #ffffff;
  background-color: var(--color-dark-nav);  /* #272727 */
  border: 1px solid var(--color-border);    /* #e5e5e5 */
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

input:focus,
textarea:focus {
  border-color: var(--color-primary);       /* #1864af */
}

input::placeholder {
  color: #ffffff;
  opacity: 0.7;
}

input[disabled],
input[readonly] {
  background-color: #eeeeee;
}


/* ============================================================
   11. RÉSUMÉ DE LA CHARTE
   ============================================================

   COULEURS
   --------
   Bleu primaire      #1864af   → liens, boutons, footer, accents
   Bleu foncé         #124a82   → hover boutons
   Bleu clair hover   #2d92cb   → hover liens
   Texte courant      #909090   → corps de texte
   Titres             #000000   → h1–h6
   Fond page          #ffffff   → background body
   Séparateur         #efefef   → bordure sous h1

   TYPOGRAPHIE
   -----------
   Police : Roboto (Google Fonts), fallback sans-serif
   Corps  : 16px / 400 / line-height 18px
   H1     : 32px / 700 / border-bottom 6px solid #efefef
   H2     : 26px / 700
   H3     : 22px / 700
   H4     : 20px / 700
   H5     : 18px / 700
   H6     : 14px / 700

   ICÔNES
   ------
   Font Awesome 4.x, Material Design Icons,
   Glyphicons, Linearicons, Material Icons, Thin Icons

   FRAMEWORK
   ---------
   Joomla CMS (index.php routing)
   Template T3 Framework + Bootstrap 3
   Intégrations : Power BI, Microsoft Forms

   ============================================================ */