/*
Theme Name: Conte en Balade
Author: colégram studio
Author URI: https://colegram.studio
Description: Conte en Balade theme
Version: 1.0
Text Domain: conteenbalade
*/
/************************
*         FONTS         *
*************************/
/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3d92c7");
@font-face {
  font-family: "Bellfort-Thin";
  src: url('fonts/BellfortThin/font.woff2') format('woff2'), url('webFonts/BellfortThin/font.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: "Bellfort-Light";
  src: url('fonts/BellfortLight/font.woff2') format('woff2'), url('webFonts/BellfortLight/font.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: "Founders-Light";
  src: url('fonts/Founders/founders-grotesk-text-web-light.woff') format('woff'), url('fonts/Founders/founders-grotesk-text-web-light.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: "Founders-Light-Italic";
  src: url('fonts/Founders/founders-grotesk-text-web-light-italic.woff') format('woff'), url('fonts/Founders/founders-grotesk-text-web-light-italic.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: "Founders-Medium";
  src: url('fonts/Founders/founders-grotesk-text-web-medium.woff') format('woff'), url('fonts/Founders/founders-grotesk-text-web-medium.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: "Founders-Medium-Italic";
  src: url('fonts/Founders/founders-grotesk-text-web-medium-italic.woff') format('woff'), url('fonts/Founders/founders-grotesk-text-web-medium-italic.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon/fonts/icomoon.eot?2oz55l');
  src:  url('fonts/icomoon/fonts/icomoon.eot?2oz55l#iefix') format('embedded-opentype'),
    url('fonts/icomoon/fonts/icomoon.ttf?2oz55l') format('truetype'),
    url('fonts/icomoon/fonts/icomoon.woff?2oz55l') format('woff'),
    url('fonts/icomoon/fonts/icomoon.svg?2oz55l#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

[class^="iconrs-"], [class*=" iconrs-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[class^="iconrs-picto"], [class*=" iconrs-picto"] { display: block; color: var(--saison);}
.iconrs-facebook, .iconrs-instagram { font-size: 1.1rem; }
.iconrs-ticket, .iconrs-media { font-size: 1.3rem; margin-bottom: 2rem; }

.iconrs-doc:before { content: "\e906"; font-size: 1.5rem; }
.iconrs-brochure:before { content: "\e911"; font-size: 1.6rem }
.iconrs-facebook:before { content: "\e900"; }
.iconrs-instagram:before { content: "\e901"; }
.iconrs-sncb:before { content: "\e902"; color: var(--bleu); }
.iconrs-pin:before { content: "\e903"; }
.iconrs-media:before { content: "\e904"; }
.iconrs-ticket:before { content: "\e905"; }
.iconrs-picto_ext:before { font-size: 3.6rem; content: "\e907"; }
.iconrs-picto_int:before { font-size: 3.6rem; content: "\e909"; }
.iconrs-picto_pmr:before { font-size: 4.2rem; content: "\e90b"; }
.iconrs-picto_pmra:before { font-size: 5.3rem; font-weight: light; content: "\e90c"; }
.iconrs-picto_repas:before { font-size: 4.5rem; content: "\e90e"; }
.iconrs-picto_repli:before { font-size: 4.5rem; content: "\e90f"; }
.iconrs-picto_frnl:before { font-size: 4rem; content: "\e908"; }
.iconrs-picto_lds:before { font-size: 5.3rem; font-weight: light; content: "\e90a"; }
.iconrs-picto_public:before { font-size: 4.2rem; content: "\e90d"; }
.iconrs-picto_terrain:before { font-size: 4.2rem; content: "\e910"; }


/*****************************
        GLOBAL 
*****************************/
:root {
    --opa1: 1;
    --opa07: 0.7;
    --opa05: 0.5;
    --opa02: 0.2;
    --opa01: 0.1;/*
    --saison: rgba(138, 65, 213, var(--opa1));*/
    --bleu: #233282;
    --bleu-rgb: 35, 50, 130;
    --bleuleger: #EEF0FB; 
    --bleuleger-rgb: 238, 240, 251;
    --bleulegerX2: #f2f4ff; 
    --gris: rgba(38, 45, 78, 1); /* rgba(45, 45, 45, 1) #2D2D2D  */
    --grisleger: rgba(216, 216, 216, 1); /* #D8D8D8 */
    --blanc: #ffffff;
    --creme: #f8f8f8;
    --transp: transparent;
    --balise: yellow;
    --gap: 35px;
    --gapX2: calc(var(--gap)*2);
    --pad: 2.5rem;
    
      --base:              #def0ff;
      --bg-blend:          multiply;
      --blur:              0px;
      --fg-blend:          lighten;
      --opacity:           1;
      --spacing:           0px;
}
::selection { color: var(--blanc); background-color: var(--bleu); }

* { 
  box-sizing: border-box; 
}

html { font-size: 100%; scroll-behavior: smooth; } /* smooth scroll*/
html,
body {
    font-family: 'Founders-Light', sans-serif;
    /*box-sizing: border-box;*/
    margin: 0px;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 300;
    background: var(--blanc);
    color: var(--bleu);
}
/* em, i { font-family: 'Founders-Light-Italic', sans-serif} */
strong, b { font-family: 'Founders-Medium', sans-serif; font-weight: bold;}
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border-style: none;
}
hr {
    height:1px;border-width:0;color:var(--bleu);background-color:var(--bleuleger)

}

.sticky { /* sticky elements */
  position: -webkit-sticky;
  position: sticky;
  top: 2rem;
}
a {/*
    transition:all .2s linear;
    -moz-transition:all .2s linear;
    -webkit-transition:all .2s linear;
    -o-transition:all .2s linear;*/
    transition: 0.2s;
    text-decoration:none;
    color:inherit;
}
a:focus {
  outline: none;
}
p a, span a {
  text-decoration: none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  padding-bottom: 0;
}
p a:hover, span a:hover {
  color: var(--saison);
  border: 0;
}
.asterisque {
  font-size: 0.75rem
}
/*   h3 { margin-bottom: 10px} TEJ */
h1, h2, #cta-contacts h3, h4, .filtres-liste li.sf-level-0 {
    font-family: 'Bellfort-Thin', Arial, sans-serif;
}
.navigation {
    font-family: 'Bellfort-Light', Arial, sans-serif;
}
h1 {
    font-size: 2.6rem;
    /*text-transform: uppercase;*/
}
h2 {
    font-size: 1.9rem;
}
h4, .filtres-liste li.sf-level-0 {
  font-size: 1.3rem;
  text-transform: uppercase;
}
small {
  font-size: 0.75rem;
}



/*****************************
           SANDBOX !!!! 
*****************************/
.balise { background: var(--balise); }
.balise2 { background: var(--bleulegerX2); }



/*****************************
          CONTENU PAGE 
*****************************/
.contenu h2, .contenu h4, .contenu h5 {
  color: var(--bleu);
} 
.contenu h4 {
  font-size: 24px;
}
.contenu h2,.contenu h3, h4 {
  margin-bottom: 24px;
}
.contenu p {
  margin-bottom: 1.3rem;
}
.contenu ul {
  list-style: circle;
  list-style-position: inside;
  margin-left: 15px; 
}
.contenu p a {
  text-decoration: none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  padding-bottom: 0;
}
.contenu a:hover {
  color: var(--saison);
  border-bottom: 0;
}
.contenu img { border-radius: 5px; }
figure img { border-radius: 5px!important }
.image-large {margin-bottom: var(--gap);}
.logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  column-gap: var(--gap);
  margin-top: 20px;
}
.logos__elmt img {
  display: block;
  /* Make sure max-width is added */
  max-width: 100%;
  width: 130px;
  height: 75px;
  object-fit: contain;
  margin-bottom: var(--gap);
}
  /*
  .logos__elmt img[src$=".jpg"],
  .logos__elmt img[src$=".png"] {
    mix-blend-mode: multiply;
  }  */
.logos__elmt a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.logos a img {
transition: transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.logos a:hover img {
  transform: scale(1.05)
}

.colonnes-duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: var(--gap);
  margin-bottom: 1.5rem;
}
.colonnes-duo h2,
.highlight h2, .highlight2 h2 {
  color: var(--bleu);
}

.highlight, .highlight2 {
  border:1px dotted var(--saison); 
  border-radius: 5px; 
  padding: var(--gap);
  margin-bottom: var(--gap);
}
.highlight2 {
  padding: 20px; 
}




/*****************************
  PROGRAMME > FILTRES  
*****************************/
label.togg {
  display: block;
}
label.togg:hover {
  cursor: pointer;
}
.filtres input[type="checkbox"]  {
 display: none; /* hide the checkboxes */
}
@media (max-width: 1199px) {
  .filtres .hide {
    width: 100%;
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: all 0.5s ease;
  }
  .filtres input[type="checkbox"]:checked + .hide {
    height: 150px; /* any arbitrary height but best at the minimum initial height you would want. */
    display: table;
    opacity: 1;
    padding-top: 1rem;
  }
  .filtres div h5 {
    display: none;
  }
}
@media (min-width: 1200px) {
  label.togg {
    display: none;
  }
  .filtres .hide {
    width: 100%;
    display: table;
    height: 150px; /* any arbitrary height but best at the minimum initial height you would want. */
    overflow: hidden;
    transition: all 0.5s ease;
  }
  .filtres input[type="checkbox"]:checked + .hide {
    height: 0;
    opacity: 0;
    display: block;
  }
}
/**************************************/
/* INPUT CHECKBOX RADIO filtres-liste */
.filtres-liste input[type="checkbox"],
.filtres-liste input[type="radio"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.filtres-liste h4, .filtres-liste li.sf-level-0 {
  margin-bottom: 0;
  padding: 0.4rem 0 0.3rem 0;
  border-bottom: 1px solid var(--bleu);
}
.filtres-liste label, .filtres-liste li.sf-level-0 label {
  position: relative;
  display: block;
  padding: 0 0 0 1em;
  /*  height: 1em;  */
  line-height: 1.1;
  cursor: pointer;
}
.filtres-liste label::before,
.filtres-liste label::after, 
.filtres-liste li.sf-level-0 label::before, 
.filtres-liste li.sf-level-0 label::after {
  position: absolute;
  top: 0.3rem;
  left: 0;
  display: block;
  width: 0.4em;
  height: 0.4em;
}
.filtres-liste label::before,
.filtres-liste li.sf-level-0 label::before {
  content: " ";
  border: 2px solid var(--bleu);
  border-radius: 20%;
}
/* Checkbox */
.filtres-liste input[type="radio"] + label::after,
.filtres-liste input[type="checkbox"] + label::after {
  content: "•";
  color: var(--saison);
  font-size: 80%;
  left: 0.15rem;
  line-height: 0.75;
  text-align: center;
}
/* Radio */
.filtres-liste input[type="checkbox"] + label::before,
.filtres-liste input[type="radio"] + label::before {
  border-radius: 50%;
}/*
.filtres-listexx input[type=checkbox] + label::after,
.filtres-listexx input[type=radio] + label::after {
  content: " ";
  top: 0.08em;
  left: 0.08em;
  width: 0.35em;
  height: 0.35em;
  background: var(--saison);
  border:  2px solid var(--blanc);
  border-radius: 50%;
} */
/* :checked */
.filtres-liste input[type="checkbox"]:checked + label::before,
.filtres-liste input[type="radio"]:checked + label::before {
  background: var(--blanc);
  border-color: var(--saison);
  color: var(--saison);
}
.filtres-liste input[type="checkbox"]:checked + label,
.filtres-liste input[type="radio"]:checked + label {
  color: var(--saison)
}
.filtres-liste input[type="checkbox"] + label::after,
.filtres-liste input[type=radio] + label::after {
  transform: scale(0);
}
.filtres-liste input[type="checkbox"]:checked + label::after,
.filtres-liste input[type=radio]:checked + label::after {
  transform: scale(1);
}
/* Transition */
.filtres-liste label::before,
.filtres-liste label::after {
  transition: .25s all ease;
}



/*****************************
          PAGINATION 
*****************************/
.pagination {
  grid-column: 1/-1;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
/*****************************
           GRILLE 
*****************************/
.grid {
    display: grid;
    grid-template-columns: 65px repeat(12, 1fr) 65px;
    grid-gap: var(--gap);
}
.grid-kid {
    grid-column: 2/-2;
}
.grid-full-kid {
    grid-column: 1/-1;  /*
    padding: 0 var(--gap);  */
}
.grid2 {
  z-index:1;
    display: grid;
    grid-template-columns: auto repeat(12,1fr) auto;
    grid-gap: 30px
}
.grid-grand-kid {
  grid-column: 1/-2;
}
.grid-grand-kid-left {
  grid-column: 2/-1;
}
.box:nth-child(even) {
    background: #eeeeee;
    font-size: 80%;
}

.box:nth-child(odd) {
    background: lightgray;
    font-size: 80%;
}

/*****************************
           NAVIGATION 
*****************************/
.headernav {
  border-top: 4px solid var(--saison);
  display: grid;
  grid-template-areas: 
  "logo  logo  logo  logo  nav  nav  nav  nav  nav  nav  nav  nav  nav  .";
}
.logo {
  background: var(--blanc);
  grid-area: logo;
  border-right: 1px solid var(--grisleger);
  padding-top: var(--pad);
  padding-bottom: var(--pad);
  padding-left: calc(65px + var(--gap));
  /* padding-bottom: 5vh;  */
}
.page-accueil .logo { border-right: 0; ; }
.page-mediation .logo, .page-sur-mesure .logo { background: var(--bleuleger); }
.page-mediation .sidebar-coloree, .page-sur-mesure .sidebar-coloree { background: var(--bleuleger); }
.logoceb, svg {
  transform: translateY(0%);
  transition: transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);}
  .logoceb:hover, .main svg:hover { 
    transform: translateY(1%) scale(1.05);}
  .logoceb, .logoceb .typoceb { fill: var(--bleu); }
  .logoceb .fil { fill: var(--saison); }
  
.pathx { stroke: var(--saison)}
.path {
  stroke: var(--saison);
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: dash 10s linear forwards;
}
.path2 {
  stroke: var(--saison);
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: dash 25s linear forwards;
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}


.navigation {
  grid-area: nav;
  padding-top: calc(1.4rem + var(--pad));
  font-size: 1.5rem;
  display: grid;
  grid-template-columns: 7fr 2fr; 
  text-transform: uppercase;
}
    .menu {
        display: flex;
        justify-content: space-between;
        align-content: flex-start;
        padding-right: calc(var(--gap) * 3);
    }
    /* anim hover line */
    .menu a {
      text-decoration: none;
      background-image: linear-gradient(var(--saison), var(--saison));
      background-position: 0% 100%;
      background-repeat: no-repeat;
      background-size: 0% 2px;
      transition: background-size cubic-bezier(0,.5,0,1) 0.3s;
      padding-bottom: 2px;
    }
    .menu a:hover,
    .menu a:focus,
    .menu a.actif {
      text-decoration: none;
      background-size: 100% 2px;
      padding-bottom: 2px;
    }
    .reseaux {
        display: flex;
        justify-content: flex-end;
        align-content: flex-start;
        font-size: 1.2rem;
        line-height: 1.5;
    }
        .reseaux li:not(:last-of-type) {
            padding-right: 10px;
        }
        .reseaux li a{
            border: 2px solid var(--saison);
            border-radius: calc(var(--gap) / 7);
            color: var(--bleu);
            padding: 3px 5px;
        }
        .reseaux li a.actif, .reseaux li a.actif-medias {
          border: 2px solid var(--bleu);
          background: var(--bleu);
          color: var(--blanc);
        }
        .reseaux li.txt a {
          padding: 3px 10px;
        }
        .reseaux li a:hover {
            background: var(--bleu);
            border: 2px solid var(--bleu);
            color: var(--blanc);
            fill: var(--blanc)!important;
        }
    /* NAVIGATION MENU MOBILE */
    .mobile-menu {
      visibility: hidden;
      position: fixed!important;
      z-index: 99999;
      display: block;
      width: 100%;
      position: relative;
      padding: 0;
      height: 50px;
      line-height: 50px;
      background: var(--blanc);
      cursor: pointer;
      border-bottom: 1px solid var(--saison);
    }
    
    .mobile-menu a.dropdown-link{
      color: var(--bleu);
      display: block;
      height: 50px;
      padding: 0 20px;
    }
    .mobile-menu-bar {
        display:flex; 
        justify-content: space-between;
        color: var(--blanc);
        margin: 0;
        padding: 0;
        height: 50px;
    }
    .mobile-dropdown {
      display: none;
      background: var(--blanc);
      min-width: 125px;
      position: relative;
      z-index: 100;
      margin: 0;
      padding: 0;
      border-bottom: 1px solid var(--bleu)
    }
    .mobile-dropdown li{
      text-align: center;
      padding: 0;
      height: auto;
      border-bottom: 1px solid var(--grisleger);
    }
    .mobile-dropdown li ul{
        padding: 0 0;
        display: flex;
        justify-content:space-between;
        list-style: none;
        text-transform: uppercase;
        background: var(--bleuleger);
    }
    .mobile-dropdown li ul li {
        padding:0;
        margin:0;
        line-height: 1.1;
        flex: 1 1 50px;
        border-bottom: 0;
    }
    .mobile-dropdown li ul li.active a {
        color: var(--balise);
        font-weight: bold;
    }
    .mobile-dropdown li:last-child {
        border-bottom: 0;
    }
    .mobile-dropdown li ul li a {
      color: var(--bleu);
      font-size: 1rem;
        text-decoration: none!important;
    }
    .mobile-dropdown li a{
      font-family: 'Bellfort-Thin', Arial, sans-serif;
      font-size: 1.5rem;
      padding: 0 var(--gap);
      color: var(--bleu);
      display: block;
      height: 40px;
      line-height: 40px;
      text-decoration: none;
    }
    .mobile-dropdown li a:hover{
      text-decoration: none;
      background: var(--bleu);
      color: var(--blanc);
    }
    a.trigger {
      height: 50px;
      content: '';
      width: 41px;
      position: relative;
      margin-right: 20px;
    }
    a.trigger:before {
      content: '';
      height: 2px;
      width: 24px;
      background: var(--saison);
      top: 24px;
      margin: 0 auto;
      left: 9px;
      position: absolute;
      display: inline-block;
    }
    a.trigger:after {
      content: '';
      width: 2px;
      height: 24px;
      background: var(--saison);
      position: absolute;
      display: inline-block;
      left: 50%;
      top: 13px;
    }        

/*****************************
*       CONTENU BALADE       *
*****************************/
.overlay {
  display: none;
  z-index: 10;
  grid-column: 3/6;
  grid-row: 1/4;
  background: red;
  opacity: 0.45;
}

.page {
  display: grid;
  grid-gap: var(--gap);
  grid-template-areas: 
  "sidebarl sidebarl  sidebarl  sidebarl  main  main  main  main  main  main  main  main  main  main";
}
.main2 {
  grid-area: main;
  display: grid;
  grid-gap: var(--gap);
  grid-template-columns: repeat(9, 1fr) 65px;
  padding: 0 0 2.5rem 0;
}
.sidebar-coloree {
  background: var(--blanc);
  grid-area: sidebarl;
  display: grid;
  grid-gap: var(--gap);
  grid-template-columns: 65px repeat(3, 1fr);
  padding-right: var(--gap);
  border-right: 1px solid var(--grisleger);
}
.no-pad {
  padding: 0;
}
.evtmt {
      /* grid-template-rows: auto; */
      /*grid-template-rows: auto auto 1fr 1fr 1fr auto auto;
      height: 110vh; grid-auto-rows: 20px;*/
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: var(--gap);
  grid-template-areas: 
  "sidebarl  main  main  illu"
  "sidebarl  back  back  back";
}
.sidebarr {grid-area:illu}
.retournav {grid-area: back}
.sidebarl {
  grid-area: sidebarl;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border-right: 1px solid var(--grisleger);
  padding-right: var(--gap);
  padding-bottom: 5vh;
}

.main {
  grid-area: main;
  display: grid;
  grid-template-columns: 1fr 5fr;
      grid-template-rows: minmax(min-content,min-content) minmax(min-content,min-content) minmax(min-content,min-content);
  grid-template-areas:  
  "tt  tt"
  "pt  tx"
  "ip  ip";
}
  .titre {grid-area: tt;}
  .pictos {grid-area: pt;}
  .texte {grid-area: tx;}
  .conteurses-lieu {grid-area: cl;}
  .resume {grid-area:rs;}
  .info-plus {grid-area: ip;}

        h5 {
            text-transform: uppercase;
        }
        .info-pratiques {
            padding-bottom: 5vh;
        }
        .infos-pratiques h5 {
            font-size: .7rem;
            border-bottom: 1px solid var(--saison); color: var(--saison);
            padding-bottom: 2px;
            margin-bottom: 5px;
        }
        .infos-pratiques h5:not(:first-of-type) {
            margin-top: 1rem;
        }
            .infos-pratiques ol li {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                border-bottom: 1px solid var(--saison);
                padding: 0.5rem 0;
                color: var(--bleu);
            }
            ol li a {
                border: 0!important;
            }
            .infos-pratiques ol li:last-child {
                border-bottom: 1px solid var(--saison);
                margin-bottom: 1.5rem;
            }
            .horaires strong {
                text-transform: uppercase;
            }
            .horaires .h {
                font-weight: normal
            }
        .prix, .duree, .transports {
            margin-top: 1rem;
        }
        .rdv {
            border-top: 0px dotted var(--bleu);
            margin-top: 1rem;
        }
        .bonus {
            border-top: 1px dotted var(--bleu);
            margin: 1rem 0;
            padding-top: 0.5rem;
        }
        .infos-pratiques a, .conteurses-lieu a {
          border-bottom-width: 1px;
          border-bottom-style: solid;
          padding-bottom: 0;
            text-decoration: none;
        }
        .transports > a, .transports p a, .conteurses-lieu .lieu a {
            border: 0;
        }
    .lieu .pin, .pin {
        fill: var(--bleu);
        transform: translateY(0%);
        transition: transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
    }
    .lieu:hover .pin {
        fill: var(--saison);
        transform: translateY(5%) scale(1.3);
    }
        .infos-pratiques a:hover, .conteurses-lieu a:hover {
            color: var(--saison)
        }
            .transports {
                  line-height: 1.4;
            }
            .num-stib {
              border: 1px solid var(--bleu);
              color: var(--bleu);
              display: inline-block;
              font-size: 0.7rem;
              height: 1.7em;
              line-height: 1.4;
              padding: 0 2px 0px 2px;
              text-align: center;
              text-transform: uppercase;
              width: 1.7em;
              vertical-align: bottom;
            }
            .num-stib:hover {
              cursor: normal;
            }
            .square-rounded {
              border-radius: 4px;
              background: var(--bleu);
              color: var(--blanc)
            }
            .circle {
              border-radius: 50%;
            }
    .evtmt .titre {
        grid-template-rows: fit-content(3em);
            /* repeat(2, auto);
            /* grid-template-rows: minmax(auto,3em) minmax(auto, auto);*/
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        margin-bottom: 1rem;
    }
        .evtmt .titre h1 {
            color: var(--saison);
            line-height: 1;
        }
        .evtmt .titre h1:first-of-type {
            grid-column: span 6;
        }
        .evtmt .titre h1:last-of-type {
            grid-column: span 5;
        }
        .evtmt .titre .espacetitre {
            grid-column: span 1;
            grid-row:2;
        }
    .pictos {
        flex-direction: row;
    }
    .conteurses-lieu {
        padding: 0;
        font-size: 1.1rem;
        line-height: 1.2;
        margin-bottom: 2rem;
    }
    .conteurses {
        margin-bottom: 4px;
    }
    .conteurses span {
        font-style: italic;
    }
    .commune {
        color: var(--bleu);
        font-size: 0.9rem;
        text-transform: uppercase;
    }
    .resume, .contenu {
        color: var(--gris);
        padding: 0;
        font-size: 1.1rem;
    }
    .resume p {
        margin-bottom: 0.85rem;
    }
    .info-plus {
        color: var(--gris);
        border-top: 1px dotted var(--saison);
        padding-top: 1rem;
        margin-top: 1rem;
    }
    .info-plus strong {
        font-weight: lighter;
        color: var(--saison)
    }
    .illu {
      background: lightgoldenrodyellow;
        margin-bottom: 1rem;
    }
    .retournav {
      align-self: flex-end;
      text-align: right;
      margin: 3rem 0;
    }

/*******************************
            ACCUEIL
********************************/
.page-accueil > main {
    background: var(--creme);
}
.page-accueil > main > section {
    padding-top: var(--pad);
    padding-bottom: var(--pad);
}
.presentation, .presentation-autre {
    grid-column: 1/-1;
    background: var(--bleu);
    background-size: cover;
    height: 635px;
    align-items: center;
}
.presentation-autre {
  height: 400px!important;
}
.presentation-autre > .description {
        display: none!important;
    grid-column: 8/-2;
    color: var(--blanc);
    background: var(--bleu);
    border-radius: 20px;
    padding: 40px 60px;
    display: flex;
    align-items: center;
}
.presentation > .description {
    grid-column: 8/-2;
    color: var(--blanc);
    opacity: 0.8;
    border-radius: 20px;
    padding: 40px 60px;
    display: flex;
    align-items: center;
   /* z-index: 2;  */
}
.presentation > .cheminis {
/*  z-index: 3;  */
    top: 23vh;
    right: 0;
    position: absolute;
    width: 100%;
}/*
.cheminis svg {
  width:  auto;
  height: auto;
} */

/* LIEN DIV ENTIER */
.card, .card2, #cta-contacts article {
    position: relative;
    /*transition: 0.2s;*/
    transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 320ms;
}
#cta-contacts .reservation:hover, #cta-contacts .medias:hover {
  background: var(--bleu);
  color: var(--blanc);
}
.card:hover,.card2:hover {
    transform: translateY(-10px);
}
.card2:hover h2 {
  color:var(--bleu)
}
article .main-link::before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        background-color: transparent;
        transition: all 0.5s ease;
    }
    article .main-link:hover::before,
    article .main-link:focus::before {
        /*background-color: rgba(255, 255, 255, 0.5);*/
        transition: all 0.2s ease;
    }
    article .other-link {
        position: relative;
        z-index: 11;
    }
  .passif {
    border: 1px solid var(--gris)!important;
  }
  .passif h2 {
    color: var(--gris)!important;
  }
  .passif .btn-plus {
    border: 1px solid var(--gris);
    color: var(--gris);
  }
  .passif p {
    color: var(--gris);
  }
  .passif .pin {
    fill: var(--gris)
  }
  .passif .dates {
      border-color: var(--gris);
  }
  .passif img {
  filter: grayscale(1);
  }
/*
.info >*:not(:nth-child(4))
{
    background-color: red;
    display:flex;
    justify-self: flex-start;
}
.info >*:nth-child(4) 
{
    background-color: blue;
    display:flex;
    justify-self: flex-end;
    align-self: flex-end;
}*/
.card h2, .card2 h2 {
    text-transform: uppercase;
    line-height: 1;
    color: var(--saison);
    margin-bottom: 0.5rem;
}
.card2 p {
  line-height: 1.2;
}
.card .horaire, .card2 .horaire {
  margin-bottom: 10px;
}
.dates {
    border-bottom: 1px solid var(--bleu);
    padding-bottom: 1px;
    text-transform: uppercase;
    line-height: 1.6!important;
}
.card__date {
    font-size: 80%;
    display: flex;
    justify-content: space-between;
}
.btn-statut, .wp-block-file__button {
    background: var(--bleu)!important;
    color: var(--bleuleger)!important;
    border: 1px solid var(--bleuleger);
}
.btn-reserver, .btn-statut {
    background: var(--bleuleger);
    color: var(--bleu);
    border: 1px solid var(--bleuleger);
    border-radius: 2px;
    padding: 3px 15px 5px 15px;
    line-height: 1rem;
    text-decoration: none;
    text-align: center;
    position: relative;
    z-index: 10;
}
.btn-reserver:hover {
    background: var(--bleu);
    border: 1px solid var(--bleu);
    color: var(--bleuleger);
    transition: all 0.2s ease-in-out;
    transform: scale(1.1);
}
.btn-action {
  background-color: var(--transp);
  border-radius: 35px;
  border: 1px solid var(--bleu);
  color: var(--bleu);
  padding: 8px calc(var(--gap) / 1.5);
  text-decoration: none;
  text-align: center;
  margin: 10px 0 0 0;
  display: inline-block;
}
.btn-action:hover {
    background: var(--saison);
    border: 1px solid var(--saison);
    color: var(--bleuleger);
}
.btn-reservation {
    background: var(--bleu);
    color: var(--blanc);
    border: 0 solid var(--bleu);
    border-radius: 2px;
    padding: 8px 35px 5px;
    display: flex;
    justify-content: center;
    text-align: center;
    font-family: 'Bellfort-Thin', Arial, sans-serif;
    font-size: 1.4rem;
    text-decoration: none!important;
    transition: background-color 100ms ease-in-out, transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
    
    position: relative;
    z-index: 10;
}
.btn-reservation:after,
.btn-reserver:after {
  position: absolute;
  z-index: 20;
  bottom: 40%;
  left: -1px;
  height: 10px;
  width: 5px;
  border: 0 solid rgba(0,0,0, .1);
  border-left: none;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #fff;
  content: '';
}
.btn-reservation:before,
.btn-reserver:before {
  position: absolute;
  z-index: 20;
  bottom: 40%;
  right: -1px;
  height: 10px;
  width: 5px;
  border: 0 solid rgba(0,0,0, .1);
  border-right: none;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  background-color: #fff;
  content: '';
}
.btn-reserver:after,
.btn-reserver:before {
  bottom: 35%;
  height: 8px;
  width: 4px;
}
.btn-reservation:hover {
    background: var(--saison);
    border: 0px solid var(--saison);
    color: var(--blanc)!important;/*
    transition: all 0.2s ease-in-out;*/
    transform: scale(1.1);
    /*transform: translateY(-8px)*/
}


.btn-plus {
    color: var(--saison);
    line-height: 1rem;
    border: 1px solid var(--saison);
    border-radius: 35px;
    padding: 3px 15px 5px 15px;
    text-decoration: none;
    text-align: center;
}
.btn-plus:hover {
    background: var(--bleu);
    border: 1px solid var(--bleu);
    color: var(--blanc)!important;
}
.btn {
    color: var(--bleu);
    border: 2px solid var(--bleu);
    border-radius: 5px;
    padding: calc(var(--gap) / 3) calc(var(--gap) / 1.5);
    text-decoration: none;
}
.btn:hover {
    background: var(--bleu);
    color: var(--blanc);
}
.btn-cta {
    display: flex;
    justify-content: center;
}



/******************************
            FOOTER 
*******************************/
/***** QUATUOR CTA ******/
#footer-cta {
  border-top: 1px solid var(--grisleger);
  padding: var(--gapX2) 0;
}

/* SANDBOX - VERSION FLEXBOX 
#cta-contacts {
  display: flex;
  column-gap: var(--gap);
}
*/
#cta-contacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    grid-gap: var(--gap);
    grid-auto-rows: minmax(min-content, auto);
}
/*
#cta-contacts .reservation {
  background: var(--bleu); 
  color: var(--blanc);
  border: 1px dotted var(blanc);
}
#cta-contacts .reservation .ico {
  fill: var(--blanc);
}  */
#cta-contacts .ico {
  fill: var(--bleu);
  margin-bottom: 2rem;
}
#cta-contacts .medias h3, 
#cta-contacts .reservation h3 {
  text-align: center;
}
.format { font-size: 75%; text-transform: uppercase; }
#cta-contacts article {
    border: 1px dotted var(--bleu);
    border-radius: 5px;
    width: 100%;
    height: 100%;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}
#cta-contacts .medias, 
#cta-contacts .reservation,
#cta-contacts article {
  justify-content: center;
  align-items: center;
}
#cta-contacts h3 {
    font-size: 1.8rem;
    line-height: 2rem;
    margin-bottom: 10px;
text-align: left;
}


/***** FOOTER ******/
footer { 
    background: var(--bleu);
      color: var(--bleuleger);
    /*display: flex;
    align-items: flex-start;
    padding: 70px 0;*/
    font-size: 0.85rem;
    display: grid;
    grid-template-areas: 
    ". a a a b b b b b c c d d ."
    ". e e e e e e e e e e e e .";
    padding-top: 70px;
}
footer div:not(:last-of-type) {
  padding-right: var(--gap);
}
.siege {
  grid-area: a;
  display: flex;
  flex-direction: column;
  row-gap: var(--gap);
}
.subsides {
    grid-area: b;
}
footer > .contacts {
    grid-area: c;
}
footer > .sociaux {
  grid-area: d;
}
footer > .credits {
  grid-area: e;
  grid-column: 1/-1;
  border-top: 1px dotted var(--bleuleger);
  padding: 15px 0;
  align-items: center;
}
  footer > .credits > div {
    display: flex;
    justify-content: space-between;
  }

/******************************
            MAIN 
*******************************/

/********DUOTONE 3 **********/

:root {
      --color-navy: #0c1f72;
      --color-navy-opaque: rgba(12, 31, 114, 0.77);
      --color-light: #ffffff;
      --color-dark: #252525;
      --font-serif: Georgia, serif;
      --font-sans: Helvetica, sans-serif;
      --metric-wrapper: 40rem;
      --metric-gutter: 1.25rem;
      --transition-snappy: 200ms linear;
      --transition-silky: 300ms cubic-bezier(1, 0, 0.55, 0.85);
    }
/**
 * DUOTONE CARD COMPONENT 
 */
.duotone-card {
  --duotone-card-media-opacity: 0.8;/*1*/
  --duotone-card-media-brightness: 1.1;
  --duotone-card-media-grayscale: 1;
  --duotone-card-icon-opacity: 0;
  --duotone-card-content-background: var(--color-navy-opaque);
}
.duotone-card__inner {
  position: relative;
  padding-bottom: 143%;
}
.duotone-card__inner2 {
  position: relative;
  padding-bottom: 70%;
}
.duotone-card__media {
  position: absolute;
  width: 100%;
  height: 100%;
}
.duotone-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(var(--duotone-card-media-grayscale)) brightness(var(--duotone-card-media-brightness));
  transition: filter var(--transition-snappy);
}
@supports (mix-blend-mode: multiply) {
  .duotone-card__media::before,
  .duotone-card__media::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: var(--duotone-card-media-opacity);
    transition: opacity var(--transition-snappy);
  }

  .duotone-card__media::before {
    background: var(--saison);
    mix-blend-mode: multiply;
  }

  .duotone-card__media::after {
    background: var(--color-navy);
    mix-blend-mode: lighten;
  }
}

/* Switch the custom property values on hover instead of writing
   complex selectors*/
.duotone-card:hover,
.duotone-card:focus-within {
  --duotone-card-media-opacity: 0;
  --duotone-card-media-brightness: 1;
  --duotone-card-media-grayscale: 0;
  --duotone-card-icon-opacity: 1;
  --duotone-card-content-background: var(--color-navy);
}




/***************************
    FORM + NEWSLETTER
****************************/
#newsletter-form div, #newsletter-form button {
  margin: 15px 0 0 0;
}
.input--hidden { display: none;visibility: hidden; padding: 0; height:0 }
input[type="button"], input[type="submit"], input[type="reset"], button[type="submit"] {
     cursor:pointer;
  background-color: var(--bleu);
  border-radius: 35px;
  border: 1px solid var(--bleu);
  color: white;
  padding: 8px calc(var(--gap) / 1.5);
  text-decoration: none;
  margin: 10px 0 0 0;
  font-size: 1rem;
  display: block;
}
input[type="submit"]:hover, button[type="submit"]:hover {
    background: var(--saison);
    border: 1px solid var(--saison);
    outline:none;
}
.inp {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 370px;
  border-radius: 3px;
  overflow: hidden;
}
.inp .label {
  /*width: 200px;*/
  position: absolute;
  top: 15px;
  left: 10px;
  font-size: 0.7rem;
  color: var(--bleu);
  font-weight: 500;
  transform-origin: 0 0;
  transform: translate3d(0, 0, 0);
  transition: all 0.2s ease;
  pointer-events: none;
}
.inp .focus-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bleuleger);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
}
.inp input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  border: 0;
  font-family: inherit;
  padding: 5px 10px 0 10px;
  height: 45px;
  font-size: 1rem;
  background: rgba(var(--bleuleger-rgb), 0.4);
  box-shadow: inset 0 -1px 0 var(--bleu);
  color: var(--saison);
  transition: all 0.15s ease;
}
.inp input:hover {
  background: rgba(var(--bleuleger-rgb), 1);
  box-shadow: inset 0 -1px 0 var(--bleu);
}
.inp input:not(:-moz-placeholder-shown) + .label {
  color: rgba(var(--bleu-rgb), 0.2);
  transform: translate3d(0, -12px, 0) scale(0.75);
}
.inp input:not(:-ms-input-placeholder) + .label {
  color: rgba(var(--bleu-rgb), 0.2);
  transform: translate3d(0, -12px, 0) scale(0.75);
}
.inp input:not(:placeholder-shown) + .label {
  color: rgba(var(--bleu-rgb) 0.2);
  transform: translate3d(0, -12px, 0) scale(0.75);
}
.inp input:focus {
  background: rgba(var(--bleuleger-rgb), 1);
  outline: none;
  box-shadow: inset 0 -2px 0 var(--bleu);
}
.inp input:focus + .label {
  color: var(--bleu);
  transform: translate3d(0, -12px, 0) scale(0.75);
}
.inp input:focus + .label + .focus-bg {
  transform: scaleX(1);
  transition: all 0.1s ease;
}


/* EMBED VIDEO */
.embed-container { 
  position: relative; 
  padding-bottom: 56.25%;
  overflow: hidden;
  max-width: 100%;
  height: auto;
  margin-bottom: var(--gap);
} 

.embed-container iframe,
.embed-container object,
.embed-container embed { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* FORM INSCRIPTION EO BOOK*/
#eo-bookings { font-family: 'Founders-Light'; }
.eo-booking-field-terms-conditions-text a {text-decoration: underline;}
.eo-booking-field-terms-conditions-text {font-size: 80%}
.eo-booking-label {display: block;}
.eo-booking-ticket-name {padding-right: var(--gap); font-weight: bold}
.eo-booking-error, .eo-booking-notice, .eo-booking-form-field-errors { color: var(--saison);}
.eo-booking-label, .eo-booking-sub-label, .eo-booking-ticket-name, .eo-booking-ticket-quantity { font-weight:bold; }
.eo-booking-field input {height: 30px; width: 270px; padding-left: 8px; box-sizing: border-box;}
.eo-booking-field input[type="checkbox"] {height: 15px; width: 15px;}
/***************************
*        TIMELINE          *
***************************/

/*==================================
    TIMELINE
==================================*/
/*-- GENERAL STYLES
------------------------------*/
ul.timeline {
  line-height: 1.2em;
  list-style: none;
  margin: 0;
  margin-bottom: var(--gap);
  padding: 0;
  width: 100%;
}
.timeline h1, .timeline h2, .timeline h3, .timeline h4, .timeline h5, .timeline h6 {
  line-height: inherit;
}
.timeline h3 {
  margin-bottom: 0.2rem!important;
}
/*----- TIMELINE ITEM -----*/
.timeline-item {
  padding-left: 40px;
  position: relative;
}
.timeline-item:last-child {
  padding-bottom: 0;
}
/*----- TIMELINE MARKER -----*/
.timeline-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10px;
}
.timeline-marker:before {
  background: var(--transp);
  border: 2px solid var(--saison);
  border-radius: 100%;
  content: "";
  display: block;
  height: 10px;
  position: absolute;
  top: 4px;
  left: 0;
  width: 10px;
  transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
}
.timeline-marker:after {
  content: "";
  width: 1px;
  background: var(--saison);
  display: block;
  position: absolute;
  top: 22px;
  bottom: 0;
  left: 7px;
}
.timeline-item:last-child .timeline-marker:after {
  content: none;
}

.timeline-item:not(.period):hover .timeline-marker:before {
  background: var(--saison);
  border: 2px solid var(--transp);
}

/*----- TIMELINE CONTENT -----*/
.timeline-content {
  padding-bottom: 20px;
}
.timeline-content p:last-child {
  margin-bottom: 0;
}

/*----------------------------------------------
    MOD: TIMELINE CENTERED
----------------------------------------------*/
@media (min-width: 992px) {
  .timeline-centered,
  .timeline-centered .timeline-item,
  .timeline-centered .timeline-info,
  .timeline-centered .timeline-marker,
  .timeline-centered .timeline-content {
    display: block;
    margin: 0;
    padding: 0;
  }
  .timeline-centered .timeline-item {
    padding-bottom: 20px;
    overflow: hidden;
  }
  .timeline-centered .timeline-marker {
    position: absolute;
    left: 50%;
    margin-left: -7.5px;
  }
  .timeline-centered .timeline-info,
  .timeline-centered .timeline-content {
    width: 50%;
  }
  .timeline-centered > .timeline-item:nth-child(odd) .timeline-info {
    float: left;
    text-align: right;
    padding-right: 30px;
  }
  .timeline-centered > .timeline-item:nth-child(odd) .timeline-content {
    float: right;
    text-align: left;
    padding-left: 30px;
  }
  .timeline-centered > .timeline-item:nth-child(even) .timeline-info {
    float: right;
    text-align: left;
    padding-left: 30px;
  }
  .timeline-centered > .timeline-item:nth-child(even) .timeline-content {
    float: left;
    text-align: right;
    padding-right: 30px;
  }
  .timeline-centered .period .timeline-marker:after {
    height: 30px;
    bottom: 0;
    top: auto;
  }
  .timeline-centered .period .timeline-title {
    left: auto;
  }
}


/***************************
*      CARDS PROGRAMME     *
****************************/
.trio {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: var(--gap);
    padding: 2rem 0;
}
.cards {
  display: grid;
  gap: var(--gap);
}
.card {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 300px 1fr auto;
  grid-column-gap: var(--gap);
  background: var(--blanc);
  /* border-radius: 10px; */
  border: 1px solid var(--saison);
  overflow: hidden;
}
    .card2 {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 300px 1fr auto;
      grid-column-gap: var(--gap);
      background: var(--blanc);
      /* border-radius: 10px; */
      border: 1px solid var(--saison);
      /*overflow: hidden;*/
    }
.card__image {
  grid-column: 1/3;
  grid-row: 1/2;
  background: no-repeat top/cover;
}
.card2 .card__image {
  grid-column: 1/3;
  grid-row: 1/2;
  // background: no-repeat top/cover;
}
.card__content {
  grid-column: 1/3;
  grid-row: 2/3;
  padding: 1rem var(--gap);
}
.card2 .card__content {
  grid-column: 1/3;
  grid-row: 2/3;
  padding: 1rem var(--gap);
}
.card__description {
  font-size: 1rem;
  line-height: 1.5;

}
.card__date {
  grid-column: 1/3;
  grid-row: 3/4;
  padding: 0 var(--gap) 1.5rem var(--gap);
}
.card2 .card__date {
  grid-column: 1/3;
  grid-row: 3/4;
  padding: 0 var(--gap);
  padding-bottom: 1.5rem;
}
@media (min-width: 500px) {
  .card {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr auto;
  }
  .trio {
      display: grid;
      grid-template-columns: 1fr;
      padding: 2rem 0;
  }
  .card2 {
    grid-template-columns: repeat(9, 1fr);
    grid-column-gap: var(--gap);
    grid-template-rows: 1fr auto;
  }
}
@media (min-width: 1200px) {
  .card {
    grid-column: 1/-2;
    background: var(--blanc);
    grid-template-columns: repeat(9, 1fr);
  }
  .trio {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: var(--gap);
      padding: 2rem 0;
  }
  .card2 {
    /*grid-column: 1/-1;*/
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 300px 1fr auto;
    grid-column-gap: var(--gap);
    /* border-radius: 10px; */
    border: 1px solid var(--saison);
    /*overflow: hidden;*/
    padding-bottom: 1.5rem;
  }
}
@media (min-width: 500px) {
  .card__image {
    grid-column: 1/4;
    grid-row: 1/3;
  }
  .card2 .card__image {
    grid-column: 1/4;
    grid-row: 1/3;
    background: no-repeat top/cover;
  }
}
@media (min-width: 1200px) {
  .card__image {
    grid-column: 1/4;
    grid-row: 1/3;
  }
  .card2 .card__image {
    grid-column: 1/3;
    grid-row: 1/2;
    background: no-repeat top/cover;
  }
}
@media (min-width: 500px) {
  .card__content {
    grid-column: 4/-1;
    grid-row: 1/2;
    padding: 1rem var(--gap) 1rem 0;
  }
  .card2 .card__content {
    grid-column: 4/-1;
    grid-row: 1/2;
      padding: 1rem var(--gap) 1rem 0;
  }
}
@media (min-width: 1200px) {
  .card__content {
    grid-column: 4/-1;
    grid-row: 1/2;
  }
  .card2 .card__content {
    grid-column: 1/3;
    grid-row: 2/3;
    padding: 1rem var(--gap);
  }
}
@media (min-width: 500px) {
  .card__date {
    grid-column: 4/-1;
    grid-row: 2/-1;
    padding: 0 var(--gap) 1rem 0;
  }
  .card2 .card__date {
    grid-column: 4/-1;
    grid-row: 2/3;
    padding: 0 var(--gap) 1rem 0;
  }
}
@media (min-width: 1200px) {
  .card__date {
    grid-column: 4/-1;
    grid-row: 2/3;
    padding-right: var(--gap);
    padding-bottom: 1.5rem;
  }
  .card2 .card__date {
    grid-column: 1/3;
    grid-row: 3/4;
    padding: 0 var(--gap);
  }
}
/***************************
     RESPONSIVENESS  
****************************/

@media(max-width:1200px) { /* hd */
  .grid {
      display: grid;
      grid-template-columns: 60px repeat(12, 1fr) 60px;
  }
  .headernav {
    grid-template-columns: 20px 1fr 20px!important;
    grid-template-areas: 
    ".  logo  .";
  }
  .logo { 
    border-right: 0;
    padding-left: 0;
    justify-self: center;
    padding-top: var(--gapX2);
    padding-bottom: var(--gap);
  }
  .navigation { 
    display: none;
  }
  .mobile-menu {
      visibility: visible;
  }
  .chemin { display: none }
  .presentation > .cheminis {
      top: 30vh;
      left: 0;
  }
  .presentation > .description {
      grid-column: 5/-2;
  }
  .page-mediation .logo, .page-sur-mesure .logo { 
    background: var(--transp);
  }
  .page {
    display: grid;
    grid-gap: var(--gap);
    grid-template-areas: 
    ". sidebarl  sidebarl  sidebarl  sidebarl sidebarl  sidebarl  sidebarl  sidebarl sidebarl  sidebarl  sidebarl  sidebarl ."
    ".  main  main  main  main  main  main  main  main  main  main  main  main  .";
  }
  .grid-grand-kid {
      grid-column: 1/-1;
  }
  .grid-grand-kid-left {
      grid-column: 1/-1;
  }
  .sidebar-coloree {
    padding-right: 0;
    border-right: 0;
    margin-bottom: 20px;
  }
  .page-mediation .sidebar-coloree, .page-sur-mesure .sidebar-coloree { background: var(--transp); }
  .page-contenu {
      display: grid;
      grid-template-columns: 1fr;
      grid-gap: var(--gap);
      grid-template-areas: 
      "sidebarl"
      "main";
  }
    .evtmt {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: var(--gap);
      grid-template-areas: 
      "illu      main      main      main"
      "sidebarl  sidebarl  sidebarl  sidebarl"
      "back      back      back      back";
    }
    .sidebarl {
        border-right: 0;
        padding-right: 0;
    }
    .main {
      grid-area: main;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-areas:  
      "tt  tt  tt  tt  tt  pt"
      "tx  tx  tx  tx  tx  pt"
      "ip  ip  ip  ip  ip  ip";
    }
    .pictos {
      border-left: 1px dotted var(--saison); 
      text-align: center;
    }
    .info .actions {
        flex-wrap: wrap;
    }
    .navigation {
      grid-template: 2em 2em / 12fr;
    }
    .menu {
      grid-row:2;
      background: var(--transp);
        display: flex;
        justify-content: space-between;
        align-content: flex-start;
        padding-right: 0;
        height:auto;
    }
    .reseaux {
      background: var(--transp);
        display: flex;
        justify-content: flex-end;
        align-content: flex-start;
        font-size: 1.3rem;
        line-height: 1.4;
        max-height: 50px;
    }
    #cta-contacts {
      grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    }
    
    footer { 
      grid-template-areas: 
      ". a a a b b b b b b c c c ."
      ". a a a b b b b b b d d d ."
      ". e e e e e e e e e e e e .";
      padding-top: 50px;
  }
}

@media(max-width:1024px) { /*desktop */
  .grid {
      display: grid;
      grid-template-columns: 20px repeat(12, 1fr) 20px;
  }
  footer { 
    display: grid;
    grid-template-areas: 
    ". c c c c c c c d d d d d ."
    ". a a a a a a a a a a a a ."
    ". b b b b b b b b b b b b ."
    ". e e e e e e e e e e e e .";
    padding-top: var(--gap);
  }
    .siege {
      grid-column: 1/-1;
      grid-area: a;
    }
    .subsides {
        grid-column: span 4;
        grid-area: b;
    }
    footer > .contacts {
        rid-area: c;
    }
    footer > .sociaux {
      grid-area: d;
    }
    footer > .credits > div {
      flex-direction: column;
      row-gap: 10px;
    }
}
@media(max-width:768px) { /* tablette */
  .presentation > .description {
      grid-column: 2/-2;
  }
  .info .actions {
      display: flex;
      justify-content: space-between;
  }
  .presentation > .cheminis {
      top: 30vh;
      right: 0;
  }
  .colonnes-duo {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 500px) { /* mobile*/
  .grid {
      display: grid;
      grid-template-columns: 20px repeat(12, 1fr) 20px!important;
      grid-gap: 0;
  }
  .presentation > .cheminis {
      top: 15vh;
  }
  .main2 {
    grid-template-columns: 1fr;
  }
    .evtmt {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: var(--gap);
      grid-template-areas: 
      "illu      illu      illu      illu"
      "main      main      main      main"
      "sidebarl  sidebarl  sidebarl  sidebarl"
      "back      back      back      back";
    }
    .presentation > .description {
        grid-column: 1/-1;
    }
    
}