/* --- app.css | stylesheet service web Métropole Nice Côte d'Azur --- */

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

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

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

@font-face {
	font-family: 'Corporative Sans';
	src: url('fonts/CorporativeSans-Bold.eot');
	src: url('fonts/CorporativeSans-Bold.eot?#iefix') format('embedded-opentype'),
		url('fonts/CorporativeSans-Bold.woff') format('woff'),
		url('fonts/CorporativeSans-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

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

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

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


body {
    font-family: Corporative Sans;
    font-size: 18px;
}

.menu-lang {
    list-style-type: none;
    color: #fff;
    text-align: center;
    font-weight: bold;
}
.menu-lang li {
    display: inline-block;
}
.menu-lang li a, .menu-lang li span {
    color: #000;
}
.menu-lang li span {
    text-decoration: underline;
}

.bg-mediterranee {
    padding: 1em 0;
    background: transparent url('../medias/bg-mediterranee.jpg') no-repeat center center / cover;
}
.bg-icones {
    padding: 5em 0;
    background: transparent url('../medias/bg-icones.png') repeat-x left bottom;
    border-bottom: 24px solid #fff;
}
.bg-gris {
    background-color: #e5e3e2;
}
.bg-couleur {
    position: relative;
    color: #fff;
    background-color: #E73032;
}
.bg-couleur::before {
    content: " ";
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 96px;
    border-radius: 48px;
    background: #fff url('../medias/nissalabella.svg') no-repeat center center;
}

.callout {
    color: #fff;
    padding: 2em .75em;
    background-color: rgba(14, 97, 171, .72);
    border: 0 none;
}

.pad {
    padding: 3em 0;
}
.pad.maxi {
    padding: 3em 0 5em;
}
.mt2 {
    margin-top: 2em;
}
.ma0 {
    margin: 0;
}

h1 {
    font-family: "GothamNarrowBook";
    font-size: 2em;
    line-height: 1;
}

h1 .operation {
    display: inline-block;
    text-transform: uppercase;
    border-bottom: 2px solid #e22d3b;
}
h1 .ilove {
    display: block;
    color: #a2c5ab;
    font-size: 1.5em;
    font-family: "Corporative Cnd";
    clear: both;
    text-decoration: none;
}
h1 .ilove span {
    display: inline-block;
    position: relative;
    bottom: -7px;
}
h2 {
    font-family: "Corporative Sans Cnd";
    text-transform: uppercase;
}
h3 {
    margin-top: 1em;
    font-family: "Corporative Sans";
    font-size: 1.25em;
    font-weight: 900;
    line-height: 1;
    color: #0E61AB;
}

.lead {
    font-family: "GothamNarrowBook";
    font-size: 1.5em;
}

.button {
    padding: 0.5em 1em;
    text-transform: uppercase;
}

.rougeiln {
    background-color: #e22d3b;
    color: #fff;
    transition: all .2s;
}
.button.rougeiln {
    font-family: "Corporative Sans Cnd";
    font-size: 1.5em;
}
.button.rougeiln:hover {
    background-color: #fff;
    color: #e22d3b;
}

.petitcoeur {
    position: relative;
}
.petitcoeur::after {
    content: " ";
    position: absolute;
    bottom: -52px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 48px;
    background: transparent url('../medias/coeurgroscommeca.svg') no-repeat center center;
}

.imgsvg {
    width: 200px;
}

.ilfaudra {
    font-family: "Corporative Sans Cnd";
    font-size: 1.5em;
}

.abc > .column {
    position: relative;
    margin-bottom: 2em;
}
.abc > .column::before {
    content: " ";
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
}
.abc > .column:nth-child(1)::before {
    background: transparent url('../medias/abc1.svg') no-repeat center center;
}
.abc > .column:nth-child(2)::before {
    background: transparent url('../medias/abc2.svg') no-repeat center center;
}
.abc > .column:nth-child(3)::before {
    background: transparent url('../medias/abc3.svg') no-repeat center center;
}
.abc .content {
    background-color: #fff;
    padding: 2em 1em .5em ;
    font-family: "Corporative Sans";
    font-weight: 500;
}
.abc .content svg {
    height: 72px;
}

.picto-save {
    width: 14px;
    height: 14px;
    margin-right: .5em;
    display: inline-block;
    background: transparent url('../medias/picto-save.svg') no-repeat center center;
}

.save {
    background-color: #000;
    color: #fff;
    transition: all .2s;
}
.button.save {
    padding: .5em;
    font-family: "Corporative Sans Cnd";
    line-height: 1.5;
}
.button.save:hover {
    background-color: #e22d3b;
    color: #fff;
}
.bg-couleur .button.save:hover {
    background-color: #888;
}
.abc .content .button.save {
    font-size: .75em;
}

.pre-titre {
    margin: 1em 0 0;
    text-transform: uppercase;
    font-family: "Corporative Sans";
    font-weight: bold;
    color: #000;
}
.pre-titre::before {
    content: " - ";
}
.pre-titre::after {
    content: " - ";
}



/* Small only */
@media screen and (max-width: 39.9375em) {

}

/* Medium and up */
@media screen and (min-width: 40em) {

    .bg-mediterranee {
        padding: 1.5em 0;
    }

    .callout {
        padding: 5em 3em;
    }

    h1 {
        font-size: 2em;
    }

    h1 .ilove {
        font-size: 2.5em;
    }

    h2 {
        font-size: 2em;
    }

    .lead {
        font-size: 2em;
    }

    .abc .content {
        min-height: 400px;
    }

    .button.save {
        font-size: 1em;
    }

}

/* Large and up */
@media screen and (min-width: 64em) {

    h1 .ilove {
        font-size: 4em;
    }

    .bg-mediterranee {
        padding: 1.5em 0;
    }

}