/* ---------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------
  RESET
------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */
html {
  max-width: 2560px;
  height: 100%;
  margin: 0 auto;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: "Roboto", sans-serif;
}

body,div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, ::before, ::after {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

.gtm-wrapper {
  flex-grow: 1;
  margin-top: 10px;
  position: relative;
  max-width: 2560px;
  margin-left: auto;
  margin-right: auto;
}

img {
  max-width: 100%;
  height: auto;
}

@media screen and (min-width: 768px) { 
  .gtm-wrapper {
    margin-top: 170px;
}
}

@media screen and (min-width: 1160px) { 
  .gtm-wrapper {
    margin-top: 0px;
}
}

/* ---------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------
  NOS CLASSES
------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------------------------------------------
  Titres, texte, liens, listes 
--------------------------------------------------------------------------------------------------------------------- */

/* -------------------- Titres -------------------- */

h1 {
  font-size: clamp(23px, 3.8vw, 60px);
  margin-bottom: 15px;
  font-family: "Roboto", serif;
  text-align: center;
  color: #fff;
  font-weight: 500;
}

h2 {
  font-size: clamp(23px, 3vw, 60px);
  margin-bottom: 15px;
  margin-top: 15px;
  text-align: center;
  color: #E7C167;
}

h2 a, .com-tags-tag h3 a {
  font-size: clamp(23px, 3vw, 60px);
  margin-bottom: 15px;
  text-align: left;
}

h2 a:hover, .com-tags-tag h3 a:hover {
  color: #363b47;
}

h2#proximite {
  padding-bottom: 40px;
}

h3, .result__title-text {
  font-size: clamp(20px, 2.5vw, 30px);
  margin-top: 15px;
  margin-bottom: 15px;
  line-height: 1;
  color: #363b47;
}

h4 {
  font-size: clamp(18px, 2.5vw, 25px);
  margin-top: 15px;
  margin-bottom: 15px;
  color: #363b47;
}

h5 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  font-weight: 300;
  color: #363b47;
}

h5 span {
  font-weight: 500;
  color: #363b47;
}

h6 {
  font-size: clamp(1rem, 2vw, 1.2rem);
  margin-bottom: 15px; 
  color: #363b47;
}

@media screen and (min-width: 576px) { 
  h1 {
    font-size: clamp(26px, 3.3vw, 60px);
    text-align: right;
    padding-top: 6px !important;
    padding-right: 25px;
  }
}

@media screen and (min-width: 768px) { 
  h1 {
    padding-right: 35px;
  }
}

@media screen and (min-width: 1200px) {
  h1 {
      padding-top: 22px !important;
  }
}

@media screen and (min-width: 1600px) {
  h1 {
      padding-top: 14px !important;
  }
}

@media screen and (min-width: 1800px) {
  h1 {
      padding-top: 32px !important;
  }
}

/* -------------------- Textes -------------------- */

p {
  font-size: clamp(16px, 1.5vw, 20px);
  margin-bottom: 15px;
  color: #363b47;
}

blockquote {
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-family: "Roboto", serif;
  margin-bottom: 15px;
}

/* -------------------- Liens -------------------- */

a {
  text-decoration: none !important;
  cursor: pointer;
  color: #798ec1;
  font-size: clamp(16px, 1.5vw, 20px);
  transition: color .5s ease-in-out;
  position: relative;
  margin-bottom: 15px;
}

a:visited {
  color: #798ec1;
}

a:hover {
  color: #363b47;;
}

a.gtm-lien-secondary {
  color: whitesmoke;
}

a.gtm-lien-secondary:visited {
  color: lightpink;
}

a.gtm-lien-secondary:hover {
  color: lavender;
}

/* -------------------- Boutons -------------------- */

/* boutons gestimark */

.gtm-btn-primary, .formResponsive button[type=submit] {
  border-radius: 99px;
  margin-bottom: 20px;
  margin-left: 15px;
  box-sizing: border-box;
  color: #363b47 !important;
  margin-top: 20px;
  background-color: #E7C167;
  line-height: 1.2;
  padding: 10px 20px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  transition: background .2s ease-in-out;
  font-weight: 600;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0) !important;
  font-size: clamp(16px, 1.5vw, 20px);
  border: none;
}

.gtm-btn-primary:visited, .formResponsive button[type=submit]:visited {
  background-color: #E7C167;
  color: #363b47;
}

.gtm-btn-primary:hover, .formResponsive button[type=submit]:hover {
  background-color: #363b47 !important;
  color: #E7C167 !important;
}

button {
  margin-left: 0 !important;
}

a.gtm-btn-secondary {
  border-radius: 99px !important;
  border: 1px solid #E7C167 !important;
  margin-bottom: 20px !important;
  box-sizing: border-box !important;
  color: #363b47 !important;
  margin-top: 20px !important;
  background-color: #E7C167 !important;
  border: 3px solid #E7C167 !important;
  line-height: 1.2 !important;
  padding: 10px 20px !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important;
  display: inline-block !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background .2s ease-in-out !important;
  font-size: clamp(16px, 1.5vw, 20px) !important;
  height: inherit !important;
  font-weight: 600 !important;
}

#mc_embed_signup .button {
  border-radius: 99px !important;
  border: 1px solid #E7C167 !important;
  margin-bottom: 20px !important;
  box-sizing: border-box !important;
  color: #363b47 !important;
  margin-top: 5px !important;
  background-color: #E7C167 !important;
  border: 3px solid #E7C167 !important;
  line-height: 1.2 !important;
  padding: 10px 20px !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important;
  display: inline-block !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background .2s ease-in-out !important;
  font-size: clamp(16px, 1.5vw, 20px) !important;
  height: inherit !important;
  font-weight: 600 !important;
}

a.gtm-btn-secondary:visited,  #mc_embed_signup .button:visited {
  background-color: #E7C167 !important;
}

a.gtm-btn-secondary:hover,  #mc_embed_signup .button:hover {
  background-color: transparent !important;
  border: 3px solid #E7C167 !important;
  color: #E7C167 !important;
}

a.gtm-btn-third {
  border-radius: 99px;
  border: 1px solid #363B47;
  margin-bottom: 20px;
  box-sizing: border-box;
  color: #363B47;
  margin-top: 20px;
  line-height: 1.2;
  padding: 10px 20px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  transition: background .2s ease-in-out;
}

a.gtm-btn-third:hover {
  background-color: #363B47;
  border: 1px solid #363B47;
  color: #E7C167 !important;
}

/* boutons joomla */

.btn.btn-primary {
  border-radius: 99px;
  border: 1px solid #E7C167;
  margin-bottom: 20px;
  box-sizing: border-box;
  color: #fff;
  margin-top: 20px;
  background-color: #E7C167;
  line-height: 1.2;
  padding: 10px 20px;
  font-size: clamp(16px, 1.5vw, 20px);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  transition: background .2s ease-in-out;
}

.btn.btn-primary:visited {
  background-color: #E7C167;
}

.btn.btn-primary:hover {
  background-color: transparent;
  color: #E7C167;
}

.btn.btn-secondary {
  background-color: #f05246;
  border: none;
  padding: 8px 15px;
  font-size: clamp(16px, 1.5vw, 20px);
  color: whitesmoke;
  margin: 15px 0px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .3s ease-in-out;
}

.btn.btn-secondary:visited {
  background-color: #99312a;
}

.btn.btn-secondary:hover {
  background-color: #99312a;
}

/* boutons lire la suite */

.readmore .btn-secondary {
  border-radius: 99px;
  margin-bottom: 20px;
  margin-left: 15px;
  box-sizing: border-box;
  color: #363B47;
  margin-top: 20px;
  background-color: #E7C167;
  line-height: 1.2;
  padding: 10px 20px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  transition: background .2s ease-in-out;
  font-weight: 600;
}

.readmore .btn-secondary:visited {
  background-color: #E7C167;
}

.readmore .btn-secondary:hover {
  background-color: #363B47;
  color: #E7C167;
}

/* bouton envoyer */

button[type="submit"] {
  border-radius: 99px !important;
  margin-bottom: 20px !important;
  box-sizing: border-box !important;
  color: #fff !important;
  margin-top: 20px !important;
  background-color: #E7C167 !important;
  line-height: 1.2 !important;
  padding: 10px 20px !important;
  font-size: clamp(16px, 1.5vw, 20px) !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important;
  display: inline-block !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background .2s ease-in-out !important;
  border: 0 solid #E7C167 !important;
}

button[type="submit"]:visited{
  background-color: #E7C167 !important;
}

button[type="submit"]:hover{
  background-color: #E7C167 !important;
}


/* -------------------- Listes -------------------- */

/* Liste gestimark */
ul:not(.gtm-sub-menu, .menu), ol {
  margin-left: 40px;
  margin-bottom: 15px;
}

ul li, ol li {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.5;
}

ul.gtm-liste-picto {
  margin-left: 15px;
}

ul.gtm-liste-picto li {
  list-style: none;
  padding-bottom: 5px;
  background: url(/images/gtm-list-pict.png) no-repeat 0 6px;
  background-size: 15px;
  padding-left: 22px;
}

/* Liste compte */
ul.mod-login__options {
  list-style-type: none;
  margin-left: 0px;
}

ul.mod-login__options li a {
  font-size: clamp(.9rem, 2vw, 1rem);
}

/* Formulaires (input, textarea...) */

.formResponsive input[type="text"], .formResponsive input[type="email"], .formResponsive input[type="tel"], .formResponsive input[type="search"], .formResponsive input[type="url"], .formResponsive input[type="password"], .formResponsive textarea {
  width: 100% !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  height: auto !important;
  border-bottom: 1px solid  !important;
  border-top: 0px solid  !important;
  border-left: 0px solid  !important;
  border-right: 0px solid  !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="search"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus {
  border: 1px solid #E78402 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-top: 0px solid #E78402 !important;
  border-right: 0px solid #E78402 !important;
  border-left: 0px solid #E78402 !important;
  border-bottom: 1px solid  !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.formResponsive input, .formResponsive textarea {
  width: 100%;
}

.gtm-envie, .gtm-form {
  max-width: 1200px;
  margin: 0 auto;
}

.formResponsive .formControls label {
  margin: 3px 15px 3px 0 !important;
  line-height: 30px;
}
.gtm-form-reservation .rsform-type-freetext {
  margin-top: 50px;
  margin-bottom: 30px;
}

.gtm-form-reservation .formControls {
  margin-top: 10px;
}

@media screen and (min-width: 651px) { 
  .rsform-block-artiste, .rsform-block-dimensions, .rsform-block-description {
    margin-top: 30px;
}
}

/* ---------------------------------------------------------------------------------------------------------------------
  Padding 
--------------------------------------------------------------------------------------------------------------------- */

.moduletable.gtm-no-padding {
  padding: 0 0 0 0;
}

.moduletable.gtm-no-padding-h {
  padding-left: 0;
  padding-right: 0;
}

.moduletable.gtm-no-padding-v {
  padding-top: 0;
  padding-bottom: 0;
}

.gtm-padding-top {
  padding-top: 15px;
}

.gtm-padding-right {
  padding-right: 15px;
}

.gtm-padding-bottom {
  padding-bottom: 15px;
}

.gtm-padding-left {
  padding-left: 15px;
}

.gtm-debug .moduletable {
  padding: 0;
}

/* ---------------------------------------------------------------------------------------------------------------------
  Margin 
--------------------------------------------------------------------------------------------------------------------- */

.moduletable.gtm-no-margin {
  margin: 0;
}

.moduletable.gtm-no-margin-horizontal {
  margin-left: 0;
  margin-right: 0;
}

.moduletable.gtm-no-margin-vertical {
  margin-top: 0;
  margin-bottom: 0;
}

.gtm-margin-top {
  margin-top: 15px;
}

.gtm-margin-right {
  margin-right: 15px;
}

.gtm-margin-bottom {
  margin-bottom: 15px;
}

.gtm-margin-left {
  margin-left: 15px;
}

.gtm-margin-left-0 {
  margin-left: 0 !important;
}

/* ---------------------------------------------------------------------------------------------------------------------
  Alignement
--------------------------------------------------------------------------------------------------------------------- */
.gtm-align-left h2 {
  text-align: left !important;
}

@media screen and (min-width: 576px) { 
  .gtm-logo-align-right {
    text-align: right;
  }
}

@media screen and (min-width: 768px) { 
  .gtm-align-right, .gtm-align-right h2, .gtm-align-right h3, .gtm-align-right h4, .gtm-align-right p {
    text-align: right;
  }
}

/* ---------------------------------------------------------------------------------------------------------------------
  Background
--------------------------------------------------------------------------------------------------------------------- */

.moduletable.gtm-bg {
  padding: 0px 0px;
  background-color: #f07e0a;
  color: white;
}

.moduletable.gtm-img-bg {
  padding: 0px 0px;
}

.moduletable.gtm-bg .gtm-custom{
  padding: 20px 20px ;
}

.gtm-img-bg .gtm-custom {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  padding: 20px 20px ;
}

@media screen and (min-width: 1024px) {
  .moduletable.gtm-bg .gtm-custom{
    padding: 20px 40px ;
  }
  
  .gtm-img-bg .gtm-custom {
    padding: 20px 40px ;
  }
}

/* -----------------------------------------------------------
                    VIDEOS
------------------------------------------------------------ */

/* Juste pour les cas spéciaux ou osyoutube ne fais pas l'affaire */

/* .gtm-video-container{position:relative;overflow:hidden;width:100%;padding-top:56.25%}.gtm-responsive-iframe{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;border-radius:2vw}*,::after,::before{box-sizing:border-box} */

/* ---------------------------------------------------------------------------------------------------------------------
  Centrage
--------------------------------------------------------------------------------------------------------------------- */

/* centrer du texte */
.gtm-center {
  text-align: center;
}

/* centrer le module sur lui-même */
.gtm-module-center {
  align-self: center;
}

/* centrer tout le contenu du module */
.gtm-content-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* centrer un seul élément */
.gtm-element-center .gtm-custom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  width: 100%;
}

/* ---------------------------------------------------------------------------------------------------------------------
  Style des éléments
--------------------------------------------------------------------------------------------------------------------- */

/* Angles arrondis */

.gtm-border {
  border-radius: 2vw;
}

/* Bordure */

.gtm-border {
  border: 2px solid black;
}

/* ---------------------------------------------------------------------------------------------------------------------
  Positions
--------------------------------------------------------------------------------------------------------------------- */

/* positions collante au top de l'écran lors du scroll */

@media screen and (min-width: 768px) { 
 .gtm-sticky {
    position: sticky;
    top: 20px;
  }
}

/* ---------------------------------------------------------------------------------------------------------------------
  Grid
--------------------------------------------------------------------------------------------------------------------- */

.gtm-grid-4 .gtm-custom {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

@media screen and (min-width: 1024px) { 
  .gtm-grid-4 .gtm-custom {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}


/* ---------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------
  STRUCTURE
------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------------------------------------------
  Articles
--------------------------------------------------------------------------------------------------------------------- */

.com-content-article {
  padding: 20px 20px;
}

@media screen and (min-width: 1024px) {

  .com-content-article {
    padding: 20px 40px;
  }

  /* .gtm-box-article {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 40px;
    width: 100%;
    align-items: start;
  } 

  .gtm-left {
    grid-column-start: 1;
    grid-column-end: 2;
    max-width: 50vw;
  }
 
  .gtm-right {
    grid-column-start: 3;
    grid-column-end: 4;
    max-width: 50vw;
  }

  .com-content-article {
    padding: 20px 40px;
  } */
} 

/* ---------------------------------------------------------------------------------------------------------------------
  Modules
--------------------------------------------------------------------------------------------------------------------- */

.moduletable {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 20px 20px;
}

.moduletable .gtm-custom {
  width: 100%;
}

.moduletable.gtm-bg h1, .moduletable.gtm-bg h2, .moduletable.gtm-bg h3, .moduletable.gtm-bg h4, .moduletable.gtm-bg h5, .moduletable.gtm-bg h6 {
  padding: 20px 20px 0px 20px;
}

/* marge entre le titre et le contenu */
.moduletable .gtm-custom {
  padding-top: 20px;
}

.gtm-right .moduletable .gtm-custom, .gtm-left .moduletable .gtm-custom {
  padding-top: 0px;
}

/* --------- Menu ---------- */
.gtm-menu .moduletable {
  padding: 0px;
}

@media screen and (min-width: 1024px) {
  .moduletable {
    padding: 20px 40px;
  }
  .moduletable.gtm-bg h1, .moduletable.gtm-bg h2, .moduletable.gtm-bg h3, .moduletable.gtm-bg h4, .moduletable.gtm-bg h5, .moduletable.gtm-bg h6 {
    padding: 20px 40px 0px 40px;
  }
}


/* ---------------------------------------------------------------------------------------------------------------------
  Blogue - Page de présentation
--------------------------------------------------------------------------------------------------------------------- */

/* ----------- marges du blog ----------- */
.com-content-category-blog__items.blog-items {
  padding: 20px;
}

.com-content-category-blog .page-header h1{
  padding: 20px;
}

/* ----------- Article en vedette ----------- */

.com-content-category-blog__items.blog-items {
  display: flex;
  gap: 20px;
  margin-bottom: 4vw;
}

.gtm-blogue-principal .page-header h2 {
  display: none;
}

.gtm-blogue-principal ul.fields-container {
  display: none;
}

/* ordre des blocs */
.com-content-category-blog.blog {
  display: flex;
  flex-direction: column;
}

.page-header:nth-child(odd) {
  width: 100%;
  order: 1;
}

.com-content-category-blog__child {
  padding: 0 0 0 20px;
}

.com-content-category-blog__children.cat-children {
  order: 1;
}

.com-content-category-blog__children.cat-children h3 {
  display: none;
}

.com-content-category-blog__children.cat-children h3.page-header.item-title {
  display: block;
  text-align: center;
  margin-bottom: 0;
}

.gtm-blogue-principal {
  order: 3;
}

.gtm-blogue-activites {
  order: 4;
}

@media screen and (min-width: 768px) { 
  .gtm-blogue-principal .com-content-category-blog__item.blog-item {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: 1fr;
      grid-column-gap: 40px;
      grid-row-gap: 0px;
  }

  .gtm-blogue-principal .item-content{
    grid-area: 1 / 1 / 2 / 8; 
  }

  figure.gtm-image-principale.item-image {
    grid-area: 1 / 8 / 2 / 13; 
  }

  .gtm-blogue-principal h2 {
    margin-top: 0;
  }

  /* .gtm-article-de-blogue {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    grid-template-rows: repeat(4, 1fr) !important;
    grid-column-gap: 0px !important;
    grid-row-gap: 0px !important;
  }
  
  .gtm-article-de-blogue .page-header h1 { 
    grid-area: 1 / 1 / 2 / 13 !important; 
  }

  .gtm-article-de-blogue .page-header h2 { 
    grid-area: 2 / 1 / 3 / 8 !important; 
  }

  .gtm-article-de-blogue .fields-container { 
    grid-area: 3 / 1 / 4 / 8 !important; 
  }

  .gtm-article-de-blogue figure.item-image  { 
    grid-area: 2 / 8 / 4 / 13 !important; 
  }

  .gtm-article-de-blogue  { 
    grid-area: 4 / 1 / 5 / 6 !important; 
  }

  .gtm-article-de-blogue .com-content-article__body  { 
    grid-area: 4 / 6 / 5 / 13; 
  } */
}

/* ----------- Articles du blogue ------------ */

/* Design du blogue 2 colonnes */
.com-content-category-blog__items.blog-items.masonry-2 {
  display: block;
}

/* Design du blogue 3 colonne */
.com-content-category-blog__items.blog-items.masonry-3 {
  display: block;
  order: 2;
}

/* Design du blogue 4 colonne */
.com-content-category-blog__items.blog-items.masonry-4 {
  display: block;
}

/* Alignement colonne des articles */
.com-content-category-blog__items.blog-items.masonry-2 .com-content-category-blog__item.blog-item figure.item-image, .com-content-category-blog__items.blog-items.masonry-3 .com-content-category-blog__item.blog-item figure.item-image, .com-content-category-blog__items.blog-items.masonry-4 .com-content-category-blog__item.blog-item figure.item-image, .com-content-category-blog__items.blog-items.masonry-2 .com-content-category-blog__item.blog-item .item-content, .com-content-category-blog__items.blog-items.masonry-3 .com-content-category-blog__item.blog-item .item-content, .com-content-category-blog__items.blog-items.masonry-4 .com-content-category-blog__item.blog-item .item-content {
  width: 100%;
}

.com-content-category-blog__items.blog-items.masonry-2 .com-content-category-blog__item.blog-item, .com-content-category-blog__items.blog-items.masonry-3 .com-content-category-blog__item.blog-item, .com-content-category-blog__items.blog-items.masonry-4 .com-content-category-blog__item.blog-item {
  display: block;
}

/* Design en ligne lorsque le blogue est en une seule colonne */
/* .com-content-category-blog__items.blog-items .com-content-category-blog__item.blog-item {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 4vw;
} */

/* Design des images */
.com-content-category-blog__items.blog-items figure.item-image img{
  width: 100%;
  margin-bottom: 15px;
}

/* Design des titres des articles */
.com-content-category-blog__items.blog-items .item-content .page-header h2{
  font-size: clamp(1.4rem, 4vw, 2rem); 
  margin-bottom: 15px;
}

.com-content-category-blog__items.blog-items.masonry-4 .item-content .page-header h2 {
  font-size: clamp(1.2rem, 3vw, 1.8rem); 
  margin-bottom: 15px;
}

/* Design des titres avec lien des articles */
.com-content-category-blog__items.blog-items .item-content .page-header h2 a{
  font-size: clamp(1.4rem, 4vw, 2rem); 
  margin-bottom: 15px;
  display: block;
}

.com-content-category-blog__items.blog-items.masonry-4 .item-content .page-header h2 a {
  font-size: clamp(1.2rem, 3vw, 1.8rem); 
  margin-bottom: 15px;
  display: block;
}

@media screen and (min-width: 768px) { 
  /* Design du blogue 3 colonne */
  .com-content-category-blog__items.blog-items.gtm-blogue-activites.masonry-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 40px;
  }
}

/* --------------------------------- Version Desktop ------------------------------------- */

@media screen and (min-width: 992px){

  /* marges du blog */
  .com-content-category-blog__items.blog-items {
    padding: 20px 40px;
  }
  .com-content-category-blog .page-header h1 {
    padding: 20px 40px;
  }

  /* Design en ligne lorsque le blogue est en une seule colonne */
  .com-content-category-blog__items.blog-items .com-content-category-blog__item.blog-item {
    flex-direction: row;
    gap: 40px;
  }

  /* tailles des boites images et textes de l'article en vedette */
  /* .com-content-category-blog__items.blog-items.items-leading .com-content-category-blog__item.blog-item figure.item-image, .com-content-category-blog__items.blog-items.items-leading .com-content-category-blog__item.blog-item div.item-content {
    width: 50%;
  } */

  /* tailles des boites images des articles */
  /* .com-content-category-blog__items.blog-items .com-content-category-blog__item.blog-item figure.item-image {
    width: 40%;
  } */
  
  /* tailles des boites textes des articles */
  /* .com-content-category-blog__items.blog-items .com-content-category-blog__item.blog-item .item-content {
    width: 60%;
  } */

  /* ----------- Articles du blogue ------------ */

  /* Design du blogue 2 colonnes */
  .com-content-category-blog__items.blog-items.masonry-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 40px;
  }

  /* Design du blogue 4 colonne */
  .com-content-category-blog__items.blog-items.masonry-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 40px;
  }

  /* ------------ Article de blogue ouvert -------------- */

  .com-content-article.item-page.gtm-blogue {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 40px;
  }
  
  .com-content-article.item-page.gtm-blogue .page-header:nth-child(1) {
    grid-column: span 12;
  }

  .com-content-article.item-page.gtm-blogue .page-header:nth-child(2) {
    grid-column: span 12;
  }

  .com-content-article.item-page.gtm-blogue .left.item-image {
    grid-column: span 6;
  }

  .com-content-article.item-page.gtm-blogue .com-content-article__body {
    grid-column: span 6;
  }

  .com-content-article.item-page.gtm-blogue .left.item-image img {
    position: sticky;
    top: 20px;
  }
}

@media screen and (min-width: 768px) { 
    .com-content-category-blog__items.blog-items.masonry-3 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 1fr;
      grid-column-gap: 30px;
      grid-row-gap: 40px;
  }
}

@media screen and (min-width: 1200px) {

  /* Design du blogue 3 colonne */
  .com-content-category-blog__items.blog-items.masonry-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 40px;
  }

  /* Design du blogue 4 colonne */
  .com-content-category-blog__items.blog-items.masonry-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 40px;
  }
}

/* ---------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------
  COMPTE
------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

.gtm-compte {
  text-align: center;
  max-width: 400px;
  margin: auto;
}

.gtm-compte form {
  display: flex;
  flex-direction: column;
}

/* Identifiant */

.gtm-compte form .form-group .input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}

.gtm-compte form .mod-login__username .input-group input {
  order: 2;
}

.gtm-compte form .mod-login__username .input-group label {
  order: 1;
}

/* Mdp */


.gtm-compte form .mod-login__password .input-group input {
  order: 2;
}

.gtm-compte form .mod-login__password .input-group label {
  order: 1;
}

.gtm-compte form .mod-login__password .input-group button {
  order: 3;
  width: fit-content;
}

/* .gtm-logo-connexion .gtm-custom img {
  max-width: 400px;
}

.com-users-login__form .control-group {
  margin-bottom: 15px;
}

.com-users-login__options a {
  font-size: clamp(.7rem, 1.5vw, .9rem);
} */


/* ---------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------
  FORMULAIRE
------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

/* dimenssions du formulaire */

.gtm-form {
  width: 100%;
  margin: auto;
}

.gtm-form label{
  font-size: clamp(.9rem, 2vw, 1.2rem);
  margin-bottom: 10px;
}

/* design du formulaire */

.formControls {
  display: block;
}

.rsform-input-box {
  width: 100%;
  padding: 0 !important;
}


/* ---------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------
  COPYRIGHT
------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */


.gtm-container-copyright {
  background-color: #fff;
}

.gtm-copyright {
  text-align: center;
  /* padding-left: 35px;
  padding-right: 35px; */
  color: #363b47;
  font-size: 16px !important;
  /* margin-bottom: 15px; */
}

.gtm-flinks {
  margin-top: 15px;
}

.gtm-flinks a {
  margin-top: 15px;
  color: #E7C167;
  font-size: 16px !important;
}

.gtm-flinks a:hover {
  color: #E7C167;
}

.gtm-copyright .moduletable.gtm-copyright-content {
  padding: 0px;
}


.gtm-copy-anim-logo {
  margin: 0px auto 0 auto;
  max-width: 400px;
}

.gtm-copy-anim-logo .gtm-lien-gestimark {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
}

a.gtm-lien-gestimark span {
  color: #fff;
  letter-spacing: 1px;
  font-size: 1.2rem;
  padding-right: 10px;
}

.gtm-copy-anim-logo .gtm-lien-gestimark img.gtm-g-gestimark {
  width: 35px;
  transform-origin: center;
  transition: all .2s ease-in-out;
}

.gtm-copy-anim-logo .gtm-lien-gestimark img.gtm-creation-de {
  width: 100px;
  padding-right: 10px;
}

.gtm-copy-anim-logo:hover .gtm-lien-gestimark img.gtm-g-gestimark {
  transform: rotate(-30deg);
}

/* ---------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------
  CREDTIS
------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

.gtm-credits .page-header {
  text-align: center;
}

.gtm-credits .com-content-article__body  {
  text-align: center !important;
}

.gtm-credits .com-content-article__body img.gtm-logo-gestimark-credit {
  width: 100%;
  max-width: 400px !important;
  padding-top: 80px;
  padding-bottom: 80px;
}

.gtm-footer, .gtm-copyright-content {
  background-color: #363b47;
}

.gtm-footer h3, .gtm-copyright-content h3 {
  color: #fff;
  text-align: left;
  margin-bottom: 15px;
  margin-top: 0;
}

.gtm-footer p, .gtm-copyright-content p, .gtm-copyright {
  color: #fff;
}

.gtm-footer img {
  max-width: 100px;
}

.gtm-footer p a, .gtm-copyright-content h6 a, .gtm-copyright-content span {
  color: #E7C167;
  font-weight: 900;
}

@media screen and (min-width: 576px) { 
  .gtm-footer img {
    max-width: 150px;
  }
}

@media screen and (min-width: 768px) { 
  .gtm-footer img {
    max-width: 100px;
  }
}

@media screen and (min-width: 992px) { 
  .gtm-footer img {
    max-width: 130px;
  }
}

@media screen and (min-width: 1300px) { 
  .gtm-footer img {
    max-width: 200px;
  }
}

/* ---------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------
MERCI / OUPS
------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

.gtm-img-merci .gtm-custom, .gtm-img-oups .gtm-custom {
  min-height: 50vh; 
}

@media screen and (min-width: 1024px) {

  .gtm-merci {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .gtm-img-merci {
    transform: translateY(-134px);
    width: 50vw;
  }

  .gtm-img-merci .gtm-custom, .gtm-img-oups .gtm-custom {
    min-height: 100vh;
  }
}

/* sitemap */
.gtm-box-article {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  }
  
  .osmap-sitemap { grid-area: 1 / 1 / 2 / 13; }
/* ---------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------
  COOKIES
------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

/* image de cookie */
.cc-revoke.cc-bottom {
  background-image: url(/images/cookie.svg);
  width: 30px;
  height: 30px;
  left: 15px;
  bottom: 15px;
  background-color: transparent !important;
  -webkit-animation: cookie 0.4ss .8s both;
  animation: cookie 0.4s .8s both;
}

.cc-revoke.cc-bottom:hover {
  background-image: url(/images/cookie-hover.svg);
}

@keyframes cookie {
  0% {  
    visibility: hidden;
    transform: translate(0%, 100%); 
  }
  100% {
    visibility: visible;
    transform: translate(0%, 0%); 
  }
}

/* grille du pop up */
.cc-message-text {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, auto);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
  
.cc-message-text .p1 { 
  grid-area: 1 / 1 / 2 / 2; 
  font-size: 16px;
}

.cc-message-text .cc-checkboxes-container {
  grid-area: 2 / 1 / 3 / 2;
  margin-top: 20px;
  margin-bottom: 20px;
}

.cc-message-text .cc-compliance {
  grid-area: 3 / 1 / 4 / 2;
}

/* bouton fermeture popup */
.cc-close {
  top: 0.8em;
  right: 0.6em;
  font-size: .8em;  
}

/* bouton fermeture popup */
.cc-link.cc-privacy {
  font-size: 16px;
}

/* boutons */
span.cc-cookie-settings-toggle, div.cc-window a.cc-btn {
  border-radius: 99px !important;
}

span.cc-cookie-settings-toggle, .cc-btn.cc-allowall, .cc-btn.cc-deny, a.cc-btn.cc-allow {
  font-size: 16px !important;
  font-weight: 500;
  padding: 5px 10px !important;
  line-height: 1.2;
  height: inherit !important;
}

span.cc-cookie-settings-toggle:hover, .cc-btn.cc-allowall:hover, .cc-btn.cc-deny:hover, a.cc-btn.cc-allow:hover {
  background-color: #E7C167 !important;
  border-color: #E7C167!important;
  color: #363B47 !important;
}

/* enlever le border-radius entre chaque catégorie de cookies */
div.cc-checkbox-container:not(:last-child) a {
  border-right: 0 solid #FFF;
}

/* lien politique de confidentialité et catégories de cookies */
a.cc-link.cc-privacy:hover {
  color: #363b47;
}

a.cc-link.cc-cookie-checkbox:hover label {
  color: #363b47;
}

/* alignement */
div.cc-checkboxes-container {
  align-items: center;
  margin-top: 0px;
}

input.cc-cookie-checkbox+span:after, input.cc-cookie-checkbox+span:before {
  display: none;
}

input.cc-cookie-checkbox {
  appearance: auto !important;
  opacity: 1;
}

.cc-cookie-settings-toggler {
  display: none !important;
}

input.cc-cookie-checkbox:checked+span:after, input.cc-cookie-checkbox:checked+span:before {
  display: none !important;
}

div.cc-checkboxes-container a.cc-btn.cc-allow {
  margin-bottom: 0px !important;
}

/* fond et bordure de la checkbox */
/* input.cc-cookie-checkbox+span {
  background-color: #fff;
  border: 1px solid #363B47;
  transform: translatey(4px);
} */

div.cc-checkboxes-container input[type=checkbox] {
  transform: translatey(4px);
}

/* margin label checkbox */
a.cc-link label {
  margin: 0 0 0 5px;
}

/* ---------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------
  POLITIQUE DE CONFIDENTIALITÉ
------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */
/* Formulaire droit à l'oubli */
.gtm-oubli {
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------
  POSITIONS
------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

.gtm-over, .gtm-top1, .gtm-top2, .gtm-top3, .gtm-box-article,
.gtm-bottom1, .gtm-bottom2, .gtm-bottom3, .gtm-bottom4, .gtm-bottom5, .gtm-bottom5, .gtm-bottom6, .gtm-bottom7, .gtm-footer {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.gtm-over.over {
  position: relative;
  max-width: 2560px;
  margin-left: auto;
  margin-right: auto;
}

.com-content-article, .com-finder.finder, .com-tags-tag  {
  grid-column:span 12;
}

/* Mobiles (jusqu'à 576px) */ 
.com-content-article,.com-content-article.gtm-12,.com-content-category-blog,.com-content-category-blog.gtm-12,.moduletable,.moduletable.gtm-12{grid-column:span 12}.com-content-article.gtm-1,.com-content-category-blog.gtm-1,.moduletable.gtm-1{grid-column:span 1}.com-content-article.gtm-2,.com-content-category-blog.gtm-2,.moduletable.gtm-2{grid-column:span 2}.com-content-article.gtm-3,.com-content-category-blog.gtm-3,.moduletable.gtm-3{grid-column:span 3}.com-content-article.gtm-4,.com-content-category-blog.gtm-4,.moduletable.gtm-4{grid-column:span 4}.com-content-article.gtm-5,.com-content-category-blog.gtm-5,.moduletable.gtm-5{grid-column:span 5}.com-content-article.gtm-6,.com-content-category-blog.gtm-6,.moduletable.gtm-6{grid-column:span 6}.com-content-article.gtm-7,.com-content-category-blog.gtm-7,.moduletable.gtm-7{grid-column:span 7}.com-content-article.gtm-8,.com-content-category-blog.gtm-8,.moduletable.gtm-8{grid-column:span 8}.com-content-article.gtm-9,.com-content-category-blog.gtm-9,.moduletable.gtm-9{grid-column:span 9}.com-content-article.gtm-10,.com-content-category-blog.gtm-10,.moduletable.gtm-10{grid-column:span 10}.com-content-article.gtm-11,.com-content-category-blog.gtm-11,.moduletable.gtm-11{grid-column:span 11}

.gtm-over .gtm-10 {
  grid-column: span 12;
  padding: 20px 15px;
}

/* Grands mobiles (à partir de 576px) */ 
@media ( min-width : 576px ) {
  .com-content-article.gtm-grand-mobile-1,.com-content-category-blog.gtm-grand-mobile-1,.moduletable.gtm-grand-mobile-1{grid-column:span 1}.com-content-article.gtm-grand-mobile-2,.com-content-category-blog.gtm-grand-mobile-12,.moduletable.gtm-grand-mobile-2{grid-column:span 2}.com-content-article.gtm-grand-mobile-3,.com-content-category-blog.gtm-grand-mobile-3,.moduletable.gtm-grand-mobile-3{grid-column:span 3}.com-content-article.gtm-grand-mobile-4,.com-content-category-blog.gtm-grand-mobile-4,.moduletable.gtm-grand-mobile-4{grid-column:span 4}.com-content-article.gtm-grand-mobile-5,.com-content-category-blog.gtm-grand-mobile-5,.moduletable.gtm-grand-mobile-5{grid-column:span 5}.com-content-article.gtm-grand-mobile-6,.com-content-category-blog.gtm-grand-mobile-6,.moduletable.gtm-grand-mobile-6{grid-column:span 6}.com-content-article.gtm-grand-mobile-7,.com-content-category-blog.gtm-grand-mobile-7,.moduletable.gtm-grand-mobile-7{grid-column:span 7}.com-content-article.gtm-grand-mobile-8,.com-content-category-blog.gtm-grand-mobile-8,.moduletable.gtm-grand-mobile-8{grid-column:span 8}.com-content-article.gtm-grand-mobile-9,.com-content-category-blog.gtm-grand-mobile-9,.moduletable.gtm-grand-mobile-9{grid-column:span 9}.com-content-article.gtm-grand-mobile-10,.com-content-category-blog.gtm-grand-mobile-10,.moduletable.gtm-grand-mobile-10{grid-column:span 10}.com-content-article.gtm-grand-mobile-11,.com-content-category-blog.gtm-grand-mobile-11,.moduletable.gtm-grand-mobile-11{grid-column:span 11}.com-content-article.gtm-grand-mobile-12,.com-content-category-blog.gtm-grand-mobile-12,.moduletable.gtm-grand-mobile-12{grid-column:span 12}
}

/* Appareils de taille moyenne (tablettes, 768px et plus) */ 
@media ( min-width : 768px ) {
  .com-content-article.gtm-tablette-1,.com-content-category-blog.gtm-tablette-1,.moduletable.gtm-tablette-1{grid-column:span 1}.com-content-article.gtm-tablette-2,.com-content-category-blog.gtm-tablette-12,.moduletable.gtm-tablette-2{grid-column:span 2}.com-content-article.gtm-tablette-3,.com-content-category-blog.gtm-tablette-3,.moduletable.gtm-tablette-3{grid-column:span 3}.com-content-article.gtm-tablette-4,.com-content-category-blog.gtm-tablette-4,.moduletable.gtm-tablette-4{grid-column:span 4}.com-content-article.gtm-tablette-5,.com-content-category-blog.gtm-tablette-5,.moduletable.gtm-tablette-5{grid-column:span 5}.com-content-article.gtm-tablette-6,.com-content-category-blog.gtm-tablette-6,.moduletable.gtm-tablette-6{grid-column:span 6}.com-content-article.gtm-tablette-7,.com-content-category-blog.gtm-tablette-7,.moduletable.gtm-tablette-7{grid-column:span 7}.com-content-article.gtm-tablette-8,.com-content-category-blog.gtm-tablette-8,.moduletable.gtm-tablette-8{grid-column:span 8}.com-content-article.gtm-tablette-9,.com-content-category-blog.gtm-tablette-9,.moduletable.gtm-tablette-9{grid-column:span 9}.com-content-article.gtm-tablette-10,.com-content-category-blog.gtm-tablette-10,.moduletable.gtm-tablette-10{grid-column:span 10}.com-content-article.gtm-tablette-11,.com-content-category-blog.gtm-tablette-11,.moduletable.gtm-tablette-11{grid-column:span 11}.com-content-article.gtm-tablette-12,.com-content-category-blog.gtm-tablette-12,.moduletable.gtm-tablette-12{grid-column:span 12}
} 

/* Grands appareils (grandes tablettes, ordinateurs de bureau, 992px et plus) */ 
@media ( min-width : 992px ) {
  .com-content-article.gtm-tablette-plus-1,.com-content-category-blog.gtm-tablette-plus-1,.moduletable.gtm-tablette-plus-1{grid-column:span 1}.com-content-article.gtm-tablette-plus-2,.com-content-category-blog.gtm-tablette-plus-2,.moduletable.gtm-tablette-plus-2{grid-column:span 2}.com-content-article.gtm-tablette-plus-3,.com-content-category-blog.gtm-tablette-plus-3,.moduletable.gtm-tablette-plus-3{grid-column:span 3}.com-content-article.gtm-tablette-plus-4,.com-content-category-blog.gtm-tablette-plus-4,.moduletable.gtm-tablette-plus-4{grid-column:span 4}.com-content-article.gtm-tablette-plus-5,.com-content-category-blog.gtm-tablette-plus-5,.moduletable.gtm-tablette-plus-5{grid-column:span 5}.com-content-article.gtm-tablette-plus-6,.com-content-category-blog.gtm-tablette-plus-6,.moduletable.gtm-tablette-plus-6{grid-column:span 6}.com-content-article.gtm-tablette-plus-7,.com-content-category-blog.gtm-tablette-plus-7,.moduletable.gtm-tablette-plus-7{grid-column:span 7}.com-content-article.gtm-tablette-plus-8,.com-content-category-blog.gtm-tablette-plus-8,.moduletable.gtm-tablette-plus-8{grid-column:span 8}.com-content-article.gtm-tablette-plus-9,.com-content-category-blog.gtm-tablette-plus-9,.moduletable.gtm-tablette-plus-9{grid-column:span 9}.com-content-article.gtm-tablette-plus-10,.com-content-category-blog.gtm-tablette-plus-10,.moduletable.gtm-tablette-plus-10{grid-column:span 10}.com-content-article.gtm-tablette-plus-11,.com-content-category-blog.gtm-tablette-plus-11,.moduletable.gtm-tablette-plus-11{grid-column:span 11}.com-content-article.gtm-tablette-plus-12,.com-content-category-blog.gtm-tablette-plus-12,.moduletable.gtm-tablette-plus-12{grid-column:span 12}
} 

/* Appareils très grands (grands ordinateurs, 1200px et plus) */ 
@media ( min-width : 1200px ) {
  .com-content-article.gtm-ordinateur-1,.com-content-category-blog.gtm-ordinateur-1,.moduletable.gtm-ordinateur-1{grid-column:span 1}.com-content-article.gtm-ordinateur-2,.com-content-category-blog.gtm-ordinateur-2,.moduletable.gtm-ordinateur-2{grid-column:span 2}.com-content-article.gtm-ordinateur-3,.com-content-category-blog.gtm-ordinateur-3,.moduletable.gtm-ordinateur-3{grid-column:span 3}.com-content-article.gtm-ordinateur-4,.com-content-category-blog.gtm-ordinateur-4,.moduletable.gtm-ordinateur-4{grid-column:span 4}.com-content-article.gtm-ordinateur-5,.com-content-category-blog.gtm-ordinateur-5,.moduletable.gtm-ordinateur-5{grid-column:span 5}.com-content-article.gtm-ordinateur-6,.com-content-category-blog.gtm-ordinateur-6,.moduletable.gtm-ordinateur-6{grid-column:span 6}.com-content-article.gtm-ordinateur-7,.com-content-category-blog.gtm-ordinateur-7,.moduletable.gtm-ordinateur-7{grid-column:span 7}.com-content-article.gtm-ordinateur-8,.com-content-category-blog.gtm-ordinateur-8,.moduletable.gtm-ordinateur-8{grid-column:span 8}.com-content-article.gtm-ordinateur-9,.com-content-category-blog.gtm-ordinateur-9,.moduletable.gtm-ordinateur-9{grid-column:span 9}.com-content-article.gtm-ordinateur-10,.com-content-category-blog.gtm-ordinateur-10,.moduletable.gtm-ordinateur-10{grid-column:span 10}.com-content-article.gtm-ordinateur-11,.com-content-category-blog.gtm-ordinateur-11,.moduletable.gtm-ordinateur-11{grid-column:span 11}.com-content-article.gtm-ordinateur-12,.com-content-category-blog.gtm-ordinateur-12,.moduletable.gtm-ordinateur-12{grid-column:span 12}
}

/* ---------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------
  PAGE POSITIONS - MATRICE
------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

.gtm-mod-pos .gtm-custom {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 20px;
  row-gap: 20px;
}

.mod-pos-header {
  grid-column: span 12;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px 30px;
  text-align: center;
}

.gtm-mod-pos .gtm-custom div {
  height: 300px;
  background-color: whitesmoke;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px 30px;
  text-align: center;
}

.gtm-mod-pos .gtm-custom div {
  grid-column: span 12;
}

@media ( min-width : 768px ) {

.gtm-mod-pos .gtm-custom .gtm-tablette-6 {
  grid-column: span 6;
}

.gtm-mod-pos .gtm-custom .gtm-tablette-4 {
  grid-column: span 4;
}
}

@media ( min-width : 1200px ) {
.gtm-mod-pos .gtm-custom .gtm-ordinateur-2 {
  grid-column: span 2;
}

.gtm-mod-pos .gtm-custom .gtm-ordinateur-4 {
  grid-column: span 4;
}

.gtm-mod-pos .gtm-custom .gtm-ordinateur-8 {
  grid-column: span 8;
}
}

/* devenir bénévole */
.gtm-blocs-verticaux {
  display: flex;
  flex-direction: column;
}