/* ======================================================
   RESET / BASE
====================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ======================================================
   VARIABLES (si tu veux un style cohérent)
====================================================== */

:root {
    --color-primary: #3b3b3b;
    --color-secondary: #000;
    --color-accent: #6c348b;
    --color-white;

    --font-main: "Manrope", sans-serif;
    --font-title: "Aleo", serif;

    --max-width: 1200px;

      --bs-body-font-size: 1.2rem;  
}


::selection {
  background-color: #6c348b;
  color: #fff;
}

::-moz-selection {
  background-color: #6c348b;
  color: #fff;
}


.select-text-rouge::selection {
  background-color: #d82b58; 
  color: #fff;
}

.select-text-rouge::-moz-selection{
  background-color: #d82b58;
  color: #fff;
}

.select-text-jaune::selection {
  background-color: #e0af23;
  color: #fff;
}

.select-text-jaune::-moz-selection{
  background-color: #e0af23;
  color: #fff;
}

.select-text-vert::selection {
  background-color: #129961;
  color: #fff;
}

.select-text-vert::-moz-selection{
  background-color: #129961;
  color: #fff;
}

.select-text-bleu::selection {
  background-color: #3074ba;
  color: #fff;
}

.select-text-bleu::-moz-selection{
  background-color: #3074ba;
  color: #fff;
}

/* ======================================================
   GLOBAL
====================================================== */

body {
    font-family: var(--font-main);
    color: var(--color-primary);
    background-color: #fff;
    line-height: 1.6;
}

.bg-sommet-1 {
    background-image: url("/assets/images/bg/sommet-bg-1.jpg");
    background-size: cover;          /* Remplit tout l’écran */
    background-position: center;     /* Centre l’image */
    background-repeat: no-repeat;    /* Pas de répétition */
    background-attachment: fixed;    /* Reste fixe */
    min-height: 100vh;               /* Hauteur écran */

}

.no-bg {
    background: none !important;    /* supprime toute image ou couleur de fond */
    background-image: none !important;
    background-color: transparent !important;
}

/* ======================================================
   TYPOGRAPHIE
====================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
    margin-bottom: 0.5em;
}

p {
    margin-bottom: 1em;
}

.txt-rouge {color:#d82b58}
.txt-jaune {color:#e0af23}
.txt-vert {color:#129961}
.txt-bleu {color:#3074ba}
.txt-violet {color:#6c348b}

.text-underline {
  text-decoration: underline;
  text-decoration-thickness: 2px; /* épaisseur du trait */
  text-underline-offset: 3px; /* espace entre le texte et le trait */
}

.text-underline.text-underline-rouge {
  text-decoration-color: #d82b58; /* couleur du soulignement */
}

.text-underline.text-underline-jaune {
  text-decoration-color: #e0af23; /* couleur du soulignement */
}

.text-underline.text-underline-vert {
  text-decoration-color: #129961; /* couleur du soulignement */
}

.text-underline.text-underline-bleu {
  text-decoration-color: #3074ba; /* couleur du soulignement */
}

.text-underline.text-underline-violet {
  text-decoration-color: #6c348b; /* couleur du soulignement */
}



/* ======================================================
   Liste avec les icones du Sommet
====================================================== */

.sommet-liste {
  list-style: none;
  padding-left: 0;
}
.sommet-liste li {
  position: relative;
  padding-left: 80px;
  margin-bottom: 15px;
}
.sommet-liste li img.icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 70px;
  height: 70px;
}


/* ======================================================
   LAYOUT
====================================================== */

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* ======================================================
   COMPOSANTS
====================================================== */

.btn {
    display: inline-block;
    padding: 10px 20px;
    /* background-color: var(--color-accent);
    color: #fff; */
    text-decoration: none;
    border-radius: 0px;
    transition: all 0.3s ease; /* transition douce pour toutes les propriétés */
}




.btn.btn-outline-primary {
  border: 2px solid var(--color-accent);  
  background: none;
  color: var(--color-accent);
}

.btn.btn-outline-primary:hover {
  border: 2px solid var(--color-accent);  
  background-color: var(--color-accent);
  color: #fff;
}

.bi::before, [class^="bi-"]::before, [class*=" bi-"]::before {
    font-size: 1.3em;
}


.btn-primary {
    --bs-btn-bg: #6c348b;
    --bs-btn-border-color: #4e2266;
    --bs-btn-hover-bg: #6c348b;
    --bs-btn-hover-border-color: #6c348b;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-bg: #4e2266;
    --bs-btn-active-border-color: #6c348b;
    --bs-btn-disabled-bg: #2b2b2b;
    --bs-btn-disabled-border-color: #5f5f5f;
}


.btn:hover {
    color: var(--color-accent);
    background-color: var(--color-white);
    border-color: var(--color-accent);
}    

.strong {
    font-weight: 700; /* gras */
}

/* ======================================================
    Présentation - Liste de profils
====================================================== */
.card-text {
  text-align:left;
  font-size: 1rem;
}

/* ======================================================
   SECTIONS SPÉCIFIQUES
====================================================== */

header {
    padding: 40px 0;
}

footer {
    padding: 20px 0;
    text-align: center;
}

.site-footer {

  color: #333; /* couleur du texte */
  font-size: 0.9rem;

    background: transparent;          /* pas de couleur de fond */
    border-top: 1px solid rgba(0,0,0,0.2);  /* bordure fine en haut */
    box-shadow: 0 -2px 6px rgba(0,0,0,0.1); /* ombre subtile au-dessus */
    padding: 20px;                    /* espace intérieur */
    text-align: center;               /* texte centré */

}

.site-footer a {
  color: #6c348b; /* couleur des icônes / liens */
  transition: color 0.3s ease;
}

.site-footer a:hover {
  color: #6c348b; /* couleur hover */
}

.site-footer p {
  margin-bottom: 0.5rem;
}

.footer-social {
  margin-top: 0.5rem;
}

/* Responsive : réduire la taille des icônes sur mobile */
@media (max-width: 576px) {
  .footer-social a i {
    font-size: 1.2rem;
  }
}






/* NAVIGATION MENU */

.sommet-menu.bg-light {
    background: transparent!important;             /* pas de couleur de fond */
    border-bottom: 1px solid rgba(0,0,0,0.2);  /* bordure fine en bas */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);     /* ombre vers le bas */
    padding: 20px;                       /* espace intérieur */

}


nav.sommet-menu.navbar.navbar-expand-lg {
    height: 140px;
    padding-bottom: 0;
}
.sommet-menu .navbar-brand {
    padding-bottom: 0;
}


.sommet-menu .nav-item.special a {
    color: #fff;
    background: #6c348b;
    padding: 10px 20px 10px 20px;
    margin-left: 20px;
    border: 2px solid #6c348b;
}

.sommet-menu .nav-item.special a:hover {
    color: #6c348b;
    background: #fff;

}



/* ======================================================
   Animation texte souligné
====================================================== */

.underline-hover {
  position: relative;
  color: #6c348b; /* couleur du texte */
  text-decoration: none; /* enlève le soulignement par défaut */
  transition: color 0.3s ease;
}

.underline-hover::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px; /* épaisseur du trait */
  background-color: #6c348b; /* couleur de l’underline */
  transition: width 0.3s ease; /* transition de la largeur */
}

.underline-hover:hover::after {
  width: 100%; /* passe de 0 à 100% au hover */
}


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



@media (max-width: 991.98px) {

/* Couleur menu mobile */

  .navbar-collapse {
    text-align: center;
    background: #fbe9e9;
  }

  .sommet-menu .nav-item.special a {
    margin-left: 0;
}

  .navbar-collapse.show {
    
    padding-bottom: 40px;
    border-bottom: 2px solid #6c348b;
     /* Ombre uniquement en dessous */
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.2);

  }
}


@media (max-width: 768px) {
    body {
        font-size: 16px;
    }

    .container {
        padding: 0 15px;
    }


    .social-icons a.btn {
        padding: 7px;
        border: none;
    }
    
    .social-icons .bi::before, .social-icons [class^="bi-"]::before, .social-icons [class*=" bi-"]::before {
        font-size: 1.2rem;
    }

}