body {
  background-color: rgb(126, 199, 188);
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  line-height: 1.6;
}

/* définit le padding général pour 3 types d'écran différents. du téléphone à un grand écran*/
:root {
  --cc-spacing: clamp(1rem, 1vw + 0.75rem, 1.5rem);
}

.navbar-toggler:focus,
.navbar-toggler:active {
  outline: none !important;
  box-shadow: none !important;
}

html {
  scroll-behavior: smooth;
  /* défilement doux au scroll */
}

.section-anchor {
  scroll-margin-top: 90px;
  /* marge qui permet de voir le titre lorsqu'on clique sur un mien navbar */
}

#top {
  scroll-margin-top: 150px;
  /* marge qui permet de voir le titre lorsqu'on clique sur le logo */
}

/* *********************navbar*********************** */
/* offset navbar */
.lien-social a {
  display: inline-block;
  text-decoration: none;
  /* retire tout soulignement */
}

.lien-social {
  font-size: 0;
  /* supprime l'espace entre les inline-block */
}

.icon-nav {
  width: 20px;
  /* taille des icônes */
  transition: transform 0.3s ease, filter 0.3s ease;
}

.icon-nav:hover {
  transform: scale(1.2);
  /* grossit légèrement les icones au survol*/
}

.nav-link {
  white-space: nowrap;
}

.nav-item {
  /* décallage des items de navigation quand le burger est ouvert de la gauche */
  padding-left: 1em;
}

/* ****************************body*********************** */
p {
  text-align: justify;
  /* répartition homogènes des textes */
}

/* réglage de la taille de l'image auto*/
img {
  height: auto;
}

strong {
  font-weight: normal;
}


/* ****************************contact*********************** */
.contact-liens a {
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}

.contact-liens a:hover {
  text-decoration: underline;
  color: rgb(21, 79, 70);
}

/* *****************logos facebook, insta, linkedin****************** */
.icon {
  width: 40px;
  /* taille des icônes */
  transition: transform 0.3s ease, filter 0.3s ease;
}

.icon:hover {
  transform: scale(1.2);
  /* grossit légèrement */
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
  /* petit effet "pop" */
}

/* Mentions légales modal --- ouvre une petite fenêtre */
#mentionsLegales .modal-body p {
  line-height: 1.6;
}

#mentionsLegales h6 {
  font-size: 1rem;
  text-transform: none;
}

/* *********************************************** */
@media (max-width: 330px) {

  /* Navbar plus fine */
  .navbar {
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
    min-height: 40px !important;
    /* hauteur minimale pour la ligne */
  }

  /* Masquer téléphone et réseaux sociaux */
  .petit-ecran.link-body-emphasis,
  .lien-social {
    display: none !important;
  }

  /* Logo plus petit */
  .logo img {
    width: 35px !important;
    height: 35px !important;
  }

  /* Logo centré mais avec un "gap" pour ne pas empiéter sur le texte */
  .logo-center {
    position: relative;
    top: 50% !important;
    left: 70% !important;
    transform: translate(-50%, -50%) !important;
    max-width: calc(100% - 120px) !important;
    /* laisse 60px de chaque côté pour le texte et burger */
    height: auto;
  }

  /* Texte "Christelle Constelle" à gauche */
  .petit-ecran.nav-link {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    z-index: 1040;
  }

  /* Burger à droite */
  .navbar-toggler {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1040;
  }
}

/* ******************************************************************** */

@media (max-width: 575.98px) {

  body {
    padding-top: 20px;
  }

  .section-anchor {
    padding-top: var(--cc-spacing);
    padding-bottom: var(--cc-spacing);
  }

  section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  #top {
    scroll-margin-top: 100px;
    /* marge qui permet de voir le titre lorsqu'on clique sur le logo */
  }

  .navbar .logo-center img {
    width: 60px;
  }

  .navbar {
    min-height: 80px;
  }
}

/* --- Navbar logo centré --- */
.navbar {
  min-height: 100px;
}

.navbar .logo-center img {
  display: block;
  width: 100px;
  height: auto;
}

@media (max-width: 991.98px) {
  .navbar .logo-center img {
    width: 80px;
  }
}