/**
 ** Ce fichier contient des outils CSS de base et ré-utilisables : grilles, blocs, overlays, etc.
 ** Il ne contient PAS d'assemblages complexes comme les widgets ni d'éléments métiers
 **
 **/


/* Reset */
* {margin:0; padding:0;}
a, div, button, input {outline:0;}
main, aside, article, section {display:block;}
body {background:white; overflow-y:scroll;}


/* Helpers */
.force-txt-center,
.txt-center {text-align:center !important;}
.force-txt-center * {text-align:center !important;}
.txt-left {text-align:left !important;}
.txt-right {text-align:right !important;}
.align-center {margin-left:auto; margin-right:auto;}
.uppercase {text-transform:uppercase;}
.bg-cover {background-size:cover; background-position:center center;}
.bg-cover.lazy-bg-image {background-color:#F0F0F0;}
.bg-cover.lazy-bg-image.loaded {background-color:none;}
.bg-pos-y-top {background-position-y:top;}
.bg-pos-y-center {background-position-y:center;}
.bg-pos-y-bottom {background-position-y:bottom;}
.abs-fill-parent {position:absolute; top:0; left:0; right:0; bottom:0;}
.abs-almost-fill-parent {position:absolute; top:7px; left:8px; right:8px; bottom:9px;}
.abs-from-bottom {position:absolute; left:0; right:0; bottom:0;}
.no-selectable {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.no-overflow {overflow:hidden;}
.no-text {font-size:0;}
.no-wrap {white-space:nowrap;}
.no-top-padding {padding-top:0 !important;}


/* Limitation desktop / mobile avec un seuil de 920px */
@media screen and (max-width:920px) {
    .only-desktop {display:none !important;}
}
@media screen and (min-width:921px) {
    .only-mobile {display:none !important;}
}

/* Limitation desktop / mobile avec un seuil de 640px */
@media screen and (max-width:640px) {
    .only-not-mobile-640 {display:none !important;}
}
@media screen and (min-width:641px) {
    .only-mobile-640 {display:none !important;}
}


/* Au survol, apparition par le bas d'un objet absolu */
.on-hover-parent .on-hover-child-abs-slide-up {opacity:0; margin-bottom:-8px; transition:all .3s ease-in-out;}
.on-hover-parent:hover .on-hover-child-abs-slide-up {opacity:1; margin-bottom:0;}

/* Idem pour un objet static */
.on-hover-parent .on-hover-child-slide-up {opacity:0; position:relative; bottom:-8px; transition:all .3s ease-in-out;}
.on-hover-parent:hover .on-hover-child-slide-up {opacity:1; bottom:0;}

/* Au survol, ouverture d'un objet (height : 0 => max 180) */
.on-hover-parent .on-hover-child-expand {max-height:0; overflow-y:hidden; transition:max-height .3s ease-out;}
.on-hover-parent:hover .on-hover-child-expand {max-height:180px; transition:max-height .6s ease-in .2s;}


/* Grille en TABLE-CELL */
.grid {display:table; width:100%;}
.grid.fixed {table-layout:fixed;}
.grid > * {display:table-cell; vertical-align:top;}
.grid.v-bottom > * {vertical-align:bottom;}
.grid.v-middle > * {vertical-align:middle;}
.grid > .gutter {width:20px; height:30px;}
.grid > .gutter.large {width:60px;}
@media screen and (max-width: 920px) {
    .grid.no-grid-on-tablet,
    .grid.no-grid-on-tablet > * {display:block; width:initial;}
}

/* Une colonne centrée en largeur, large ou étroite */
.page-col {
	display:block; margin-left:auto; margin-right:auto; width:100%; max-width:1040px;
	box-sizing:border-box; padding-left:20px; padding-right:20px;
}
.page-col.narrow {max-width:810px;}
.no-page-col .page-col {padding:0;}
@media screen and (max-width: 920px) {
    .page-col {padding-left:4.5vw; padding-right:4.5vw;}
}


/* Masque translucide qui recouvre un élément en z-index 10 */
/* (la couleur d'arrière plan n'est pas définie ici) */
.bg-layer {position:relative;}
.bg-layer:after {
    position:absolute; z-index:10; content:''; display:inline-block; top:0; left:0; bottom:0; right:0; transition:opacity .3s ease-in-out;
}


/* Blocs DIV carrés côté à côté, avec gouttière. */
/* Nombre d'éléments personnalisable pour desktop et tablet. */
.squares-wrapper {margin-right:-20px; font-size:0;}
.squares-wrapper > div {
    display:inline-block; font-size:16px; box-sizing:border-box; margin-right:20px; margin-bottom:30px; vertical-align:top;
}
.squares-wrapper > div:before {content:''; display:inline-block; width:0; padding:50% 0; vertical-align:middle;}
@media screen and (max-width:920px) {
    .squares-wrapper {margin-right:-3.2vw;}
    .squares-wrapper > div {margin-right:3.2vw; margin-bottom:4vw;}
}


/* Impose un ratio à un bloc DIV : fixe la hauteur d'après la largeur imposée
 * Attention, s'il doit y avoir du contenu dans le bloc, le mettre dans un DIV.inner */
.block-hratio:before {content:''; display:inline-block; width:0; vertical-align:middle;}
.block-hratio > .inner {position:relative; display:inline-block; vertical-align:top; width:98%; box-sizing:border-box;}
.block-hratio > .inner.abs-fill-parent {position:absolute; width:initial;}
@media screen and (max-width:640px) {
    .block-hratio > .inner {width:96%;}
}