/** Variables tailles / couleurs / fonts / titles **/

:root {

 --width-iframe-desktop: 1000px;
 --width-iframe-tablette: 768px;
 --width-iframe-mobile: 340px;

 --couleur-font: #3a3a3a;
 --couleur-primaire: #1e8578;
 --couleur-secondaire: #ee7d30;
 --couleur-input: #f2f2f2;
 --couleur-warning: #ce3218;
 --couleur-middle: #cfc805;
 --couleur-validate: #6fbe09;

 --font-size: 16px;
 --font-size-responsive: 14px;
 --font-size-mobile: 12px;
 --line-height: 20px;
 --line-height-responsive: 18px;
 --line-height-mobile: 16px;
 --letter-spacing: 0;
 --text-font-family: "Manjari", sans-serif;
 --title-font-family: "Oswald", sans-serif;

}


/** Contenant de plus haut niveau **/
body {
 max-width: var(--width-iframe-desktop);
 font-family: var(--text-font-family);
 line-height: var(--line-height);
}

body .layout {
 background-color: #FFF;
 padding: 32px 31px;
 width: 100%;
}

body .layout .section {
 margin: 0px 0px;
}


/** Titre **/
h1 {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 105px;
 width: 100%;
 margin: 0px 0px 20px;
 background: var(--couleur-primaire);
 font-size: 30px;
 font-family: var(--title-font-family) !important;
 font-weight: 500;
 color: #FFF;
 text-transform: uppercase;
}


/** Sous-titre **/
h2 {
 font-size: 24px;
 font-family: var(--text-font-family) !important;
 font-weight: 800;
 line-height: var(--line-height);
 color: var(--couleur-primaire);
 text-align: center;
 display: inline-block;
 width: 100%;
 text-transform: uppercase;
 margin-top: 60px;
 margin-bottom: 30px;
 letter-spacing: 0.05em;
 -webkit-text-stroke: 0.03em var(--couleur-primaire);
}

h3 {
 font-size: var(--font-size); 
 font-family: var(--text-font-family) !important;
 font-weight: 500;
 line-height: var(--line-height);
 color: var(--couleur-font);
 text-align: center;
 display: inline-block;
 width: 100%;
}


/** Liens blocs de textes **/
.stylingblock-content-wrapper .stylingblock-content-wrapper a {
 color: var(--couleur-font);
 transition: 0.3s;
}

.stylingblock-content-wrapper .stylingblock-content-wrapper a:hover {
 color: var(--couleur-secondaire);
}


/** Bouton **/
.buttonblock {
 -webkit-border-radius: 0px !important;
 background-color: transparent !important;
}

.buttonblock > a {
 text-decoration: none !important;
 font-size: 18px !important;
 font-family: var(--text-font-family) !important;
 font-weight: 800;
 color: #FFF !important;
 display: flex !important;
 align-items: center;
 justify-content: center;
 background: var(--couleur-secondaire);
 background-color: var(--couleur-secondaire) !important;
 text-align: center !important;
 width: fit-content;
 height: 35px;
 border-radius: 40px !important;
 text-transform: uppercase;
 min-width: 320px;
 margin: 0px auto;
 transition: 0.3s;
 padding: 7px 25px 0px !important;
 letter-spacing: 0.04em;
 -webkit-text-stroke: 0.03em #FFF;
 border: unset !important;
 cursor: pointer;
}

.buttonblock:hover > a, .buttonblock > a:hover {
 background: var(--couleur-primaire) !important;
 background-color: var(--couleur-primaire) !important;
}


/** Formulaire **/

/* Bloc parent */
.section .stylingblock-content-wrapper form.smartcapture-content-wrapper {
 margin: 0px 0px !important;
 padding: 20px 0px 0px 0px !important;
 border-top: 2px solid #dedfd9;
 font-size: 14px;
 font-family: var(--text-font-family);
 color: var(--couleur-font);
 text-align: center;
}

/* Bloc avec input text */
.stylingblock-content-wrapper form table.stylingblock-content-wrapper:has(input[type="text"]) {
 min-width: unset !important;
 width: 50%;
 float: left;
}

/* Bloc avec input email */
.stylingblock-content-wrapper form table.stylingblock-content-wrapper:has(input[type="email"]) {
 min-width: unset !important;
 width: 50%;
 float: left;
}

/* Bloc avec checkbox */
.stylingblock-content-wrapper form table.stylingblock-content-wrapper:has(input[type="checkbox"]) {
 min-width: unset !important;
 width: 100%;
 float: left;
}

.stylingblock-content-wrapper form table.stylingblock-content-wrapper .smartcapture-controls:has(input[type="checkbox"]) {
 flex-direction: column;
}

.stylingblock-content-wrapper form table.stylingblock-content-wrapper .smartcapture-controls:has(.sc-formfield-label) {
 justify-content: space-between;
 display: flex;
 padding: 0px 20px;
 padding-bottom: 20px !important;
 margin-bottom: 20px;
 border-bottom: 2px solid #dedfd9;
}

/* Optin */
.stylingblock-content-wrapper form table.stylingblock-content-wrapper .smartcapture-controls input[name="Optin Actus"] {
 border-bottom: 5px solid #dedfd9 !important;
}

/* Labels */
.stylingblock-content-wrapper form .smartcapture-controls > .sc-formfield-label {
 width: fit-content;
 float: left;
 display: flex;
 align-items: center;
 font-size: var(--font-size) !important; 
 font-family: var(--text-font-family) !important;
 font-weight: 500;
 line-height: var(--line-height);
 color: var(--couleur-font) !important;
}

.stylingblock-content-wrapper form .smartcapture-controls > .sc-formfield-label label {
 font-size: var(--font-size) !important; 
 font-family: var(--text-font-family) !important;
 font-weight: 500;
 line-height: 14px !important;
 color: var(--couleur-font) !important;
 margin-top: 4px;
 margin-bottom: -3px !important;
}

/* Labels checkbox*/
.stylingblock-content-wrapper form .smartcapture-controls:has(input[type="checkbox"]) > .sc-formfield-label {
 margin-top: 13px;
}

/* Inputs */
.stylingblock-content-wrapper form .smartcapture-controls > .sc-formfield-input {
 width: fit-content;
 float: right;
}

.stylingblock-content-wrapper form .smartcapture-controls > .sc-formfield-input input {
 width: 320px !important;
 height: 46px !important;
 border: unset;
 background: var(--couleur-input);
 transition: 0.3s;
 border: 2px solid var(--couleur-input);
 font-family: var(--text-font-family);
 font-size: var(--font-size);
 color: var(--couleur-font);
 padding: 4px 10px 0px 10px;
}

.stylingblock-content-wrapper form .smartcapture-controls > .sc-formfield-input input:hover {
 border: 2px solid var(--couleur-secondaire);
}

.stylingblock-content-wrapper form .smartcapture-controls > .sc-formfield-input input:active {
 border: 2px solid var(--couleur-secondaire);
}

.stylingblock-content-wrapper form .smartcapture-controls > .sc-formfield-input input:focus {
 border: 2px solid var(--couleur-secondaire);
}

.stylingblock-content-wrapper form .smartcapture-controls > .sc-formfield-input input:focus-visible {
 outline: unset !important
}


/****************** Checkbox ******************/

/* Bloc parent */
.stylingblock-content-wrapper form .smartcapture-controls > .sc-formfield-input-wrapper:has(input[type="checkbox"]) {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
}
.stylingblock-content-wrapper form .smartcapture-controls > .sc-formfield-input-wrapper .sc-formfield-input:has(input[type="checkbox"]) {
 flex: 33%;
}

/* Label */
.stylingblock-content-wrapper form .smartcapture-controls > .sc-formfield-input-wrapper .sc-formfield-input label {
 font-family: var(--text-font-family) !important;
 font-size: var(--font-size) !important;
 color: var(--couleur-font) !important;
}

/* Input */
.custom-checkbox {
 width: 20px;
 height: 20px;
 display: inline-block;
 position: relative;
 z-index: 1;
 top: 16px;
 border: 5px solid #f2f2f2;
 margin-right: 10px;
 margin-bottom: 6px;
 transition: 0.3s;
}
.custom-checkbox::before {
 content: '✔';
 color: #FFF;
 position: absolute;
 top: 4px;
 left: 2px;
 font-size: 20px;
 display: none;
 transition: 0.3s;
 font-weight: 600;
}
.custom-checkbox.selected::before {
 display: block;
}
.custom-checkbox:hover {
 border: 5px solid var(--couleur-primaire);
}
.custom-checkbox.selected {
 border: 5px solid var(--couleur-primaire);
 background: var(--couleur-primaire);
}
 .custom-checkbox input[type="checkbox"] {
 margin: -4px 0px 0px -4px !important;
 position: absolute;
 z-index: 2;            
 cursor: pointer;
 outline: none;
 opacity: 0;
 height: 30px;
 width: 30px;
 background: #FFF;
}

/* Optin */
.stylingblock-content-wrapper form table.stylingblock-content-wrapper #consentOptin {
 border-bottom: 0px solid #dedfd9;
 text-align: center;
 margin-top: -31px;
 margin-bottom: 12px;
}

/***********************************************/


/* Alertes */
.stylingblock-content-wrapper form .smartcapture-controls > .sc-formfield-input .popover {
 display: block;
 position: static !important;
 margin: 1px 0px -21px 0px !important;
 font-size: 12px !important;
 text-align: right;
}


/* Bouton de validation */
.stylingblock-content-wrapper form .smartcapture-submit-button-wrapper {
 padding-bottom: 0px !important;
 text-align: center !important;
}
.stylingblock-content-wrapper form .smartcapture-submit-button-wrapper button {
 text-decoration: none !important;
 font-size: 18px !important;
 font-family: var(--text-font-family) !important;
 font-weight: 800;
 color: #FFF !important;
 display: flex !important;
 align-items: center;
 justify-content: center;
 background: var(--couleur-secondaire);
 background-color: var(--couleur-secondaire) !important;
 text-align: center !important;
 width: fit-content;
 height: 42px;
 border-radius: 40px !important;
 text-transform: uppercase;
 min-width: 320px;
 margin: 0px auto;
 transition: 0.3s;
 padding: 7px 25px 0px !important;
 letter-spacing: 0.04em;
 -webkit-text-stroke: 0.03em #FFF;
 border: unset !important;
 cursor: pointer;
}

.stylingblock-content-wrapper form .smartcapture-submit-button-wrapper button:hover {
 background: var(--couleur-primaire) !important;
 background-color: var(--couleur-primaire) !important;
}

/* Lien règlement */
.stylingblock-content-wrapper:has(.rules-link) {
 margin-top: 10px;
 margin-bottom: 22px;
}

.stylingblock-content-wrapper .stylingblock-content-wrapper:has(.rules-link) {
 text-align: center;
}

.stylingblock-content-wrapper .stylingblock-content-wrapper .rules-link {
 font-family: var(--text-font-family) !important;
 font-size: var(--font-size) !important;
 color: var(--couleur-font) !important;
 transition: 0.3s;
 text-decoration: underline;
 cursor: pointer;
}

.stylingblock-content-wrapper .stylingblock-content-wrapper .rules-link:hover {
 color: var(--couleur-secondaire) !important;
}


/****************** Selectbox ******************/

/* Contenant de plus haut niveau */
.stylingblock-content-wrapper form table.stylingblock-content-wrapper .smartcapture-controls:has(.sc-formfield-input select) {
 justify-content: flex-start;
}

/* Alertes */
.stylingblock-content-wrapper form .smartcapture-controls > .sc-formfield-input:has(select) .popover {
 margin: 43px 0px -63px 0px !important;
}

/* Selectobox */
.nice-select {
 -webkit-tap-highlight-color: transparent;
 background-color: #FFF;
 border-radius: 0px;
 border: 2px solid var(--couleur-input);
 box-sizing: border-box;
 clear: both;
 cursor: pointer;
 display: block;
 float: left;
 height: 42px;
 outline: none;
 padding-left: 12px;
 padding-right: 30px;
 position: relative;
 text-align: left !important;
 transition: all 0.2s ease-in-out;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 white-space: nowrap;
 width: auto;
 margin-left: 15px;
 margin-top: 0px;
 font-size: var(--font-size) !important;
 font-family: var(--text-font-family) !important;
 font-weight: 500;
 line-height: 41px;
}
.nice-select:hover {
 border-color: var(--couleur-secondaire);
}
.nice-select:active, .nice-select.open, .nice-select:focus {
 border-color: var(--couleur-primaire);
}
.nice-select:after {
 border-bottom: 2px solid var(--couleur-primaire);
 border-right: 2px solid var(--couleur-primaire);
 content: '';
 display: block;
 height: 5px;
 margin-top: -4px;
 pointer-events: none;
 position: absolute;
 right: 12px;
 top: 50%;
 -webkit-transform-origin: 66% 66%;
 -ms-transform-origin: 66% 66%;
 transform-origin: 66% 66%;
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
 -webkit-transition: all 0.15s ease-in-out;
 transition: all 0.15s ease-in-out;
 width: 5px;
}
.nice-select.open:after {
 -webkit-transform: rotate(-135deg);
 -ms-transform: rotate(-135deg);
 transform: rotate(-135deg);
}
.nice-select.open .list {
 opacity: 1;
 pointer-events: auto;
 -webkit-transform: scale(1) translateY(0);
 -ms-transform: scale(1) translateY(0);
 transform: scale(1) translateY(0);
}
.nice-select.disabled {
 border-color: #ededed;
 color: var(--couleur-primaire);
 pointer-events: none;
}
.nice-select.disabled:after {
 border-color: #cccccc;
}
.nice-select.wide {
 width: 100%;
}
.nice-select.wide .list {
 left: 0 !important;
 right: 0 !important
}
.nice-select.right {
 float: right;
}
.nice-select.right .list {
 left: auto;
 right: 0;
}
.nice-select.small {
 font-size: 12px;
 height: 36px;
 line-height: 34px;
}
.nice-select.small:after {
 height: 4px;
 width: 4px;
}
.nice-select.small .option {
 line-height: 34px;
 min-height: 34px;
}
.nice-select .list {
 background-color: #FFF;
 border-radius: 0px;
 box-shadow: 0 0 0 2px var(--couleur-primaire);
 box-sizing: border-box;
 margin-top: 2px;
 opacity: 0;
 overflow: hidden;
 padding: 0;
 pointer-events: none;
 position: absolute;
 top: 100%;
 width: 100%;
 left: 0;
 -webkit-transform-origin: 50% 0;
 -ms-transform-origin: 50% 0;
 transform-origin: 50% 0;
 -webkit-transform: scale(0.75) translateY(-21px);
 -ms-transform: scale(0.75) translateY(-21px);
 transform: scale(0.75) translateY(-21px);
 -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
 transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
 z-index: 9;
}
.nice-select .list:hover .option:not(:hover) {
 background-color: transparent !important;
}
.nice-select .option {
 cursor: pointer;
 font-weight: 400;
 line-height: 38px;
 list-style: none;
 min-height: 38px;
 outline: none;
 padding-top: 4px;
 padding-left: 12px;
 padding-right: 30px;
 text-align: left;
 -webkit-transition: all 0.2s;
 transition: all 0.2s;
}
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
 background-color: var(--couleur-input);
 color: var(--couleur-font);
}
.nice-select .option.selected {
 font-weight: bold;
 color: var(--couleur-primaire) !important;
}
.nice-select .option.disabled {
 background-color: transparent;
 color: #999;
 cursor: default;
}
.no-csspointerevents .nice-select .list {
 display: none;
}
.no-csspointerevents .nice-select.open .list {
 display: block;
}
/***********************************************/


/****************** RESPONSIVE ******************/

/* Responsive 1280px - menu de gauche (240px) */
@media screen and (max-width: 1040px) {

  /** Contenant de plus haut niveau **/
  body {
   max-width: var(--width-iframe-tablette);
  }

  /** Titre **/
  h1 {
   height: 85px;
   margin: 0px 0px 10px;
   font-size: 26px;
  }

  /** Sous-titre **/
  h2 {
   font-size: 20px;
   margin-top: 40px;
   margin-bottom: 18px;
  }

  h3 {
   font-size: var(--font-size-responsive); 
   line-height: var(--line-height-responsive);
   width: 586px;
   padding: 0px 60px;
  }

  /** Bouton **/
  .buttonblock > a {
   font-size: 15px !important;
   height: 33px;
   min-width: 300px;
   padding: 5px 25px 0px !important;
  }
  .stylingblock-content-wrapper form .smartcapture-submit-button-wrapper button {
   font-size: 15px !important;
   height: 38px;   
   min-width: 300px;
   padding: 6px 25px 0px !important;
  }

  /* Inputs */
  .stylingblock-content-wrapper form table.stylingblock-content-wrapper .smartcapture-controls:has(.sc-formfield-label) {
   padding: 0px 10px;
  }

  .stylingblock-content-wrapper form .smartcapture-controls > .sc-formfield-input input {
   width: 250px !important;
   height: 40px !important;
   font-size: var(--font-size-responsive);
   padding: 3px 10px 0px 10px;
  }

  /* Labels */
  .stylingblock-content-wrapper form .smartcapture-controls > .sc-formfield-label label {
   font-size: var(--font-size-responsive) !important; 
   line-height: var(--line-height-responsive) !important;
  }

  /** Selectbox **/
  .nice-select {
   height: 40px;
   margin-left: 37px;
   font-size: var(--font-size-responsive) !important;
  }

  /** Checkbox **/
  .stylingblock-content-wrapper form .smartcapture-controls > .sc-formfield-label {
   font-size: var(--font-size-responsive) !important;
  }
  .stylingblock-content-wrapper form .smartcapture-controls > .sc-formfield-input-wrapper .sc-formfield-input label {
   font-size: var(--font-size-responsive) !important;
  }
  .custom-checkbox {
   width: 16px;
   height: 16px;
   top: 15px;
   margin-right: 6px;
  }
  .custom-checkbox input[type="checkbox"] {
   height: 24px;
   width: 24px;
  }
  .custom-checkbox::before {
   top: 1px;
   left: 1px;
   font-size: 18px;
  }

  /** Règlement **/
  .stylingblock-content-wrapper .stylingblock-content-wrapper .rules-link {
   font-size: var(--font-size-responsive) !important;
  }

}


/* Responsive 1024px - menu de gauche (240px) */
@media screen and (max-width: 784px) {

  /** Contenant de plus haut niveau **/
  body {
   max-width: var(--width-iframe-mobile);
  }
  body .layout {
   padding: 12px 11px;
  }

  /** Titre **/
  h1 {
   height: 65px;
   font-size: 18px;
   text-align: center;
  }

  /** Sous-titre **/
  h2 {
   font-size: 16px;
   margin-top: 30px;
   margin-bottom: 10px;
   line-height: 18px;
  }

  h3 {
   font-size: var(--font-size-mobile);
   line-height: var(--line-height-mobile);
   width: 318px;
   padding: 0px 0px;
   margin-top: 0px;
  }

  /** Bouton **/
  .buttonblock > a {
   font-size: 14px !important;
   height: 29px;
   min-width: 280px;
   padding: 5px 5px 0px !important;
  }
  .stylingblock-content-wrapper form .smartcapture-submit-button-wrapper button {
   font-size: 15px !important;
   height: 34px;   
   min-width: 300px;
   padding: 6px 25px 0px !important;
  }

  /* Inputs */
  .section .stylingblock-content-wrapper form.smartcapture-content-wrapper {
   padding: 10px 0px 0px 0px !important;
  }
  .stylingblock-content-wrapper form table.stylingblock-content-wrapper .smartcapture-controls:has(.sc-formfield-label) {
   padding: 0px 10px;
   padding-bottom: 10px !important;
   margin-bottom: 10px;
   width: 298px;
  }

  .stylingblock-content-wrapper form .smartcapture-controls > .sc-formfield-input input {
   width: 220px !important;
   height: 38px !important;
   font-size: var(--font-size-responsive);
   padding: 3px 10px 0px 10px;
  }

  /* Labels */
  .stylingblock-content-wrapper form .smartcapture-controls > .sc-formfield-label label {
   font-size: var(--font-size-responsive) !important; 
   line-height: var(--line-height-responsive) !important;
  }

  /** Selectbox **/
  .nice-select {
   height: 38px;
   margin-left: 31px;
   width: 220px;
  }
  .nice-select .list {
   width: 216px;
  }

  /** Checkbox **/
  .stylingblock-content-wrapper form table.stylingblock-content-wrapper .smartcapture-controls:has(input[type="checkbox"]) {
   margin-bottom: 10px;
   padding-bottom: 0px !important;
  }
  .stylingblock-content-wrapper form .smartcapture-controls > .sc-formfield-input-wrapper .sc-formfield-input:has(input[type="checkbox"]) {
   flex: 50%;
   margin: 10px 0px 0px 0px;
   text-align: left;
  }
  .stylingblock-content-wrapper form .smartcapture-controls > .sc-formfield-input-wrapper .sc-formfield-input label {
   display: inline-block;
   text-indent: -3px;
  }
  .stylingblock-content-wrapper form .smartcapture-controls:has(input[type="checkbox"]) > .sc-formfield-label {
   margin-top: 5px;
  }
  .custom-checkbox {
   width: 16px;
   height: 16px;
   top: -4px;
   margin-right: 6px;
   float: left;
  }
  .custom-checkbox input[type="checkbox"] {
   height: 24px;
   width: 24px;
  }
  .custom-checkbox::before {
   top: 1px;
   left: 3px;
   font-size: 18px;
  }
  /* Optin */
  .stylingblock-content-wrapper form table.stylingblock-content-wrapper #consentOptin {
   text-align: left;
   margin-top: -11px;
   margin-bottom: 12px;
  }
  .stylingblock-content-wrapper form table.stylingblock-content-wrapper #consentOptin .custom-checkbox {
   margin-bottom: 30px;
   top: 2px;
  }
  .stylingblock-content-wrapper form table.stylingblock-content-wrapper #consentOptin .label {
   text-indent: -3px;
   display: inline-block;
  }

  /** Alertes **/
  .stylingblock-content-wrapper form .smartcapture-controls > .sc-formfield-input .popover {
   margin: -20px 8px 0px 0px !important;
  }
  .stylingblock-content-wrapper form .smartcapture-controls > .sc-formfield-input:has(select) .popover {
   margin: 34px 0px -63px 0px !important;
  }

  /** Règlement **/
  .stylingblock-content-wrapper .stylingblock-content-wrapper .rules-link {
   font-size: var(--font-size-responsive) !important;
  }

}

/***********************************************/