/* ARRIERE PLAN */

body {
    background-image: url('http://ijin.fr/art/user/media/waves.jpg');
    background-repeat: repeat; /* C'est l'option par défaut, l'image se répète horizontalement et verticalement */  ;
}

.overlay {
    background-color: #fff;
}

#header {
    background-color: transparent !important; 
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 120px;
    border:none;

}

/* Taille menu*/

/* couleur texte menu */
#header a {
     color: #343a40;
     font-family: "Parisienne", cursive !important;
     font-weight: 600; /* Ajuste l'épaisseur si besoin */
}



.header.section, .navbar-section {
    background-color: #f8f9fa !important;
    max-width: 1280px; /* Limite la largeur à 1280px maximum */
    width: 100%;       /* S'adapte aux écrans plus petits */
    margin: 0 auto;    /* Centre le bloc horizontalement */
    padding-right:50px;
    display: flex;
    font-size: 1.5rem;
}

.rainbow-underline {
    position: relative;
    color: #2563c8 !important;
}
.rainbow-underline::after {
    content: "";
    position: absolute;
    left: 15px;
    right: -40px;
    bottom: 0;
    height: 2px;
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}



/* Taille du logo */
#header .logo img, .logo svg {
    display: inherit;
    height: 100px;
    padding-left: 40px;
    padding-top: 0px;
}
#header .navbar-section {
    height: 120px;
}

/* BAS FOOTER ET CONTENU */
#footer {
    background-color: transparent !important;

}

/* liens footer */
#footer-section{
    background-color: #f8f9fa !important;
    max-width: 1280px; /* Limite la largeur à 1280px maximum */
    width: 100%;       /* S'adapte aux écrans plus petits */
    margin: 0 auto;    /* Centre le bloc horizontalement */
    padding-top: 30px;
    padding-right: 20px;  /* Optionnel : évite que le contenu colle aux bords */
    box-sizing: border-box; /* Inclut le padding dans le calcul de la largeur */
    text-align: right;
}
/* Style général pour tous les liens du body et du footer */
body a:hover, a:hover h4, a:hover h3 {
    color: #3AAFA9;
    text-decoloration: underline;

}

footer a, a:visited {
    color: #000; /* Couleur par défaut (liens non visités) */
    text-decoration: underline; /* Ajoute un soulignement au survol */
}


/* FONTS MENU DE NAVIGATION */

.dropmenu ul li a:hover {
    color:#2563c8!important;
}
.dropmenu ul li {
padding-right:30px;
}



/* FONTS PERSONNALISES */

h1, .h1 {
    font-size: 2.5rem;
}
h2, .h2 {
    font-size: 2.1rem;
}


h1, h2 {
  font-family: "Parisienne", cursive !important;
  font-weight: 400;
  font-style: normal;
}

h3, h4, p {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-style: italic;

}



/* Espace entre les modules de pages et largeur de la page de texte en gris*/

.modular-text   {
    padding-top: 0rem;
    padding-bottom: 0rem;
    max-width: 1280px;
    margin: 0 auto;

}

.modular-row form{
   max-width: 2000px; 
}

/* Mise en page page fonds de toutes les pages*/

#page-wrapper {
    max-width: 1280px;
    width:100%;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 0 20px;
}
/* Mise en page pages modulaires*/

.section.section.modular-text.bg-gray{
    background-color: transparent !important;/* ou la nuance de rose souhaitée */
}




/* Mise en page formulaire de contact*/

#contact-form {
    max-width: 65%;
    margin: 0 auto;
    box-sizing: border-box;
}

#contact-form-wrapper {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 0rem;
}


#contact-form .long.form-input.long  {
    min-height: 250px;
}

/* cadre merci pour votre message */
.toast.toast-success {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
    border-color: #10b981 !important;
    border-radius: 6px;
    padding: 15px;
    text-align: center !important; /* Centre le texte à l'intérieur */
    margin-left: auto !important;
    margin-right: auto !important;
}


@media (min-width: 769px) {
  .btn-decouvrir {
    display: inline-block;
    width: 400px;
  }
}
  /* Styles pour le bouton "Découvrir la collection" */
  .btn-decouvrir {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.5rem;
    background-color: #FFF; /* Couleur blanc */
    border-radius: 0.25rem; /* Coins adoucis */
    text-decoration: none;
    color: #4a4a4a; /* Gris anthracite */
    font-family: inherit; /* Hérite de la police du site */
    font-size: 1rem;
    font-weight: bold;
    margin-top: 1rem;
    transition: all 0.3s ease;
    border: 1px solid transparent; /* Pour l'effet hover */
  }



  .btn-decouvrir:hover .arrow {
    transform: translateX(5px); /* Effet de déplacement de la flèche */
  }

  /* Styles pour le bouton "Retour" */
.btn-retour {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  font-weight: bold;
  color: #6c757d;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  text-decoration: none;
}

.btn-retour:hover {
  background-color: #e9ecef;
  color: #495057;
  text-decoration: none;
}



.btn-retour a.external-link.icon, a.external-link.no-image, a.external, a.external {
    background-color: #FFF2F5!important;
  text-decoration: none;
}

.btn-retour a.external-link.icon:hover, 
a.external-link.no-image:hover, 
a.external:hover {
    background-color: #FCE4EC !important;
}



  /* Gallerie */

.gallery-block {
    padding: 15px;
    background-color: #000000;
}