@charset "utf-8";
/* ==========================================================================
   1. VARIABLES GLOBALES (VARIABLES BOOTSTRAP / PHOTOFOLIO OVERRIDES)
   ========================================================================== */

/* Application de la police Quicksand sur tout le site */
body, input, textarea, button, .sitename, h1, h2, h3, h4, h5, h6 {
  font-family: 'Quicksand', sans-serif !important;
}

body {
  color: var(--default-color);
  background-color: var(--background-color);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, .sitename {
  font-weight: 500 !important;
}

/* ==========================================================================
   2. INTERFACES DU TEMPLATE & COULEURS D'ACCENTUATION
   ========================================================================== */

/* Couleur des liens généraux et du menu actif */
a, 
.header .navmenu a.active, 
.header .navmenu ul a:hover {
  color: #7a8d99 !important;
}

/* Le bouton "Entrée..." du Hero (btn-get-started) */
.btn-get-started {
  background-color: #7a8d99 !important;
  border: 2px solid #7a8d99 !important;
  color: #ffffff !important;
  transition: all 0.3s ease-in-out;
}

.btn-get-started:hover {
  background-color: #5b6c77 !important;
  border-color: #5b6c77 !important;
  color: #ffffff !important;
}

/* Le bouton de retour en haut (Scroll Top du template) */
.scroll-top {
  background-color: #7a8d99 !important;
}
.scroll-top:hover {
  background-color: #5b6c77 !important;
}

/* Boutons Bootstrap standards (.btn-primary) */
.btn-primary {
  background-color: #7a8d99 !important;
  border-color: #7a8d99 !important;
}
.btn-primary:hover {
  background-color: #5b6c77 !important;
  border-color: #5b6c77 !important;
}

/* ==========================================================================
   3. PERFECTIONNEMENT DU MODULE DE COMMENTAIRES & RÉPONSES
   ========================================================================== */

/* Bloc de décalage des réponses */
.reply {
  border-left: 3px solid #7a8d99 !important; /* Harmonisé avec ta couleur signature */
  padding-left: 15px;
}

/* Séparation fine et bien visible entre les réponses consécutives */
.reply-block + .reply-block {
  border-top: 2px solid #34444c !important; /* Ligne douce intégrée au fond ardoise */
  margin-top: 1.5rem !important;
  padding-top: 1.2rem !important;
}

/* Badge Admin style "Édition / Littéraire" */
.badge.bg-success {
  background-color: transparent !important;
  color: #a2abbb !important;
  border: 1px solid #a2abbb !important;
  font-family: "Georgia", serif;
  font-style: italic;
  font-weight: normal;
  padding: 2px 8px !important;
  border-radius: 20px !important;
}

/* Effet de survol poétique sur les boutons d'action des réponses (Répondre / J'aime) */
.reply-block .btn-link {
  transition: color 0.2s ease, transform 0.2s ease;
  color: #a2abbb;
}
.reply-block .btn-link:hover {
  color: #ffffff !important;
  transform: translateX(2px); /* Léger décalage vers la droite */
}

/* ==========================================================================
   4. UTILITIES & CLASSES PERSO (MUSTAPHA RAYTH)
   ========================================================================== */
.gris-bleu {
  color: #A2ABBB !important;
}

.blanc {
  color: white;
}

.taille-18 {
  font-size: 24px;
}

.h2bis {
  color: #9999FF;
  font-family: 'Quicksand', sans-serif !important;
  font-size: 30px;
}

.gris-bleu-clair {
  color: #9999FF;
  font-family: 'Quicksand', sans-serif !important;
  font-size: 18px;
}

.cercle {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #7a8d99; /* Changé le contour noir par ton bleu brume pour plus de douceur */
}

.text-left {
  text-align: left;
}
/* ==========================================================================
   CORRECTION DE L'ALIGNEMENT DES IMAGES DE LA GALERIE (RÉSOLUTIF FORMATS)
   ========================================================================== */

/* 1. On cible le conteneur de chaque image de la galerie */
.gallery .gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    
    /* On force une hauteur identique pour toutes les boîtes */
    width: 100%;
    aspect-ratio: 1 / 1 !important; /* Rend toutes les boîtes parfaitement carrées */
    /* Note : Si tu préfères des boîtes rectangulaires, utilise : aspect-ratio: 4 / 3 !important; */
}

/* 2. On force l'image à remplir sa boîte proprement sans se déformer */
.gallery .gallery-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Recadre automatiquement le surplus sans écraser l'image */
    object-position: center !important; /* Centre l'image dans sa boîte */
    transition: transform 0.3s ease;
}