/* -------------------------------- HEADER -------------------------------- */

.templateD .header{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 45px 50px;
    margin-top: 22px;
}

.templateD .header h1{
    font-size: 48px;
    line-height: 1.2em;
    font-weight: 500;
    text-align: center;
    grid-column: span 2;
}

.templateD .header h1 strong{
    color: var(--color-secondary);
    font-weight: 500;
}

.templateD .header .phrase_daccroche{
    font-family: "Space Grotesk";
    font-size: 30px;
    line-height: 1.2em;
    font-weight: 500;
}

.templateD .header .image{
    grid-column: span 2;
    border-radius: 8px;
    width: 100%;
    height: auto;
    aspect-ratio: 1100/470;
}

@media (max-width: 1600px) {
    .templateD .header h1{
        font-size: 40px;
    }
    .templateD .header .phrase_daccroche{
        font-size: 26px;
    }
}

@media (max-width: 992px) {
    .templateD .header h1{
        font-size: 30px;
    }
}

@media (max-width: 800px) {
    .templateD .header{
        grid-template-columns: 1fr;
        gap: 0px;
    }
    .templateD .header h1{
        grid-column: span 1;
        margin-bottom: 30px;
    }
    .templateD .header .image{
        grid-column: span 1;
    }
    .templateD .header .phrase_daccroche{
        margin-block: 40px 24px;
    }
}

/* -------------------------------- CONTENU -------------------------------- */

.templateD .contenu{
    padding-block: 110px;
}

.templateD .contenu .container{
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.templateD .contenu figure{
    display: flex;
    align-items: center;
    gap: 80px;
}

.templateD .contenu figure img,
.templateD .contenu figure figcaption{
    width: 50%;
}

.templateD .contenu figure img{
    border-radius: 12px;
    aspect-ratio: 1;
}

.templateD .contenu figure:nth-child(odd) figcaption{
    order: -1;
}

.templateD .contenu figure .titre{
    font-family: "Space Grotesk";
    font-size: 30px;
    line-height: 1.2em;
    font-weight: 500;
    margin-bottom: 32px;
}

.templateD .contenu figure .btn{
    margin-top: 32px;
}

@media (max-width: 992px) {
    .templateD .contenu figure{
        gap: 40px;
    }
    .templateD .contenu figure .titre{
        font-size: 26px;
        margin-bottom: 24px;
    }
}

@media (max-width: 700px) {
    .templateD .contenu{
        padding-block: 50px 60px;
    }
    .templateD .contenu figure{
        flex-direction: column;
    }
    .templateD .contenu figure figcaption{
        order: -1;
    }
    .templateD .contenu figure img,
    .templateD .contenu figure figcaption{
        width: 100%;
    }
    .templateD .contenu .container{
        gap: 40px;
    }
}

/* -------------------------------- CITATION -------------------------------- */

.templateD .citation{
    max-width: 1060px;
    padding-block: 85px 90px;
    position: relative;
}

.templateD .citation::after{
    content: "";
    display: block;
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: calc(100% - 40px);
    height: calc(100% - 90px);
    aspect-ratio: 460/260;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='461.842' height='258.368' viewBox='0 0 461.842 258.368'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Cpath id='Tracé_193' data-name='Tracé 193' d='M20.355,96.932c57.555,115.109,186.7,72.294,186.7,72.294C209.162,80.087,62.468,28.849,0,12.7c0,0,2.106,50.536,20.355,84.233' transform='translate(0 -12.699)' fill='%23f5f8fc'/%3E%3C/clipPath%3E%3CclipPath id='clip-path-2'%3E%3Cpath id='Tracé_242' data-name='Tracé 242' d='M36.319,169.926s129.147,42.815,186.7-72.3C241.27,63.935,243.375,13.4,243.375,13.4,180.908,29.549,34.214,80.787,36.319,169.926' transform='translate(-36.297 -13.399)' fill='%23f5f8fc'/%3E%3C/clipPath%3E%3CclipPath id='clip-path-3'%3E%3Ccircle id='Ellipse_19' data-name='Ellipse 19' cx='82.822' cy='82.822' r='82.822' fill='%23f5f8fc'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Groupe_4460' data-name='Groupe 4460' transform='translate(-2388 -6981.781)'%3E%3Cg id='Groupe_3405' data-name='Groupe 3405' transform='translate(2388 7070.919)'%3E%3Cg id='Groupe_652' data-name='Groupe 652' clip-path='url(%23clip-path)'%3E%3Crect id='Rectangle_309' data-name='Rectangle 309' width='210.566' height='210.566' transform='translate(0 -6.391)' fill='%23f5f8fc'/%3E%3C/g%3E%3C/g%3E%3Cg id='Groupe_3406' data-name='Groupe 3406' transform='translate(2642.763 7075.832)' clip-path='url(%23clip-path-2)'%3E%3Crect id='Rectangle_333' data-name='Rectangle 333' width='210.566' height='210.566' transform='translate(-2.083 -4.286)' fill='%23f5f8fc'/%3E%3C/g%3E%3Cg id='Groupe_3407' data-name='Groupe 3407' transform='translate(2538.204 6981.781)'%3E%3Cg id='Groupe_658' data-name='Groupe 658' clip-path='url(%23clip-path-3)'%3E%3Crect id='Rectangle_312' data-name='Rectangle 312' width='168.452' height='168.452' transform='translate(-2.808 -1.481)' fill='%23f5f8fc'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

.templateD .citation *{
    text-align: center;
    font-size: 48px;
    line-height: 1.2em;
    font-weight: 500;
} 

.templateD .citation strong{
    color: var(--color-secondary);
    font-weight: 500;
}

@media (max-width: 1600px) {
    .templateD .citation *{
        font-size: 40px;
    }
}

@media (max-width: 992px) {
    .templateD .citation{
        padding-block: 40px 60px;
    }
    .templateD .citation::after{
        bottom: 60px;
        height: calc(100% - 60px);;
    }
    .templateD .citation *{
        font-size: 30px;
    }
}