@media (min-width: 992px) {
    #centre {
       width: 960px;
     }
   }
   @media (min-width: 1200px) {
     #centre {
       width: 1180px;
     }
     .container { width: 960px; }
   }
   
   #navigation, #ariane, #contenu {
     width: 100%;
   }
   #relationnel, #hooks, #barre-flottante  {
     display: none;
   }
   #navigation, #ariane {
     padding-left: 10px;
     padding-right: 10px;
   }
   #centre, #pied {
     padding-bottom: 0;
   }
   #plan-site #sections .colonne {
     width: calc(20% - 20px);
   }
   #plan-site #sections h3.reseaux-sociaux,
   #plan-site #sections h3.reseaux-sociaux-en{
     margin-top: 1em;
   }
   
   
   .m-t-0 {
     margin-top: 0 !important;
   }
   .m-b-0 {
     margin-bottom: 0 !important;
   }
   .m-l-1 {
     margin-left: 1rem !important;
   }
   a.lien-sans-soulignement {
     text-decoration: none;
   }
   .panel {
     -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
     -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
     border: solid 1px #ddd;
     background-color: #fff;
   }
   .panel-heading,
   .panel-body {
     padding: 20px;
   }
   .btn-block {
     display: block;
     width: 100%;
     text-align: center;
   }
   
   .fond-blanc {
     background-color: #fff;
   }
   .fond-gris {
     background-color: #f2f2f2;
   }
   .fond-vert {
     background-color: #eef7f3;
   }
   .texte-vert {
     color: #00884e;
   }
   
   #contenu {
     font-size: 1.33333333em;
   }
   
   #contenu .titre-n1 {
     font-family: 'robotoregular', sans-serif;
     font-size: 2em;
     color: #00884e;
     font-weight: normal;
   }
   #contenu.page-accueil .titre-n1 {
       text-align: center;
     }
     @media (min-width: 768px) {
       #contenu .titre-n1 {
         font-size: 2.25em;
       }
     }
   #contenu .titre-n2 {
     font-family: 'robotomedium', sans-serif;
     font-size: 1.5em;
     color: #000;
     font-weight: normal;
   }
   #contenu a.lien-action,
   #contenu ul.liens-action li a {
     position: relative;
     padding-left: 1.5em;
     background: none;
   }
   #contenu a.lien-action:before,
   #contenu ul.liens-action li a:before {
     content: "";
     background: url(/ressources/images/ic-fleche-liens.svg) no-repeat top left / 1.07em 1.07em;
     position: absolute;
     width: 1.125em;
     height: 1.125em;
     top: 0.25em;
     margin-left: -1.5em;
   }
   #contenu .bouton-action,
   #contenu button.principal,
   #contenu button.secondaire {
     padding: 9px 12px;
     line-height: 1.5;
     -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
     -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
   }
   
   
   #contenu.page-accueil #section-vitrine {
     position: relative;
   }
     @media (min-width: 768px) {
       #contenu.page-accueil #section-vitrine {
         min-height: 500px;
       }
     }
   #contenu.page-accueil #section-vitrine .vitrine {
     position: relative;
     height: 345px;
     overflow: auto;
     background-color: #8a8a8a;
   }
     /* image mobile max 512px X 345px */
     @media (min-width: 513px) {
       #contenu.page-accueil #section-vitrine .vitrine {
         height: 500px;
       }
     }
   #contenu.page-accueil #section-vitrine .vitrine-background {
     position: absolute;
     z-index: 2;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-size: 512px auto;
     background-repeat: no-repeat;
     background-position: 0 0;
   }
     @media (min-width: 513px) {
       #contenu.page-accueil #section-vitrine .vitrine-background {
         background-size: auto;
         background-position-x: -110px;
       }
     }
     @media (min-width: 1200px) {
       #contenu.page-accueil #section-vitrine .vitrine-background {
         background-position-x: 0;
       }
     }
   #contenu.page-accueil #section-vitrine .vitrine-contenu {
     position: absolute;
     z-index: 3;
     font-size: 16px;
     left: 15px;
   }
     @media (min-width: 513px) {
       #contenu.page-accueil #section-vitrine .vitrine-contenu {
         left: 20px;
       }
     }
     @media (min-width: 1200px) {
       #contenu.page-accueil #section-vitrine .vitrine-contenu {
         left: 130px;
       }
     }
   #contenu.page-accueil #section-vitrine .bloc-connexion {
     padding: 20px 5px;
   }
     @media (min-width: 360px) {
       #contenu.page-accueil #section-vitrine .bloc-connexion {
         padding: 20px 10px;
       }
     }
     @media (min-width: 768px) {
       #contenu.page-accueil #section-vitrine .bloc-connexion {
         padding: 20px 20px;
       }
     }
     @media (min-width: 992px) {
       #contenu.page-accueil #section-vitrine .bloc-connexion {
         min-width: 300px;
         width: 18.75em;
         max-width: 50%;
         padding: 0;
         box-sizing: content-box;
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         right: 20px;
         border: none;
         z-index: 3;
       }
       #contenu.page-accueil #section-vitrine .bloc-connexion .panel {
         border: none;
         -moz-box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.15);
         -webkit-box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.15);
         box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.15);
       }
     }
     @media (min-width: 1200px) {
       #contenu.page-accueil #section-vitrine .bloc-connexion {
         right: 130px;
       }
     }
   #contenu.page-accueil #section-vitrine .bloc-connexion .panel-heading {
     padding: 10px 15px;
     color: #fff;
     background-color: #000;
   }
   #contenu.page-accueil #section-vitrine .bloc-connexion .panel-heading h2 {
     margin: 0;
     font-size: 1.375em;
     font-weight: normal;
   }
   #contenu.page-accueil #section-vitrine .bloc-connexion .logos {
     margin: 0;
     text-align: center;
   }
   #contenu.page-accueil #section-vitrine .bloc-connexion .logos.logos-accesd a {
     display: flex;
     justify-content: space-around;
     height: 34px;
   }
   #contenu.page-accueil #section-vitrine .bloc-connexion .logos.logos-accesd a img.fixe {
     height: 100% !important;
   }
   #contenu.page-accueil #section-vitrine .bloc-connexion .panel-body div + div {
     margin-top: 10px;
   }
   #contenu.page-accueil #section-vitrine .bloc-connexion .btn-block.cadenas {
     background-image: none;
   }
   #contenu.page-accueil #section-vitrine .bloc-connexion .btn-block.cadenas {
     content: "";
     width: 100%;
     /*height: 45px;*/
     top: 0;
     background-image: url(/ressources/images/ic-cadenas-blanc.svg);
     background-repeat: no-repeat;
     background-position: 29% calc(42%);
     /*background-position: left;
     background-position-x: 25%;
     text-align: left;*/
     padding-left: 14%;
   }
   #contenu.page-accueil #section-vitrine .bloc-connexion .btn-block.cadenas.lang-en {
    background-position: 39% calc(42%) !important;
   }
   
   
   #contenu.page-accueil #section-vitrine .bloc-connexion .btn-block.cadenas-des {
     content: "";
     width: 100%;
     height: 45px;
     /*position: absolute;*/
     top: 0;
     /*margin-left: -25px;*/
     background-image: url(/ressources/images/ic-se-deconnecter-blanc.svg);
     background-repeat: no-repeat;
     background-position: left;
     background-position-x: 20%;
     text-align: left;
     padding-left: 30%;
   }
   #contenu.page-accueil #section-vitrine .bloc-connexion .btn-block.fleche-rond{
     content: "";
     width: 100%;
     height: 45px;
    /*position: absolute;*/
     top: 0;
    /* margin-left: -25px;*/
     background-image: url(/ressources/images/ic-fleche-liens-blanc.svg);
     background-repeat: no-repeat;
     background-position: left;
     background-position-x: 8%;
     text-align: left;
     padding-left: 18%;
   }
   
   /* Section Sous-vitrines --- À Valider */
   #contenu.page-accueil #section-sous-vitrines .tag {
     background-color: #eef7f3;
     border-radius: 4px;
     color: #00884e;
     font-family: robotobold;
     font-size: 0.813em; /* 13px */
     font-weight: 700;
     left: 30px;
     padding: 10px 15px;
     position: absolute;
     top: 5px;
   }
   
   /* Override position flèche lien action --- À valider */
   @media (min-width: 992px) {
     #contenu.page-accueil .cd-lien-action:before {
       top: 0;
     }
   }
   
   /* Ancienne Section Conseils
   
   #contenu.page-accueil #section-conseils {
     padding: 40px 0;
   }
   #contenu.page-accueil #section-conseils img.vignette {
     max-width: 100%;
   }
   #contenu.page-accueil #section-conseils .titre-categorie {
     position: relative;
     margin-top: 1em;
     padding-bottom: 10px;
     font-size: 1em;
     font-weight: normal;
     text-transform: uppercase;
   }
   #contenu.page-accueil #section-conseils .titre-categorie:after {
     content: "";
     width: 40px;
     height: 2px;
     position: absolute;
     bottom: 0;
     left: 0;
     background-color: #cbcccc;
   }
   #contenu.page-accueil #section-conseils .description {
     margin-bottom: 20px;
   }
   
   */
   
   #contenu.page-accueil #section-liens-utiles {
     padding: 40px 0;
   }
   #contenu.page-accueil #section-liens-utiles ul {
     padding-left: 0;
     margin: 0 -20px;
   }
   #contenu.page-accueil #section-liens-utiles ul li {
     position: relative;
     flex: 0 1 100%;
     margin-top: 10px;
     margin-bottom: 10px;
     padding-left: 20px;
     padding-right: 20px;
     background: none;
   }
     @media (min-width: 768px) {
       #contenu.page-accueil #section-liens-utiles ul li {
         flex: 0 1 50%;
         max-width: 50%;
       }
     }
   #contenu.page-accueil #section-liens-utiles ul li:before {
     content: "";
     width: calc(100% - 100px);
     height: 1px;
     position: absolute;
     bottom: 0;
     left: 80px;
     background-color: #ddd;
   }
   #contenu.page-accueil #section-liens-utiles a.icone {
     display: inline-block;
     position: relative;
     min-height: 40px;
     padding: 10px 20px 10px 60px;
     font-size: 1.125em;
     color: #595959;
     text-decoration: none;
   }
   #contenu.page-accueil #section-liens-utiles a.icone:before {
     content: "";
     width: 40px;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     background-repeat: no-repeat;
     background-position: left center;
   }
   #contenu.page-accueil #section-liens-utiles a.icone.taux:before { background-image: url(/ressources/images/a00-ic-taux.svg); }
   #contenu.page-accueil #section-liens-utiles a.icone.cat-boni:before { background-image: url(/ressources/images/a00-ic-bonidollars.svg); }
   #contenu.page-accueil #section-liens-utiles a.icone.points-services:before { background-image: url(/ressources/images/a00-ic-trouver.svg); }
   #contenu.page-accueil #section-liens-utiles a.icone.adresse:before { background-image: url(/ressources/images/a00-ic-changement-adresse.svg); }
   #contenu.page-accueil #section-liens-utiles a.icone.securite:before { background-image: url(/ressources/images/a00-ic-securite.svg); }
   #contenu.page-accueil #section-liens-utiles a.icone.courriel:before { background-image: url(/ressources/images/a00-ic-hammeconage.svg); }
   #contenu.page-accueil #section-liens-utiles a.icone.carte-perdue:before { background-image: url(/ressources/images/a00-ic-carte-perdue.svg); }
   #contenu.page-accueil #section-liens-utiles a.icone.concours:before { background-image: url(/ressources/images/a00-ic-concours.svg); }
   #contenu.page-accueil #section-liens-utiles a.icone.ristourne:before { background-image: url(/ressources/images/a00-ic-ristourne.svg); }
   #contenu.page-accueil #section-liens-utiles a.icone.covid-19:before { background-image: url(/ressources/images/a00-ic-covid-19.svg); }
   
   #contenu.page-accueil #visuel-avant-section-caisse {
     background-image: url(/ressources/images/a00-tel-localisateur-g.jpg);
     background-position: center -100px;
     background-size: initial;
     background-repeat: no-repeat;
     height: 200px;
     overflow: hidden;
   }
   #contenu.page-accueil #section-caisse {
     padding-top: 40px;
     padding-bottom: 40px;
   }
   #contenu.page-accueil #section-caisse-localisateur form {
     margin-top: 0;
     margin-bottom: 0;
     padding: 0;
     text-align: center;
   }
     @media (min-width: 768px) {
       #contenu.page-accueil #section-caisse-localisateur form {
         padding: 20px;
         text-align: left;
         border: solid 1px #cbcccc;
       }
     }
   #contenu.page-accueil #section-caisse-localisateur form label {
     display: inline-block;
     margin-bottom: 20px;
     font-size: 1.375em;
     font-weight: normal;
     line-height: 1.5;
   }
   #contenu.page-accueil #section-caisse-localisateur form input {
     margin-right: 20px;
     padding: 1px 6px;
     height: 44px;
     min-height: 44px;
     width: 180px;
     font-size: 1em;
     border: solid 1px #cbcccc;
   }
   #contenu.page-accueil #section-caisse-personnalisation .infos-caisse {
     display: flex;
     flex-flow: row wrap;
     justify-content: space-between;
   }
   #contenu.page-accueil #section-caisse-personnalisation .infos-caisse > div {
     flex: 0 1 100%;
   }
     @media (min-width: 768px) {
       #contenu.page-accueil #section-caisse-personnalisation .logo-caisse {
         padding: 0 80px;
       }
   
       #contenu.page-accueil #section-caisse-personnalisation .infos-caisse .titreCDS {
         padding: 0 80px;
         width:100%;
       }
   
       #contenu.page-accueil #section-caisse-personnalisation .infos-caisse > div {
         flex: 0 1 50%;
         padding: 0 0 0 60px;
         max-width: 50%;
       }
     }
     @media (min-width: 992px) {
       #contenu.page-accueil #section-caisse-personnalisation .infos-caisse > div {
         padding: 0 0 0 80px;
       }
     }
   #contenu.page-accueil #section-caisse-personnalisation .infos-caisse > div.filet > ul.sans-puces,
   #contenu.page-accueil #section-caisse-personnalisation .infos-caisse > div.filet > ul.sans-puces li {
     margin: 0;
     padding: 0;
   }
   #contenu.page-accueil #section-caisse-personnalisation .horaire-caisse {
     /* display: inline-block; */
     margin-top: 1em;
     padding-top: 1em;
     border-top: 1px solid #cbcccc;
   }
     @media (min-width: 768px) {
       #contenu.page-accueil #section-caisse-personnalisation .horaire-caisse {
         display: inline-block;
         margin-top: 0;
         padding: 15px;
         border: 1px solid #cbcccc;
       }
     }
   #contenu.page-accueil #section-caisse-personnalisation .horaire-caisse .noteAppel,
   #contenu.page-accueil #section-caisse-personnalisation .horaire-caisse .appel-note,
   #contenu.page-accueil #section-caisse-personnalisation .horaire-caisse .noteCellTitre {
     display: none;
   }
   
   #contenu.page-accueil #section-caisse-personnalisation .horaire-caisse .note { padding-top: 1px; background: transparent url(/ressources/images/a00-filet-notes.gif) no-repeat left top; margin: 0.5em auto; }
   #contenu.page-accueil #section-caisse-personnalisation .horaire-caisse .note .petit { font-size: 0.76em; }
   
   /* ---------- À valider ---------- */
   @media (min-width: 768px) {
     #contenu.page-accueil #section-caisse-personnalisation .filet:after {
       content: "";
       width: 1px;
       height: 100%;
       position: absolute;
       top: 0;
       right: 0;
       background-color: #cbcccc;
     }
     #contenu.page-accueil #section-caisse-personnalisation .infos-caisse .filet {
       position: relative;
       padding: 0 60px 0 80px;
       border-right: 1px solid #cbcccc;
     }
   }
   @media (min-width: 992px) {
     #contenu.page-accueil #section-caisse-personnalisation .infos-caisse .filet {
       padding: 0 80px 0 80px;
     }
   }
   
   #contenu.page-accueil #visuel-avant-section-distinction {
     background-image: url(/ressources/images/a00-distinctions-2017-g.jpg);
     background-position: center -100px;
     background-size: initial;
     background-repeat: no-repeat;
     height: 200px;
     overflow: hidden;
   }
   #contenu.page-accueil #section-distinction {
     padding-top: 40px;
     padding-bottom: 40px;
     text-align: center;
   }
     @media (min-width: 768px) {
       #contenu.page-accueil #section-distinction {
         background-position: 12% 0%;
       }
     }
     @media (min-width: 992px) {
       #contenu.page-accueil #section-distinction {
         background-position: 50% 0%;
       }
     }
   #contenu.page-accueil #section-distinction .accroche {
     margin-top: 1.5em;
     font-family: 'robotoblack', sans-serif;
     font-size: 1.875em;
     color: #4a4a4a;
     font-weight: bold;
   }
   #contenu.page-accueil #section-distinction .faits-saillants {
     margin-top: 0;
     margin-bottom: 0;
     padding-left: 0;
     font-family: 'robotoregular', sans-serif;
     font-size: 1.25em;
     color: #3e3e3e;
    /* text-transform: uppercase;*/
   }
   #contenu.page-accueil #section-distinction .faits-saillants .emphase {
     display: inline-block;
     margin-bottom: 11px;
     font-size: 1.8em;
     text-transform: none;
   }
   
   /* ----------- Option DIV ----------- */
   #contenu.page-accueil #section-distinction .faits-saillants p {
     margin: 10px 0;
     line-height: 1.2;
   }
   #contenu.page-accueil #section-distinction .faits-saillants > div {
     padding-top: 20px;
     padding-bottom: 20px;
   }
     @media (min-width: 768px) {
       #contenu.page-accueil #section-distinction .faits-saillants > div {
         padding-top: 0;
         padding-bottom: 0;
       }
     }
   #contenu.page-accueil #section-distinction .faits-saillants > div:before {
     content: "";
     width: 50%;
     height: 1px;
     position: absolute;
     top: 0;
     left: 25%;
     background-color: #cbcccc;
   }
     @media (min-width: 768px) {
       #contenu.page-accueil #section-distinction .faits-saillants > div:before {
         width: 1px;
         height: 100%;
         left: 0;
       }
       #contenu.page-accueil #section-distinction .faits-saillants > div:first-child:before {
         width: 0;
         height: 0;
       }
     }
   
   /* ----------- Option LI ----------- */
   #contenu.page-accueil #section-distinction .faits-saillants > li {
     margin: 0;
     padding: 40px 10px;
     line-height: 1.2;
     background-image: none;
     width: 33%
   }
     @media (max-width: 767px) {
       #contenu.page-accueil #section-distinction .faits-saillants > li {
         width: 100%
       }
     }
     @media (min-width: 768px) {
       #contenu.page-accueil #section-distinction .faits-saillants > li {
         padding: 10px 10px;
       }
     }
       
   #contenu.page-accueil #section-distinction .faits-saillants > li:before {
     content: "";
     width: 50%;
     height: 1px;
     position: absolute;
     top: 0;
     left: 25%;
     background-color: #cbcccc;
   }
     @media (min-width: 768px) {
       #contenu.page-accueil #section-distinction .faits-saillants > li:before {
         width: 1px;
         height: 100%;
         left: 0;
       }
       #contenu.page-accueil #section-distinction .faits-saillants > li:first-child:before {
         width: 0;
         height: 0;
       }
     }
   
   @media screen and (min-width: 360px) and (max-width: 991px) {
     #section-vitrine .bloc-connexion .panel .panel-body {
       max-width: 300px;
       margin : 0 auto;
     }
     #page.page-accueil #section-vitrine .bloc-connexion {
       max-width: 768px;
       margin: 0 auto;
     }
     #page.page-accueil #section-vitrine .bloc-connexion .panel .panel-body {
       margin : 0 auto;
     }
   }
   
   ul.ui-autocomplete.ui-widget.autocomplete-rech-caisse-accueil {
     max-height: 200px;
     overflow-y: auto;
     width: 56%;
   }
   
   @media (min-width: 1200px) {
     header .container,
     footer .container {
       width: 1180px;
     }
   }
   
   /* Pour rendre le reste de la page responsive */
   @media (max-width: 991px) {
     #page.page-accueil #zone-centrale #centre { 
       width: 100%;
     }
   }