/* -------------------- */
    /* Body
    /* -------------------- */


    * { margin : 0; padding : 0; }
    body { font : 1em "Arial"; }
    body > div { display : flex; flex-direction : column; min-height : 100vh; min-width : 320px; }

    /* Nav */
    nav div.nav-primaire { background : white; }
    nav div.nav-cadre { align-items : center; display : flex; height : 150px; justify-content : space-between; margin : auto; width : 1200px; }
    nav div.nav-titre a { align-items : center; color : black; display : flex; font : 500 1.6em "Arial"; padding-left : 20px; text-decoration : none; transition : all 0.5s; }
    nav div.nav-titre a span { color : rgba(0,125,250,1); }
    nav div.nav-titre img { height : 120px; margin-right : 10px; }
    nav div.nav-menu input { display : none; }
    nav div.nav-menu label { display : none; }
    nav div.nav-menu ul { display : flex; list-style : none; }
    nav div.nav-menu li:nth-of-type(-n+3) { margin-right : 50px; }
    nav div.nav-menu a { color : black; display : flex; font : 500 1.2em "Arial"; position: relative; text-decoration : none; }
    nav div.nav-menu a.actif { color : rgba(0,125,250,1); }
    nav div.nav-menu a::after { border-bottom : 2px solid rgba(0,125,250,1); content : ""; height: 30px; position : absolute; transform: scaleX(0); transition : all 0.5s; width : 100%; }
    nav div.nav-menu a:hover::after { transform : scale(1); }
    nav div.nav-menu img { height : 20px; margin-right : 5px; }
    nav div.nav-liens { align-items : center; display : flex; }
    nav div.nav-liens a { display : flex; transition : all 0.5s; }
    nav div.nav-liens a:first-of-type:hover { transform : scale(0.90); }
    nav div.nav-liens a:first-of-type img { height : 60px; }
    nav div.nav-liens hr { background : rgba(200,200,200,1); border : none; height : 30px; margin : 0 50px; width : 1px; }
    nav div.nav-liens a:last-of-type:hover { transform : rotate(360deg); }
    nav div.nav-liens a:last-of-type img { height : 80px; }

    /* Header */
    header div.header-fond { background : rgba(0,0,0,0.75); height : 100%; }
    header div.header-cadre { align-items : center; display : flex; height : 100%; justify-content : space-between; margin : auto; width : 1200px; }
    header div.header-texte h1 { color : black; font-size : 5em; margin-bottom : 20px; }
    header div.header-texte span { color : rgba(0,125,250,1); }
    header div.header-texte p { color : rgba(50,50,50,1); font-size : 1.5em; }
    header div.header-texte a { background : rgba(0,125,250,1); border-radius : 5px; box-shadow : 0 0 10px 0 rgba(0,0,0,0.25); color : white; display : flex; font-size : 1em; justify-content : center; margin-top : 20px; padding : 20px; text-decoration : none; width : 200px; }
    header div.header-image img { border-radius : 10px; box-shadow : 0 0 10px 0 rgba(255,255,255,0.25); transition : all 0.5s; width : 250px; }
    header div.header-image img:hover { transform : scale(0.9); }

    /* Aside */
    aside div.aside-primaire { background : rgba(50,100,150); margin-top : 5px; }
    aside input { display : none; }
    aside label { display : none; }
    aside div.aside-depliant {  }
    aside div.aside-cadre { margin : auto; width : 1200px; }
    aside div.aside-menu ul { display : flex; justify-content : space-around; list-style : none; }
    aside div.aside-menu a { align-items : center; color : white; display : flex; line-height : 100px; position: relative; text-decoration : none; }
    aside div.aside-menu a:hover { text-shadow : black 0 0 20px; }
    aside div.aside-menu img { height : 20px; margin-right : 10px; }
    aside div.aside-cadre aya { background : rgba(200,200,200,1); border-radius : 10px; margin : 20px; padding : 30px; width : 100%; }
    aside div.aside-cadre aya { color : rgba(30,60,90,1); font-size : 1.2em; margin-bottom : 20px; }
    aside div.aside-cadre aya { list-style : none; }
    aside div.aside-cadre aya { margin-bottom : 10px; }
    aside div.aside-cadre aya { color : rgba(100,100,100,1); display : flex; font : 500 1.1em "open sans"; text-decoration : none; }
    aside div.aside-cadre aya {  margin-right : 10px; }

    /* Main */
    main div.main-primaire { min-height : 300px; }
    main div.main-cadre { margin : 100px auto; width : 1200px; }

    /* Footer */
    footer div.footer-primaire { background : url(../images/base/footer) center no-repeat; background-size : cover; }
    footer div.footer-cadre { align-items : center; display : flex; justify-content : space-between; margin : 50px auto; width : 1050px; }
    footer div.footer-image a { display : flex; }
    footer div.footer-image img { height : 250px; transition : all 0.5s; }
    footer div.footer-image img:hover { transform : scale(0.9); }
    footer div.footer-lien p { color : cyan; font : bold 1em "open sans"; letter-spacing : 2px; margin-bottom : 50px; }
    footer div.footer-lien ul { display : flex; flex-wrap : wrap; list-style : none; width : 700px; }
    footer div.footer-lien li { color : white; margin-bottom : 10px; width : 175px; }
    footer div.footer-lien a { color : white; font : 1em "open sans"; text-decoration : none; transition : all 0.5s; }
    footer div.footer-lien a:hover { color : black; }
    footer div.footer-copyright { background : black; }
    footer div.footer-copyright p { color : white; font : 0.9em/50px "open sans"; text-align : center; }
    footer div.footer-copyright a { color : white; text-decoration : none; transition : all 0.5s; }
    footer div.footer-copyright a:hover { color : rgba(50,100,150,1); }


    /* -------------------- */
    /* Accueil
    /* -------------------- */

    
    dix#accueil section.catalogue { padding : 100px 0; }

    dix#accueil section.membres { background : url(../padding : 100px 0; }

    dix#accueil section.profil { padding : 100px 0; }

    /* -------------------- */
    /* Catalogue
    /* -------------------- */


    div#catalogue section.recherche { display : flex; }
    div#catalogue section.recherche input { border : none; border-radius : 10px; box-shadow : 0 0 10px 0 rgba(200,200,200,1); color : rgba(150,150,150,1); font : 1.2em "orbitron"; height : 80px; letter-spacing : 5px; margin : -40px auto 0; text-align : center; width : 1300px; }
    div#catalogue section.recherche input::placeholder { color : rgba(150,150,150,1); }
    div#catalogue section.recherche input:focus { box-shadow : 0 0 10px 0 rgba(50,150,250,1); outline : 0; }

    div#catalogue section.liste { display : flex; flex-wrap : wrap; margin : 100px auto; width : 1300px; }
    div#catalogue section.liste a { border-radius : 10px; display : flex; margin : 2px; overflow : hidden; }
    div#catalogue section.liste a:hover img { transform : scale(1.1); }
    div#catalogue section.liste img { transition : all 0.5s; width : 256px; }


    /* -------------------- */
    /* Profil
    /* -------------------- */


    dix#profil section.formulaire { padding : 40px 20px; }
    div#profil section.formulaire img { border-radius : 50%; display : flex; height : 150px; margin : 0 auto 20px; width : 150px; }
    div#profil section.formulaire h1 { margin-bottom : 40px;text-align : center; }
    div#profil section.formulaire a { display : flex; justify-content : center; }
    div#profil section.formulaire h2 { margin-bottom : 20px; text-align : center; }
    div#profil section.formulaire input { display : flex; margin : auto; }


    /* -------------------- */
    /* Contact
    /* -------------------- */


    div#contact section.formulaire { margin : auto; padding : 100px 0; width : 960px; }
    div#contact section.formulaire h2 { font-size : 2.8vh; text-align : center; }
    div#contact section.formulaire p { color : rgba(50,50,50,1); margin-bottom : 50px;  text-align : center; }
    div#contact section.formulaire form { align-items : center; display : flex; flex-direction : column; margin : auto; width : 500px; }
    div#contact section.formulaire input[placeholder] { border : none; border-bottom : solid 2px rgba(150,150,150,1); height : 40px; margin-bottom : 20px; padding-left : 10px; width : 400px; }
    div#contact section.formulaire input::placeholder { color : black; }
    div#contact section.formulaire textarea { border-radius : 5px; height : 180px; margin : 50px; max-height : 180px; max-width : 380px; padding : 10px; width : 380px; }
    div#contact section.formulaire input:last-of-type { background: rgba(20,20,20,1); border : none; border-radius : 5px; color : white; height : 50px; width : 280px; }
    div#contact section.formulaire input:last-of-type:hover { background : rgba(60,120,180,1); }