/* =========================================================
   CUSTOM RESPONSIVE — adebayofayomi.fr
   ========================================================= */

/* ── SIDEBAR AVATAR EN ROND ─────────────────────────────── */
.sidebar .sidebar-header .sidebar-avatar {
  width: 110px !important;
  height: 110px !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: 4px solid rgba(51,101,176,0.6);
}

/* ── ABOUT IMAGE – rectangle naturel ────────────────────── */
.about-area .about-img img {
  border-radius: 8px !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
}

/* ── SIDEBAR FLEX – bouton RDV en bas ───────────────────── */
.sidebar { display: flex !important; flex-direction: column; }
.sidebar-menu { flex: 1; overflow-y: auto; }
.sidebar-rdv {
  display: block;
  margin: 0 20px 20px;
  flex-shrink: 0;
  text-align: center;
  background: #3365b0;
  color: #fff !important;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .2s;
}
.sidebar-rdv:hover { background: #254d8a; }
.sidebar-rdv i { margin-right: 6px; }

/* ═══════════════════════════════════════════════════════════
   PORTFOLIO / EXPÉRIENCES
═══════════════════════════════════════════════════════════ */

/* Images grille : height adaptive selon la largeur de colonne */
.portfolio-area .portfolio-wrapper {
  overflow: hidden;
  position: relative;
}
.portfolio-area .portfolio-wrapper img {
  width: 100%;
  object-fit: cover;
  display: block;
}

/* Desktop (lg+) : 3 colonnes → 220px */
@media (min-width: 992px) {
  .portfolio-area .portfolio-wrapper img {
    height: 220px !important;
  }
}
/* Tablette (sm–lg) : 2 colonnes → 180px */
@media (min-width: 576px) and (max-width: 991.98px) {
  .portfolio-area .portfolio-wrapper img {
    height: 180px !important;
  }
}
/* Mobile (<576px) : 2 colonnes étroites → 130px */
@media (max-width: 575.98px) {
  .portfolio-area .portfolio-wrapper img {
    height: 170px !important;
  }
  /* Titres des projets plus petits */
  .portfolio-area .item-content .content-title {
    font-size: 11px !important;
  }
}

/* ── LIGHTBOX images ────────────────────────────────────── */
@media (min-width: 992px) {
  .lightbox-wrapper .item-img { height: 280px !important; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .lightbox-wrapper .item-img { height: 220px !important; }
}
@media (max-width: 575.98px) {
  .lightbox-wrapper .item-img { height: 160px !important; }
  .lightbox-wrapper .lightbox-content { padding-top: 20px; }
  .lightbox-wrapper .content-info { flex-direction: column; }
}

/* ── BLOC EXPÉRIENCE SIGNIFICATIVE ──────────────────────── */
@media (max-width: 991.98px) {
  .portfolio-area .row.mb-5 > .col-12 > div {
    padding: 24px 20px !important;
  }
  /* Stats côte à côte */
  .portfolio-area [style*="display:flex;gap:20px"] {
    gap: 14px !important;
    flex-wrap: wrap;
  }
}
@media (max-width: 575.98px) {
  .portfolio-area .row.mb-5 > .col-12 > div {
    padding: 20px 16px !important;
  }
  /* Réduire la taille des chiffres */
  .portfolio-area [style*="font-size:26px"] {
    font-size: 20px !important;
  }
  /* Axes clés : full width */
  .portfolio-area .row.mb-5 .col-12.col-sm-6 {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════
   BOUTONS
═══════════════════════════════════════════════════════════ */

/* About – boutons en colonne sur mobile */
@media (max-width: 575.98px) {
  .about-area .content-block .btn {
    display: block !important;
    width: 100%;
    margin: 6px 0 !important;
    text-align: center;
  }
}

/* Collaborer – boutons en colonne */
@media (max-width: 767.98px) {
  .hire-area .button-part {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  .hire-area .hire-btn {
    margin: 0 !important;
    text-align: center;
  }
}

/* Boutons Prendre RDV dans les cards compétences */
@media (max-width: 767.98px) {
  .services-area .btn {
    padding: 6px 12px !important;
    font-size: 11px !important;
  }
}

/* Contact submit */
@media (max-width: 575.98px) {
  #contact-submit {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════
   COMPÉTENCES & EXPERTISE
═══════════════════════════════════════════════════════════ */

/* Cards compétences – 1 colonne sur mobile */
@media (max-width: 575.98px) {
  .services-area .col-12.col-md-6.col-lg-4 {
    margin-bottom: 16px;
  }
  .single-service {
    padding: 24px 18px !important;
  }
}

/* Expertise cards centrées */
.expertise-card-center {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.expertise-card-center ul { text-align: center; width: 100%; }

/* ═══════════════════════════════════════════════════════════
   CERTIFICATIONS
═══════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  #certifications-area .col-12.col-md-6 {
    margin-bottom: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════
   MÉTHODOLOGIE
═══════════════════════════════════════════════════════════ */
.methodo-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 10px;
}
@media (max-width: 575.98px) {
  .methodo-step { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 399.98px) {
  .methodo-step { flex: 0 0 100%; max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   RECOMMANDATIONS – cards même hauteur
═══════════════════════════════════════════════════════════ */
.testimonials-area .owl-stage { display: flex; }
.testimonials-area .owl-item { display: flex; }
.testimonials-area .owl-item .single-review {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.testimonials-area .single-review .review-content {
  flex: 1;
  margin-bottom: 24px;
}
.testimonials-area .single-review .client-avatar { margin-top: auto; }

/* Flèches owl */
.testimonials-area .owl-nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(51,101,176,0.15) !important;
  border-radius: 50% !important;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
}
.testimonials-area .owl-nav .owl-prev { left: -18px; }
.testimonials-area .owl-nav .owl-next { right: -18px; }
@media (max-width: 575.98px) {
  .testimonials-area .owl-nav { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   HOME
═══════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  .home-area .home-name { font-size: 32px; }
  .home-area .home-headline { font-size: 15px; }
}
@media (max-width: 575.98px) {
  .home-area .home-name { font-size: 26px; }
  .home-area .home-headline { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════
   NAVBAR MOBILE
═══════════════════════════════════════════════════════════ */
.mobile-navbar { z-index: 1000; }
@media (max-width: 991.98px) {
  .sections-wrapper > section:first-child { padding-top: 60px; }
}

/* ═══════════════════════════════════════════════════════════
   COOKIE BANNER
═══════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
  #cookie-banner {
    flex-direction: column;
    padding: 14px 16px;
    gap: 10px;
  }
  #cookie-banner p { font-size: 12px; }
  #cookie-banner .cookie-btns { width: 100%; justify-content: flex-end; }
}

/* ═══════════════════════════════════════════════════════════
   SECTION HEADING
═══════════════════════════════════════════════════════════ */
/* Empêche les titres longs (ex: "Recommandations") de dépasser
   la largeur du conteneur sur petits écrans */
.single-section .section-heading > .section-title {
  max-width: 100%;
  overflow-wrap: break-word;
}

@media (max-width: 575.98px) {
  .section-heading { margin-bottom: 28px; }
  /* Même spécificité que la règle de main.css mais chargé après → l'emporte */
  .single-section .section-heading > .section-title { font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
  .footer-area .single-info { text-align: center; }
  .footer-area .single-info .info-icon { display: block; margin-bottom: 4px; }
  .footer-area .mini-footer { flex-direction: column; text-align: center; gap: 12px; }
  .footer-area .social-medias { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════
   CONTACT FEEDBACK
═══════════════════════════════════════════════════════════ */
.contact-feedback {
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  display: none;
}
.contact-feedback.show    { display: block; }
.contact-feedback.success { background:#eafaf1; color:#1e8449; border:1px solid #a9dfbf; }
.contact-feedback.error   { background:#fdedec; color:#c0392b; border:1px solid #f1948a; }
.contact-feedback.loading { background:#eaf2ff; color:#2471a3; border:1px solid #85c1e9; }
#contact-submit:disabled  { opacity:.7; cursor:not-allowed; }

/* ═══════════════════════════════════════════════════════════
   JUSTIFICATION DES TEXTES
═══════════════════════════════════════════════════════════ */

/* Paragraphes courants */
.content-description p,
.service-description,
.hire-description,
.review-content,
.card-text.content-description,
.lightbox-content .content-description p,
.single-info {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Sections spécifiques */
.about-area .content-description p     { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.portfolio-area .content-description p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.expertise-card-center ul li           { text-align: center; }

/* Articles */
.post-content .content-description { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* Bloc expérience significative */
.portfolio-area [style*="color:#a8c4f0"] { text-align: justify; }