body {
    margin:0;
    font-family: Verdana sans-serif;
}

main {
    /*margin:0;*/
    margin: 3.8em 0 0;
    padding: 0;
}

/*---------------------------- INTRO ---------------------------------*/

.introduction {
    position: relative;
    /*padding:21em 8em 0;*/
    /*padding:11.5em 8em 0;*/
    padding:10.7em 8em 0;
    background-image: url('../images/grid-width.png');
    background-repeat: no-repeat;
    background-size: 130%;
    /*background-image: url('../images/grid_portfolio_fond_transparent.png');*/
    /*background-repeat: no-repeat;*/
    /*background-size: 200%;*/
    /*height: 70vh;*/
    height: 68vh;
    background-position: center;
}

.introduction h1{
    font-family: transat-text, serif;
    /*font-family: ivyepic-variable, sans-serif;*/
    text-transform: uppercase;
    font-size : 3em;
    margin: 0;
    font-variation-settings: 'wdth' 100, 'wght' 600, 'slnt' 0;
}

.introduction h2 {
    font-family: transat-text, serif;
    /*font-family: ivyepic-variable, sans-serif;*/
    font-weight: 500;
    font-size : 2em;
    margin-top: 0;
    margin-bottom: 0;
}

.introduction #prenom {
    font-family: transat-text, serif;
    /*font-style: italic;*/
    font-weight: 600;
    text-transform: uppercase;
    font-size : 0.9em;
}

.introduction h3 {
    /*font-family: ivyepic-variable, sans-serif;*/
    /*font-weight: 400;*/
    /*font-size: 1.5em;*/
    margin: 0;
    font-family: transat-text, serif;
    font-weight: 400;
    font-size: 1.5em;
}

.italic {
    font-family: maxtrix-ii, serif;
    font-weight: 500;
    font-style: italic;
}

.introduction .italic {
    font-family: maxtrix-ii, serif;
    font-weight: 500;
    font-style: italic;
    font-size: 1.2em;
}

.grid-intro {
    display: grid;
    grid-template-columns: 4fr 1fr;
}

#img-intro {
    display: flex;
    flex-wrap: nowrap;
}

/*.carre {*/
/*    width: 170px;*/
/*    height: 120px;*/
/*    background-color: var(--c-vert) ;*/
/*}*/

/*.rond {*/
/*    width: 120px;*/
/*    height: 120px;*/
/*    border-radius: 50%;*/
/*    background-color: black ;*/
/*}*/

/*.etoile {*/
/*    background: var(--c-lavande);*/
/*    width: 80px;*/
/*    height: 80px;*/
/*    position: relative;*/
/*    text-align: center;*/
/*}*/

/*.etoile:before,*/
/*.etoile:after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    height: 80px;*/
/*    width: 80px;*/
/*    background: var(--c-lavande);*/
/*}*/
/*.etoile:before {*/
/*    transform: rotate(30deg);*/
/*}*/
/*.etoile:after {*/
/*    transform: rotate(60deg);*/
/*}*/

/*.etoile6 {*/
/*    width: 0;*/
/*    height: 0;*/
/*    border-left: 50px solid transparent;*/
/*    border-right: 50px solid transparent;*/
/*    border-bottom: 100px solid var(--c-vert);*/
/*    position: relative;*/
/*}*/
/*.etoile6:after {*/
/*    width: 0;*/
/*    height: 0;*/
/*    border-left: 50px solid transparent;*/
/*    border-right: 50px solid transparent;*/
/*    border-top: 100px solid var(--c-vert);*/
/*    position: absolute;*/
/*    content: "";*/
/*    top: 30px;*/
/*    left: -50px;*/
/*}*/



#scroll {
    font-family: transat-text, serif;
    font-weight: 500;
    display: block;
    position: relative;
    /*bottom: 0;*/
    /*top: 15vh;*/
    top: 25vh;
    text-align: center;
    /*margin-top: 10em;*/
    /*display : flex;*/
    justify-content: center;

    font-size: 1em;
    /*border: 2px solid deeppink;*/
}

#scroll p:first-of-type {
    margin-bottom: 0;
}

#scroll p:last-of-type {
    margin-top: 0;
    font-size: 1.4em;
    font-weight: 900;
    animation: scroll 1s ease-in-out infinite;
}

@keyframes scroll {
    0%, 100%   { transform: translateY(0); }
    /*25%,75%    { transform: translateY(-10%);}*/
    50%        { transform: translateY(15%); }
}

/*---------------------------- PORTFOLIO ---------------------------------*/

.portfolio {
    padding:5em 7em 3em;
    background-color: var(--pale);
}

.portfolio h1 {
    font-family: transat-text, serif;
    text-transform: uppercase;
    font-weight: 600;
    font-size : 2em;
    /*margin-top: 0;*/
    /*margin-bottom: 0;*/
    text-align: center;
    margin-bottom: 0;
}

.portfolio h2 {
    font-family: transat-text, serif;
    text-transform: uppercase;
    font-size : 1.5em;
    margin-bottom: 0;
}

#portfolio-real a {
    text-decoration: none;
    color: black;
}

#real-1, #real-3 {
    margin-top: 20vh;
    display : grid;
    grid-template-columns: auto 1fr;
    margin-bottom: 20vh;
}

#real-1 {
    margin-top: 15vh;
}

#real-2 {
    /*margin-top: 20vh;*/
    /*margin-top: 10vh;*/
    display : grid;
    grid-template-columns: 1fr auto;
}

.mockup {
    width: 80vh;
    height: 50vh;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-size: cover;
    /*background-color: var(--c-vert) ;*/
}

.mockup img {
    width: 100%
}

#real-1 .real-description, #real-3 .real-description {
    padding-top: 4.5em;
    padding-left: 5.5em;
}


#real-2 .real-description {
    padding-top: 3em;
    padding-right: 5.5em;
}

#real-2 .resume {
    padding-right: 1.5em;
}

.real-description .italic {
    font-size : 1.1em;
}

.resume {
    margin-top: 0.5em;
    /*margin-bottom: 2.5em;*/
    margin-bottom: 2em;
    font-style: italic;
}

.portfolio p {
    font-family: transat-text, serif;
    font-size : 1.15em;
}

.real-detail p {
    margin-bottom: 0;
    font-size: 0.95em;
    margin-top: 0;
    text-align: right;
}

.real-detail .italic {
    font-family: maxtrix-ii, serif;
    font-weight: 500;
    font-style: italic;
    /*text-align: right;*/
}

.real-detail {
    font-weight: 600;
    margin-top: 0;
}

.portfolio hr {
    /*margin-block-start: 0.2em;*/
    /*margin-block-end: 0.2em;*/
    /*border-width: 0.5px;*/
    border-bottom: none;
    border-top-width: 0.15em;
    /*border-top-width: 1px;*/
}

.portfolio button {
    cursor: pointer;
}

#real-plus-link {
    text-decoration: none;
    color: black;
    /*padding-left: 5em;*/
    /*padding-right: 5em;*/
}

#real-plus-link:hover {
    /*color: rgba(51, 50, 50, 0.85);*/
    /*background-color: black;*/
    /*color: var(--pale);*/
}

#real-plus {
    /*background-color: #B696E9;*/
    border-top: 2px black solid;
    border-bottom: 2px black solid;
    text-decoration: none;
    margin-bottom: 5em;
}

#real-plus:hover {
    color: rgba(51, 50, 50, 0.85);
}

#real-plus h3 {
    text-align: center;
    font-family: transat-text, sans-serif;
    text-transform: uppercase;
    font-size: 1.2em;
}


/*---------------------------- A PROPOS ---------------------------------*/

.apropos {
    padding:5em 7em;
    background-color: var(--pale);
}

.apropos h1 {
    font-family: transat-text, serif;
    text-transform: uppercase;
    font-weight: 600;
    font-size : 2em;
    /*margin-top: 0;*/
    /*margin-bottom: 0;*/
    text-align: center;
    margin-bottom: 0;
}

.apropos button {
    cursor: pointer;
}

.grid-apropos {
    margin-top : 5em;
    /*background-color: #FF9505;*/
    display: grid;
    grid-template-columns: 3fr 1fr;
    height: 60vh;
}

.apropos .texte {
    margin-top : 0;
    padding-right: 3em;
}

.photo-profil {
    /*border-radius: 50%;*/
    /*background-color: #C7D52D;*/
    height: 85%;
    position: relative;
    /*transform: translateY(-5%);*/
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /*background-size: cover;*/
    /*max-width: 100%;*/
    /*height: 30%;*/
    /*text-align: center;*/
    margin-bottom: 0;
}

.photo-profil img {
    height:130%;
}

.texte h2 {
    margin-top: 0;
    font-family: transat-text, sans-serif;
    font-weight: 400;
}

.texte h2 .italic {
    padding-top: 0;
    font-weight: 400;
    /*font-size: 1.2em;*/
}

.texte p {
    font-family: transat-text, sans-serif;
    font-weight: 400;
    font-size: 1.1em;
}

.texte p .italic {
    font-weight: 400;
    font-size: 1.1em;
}

.cv-link {
    text-decoration: none;
    color: black;
}

.cv-link:hover {
    color: rgba(51, 50, 50, 0.85);
}

.cv {
    /*background-color: #B696E9;*/
    border-top: 2px black solid;
    border-bottom: 2px black solid;
    text-decoration: none;
    margin-top: 2em;
    /*margin-bottom: 5em;*/
}

.cv h3 {
    text-align: center;
    font-family: transat-text, sans-serif;
    text-transform: uppercase;
    font-size: 1.2em;
}

/*---------------------------- CONTACT ---------------------------------*/

.contact {
    position: relative;
    background-image: url('/images/grid-width.png');
    background-repeat: no-repeat;
    background-size: 135%;
    background-position: center;
    padding: 5em 5em 3.75em;
    /*background-color: white;*/
}

.contact h1 {
    font-family: transat-text, serif;
    text-transform: uppercase;
    font-weight: 600;
    font-size : 2em;
    /*margin-top: 0;*/
    /*margin-bottom: 0;*/
    text-align: center;
    margin-bottom: 0;
}

form {
    margin: 2em 15em 2em;
    background-color: var(--pale);
    padding: 1em 3em 2em 2em;
}


fieldset {
    border: none;
    padding: 0;
}

label {
    font-family: transat-text, sans-serif;
    font-size: 1.2em;
    /*padding-left: 0.5em;*/
}

input[type="text"] {
    margin:0;
    background-color: var(--pale);
    width: 100%;
    padding: 0.5em;
    font-family: transat-text, sans-serif;
    border: none;
    border-bottom: 2px solid black;
    font-size: 1.2em;
}

input[type="email"] {
    background-color: var(--pale);
    width: 100%;
    padding: 0.5em;
    font-family: transat-text, sans-serif;
    border: none;
    border-bottom: 2px solid black;
    font-size: 1.2em;
}

textarea {
    background-color: var(--pale);
    resize: none;
    width: 100%;
    height: 20vh;
    padding: 0.5em;
    font-family: transat-text, sans-serif;
    border: none;
    border-top:2px solid black;
    border-bottom: 2px solid black;
    font-size: 1.2em;
    margin: 0.5em 0 2em;

}

#message-label {
    /*padding-left: 0.5em;*/
    text-transform: uppercase;
    padding-bottom: 1em;
    margin-bottom: 1em;
    font-weight: 500;
    font-size: 1em;
}

#message-label .italic {
    text-transform: lowercase;
    font-size: 1.3em;
}

#block-message {
    margin-top: 3em;
    margin-bottom: 0;
}

button {
    background-color: var(--pale);
    border: none;
}

#envoi {
    /*font-family: maxtrix-ii, serif;*/
    font-weight: 500;
    font-size: 1.15em;
    /*font-style: italic;*/
    font-family: transat-text, sans-serif;
    background-color: #111111;
    color: var(--pale);
    padding: 0.5em 0.7em;
    cursor: pointer;
    margin-right: 1.5em;
}

#envoi:hover {
    background-color: rgba(51, 50, 50, 0.85);
}

#annulation {
    font-family: transat-text, sans-serif;
    font-size: 1.1em;
    font-weight: 400;
    /*margin-left: 3em;*/
    text-align: right;
}

#annulation:hover {
    color: rgba(51, 50, 50, 0.85);
}