/*******************************
 *           FONTS             *
 ******************************/


 /* A FAIRE, telecharge sur ton ordi la font DM SANS SERIF que tu m'as envoye*/
 /* Mets le/les fichiers dans le repertoire ou il y a les fonts, souvent le dossier 'fonts'*/

 /* MODIF ARTHUR, ajout*/
 @font-face {
    font-family: 'DMSerifText';
    src: url('fonts/DMSerifText-Regular.eot');
    src: url('fonts/DMSerifText-Regular.eot') format('embedded-opentype'),
         url('fonts/DMSerifText-Regular.woff2') format('woff2'),
         url('fonts/DMSerifText-Regular.woff') format('woff'),
         url('fonts/DMSerifText-Regular.ttf') format('truetype'),
         url('fonts/DMSerifText-Regular.svg#DMSerifText-Regular') format('svg');

}

@font-face {
    font-family: 'Avenir-Black';
    src:    url('fonts/Avenir-Black.eot?#iefix') format('embedded-opentype'),
            url('fonts/Avenir-Black.woff') format('woff'),
            url('fonts/Avenir-Black.ttf')  format('truetype'),
            url('fonts/Avenir-Black.svg#Avenir-Black') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir-Medium';
    src:    url('fonts/Avenir-Medium.eot?#iefix') format('embedded-opentype'),
            url('fonts/Avenir-Medium.woff') format('woff'),
            url('fonts/Avenir-Medium.ttf')  format('truetype'),
            url('fonts/Avenir-Medium.svg#Avenir-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AvenirHeavy';
    src: url('fonts/AvenirHeavy.eot');
    src: url('fonts/AvenirHeavy.eot') format('embedded-opentype'),
         url('fonts/AvenirHeavy.woff2') format('woff2'),
         url('fonts/AvenirHeavy.woff') format('woff'),
         url('fonts/AvenirHeavy.ttf') format('truetype'),
         url('fonts/AvenirHeavy.svg#AvenirHeavy') format('svg');
}

@font-face {
    font-family: 'Avenir-Book';
    src:  url('fonts/Avenir-Book.eot?#iefix') format('embedded-opentype'),
          url('fonts/Avenir-Book.woff') format('woff'),
          url('fonts/Avenir-Book.ttf')  format('truetype'),
          url('fonts/Avenir-Book.svg#Avenir-Book') format('svg');
    font-weight: normal;
    font-style: normal;
  }

@font-face {
    font-family: 'Tungsten-Medium';
    src: url('fonts/Tungsten-Medium.eot');
    src: url('fonts/Tungsten-Medium.eot') format('embedded-opentype'),
         url('fonts/Tungsten-Medium.woff') format('woff'),
         url('fonts/Tungsten-Medium.ttf') format('truetype'),
         url('fonts/Tungsten-Medium.svg#Tungsten-Medium') format('svg');
}

@font-face {
    font-family: 'Kepler-Medium';
    src: url('fonts/Kepler-Medium.eot');
    src: url('fonts/Kepler-Medium.eot') format('embedded-opentype'),
         url('fonts/Kepler-Medium.woff2') format('woff2'),
         url('fonts/Kepler-Medium.woff') format('woff'),
         url('fonts/Kepler-Medium.ttf') format('truetype'),
         url('fonts/Kepler-Medium.svg#Kepler-Medium') format('svg');
}

@font-face {
    font-family: 'Kepler-Black';
    src: url('fonts/Kepler-Black.eot');
    src: url('fonts/Kepler-Black.eot') format('embedded-opentype'),
         url('fonts/Kepler-Black.woff2') format('woff2'),
         url('fonts/Kepler-Black.woff') format('woff'),
         url('fonts/Kepler-Black.ttf') format('truetype'),
         url('fonts/Kepler-Black.svg#Kepler-Black') format('svg');
}

@font-face {
    font-family: 'Kepler-Bold';
    src:url('fonts/Kepler-Bold.woff') format('woff'),
        url('fonts/Kepler-Bold.woff2') format('woff2'),
        url('fonts/Kepler-Bold.eot'),
        url('fonts/Kepler-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Kepler-Bold.otf') format('truetype');
}



/*******************************
 * COMMUN
 *******************************/

body { color: #000000; }
body > .row { margin: auto; }
#content { width: 80vw; margin: auto; border-left: 1px solid rgba(0, 0, 0, 0.1); border-right: 1px solid rgba(0, 0, 0, 0.1); position: relative; }
#content #row-vert { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; height: 100%; position: absolute; width: 100%; z-index: -1; }
#content #row-vert .vert { border-right: 1px solid rgba(0, 0, 0, 0.1); -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; float: left; height: 100%; position: relative; }

h2 { font-family: 'Avenir-Black'; }
h3 { font-family: 'Avenir-Medium'; text-transform: uppercase; letter-spacing: 0px; color: #FF0000; }

p.bouton { font-family: 'Avenir-Black'; color: #FFFFFF; background-color: #FFD000; display: inline-block;}
p.bouton a, p.bouton a:hover, p.bouton a:focus { color: #FFFFFF; }

a, a:hover, a:focus { text-decoration: none; }



/*******************************
 * STYLE
 *******************************/

/* Header */
#header { border-bottom: 1px solid rgba(0, 0, 0, 0.3); }
#header #header-titre h1 { font-family: 'Avenir-Black'; text-transform: uppercase; text-align: center; color: #FF0000; position: relative; top: 50%; transform: translateY(-50%); }
#header .header-logo-2 { text-align: center; }
#header .header-logo-2 img { position: relative; top: 50%; transform: translateY(-50%); }
.ie #header .header-logo-2 img { margin-top: 5rem; }

/* Une */
#une #une-couverture img { position: relative; left: 50%; transform: translateX(-50%); }
#une #une-couverture  { padding: 50px;}
/* Version Hors-série */

/*MODIF ARTHUR, switch font-family: 'Avenir-Medium' instead of 'Tungsten-Medium'*/
#une #une-intro div.mois { font-family: 'Avenir-Medium'; text-transform: uppercase; letter-spacing: 3px; color: #FF0000; position: absolute; transform: rotate(-90deg); }

#une #une-intro h2 { position: relative; }
/* Version Hors-série */
#une #une-intro h2 img { position: absolute; bottom: 5px; left: 6px; z-index: -1; }

/*MODIF ARTHUR, switch font-family: 'DMSerifText-Regular' instead of 'Kepler-Medium'*/
#une #une-intro p { font-family: 'DMSerifText'; }

#une #une-intro img.drapeau.fr { margin-right: 20px; width: 50px;}

/* Bloc anciens numéros */
#numero { margin: 0; margin-bottom: 5rem; }
#numero #numero-slider { margin-bottom: 1rem; }
#numero #numero-slider .splide .splide__list { will-change: inherit; }
#numero #numero-slider .splide__slide .content { display: inline-block; position: relative; left: 50%; transform: translateX(-50%); }

/*MODIF ARTHUR, switch font-family: 'Avenir-Medium' instead of 'Tungsten-Medium'*/
#numero #numero-slider .splide__slide div.mois { font-family: 'Avenir-Medium'; font-size: 15pt; text-transform: uppercase; letter-spacing: 3px; color: #FF0000; }

#numero #numero-slider .splide__slide .couverture { margin-bottom: 1rem; }
#numero #numero-slider .splide__slide .drapeaux img { width: 30px; margin-right: 10px; }
.ie #numero #numero-slider .splide__slide .drapeaux img { height: 33px; }
#numero #numero-slider .splide__arrow { background: inherit; opacity: 1; border-radius: 0; width: auto; }
.ie #numero #numero-slider .splide__arrow { background: none; }
#numero #numero-slider .splide__arrow:disabled { display: none; }
#numero #numero-slider .splide__arrow--prev img { transform: rotate(180deg); }

/* Sites internes Eiffage */
#sites { margin: 0; }
#sites #sites-titre { text-align: center; margin-bottom: 2rem; }
#sites #sites-titre hr { border-color: #000000; position: absolute; width: 100%; top: 0; left: 0; z-index: -1; }
#sites .lien { text-align: center; }
#sites .lien a, #sites .lien a:hover, #sites .lien a:focus { font-family: 'AvenirHeavy'; color: #000000; }
#sites #sites-rs { margin-top: 2rem; margin-bottom: 2rem; text-align: center; }
#sites #sites-rs img { width: 30px; margin-right: 20px; }
.ie #sites #sites-rs img { height: 30px; }
#sites #sites-rs a:last-child img { margin-right: 0; }

/* Footer */
#footer { background-color: #FFF; border-top: 1px solid #000; margin: 0; padding-top: 2rem; padding-bottom: 1rem; }
#footer #footer-copy { font-family: 'Avenir-Medium'; font-size: 13px; text-align: center; }
#footer #footer-copy img { width: 50px; vertical-align: baseline; }
#footer #footer-mentions { text-align: center; }
#footer #footer-mentions p { font-family: 'AvenirHeavy'; font-size: 13px; color: #000000; cursor: pointer; }

/* Modal */
.modal.show .modal-dialog { max-width: 1000px; }
.modal-content { max-height: 90vh; overflow-x: auto; }
.modal-header { border: none; }
.modal-title, .modal-body h5 { font-family: 'Avenir-Medium'; text-transform: uppercase; color: #FF0000; }

/*MODIF ARTHUR, switch font-family: 'DMSerifText-Regular' instead of 'Kepler-Medium'*/
.modal-body p { font-family: 'DMSerifText'; }

/*MODIF ARTHUR, switch font-family: 'DMSerifText-Regular' instead of 'Kepler-Black'*/
.modal-body p .bold { font-family: 'DMSerifText'; }

.modal-body a, .modal-body a:hover, .modal-body a:focus { color: #000; text-decoration: underline; }
.modal-body .red { background-color: #FFD000; }


/* Version #1 */
/*#numero #numero-titre div { position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); display: inline-block; }
.ie #numero #numero-titre div { transform: translate(-50%); margin-top: 8rem; }*/



/* Version Hors-série */
#une { margin-bottom: 4rem; }
#une #une-intro { text-align: left; margin-bottom: 2rem; }
/* #une #une-intro h2 img { left: 50%; transform: translateX(-50%); } */
#une #une-intro h3 { font-family: 'Avenir-Medium';  text-transform: uppercase; font-size: 20pt; }
#une #une-couverture-1 { display: flex; }
#une #une-couverture-1 .texte { position: relative; left: 50%; transform: translateX(-50%); }
#une #une-couverture-1 img.drapeau.fr { margin-right: 20px; }
#une #une-couverture-2 .right { font-family: 'Avenir-Book'; font-size: 11px; }
#une #une-couverture-2 .right a { display: flex; align-items: center; }
#une #une-couverture-2 .right a, #une #une-couverture-2 .right a:hover, #une #une-couverture-2 .right a:focus { color: #000; }
#une #une-couverture-2 .right img { margin-right: 10px; }
#une #une-couverture-1, #une #une-couverture-2 { text-align: center; }
#une #une-couverture-1 .texte, #une #une-couverture-2 .texte { font-family: 'Avenir-Book'; margin: 1rem 0; }

/*******************************
 * RESPONSIVE
 *******************************/

@media (min-width: 320px) {
    /* Commun */
    h2 { font-size: 35pt; line-height: 35pt; }
    h3 { font-size: 15pt; }
    p.bouton { font-size: 11pt; line-height: 11pt; padding: 5px 18px; }

    /* Header */
    #header #header-logo-1 img { width: 60%; }
    #header #header-titre { margin: 1rem 0; }
    #header #header-titre h1 { font-size: 20pt; }
    #header #header-logo-2 { display: none; }
    #header .header-logo-2 img { width: 40%; }

    /* Une */
    #une #une-couverture { display: none; }
    #une #une-couverture img { width: 560px; }
    #une #une-intro { padding-top: 3rem; padding-bottom: 3rem; }
    /* Version Hors-série */
    #une #une-intro div.mois { font-size: 17pt; top: 7rem; left: -4rem; }
    #une #une-intro h2 img { width: 14.2rem; }
    #une #une-intro img.couverture { display: block; margin: auto; /*margin-top: -1rem; margin-bottom: 0rem;*/ width: 240px; }
    #une #une-intro p { font-size: 13pt; line-height: 18pt; padding-right: 0; margin-bottom: 2rem; }
    #une #une-intro img.drapeau { width: 40px; }

    /* Bloc anciens numéros */
    #numero { border: 1rem solid #FF0000; padding: 1rem 0; }
    #numero #numero-titre h2 { font-size: 30pt; line-height: 30pt; }
    #numero #numero-titre h3 { font-size: 13pt; }
    #numero #numero-slider { margin-top: 1rem; }
    #numero #numero-slider .splide__slide .content { text-align: center; }
    #numero #numero-slider .splide__slide div.mois { margin-bottom: 10px; }
    #numero #numero-slider .splide__slide .couverture { width: 50%; }
    #numero #numero-slider .splide__arrow { height: 4rem; }
    #numero #numero-slider .splide__arrow img { width: 30px; }
    #numero #numero-slider .splide__arrow--next { right: 0em; }
    #numero #numero-slider .splide__arrow--prev  { left: 0; }

    /* Sites internes Eiffage */
    #sites .lien a, #sites .lien a:hover, #sites .lien a:focus { font-size: 0.9rem; }


    /* Version #1 */
    #numero #numero-titre { margin-top: 2rem; }
     #numero #numero-mockup img { width: 100%; }
    /* Version Hors-série */
    /* #une #une-couverture-1 img.drapeau, #une #une-couverture-2 img.download { width: 40px; }
    #une #une-couverture-1 img.couverture, #une #une-couverture-2 img.couverture { width: 100%; }
    #une #une-couverture-1 { margin-bottom: 2rem; }
    #une #une-couverture-2 .right { text-align: center; }
    #une #une-couverture-2 .right > div { display: inline-block; margin-top: 1rem; }
    #une #une-couverture-2 .right > div a { text-align: left; } */
}
@media (min-width: 414px) {
    #une #une-couverture-2 .right div:first-child { margin-right: 3rem; }
}
@media (max-width: 599px) {
    /* Header */
    #header #header-logo-1 { text-align: center; margin-bottom: 1rem; }
}
@media (min-width: 600px) {
    /* Commun */
    h2 { font-size: 45pt; line-height: 45pt; }
    h3 { font-size: 20pt; }
    p.bouton { font-size: 13pt; line-height: 13pt; padding: 5px 25px; }

    /* Header */
    #header #header-logo-1 img { width: 90%; }
    #header #header-titre h1 { font-size: 23pt; }
    #header .header-logo-2 img { width: 50%; }

    /* Une */
    /* Version Hors-série */
    #une #une-intro div.mois { left: -5rem; }
     #une #une-intro h2 img { width: 18.3rem; }
    #une #une-intro img.couverture { width: 350px; /* margin-top: -3rem; margin-bottom: -1rem; */ }
    #une #une-intro p { font-size: 15pt; line-height: 21pt; }

    /* Bloc anciens numéros */
    #numero { padding: 1rem; }
    #numero #numero-titre h2 { font-size: 35pt; line-height: 35pt; }
    #numero #numero-titre h3 { font-size: 17pt; }
    #numero #numero-slider { margin-top: 3rem; }
    #numero #numero-slider .splide__slide div.mois { position: absolute; transform: rotate(-90deg); top: 5rem; left: -3.5rem; }
    #numero #numero-slider .splide__slide#splide-slide01 div.mois { left: -2.5rem; }
    #numero #numero-slider .splide__slide .couverture { width: 70%; }
    #numero #numero-slider .splide__arrow { height: auto; }
    #numero #numero-slider .splide__arrow img { width: 50px; }

    /* Sites internes Eiffage */
    #sites .lien a, #sites .lien a:hover, #sites .lien a:focus { font-size: 1rem; }


    /* Version Hors-série */
    /* #une #une-couverture-1 { margin-bottom: 2rem; }
    #une #une-couverture-1 img.couverture, #une #une-couverture-2 img.couverture { width: auto; }
    #une #une-couverture-1 .texte { width: 80%; }
    #une #une-couverture-2 .texte { padding: 0 5rem; }
    #une #une-couverture-2 .right { padding-left: 1rem; }
    #une #une-couverture-2 .right div:first-child { margin-right: 3rem; } */
}
@media (min-width: 768px) {
    /* Header */
    #header #header-titre { margin: 0; }
    #header #header-logo-2 { display: block; }
    #header #header-logo-2-mini { display: none; }
    #header .header-logo-2 img { width: 40%; }

    /* Une */
    #une #une-intro img.couverture { width: 400px; }

    /* Bloc anciens numéros */
    #numero { padding: 2rem; }
    #numero #numero-slider .splide__slide .content { text-align: inherit; }
    #numero #numero-slider .splide__slide div.mois { left: -7rem; }
    #numero #numero-slider .splide__slide#splide-slide01 div.mois { left: -7rem; }
    #numero #numero-slider .splide__slide .couverture { width: 220px; }


    /* Version #1 */
    #numero #numero-titre { margin-top: 0; }
    /* Version Hors-série */
    /* #une #une-intro h3 { padding: 0 4rem; }
    #une #une-couverture-2 .texte { padding: 0 8rem; } */
}
@media (min-width: 1024px) {
    /* Une */
    #une #une-couverture { display: block; }
    #une #une-couverture img { width: 560px; }
    #une #une-intro { padding-top: 7rem; padding-bottom: 0; }
    /* Version Hors-série */
    #une #une-intro div.mois { top: 11rem; }
     #une #une-intro img.couverture { display: none; }
    /* #une #une-intro p { margin-top: 3rem; margin-bottom: 5rem; } */

    /* Bloc anciens numéros */
    #numero { border: 2rem solid #FF0000; }
    #numero #numero-slider .splide__slide .couverture { width: 220px; }
    #numero #numero-slider .splide__arrows { position: absolute; width: 100%; top: -7rem; right: 2rem; }
    #numero #numero-slider .splide__arrow--next { right: 1em; }
    #numero #numero-slider .splide__arrow--prev { right: 7em; left: inherit; }
    #numero #numero-slider .splide__arrow img { width: 60px; }


    /* Version Hors-série */
    /* #une #une-intro { padding-top: 4rem; }
    #une #une-intro h3 { padding: 0 11rem; }
    #une #une-couverture-1 { margin-bottom: 0; justify-content: flex-end; }
    #une #une-couverture-1 .texte { width: 90%; }
    #une #une-couverture-2 .texte { padding: 0 2rem; } */
}
@media (min-width: 1280px) {
    /* Commun */
    h2 { font-size: 50pt; line-height: 50pt; }
    h3 { font-size: 23pt; }
    p.bouton { font-size: 15pt; line-height: 15pt; }

    /* Header */
    #header #header-logo-1 img { width: 80%; }
    #header .header-logo-2 img { width: 35%; }

    /* Une */
    /* #une #une-couverture img { width: auto; } */
    #une #une-intro h2 img { width: 20.5rem; }
    #une #une-intro p { font-size: 17pt; line-height: 24pt; }
    #une #une-intro img.drapeau { width: 50px; }

    /* Bloc anciens numéros */
    #numero #numero-titre h2 { font-size: 40pt; line-height: 40pt; }
    #numero #numero-titre h3 { font-size: 20pt; }
    #numero #numero-slider .splide__slide .couverture { width: 250px; }
    #numero #numero-slider .splide__arrows { right: 5rem; }


    /* Version #1 */
    #numero #numero-mockup img { width: 95%; }
    /* Version Hors-série */
    /* #une #une-couverture-1 img.drapeau, #une #une-couverture-2 img.download { width: 50px; }
    #une #une-intro h3 { padding: 0 16rem; }
    #une #une-couverture-1 .texte { width: 80%; }
    #une #une-couverture-2 .texte { padding: 0 5rem; } */
}
@media (min-width: 1366px) {
    /* Commun */
    h2 { font-size: 65pt; line-height: 65pt; }
    h3 { font-size: 25pt; }

    /* Header */
    #header #header-logo-1 img { width: 70%; }
    #header #header-titre h1 { font-size: 25pt; }
    #header .header-logo-2 img { width: 30%; }

    /* Une */
    #une #une-intro div.mois { font-size: 20pt; }
    #une #une-intro h2 img { width: 26.5rem; }
    #une #une-intro p { padding-right: 3rem; }

    /* Bloc anciens numéros */
    #numero #numero-slider .splide__arrows { right: 6rem; }


    /* Version #1 */
    #numero #numero-mockup img { width: 90%; }
    /* Version Hors série */
    /* #une #une-intro h3 { padding: 0 20rem; }
    #une #une-couverture-1 .texte { width: 60%; }
    #une #une-couverture-2 .texte { padding: 0 6rem; } */
}
@media (min-width: 1400px) {
    /* Version Hors série */
    /* #une #une-intro h3 { padding: 0 22rem; } */
}
@media (min-width: 1440px) {
    /* Commun */
    h2 { font-size: 65pt; line-height: 65pt; }
    h3 { font-size: 30pt; }

    /* Une */
    #une #une-intro p { padding-right: 5rem; }

    /* Bloc anciens numéros */
    #numero #numero-slider .splide__arrows { right: 2rem; }


    /* Version Hors série */
    /* #une #une-intro h2 img { width: 26.5rem; }
    #une #une-couverture-2 { display: flex; }
    #une #une-couverture-2 .right, #une #une-couverture-2 .left { flex: 1 1 0px; }
    #une #une-couverture-2 .left { display: flex; height: 100%; }
    #une #une-couverture-2 .left > div { display: inline-block; align-self: flex-end; }
    #une #une-couverture-2 .right { text-align: left; }
    #une #une-couverture-2 .right > div { display: block; margin-top: 0; }
    #une #une-couverture-2 .right div:first-child { margin-bottom: 2rem; margin-top: 7rem; margin-right: 0; }
    #une #une-couverture-2 .texte { padding: 0; } */
}
@media (min-width: 1680px) {
    /* Header */
    #header #header-logo-1 img { width: 60%; }
    #header #header-titre h1 { font-size: 30pt; }
    #header .header-logo-2 img { width: 25%; }

    /* Une */
    #une #une-intro h2 img { width: 26.6rem; }
    #une #une-intro p { font-size: 20pt; line-height: 27pt; }

    /* Bloc anciens numéros */
    #numero #numero-titre h2 { font-size: 50pt; line-height: 50pt; }
    #numero #numero-titre h3 { font-size: 25pt; }
    #numero #numero-slider .splide__arrows { right: 4rem; }



    /* Version #1 */
    #numero #numero-mockup img { width: auto; }
    /* Version Hors série */
    /* #une #une-intro h3 { padding: 0 26rem; }
    #une #une-couverture-2 .left { margin-left: 6rem; } */
}
@media (min-width: 1920px) {
    /* Bloc anciens numéros */
    #numero #numero-slider .splide__arrows { right: 6rem; }


    /* Version Hors série */
    /* #une #une-intro h3 { padding: 0 32rem; } */
}