*,
*::before,
*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

* {
    transition: color 0.2s linear, font-size 0.2s ease-in-out;
}

:root {

    /*THEME CLAIR*/
    --fond: #ffe7d4;
    --texte: #35050B;
    --titre: #6A0A14;
    --ombre: #fcbb89;
    --motif: url("../images/motif-fond-clair.svg");

    /* THEME SOMBRE */
    @media (prefers-color-scheme: dark) {
        --fond: #35050B;
        --texte: #FFF3EA;
        --titre: #FFAB70;
        --ombre: #6A0A14;
        --motif: url("../images/motif-fond-sombre.svg");
    }
}

/* fonts */

@font-face {
    font-family: 'Lilita One';
    src: url('../fonts/Lilita_One/LilitaOne-Regular.ttf') format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/Quicksand/Quicksand-VariableFont_wght.ttf') format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*Placement des zones*/

body {

    margin: 0;
    background-color: var(--fond);

    display: grid;
    justify-items: center;
    grid-template-rows: auto 1fr auto;

    grid-template-columns:
        [full-start] minmax(1rem, 1fr) [content-start] minmax(0, 96rem) [content-end] minmax(1rem, 1fr) [full-end];
    min-height: 100vh;
}

body:not(.pret) header,
body:not(.pret) main,
body:not(.pret) footer {
    display: none;
}



header {
    color: var(--texte);
    background-color: var(--fond);
    width: 100%;

    transform: translateY(-0.35rem);
    /* box-shadow: 0 0.35rem 0 var(--ombre); */

    display: grid;
    grid-template-columns: subgrid;
    grid-column: full;

    position: sticky;
    top: 0;
    padding-top: 1rem;

    z-index: 5;

    opacity: 0;

    transition: opacity 0.2s ease-in;
}

header>* {
    margin-top: 0.35rem;
    grid-area: 1/2/2/3;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 2rem;
    align-items: center;
}

header>*>*:first-child {
    margin-left: 0;
    width: max-content;
    justify-self: start;
}

header>*>*:last-child {
    margin-right: 0;
    justify-self: end;
}

main {
    /* scroll-snap-type: y mandatory; */
    /* overflow-y: scroll; */
    /* height:100vh; */

    display: grid;
    container: grid;
    grid-template-columns: subgrid;
    grid-column: content;

    opacity: 0;

    transition: opacity 0.2s ease-in;
}

.section-accueil {
    min-height: 80vh;
    max-height: 1500px;
    width: 100%;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    justify-items: center;
    row-gap: 1rem;
    column-gap: 2rem;
}

.section-accueil>div {
    display: grid;
    align-self: center;
    justify-items: center;
    row-gap: 1rem;
}

section:not(:last-of-type) {
    margin-bottom: 4rem;
}

/*FOOTER*/

footer {
    padding: 1rem;

    width: 100%;

    display: grid;
    container: grid;
    grid-template-rows: auto auto auto;
    row-gap: 1rem;
    align-items: center;
    grid-column: full;

    opacity: 0;

    transition: opacity 0.2s ease-in;
}

footer>* {
    container: grid;
    grid-area: 1/2/2/3;
}

footer>*:first-child {
    grid-area: 1/1/2/2;
    justify-self: left;
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 1rem;
}

footer>*:first-child li {
    list-style-type: none;
}

footer>*:nth-child(2) {
    grid-area: 2/1/3/2;
    justify-self: center;
}

footer>*:last-child {
    grid-area: 3/1/4/2;
    display: flex;
    flex-direction: column;
    justify-self: right;
}

footer>*:last-child>* {
    text-align: right;
}

@media (min-width:768px) {
    footer {
        padding: 1rem;

        width: 100%;

        display: grid;
        container: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        align-items: center;
        grid-column: full;

        opacity: 0;

        transition: opacity 0.2s ease-in;
    }

    footer>* {
        container: grid;
        grid-area: 1/2/2/3;
    }

    footer>*:first-child {
        grid-area: 1/1/2/2;
        display: inline;
    }

    footer>*:nth-child(2) {
        grid-area: 1/2/2/3;
        justify-self: center;
    }

    footer>*:last-child {
        grid-area: 1/3/2/4;
        display: flex;
        flex-direction: column;
        justify-self: end;
    }

    footer>*:last-child>* {
        text-align: end;
    }
}

/*Mise en forme classique*/
h1,
h1>span::before,
h1>span,
h1::before,
h2,
h2::before,
h3,
p,
label,
input,
textarea,
li,
figcaption,
a {
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word;
    max-width: 100%;
}

h1,
h2,
h1>span,
.logo * {
    position: relative;
    color: var(--titre);
    font-family: 'Lilita One';
    background-image: var(--motif);
    background-repeat: repeat;
    background-size: 857px 154px;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

h1,
h1::before,
h1>span::before {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

h3 {
    position: relative;
    letter-spacing: 1px;
    color: var(--titre);
    font-family: 'Lilita One';
}

h1::before,
h2::before,
h1>span::before,
.logo *::before {
    content: attr(data-text);
    position: absolute;
    font-family: 'Lilita One';
    top: 0;
    left: 0;
    color: var(--titre);
    z-index: -1;
}

h1 {
    font-size: 4rem;
}

h1::before {
    text-shadow: 0 0.3rem 0 var(--ombre);
}

h1>span::before {
    text-shadow: 0 -1.5rem 0 var(--ombre);
}

h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

h2::before {
    text-shadow: 0 0.2rem 0 var(--ombre);
}

h3 {
    font-size: 1.5rem;
    text-shadow: 0 0.3rem 0 var(--ombre);
}

@media (min-width:768px) {
    h1 {
        font-size: 5rem;
    }

    h1::before {
        text-shadow: 0 0.4rem 0 var(--ombre);
    }

    h2 {
        font-size: 3rem;
    }

    h2::before {
        text-shadow: 0 0.30rem 0 var(--ombre);
    }

    h3 {
        font-size: 2rem;
        text-shadow: 0 0.35rem 0 var(--ombre);
    }
}

ul {
    margin-left: 1rem;
}

p,
a,
label,
input,
textarea,
li,
figcaption {
    font-family: 'Quicksand';
    color: var(--texte);
}

.list {
    margin-left: 1rem;
    margin-bottom: 0.5rem;
}

nav li {
    margin-left: 0;
}

nav li:not(:last-child) {
    margin-bottom: 0;
}

p:not(:last-of-type) {
    margin-bottom: 1rem;
}

a {
    transition: color 0.2s linear;
    display: inline-block;
    /* FIXME les liens ne se coupent pas */
}

a:hover,
a:focus {
    color: var(--titre);
    transition: color 0.2s linear;
}

img {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    object-fit: cover;
}

img,
video,
audio {
    max-height: 90vh;
    max-width: 90vw;
}



/*FORMULAIRE*/

form {
    width: 100%;
    height: 100%;
    display: grid;
    row-gap: 1rem;
    container: grid;
    grid-template-columns: subgrid;
}

input,
textarea {
    border-radius: 15px;
    background-color: var(--fond);
    padding: 0.5rem;
    border: 2px solid var(--ombre);
}

textarea {
    /* min-width:100%; */
    width: 100%;
    min-height: 5rem;
    resize: vertical;
}

/*Mise en forme spécifique*/

.logo {
    display: flex;
    width: max-content;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    z-index: 11;
    text-decoration-line: none;
}

.logo:hover,
.logo:focus {
    text-decoration-line: none;
}

.logo img {
    width: 40px;
    height: 40px;
    border-radius: 0;
    transform: none;
    box-shadow: none;
}

.logo * {
    font-size: 2rem;
}

/*MENU DE NAVIGATION*/

nav {
    z-index: 100;
    display: grid;
    grid-template-columns: subgrid;
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: clip-path 0.2s linear;
}

.navOpen {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition: clip-path 0.2s linear;
}

nav * {
    color: var(--texte);
}

nav ul {
    margin-left: 0;
    display: grid;
    grid-template-columns: auto;
    justify-items: center;
    align-items: end;
    list-style-type: none;
    background-color: var(--ombre);
}

nav ul li {
    width: 100%;
    position: relative;
    background-color: var(--ombre);
}

nav ul a {
    padding: 1rem;
    border-top: 1px solid var(--ombre);
    transform: translateY(-0.35rem);
    transition: transform 0.2s ease-out, color 0.2s linear;
    background-color: var(--fond);

    display: block;
    text-decoration: none;
}

nav ul a:hover,
nav ul a:focus {
    transform: translateY(0);
    transition: transform 0.2s ease-out, color 0.2s linear;
}

nav ul::after {
    content: "";
    display: table;
    clear: both;
}

.burger {
    display: block;
    width: min-content;
    justify-self: end;

    background-color: var(--titre);
    border-radius: 50px;
    border: none;
    padding: 0.5rem;
    margin: 0.5rem;
    box-shadow: 0 0.35rem var(--ombre);
    transform: translateY(-0.35rem);
    transition: box-shadow 0.2s ease-out, transform 0.2s ease-out;
}

.burger:hover,
.burger:focus {
    box-shadow: 0 0 var(--ombre);
    transform: translateY(0);
    transition: box-shadow 0.2s ease-out, transform 0.2s ease-out;
}

.burger:hover {
    cursor: pointer;
}

@media (min-width:1224px) {
    nav {
        width: 100%;
        position: relative;
        z-index: 100;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        top: auto;
    }

    nav ul {
        display: flex;
        flex-direction: row;
        justify-content: end;
        list-style-type: none;
        background-color: var(--fond);
    }

    nav ul li {
        width: 30%;
        text-align: center;
        position: relative;
        background-color: var(--fond);
    }

    nav ul a {
        padding: 0.5rem;
        display: block;
        transform: translateY(-0.35rem);
        box-shadow: 0 0.35rem var(--ombre);
        transition: transform 0.2s ease-out, color 0.2s linear, box-shadow 0.2s ease-out;
        background-color: var(--fond);
        border-top: none;
    }

    nav ul a:hover,
    nav ul a:focus {
        transform: translateY(0rem);
        box-shadow: 0 0 var(--ombre);
        transition: transform 0.2s ease-out, color 0.2s linear, box-shadow 0.2s ease-out;
    }

    .burger {
        display: none;
    }
}

/*sections*/

/*TITRE*/

.titre {
    grid-template-rows: 1fr auto auto 1fr;
    justify-items: center;
}

.titre-smooth,
.titre-smooth::before {
    padding-top: 5rem;
}

.titre>*:first-child {
    grid-area: 2/1/3/2;
}

.titre>*:last-child {
    grid-area: 3/1/4/2;
}

.titre>h1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

@media (min-width:1024px) {
    .titre>h1 {
        display: block;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
    }
}

.titre img {
    width: 350px;
    height: 350px;
    object-fit: cover;
}

/*A PROPOS*/

.aPropos {
    grid-template-rows: 1fr auto auto 1fr;
    justify-items: center;
}

.aPropos>*:first-child {
    grid-area: 2/1/3/2;
}

.aPropos>*:last-child {
    grid-area: 3/1/4/2;
}

.aPropos img {
    width: 350px;
    height: 350px;
}

@media (min-width:1024px) {
    .aPropos {
        grid-template-rows: 1fr auto 1fr;
        grid-template-columns: 1fr 1fr;
    }

    .aPropos>*:first-child {
        grid-area: 2/1/3/2;
        display: grid;
        row-gap: 1rem;
    }

    .aPropos>*:last-child {
        grid-area: 2/2/3/3;
        display: grid;
        row-gap: 1rem;
    }
}

/*Sous developpement*/

.quiJeSuis {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: 1fr auto auto 1fr;
}

.quiJeSuis>*:first-child {
    grid-area: 2/1/3/2;
}

.quiJeSuis>*:last-child {
    grid-area: 3/1/4/2;
}

.quiJeSuis>*:last-child {
    display: grid;
    grid-template-rows: 1fr 1fr;
    row-gap: 1rem;
    align-items: center;
}

.quiJeSuis img {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    height: 400px;
}

.inspirations {
    grid-template-columns: subgrid;
    grid-template-rows: 1fr auto auto 1fr;
}

.inspirations>*:first-child {
    grid-area: 2/1/3/2;
}

.inspirations>*:last-child {
    grid-area: 3/1/4/2;
}

.inspirations>div {
    justify-items: left;
    width: 100%;

}

.histoireInspirations {
    display: grid;
    width: 100%;
    grid-template-rows: auto auto;
    row-gap: 1rem;
    justify-items: left;
}

.inspirations img {
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 200px;
}

@media (min-width:1024px) {
    .quiJeSuis>*:last-child {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        column-gap: 1rem;
    }

    .histoireInspirations {
        grid-template-rows: auto;
        grid-template-columns: 2fr 1fr;
        column-gap: 1rem;
    }
}

/*TIMELINE*/

.titre-timeline {
    justify-self: center;
}

.timeline {
    list-style-type: none;
    display: grid;
    row-gap: 2rem;
    grid-auto-rows: 1fr;

    background: linear-gradient(var(--titre), var(--titre));
    background-size: 4px 100%;
    background-repeat: no-repeat;
    background-position: top right;
}

.timeline-item {
    display: grid;
    margin-left: 0;
    grid-template-columns: 1fr auto;
    column-gap: 1.25rem;
}

.timeline-item::after {
    content: "";
    width: 1.875rem;
    height: 1.875rem;
    border: solid 4px var(--titre);
    border-radius: 100%;
    margin-top: 3rem;
    background: radial-gradient(var(--titre) 30%, var(--ombre) 40%);
    transform: translateX(50%);
}

.timeline-article {
    position: relative;
    /**/
    border-radius: 7px;
    padding: 1.25rem;
    background: var(--ombre);

    height: 100%;
}

.timeline-article::after {
    content: "";
    position: absolute;

    top: 3rem;
    right: 0;

    transform: translateX(95%);
    width: 1.875rem;
    height: 1.875rem;
    background-color: var(--ombre);
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

.timeline-heading {
    font-size: 2rem;
    margin-bottom: 5px;
    text-shadow: 0 0.2rem 0 var(--fond);
}

.timeline-date {
    font-size: 1rem;
    font-style: italic;
}

.timeline-description {
    color: var(--texte);
    margin-top: 15px;
}

@media all and (min-width:768px) {
    .timeline {
        max-width: 80rem;
        margin: auto;
        row-gap: 0;
        background-position: top center;
    }

    .timeline-item {
        width: 50%;
    }

    .timeline-item:nth-child(even) {
        justify-self: right;
        align-self: right;
        direction: rtl;
    }

    .timeline-item:nth-child(even)::after {
        transform: translateX(-50%);
    }

    .timeline-item:nth-child(even) .timeline-article::after {
        clip-path: polygon(100% 0, 100% 100%, 0 50%);
        transform: translateX(-95%);
        left: 0;
        right: auto;
    }
}

/*COMPETENCES*/

.competences {
    grid-template-rows: 1fr auto auto auto 1fr;
    justify-items: center;
}

.competences>*:first-child {
    grid-area: 2/1/3/2;
}

.competences>*:nth-child(2) {
    grid-area: 3/1/4/2;
}

.competences>*:last-child {
    grid-area: 4/1/5/2;
}

.competences>div:first-child {
    display: grid;
    grid-template-rows: auto 1fr auto;
    justify-items: center;
    align-items: center;
}

.competences>div:first-child>*:first-child {
    grid-area: 1/1/2/2;
}

.competences>div:first-child>*:nth-child(2) {
    grid-area: 2/1/3/2;
    text-align: center;
}

.competences>div:first-child>*:last-child {
    grid-area: 3/1/4/2;
}

.competences .symbole {
    width: 100px;
    height: 100px;
}

@media (min-width:1024px) {
    .competences>div:first-child {
        display: grid;
        grid-template-columns: auto 1fr auto;
        justify-items: center;
        align-items: center;
    }

    .competences>div:first-child>*:first-child {
        grid-area: 1/1/2/2;
    }

    .competences>div:first-child>*:nth-child(2) {
        grid-area: 1/2/2/3;
        text-align: center;
    }

    .competences>div:first-child>*:last-child {
        grid-area: 1/3/2/4;
    }
}

/*Sous partie*/

.gridCompetence {
    margin-left: 0;
    display: grid;
    grid-template-rows: auto;
    row-gap: 1rem;
    margin-top: 1rem;
    align-items: center;
    width: 100%;
}

.gridCompetence img {
    border-radius: 0;
    width: auto;
    height: 3rem;
}

.gridCompetence label {
    display: grid;
    column-gap: 0.5rem;
    align-items: center;
    grid-template-rows: auto auto;
}

.gridCompetence li {
    display: grid;
    margin-left: 0;
    width: 100%;
    grid-template-rows: auto auto;
    row-gap: 0.5rem;
    align-items: center;
    justify-items: start;
    text-align: start;
}

.gridCompetence li:not(:last-of-type) {
    margin-bottom: 1rem;
}

/* .gridCompetence li *:first-child {
    text-align: end;
} */


@media (min-width:768px) {
    .gridCompetence li {
        grid-template-columns: 1fr 3fr;
        column-gap: 1rem;
        justify-items: end;
        text-align: end;
    }

    .gridCompetence label {
        grid-template-columns: auto auto;
        grid-template-rows: 1fr;
        justify-content: center;
    }
}

progress {
    width: 100%;
    height: 2rem;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    border-radius: 50px;
    background-color: var(--ombre);
}

progress::-webkit-progress-bar {
    background-color: var(--ombre);
    border-radius: 50px;
}

progress::-webkit-progress-value {
    background-color: var(--titre);
    border-radius: 50px;
}

progress::-moz-progress-bar {
    background-color: var(--titre);
    border-radius: 50px;
}

/*REALISATIONS*/

.realisations {
    grid-template-rows: 1fr auto auto auto auto 1fr;
    justify-items: center;
}

.realisations>*:first-child {
    grid-area: 2/1/3/2;
}

.realisation h2 {
    text-align: center;
}

.realisations>*:nth-child(2) {
    grid-area: 3/1/4/2;
}

.realisations>*:nth-child(3) {
    grid-area: 4/1/5/2;
}

.realisations>*:last-child {
    grid-area: 5/1/6/2;
}

.symboleReal {
    height: 150px;
    width: 150px;
    transform: translateY(-0.35rem);
    box-shadow: 0 0.35rem 0 var(--ombre);
}

.themeRealisations {
    display: grid;
    grid-template-rows: auto auto auto;
    column-gap: 1rem;
}

@media (min-width:768px) {
    .symboleReal {
        height: 200px;
        width: 200px;
        transform: translateY(-0.35rem);
        box-shadow: 0 0.35rem 0 var(--ombre);
    }

    .themeRealisations {
        grid-template-columns: auto auto auto;
        row-gap: 1rem;
    }
}

/*Sous partie*/

/*Zone listage en catégorie*/
.filter-list {
    display: grid;
    row-gap: 1rem;
    column-gap: 1rem;
    grid-template-rows: repeat(2, auto);
    grid-template-columns: repeat(2, auto);
    list-style-type: none;
    justify-content: center;
    justify-items: center;
    align-items: center;
}

@media (min-width:768px) {
    .filter-list {
        grid-template-columns: repeat(4, auto);
        justify-items: auto;
        grid-template-rows: auto;
    }
}

.filter-item {
    width: 10rem;
}

.filter-btn {
    font-family:'Quicksand';
    color: var(--ombre);
    width: 100%;
    border: none;
    padding: 1rem;
    background-color: var(--titre);
    border-radius: 35px;
    transform: translateY(-0.35rem);
    box-shadow: 0 0.35rem 0 var(--ombre);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.filter-btn:hover,
.filter-btn:focus {
    cursor: pointer;
    transform: translateY(0);
    box-shadow: 0 0 0 var(--ombre);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.current {
    transform: translateY(0);
    box-shadow: 0 0 0 var(--ombre);
    color: var(--ombre);
}

.current:hover {
    cursor: auto;
}

/*partie realisations*/

.gallery {
    list-style-type: none;
    display: grid;
    row-gap: 5vh;
    background: linear-gradient(var(--titre), var(--titre));
    background-size: 4px 100%;
    background-repeat: no-repeat;
    background-position: top left;
}

.gallery * {
    list-style-type: none;
}

.gallery-year {
    display: grid;
    margin-left: 1rem;
}

.gallery-year h2 {
    margin-left: 1rem;
}

.gallery-year::after {
    position: absolute;
    content: "";
    width: 1.875rem;
    height: 1.875rem;
    border: solid 4px var(--titre);
    border-radius: 100%;
    margin-top: 80px;
    background: radial-gradient(var(--titre) 30%, var(--ombre) 40%);
    transform: translateX(-97%);
}

.gallery-year ul {
    margin-left: 0;
    display: grid;
    row-gap: 1rem;
}

@media (min-width:768px) {
    .gallery-year::after {
        margin-top: 90px;
    }

    .gallery-year ul {
        grid-template-columns: 1fr 1fr;
        column-gap: 1rem;
    }
}

@media (min-width:1024px) {
    .gallery-year ul {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.gallery-item {
    position: relative;
    top: 0;
    border-radius: 15px;
    max-width: 700px;
    min-height: 300px;
}

.gallery-lien-realisation {
    display: block;
    border-radius: 15px;
    width: 100%;
    height: 100%;
    background-color: var(--titre);
    text-decoration: none;
    transform: translateY(-0.35rem);
    box-shadow: 0 0.35rem 0 var(--ombre);
    transition: box-shadow 0.2s ease-out, transform 0.2s ease-out;
}

.gallery-lien-realisation:hover,
.gallery-lien-realisation:focus {
    transform: translateY(0);
    box-shadow: 0 0 0 var(--ombre);
    transition: box-shadow 0.2s ease-out, transform 0.2s ease-out;
}

.gallery-item figure {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.gallery-item img {
    width: 100%;
    margin: auto;
    border-radius: 0;
    height: auto;
    max-height: 300px;
    object-fit: contain;
}

.gallery-item audio {
    width: 100%;
    padding: 0 1rem 0 1rem;
    height: 50px;
    margin-top: auto;
    margin-bottom: auto;
}

.gallery-item figcaption {
    border-radius: 0 0 15px 15px;
    background-color: var(--titre);
    padding: 1rem;
    font-weight: bold;
    color: var(--fond);
    margin-left: auto;
    margin-right: auto;
}

/*tag*/

.gallery-tag {
    padding: 0.5rem;
    border-radius: 15px 15px 0 0;
    width: 100%;
    background-color: var(--titre);
    color: var(--fond);
    font-weight: bold;
    display: flex;
    justify-content: center;
}

.gallery-tag-realisation-exceptionnelle {
    position: absolute;
}

.hidden {
    display: none;
}

/*partie developpement realisation*/

.apercuRealisation {
    grid-template-rows: auto 1fr;
    display: none;

    width: 100%;
    height: auto;
    background-color: var(--ombre);
    padding: 1rem;
    border-radius: 20px;

    z-index: 0;
}

.apercuRealisation section {
    margin-bottom: 0;
}

.apercuRealisation-tete {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: auto;
}

.apercuRealisation ul {
    list-style-type: none;
}

.presentationRealisation video,
.presentationRealisation audio,
.presentationRealisation img {
    width: 100%;
    min-height: 2rem;
}

.apercuRealisation figure,
.petite-realisation {
    display: grid;
    justify-items: center;
    align-items: center;
    padding: 0.5rem;
    row-gap: 0.5rem;

    background-color: var(--titre);
    border-radius: 20px;
    box-shadow: 0 0.4rem 0 var(--fond);

    width: 100%;

    margin-left: auto;
    margin-right: auto;
}

.apercuRealisation figure {
    margin-bottom: 1rem;
}

.apercuRealisation figcaption {
    color: var(--fond);
}

.titre-realisation {
    position: relative;
    text-align: center;
}

.titre-realisation::before {
    position: absolute;
    text-shadow: 0 0.35rem 0 var(--fond);
    left: 50%;
    transform: translateX(-50%);
    width:100%;

}

.apercuRealisation h3 {
    text-shadow: 0 0.3rem 0 var(--fond);
    margin-bottom: 1rem;
}

.resultatsAnnexes {
    display: grid;
    grid-template-rows: auto;
    row-gap: 5px;
}

.imgDecorative {
    display: none;
}

.petite-realisation img {
    height: auto;
    width: 100%;
    border-radius: 0;
}

.petite-realisation audio {
    width:100%;
}

@media (min-width:1024px) {
    .presentationRealisation {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1rem;
    }

    .apercuRealisation img {
        max-height:70vh;
    }

    .petite-realisation img {
        height: auto;
        width: 100%;
        max-width: 70vw;
        border-radius: 0;
    }

    .imgDecorative {
        display: inline;
        width: auto;
        height: 100%;
        border-radius: 20px;
    }
}

.bouton-croix {
    width: 3rem;
    height: 3rem;
    position: absolute;
    top: 2rem;
    right: 1rem;

    cursor: pointer;
    border-radius: 100%;
    border: none;
    background-color: var(--titre);

    box-shadow: 0 0.35rem 0 var(--ombre);
    transform: translateY(-0.35rem);

    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.bouton-croix:focus,
.bouton-croix:hover {
    box-shadow: 0 0 0 var(--fond);
    transform: translateY(0);

    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.bouton-croix img {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
}

/*CONTACT*/

.contact {
    grid-template-rows: 1fr auto auto 1fr;
    justify-items: center;
}

.contact>*:first-child {
    grid-area: 2/1/3/2;
}

.contact>*:last-child {
    grid-area: 3/1/4/2;
}

.zoneContact {
    width: 100%;
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.zoneContact>* {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
}

@media (min-width:1024px) {
    .zoneContact {
        display: inline;
    }

    .contact {
        grid-template-rows: 1fr auto 1fr;
        grid-template-columns: 1fr 1fr;
        column-gap: 1rem;
    }

    .contact>*:first-child {
        grid-area: 2/1/3/2;
        display: grid;
        row-gap: 1rem;
    }

    .contact>*:last-child {
        grid-area: 2/2/3/3;
    }
}

.envoyerMail {
    display: grid;
    grid-template-rows: auto;
    row-gap: 1rem;
    grid-template-columns: subgrid;
    justify-items: center;
    align-items: center;
}

/*POLITIQUE DU SITE*/

.attribution-liste {
    display: grid;
    row-gap: 1rem;
}

.attribution-liste li {
    list-style-type: none;
}

.attribution-liste img {
    border-radius: 0;
    object-fit: contain;
}

/*Boutons et img*/

.boutonDecouvrir,
input[type=submit] {
    padding: 1rem;
    background-color: var(--titre);
    color: var(--ombre);
    border: none;
    height: min-content;
    border-radius: 50px;
    text-decoration: none;
    transform: translateY(-0.35rem);
    box-shadow: 0 0.35rem 0 var(--ombre);
    transition: box-shadow 0.2s ease-out, transform 0.2s ease-out;
}

.boutonDecouvrir:hover,
input[type=submit]:hover,
.boutonDecouvrir:focus,
input[type=submit]:focus {
    color: var(--ombre);
    transform: translateY(0);
    box-shadow: 0 0 0 var(--ombre);
    transition: box-shadow 0.2s ease-out, transform 0.2s ease-out;
}

.decoration-symbole {
    margin: 0 15px 0 15px;
    transform: translateY(-0.35rem);
    box-shadow: 0 0.35rem var(--ombre);
}

/*ecran de chargement*/

.ecranDeChargement {
    position: absolute;
    z-index: 500;
    width: 100%;
    height: 100vh;
    background-color: var(--fond);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;

    transition: opacity 0.2s ease-in;
}

.visible {
    opacity: 1;

    transition: opacity 0.2s ease-in;
}

.cacher {
    opacity: 0;

    transition: opacity 0.2s ease-in;
}

.grid2Rows {
    grid-template-rows: 1fr auto auto 1fr;
}

.grid2Rows>*:first-child {
    grid-area: 2/1/3/2;
}

.grid2Rows>*:last-child {
    grid-area: 3/1/4/2;
    justify-self: start;
    justify-items: start;
}