/* version: v2.0.7 */

/* ----------------------------------------------------------------*/
/*                        STYLE DE BASE                            */
/* ----------------------------------------------------------------*/


* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

html {
font-size: 100%; /* Pour utiliser em en 16px ? */
height: 100%; /* Pour pouvoir mettre un élément à height:100%, tous les éléments parents doivent être à height:100% */
}

body {
position: relative; /* Pour positionner en absolute par rapport à body */
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
height: 100%;  /* Pour pouvoir mettre un élément à height:100%, tous les éléments parents doivent être à height:100% */
}

iframe {
border: none;
overflow: hidden;
width: 100%;
margin-bottom: 15px;
}
table, th, td, input, select {
font-size: 100%;
}
h3 {
padding: 0 15px 15px 15px;
text-align: center;
}
p, td, dt, dd {
}
ol, ul, li {
}
ul {
margin-left: 35px;
}
ul li {
}
dl {
padding-top: 20px;
}
dt {
font-weight: bold;
display: block;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 10px;
border-bottom: 1px dotted gray;
background: #eee;
}
dd {
text-align: right;
}
img {
border: none;
}

/* --------------------FIN-STYLE-DE-BASE---------------------------*/

/* ----------------------------------------------------------------*/
/*                            COULEURS                             */
/* ----------------------------------------------------------------*/

/*

COULEURS DE TEXTE

NOIR             : black (couleur par défaut de hydraulicien)
BLANC            : white (couleur par défaut de photographie)
CHARBON          : #3a3a3a (couleur d'en-tête)
ORANGE           : #ff9e1c (couleur d'en-tête montages A4)
VERT             : rgba(173, 255, 47, 0.78) (couleur bouton contactez-moi photographie)
NOIR CLAIR       : #3a3a3a (texte manchette__sous-titre hydraulicien)
BLANC CASSÉ      : #dadada (texte manchette__sous-titre photographie)
VERT LASER       : #B2EB0E (soulignement index > photographie)
VIOLET LÉGER     : #8d7be2 (soulignement index > hydraulicien + boutons violet)

VERT KAKI clair  : #89B212 (inutilisé)

COULEURS DE FOND

NOIR             : black (couleur de fond par défaut de photographie)
BLANC            : white (couleur de fond par défaut de hydraulicien)
ROSE CLAIR       : #FFF9DF (fond présentation)
GRIS CLAIR       : #2d2d2d (fond nota)
FILTRE BLANC     : rgba(255,255,255,0.2) (fond page de garde hydraulicien pour couvrir la photo)
LÉGER NOIR       : #252525 (fond noir index > photographie + boutons noirs)
VIOLET CLAIR     : #cdcdff (fond hydraulicien > clients)
GRIS FONCÉ       : #424242 (fond #chemin)
VIOLET           : #51528D (fond formations)
LÉGER NOIR       : #222 (fond carte et nota)
NOIR TRANSPARENT : rgba(0, 0, 0, 0.43) (fond boutons photographie)
*/

.fond-gris-clair {
background-color: #efefef;
color: black;
}
.fond-sombre {
background-color: black;
color: white;
}

.marge-bas-60px {
margin-bottom: 60px;
}
.marge-haut-60px {
margin-top: 60px;
}

.largeur-100 {width: 100%;}

/* -------------------------FIN-COULEURS----------------------------*/

/* ----------------------------------------------------------------*/
/*                             EN TÊTE                             */
/* ----------------------------------------------------------------*/

/* Logo Christian Coite : Christian Coite écrit avec la police Kaushan Script */
.christian_coite {
font-size: 2.48em;
font-family: 'Kaushan Script', cursive;
text-align: center;
}
.christian_coite > a {
text-decoration:none;
}

.christian_coite__sombre, .christian_coite__sombre > a {
color: #3a3a3a;
}
.christian_coite__clair, .christian_coite__clair > a {
color: white;
}
.christian_coite__orange, .christian_coite__orange > a {
color: #ff9e1c;
}
.christian_coite__vert, .christian_coite__vert > a {
color: rgba(173, 255, 47, 0.78);
}

.langue{
display: inline-block;
margin-left: 10px;
position:absolute;
top: 15px;
right: 50%;
transform: translateX(150px);
}

@media (max-width: 1024px) {
.christian_coite {font-size: 1.9em;}
.langue {transform: translateX(122px);} /* Le drapeau doit être placé à côté de christian_coite qui a changé de taille */
}

/* -------------------------FIN-EN-TÊTE----------------------------*/


/* ----------------------------------------------------------------*/
/*                          INTRODUCTION                           */
/* ----------------------------------------------------------------*/

.introduction {
overflow: hidden;
background-position: bottom;
background-repeat: no-repeat;
}
.introduction__fond__hydraulicien {
background-image: url(images/Fond_hydraulicien.jpg);
background-size: cover;
}
.introduction__fond__photographie {
background-image: url(images/003_1024.JPG);
background-size: contain;
}

.manchette {
padding: 60px;
text-align: center;
}
.manchette__hydraulicien {
background-color: rgba(255,255,255,0.2);	
}
.manchette__photographie {
background-color: transparent;
}
.manchette > h1 {
display: none;
}
.manchette > h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
font-weight: 100;
letter-spacing: 0.1px;
}
.manchette__sous-titre {
margin-top: 20px;
margin-bottom: 20px;
font: italic 1.7rem/2.5rem Georgia;
}
.manchette__sous-tire__hydraulicien {
color: #3a3a3a;
}
.manchette__sous-titre__photographie {
color: #dadada;
}

@media (max-width: 1024px) {
.introduction__fond__photographie {background-size: cover;}
.manchette h2 {font-size: 1.9em;}
.manchette__sous-titre {font-size: 1.3em;}
}
@media (max-width: 768px) {
.manchette {padding: 60px 0px;}
}
@media (max-width: 580px) {
.manchette__sous-titre {font: italic 1.3rem/2rem Georgia;}
}



/* ------------------------INTRODUCTION----------------------------*/

/* ----------------------------------------------------------------*/
/*                             INDEX                               */
/* ----------------------------------------------------------------*/

.index {
height:calc((100% - 58px)); /* Mets à height: 100% moins l'en-tête (Dépend de la taille de .christian_coite) */
background-color: rgba(0,0,0,0.1);
}
.index__ligne {
display: table;
height: 100%;
width: 100%;
}
.index__ligne-table {
display: table;
width: 100%;
}
.index__col__50 {
width : 50%;
display: table-cell;
}
.index__col-verticale {
display: table-cell;
width: 50%;
height: 100%;
vertical-align: middle;
}
.index__col__centree { /*Aligne le texte en vertical et en horizontal (en vertical dans une table-cell)*/
vertical-align: middle;
text-align: center !important;
padding: 0 !important;
display: table-cell !important;
}
.index__col-bas {position: initial;}
.index__col-haut {position: initial;}



.hauteur-100 {height:100%;}

.index__titre {
/*padding: 10px;*/
font-weight: 100;
}

.index__titre__h2 {
padding: 0 0 10px 0;
font-size: 3.5em;
font-weight: 700;
display: inline;
}

.index__p {
font-size: 1.5em;
line-height: 1em;
text-align: center;
margin-top: 15px;
color: white; /* Par défaut blanc comme pour le lien photographe, après c'est le JS qui gère */
}

.index__lien {
text-decoration: none;
/*padding: 10px;*/
color:white;
}

.index__lien__photographie {
color: white;
}
.index__lien__photographie:hover, .index__lien__photographie:active {
border-bottom: 2px solid #B2EB0E;
}

.index__lien__hydraulicien {
color: white; /* Par défaut blanc comme pour le lien photographe, après c'est le JS qui gère */
}
.index__lien__hydraulicien:hover, .index__lien__hydraulicien:active {
border-bottom: 2px solid #8d7be2;
}

.index__fond {
background-size: cover;
background-position: center;	
}

.index__fond__hydraulicien {
background-color: transparent;
color: black;
}
.index__fond__hydraulicien:hover {
background-color: white;
color: black;
background-image: none;
}

.index__fond__photographie {
background-color: transparent;
color: white;
}
.index__fond__photographie:hover {
background-color: #252525;
color: white;
background-image: none;
}


@media (min-width: 1920px) {
.index__col__50 {display: table-cell;height: 100%;}
}
@media (max-width: 1920px) {
.index__col__50 {display: table-cell;height: 100%;}
}
@media (max-width: 1024px) {	
.index {height:calc((100% - 44px));}
.index__fond__photographie {background-color: black;}
.index__fond__hydraulicien {background-color: white;}
.index__titre__h2 {font-size: 2.5em;}
.index__col__50 {width: 60%;margin-left: auto;margin-right: auto;padding: 60px;display: block;}
}
@media (max-width: 768px) {
.index__col__50 {width: 80%;}
}
@media (max-width: 580px) {
.index__col__50 {width: 100%;padding: 40px;}
.index__fond__hydraulicien{background-position: top;}
}
@media (max-width: 414px) {
.index__col-verticale {
height: 50%;
width: 100%;
}
.index__col-haut {
position:absolute;
top: 0;
right: 0;
}
.index__col-bas {
position:absolute;
top: 50%;
right: 0;
}
.index__ligne {
top: 44px; bottom: 0;
position: absolute;
width: 100%;
height:calc((100% - 44px));
}
}
@media (max-width: 320px) {
.index__titre__h2 {font-size: 2em;}
}


/* ----------------------------INDEX-------------------------------*/

/* ----------------------------------------------------------------*/
/*                           CONTENEUR                             */
/* ----------------------------------------------------------------*/

.conteneur {
width: 80%;
margin-right: auto;
margin-left: auto;
}
.conteneur__W100 {width: 100% !important;}
.conteneur__H100 {height: 100%;}
.conteneur__padding {padding: 60px;}
.conteneur::after {/*Pour contenir des flottants*/
content:"";
clear: both;
display: table;
}
.conteneur__Resume {width: 790px;}
.conteneur__clients {width: 1140px;}

@media (min-width: 1920px) {
.conteneur__Resume {width: 1570px;}
.conteneur__Resume__photographie {width: 790px;}
}
@media (max-width: 1280px) {
.conteneur__clients {width: 570px;}
}
@media (max-width: 1024px) {
.conteneur__Resume {width: 522px;}
}
@media (max-width: 580px) {
.conteneur {width: 100%}
.conteneur__Resume {width: 261px;}
.conteneur__clients {width: 381px;}
}
@media (max-width: 414px) {
.conteneur__clients {width: 190px;}
}
	

/* --------------------------CONTENEUR-----------------------------*/


/* ----------------------------------------------------------------*/
/*                          PRÉSENTATION                           */
/* ----------------------------------------------------------------*/

.presentation {
background-color: #FFF9DF;
}
.presentation__image {max-width: 100%; margin: 25px auto; display: block;}

/* -------------------------PRÉSENTATION---------------------------*/


/* ----------------------------------------------------------------*/
/*                            CLIENTS                              */
/* ----------------------------------------------------------------*/

.clients {
padding: 60px 0;
background-color: #cdcdff;
}

.clients__image {
margin: 0 auto;
display: block;
width: 140px;
}

/* ---------------------------CLIENTS------------------------------*/

/* ----------------------------------------------------------------*/
/*                           CONDUITES  -                          */
/* ----------------------------------------------------------------*/




/* --------------------------CONDUITES-----------------------------*/



.formations {
background-color: #51528D;
color: white;
}


.fonfolles {
/*padding: 60px 0;*/
background-color: #FFF9DF;/*powderblue;*/
}
.fonfolles__image {
display: block;
margin: 45px auto;
max-width: 100%;
}


.montages-a4 {
background-color: #333;
color: white;
}


.decoupages {
  background-color: #333;
  color: white;
}



.FEPN {
text-align: center;   /* La légende de la photo est centrée*/
overflow: hidden;     /* On cache ce qui dépasse ce qui permet de n'afficher que la moitié gauche de la photo pour les petits écrans */
max-width:100%;
}
.FEPN__photo {
display: block;       /* La photo est centrée horizontalement */
margin-right: auto;
margin-left: auto;
width: 75%;          /* Largeur de la photo : 1020px */
margin-bottom: 15px; /* Une marge bas pour la légende */
}

@media (max-width: 1024px) {
.FEPN__photo {width: 90%;}
}
@media (max-width: 580px) {	
.FEPN__photo {width: 100%;}
}
.scrolling-wrapper {
  overflow: hidden;
  white-space: normal;
}
.horizontal-card {
  display: inline-block;
}
/**  Horizontal scrollbar styles */

.hscrollbar::-webkit-scrollbar {
  height: 24px;              /* height of horizontal scrollbar ← You're missing this */
  width: 4px;               /* width of vertical scrollbar */
  border: 1px solid #66666600;
}
.hscrollbar::-webkit-scrollbar-track {
  border-radius: 10px;
  background: rgba(0,0,0,0.1);
  border: 1px solid rgb(96, 93, 93);
}

.hscrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(119, 119, 119, 0.418);
  border: 1px solid #585252;
}

.hscrollbar::-webkit-scrollbar-thumb:hover {
  background: #fff;
}

.hscrollbar::-webkit-scrollbar-thumb:active {
  background: linear-gradient(left, #22ADD4, #1E98BA);
}
#doublescroll
{
  overflow: auto; 
  overflow-y: hidden;
  display: flex;
  justify-content: center; 
}

.retrouver_presentation_noli{
  text-align: center;
}
/* -------------------------FIN-CONTENU----------------------------*/

/* ----------------------------------------------------------------*/
/*                           PIED DE PAGE                          */
/* ----------------------------------------------------------------*/

.pied-de-page{
background:#333;
color: #fff;
padding: 80px 0;
font-weight: 200;
text-align: center;
height: 350px;
}
.pied-de-page p {
font-size : 0.8em;
}
.pied-de-page__logo {
font-family: 'Kaushan script';
font-size:1.5rem !important;
margin-bottom: 15px;
}
@media (max-width: 1024px) {
.pied-de-page {height: auto;}
}
@media (max-width: 1280px) {
.pied-de-page p {font-size : 1em;}
}

.lien-blanc {
color: #fff;
text-decoration: none;
}
.lien-blanc:hover {
color: #fff;
text-decoration: underline;
}
.lien-violet {
color: rgba(141, 123, 226, 1);
text-decoration: none;
}
.lien-violet:hover {
color: rgba(141, 123, 226, 1);
text-decoration: underline;
}

/* -----------------------FIN--PIED-DE-PAGE------------------------*/


/* ----------------------------------------------------------------*/
/*                            CARTES                               */
/* ----------------------------------------------------------------*/

.carte {
margin-right: auto;
margin-left: auto;
width: 211px;
height: 315px;
text-align: center;
background-color: #222;
}
.carte__pompages {background-image: url(../photos/stations-de-pompage/013_211.JPG);}
.carte__conduites {background-image: url(../photos/transferts-conduites/009_211.JPG);}
.carte__modeles {background-image: url(../photos/modeles-physiques/009_211.JPG);}
.carte__regimes-transitoires {background-image: url(../photos/regimes-transitoires/001_211.JPG);}
.carte__formations {background-image: url(../photos/formations-hydraulique/002_211.JPG);}
.carte__fontaines {background-image: url(../photos/fontaines/002_211.JPG);}
.carte__portraits {background-image: url(../fr/photographie/portraits_211.JPG);}
.carte__cherchez {background-image: url(../fr/photographie/Caisses\ américaines\ -\ Poteaux.jpg); background-size: cover;}
.carte__noli {background-image: url(../photos/noli/supporter/MM\ Caisse\ américaine\ avec\ rehausse\ \(1\)\ light.jpg); background-size: contain;}
.carte__decoupages {background-image: url(../fr/photographie/decoupages_211.JPG);}
.carte__montages-a4 {background-image: url(../fr/photographie/montages-a4_211.JPG);}
.carte__titre {
font-weight: 700;
font-size: 1.5rem;
padding: 1.25rem;
color: white;
/*Recouvre toute la photo avec un fond noir transparent*/
background-color: rgba(0,0,0,0.3);
height: 19.6875rem;
/*et fait remonter le bouton sur ce fond*/
margin-bottom: -4.375rem;
}
.carte__sous-titre {
display: block;
font-weight: 400;
font-style: italic;
font-size: 1.3rem;
color: white;
margin-top: 4.2em;
}

/* ---------------------  -FIN-CARTES------------------------------*/



/* ----------------------------------------------------------------*/
/*                             CHEMIN                              */
/* ----------------------------------------------------------------*/
#chemin {
padding: 10px;
background: linear-gradient(to right, rgba(0,0,0,0.3), #5f5f5f 17%, rgba(0,0,0,0.3));
}
#chemin p {
font-size: 1.3em;
color: black;
}

@media (max-width: 1920px) {
#chemin p {font-size: 1.2em;}
}
@media (max-width: 1600px) {
#chemin p {font-size: 1.1em;}
}
@media (max-width: 1024px) {
#chemin p {font-size: 1em;}
}
@media (max-width: 580px) {
#chemin p {font-size: 0.9em;}
}

.lien:link, .lien:visited {
text-decoration: none;
color: black;
font-weight: bold;
}
.lien:hover, .lien:active {
color: black;
text-decoration: underline;
}
/* ------------------------FIN-CHEMIN------------------------------*/

/* ----------------------------------------------------------------*/
/*                            BOUTONS                              */
/* ----------------------------------------------------------------*/

.bouton__image {
text-decoration:none;
display: block;
background: url(images/fr.png) 0px 2px no-repeat;
width: 18px;
}
.bouton__image__en {
background-image: url(images/gb.png);
}
.bouton__image__es {
background-image: url(images/es.png);
}
.bouton__image__fr {
background-image: url(images/fr.png);
}

.bouton {
padding: 15px 0;
text-align: center;
}

.reset-padding {
padding: 0;
}

.bouton__lien {
text-decoration: none;
padding: 10px 20px;
font-weight: bold;
text-align: center;
}
.bouton__lien:active {
box-shadow:1px 1px 1px #333 inset;
}

.bouton__lien__violet:link, .bouton__lien__violet:visited {
color: #8d7be2;
border: 1px solid #8d7be2;
}
.bouton__lien__violet:hover {
color: white;
background-color: #8d7be2;
}
.bouton__lien__violet:active {
color: white;
background-color: #8d7be2;
}

.bouton__lien__blanc:link, .bouton__lien__blanc:visited {
color: white;
border: 1px solid white;
}
.bouton__lien__blanc:hover {
color: #333;
background-color: white;
border: 1px solid white;
}
.bouton__lien__blanc:active {
color: #333;
background-color: white;
border: 1px solid white;
}

.bouton__lien__vert:link, .bouton__lien__vert:visited {
color: rgba(173, 255, 47, 0.78);
background-color: rgba(0, 0, 0, 0.43);
border: 1px solid rgba(173, 255, 47, 0.78);
}
.bouton__lien__vert:hover {
color: black;
background-color: rgba(173, 255, 47, 0.78);
border: 1px solid black;
}
.bouton__lien__vert:active {
}

.bouton__lien__orange:link, .bouton__lien__orange:visited {
color: #ff9e1c;
background-color: rgba(0, 0, 0, 0.43);
border: 1px solid #ff9e1c;
}
.bouton__lien__orange:hover {
color: black;
background-color: #ff9e1c;
border: 1px solid black;
}
.bouton__lien__orange:active {
}

/*---------------BOUTONS-OPAQUES-------------------*/

.bouton__lien__violet__opaque:link, .bouton__lien__violet__opaque:visited {
color: white;
background-color: #8d7be2;
border: 1px solid #8d7be2;
}
.bouton__lien__violet__opaque:hover {
color: white;
background-color: #8d7be2;
border: 1px solid white;
}
.bouton__lien__violet__opaque:active {
color: white;
background-color: #8d7be2;
}

.bouton__lien__noir__opaque:link, .bouton__lien__noir__opaque:visited {
color: white;
background-color: #252525;
border: 1px solid black;
}
.bouton__lien__noir__opaque:hover {
color: black;
background-color: rgba(255,255,255, 0.3);
}
.bouton__lien__noir__opaque:active {
color: black;
background-color: rgba(255,255,255, 0.3);
}

.bouton__lien__blanc__opaque:link, .bouton__lien__blanc__opaque:visited {
color: black;
background-color: white;
border: 1px solid white;
}
.bouton__lien__blanc__opaque:hover {
color: white;
background-color: black;
border: 1px solid black;
}
.bouton__lien__blanc__opaque:active {
color: #333;
background-color: white;
}


#btn-retour-en-haut {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
background-color: transparent;
border: none;
cursor: pointer;
background-size: cover;
width: 40px;
height: 40px;
}
#btn-retour-en-haut:focus {outline:0;}

.btn-retour-en-haut__hydraulicien {
background-image: url(images/fleche-haut_violet.png);
}

.btn-retour-en-haut__photographe {
background-image: url(images/fleche-haut_vert.png);
}

.btn-retour-en-haut__montages-a4 {
background-image: url(images/fleche-haut_orange.png);
}

#btn-retour-en-haut:hover {
  /*background-color: #555;*/
}

.btn-telecharger {
float: right;
width: 150px;
margin-left: 40px;
}
.btn-telecharger:after {
clear: both;
display: table;
content: '';
}
.btn-telecharger a img {
width: 90%;
margin-right: auto;
margin-top: auto;
display: block;
}
.btn-telecharger a img:hover {
width: 92%;
}
.btn-telecharger h2 {
font-size: 1em;
text-align: center;
margin-top: 15px;
}

@media (max-width: 1024px) {
.btn-telecharger {float:none;margin:0 auto 40px auto;}
}

/* -------------------------FIN-BOUTONS----------------------------*/


/* ----------------------------------------------------------------*/
/*                      LIGNES/COLONNES                            */
/* ----------------------------------------------------------------*/

.ligne {
display: table;
width: 100%;
height: 100%;
}
.colonne {
display: table-cell;
vertical-align: top;
}
.colonne__50 {width : 50%;} /* 2 éléments */
.colonne__33 {width : 33%;} /* 3 éléments */
.colonne__25 {width : 25%;} /* 4 éléments */
.colonne__milieu__bordures {border-right: 1px solid #575757;border-left: 1px solid #575757;}
.colonne__fin__bordures {border-left: 1px solid #575757;}
.colonne__H100 {height: 100%;}
.colonne__centree {display: block !important; /*float : none;*/ margin-left: auto; margin-right: auto;}
.colonne__flottante {float : right;}
.colonne__marges__HBDG {margin-left: 25px !important; margin-right:25px !important;margin-bottom:40px;margin-top:20px;}
.colonne__texte {text-align: justify; padding: 60px;}
.colonne__texte > ul {margin: 10px 45px;}
.colonne__texte > ul li {line-height: 27px; font-weight: 200;}
.colonne__texte p  {line-height:27px;font-weight: 200;}
.colonne__texte__h-centre {text-align: center !important; padding: 0 !important;}
.colonne__texte__v-centre {vertical-align: middle; display: table-cell !important;}
.colonne__texte__marge-bas {margin-bottom: 35px;}
.colonne__texte__titre {
font-weight: 200;
font-size: 2.5rem;
margin-bottom: 25px;
text-align: left;
}
.colonne__texte__titre__h3 {
margin-bottom: 25px;
padding: 0;	
font-size: 2.5rem;
}
.colonne__texte__extrait
{
font-size: 1.2rem;
font-family: Georgia, serif;
font-style: italic;
width: 80%;
padding: 0 1.5625rem;
margin: 1.5625rem auto;
/*border-left: 0.1875rem solid gray;*/
}
.colonne__texte__legend {font-style:italic;}

/*.colonne__image {overflow: hidden;}*/
.colonne__image__1 {display: none !important;}

.colonne__image__2 {
/*display: block;*/
background-size: cover;
/*vertical-align: top;*/
}

.colonne__image__pompages {
background-image: url(../diaporama/011.JPG);
background-position: 25% 75%;
}
.colonne__image__conduites {
background-image: url(../diaporama/010.JPG);
background-position: 25% 75%;
}
.colonne__image__modeles {
background-image: url(../diaporama/006.JPG);
background-position: center;
}
/*.colonne__image__regimes-transitoires { display: block;}*/
.colonne__image__decoupages {
background-image: url(../photos/decoupages/024_3637.JPG);
background-position: right;
}
.colonne__image__montages-a4 {
background-image: url(../photos/montages-a4/006_4724_moitie.JPG);
background-position: right;
}

.colonne__adresse p {line-height: 27px;}
.colonne__liens p {line-height: 27px;}
.colonne__autre p {line-height: 27px;}

@media (max-width: 1024px) {
.colonne__texte__titre {font-size: 1.9rem;}
.colonne {display: block; margin-right: auto; margin-left: auto;}
.colonne__50 {width: 60%;}
.colonne__33 {display: table-cell;}
.colonne__25 {width: 50%; display: block;margin-bottom: 60px;}
.colonne__H100 {height: auto;}
.colonne__image__1 {vertical-align: unset; display: block !important;}
.colonne__image__2 {display: none !important;}
}
@media (max-width: 768px) {
.colonne__50 {width: 80%;}
.colonne__33 {width: 100%;display: block;}
.colonne__milieu__bordures {border-right: none;border-left: none;}
.colonne__adresse {width: 50%;display: table-cell;border-right: 1px solid #575757;}
.colonne__liens {width: 100%;display: block;}
.colonne__autre {width: 100%;display: block;}
}
@media (max-width: 580px) {
.colonne__50 {width: 100%;}
.colonne__33 {width: 100%;}
.colonne__25 {width: 100%;}
.colonne__texte {padding: 60px 30px;}
.colonne__texte > ul {margin: 10px 30px;}
.colonne__texte h2 {text-align: center;}
.colonne__texte h3 {text-align: center;}
.colonne__texte__extrait {width: 100%;}
.colonne__adresse {width: 100%;display: block;border-right: none;}
.colonne__liens {width: 100%;display: block;}
.colonne__autre {width: 100%;display: block;}
}


/* -------------------------FIN-LIGNE------------------------------*/

/* ----------------------------------------------------------------*/
/*                             NOTA                                */
/* ----------------------------------------------------------------*/
.nota {
background-color: #222;
padding: 10px 25px;
color: white;
font-weight: 100;
text-align: center;
margin-top: -200px;
font-size: 1rem;
}
/* -------------------------FIN-NOTA-------------------------------*/





/* ----------------------------------------------------------------*/
/*                   GALLERIE PHOTO MASONRY                        */
/* ----------------------------------------------------------------*/
.portfolio {
margin-left: 7%;
margin-bottom: 151px;
}

.grid {}
.grid:after { /* clearfix */
content: '';
display: block;
clear: both;
}
.grid-sizer { width: 16.66%;}
.grid-item { width: 16.66%; margin-bottom: 10px;}
/* 2 columns */
.grid-item > img {
width: 100%;
height: 100%;
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
box-shadow: 0px 0px 3px rgba(0,0,0,.7);
}
.grid-item > img:hover {
-webkit-filter: none; /* Safari 6.0 - 9.0 */
filter: none;
box-shadow: 0px 3px 7px rgba(0,0,0,.7);
}


@media (max-width: 1920px) {
.grid-sizer {width: 20%;}
.grid-item {width: 20%;}
}
@media (max-width: 1600px) {
.grid-sizer {width: 30%;}
.grid-item {width: 30%;}
}
@media (max-width: 1024px) {
.grid-sizer {width: 43%;}
.grid-item {width: 43%;}
}
@media (max-width: 580px) {
.grid-sizer {width: 90%;}
.grid-item {width: 90%;}
}

/* --------------------------FIN-MASONRY---------------------------*/

/* ----------------------------------------------------------------*/
/*                          ÉCRAN < 580 px                         */
/* ----------------------------------------------------------------*/

@media (max-width: 580px) { #supersized {display: none;} }