:root {
  --blue: #517CA4;
--cassiopeia-color-primary: #517CA4;
/*--cassiopeia-color-hover: #fff;*/
  --green: #d6f2e6;
  --green-2:#84ABAC; /* fond vert foncé */
  --indigo: #6610f2;
  --purple: #614791;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --sable: #f2eee9;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #517CA4;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #345d84;
  --body-font-family: var(--cassiopeia-font-family-body, -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");
--body-line-height: 1.7rem;
}

a, a:not([class]) {
  text-decoration: none;
}
a:not([href]):not([class]), a:not([href]):not([class]):hover {
  text-decoration: none;
  cursor: auto;
}
#tip-1, #tip-16, #tip-112, #tip-117, #tip-118, #tip-119, #tip-120 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif, "Apple Color Emoji";
  font-size: 6px;
  display: none;
}
.btn-link .icon-edit {
  color: var(--white);
}
.com-content-article .icons {
  z-index: 100;
  position: relative;
}
.qx-element-button-v2 .qx-btn {
  white-space: normal;
 } 
.qx.quix canvas {
  width: 5rem;
}
/* Accès restreint : Boutons Deconnexion et Aide de Quix sur les pages du site */

.container-bottom-a  {
  grid-column: 4 / 8;
  z-index: 100;
}
.container-bottom-a .btn.jmodedit {
  display: none;
}

.bottom-a ul {
  margin-top: 0;
}
.nav-item.item-137 a {
  font-family: var(--cassiopeia-font-family-body);
  background-color: var(--blue);
  color: #FFF;
  font-size: 0.8rem;
  line-height: 1rem;
  padding: 6px;
  border-radius: 10px;
}
.container-bottom-a .logout-button .btn {
  background-color: var(--orange);
  padding: 5px 10px;
  font-size: .9rem;
}
.container-bottom-a .form-contact .qx-form-check p {
  margin-bottom: 0;
}
.container-bottom-a .form-contact .qx-form-check {
  display: block;
  min-height: 1.5rem;
/*  padding-left: 1.5em;
  margin-bottom: 0.125rem;
*/}
.container-bottom-a .btn:hover, .container-bottom-a a:hover {
  background-color: var(--cassiopeia-color-hover);
}
.pagenavigation {
  background: #d4d4d4;
  padding: .6rem;
}
.pagenavigation .btn {
  background-color: var(--gray-dark);
  padding: 15px;
}

/* ----------------------------GRILLE GRID --------------------------------- */

.website {
  display: grid;
  grid-template-columns: minmax(35px, 1fr) repeat(6, 1fr);
  grid-template-rows: 120px 1fr auto;
  /* Toute la hauteur ? */
  min-height: 100vh;
  padding: 0;
  margin: auto;
}
@media (min-width:1500px) {
  .website {
    max-width: 1400px;
  }
}

  .mca-header {
  grid-column: 1 / span 8;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(35px, 1fr) repeat(6, 1fr);
}
.mca-nav {
  grid-column: 1;
  grid-row: 2;
  background: var(--green);
  z-index: 100;
}
.main {
  grid-column:  2 / 9;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: min-content;
  grid-column-gap: 15px;
}
article {
  margin-bottom: 1rem;
}
footer {
  grid-column: 1 / -1;
  grid-row: 3;
  background: var(--green-2);
  z-index: 10;
  display: flex;
  justify-content: center;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10%;
}
@media (min-width: 576px) {
  footer {
/*    padding-left: 15%;*/
  }
}

.logo {
  grid-column: 1;
  background: var(--green);
  margin-right: 12%;
  z-index: 100;
}

.logo img {
  max-height: 100px;
}
.site-description {
  grid-column: 2 / 9;
  align-self: center;
  padding: 0 20px;
  z-index: 0;
}

h1 {
  grid-column: 1 / span 10;
  grid-row: 1;
}
.article-8 {grid-column: 2 / span 8;z-index: 10;}
.article-9 {grid-column: 2 / span 9;z-index: 10;}
.article-10 {grid-column: 2 / span 10;z-index: 10;}

.grid-10 {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-column-gap: 15px;
}
.grid-11 {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-column-gap: 15px;
}
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 15px;
}
.row-1{grid-row: 1;}
.row-2{grid-row: 2;}
.row-3{grid-row: 3;}
.row-4{grid-row: 4;}
.row-5{grid-row: ;}

.span-1-5 {grid-column: 1 / span 5;}
.span-1-6 {grid-column: 1 / span 9;}
.span-1-7 {grid-column: 1 / span 9;}
.span-1-8 {grid-column: 1 / span 9;}
.span-1-10 {grid-column: 1 / span 10;}
.span-1-11 {grid-column: 1 / span 11;}
.span-1-12 {grid-column: 1 / span 12;}
.span-2-11 {grid-column: 2 / span 11;}
.span-6-10 {grid-column: 6 / span 10;}

@media (min-width: 768px) {
.span-1-6 {grid-column: 1 / span 6;}
.span-1-7 {grid-column: 1 / span 7;}
.span-1-8 {grid-column: 1 / span 8;}
}

.container-bottom-b {
  grid-column: 9 /span 4;
  grid-row: 1;
  align-self: end;
}
.container-bottom-b p, .container-bottom-b .custom {
  margin-bottom: 0;
}
.accroche {
  grid-column: 1 / end;
  grid-row: 2;
  display: grid;
  grid-template-columns: 3px 1fr;
  grid-auto-rows: minmax(2rem, auto);
}
.accroche p {
  position: relative;
  display: inline-block;
  align-items: baseline;
  margin-bottom: 0;
  padding: 0.1rem 0;
}

i.text-sable {display: none;}

@media (min-width: 768px) {
  .accroche {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-column: 8 / end;
    grid-row: 5 / end;
    align-self: start;
    max-width: 212px;
    margin-left: 5%;
  }
  .accroche .a1 { grid-column: 1 / 3; grid-row: 1;}
  .accroche .a2 { grid-column: 2 / 14; grid-row: 2;}
  .accroche .a3 { grid-column: 3 / 7; grid-row: 3;}
  .accroche .a4 { grid-column: 4 / 16; grid-row: 4;}
  .accroche .a5 { grid-column: 3 / 9; grid-row: 5;}
  .accroche .a6 {grid-column: 2 / 14; grid-row: 6;}
  .accroche .a7 { grid-column: 1 / 6; grid-row: 7;}
  .accroche p {  text-align: center;}
  i.text-sable {display: inline-block; line-height: 27px;}
}


.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2,
.col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
padding-left: 0;
}

.ordonner .qx-elements-wrap:first-child {
  display: flex;
  flex-direction: column;
}
.ordonner .qx-elements-wrap  .qx-element-wrap:first-child {
  order: 2;
}
.ordre-inverse {
  flex-direction: column-reverse;
}

/* Safari and Chrome */
@-webkit-keyframes moveOpen
  {
  from {-webkit-transform: translate(0,-400px);}
  10% {-webkit-transform: translate(0,20px);}
  12% {-webkit-transform: translate(0,32px);}
  16% {-webkit-transform: translate(0,40px);}
  to {-webkit-transform: translate(0,400px);}
}

/* Page transform: translate */

article, aside, .header {
animation: expand .5s ease forwards;
transition: all .5s ease;
}
h1 {
  width: 100%;
  animation: slideIn 1s ease-in-out forwards;
}
.accroche {
  width: 100%;
  animation: slideUp 1s ease-in-out forwards;
}

@keyframes slideIn {
  0% {
    transform: translateX(-20px) scale(.5);
  }
  100% {
    transform: translateX(0px) scale(1);
  }
}

@keyframes slideUp {
  0% {
    transform: translateX(-300px);
  }
  100% {
    transform: translateX(0px);
  }
}

@keyframes expand {
  0% {
    transform: translateX(-1200px);
  }
  100% {
    transform: translateX(0px);
  }
}

/* ---------------------------- TYPOGRAPHIE template ---------------------------*/


.mca-header {
  font-family: 'Kodchasan', sans-serif;
  font-weight: 500;
  color: var(--blue);
  font-size: 1.5rem;
  line-height: 1.6rem;
}
.mca-header p, .mca-header a {
  font-size: 1.3rem;
  line-height: 1.5rem;
  margin-bottom: 0;
  font-weight: 400;
}
.mca-header span {
  white-space: nowrap;
}
@media (min-width: 768px) {
  .mca-header {
    color: var(--blue);
    font-size: 2rem;
    line-height: 2rem;
  }
  .mca-header p {
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 0;
  }
}
.navbar {
  padding: 0;
  position: fixed;
  width: 12%;
}
@media (min-width: 992px) {
  .navbar {
    align-items: self-start;
    position: relative;
    width: 100%;
  }
}
.navbar-toggler {
  padding: 0;
  border: none;
  margin: 0 auto;
}
.collapse.show {
  position: absolute;
  top: 2rem;
  display: block;
  width: 310px;
  background-color: var(--green);
}
.collapse.show .nav-link {
  width: 300px;
}

.s-titre {
  padding-left: 2rem;
}
.s-titre::after {
  content: "—";
  margin-right: 0.5rem;
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
}
.text-list ul {
  list-style: none;
  padding-left: 0.8rem;
    margin-top: 0;
}
.text-tiret ul {
    list-style: none;
    padding-left: 0rem;
}
@media (min-width: 768px) {
  .text-list ul {
    list-style: none;
    padding-left: 1rem;
  }
}
.mt-0 ul {
  margin-top: 0;
}
.text-tiret {
  list-style: none;
  padding-left: 0;
}

.text-list li {
  position: relative;
  padding-left: 1.5rem;
}
.text-tiret li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.5rem;
}
.text-list li::before {
  position: absolute;
  left: 0;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 0.6rem;
  line-height: 25px;
  content: "\f111";
  color: #517CA4;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.text-tiret li::before {
  position: absolute;
  left: 0;
  font-family: 'Kodchasan', sans-serif;
  font-size: 2rem;
  line-height: 16px;
  font-weight: 300;
  content: "–";
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.inter-reduit p {
  line-height: 1.2rem;
}


/* ----------------------------   F O O T E R ---------------------------------- */

footer .jmodedit {
  display: none;
}

footer {
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.2rem;
  margin-bottom: 0;
}

footer #mod-custom120 {
  display: flex;
  margin-bottom: 0;
}
@media (min-width: 768px) {
  footer #mod-custom120 {
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }
}
  footer .footer-col-1 {
    padding-right: 10px;
    margin-bottom: .3rem;
  }

footer .nav-item a {
  color: #000000;
  margin-bottom: 7px;
}
footer .nav {
  flex-direction: column;
  margin-bottom: .4rem;
  text-align: left;
}
.footer p {
    text-align: left;
    line-height: 1.2rem;
      margin-bottom: 8px;
  }

footer a {
  display: block;
  color: #000000;
  padding: 0;
  text-align: left;
  margin-right: .8rem;
    line-height: 1.2rem;
}
footer a:hover, footer .nav-item a:hover {
  text-decoration: none;
}
.footer-icones .qx-elements-wrap {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 0;
}
.footer-icones .qx-element-wrap {
  width: auto;
}


footer i {
  font-size: 1.8rem;
}
.fa-facebook-square::before {
  color: #3B5998;
}
.fa-linkedin::before {
  color: #007BB5;
}
.fa-facebook-square:hover::before {
  color: rgba(255, 255, 255, 0.7);
}
.fa-linkedin:hover::before {
  color: rgba(255, 255, 255, 0.7);
}


/* ----------------———————————————————-- TYPO ------------—————————————————————---------*/

body {
  font-family: var(--cassiopeia-font-family-body);
  font-weight: var(--cassiopeia-font-weight-normal);
}
.fa-phone-square-alt, .fa-envelope-square {
  font-size: 1.85rem;
}

a {
  color: var(--blue);
}
.btn {
  background: var(--blue);
  border-radius: 10px;
  color: #FFFFFF;
}
.btn:hover, .btn:focus {
  background: var(--green-2);
  color: #FFFFFF;
  outline: none;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: var(--cassiopeia-font-family-headings);
  font-weight: var(--cassiopeia-font-weight-headings);
  text-align: left;
}
h1, .h1 {font-size: 2rem; margin-bottom: 1rem;}
h2, .h2 {font-size: 1.4rem; font-weight: 500; margin-bottom: 1rem;}
h3, .h3 {font-size: 1.1rem;}

h4, .h4, h5, h6 {
  font-family: var(--cassiopeia-font-family-body);
  font-weight: var(--cassiopeia-font-weight-normal);
  font-size: var(--bs-body-font-size);;
}

p {
  margin-bottom: 0.9rem;
  font-weight: var(--cassiopeia-font-weight-normal);
}
b, strong {
  font-weight: 500;
}



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

.f-vert {
  background: var(--green);;
}
.f-bleu {
  background: var(--blue);
}
.f-bleu-2 {
  background: rgba(81, 124, 164, 0.25);
}
.f-sable {
  background: #f2eee9;
  /* background: center / contain url(../img/cailloux.jpg); */
}

.text-blanc {
  color: #FFFFFF;
  opacity: .9;
}
.text-bleu {
  color: var(--blue);
}
.text-vert {
  color: var(--green-2);
}
.text-violet {
  color: var(--purple);
}
.text-orange, .text-orange h2{
  color: var(--orange);
}
.text-sable {
  color: var(--sable);
}
.bleu li::before {
  color: var(--blue);
}
.vert li::before {
  color: var(--green-2);
}
.violet li::before {
  color: var(--purple);
}
.orange li::before {
  color: var(--orange);
}
.habillage {
  grid-column: 1;
  grid-row: 1 / end;
  margin: 0 auto;
  display: block;
  width: 100%;
  height: auto;
  background: var(--green);
  -webkit-filter: drop-shadow(0px 0px 6px rgba(43,68,61,.6));
  filter: drop-shadow(0px 0px 6px rgba(43,68,61,.6));
  z-index: 1;
}
.i-shadow {
  -webkit-filter:drop-shadow(0px 0px 5px rgba(0,0,0,.3));
  filter: drop-shadow(0px 0px 5px rgba(0,0,0,.3));
}
.i-shadow img {
  border-radius: .5rem;
}
.float-left.i-shadow {
  margin-right: 1.7rem;
  margin-bottom: 1rem;
  padding-right: 0;
}
.encadre {
  border-radius: 1rem;
  -webkit-filter:drop-shadow(0px 0px 7px rgba(0,0,0,.2));
  filter: drop-shadow(0px 0px 7px rgba(0,0,0,.2));
}
.encadre h2 {
  padding: 0;
  text-align: center;
}
.encadre h2::after {
  content: "";
  border-bottom: solid 2px var(--blue);
  display: block;
  padding-top: 1rem;
  margin: 0 1rem;
}
.encadre.f-bleu h2::after {
  border-bottom: solid 2px var(--white);
}
.encadre img {
  width: 85%;
}
@media (min-width: 576px) {
  .encadre img {
    width: 65%;
  }
}
@media (min-width: 992px) {
  .encadre img {
    width: 85%;
  }
}
.icon-bar {
	width: 2rem;
	height: 2px;
	background-color: var(--blue);
	display: block;
	transition: all 0.2s;
	margin-top: 4px
}
.navbar-toggler .top-bar {
  transform: rotate(45deg);
  transform-origin: 36% 10%;
}

.navbar-toggler .middle-bar {
  opacity: 0;
  width: 1.5rem;
}

.navbar-toggler .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 8% 90%;
}

.navbar-toggler.collapsed .top-bar {
  transform: rotate(0);
}

.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
}

.navbar-toggler.collapsed .bottom-bar {
  transform: rotate(0);
}


/* --------------------------------Navigation-------------------------------- */


.cd-side-navigation {
  z-index: 2000;
  overflow-y: auto;
  max-height: 289px;
}
.cd-side-navigation::before {
  width: -webkit-calc(100% - 4px);
  width: calc(100% - 4px);
}
@media (min-width: 992px) {
  .cd-side-navigation {
    max-height:none;
  }
  .cd-side-navigation::before {
    width: auto;
  }
}

.cd-side-navigation ul {
  font-family: 'Kodchasan', sans-serif;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-left: 0.1rem;
  list-style: none;
}
.cd-side-navigation li {
  width: -webkit-calc(100% - 4px);
  width: calc(100% - 4px);
  padding: 0;
}

.cd-side-navigation a {
  font-size: 0.9rem;
  line-height: 1.2rem;
  color: var(--blue);
  display: block;
  position: relative;
  padding: 0.55rem 0 0.55rem 1rem;
  -webkit-transition: background-color 0.2s, color 0.2s;
  -moz-transition: background-color 0.2s, color 0.2s;
  transition: background-color 0.2s, color 0.2s;
  text-decoration: none;
  font-weight: 500;
}
.cd-side-navigation a::after {
  /* 4px line to the right of the item - visible on hover */
  content: '';
  position: absolute;
  top: 0;
  right: -4px;
  height: 100%;
  width: 4px;
  background-color: var(--blue);
  opacity: 0;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
  pointer-events: none;
}
.cd-side-navigation a:hover {
  background-color: var(--green-2);
  color: var(--green);
  text-decoration: none;
}
.mod-list li a:hover {
  /* reset style cassiopeia */
  text-decoration: none;
}
.cd-side-navigation a:hover::after, .cd-side-navigation li.active a::after {
  opacity: 1;
}
.cd-side-navigation li.active a, .cd-side-navigation li.active a:hover {
  background: rgba(132, 171, 172, 0.3);  
  pointer-events: none;
  text-decoration: none;
}
.cd-side-navigation li:nth-of-type(2) a::after {
  background-color: #d35657;
}
.cd-side-navigation li:nth-of-type(3) a::after {
  background-color: #343943;
}
.cd-side-navigation li:nth-of-type(4) a::after {
  background-color: #e4b162;
}
@media only screen and (min-width: 480px) {
  .cd-side-navigation {
    /* width: 94px; */
  }
}