/*
Pour icon - 23k supplementaire
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
*/


/****** Texte ******/

.texte-extra-jumbo { font-size:4em !important; line-height:1.3em !important; }
.texte-tres-tres-jumbo { font-size:3.5em !important; line-height:1.3em !important; }
.texte-tres-jumbo { font-size:3em !important; line-height:1.3em !important; }
.texte-jumbo { font-size:2.6em !important; line-height:1.1em !important; }
.texte-extra-gros { font-size:2.2em !important; line-height:1.3em !important; }
.texte-tres-tres-gros { font-size:1.8em !important; line-height:1.3em !important; }
.texte-tres-gros { font-size:1.4em !important; line-height:1.4em !important; }
.texte-gros { font-size:1.2em !important; line-height:1.3em !important; }
.texte-moyen { font-size:1.1em !important; line-height:1.3em !important; }
.texte-petit { font-size:.9em !important; line-height:1.3em !important; }
.texte-tres-petit { font-size:.8em !important; line-height:1.4em !important; }
.texte-tres-tres-petit { font-size:.7em !important; line-height:1.4em !important; }

@include media(">=lg") { 
    .texte-gros-lg { font-size:1.2em !important; line-height:1.3em !important; }
}

.texte-tres-tres-gros-responsive { font-size:1.8em !important; font-size: 12vw !important; line-height:1.3em !important; }
.texte-tres-gros-responsive { font-size:1.4em !important; font-size: 10vw !important; line-height:1.3em !important; }
.texte-gros-responsive { font-size:1.2em !important; font-size: 8vw !important; line-height:1.3em !important; }
.texte-moyen-responsive { font-size:1.1em !important; font-size: 6vw !important; line-height:1.3em !important; }
.texte-tres-petit-responsive { font-size:.8em !important; font-size: 4vw !important; line-height:1.3em !important; }
.texte-tres-tres-petit-responsive { font-size:.8em !important; font-size: 2vw !important; line-height:1.3em !important; }

.line-height-point8 { line-height: .8em !important; }
.line-height-point85 { line-height: .85em !important; }
.line-height-point9 { line-height: .9em !important; }
.line-height-point95 { line-height: .95em !important; }
.line-height-1 { line-height: 1em !important; }
.line-height-1-1 { line-height: 1.1em !important; }
.line-height-1-2 { line-height: 1.2em !important; }
.line-height-1-3 { line-height: 1.3em !important; }
.line-height-1-7 { line-height: 1.7em !important; }

.texte-glyphicons { font-family: "Glyphicons Halflings"; }
.texte-cursif { font-family: 'Parisienne', cursive !important; font-size:1.7em; }
.texte-serif { font-family: Georgia, 'Lucida Bright', Times !important; }

.ombrage-texte { text-shadow: 2px 2px 5px rgba(0,0,0,0.4) !important; }
.ombrage-texte-glow { text-shadow: 0px 0px 5px rgba(0,0,0,0.4) !important; }
.ombrage-texte-fonce { text-shadow: 2px 2px 5px rgba(0,0,0,0.7) !important; }
.ombrage-texte-glow-fonce { text-shadow: 0px 0px 5px rgba(0,0,0,0.7) !important; }
.sans-ombrage { text-shadow: none !important; box-shadow: none !important; }
.hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; }
.texte-rouge { color: #cf0915 !important; }
.texte-blanc { color:#fff !important; }
.texte-noir { color:#000 !important; }
.texte-bleu { color: $color-primary !important; }
.texte-couleur, .texte-orange { color: $color-secondary !important; }
.texte-pale { color: #ccc !important; }
.texte-fonce { color: #333 !important; }
.texte-couleur-texte-regulier { color: $color-standard-text !important; }
.nowrap { white-space:nowrap !important; }
.note { font-size:.8em !important; line-height:1.4em !important; }
.creditPhoto:hover { cursor: help; }
.sans-cesure { hyphens: none !important; }
.avec-cesure { hyphens: auto !important; }
a.lien-invisible, a.lien-invisible:visited { color: $color-standard-text !important; text-decoration: none !important; }
a.lien-blanc, a.lien-blanc:visited { color: #fff !important; text-decoration: underline !important; }
a.lien-blanc:hover, a.lien-blanc:hover:visited { color: #fff !important; text-decoration: none !important; }
.sans-souligne { text-decoration: none !important; }
.texte-gris { color: #888888 !important; }
.texte-gris-fonce { color: $color-dark-grey !important; }
.pas-de-gras, .texte-pas-de-gras, .no-bold { font-weight: 400 !important; }
.minuscule, .texte-minuscule, .no-caps { text-transform: none !important; }
.texte-italique { font-style: italic; }

@include media("<=sm") {
    .texte-extra-jumbo { font-size:3em !important; line-height:1.3em !important; }
    .texte-tres-tres-jumbo { font-size:2.5em !important; line-height:1.3em !important; }
    .texte-tres-jumbo { font-size:2em !important; line-height:1.3em !important; }
    .texte-jumbo { font-size:2em !important; line-height:1.3em !important; }
    .texte-extra-gros { font-size:1.6em !important; line-height:1.3em !important; }
    .texte-tres-tres-gros { font-size:1.4em !important; line-height:1.3em !important; }
}


/****** Alignements ******/

.aligne-gauche, .cms-float-left { text-align:left !important; }
.aligne-gauche-absolu { position: absolute; left: 0 !important; }
.aligne-droite, .cms-float-droite { text-align:right !important; }
.aligne-droite-absolu { position: absolute; right: 0 !important; }
.aligne-centre { text-align:center !important; margin-right:auto !important; margin-left:auto !important; }
.aligne-centre-absolu { position: absolute; left: 50% !important; transform: translate(-50%, 0) !important; }
.aligne-centre td { text-align:left !important; }
.aligne-vertical-centre { vertical-align:middle !important; }
.aligne-vertical-centre-absolu { position: absolute; top: 50% !important; transform: translate(0, -50%) !important; }
.aligne-vertical-haut { vertical-align:top !important; }
.aligne-vertical-haut-absolu { position: absolute; top: 0 !important; }
.aligne-vertical-bas { vertical-align:bottom !important; }
.aligne-vertical-bas-absolu { position: absolute; bottom: 0 !important; }
.aligne-centre-centre-absolu { position: absolute; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }

@include media("<=xs") {
    .aligne-gauche-xs { text-align:left !important; margin-left: 0 !important; }
    .aligne-droite-xs { text-align:right !important; margin-right: 0 !important; }
    .aligne-centre-xs { text-align:center !important; margin-right:auto !important; margin-left:auto !important; }
    .aligne-centre-xs td { text-align:left !important; }
    .aligne-vertical-centre-xs { vertical-align:middle !important; }
    .aligne-vertical-haut-xs { vertical-align:top !important; }
    .aligne-vertical-bas-xs { vertical-align:bottom !important; }
}
@include media("<=xs-large") {
    .aligne-gauche-xs-large { text-align:left !important; margin-left: 0 !important; }
    .aligne-droite-xs-large { text-align:right !important; margin-right: 0 !important; }
    .aligne-centre-xs-large { text-align:center !important; margin-right:auto !important; margin-left:auto !important; }
    .aligne-centre-xs-large td { text-align:left !important; }
    .aligne-vertical-centre-xs-large { vertical-align:middle !important; }
    .aligne-vertical-haut-xs-large { vertical-align:top !important; }
    .aligne-vertical-bas-xs-large { vertical-align:bottom !important; }
}
@include media("<=sm-small") {
    .aligne-gauche-sm-small { text-align:left !important; margin-left: 0 !important; }
    .aligne-droite-sm-small { text-align:right !important; margin-right: 0 !important; }
    .aligne-centre-sm-small { text-align:center !important; margin-right:auto !important; margin-left:auto !important; }
    .aligne-centre-sm-small td { text-align:left !important; }
    .aligne-vertical-centre-sm-small { vertical-align:middle !important; }
    .aligne-vertical-haut-sm-small { vertical-align:top !important; }
    .aligne-vertical-bas-sm-small { vertical-align:bottom !important; }
}
@include media("<=sm") {
    .aligne-gauche-sm { text-align:left !important; margin-left: 0 !important; }
    .aligne-droite-sm { text-align:right !important; margin-right: 0 !important; }
    .aligne-centre-sm { text-align:center !important; margin-right:auto !important; margin-left:auto !important; }
    .aligne-centre-sm td { text-align:left !important; }
    .aligne-vertical-centre-sm { vertical-align:middle !important; }
    .aligne-vertical-haut-sm { vertical-align:top !important; }
    .aligne-vertical-bas-sm { vertical-align:bottom !important; }
}
@include media("<=md") {
    .aligne-gauche-md { text-align:left !important; margin-left: 0 !important; }
    .aligne-droite-md { text-align:right !important; margin-right: 0 !important; }
    .aligne-centre-md { text-align:center !important; margin-right:auto !important; margin-left:auto !important; }
    .aligne-centre-md td { text-align:left !important; }
    .aligne-vertical-centre-md { vertical-align:middle !important; }
    .aligne-vertical-haut-md { vertical-align:top !important; }
    .aligne-vertical-bas-md { vertical-align:bottom !important; }
}
@include media("<=lg") {
    .aligne-gauche-lg { text-align:left !important; margin-left: 0 !important; }
    .aligne-droite-lg { text-align:right !important; margin-right: 0 !important; }
    .aligne-centre-lg { text-align:center !important; margin-right:auto !important; margin-left:auto !important; }
    .aligne-centre-lg td { text-align:left !important; }
    .aligne-vertical-centre-lg { vertical-align:middle !important; }
    .aligne-vertical-haut-lg { vertical-align:top !important; }
    .aligne-vertical-bas-lg { vertical-align:bottom !important; }
}


.flottant-a-gauche {
    text-align: left; float: left; margin: 0 30px 30px 0; padding: 0;
    @include media("<=sm") { width:100%; height:auto; float:none; }
}
.flottant-a-droite {
    text-align: right; float: right; margin: 0 0 30px 30px; padding: 0;
    @include media("<=sm") { width:100%; height:auto; float:none; margin-left:0; }
}
.float-none {
    float: none !important;
}

.inline        { display: inline !important; }
.block         { display: block !important; }
.inline-block  { display: inline-block !important; }
.display-table { display: table !important; }
.table-cell    { display: table-cell !important; }
.position-relative { position: relative !important; }
.display-flex { display: flex !important; align-items: center; }



/****** Lignes / encadrés ******/

/* A appliquer sur un <p> */
.encadre {
    padding: 25px; text-align:left; background-color: #fff; position: relative;
    &::before { border: 4px solid #888; content: ""; position: absolute; top: -5px; bottom: -5px; left: -5px; right: -5px; z-index: 2; }
    a, a:visited {
        text-decoration:underline; color:#fff;
        &:hover {
            text-decoration:none; color:#fff;
        }
    }
    hr { color:#fff; background-color:#fff; height:1px; clear:both; margin:1em 0; border:0; }
    li { background: url(/images/assets/bullet-blanc.png) no-repeat left 0.5em; padding:0 0 .2em 15px; }
    h3 { color:#fff; font-size:1.5em; line-height: 1.3em; text-align:center; margin-bottom:1.5em; }
    & > .encadre { position: relative; z-index: 3; }
}
/* Enlève le filet dans Surreal */
.is-cms .encadre::before {
    display: none;
}


/****** Bordures ******/

.bordure { border:1px solid $color-primary !important; }
.bordure-haut { border-top: 1px solid $color-primary !important; }
.bordure-droite { border-right: 1px solid $color-primary !important; }
.bordure-bas { border-bottom: 1px solid $color-primary !important; }
.bordure-gauche { border-left: 1px solid $color-primary !important; }
.bordure-0 { border-width: 0px !important; }
.bordure-2 { border-width: 2px !important; }
.bordure-3 { border-width: 3px !important; }
.bordure-4 { border-width: 4px !important; }
.bordure-5 { border-width: 5px !important; }
.bordure-6 { border-width: 6px !important; }
.bordure-7 { border-width: 7px !important; }
.bordure-8 { border-width: 8px !important; }
.bordure-9 { border-width: 9px !important; }
.bordure-10 { border-width: 10px !important; }
.bordure-15 { border-width: 15px !important; }
.bordure-20 { border-width: 20px !important; }
.bordure-25 { border-width: 25px !important; }
.bordure-30 { border-width: 30px !important; }
.bordure-35 { border-width: 35px !important; }
.bordure-40 { border-width: 40px !important; }
.bordure-45 { border-width: 45px !important; }
.bordure-50 { border-width: 50px !important; }
.bordure-blanche { border-color: #FFF !important; }
.bordure-noire { border-color: #FFF !important; }
.bordure-grise { border-color: $color-medium-grey !important; }

@include media("<=md") {
    .bordure-0-sm { border: none !important; }
}
@include media("<=sm") {
    .bordure-0-xs { border: none !important; }
}

hr { color: #ccc; background-color: #ccc; height: 1px; clear: both; margin: 40px 0; border: 0; }

/* Diviseurs (ligne verticale) entre colonnes */
/* À utiliser avec bordure-0-xs ou bordure-0-sm, pour enlever le diviseur sur écran plus petit, ex: <div class="diviseur-droite bordure-0-xs"> */
.diviseur-gauche { min-height: 172px; border-left: 1px solid $color-dark-grey; }
.diviseur-centre { min-height: 172px; background: url(/images/assets/divider-shadow.png) no-repeat center top; }
.diviseur-droite { min-height: 172px; border-right: 1px solid $color-dark-grey; }
.diviseur-gauche.diviseur-droite { background: url(/images/assets/divider-shadow.png) no-repeat left top, url(/images/assets/divider-shadow.png) no-repeat right top; }



/****** Utiles ******/




.lien-fleche {
    position: relative; text-decoration: none; color: $color-standard-text !important; padding-left: 25px; white-space: nowrap; display: inline-block;
    &::before {
        content: "\e250";  font-family: 'Glyphicons Halflings'; font-weight: 700; color: $color-standard-text; font-size: 18px; transition: all 500ms ease-out; float: left; margin-left: -25px;
    }
    &:hover {
        color: #285b94 !important; text-decoration: underline;
        &::before {
            margin-left: -20px; color: #285b94;
        }
    }
}



/* Items répétables */
.repeatable {
    border-top: 1px solid #ccc; padding: 30px 0; position: relative;
    h1, h2, h3, h4, h5 { margin-top: 0; }
}
.repeatable:last-child {
    border-bottom: 1px solid #ccc;
}
.repeatable::after {
    content: ""; display: table; clear: both;
}
.repeatable p:last-child, .repeatable ul:last-child, .repeatable ol:last-child,
.repeatable .image-droite:last-child, .repeatable .image-gauche:last-child {
    margin-bottom: 0;
}
.repeatable.repeatable-sans-bordure { border-top: 0; }
.repeatable.repeatable-sans-bordure:last-child { border-bottom: 0; }

/* Quand on veut creer un element repetable "gabarit", que les clients peuvent dupliquer 
Le dernier item repetable est masqué et il sert de gabarit*/
.repeatable-avec-gabarit .repeatable:last-child {
    display: none;
}
.is-cms .repeatable-avec-gabarit .repeatable:last-child {
    opacity: .4; display: block; position: relative;
    &::before {
        content: "INACTIF"; position: absolute; right:0; top:0; padding:5px; background: red; color:white;
    }
}


.ombrage {
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5); transition: all 500ms ease-out;
}
a.ombrage:hover {
    box-shadow: 0px 0px 20px rgba(0,0,0,0.2); transform: scale3d(1.02, 1.02, 1.02);
}

.filtre-ombrage {
    filter: drop-shadow(0px 0px 20px #000000);
}


.rollover-bordure:hover {
    transition: all 500ms ease-out;
    &:hover { outline: 2px solid $color-primary; }
}
.rollover-bordure-blanc:hover {
    transition: all 500ms ease-out;
    &:hover { outline: 2px solid #fff; }
}
.rollover-opacite, .rollover-opacite-fort, rollover-opacite-faible { transition: all .3s; opacity:1; }
.rollover-opacite:hover { opacity:.5; }
.rollover-opacite-fort:hover { opacity:.3; }
.rollover-opacite-faible:hover { opacity:.75; }

.rollover-zoom {
    transition: all .3s;
    &:hover { transform: scale(1.1); }
}

.rollover-zoom-background {
    /** Appliquer sur un conteneur : a, div, span **/
    display: inline-block; overflow: hidden;
    img {
        transition: all .3s;
    }
    &:hover { 
        img {
            transform: scale(1.07); 
        }
    }    
}


//Pour Surreal CMS, pour être capable d enlever le formatage à un élément
.none { }

.invisible { visibility: hidden !important; }
//Affiche l'élément invisible dans Surreal CMS, pour être capable d'enlever la class .invisible au besoin
.is-cms .invisible { 
    visibility: visible !important; opacity: .4;
}

.invisible-complet { display: none !important; }
//Affiche l'élément invisible dans Surreal CMS, pour être capable d'enlever la class .invisible-complet au besoin
.is-cms .invisible-complet { 
    display: block !important; opacity: .4;
}


/* Listes */

ul.liste-sans-bullet {
    li {
        &::before {
            display: none;
        }
    }
}

ul.liste-filet {
    margin: 0 0 0 17px; padding: 0;
    li {
        border-bottom: 1px solid $color-primary;
        &:last-child {
            border-bottom: none;
        }
    }
}

ul.bullet-crochet {
    margin: 0 0 0 35px; padding: 0;
    li {
        &::before {
            content: "\e013"; font-family: 'Glyphicons Halflings';margin-left: -35px;
        }
    }
}

ul.liste-de-pdf {
    li {
        &::before {
            content: " "; background: url(/images/assets/icon-pdf.gif) no-repeat left top; display: inline-block; width: 16px; height: 16px; max-width: 16px; max-height: 16px; margin-left: -25px; margin-top: 4px;
        }
    }
}



.fond-blanc { 
    background-color: #fff; color: $color-standard-text; 
    a, a:visited {
        color: $color-standard-text;
        &:hover { color: $color-standard-text; }
    }
}
.fond-couleur, .fond-bleu {
    background-color: $color-primary; color: #fff;
    a, a:visited {
        color: #fff;
        &:hover { color: #fff; }
    }
}
.fond-rouge, .fond-orange {
    background-color: $color-secondary; color: #fff;
    a, a:visited {
        color: #fff;
        &:hover { color: #fff; }
    }
}
.fond-pale, .fond-gris-pale { background-color: $color-light-grey; }
.fond-fonce, .fond-gris-fonce {
    background-color: $color-dark-grey; color: #fff;
    a, a:visited {
        color: #fff;
        &:hover { color: #fff; }
    }
}
.fond-noir-opacite-5 { background-color: rgba(0,0,0,0.05); }
.fond-noir-opacite-10 { background-color: rgba(0,0,0,0.1); }
.fond-noir-opacite-15 { background-color: rgba(0,0,0,0.15); }
.fond-noir-opacite-25 { background-color: rgba(0,0,0,0.25); }
.fond-noir-opacite-50 { background-color: rgba(0,0,0,0.5); }
.fond-noir-opacite-75 { background-color: rgba(0,0,0,0.75); }
.fond-blanc-opacite-5 { background-color: rgba(255,255,255,0.05); }
.fond-blanc-opacite-10 { background-color: rgba(255,255,255,0.1); }
.fond-blanc-opacite-15 { background-color: rgba(255,255,255,0.15); }
.fond-blanc-opacite-25 { background-color: rgba(255,255,255,0.25); }
.fond-blanc-opacite-50 { background-color: rgba(255,255,255,0.50); }
.fond-blanc-opacite-75 { background-color: rgba(255,255,255,0.75); }

.background-terre {
    background: url(/images/logo-terre-noir-opacite-10.svg) no-repeat left top; background-size: contain;
}

.zone-background-terre {
    position: relative;
    &::after {
        content: ""; position: absolute; top: 0; right: 80%; z-index: 9; width: 100%; height: 700px; background: url(/images/logo-terre-noir-opacite-10.svg) no-repeat right top; background-size: contain;
        @include media("<=lg") { transform: translateX(-5%); }
        @include media("<=md") { display: none; }
    }
    
}

.opacite-0 { opacity: 0; }
.opacite-10 { opacity: 0.1; }
.opacite-20 { opacity: 0.2; }
.opacite-30 { opacity: 0.3; }
.opacite-40 { opacity: 0.4; }
.opacite-50 { opacity: 0.5; }
.opacite-60 { opacity: 0.6; }
.opacite-70 { opacity: 0.7; }
.opacite-80 { opacity: 0.8; }
.opacite-90 { opacity: 0.9; }


.credit-photo:hover { cursor: help; }


.bouton-vedette {
    padding: 10px; background-color: rgba(255,255,255,0.4); display: block; transition: all 500ms ease-out;
    &:hover { background-color: rgba(255,255,255,1); }
}



/****** Photos ******/


/* Float d'images */
.image-gauche {
    float: left; margin: 0 60px 30px 0; padding: 0;
    @include media("<=sm") { float: none; margin-right: 0; }
}
.image-droite {
    float: right; margin: 0 0 30px 60px; padding: 0;
    @include media("<=sm") { float: none; margin-left: 0; }
}
.image-gauche div, .image-droite div { margin-top: 5px; }
.image-droite-sans-marge-gauche {
    float: right; margin: 0 0 30px 0; padding:0;
    @include media("<=sm") { float: none; }
}
.image-gauche-sans-marge-droite {
    float: left; margin: 0 0 30px 0; padding:0;
    @include media("<=sm") { float: none; }
}

.no-img-responsive, article img.no-img-responsive {
    display: inline !important; height: auto; max-width: none !important;
}

.object-fit {
    object-fit: cover; width: 100%; height: 100%;
}


/* Zoom photo - Icone de loupe */
a.zoom-photo {
    position:relative; display: inline-block;
    @include media("<=sm") { display: inline-block !important; }
}
a.zoom-photo::before {
    content:""; background:url(/images/assets/icon-zoom-in.svg) center center no-repeat rgba(0, 0, 0, 0.7); position: absolute; z-index: 1; width:100%; height:100%; top:0; left:0;
    -webkit-transition: all .3s; transition: all .3s; opacity:0;
}
a.zoom-photo:hover::before { opacity:1; }
a.zoom-photo::after {
    content:""; background:url(/images/assets/icon-zoom-in-thumb.png) right bottom no-repeat; position: absolute; z-index: 1; width:100%; height:100%; opacity:1; bottom:4px; right:4px;
}
a.zoom-photo:hover::after { opacity:0; }



/* Gallery Magnific Popup - Avec marges */
.album-photos-container {
    @include media(">=sm") { display: flex; flex-wrap: wrap; flex-direction: row; }
}
.album-photos-container a {
    position:relative; display: block; margin: 5px;
    @include media(">=sm") { width: calc(50% - 10px); }
    @include media(">=lg") { width: calc(33.3333% - 10px); }
}

.album-photos-container a::before {
    content:""; background:url(/images/assets/icon-zoom-in.svg) center center no-repeat rgba(0, 0, 0, 0.7); position: absolute; z-index: 1; width:100%; height:100%; top:0; left:0;
    transition: all .3s; opacity:0;
}
.album-photos-container a:hover::before { opacity:1; transform: scale(.9); }
.album-photos-container a::after {
    content:""; background:url(/images/assets/icon-zoom-in-thumb.png) right bottom no-repeat; position: absolute; z-index: 1; width:100%; height:100%; opacity:1; top:0px; right:0px;
    @include media(">=lg") { bottom: 0px; }
}
.album-photos-container a:hover::after { opacity:0; }
.album-photos-container img {
    width: 100%;
}



/* Bande parallax */
.parallax-section {
    position: relative; overflow: hidden;
    @include media(">=sm") { min-height: 400px; }
    @include media("<sm") { min-height: 300px; }
}
.parallax-item {
    display: block; clear: both; background-position: center center; background-repeat: no-repeat; position: absolute; top: 0; left: 0; z-index: 1; width: 100%;
    @include media(">=sm") { height: 200%; background-size: cover; }
    @include media("<sm") { height: 300px; background-size: cover; }
}



//Place les equalheight un en dessous de l'autre dans Surreal
.is-cms .equal-height-1, .is-cms .equal-height-2 {
    float: none; display: block;
}



/** Animate avec inview **/

.rond-chiffre {
    border-radius: 50%;  width: 85px; color: #fff; background-color: $color-primary; font-family: 'Playfair Display', serif; font-weight: bold; position: relative;
    font-size: 50px;  margin: 0 auto 30px auto;
    &::before {
        content: ""; position: absolute; bottom: -30px; right: -40px; display: block; width: 50px; height: 50px;
        background: url(/images/assets/ornament-rouge.svg) no-repeat center 0; background-size: contain;
    }
    &::after {
        content: ""; position: absolute; bottom: -30px; left: -40px; display: block; width: 50px; height: 50px; 
        background: url(/images/assets/ornament-rouge.svg) no-repeat center 0; background-size: contain; transform: scaleX(-1);
    }
    .js-support & {
        &::before {
            opacity: 0; transform: translateX(-50px); transition: all 1000ms ease-out;
        }
        &::after {
            opacity: 0; transform: translateX(50px) scaleX(-1); transition: all 1000ms ease-out;
        }
    }
    &.inview {
        animation-name: fadeIn; animation-duration: 1.5s; animation-fill-mode: forwards;
        &::before {
            opacity: 1; transform: translateX(0);  
        }
        &::after {
            opacity: 1; transform: translateX(0) scaleX(-1); 
        }
    }  line-height: 65px; text-align: center; display: block; padding: 0 0 18px 0;
}


// Pour qu'un video Youtube embed dans un iframe soit responsive
.youtube-iframe-responsive {
    position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0;
    iframe {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    }
}
.is-cms .youtube-iframe-responsive {
    padding: 50px; height: 400px; display: block; border: 1px solid #ccc;
    iframe {
        height: 300px;
    }
}


// Colonnes Flex

.col-flex {
    text-align: left;
    @include media(">=sm") { 
        display: flex; justify-content: flex-start; align-content: center; align-items: center;
    }
    .col-flex__item {
        flex-grow: 1;
    }
}
.col-flex__2-col-30-70 {
    .col-flex__item:first-child {
        @include media(">sm") { 
            width: 30%; padding-right: 25px;
        }
        @include media("<=sm") { 
            margin-bottom: 20px;
        }
    }
    .col-flex__item:last-child {
        @include media(">sm") { 
            width: 70%;
        } 
    }
}
.col-flex__2-col-50-50 {
    .col-flex__item:first-child {
        @include media(">sm") { 
            width: 50%;
        }
        @include media("<=sm") { 
            margin-bottom: 20px;
        }
    }
    .col-flex__item:last-child {
        @include media(">sm") { 
            width: 50%;
        } 
    }
}
.col-flex__item-strech {
    align-self: stretch;
}


.triangle-rouge {
    width: 100% !important; height: 500px; background: url(/images/assets/triangle-rouge.svg) no-repeat right bottom;  /*height: 500px; background-color: rgba($color-secondary, 0.9); transform: skewY(-10deg);*/
}
.triangle-bleu {
    width: 100% !important; height: 500px; background: url(/images/assets/triangle-bleu.svg) no-repeat right bottom;
}

.diagonale-container {
    position: relative; overflow: hidden;
    p {
        position: relative; z-index: 2;
    }
}
.diagonale-background-noir-20 {
    &::after {
        content: ""; width: 100% !important; height: 150%; background: url(/images/assets/triangle-noir.svg) no-repeat left bottom; background-size: cover;
        position: absolute; left: 0; bottom: 0; z-index: 5; transform: translate(0, 130%); transition: all 2000ms cubic-bezier(.17, .67, .2, 1); opacity: 0;
    }
    .inview &::after {
        transform: translate(0, 30%); opacity: .2;
    }
}

.z-index-10 {
    z-index: 10 !important;
}
.z-index-1 {
    z-index: 1 !important;
}