/* Séparation SVG*/
.gb-separator-bottom {
    line-height: 0;
}
.gb-separator-bottom svg {
    display: block;
    width: 100%;
    height: 80px;
}

/*Ligne de séparation*/
.grp-separator-ligne{
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 50px 0px 60px 0px;
}

.separator-ligne{
    background-color: #a9a9a9;
    width: 450px;
    height: 1px;
}

/* HERO */
.gb-hero {
    /* background: url('../img/GB_Opti.jpg') center/cover no-repeat; */
    /* padding: 120px 20px; */
    text-align: center;
    padding: 20px;
    color: #3a3a3a;
    background-color: #e7e3de;
    border-radius: 20px 20px 0 0;

    /* box-shadow: 0 12px 20px rgba(0,0,0,0.15);  */
    /* transform: rotate(-1deg); */
}
.gb-hero-img{
    margin-bottom: 20px;
}
.gb-hero-img img{
    width: 100%;
    border-radius: 10px;
}
.gb-hero-content {
    background-color:  #fff;
    padding: 20px;
}
.gb-hero-content h1 {
    font-size: 32px;
    margin-bottom: 10px;
}
.gb-hero-buttons  {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}
.gb-hero-buttons-grp{
    background-color: #e7e3de;
    width: 250px;
    border-radius: 5px;
    padding: 10px;
    margin-top: 20px;
}
.gb-hero-buttons-grp:hover {
    transform: scale(1.02);
    box-shadow: 0 5x 10px rgba(0,0,0,0.15);
}
.gb-hero-buttons a {
    color: #1f1f1f;
}

.gb-hero-content-next{
    margin-top: 50px;
}

.content-text {
    display: flex;
    align-items: center;        /* Aligne verticalement */
    justify-content: space-between;
    gap: 30px;                  /* Espace entre texte et image */
    margin-top: 20px;
}

.content-text p {
    flex: 1;                    /* Le texte prend l’espace disponible */
}

.content-text img {
    max-width: 600px;           /* Taille max de l’image */
    width: 100%;
    height: auto;
    border-radius: 6px;         /* Optionnel : arrondir les angles */
    object-fit: cover;
}

/* Responsive : empile le texte et l’image sur mobile */
@media (max-width: 768px) {
    .content-text {
        flex-direction: column;
        text-align: center;
    }
}


/* A PROPOS */
.htmlContent {
    width: 100%;
    background-color: #e7e3de;
}

.insertsBlock {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    padding: 0 20px 50px 20px;
    /* margin-top: 40px; */
}

.insert {
    /* text-align: center; */
    padding: 20px;
    /* background-color: #e7e3de; */
    background: #f5f5f5;
    margin: 10px;
    border-radius: 10px;
    transition: box-shadow ease .2s;
    padding-top: 20px;
}

.insert:hover{
    box-shadow: 0 5px 10px rgba(0,0,0,0.25);
}

.insert:hover .pictoBackground { 
    box-shadow: 0 5px 10px rgba(0,0,0,0.25);
    transition: box-shadow ease .2s;
}

.pictoBlock {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    transform: translateY(-50%);
}

.pictoBackground {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #fff;/*#c7af8f;*/
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 10px #eee;
}

/* .pictoBackground img {
  
  
} */

.contentBlock p {
    font-size: 18px;
    line-height: 1.55;
    color: #333;
}

/*SecondMain*/
.gb-secondmain{
    background-color: #e7e3de;
}
.gb-secondmian-bloc {
    display: flex;
    align-items: center;        /* Aligne verticalement */
    justify-content: space-between;
    gap: 30px;                  /* Espace entre texte et image */
    padding: 20px;
}

.gb-secondmian-bloc p {
    flex: 1;                    /* Le texte prend l’espace disponible */
}

.gb-secondmian-bloc img {
    max-width: 600px;           /* Taille max de l’image */
    width: 100%;
    height: auto;
    border-radius: 6px;         /* Optionnel : arrondir les angles */
    object-fit: cover;
}

/* Responsive : empile le texte et l’image sur mobile */
@media (max-width: 768px) {
    .gb-secondmian-bloc {
        flex-direction: column;
        text-align: center;
    }
}

/* VALUES */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.value-card {
    padding: 20px;
    background: #f7f7f7;
    border-radius: 10px;
    transition: transform .3s;
}
.value-card:hover {
    transform: translateY(-5px);
}

/* MISSION */
.gb-mission {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 60px 0;
}
.mission-content {
    flex: 1;
    padding: 20px;
}
.mission-image img {
    max-width: 100%;
}

/* SERVICES */
.gb-services{
    text-align: center;
}

.gb-services img{
    width: 100%;
    margin-bottom: 20px;
    border-radius: 5px;
}

.gb-services h2{
    margin-bottom: 20px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}
.service-card {
    padding: 20px;
    background:#e7e3de;
    border: 1px solid #c5c5c5;
    border-radius: 8px;
    text-align: center;
    transition: box-shadow .3s;
}
.service-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* CTA */
.gb-cta {
    text-align: center;
    padding: 60px 20px;
    background:  #e7e3de;
    color:  #757474;
    margin-bottom: 40px;
}