body {
    --coul1: #95C3E2;
    --coul2: #EAF7FF;
    --coul3: #487A9B;
    --rouge: #FF0000;
    --gris1: #F2F2F2;
    --gris2: #DADADB;
    --vert: #97DDD3;
    --blanc: #FFF;
    --noir: #000;
}
html, body {
    scroll-behavior: smooth;
}
@font-face {
    font-family: Libellule;
    src: url("/sinkin-sans/SinkinSans-400Regular.otf") format("opentype");
    font-weight: 400;
}

@font-face {
    font-family: Libellule;
    src: url("/sinkin-sans/SinkinSans-700Bold.otf") format("opentype");
    font-weight: 700;
}
html, body {
    font-family: "Work sans";
    /* --coul1: #487a9b; */
    /* --coul2: #DADADB; */
    line-height: 150%;
    margin: 0;
    padding: 0;
    font-size: 10px;
}
.tm {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: 40px;
    padding-right: 40px;
    width: 100%;
}
.mentions-legales {
    background-color:var(--clair);
    padding-top: 40px;
    padding-bottom:40px;
    margin-top: 70px;
    font-size: 1.3rem;
}

.colonne3 {
    display: grid;
    grid-template-columns: 1fr minmax(50vw, 800px) 1fr;
    align-items: center;
    gap: 20px;
    width: 100vw;
}

.cache {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    /* z-index: 100; */
    /* max-width: none; */
    top: -154px;
    opacity: .1;
}

.titre1 {
}

.txt1 {
    position: absolute;
}

ul.p-carousel-indicators {
    height: 100px;
    display: flex;
    gap: 10px;
}

li.p-carousel-indicator button {
    background: var(--coul2);
    width: 20px;
    height: 20px;
    border-radius: 100%;
}

li.p-carousel-indicator.p-highlight button {
    background: var(--coul1);
}

.monimage {
    width: 100%;
    aspect-ratio: 1/1;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 3px solid #FFF;
    box-shadow: 8px 6px 12px #2b485b52;
}

.monimage.show {
    /* transform: translate3d(0px, 0px, 0px); */
    /* opacity: 1; */
    /* z-index: 10; */
    /* opacity: 1; */
}

.show .monimage {
   
}

.image2 {
    background: blue;
}
.eqphotoitm {
    transition: all ease .5s;
    /* transform: translate3d(50px, 0px, 0px) rotate(30deg); */
    /* opacity: 0; */
}
.eqphotoitm:nth-child(2) {
    transform: rotate(-7deg);
}
.eqphotoitm:nth-child(3) {
    transform: rotate(8deg);
}
.eqphotoitm:nth-child(4) {
    transform: rotate(40deg);
}
.eqphotoitm:nth-child(5) {
    transform: rotate(-40deg);
}
.eqphotoitm:last-child {
    transform: rotate(0deg);
}
.eqphoto:has(.eqphotoitm:nth-child(2) .show) .eqphotoitm:nth-last-child(2), .eqphoto:has(.eqphotoitm:nth-child(3) .show) .eqphotoitm:nth-last-child(3), .eqphoto:has(.eqphotoitm:nth-child(4) .show) .eqphotoitm:nth-last-child(4), .eqphoto:has(.eqphotoitm:nth-child(5) .show) .eqphotoitm:nth-last-child(5) {
    transform: rotate(0deg);
}
.eqphoto:has(.eqphotoitm:nth-child(2) .show) .eqphotoitm:last-child, .eqphoto:has(.eqphotoitm:nth-child(3) .show) .eqphotoitm:last-child, .eqphoto:has(.eqphotoitm:nth-child(4) .show) .eqphotoitm:last-child, .eqphoto:has(.eqphotoitm:nth-child(5) .show) .eqphotoitm:last-child, .eqphoto:has(.eqphotoitm:nth-child(3) .show) .eqphotoitm:nth-last-child(2), .eqphoto:has(.eqphotoitm:nth-child(4) .show) .eqphotoitm:nth-last-child(2), .eqphoto:has(.eqphotoitm:nth-child(5) .show) .eqphotoitm:nth-last-child(2), .eqphoto:has(.eqphotoitm:nth-child(4) .show) .eqphotoitm:nth-last-child(3), .eqphoto:has(.eqphotoitm:nth-child(5) .show) .eqphotoitm:nth-last-child(4) {
    transform: translate3d(-130%, 0px, 0px) rotate(-130deg);
    opacity: 0;
}

.image3 {
    background: purple;
}
picture {
    display: contents;
}

picture img, picture source {
}

.txt1 {
    font-size: 2rem;
    line-height: 2.2rem;
}

.txt2 {
    font-size: 1.4rem;
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
}

.agence-svg1 {
    position: absolute;
    left: 20px;
    width: 70px;
    left: 25%;
    transform: translateY(-20%);
}

.agence-svg2 {
    position: absolute;
    width: 60px;
    right: 20%;
    transform: translateY(-20%);
}

.titre-agence {
    font-weight: bold;
    font-size: 2rem;
    margin-top: 4em;
    margin-bottom: 2em;
}

.titre-agence b {
    color: var(--rouge);
}

.rouge {
    color: var(--rouge);
}

.cadre {
    border: 1px solid var(--coul1);
    margin-top: 4em;
    padding: 0.7em 1.2em;
    max-width: 50rem;
    position: relative;
}

.cadre:before, .cadre:after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background: var(--gris1);
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%,-50%);
    border-radius: 100%;
    border: 1px solid var(--coul1);
}

.cadre:after {
    bottom: 0;
    right: 0;
    left: unset;
    top: unset;
    transform: translate(50%, 50%);
}

.car1-titre {
    display: flex;
    gap: 1em;
    align-items: center;
    text-transform: uppercase;
    color: var(--noir);
    text-align: center;
    font-size: 2rem;
    justify-content: center;
    margin-bottom: 1em;
    margin-top: 1.5em;
    letter-spacing: 0.1em;
}

.car1-tprinc {
    font-size: 1.5rem;
    max-width: 54rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-family: 'Work Sans';
}

.car1-tsec {
    font-size: 1.4rem;
    color: var(--noir);
    text-align: center;
    margin-top: 2em;
    margin-bottom: 2em;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

.car1-tsec {}

.car1-exerg {
    border-color: #FFF;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 2rem;
    border-width: 2px;
    margin-bottom: 4em;
}

.car1-exerg:after, .car1-exerg:before {
    width: 20px;
    height: 20px;
    background-color: var(--coul1);
    border-color: #FFF;
    border-width: 2px;
}

.car2-titre, .contact-desc-slogan {
    font-size: 2rem;
    text-align: center;
    margin-top: 1em;
    margin-bottom: 0.6em;
    font-family: 'Work Sans';
}

.car2-princ, .contact-desc, .contact-desc-conclusion, .contact-desc-coordonnees {
    text-align: center;
    color: var(--coul3);
    font-size: 1.3rem;
    width: 30rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    font-family: 'Work Sans';
}

.equipe-titre, .equipe-ss-titre {
    font-size: 2.5rem;
    color: #97DDD3;
}

.equipe-ss-titre {
    font-size: 1.6rem;
    text-transform: uppercase;
}

.equipe-desc {
    font-size: 1.7rem;
    line-height: 1.2;
    margin-top: 2em !important;
}

.equipe-desc p:not(:first-child) {
    font-size: 1.4rem;
    line-height: 1.2;
    margin-top: 1.5em;
}

p {}

.citation-texte {
    font-size: 1.7rem;
    color: var(--coul3);
}

.citation-nom {
    font-size: 2rem;
    color: #86BBDE;
    margin-top: 0.3em;
}

div {}

.citation-fonction {
    font-size: 1.4rem;
    color: #86BBDE;
    margin-bottom: 6em;
    text-transform: uppercase;
}

.footer {
    font-size: 1.3rem;
    padding-top: 1em;
    padding-bottom: 2em;
}
.grande-image {
    box-shadow: 0px 6px 12px rgba(0,0,0,.13);
}

svg.agence-svg1 {
}

.txtintro {}

.txtintro {
    margin-top: min(15vw,11vh);
}

.txtintro span {
    opacity: 0.1;
}

#expertise .p-carousel .p-carousel-content .p-carousel-prev, #expertise .p-carousel .p-carousel-content .p-carousel-next {
    color: var(--coul1);
    background: white;
    border-radius: 30px;
    font-family: 'Work Sans';
    font-size: 1.5rem;
    height: 3.6rem;
    width: auto;
}

.carousel-expertise-btn {
    display: grid;
    align-items: center;
    gap: 0em;
    padding: 0.7em;
    text-transform: uppercase;
    grid-template-columns: 1em max-content;
    line-height: 0.9;
}

.carousel-expertise-btn svg {
    width: .5em;
    margin-left: auto;
    margin-right: auto;
}

.carousel-expertise-btn-suite {
    grid-template-columns: max-content 1em;
}

.carousel-expertise-btn-suite svg {
}

#expertise .p-carousel-content {
}

#expertise .p-link {
    margin-left: auto;
    margin-right: auto;
}

#expertise .p-carousel-container {
    display: grid;
    grid-template-columns: 100px 1fr 100px;
}

.realisations .p-carousel img {
    filter: grayscale(1);
    opacity: .25;
}

.realisations .p-link {
    width: 5rem;
    height: 5rem;
}

body {
    font-family: 'Work Sans';
}

.intro .cadre {
    font-size: 1.2rem;
}

.equipe-desc-vanessa {
    border-color: currentColor;
    font-size: 1.4rem;
    text-align: center;
}

.equipe-desc-vanessa strong {
    font-weight: bold;
    color: currentColor;
}
.equipe-desc-vanessa:before, .equipe-desc-vanessa:after {
    background: var(--coul3);
    border-color: currentColor;
}

.vert {
    color: #97DDD3;
}

.text-\[\#97DDD3\]\/30 .vert {
    opacity: 0.3 !important;
}
.libanim {
    width: 30vw;
    transform: translate(20%, 0px) rotate(-35deg);
    filter: drop-shadow(102px 134px 9px rgba(27,56,112,0.4));
    color: rgb(27 56 112);
    opacity: 0;
    right: 10vw !important;
}
.libanim.active {
    transform: translate(calc(-320% - 134px), 0px) rotate(-75deg);
    margin-top: -70vh;
    transition: all ease-in 4s, margin ease-out 4s, opacity linear 0s, filter ease-in 3s 1s, width ease 0s, height ease 0s;
    opacity: 1;
    filter: drop-shadow(42px 4px 32px rgba(27,56,112,0.4));
}
.mentions-legales a {
    text-decoration: underline;
}

.contact-desc, .contact-desc-conclusion, .contact-desc-coordonnees {
    text-align: left;
}

.contact-desc ul {
    margin-bottom: 1em;
    list-style: disc;
    margin-top: 1em;
    padding-left: 1em;
}

.contact-desc-conclusion {
    font-size: 1.4rem;
}

.contact-desc-slogan {
    font-size: 1.7rem;
    font-style: italic;
}

.contact a {
    text-decoration: underline;
}
.contact-desc {
    width: 100%;
}
@media (max-width:639px) {
    .txtintro {
        box-sizing: border-box;
        width: calc(100vw - 40px);
        margin-left: 20px;
        margin-right: 20px;
        font-size: 1.4rem;
        line-height: 1.4;
        margin-top: 110px;
    }
    #expertise .p-carousel .p-carousel-content .p-carousel-prev, #expertise .p-carousel .p-carousel-content .p-carousel-next {
        width: 3.6rem;
    }
    .carousel-expertise-btn-suite {
        grid-template-columns: 1fr;
    }
    #expertise .p-carousel-container {
        grid-template-columns: 4rem 1fr 4rem;
        gap: 10px;
    }
    .car1-exerg {
        max-width: calc(100% - 20px);
    }
    .titre {
        font-size: 1rem;
    }
    #equipe .tm {
        padding-left: 10px;
        padding-right: 30px;
    }
    #realisations .p-carousel-prev, #realisations .p-carousel-next {
        display: none;
    }
    #clients .tm {
        padding-left: 10px;
        padding-right: 10px;
    }
    #expertise .p-carousel-container {
        position: relative;
    }
    #expertise .p-carousel-container:after {
        left: 50px;
        content: "";
        display: block;
        width: calc(100% - 100px);
        height: 100%;
        top: 0;
        position: absolute;
    }
}