/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Hanlding Updates
-----------------------------------------------------------------*/




/* ============================================================
   CROWK - Overrides custom
   Objet : Hero logo centré, entier (sans rognage) + ajustement desktop
   ============================================================ */

/* Valeur de référence : largeur du side-header du thème (Simone = 260px) */
:root {
  --sidebar-w: 260px;
}

/* Hero: logo centré et entier, sans rognage (tous devices) */
body.side-header #home .hero-wrap .hero-bg {
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;   /* stop rognage */
  background-attachment: scroll !important; /* fiable sur mobile */
  background-color: #ffffff;             /* bandes autour si ratio différent */

  opacity: 0.35;                         /* ajuste la visibilité */
  filter: none;                          /* retire le flou; ou blur(1px) si souhaité */
}


/* Micro-ajustement horizontal sur desktop (léger décalage à droite) */
@media (min-width: 1200px) {
  body.side-header #home .hero-wrap .hero-bg {
    background-position: calc(50% - 10px) center !important;
  }
}



/* Avatar mobile (inchangé) */
.mobile-profile {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border: 3px solid #C46A4A;
}



/* ============================================================
   CONTRASTE DES SECTIONS
   About / Experience / Services / Contact
   ============================================================ */

/* 1) Fond de section : léger gris chaud pour détacher du blanc */
#about,
#experience,
#services,
#contact {
  background-color: #F7F5F2 !important;
}

/* 2) Titre principal (Me, My experience, My skills, Get in Touch) */
#about .position-relative p.text-9,
#experience .position-relative p.text-9,
#services .position-relative p.text-9,
#contact .position-relative p.text-9 {
  color: #0F1C2E !important; /* bleu très foncé */
  font-weight: 700 !important;
  letter-spacing: 0.3px;
}




/* -------------------------------------------------------------
   1) Fix rognage BACKGROUND sur mobile
------------------------------------------------------------- */
@media (max-width: 575.98px) {
  #experience h2.text-24 {
    font-size: 14vw !important;
    white-space: nowrap;
  }
}

/* -------------------------------------------------------------
   2) Remise du contraste renforcé sur tous les titres fantômes
      (ABOUT / BACKGROUND / SERVICES / CONTACT)
------------------------------------------------------------- */
#about h2.text-24,
#experience h2.text-24,
#services h2.text-24,
#contact h2.text-24 {
  color: #2E3440 !important;   /* ton bleu foncé */
  opacity: 0.18 !important;    /* contraste faible mais visible */
}

/* Version mobile : léger renforcement (tu l'avais déjà) */
@media (max-width: 575.98px) {
  #about h2.text-24,
  #experience h2.text-24,
  #services h2.text-24,
  #contact h2.text-24 {
    opacity: 0.22 !important;
  }
}
``


/* Fix rognage BACKGROUND sur mobile */
@media (max-width: 575.98px) {
  #experience h2.text-24 {
    font-size: 14vw !important;   /* au lieu du calc(...) par défaut */
    white-space: nowrap;           /* évite un retour à la ligne moche */
  }
}


/* 4) Ligne de séparation */
#about .heading-separator-line,
#experience .heading-separator-line,
#services .heading-separator-line,
#contact .heading-separator-line {
  border-bottom-color: #C46A4A !important;
  border-bottom-width: 4px !important;
  width: 96px;
  opacity: 1;
}

/* 5) Texte courant : lisibilité renforcée */
#about p,
#experience p,
#services p,
#contact p {
  color: #1F2933 !important; /* contraste supérieur au gris du thème */
}


/* 6) Icônes services : couleur brand */
#services .featured-box-icon,
#services .featured-box-icon i {
  color: #C46A4A !important;  /* ta couleur : C46A4A */
}


/* 7) Responsive : micro-ajustement mobile */
@media (max-width: 575.98px) {
  #about h2.text-24,
  #experience h2.text-24,
  #services h2.text-24,
  #contact h2.text-24 {
    opacity: 0.22 !important;
  }

  #about .heading-separator-line,
  #experience .heading-separator-line,
  #services .heading-separator-line,
  #contact .heading-separator-line {
    width: 72px;
    border-bottom-width: 3px !important;
  }
}


/* Justification du texte dans chaque section (paragraphes) */
#home p,
#about p,
#experience p,
#services p,
#contact p {
  text-align: justify !important;
  text-justify: inter-word;   /* meilleure répartition des espaces */
  line-height: 1.55;          /* lisibilité */
}

/* (Optionnel) Justifier aussi les éléments de liste et blockquotes */
#home li,
#about li,
#experience li,
#services li,
#contact li,
#home blockquote,
#about blockquote,
#experience blockquote,
#services blockquote,
#contact blockquote {
  text-align: justify !important;
  text-justify: inter-word;
}



/* (Optionnel) Césure automatique pour un rendu plus propre sur mobile */
#home p, #about p, #experience p, #services p, #contact p {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  overflow-wrap: anywhere;
}


/* === Centrer les titres de sections (ghost title + surtitre) === */
/* Bloc commun "position-relative ... text-center" présent dans chaque section */
#about .position-relative,
#experience .position-relative,
#services .position-relative,
#contact .position-relative {
  text-align: center !important;
}

/* Titre fantôme XXL (h2.text-24) + surtitre (p.text-9) centrés explicitement */
#about h2.text-24,      #about p.text-9,
#experience h2.text-24, #experience p.text-9,
#services h2.text-24,   #services p.text-9,
#contact h2.text-24,    #contact p.text-9 {
  text-align: center !important;
}

/* Sous-titres H2 de section marqués "text-start" dans ton HTML */
#about h2.text-7,
#experience h2.text-7,
#services h2.text-7,
#contact h2.text-7 {
  text-align: center !important; /* override de .text-start */
}

/* (Optionnel) Centrer aussi la petite ligne décorative sous le surtitre */
#about .heading-separator-line,
#experience .heading-separator-line,
#services .heading-separator-line,
#contact .heading-separator-line {
  margin-left: auto !important;
  margin-right: auto !important;
}



/* === 1) ABOUT — forcer le H2 de section à GAUCHE === */
/* Cible exactement : <section id="about"> ... <h2 class="text-7 ..."> */
#about h2.text-7 {
  text-align: left !important;
}

/* === 2) HOME — centrer "Welcome" === */
/* Cible exactement : <p class="text-7 fw-500 text-white ...">Welcome</p> */
#home p.text-7 {
  text-align: center !important;
}

/* === 3) HOME — centrer "Based in Paris, working across France and Europe." === */
/* Cible exactement : <p class="text-5 text-light mb-4">Based in Paris ...</p> */
#home p.text-5.text-light {
  text-align: center !important;
}


/* === Centrer parfaitement le bouton SEND sur mobile === */
@media (max-width: 575.98px) {
    #submit-btn {
        display: flex !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: fit-content !important;
        padding-left: 32px;
        padding-right: 32px;
    }

    #contact-form p.text-center {
        display: flex !important;
        justify-content: center !important;
    }
}

/* === Footer recentré et resserré === */
#footer p {
    text-align: center !important;
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 14px;
}

/* Sur desktop : recentrage global */
@media (min-width: 992px) {
    #footer .row {
        justify-content: center !important;
    }
    #footer p {
        justify-content: center !important;
        text-align: center !important;
    }
}