/* Fonts
    fichiers différents pour les fontes */

@font-face {
    font-family: Cthulhumbus Arcade;
    src: url('JMH-Cthulhumbus-Arcade.otf');
}

@font-face {
    font-family: Parkinsans;
    src: url('Parkinsans-SemiBold.ttf');
}

/*root est pour définir des données par défaut*/
:root {
    --headerImage: url('underwater.gif');
    --bodyImage: url('');

    --fontSize: 16px;
    --bodyFont: Parkinsans;
    --accentFont: Cthulhumbus Arcade;

    --fontColor: #d8d4f2;
    --neutralDark: #13092d;
    --backColor: #5158BB;
    --accent: #a5be00;
    --accentDark: #679436;

    /*calcul pour la largeur*/
    --sidebarWidth: 35%;
}

@media print {

    @page {
        size: A4 landscape;
    }
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    color: var(--fontColor);
    font-family: var(--bodyFont);
    font-size: var(--fontSize);
}

aside {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: calc(var(--sidebarWidth));
    min-width: 350px;
    border: 2px solid var(--backColor);
}

#inside {
    padding: 25px 20px;
}

.grid {
    display: grid;
}

.item1 {
    grid-column: 1 / span 2;
}

#img-banner {
    background: var(--fontColor);
    background-image: var(--headerImage);
    height: 216px;
}

#title {
    font-size: 72px;
    position: absolute;
    top: 165px;
    margin-left: 15px;
}

.breadcrumbs {
    margin-top: 35px;
}

.breadcrumbs ul {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
}

.breadcrumbs li:not(:last-child)::after {
    display: inline-block;
    margin: 0 .25rem;
    content: "→";
}

#descrip {
    margin-top: 25px;
    width: 75%;
    grid-column: 1 / span 1;
}

#social {
    margin-top: 7px;
}


#navbar {
    margin-top: 25px;
    width: 115%;
}

#navbar ul,
#social ul {
    list-style-type: none;
}

#navbar li {
    padding: 20px;
}


#navbar a {
    text-decoration: none;
    font-weight: 800;
    font-size: 20px;
    font-family: var(--accentFont);
    color: var(--accent);
}

#navbar li:hover,
#navbar .active {
    background: var(--fontColor);
}

#navbar a:hover {
    color: var(--backColor);
    text-decoration: none;
}


footer {
    background-color: var(--accent);
    font-family: var(--accentFont);
    color: var(--neutralDark);
    width: 100%;
    height: 40px;
    padding: 10px;
    text-align: center;
    position: absolute;
    bottom: 0px;
}

main {
    position: relative;
    margin-left: var(--sidebarWidth);
    overflow: auto;
}

.contentwrap {
    padding: 50px 0px;
    margin: 0px 80px;
}

.paragraphe {
    margin-bottom: 50px;
}


h1 {
    font-family: Cthulhumbus Arcade;
    font-size: 25px;
}

h2 {
    font-family: var(--accentFont);
    border-bottom: 2px solid var(--fontColor);
    margin-bottom: 20px;
}

h1,
h2,
h3,
h4 {
    color: var(--accent);
}

h3 a {
    color: var(--accent);
}

h3 a:hover {
    color: var(--backColor);
}

strong {
    color: var(--accentDark);
}


a {
    color: var(--fontColor);
}

a:hover {
    color: var(--accent);
}

.box {
    border-top: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    padding: 10px;
}



/*Tableau des inspirations------------------------------------------------------*/
table,
td {
    border: 1px solid var(--accent);
    border-collapse: collapse;
}

td {
    padding: 20px;
}

td img {
    width: 360px;
}



/*PDF intégré*/
.pdf>.box {
    margin: 20px 0px;
}

.pdf {
    width: 100%;
    min-height: 500px;
}



/*pages de travaux-------------------------------------------------------------*/
.gallery {
    padding: 10px;
    gap: 5px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2);
}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery img:hover {
    border: 2px solid var(--accent);
}

.gallery h4 {
    position: relative;
    top: -50%;
    padding: 10px;
    background-color: var(--neutralDark);
    border: 2px solid var(--accent);
    opacity: 80%;
    visibility: hidden;
}

.gallery img:hover~h4 {
    visibility: visible;
}


.work {
    border-top: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    padding: 30px;
    gap: 20px;
    grid-template-columns: repeat(4, 1fr);
}

.work h3 {
    grid-column: 1 /span 1;
}

.intro {
    background-color: var(--fontColor);
    color: var(--backColor);
    padding: 10px;
    grid-column: 2 /span 3;
}

.imgpays {
    width: 100%;
}

.imgportrait {
    max-height: 500px;
    max-width: 100%;
}



/*mise en page variante A (première image paysage)*/
.mepA .imgpays {
    grid-column: 1 /span 2;
    grid-row: 2 /span 1;
}

.mepA .petitpara {
    grid-column: 3 /span 2;
    grid-row: 2 /span 2;
}

.mepA div {
    grid-column: 1 /span 4;
    grid-row: 3 /span 1;
}

.mepA .imgportrait {
    grid-column: 2 /span 3;
}


/*mise en page variante B (deux images paysage)*/
.mepB .imgpays {
    grid-column: 1 /span 2;
    grid-row: 2 /span 1;
    max-width: 400px;
}

.mepB div~.imgpays {
    grid-column: 3 /span 2;
    grid-row: 2 /span 1;
}

.mepB div {
    grid-column: 1 /span 4;
    grid-row: 3 /span 1;
}

/*mise en page variante C (première image portrait)*/
.mepC .imgportrait {
    grid-column: 1 /span 2;
    grid-row: 2 /span 3;
}

.mepC .petitpara {
    grid-column: 3 /span 2;
    grid-row: 2 /span 1;
}

.mepC div {
    grid-column: 3 /span 2;
    grid-row: 3 /span 1;
}








/*Vidéo intégrée-------------------------------------------------------------------*/
.video {
    height: 315px;
    width: 420px;
}

#integration {
    margin: 20px 0px;

}

#integration p {
    grid-column: 2 / span 1;
    margin: 10px;

}

#integration iframe {
    grid-column: 1 / span 1;
    grid-row: 1;
}



/*Page de contact-------------------------------------------------------------*/
.form {
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 20px;
}

input[type=text],
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--accent);
    background-color: var(--accentDark);
    color: var(--fontColor);
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical
}

#sujet {
    height: 200px;
}

input[type=submit] {
    background-color: var(--backColor);
    color: var(--accent);
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
}

input[type=submit]:hover {
    background-color: var(--accentDark);
}

/*page d'erreur---------------------------------------------------------*/

#error {
    height: 695px;
    text-align: center;
}

#error h1 {
    font-size: 64px;
}

#error p {
    background-color: var(--neutralDark);
    padding: 5px;
}

}