/* ---------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------
  TYPOGRAPHIES
------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

/* -------------- Lato --------------- */

@font-face {
  font-family: 'Lato';
  src: url('../typographies/Lato-Light.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../typographies/Lato-LightItalic.woff2') format('woff2');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../typographies/Lato-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../typographies/Lato-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../typographies/Lato-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../typographies/Lato-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* -------------- Bebas --------------- */

@font-face {
  font-family: 'BebasNeue-Regular';
  src: url('../typographies/BebasNeue-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* -------------- Meow Script --------------- */

@font-face {
  font-family: 'MeowScript-Regular';
  src: url('../typographies/MeowScript-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------
  VARIABLES
------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

/* ----------------------------------------
   TYPOGRAPHIES
---------------------------------------- */

:root {
  --font-primary: 'Lato', sans-serif; /* police principale */
  --font-heading: 'BebasNeue-Regular', sans-serif; /* police titre */
  --font-script: 'MeowScript-Regular', sans-serif; /* police titre */
  
  /* Poids des polices */
  --font-weight-light: 200;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* Styles de police */
  --font-style-normal: normal;
  --font-style-italic: italic;
  
  /* Tailles de police */
  --font-size-base: 16px; /* taille de base */
  --font-size-small: 0.875rem; /* petite taille */
  --font-size-medium: 1rem; /* taille moyenne */
  --font-size-large: 1.25rem; /* grande taille */
  --font-size-heading: 2rem; /* titre principal */
  --font-size-subheading: 1.5rem; /* sous-titre */
  
  /* Interlignage */
  --line-height-base: 1.5; /* interligne normal */
  --line-height-heading: 1.2; /* interligne pour les titres */
}

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

/* Palette de couleurs */
:root {
  --color-primary: #2a2b1d; /* Vert foncé principal */
  --color-secondary: #e19132; /* Orange secondaire */
  --color-text: #2a2b1d; /* texte principal */
  --color-text-light: #f7f0e2; /* texte sur fond de couleur */
  --color-background: #2a2b1d; /* fond d'arrière plan */
  --color-link: #e19132; /* couleur des liens */
  --color-link-hover: #9b9c32; /* hover sur les liens */
}

/* ----------------------------------------
   ESPACEMENTS
---------------------------------------- */

/* Marges et paddings */
:root {
  --space-xs: 8px; /* petit espace */
  --space-sm: 16px; /* espace moyen */
  --space-md: 24px; /* grand espace */
  --space-lg: 32px; /* très grand espace */
  --space-xl: 48px; /* maximum espace */
}

/* ----------------------------------------
   AUTRES VARIABLES UTILES
---------------------------------------- */

/* Bordures arrondies */
:root {
  --border-radius: 2vw; /* arrondir les coins */
  --border-radius-small: 10px; /* petit arrondi */
}

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

html{
  max-width: 2560px;
  height: 100%;
  margin: 0 auto;
  -webkit-text-size-adjust: 100%;
  font-size: 18px;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font-primary);
  font-weight:  var(--font-weight-normal);
}

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: 8vw;
  margin-bottom: 0px;
  position: relative;
}

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

img.gtm-border-radius {
  border-radius: var(--border-radius);
}

img.gtm-border-radius-left {
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}

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

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

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

h1 {
  font-size: clamp(3rem, 6.5vw, 6.5rem);
  margin-bottom: 15px;
  font-family: var(--font-heading);
  color: var(--color-primary);
}

h2 {
  font-size: clamp(2.5rem, 5.5vw, 3.5rem);
  margin-bottom: 15px;
  font-family: var(--font-heading);
  color: var(--color-primary);
}

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

h4 {
  font-size: clamp(1.2rem, 3vw, 1.8rem); 
  margin-bottom: 15px;
  font-family: var(--font-heading);
  color: var(--color-primary);
}

h5 {
  font-size: clamp(1rem, 2vw, 1.2rem);
  margin-bottom: 15px;
  font-family: var(--font-heading);
  color: var(--color-primary);
}

h6 {
  font-size: clamp(.9rem, 1.8vw, 1rem);
  margin-bottom: 15px;
  font-family: var(--font-heading);
  color: var(--color-primary);
}

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

p {
  font-size: clamp(.9rem, 2vw, 1.2rem);
  margin-bottom: 15px;
  color: var(--color-primary);
}

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

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

a {
  text-decoration: none !important;
  cursor: pointer;
  color: var(--color-link);
  font-size: clamp(.9rem, 2vw, 1.2rem);
  transition: color .2s ease-in-out;
  position: relative;
  margin-bottom: 15px;
}

a:hover {
  color: var(--color-link-hover);
}


/* -------------------- Textes spéciaux ------------------ */

.gtm-last-word span.gtm-last-word-color {
  color: var(--color-secondary);
}

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

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

/* bouton 1 */
a.gtm-btn-primary {
  background-color: var(--color-link);
  color: var(--color-text-light);
  padding: 8px 20px;
  border-radius: 99px;
  margin-top: 10px;
  display: inline-block;
  transition: background-color .2s ease-in-out;
}


a.gtm-btn-primary:hover {
  background-color: var(--color-background);
}


/* bouton 2 */
a.gtm-btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-text-light);
  padding: 8px 20px;
  border-radius: 99px;
  margin-top: 10px;
  display: inline-block;
  transition: background-color .2s ease-in-out;
}

a.gtm-btn-secondary:hover {
  color: #fff;
}

/* boutons joomla */

.btn.btn-primary {
  background-color: var(--color-link-hover);
  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;
}

@media screen and (max-width: 1200px) {
  .btn.btn-primary {
  background-color: var(--color-secondary) !important;
  color: whitesmoke !important;
  border-radius: 99px !important;
}
}


/* 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"] {
  position: relative;
  background-color: transparent !important;
  border: none !important;
  padding: 8px 15px !important;
  font-family: var(--font-heading) !important;
  font-size: 20px !important;
  color: var(--color-primary) !important;
  margin: 15px 0px !important;
  border-radius: 4px !important;
  text-shadow: none !important;
  box-shadow: none !important;
  background-image: none !important;
  cursor: pointer !important;
  transition: all .2s ease-in-out !important;
}

@media screen and (max-width: 1200px) {
  .gtm-box-section-dark button[type="submit"] {
  background-color: var(--color-secondary) !important;
  color: var(--color-text-light) !important;
  border-radius: 99px !important;
}
}


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

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

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;
  font-size: clamp(.9rem, 2vw, 1.2rem);
}

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

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

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

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

.moduletable.gtm-no-padding-l {
  padding-left: 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-h {
  margin-left: 0;
  margin-right: 0;
}

.moduletable.gtm-no-margin-v {
  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: #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 */

.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) {

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

.gtm-debug .moduletable {
  padding: 0;
}
/* --------- 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.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(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: 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;
  }


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

  /* bouton 1 */
  a.gtm-btn-primary {
    position: relative;
    z-index: 1;
    display: inline-block;
    background-color: transparent !important;
    color: var(--color-text);
    text-align: center;
    font-family: var(--font-heading);
    font-size: 20px;
    line-height: 1.3rem;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 10px 15px;
    margin: 25px 25px 25px 0px;
    mix-blend-mode: normal;
    -webkit-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
  }

  .gtm-text-lien {
    position: relative;
    z-index: 1;
  }

  .gtm-btn-circle {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    background-color: var(--color-link);
    top: 50%;
    left: 0px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 0;
    /* mix-blend-mode: color-dodge; */
    -webkit-transition: width .2s ease-in-out;
    -o-transition: width .2s ease-in-out;
    transition: width .2s ease-in-out;
  }

  a.gtm-btn-primary:hover {
    color: #fff;
  }

  a.gtm-btn-primary:hover .gtm-btn-circle {
    width: 100%;
  }


  /* bouton 2 */
  a.gtm-btn-secondary {
    position: relative;
    z-index: 1;
    display: inline-block;
        background-color: transparent !important;
    color: var(--color-text-light);
    text-align: center;
    font-family: var(--font-heading);
    font-size: 20px;
    line-height: 1.3rem;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 10px 15px;
    margin: 25px 25px 25px 0px;
    mix-blend-mode: normal;
    -webkit-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
  }

  .gtm-text-lien {
    position: relative;
    z-index: 1;
  }

  .gtm-btn-circle-secondary {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    background-color: var(--color-link);
    top: 50%;
    left: 0px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 0;
    /* mix-blend-mode: color-dodge; */
    -webkit-transition: width .2s ease-in-out;
    -o-transition: width .2s ease-in-out;
    transition: width .2s ease-in-out;
  }

  a.gtm-btn-secondary:hover {
    color: #fff;
    background-color: none;
  }

  a.gtm-btn-secondary:hover .gtm-btn-circle-secondary {
    width: 100%;
  }

  /* bouton envoyer */

  button[type="submit"] {
    position: relative;
    background-color: transparent !important;
    border: none !important;
    padding: 8px 15px !important;
    font-family: var(--font-heading) !important;
    font-size: 20px !important;
    color: var(--color-primary) !important;
    margin: 15px 0px !important;
    border-radius: 4px !important;
    text-shadow: none !important;
    box-shadow: none !important;
    background-image: none !important;
    cursor: pointer !important;
    transition: all .2s ease-in-out !important;
  }

  button[type="submit"]:hover .gtm-btn-circle{
    width: 100%;
    color: var(--color-text-light) !important;
  }

  .gtm-box-section-dark button[type="submit"] {
    color: var(--color-text-light) !important;
  }

  .gtm-infolettre button[type="submit"] {
      color: var(--color-text-light) !important;
  }
}

/* ---------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------
  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-copyright {
  text-align: center;
  padding-left: 35px;
  padding-right: 35px;
  color: #2a2b1d;
  font-size: 16px !important;
  margin-bottom: 15px;
}

.gtm-flinks {
  margin-bottom: 5px;
}

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

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


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


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

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

a.gtm-lien-gestimark  {
  margin-bottom: 0px;
}

a.gtm-lien-gestimark span {
  color: #2a2b1d;
  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);
}

/* ---------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------
  POLITIQUE DE CONFIDENTIALITE      
------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

.gtm-confidentialite {
  width: 1200px;
  max-width: fit-content;
  margin: 0 auto;
}

#politique-de-confidentialite .gtm-content-footer {
    margin-top: 0vw;
    padding-top: 0vw;
}

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

#oups .gtm-wrapper, #merci .gtm-wrapper {
  margin-top: 0px;
  margin-bottom: 0px;
}

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

  .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: 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: #e19132 !important;
  border-color: 0px #e19132!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: #e19132;
}

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


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

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

.com-content-article, .osmap-sitemap {
  grid-column:span 12;
}

/* Mobiles (jusqu'à 768px) */ 
.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}

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


/* ---------------------------------------------------------------------------------------------------------------------
  Site Map
--------------------------------------------------------------------------------------------------------------------- */

.osmap-sitemap {
  padding: 40px;
}


/* ---------------------------------------------------------------------------------------------------------------------
  Curseur personnalisé
--------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width: 1200px) {
  #gtm-custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  background-color: #fff;
  mix-blend-mode: difference;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, background-color 0.2s ease;
  z-index: 9999;
}
}

/* ---------------------------------------------------------------------------------------------------------------------
  Infolettre
--------------------------------------------------------------------------------------------------------------------- */

.gtm-infolettre input[type="text"], .gtm-infolettre input[type="email"], .gtm-infolettre input[type="tel"], .gtm-infolettre input[type="search"], .gtm-infolettre input[type="url"], input[type="password"], .gtm-infolettre textarea {
    background-color: transparent;
    border: 2px solid whitesmoke !important;
    border-radius: 99px;
    color: whitesmoke;
}

.gtm-infolettre input[type="text"]::placeholder, .gtm-infolettre input[type="email"]::placeholder, .gtm-infolettre input[type="tel"]::placeholder, .gtm-infolettre input[type="search"]::placeholder, .gtm-infolettre input[type="url"]::placeholder, input[type="password"]::placeholder, .gtm-infolettre textarea {
    color: whitesmoke;
}

.gtm-infolettre input[type="button"] {
  background-color: var(--color-background);
  color: var(--color-text-light) !important;
  padding: 8px 20px;
  border-radius: 99px;
  margin-top: 10px;
  display: inline-block;
  transition: background-color .2s ease-in-out;
}

.gtm-infolettre input[type="button"]:hover {
  color: #fff;
}