/* ---------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------
  RESET
------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

html{
  max-width: 2560px;
  height: 100%;
  margin: 0 auto;
  -webkit-text-size-adjust: 100%;
  font-size: 18px;
  font-family: 'Comfortaa', Arial, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

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;
  font-weight: 300;
}

.gtm-confidentialite strong {
  font-weight: 800;
}

.gtm-wrapper {
  flex-grow: 1;
  /* margin-top: 65px; */
  margin-bottom: 65px;
}

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

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

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

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

h1 {
  font-size: clamp(1.4rem, 5.5vw, 1.7rem);
  margin: 0 0 15px 0;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  font-family: 'Comfortaa', Arial, sans-serif;
  color: #2b3249;
  line-height: 1.3em;
}

h2 {
  font-size: clamp(1.2em, 5vw, 1.4rem);
  margin: 0;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  font-family: 'Comfortaa', Arial, sans-serif;
  color: #2b3249;
  line-height: 1.3em;
}

h3 {
  font-size: clamp(1.4rem, 4vw, 2rem); 
  margin-bottom: 15px;
}

h4 {
  font-size: clamp(1.2rem, 3vw, 1.8rem); 
  margin-bottom: 15px;
  font-family: 'variane_scriptregular';
}

h5 {
  font-size: clamp(1.1rem, 2.5vw, 1.6rem); 
  margin-bottom: 15px;
}

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

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

p {
  font-size: clamp(1.2em, 2vw, 1.2rem);
  margin-bottom: 15px;
  line-height: 1.6em;
}

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

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

a {
  text-decoration: none !important;
  cursor: pointer;
  color: #0B4375;
  font-size: clamp(1em, 2vw, 1.33em);
  font-weight: 400;
  transition: color .5s ease-in-out;
  position: relative;
  margin-bottom: 15px;
}

a:active, a:hover {
  color: #8CB7C6;
  text-decoration: none;
}

a:visited {
  color: violet;
}

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

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

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

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

/* boutons gestimark */

a.gtm-bouton {
  background: #aac4cc;
  color: #ffffff;
  padding: 14px 24px;
  margin: 15px 0 15px 0;
  line-height: 1.3em;
  display: block;
  text-align: center;
}

a.gtm-bouton:hover {
  background: #2b3249;
  color: #fff;
  text-decoration: none;
}

a.gtm-bouton-outline {
  display: inline-block;
  background: none;
  border: 3px solid #fff;
  color: #fff;
  padding: 12px 22px;
  margin-top: 15px;
}

a.gtm-bouton-outline:hover {
  display: inline-block;
  background: #fff;
  border: 3px solid #fff;
  color: #2b3249;
  padding: 12px 22px;
  margin-top: 15px;
}

a.gtm-btn-primary {
  border-radius: 99px;
  margin-bottom: 20px;
  box-sizing: border-box;
  color: #fff;
  margin-top: 20px;
  background-color: blue;
  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-primary:visited {
  background-color: blueviolet;
}

a.gtm-btn-primary:hover {
  background-color: lightpink;
}


a.gtm-btn-secondary {
  border-radius: 99px;
  margin-bottom: 20px;
  box-sizing: border-box;
  color: #fff;
  margin-top: 20px;
  background-color: orange;
  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-secondary:visited {
  background-color: orangered;
}

a.gtm-btn-secondary:hover {
  background-color: lightcoral;
}

/* boutons joomla */

.btn.btn-primary {
  background-color: #E78402;
  border: none;
  padding: 8px 15px;
  font-size: clamp(.9rem, 2vw, 1rem);
  color: whitesmoke;
  margin: 15px 0px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .3s ease-in-out;
}

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

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

.btn.btn-secondary {
  background-color: #f05246;
  border: none;
  padding: 8px 15px;
  font-size: clamp(.9rem, 2vw, 1rem);
  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;
  box-sizing: border-box;
  color: #fff;
  margin-top: 20px;
  background-color: green;
  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;
}

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

.readmore .btn-secondary:hover {
  background-color: darkcyan;
}

/* bouton envoyer */

button[type="submit"] {
  background-color: #15C877 !important;
  border: none !important;
  padding: 8px 15px !important;
  font-size: clamp(.9rem, 2vw, 1rem) !important;
  color: whitesmoke !important;
  margin: 15px 0px !important;
  border-radius: 4px !important;
  text-shadow: none !important;
  background-image: none !important;
  cursor: pointer !important;
  transition: all .2s ease-in-out !important;
}

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

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


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

/* Liste gestimark */
ul, ol {
  margin-left: 40px;
  margin: 5px 10px 15px 10px;
  ;
}

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;
}

li {
  font-weight: 400;
  font-size: 1.2em;
  line-height: 1.7em;
  margin: 5px 10px 0 10px;
  margin-bottom: 1em;
}

li::marker {
  color: #aac4cc;
}

/* 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...) */

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

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: 1px solid #E78402 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------------------------------------------------------
  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;
}

/* ---------------------------------------------------------------------------------------------------------------------
  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;
}

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

.moduletable.gtm-bg {
  padding: 0px 0px;
  background-color: orchid;
}

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

.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 ;
  }
}

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

/* 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%;
}

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

/* ---------------------------------------------------------------------------------------------------------------------
  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
--------------------------------------------------------------------------------------------------------------------- */

.gtm-box-article {
  display: flex;
  flex-direction: column;
}

.com-content-article {
  flex: 0 1 100%;
  align-self: auto;
  padding: 20px;
}

.gtm-accueil {
  background-color: #2b3249;
}

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

  .gtm-box-article {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

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

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

.gtm-top1, .gtm-top2, .gtm-top3, 
.gtm-bottom1, .gtm-bottom2, .gtm-bottom3, .gtm-bottom4, .gtm-bottom5 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.gtm-bottom2 {
  background-color: #aac4cc;
}

.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;
}

@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.items-leading .com-content-category-blog__item.blog-item {
  display: flex;
  gap: 20px;
  margin-bottom: 4vw;
}

/* ----------- 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;
}

/* 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;
}

/* --------------------------------- 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 3 colonne */
  .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;
  }

  /* 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(4, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-column-gap: 20px;
    grid-row-gap: 40px;
  }
  
  .com-content-article.item-page.gtm-blogue .page-header:nth-child(1) {
    grid-area: 2 / 1 / 3 / 5;
  }

  .com-content-article.item-page.gtm-blogue .page-header:nth-child(2) {
    grid-area: 1 / 1 / 2 / 5;
  }

  .com-content-article.item-page.gtm-blogue .left.item-image {
    grid-area: 3 / 1 / 4 / 3;
  }

  .com-content-article.item-page.gtm-blogue .com-content-article__body {
    grid-area: 3 / 3 / 4 / 5;
  }

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

@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;
}

.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: #eaeaea;
}

.gtm-copyright {
  text-align: center;
  padding-left: 35px;
  padding-right: 35px;
}

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

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

.gtm-flinks a:visited {
  color: #333;
}

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

.gtm-copyright  {
  padding-top: 15px;
  color: #0B4375;
  font-size: 16px !important;
  margin-bottom: 15px;
}

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


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

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

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: 30px;
  transform-origin: center;
  transition: all .2s ease-in-out;
}

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

.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;
}

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

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

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

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

  .gtm-merci, .gtm-oups {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* transform: translateY(-105px); */
  }

  /* .gtm-img-merci, .gtm-img-oups {
    transform: translateY(-105px);
  } */

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

/* ---------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------
  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;
}

@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: 0;
  margin-bottom: 10px;
}

.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: #2b3249 !important;
  border-color: #2b3249!important;
}

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

a.cc-link.cc-cookie-checkbox:hover label {
  color: #2b3249;
}


/* 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;
}


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

@media screen and (min-width: 768px) {
  .gtm-20 {
    flex-basis: 50%;
  }

  .gtm-50 {
    flex-basis: 50%;
  }

  .gtm-20-gauche-droite {
    flex-basis: 100%;
  }
}

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

  .gtm-left {
    flex: 0 1 100%;
    align-self: auto;
  }

  .gtm-right {
    flex: 0 1 100%; 
    align-self: auto;
  }

  .gtm-20 {
    flex-basis: 20%;
  }

  .gtm-20-gauche-droite {
    flex-basis: 20%;
  }

  .gtm-30 {
    flex-basis: 30%;
  }

  .gtm-33 {
    flex-basis: 33.33%;
  }

  .gtm-40 {
    flex-basis: 40%;
  }

  .gtm-60 {
    flex-basis: 60%;
  }

  .gtm-70 {
    flex-basis: 70%;
  }

  .gtm-80 {
    flex-basis: 80%;
  }
}