* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body,
html {
    margin: 0;
    font-family: roboto, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: rgb(88, 77, 65);
    background-color: rgb(246, 244, 243);
}

.header .navbar-fixed {
    width: 100%;
    position: fixed;
    top: 0;
    background-color: rgb(241, 239, 232);
    -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.navbar-links {
    max-width: 960px;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row;
    flex-flow: row;
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

}

.social-medya a {
    margin: 0 5px;
    font-size: 28px;
    color: inherit;
    opacity: 0.7;
}

.menu a {
    margin: 0 7px;
    text-decoration: none;
    color: inherit;
    /*Si on ne définit pas une couleur, la couleur par défaut du lien prévaudra sur la couleur du parrent*/
    opacity: 0.7;
}

a:hover,
a[href="#"] {
    /* comportement des liens de la navbar au survol de la souris ET du lien de la page affichée (qui possède un attribut href équivalent à "#" */
    opacity: 1;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
}

.main {
    max-width: 960px;
    margin: auto;
    margin-top: 35px;
    /* l'élément main se trouve en desous de la nav-bar qui a une position "fixed" cela fait qu'elle est ignorée et sa hauteur est équivalente à zéro, d'ou le margin-top ici pour décaler le main vers le bas*/
    -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 35px 10px;

}

.article {
    width: 100%;
    text-align: center;
}

.article .article-title {
    font-family: Volkhov, serif;
    font-size: 40px;
    font-weight: 700;
    text-align: left;
    margin: 0;
    margin-bottom: -20px;
}

.article .article-subtitle {
    font-family: Volkhov, serif;
    font-size: 36px;
    text-align: left;
    opacity: .65;
    margin: 20px 0;
}

.article .float {
    max-width: 560px;
    margin-right: 15px;
    float: left;
}

.float figure,
.no-float figure {
    margin: 0;
}

.float figcaption,
.no-float figcaption {
    font-size: 0.8rem;
    font-style: italic;
}

.article .no-float {
    max-width: 960px;
    margin: 0;
    text-align: center;
}

.article .article-text {
    margin: 15px 0;
    text-align: justify;
    /* l'élément héritera de la couleur, de la police, de la taille de police et de la hauteur de ligne définies dans le body  */
}

.article .article-text span {
    font-weight: 700;
    /* un font-weight de 700 équivaut à bold */
    /* les élements du texte mis en évidence */
}


.article .article-media {
    height: 0;
    padding-bottom: 56.25%;
    margin-top: 25px;
    position: relative;
    /* pour positionner l'élément enfant (iframe) par rapport à cet l'élément */
    overflow: hidden;
}

.article-media iframe {
    left: 5%;
    height: 90%;
    width: 90%;
    position: absolute;
    /* Ces paramètres permettent de redimensionner la iframe qui comporte la vidé/la gmap en fonction de la taille de l'écran (responsive design) */
}

.article::after {
    /* élément à insérer après chaque article sans le créer en HTML */
    content: '';
    display: block;
    height: 1px;
    background-color: rgba(88, 77, 65, .3);
}

.main-contact {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /* permet de revenir à la ligne et de positionner les éléments les uns au dessus des autres si taille d'écran plus petite */
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    margin-top: 20px;
}

.main-contact .formulaire {
    max-width: 460px;
    /* la largeur maximale que pourra occuper le formulaire, si il y a suffisamment d'espace, le formulaire et la carte gmap se juxtaposeront, sinon, grâce au flex-wrap, ils se superposeront*/
    background-color: rgb(236, 233, 226);
    border: 1px solid rgb(88, 77, 65);
    margin: 5px;
    padding: 0 15px 15px;
    font-size: 15px;
    text-align: left;
}

.form label {
    display: inline-block;
    /* le display inline-block me permet d'attribuer à ces éléments une hauteur et une largeur et de les maintenir juxtaposés en même temps*/
    width: 45%;
    /* exprimé en % pour garder le même aspect sur des écrans moins larges*/
}

.form label:last-of-type {
    /* la pseudo classe last-of-type me permet de sélection le dernier élément de type label du formulaire, j'ai besoin de le cibler précisément car pour les autres champs il a été attribué un padding à l'input mais comme ce label là n'a pas d'input sur la même ligne le design s'en voit altéré, la marge appliquée est l'addition du padding et de la marge des autres éléments (2 + 5px) */
    margin-top: 7px;
}


label+input {
    /*pour cible précisément les inputs qui viennent après des labels, de telle sorte à ne pas sélectionner les boutons submit et effacer */
    width: 55%;
    margin: 5px 0;
    padding: 2px 10px;
}

textarea {
    width: 100%;
    margin: 15px 0;
    padding: 10px;
}

label+input,
textarea {
    /* la virgule me permet de sélectionner un autre élément, ici le textarea */

    font-family: inherit;
    font-size: inherit;
    font-style: italic;
    color: rgb(170, 120, 67);
    background: none;
    border: none;
    border-bottom: 1px solid rgb(88, 77, 65);
    -webkit-transition: all .35s ease-out;
    -o-transition: all .35s ease-out;
    transition: all .35s ease-out;
    /* pour créer un effet d'animation quand le input passera en focus*/
}

label+input:focus,
textarea:focus {
    /* la pseudo class :focus indique les propriétés des éléments du formulaire quand ils sont sélectionnés*/
    background-color: rgb(255, 249, 232);
    outline: none;
    border-bottom: 1px solid rgb(88, 77, 65);
}

.form .button {
    width: 120px;
    background: none;
    border: 1px solid rgb(88, 77, 65);
    border-radius: 4px;
    margin: 5px 5px 0 0;
    padding: 5px;
    font-size: 13px;
    color: inherit;
    -webkit-transition: all .35s ease-out;
    -o-transition: all .35s ease-out;
    transition: all .35s ease-out;
    cursor: pointer;
    /* pour changer le curseur de la souris au survol, pour renforcer l'effet bouton */
}

.form .button:hover {
    /* effet au survol */
    background: rgb(88, 77, 65);
    border: 1px solid rgb(88, 77, 65);
    color: rgb(255, 255, 255);
}

.main-contact .localisation {
    position: relative;
    width: 460px;
    height: 0;
    padding-bottom: 55%;
    overflow: hidden;
    /* quand un élément est en position relative, il n'a plus de hauteur calculée, l'overflow hidden permet de corriger cela */
    margin: 5px;
}

.localisation iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    border: 1px solid rgb(88, 77, 65);
}

.adresse {
    width: 100%;
    font-size: 15px;
    text-align: right;
    margin: 5px;
    padding: 10px;
    background-color: rgb(236, 233, 226);
    border: 1px solid rgb(88, 77, 65);
}

.adresse a {
    text-decoration: none;
    color: inherit;
    /* pour écraser les valeurs par défaut des liens */
}

.footer {
    width: 100%;
    font-size: 15px;
    color: rgba(255, 255, 255, .5);
    text-align: center;
    background-color: rgb(88, 77, 65);
    margin: 0;
    padding: 7px;
    word-break: keep-all;
}

@media screen and (max-width : 530px) {

    /* une media query qui vise les écrans comme média ET les largeurs inférieures à 530px */
    .navbar-links {
        -ms-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
        -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
        justify-content: space-evenly;
        /* changement de la distribution à l'intérieur de la flex-box pour centrer les éléments */
    }
}