@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Namdhinggo:wght@400;500;600;700;800&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Source Serif 4", serif;
}
body{
 background-color: #f5ecd4 !important;
 font-family: "Source Serif 4", serif;
}
p{
    margin-bottom: 0 !important;
}

.text-duck{
     color: #175667 !important; 
}
.titre {
    color: #175667 !important; 
}

.text-gray{
    color: #4b5d5d !important; 
}
.display-1{
  font-size: 5em !important;
  font-family: "Namdhinggo", serif;
}  

@media (min-width: 768px) { /* Écran de taille moyenne (MD) et plus grand */
    .display-1{
        font-size: 9em !important;
      }
  }


.eggshell {
    color: #F5ECD4 !important;
}
.bg-container{
    background-color:#f5e4b8 !important;
    z-index: 0 !important;
}

.bg-light-beige{
 background-color: #f5ecd4 !important; 
}
.bg-duck{
    background-color: #175667 !important;
   }

.bg-header {
    background-color: #03495E !important;
    opacity: 0.82;
}

.bg-leaf {
    position: relative;
}

.bg-leaf:before {
    content: "";
    background: url(/assets/bg-leaf.svg) center / cover no-repeat;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}


a:not(nav) {
    color: #03495E !important; 
}
nav a{
    color: #f5ecd4 !important; 
}
nav a:hover {
    color: #F4BF31 !important; 
}
a:hover {
    color:#F4BF31 !important; 
}

.text-justify{
    text-align: justify !important;
}
/* liens articles */

.accordion-button:not(.collapsed) {
    background-color: #f5e7c4 !important;
}

.accordion-body{
    background-color: #f5e7c4 !important;
}
.accordion-button {
    background-color: #f5e7c4 !important;
    color: #03485e !important;
    padding: calc(1.5rem * 1.5)!important;
    font-size: 0.6em !important;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2303485e' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 8h12'/%3e%3cpath d='M8 2v12'/%3e%3c/svg%3e") !important;
    padding-left: 5%;
}


.accordion-button:not(.collapsed)::after  {
    background-image:    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2303485e' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 8h12'/%3e%3c/svg%3e") !important;
    padding-left: 2%;
}


.accordion {
    --bs-accordion-btn-focus-box-shadow:unset !important;
    box-shadow: var(--bs-accordion-btn-focus-box-shadow);

    --bs-accordion-border-color: #dacba4 !important;
    box-shadow: var(--bs-accordion-btn-focus-box-shadow);
}


/* cards competence */


.flip-card {
    min-width: 18em;
    height: 18em;
    /* perspective: 1000px;
    padding: auto; */
}
  
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 1s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
  
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}
  
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
  
.flip-card-front {
    background-color: #3D7371;
    color : #F5ECD4;
    padding-top: 25px;
    display: flex;
    flex-direction: column; /* Changer pour disposer les éléments verticalement */
    justify-content: center;
    align-items: center;
}
  
.flip-card-back {
    background-color: #F5ECD4;
    color : #3D7371;
    transform: rotateY(180deg);
}

.compImg{
    font-size: 100px;
}
/* footer : ca marche pas */
footer{
    background-color: #336975; 
    color: #F5ECD4;
}
.container-fluid {
    margin: 0 !important;
    padding: 0  !important;
}




