@font-face {
    font-family: LeagueBold;
    src: url("../fonts/LeagueSpartan-Bold-yLbpTEI.ttf");
}

@font-face {
    font-family: LibreBaskervilleItalic;
    src: url("../fonts/LibreBaskerville-Italic-v7SpYjb.ttf");
}

@font-face {
    font-family: LibreBaskerville;
    src: url("../fonts/LibreBaskerville-Regular-qn2EDsU.ttf");
}

@font-face {
    font-family: Aileron;
    src: url("../fonts/Aileron-Regular-PtKMzjI.ttf");
}

@font-face {
    font-family: AileronBold;
    src: url("../fonts/Aileron-Bold-qJlfFVj.ttf");
}

@font-face {
    font-family: AileronThinItalic;
    src: url("../fonts/Aileron-ThinItalic-qQJD0Mz.ttf");
}


:root {
    /* green light  */
    --green-light: #D6FFE7;
    /* bleu light */
    --light-blue: #DEE5F8;
    /* orange light */
    --orange-light: #FFE1D6;
    /* ggrey */
    --grey: #E8EDEC;
    /* vert */
    --green-deila: #01D758;
    /* blue */
    --blue-deila: #2B59C3;
    /* orange */
    --orange-deila: #FF6600;
    /* black */
    --octonary-color: #040811;
    /* nav link */
    --nav-link-color: #0a0a24;
    --body-font-color: #0a0a24;
    /* gris clair */
    --denary-color: #f5f5f5;
    /* titles */
    --bs-heading-color: #1e3561;

    --body-color: #f4f6f5;

    --title-font: 'LeagueBold', 'Varela Round', sans-serif;
    --italic-font: 'AileronThinItalic', 'Varela Round', sans-serif;
    --normal-font: 'Aileron', 'Varela Round', sans-serif;
    --bold-font: 'AileronBold', 'Varela Round', sans-serif;

}

.pt-5 {
    padding-top: 5rem;
}

.deila_logo img {
    width: auto;
    max-height: 50px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--title-font);
    color: var(--body-font-color);
}

body {
    font-family: var(--normal-font);
}

p {
    text-align: justify;
}

i {
    font-family: var(--italic-font);
}

b {
    font-family: var(--bold-font);
    display: inline-block;
}

.strongFirst::first-letter,
b::first-letter {
    font-weight: bold;
    color: var(--green-deila, #01D758);
    /* Fallback color */
    font-family: var(--bold-font, 'AileronBold', sans-serif);
    /* Fallback font */
}

.equipe-carousel .card-text,
.bg-dark h6,
.bg-dark h5,
.bg-dark h4,
.bg-dark h3,
.bg-dark h2,
.bg-dark h1 {
    color: white;
}

.equipe-carousel .card-text strong,
.deila-list-white li::first-letter,
.bg-dark h1 strong,
.bg-dark h2 strong,
.bg-dark h3 strong,
.bg-dark h4 strong,
.bg-dark h5 strong {
    font-weight: bold;
    font-family: var(--bold-font);
    text-transform: uppercase;
    color: var(--green-deila);
}

.bg-white h1 strong,
.bg-white h2 strong,
.bg-white h3 strong,
.bg-white h4 strong,
.bg-white h5 strong {
    text-transform: uppercase;
    color: var(--green-deila);
}

.lightGreen {
    color: var(--green-light);
}

.green,
.bg-dark .inverse {
    color: var(--green-deila)
}

.bg-light-green {
    background-color: var(--green-light);
}

.indexTarifs {
    font-size: xx-large;
    padding: 0.5rem;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 50%;
    font-weight: bold;
}

.equipe-carousel {
    display: flex;
    overflow: hidden;
    width: 100%;
    position: relative;
}

.equipe-carousel .carousel-inner {
    display: flex;
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-100%);
    }

    40% {
        transform: translateX(-200%);
    }

    100% {
        transform: translateX(0);
    }
}

.equipe-carousel .carousel-item {
    flex: 0 0 33.33%;
    text-align: center;
    display: block;
    margin-right: auto;
    transition: none;

}

.equipe-carousel .card-text {
    text-align: end;
}


.equipe-carousel .card {
    background-color: transparent;
    border: none;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 3rem;
}

.equipe-carousel .carousel-indicators,
.equipe-carousel .carousel-control-prev,
.equipe-carousel .carousel-control-next {
    display: none;
}

.equipe-carousel .list-group {
    vertical-align: top;
    text-align: center;
}


.equipe .card-text strong,
.bg-dark .inverse strong {
    color: white;
}

.title-main {
    bottom: 20%;
    position: absolute;
    left: 10%;
    text-align: start;
}

.title-main h1 {
    font-size: calc(3rem + 2vw);

}

.title-main h2 {
    font-size: calc(1rem + 2vw);
}

.logo-main {
    position: absolute;
    top: 10%;
    left: 5%;
}

.accueil {
    background-color: black;
    background-image: url("../images/header-zSy6nmN.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    color: var(--body-color);
    text-align: center;
}

.navbar {
    background-color: var(--body-color);
    color: var(--nav-link-color);
    font-family: var(--title-font);
    font-size: 1.2rem;
}

.btn-primary {
    background-color: var(--green-deila);
    color: white;
    border: none;
}

.btn-primary:hover {
    background-color: var(--green-light);
    color: var(--blue-deila);
    border: none;
}

.equipe .card {
    background-color: transparent;
    border: none;
    margin-left: 1rem;
    margin-right: 1rem;
}

.equipe .card-title {
    color: white;
    text-align: center;
}

.deila-list-white {
    color: white;
    display: table-row;
    list-style: none;
}

.deila-list-white li {
    padding-top: 1rem;
    border-bottom: 1px solid white;
}


.deila-list-white li p {
    /* display: table-cell; */
    font-family: var(--italic-font);
    padding-left: 1rem;
    font-size: small;
}

.services .col,
.services .card,
.services {
    margin: 0px;
    padding: 0px;

}

.services .card {
    border: none;
    height: 100%;
}

.services .card:hover {
    background-color: var(--green-light);

}



/* .deila-list-white li::before {
    display: table-cell;
    text-align: right;
    content: "+";
    font-size: 1em;
    font-weight: bold;
    color: var(--primary-color);
    padding-right: 12px;
} */

/* Media query for responsiveness */
@media (max-width: 768px) {

    .equipe-carousel .card {
        height: 65vh;
    }

    .equipe-carousel .carousel-item {
        flex: 0 0 100%;
        display: none;
        margin-right: -100%;
        transition: transform 0.6s ease-in-out;
    }

    .equipe-carousel .active {
        display: block;
    }

    .equipe-carousel .carousel-control-prev,
    .equipe-carousel .carousel-control-next {
        display: block;
    }

    .equipe-carousel .carousel-indicators {
        display: flex;
        justify-content: center;
    }
}



@media (max-width: 430px) {
    .fixed-bottom {
        position: relative;
    }
}


@media(max-width: 580px) {
    .nos-clients .roundDeila {
        display: none;
    }

    .card-valeurs .card {
        width: auto;
        margin: 0.5rem;
    }

    .empty-footer-col {
        display: none;
    }

}


.nos-clients {
    position: relative;
}

.nos-clients .col {
    text-align: center;
    padding: 1rem;
}

.nos-clients .col-sm-3 {
    text-align: center;
    align-items: center;
    justify-content: center;
}


.nos-clients .black {
    margin-top: 1rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5rem;
    background-color: black;
    color: white;
}

.nos-clients img {
    width: 150px;
    height: 150px;
    /* round */
    border-radius: 50%;
}

.center-item {
    align-items: center;
}

.roundDeilaMobile {
    display: none;
}

.roundDeila,
.nos-clients .roundDeila {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(160px, 28vw, 290px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: var(--green-light);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    margin: 0;
    pointer-events: none;
}

.roundDeila img,
.nos-clients .roundDeila img {
    width: 75%;
    max-width: 220px;
    height: auto;
    max-height: 75%;
    object-fit: contain;
    border-radius: 0;
    margin: 0;
}



.card-valeurs {
    justify-content: center;
}

.card-valeurs .card {
    border: none;
    margin: 1rem 0.5rem 1rem 0.5rem;
    height: 95%;
}

.card-valeurs h4 {
    color: black;
}

.vh-30 {
    height: 30vh !important;
}

.carousel-avis .carousel-item .card {
    margin: auto;
    width: 80%;
}

.carousel-avis {
    margin: 0 auto;
}

.carousel-avis h4,
.carousel-avis h5 {
    color: black;
}

.ecarousel-avis .carousel-control-prev,
.carousel-avis .carousel-control-next {
    color: white;
}

.isApartirDe {
    display: block;
    position: relative;
    top: -0.5rem;
    right: 0rem;
    font-size: small;
    font-style: italic;
}


.col-tarif {
    align-items: center;
    display: flex;
}

.contact-form form {
    padding: 1rem;
    border-radius: 1rem;
    background-color: var(--green-light);
    color: white;
}

.alert {
    color: black;
    background-color: var(--green-deila);
    border: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    z-index: 1000;
}

#hideMe {
    -webkit-animation: cssAnimation 5s forwards;
    animation: cssAnimation 5s forwards;
}

.before-footer {
    padding-bottom: 20px;
}

.container-full {
    justify-content: center;
    align-items: start;
    margin-right: 1rem;
    margin-left: 1rem;
}

.footer-col {
    color: black;
    height: 200px;
    padding: 5px;
    border-left: 0px solid black;
    border-right: 0px solid black;
    margin: 0px;
}

.empty-footer-col {
    max-width: 40px;
    height: 200px;
}

.title-footer {
    font-family: var(--tertiary-font);
    text-wrap: nowrap;
}

.title-footer a {
    text-decoration: none;
    font-weight: bold;
    color: white;
}


.footer-ul {
    height: 100%;
}

.footer-col ul {
    list-style: none;
    padding: 0px 0px 0px 10px;
    display: table;
    width: 100%;
}

.footer-col ul li {
    display: table-header-group;
    text-wrap: nowrap;
    padding: 10px;
    margin-right: 20px;
}

.footer-col ul li a {
    padding-bottom: 5px;
    vertical-align: middle;
    color: black;
    text-decoration: none;
}

.logo-footer {
    margin-left: auto;
    margin-right: 0px;

}

.logo-footer img {
    max-width: 150px;
}

.address::before {
    background-image: url("../icons/addresse-rnfpMN8.png");
}

.phone::before {
    background-image: url("../icons/telephone-Rb4PJix.png");
}

.email::before {
    background-image: url("../icons/email-yaWnvnI.png");
}

.footer-contact ul li::before {
    margin-left: -40px;
    content: "";
    display: inline-block;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.media-footer {
    justify-content: center;
}
/* Actualités : tags en pastilles */
.tag-pill {
    display: inline-block;
    padding: .3rem .85rem;
    margin: 0 .25rem .5rem 0;
    border-radius: 999px;
    background: var(--light-blue);
    color: var(--blue-deila);
    font-size: .85rem;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.tag-pill:hover,
.tag-pill:focus-visible {
    background: var(--blue-deila);
    color: #fff;
}

.tag-pill.active {
    background: var(--blue-deila);
    color: #fff;
}

/* Actualités : en-tête, filtres, cartes */
.actu-hero {
    background: linear-gradient(180deg, var(--light-blue) 0%, var(--body-color) 100%);
    padding: 8rem 0 2.5rem;
}

.actu-lead {
    max-width: 640px;
    margin: .5rem auto 1.5rem;
    color: var(--nav-link-color);
}

.actu-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-bottom: .75rem;
}

.filter-pill {
    padding: .45rem 1.1rem;
    border-radius: 999px;
    background: #fff;
    color: var(--blue-deila);
    border: 1px solid var(--light-blue);
    text-decoration: none;
    font-size: .95rem;
    transition: background-color .15s, color .15s, border-color .15s;
}

.filter-pill:hover,
.filter-pill.active {
    background: var(--blue-deila);
    border-color: var(--blue-deila);
    color: #fff;
}

.actu-list {
    background: var(--body-color);
    padding: 2rem 0 4rem;
}

.actu-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(10, 10, 36, .06);
    transition: transform .2s, box-shadow .2s;
}

.actu-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(10, 10, 36, .12);
}

.actu-card-media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--light-blue);
}

.actu-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s;
}

.actu-card:hover .actu-card-media img {
    transform: scale(1.04);
}

.actu-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: var(--title-font);
    font-size: 4rem;
    color: var(--blue-deila);
    background: linear-gradient(135deg, var(--light-blue), var(--green-light));
}

.actu-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.4rem;
}

.actu-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .6rem;
    font-size: .8rem;
    color: #6b7280;
}

.actu-card-cat {
    padding: .2rem .7rem;
    border-radius: 999px;
    background: var(--green-light);
    color: #057a35;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .72rem;
    text-decoration: none;
}

.actu-card-title {
    font-size: 1.25rem;
    margin-bottom: .6rem;
}

.actu-card-title a {
    color: var(--bs-heading-color);
    text-decoration: none;
}

.actu-card-title a:hover {
    color: var(--blue-deila);
}

.actu-card-excerpt {
    color: var(--nav-link-color);
    font-size: .95rem;
}

.actu-card-link {
    margin-top: auto;
    color: var(--blue-deila);
    font-weight: 600;
    text-decoration: none;
}

.actu-card-link:hover span {
    display: inline-block;
    transform: translateX(4px);
}

/* Actualités : page article */
.actu-article-hero {
    padding-bottom: .5rem;
    background: var(--light-blue);
}

.actu-sep {
    margin: 0 0 1.5rem;
    border: 0;
    border-top: 2px solid var(--blue-deila);
    opacity: .25;
}

.actu-article-hero h1 {
    margin: .75rem 0 1rem;
}

.actu-article {
    background: var(--body-color);
    padding: 0 0 4rem;
}

.actu-article-cover + .actu-article-body {
    margin-top: 1.5rem;
}

.actu-article-cover {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 10px 28px rgba(10, 10, 36, .12);
}

.actu-article-body {
    background: #fff;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(10, 10, 36, .06);
    font-size: 1.05rem;
    line-height: 1.75;
}

.actu-article-body h2,
.actu-article-body h3 {
    margin-top: 1.8rem;
}

.actu-article-body img {
    max-width: 100%;
    height: auto;
    border-radius: .75rem;
}

.actu-article-body blockquote {
    border-left: 4px solid var(--green-deila);
    background: var(--green-light);
    padding: .8rem 1.2rem;
    border-radius: 0 .75rem .75rem 0;
}

.actu-cta {
    margin-top: 2.5rem;
    padding: 2rem;
    text-align: center;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--light-blue), var(--green-light));
}

@media (max-width: 576px) {
    .actu-article-body {
        padding: 1.25rem;
    }
}

.actu-sidebar {
    position: sticky;
    top: 6rem;
}

.actu-cta {
    margin-top: 0;
}

/* Clients : grille de secteurs autour du logo */
.clients-hero {
    padding-bottom: 2rem;
}

.clients-secteurs {
    background: var(--body-color);
    padding: 1rem 0 4rem;
}

.secteurs-grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 760px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1.5rem;
}

.secteur,
.secteur-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.secteur-center {
    grid-area: 2 / 2;
    justify-content: center;
}

.secteur-logo {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--green-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.secteur-logo img {
    width: 75%;
    height: auto;
    object-fit: contain;
}

.secteur img {
    width: 100%;
    max-width: 200px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 4px 16px rgba(10, 10, 36, .1);
    transition: transform .25s, box-shadow .25s, border-color .25s;
}

.secteur-label {
    margin-top: .9rem;
    padding: .3rem .9rem;
    border-radius: 999px;
    background: #fff;
    color: var(--bs-heading-color);
    font-family: var(--bold-font);
    font-size: .95rem;
    box-shadow: 0 2px 8px rgba(10, 10, 36, .06);
    transition: background-color .25s, color .25s;
}

.secteur:hover img {
    transform: translateY(-6px) scale(1.05);
    border-color: var(--green-deila);
    box-shadow: 0 14px 30px rgba(10, 10, 36, .18);
}

.secteur:hover .secteur-label {
    background: var(--blue-deila);
    color: #fff;
}

@media (max-width: 576px) {
    .secteurs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 1rem;
    }

    .secteur-center {
        grid-area: auto;
        grid-column: 1 / -1;
        order: -1;
    }

    .secteur-logo {
        width: 55%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .secteur img,
    .secteur:hover img {
        transition: none;
        transform: none;
    }
}

/* Clients : implantation */
.clients-location {
    background: linear-gradient(180deg, var(--body-color) 0%, var(--light-blue) 100%);
    padding: 3rem 0 5rem;
}

.location-map {
    margin: 0;
    padding: 1rem;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 2px 12px rgba(10, 10, 36, .06);
}

.location-map img {
    display: block;
    width: 100%;
    border-radius: .75rem;
}

.location-points {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
}

.location-points li {
    margin-bottom: .6rem;
    padding: .6rem 1rem;
    border-left: 4px solid var(--green-deila);
    background: #fff;
    border-radius: 0 .75rem .75rem 0;
    font-size: .95rem;
}

.location-points strong {
    display: block;
    color: var(--bs-heading-color);
}