/*
 Theme Name: Divi Child – Sitec
 Theme URI: https://sitec.corsica
 Description: Thème enfant Divi
 Author: Sitec
 Template: divi
 Version: 1.0.0
*/

@font-face {
  font-family: "Circular-Thin";
  src:
    url("./fonts/official/CircularXXSub-Thin.woff2") format("woff2"),
    url("./fonts/Circular-Thin.ttf") format("truetype");
}

@font-face {
  font-family: "Circular-ThinItalic";
  src:
    url("./fonts/official/CircularXXSub-ThinItalic.woff2") format("woff2"),
    url("./fonts/Circular-ThinItalic.ttf") format("truetype");
}

@font-face {
  font-family: "Circular-Light";
  src:
    url("./fonts/official/CircularXXSub-Light.woff2") format("woff2"),
    url("./fonts/Circular-Light.ttf") format("truetype");
}

@font-face {
  font-family: "Circular-LightItalic";
  src:
    url("./fonts/official/CircularXXSub-LightItalic.woff2") format("woff2"),
    url("./fonts/Circular-LightItalic.ttf") format("truetype");
}

@font-face {
  font-family: "Circular-Regular";
  src:
    url("./fonts/official/CircularXXSub-Regular.woff2") format("woff2"),
    url("./fonts/Circular-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Circular-Italic";
  src:
    url("./fonts/official/CircularXXSub-Italic.woff2") format("woff2"),
    url("./fonts/Circular-Italic.ttf") format("truetype");
}

@font-face {
  font-family: "Circular-Book";
  src:
    url("./fonts/official/CircularXXSub-Book.woff2") format("woff2"),
    url("./fonts/Circular-Book.ttf") format("truetype");
}

@font-face {
  font-family: "Circular-BookItalic";
  src:
    url("./fonts/official/CircularXXSub-BookItalic.woff2") format("woff2"),
    url("./fonts/Circular-BookItalic.ttf") format("truetype");
}

@font-face {
  font-family: "Circular-Medium";
  src:  url("./fonts/official/CircularXXSub-Medium.woff2") format("woff2"),
        url("./fonts/Circular-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Circular-MediumItalic";
  src:
    url("./fonts/official/CircularXXSub-MediumItalic.woff2") format("woff2"),
    url("./fonts/Circular-MediumItalic.ttf") format("truetype");
}

@font-face {
  font-family: "Circular-Bold";
  src:
    url("./fonts/official/CircularXXSub-Bold.woff2") format("woff2"),
    url("./fonts/Circular-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Circular-BoldItalic";
  src:
    url("./fonts/official/CircularXXSub-BoldItalic.woff2") format("woff2"),
    url("./fonts/Circular-BoldItalic.ttf") format("truetype");
}

@font-face {
  font-family: "Circular-Black";
  src:
    url("./fonts/official/CircularXXSub-Black.woff2") format("woff2"),
    url("./fonts/Circular-Black.ttf") format("truetype");
}

@font-face {
  font-family: "Circular-BlackItalic";
  src:
    url("./fonts/official/CircularXXSub-BlackItalic.woff2") format("woff2"),
    url("./fonts/Circular-BlackItalic.ttf") format("truetype");
}

@font-face {
  font-family: "Circular-ExtraBlack";
  src: url("./fonts/Circular-ExtraBlack.ttf") format("truetype");
}

@font-face {
  font-family: "Circular-ExtraBlackItalic";
  src:
    url("./fonts/official/CircularXXSub-ExtraBlack.woff2") format("woff2"),
    url("./fonts/Circular-ExtraBlackItalic.ttf") format("truetype");
}


@font-face {
  font-family: "Museo-100-Regular";
  src: url("./fonts/Museo100-Regular.otf") format("opentype");
}

@font-face {
  font-family: "Museo-100-Italic";
  src: url("./fonts/Museo100-Italic.otf") format("opentype");
}

@font-face {
  font-family: "Museo-300-Regular";
  src: url("./fonts/Museo300-Regular.otf") format("opentype");
}

@font-face {
  font-family: "Museo-300-Italic";
  src: url("./fonts/Museo300-Italic.otf") format("opentype");
}

@font-face {
  font-family: "Museo-500-Regular";
  src: url("./fonts/Museo500-Regular.otf") format("opentype");
}

@font-face {
  font-family: "Museo-500-Italic";
  src: url("./fonts/Museo500-Italic.otf") format("opentype");
}

@font-face {
  font-family: "Museo-700-Regular";
  src: url("./fonts/Museo700-Regular.otf") format("opentype");
}

@font-face {
  font-family: "Museo-700-Italic";
  src: url("./fonts/Museo700-Italic.otf") format("opentype");
}

@font-face {
  font-family: "Museo-900-Regular";
  src: url("./fonts/Museo900-Regular.otf") format("opentype");
}

@font-face {
  font-family: "Museo-900-Italic";
  src: url("./fonts/Museo900-Italic.otf") format("opentype");
}

/* END FONTS */



/* Styles des Module DIVI SITEC */
.et_pb_text_meta p:first-child::before { content: "“"; }
.et_pb_text_meta p:last-child::after  { content: "”"; }



/* --- MCT - FRET Cotation --- */

#section-fret-cotation h2 {
  margin-bottom: 30px;
}

/* Pour masquer le titre du formulaire. L'utilisateur saisit son texte dans Divi. */
#section-fret-cotation .gform_heading {
  display: none !important;
}

/* On masque la progress bar par défaut de Gravity Form pour afficher la nôtre custom */
form#gform_4 #gf_progressbar_wrapper_4 {
  display: none;
}

/* Notre custom progress bar */
#section-fret-cotation #fret-cotation-custom-progress-bar-wrapper {
  display: inline-flex;
}
#section-fret-cotation.fret-cotation-confirmed #fret-cotation-custom-progress-bar-wrapper {
  display: inline-flex !important;
}
#section-fret-cotation:has(#gform_confirmation_message_4) #fret-cotation-custom-progress-bar-wrapper,
#section-fret-cotation:has(#gform_confirmation_wrapper_4) #fret-cotation-custom-progress-bar-wrapper {
  display: inline-flex !important;
}
#section-fret-cotation .fret-cotation-progress-bar-step {
  width: 70px;
  text-align: center;
}
#section-fret-cotation .fret-cotation-progress-bar-step.done {
  cursor: pointer;
}

#section-fret-cotation .gfield_validation_message .cl-fret-date-validation-contact,
#section-fret-cotation .validation_message .cl-fret-date-validation-contact,
#section-fret-cotation .gform_validation_errors .cl-fret-date-validation-contact {
  color: #000 !important;
  font-weight: 700 !important;
}

#section-fret-cotation .gfield_validation_message,
#section-fret-cotation .validation_message,
#section-fret-cotation .gfield_validation_message * {
  font-weight: 700 !important;
}

#section-fret-cotation #gform_4_validation_container,
#section-fret-cotation .gform_wrapper .gform_validation_errors {
  display: none !important;
}

#section-fret-cotation .fret-cotation-progress-bar-step-bubble {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-color: rgba(227, 0, 11, 0.2);
  margin: 0 auto;
}
#section-fret-cotation .fret-cotation-progress-bar-step.active .fret-cotation-progress-bar-step-bubble {
  background-color: #e3000b;
}
#section-fret-cotation .fret-cotation-progress-bar-step.done .fret-cotation-progress-bar-step-bubble {
  background-color: #e3000b;
  background-image: url("/app/mu-plugins/cl-gf-assets/images/check.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px;
}
#section-fret-cotation .fret-cotation-progress-bar-step-trait {
  width: 70px;
  height: 2px;
  border-radius: 1px;
  background-color: #e3000b;
  margin: 24px 10px;
}
#section-fret-cotation .fret-cotation-progress-bar-step-label {
  color: #5c5c5c;
  margin-top: 10px;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
}
#section-fret-cotation .fret-cotation-progress-bar-step.active .fret-cotation-progress-bar-step-label {
  color: black;
}
/* Progress bar - MOBILE */
@media (max-width: 1024px) {
  #section-fret-cotation .fret-cotation-progress-bar-step {
    width: 50px;
  }
  #section-fret-cotation .fret-cotation-progress-bar-step-bubble {
    width: 30px;
    height: 30px;
    border-radius: 15px;
  }
  #section-fret-cotation .fret-cotation-progress-bar-step.done .fret-cotation-progress-bar-step-bubble {
    background-size: 16px;
  }
  #section-fret-cotation .fret-cotation-progress-bar-step-trait {
    width: 25px;
    margin: 14px 0px;
  }
  #section-fret-cotation .fret-cotation-progress-bar-step-label {
    font-size: 10px;
    line-height: 12px;
  }
}
/* \\ END Notre custom progress bar */

/* Form (Gravity Form) */
#section-fret-cotation #gform_wrapper_4 {
  margin-top: 30px;
}

/* Boutons du formulaire */
#section-fret-cotation #gform_submit_button_4,
#section-fret-cotation .gform_previous_button,
#section-fret-cotation .gform_next_button {
  border-radius: 25px;
  height: 50px;
  padding: 0px 25px;
  font-weight: bold;
}
#section-fret-cotation #gform_submit_button_4,
#section-fret-cotation .gform_next_button {
  background-color: #e3000B !important;

}
#section-fret-cotation .gform_previous_button {
  border: solid 2px #e3000b;
  color: #e3000b;
}
/* permet de masquer l'ombre et la bordure bleues au focus des boutons */
#section-fret-cotation .gform_previous_button:focus,
#section-fret-cotation .gform_next_button:focus,
#section-fret-cotation #gform_submit_button_4:focus {
  outline: none;
  box-shadow: none;
  border: none;
}

/* Le spinner de chargement des boutons du formulaire */
#section-fret-cotation #gform_ajax_spinner_4 {
  color: #e3000b;
  border-top-color: #e3000b;
  border-block-start-color: #e3000b;
  border-block-end-color: #e3000b;
  border-inline-start-color: #e3000b;
}

/* Les input */
#section-fret-cotation .gfield input[type="text"],
#section-fret-cotation .gfield input[type="number"],
#section-fret-cotation .gfield input[type="email"],
#section-fret-cotation .gfield input[type="tel"],
#section-fret-cotation .gfield textarea,
#section-fret-cotation .gfield select {
  height: 40px;
  border: solid 1px black;
  border-radius: 20px;
  padding: 0px 25px;
}

/* Focus/active state */
#section-fret-cotation .gfield input[type="text"]:focus,
#section-fret-cotation .gfield input[type="number"]:focus,
#section-fret-cotation .gfield input[type="email"]:focus,
#section-fret-cotation .gfield input[type="tel"]:focus,
#section-fret-cotation .gfield textarea:focus,
#section-fret-cotation .gfield select:focus,
#section-fret-cotation .gfield input[type="text"]:active,
#section-fret-cotation .gfield input[type="number"]:active,
#section-fret-cotation .gfield input[type="email"]:active,
#section-fret-cotation .gfield input[type="tel"]:active,
#section-fret-cotation .gfield textarea:active,
#section-fret-cotation .gfield select:active {
  border-color: #e3000b;
  box-shadow: none;
  outline: none;
}

/* Masquer les flèches +/- sur les input number */
/* Chrome, Safari, Edge, Opera */
#section-fret-cotation input[type=number]::-webkit-inner-spin-button,
#section-fret-cotation input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
#section-fret-cotation input[type=number] {
  -moz-appearance: textfield;
}

/* Customisation des champs type du véhicule */
#section-fret-cotation #field_4_6 .gchoice {
  border: none;
  --gf-local-shadow: none;
  width: 25%;
  margin: 0 auto;
  padding: 0px;

  /* permet de jouer sur le nombre d'éléments pas ligne */
  max-inline-size: 23%;
  min-inline-size: 23%;
}
#section-fret-cotation #field_4_6 .gfield_checkbox,
#section-fret-cotation #field_4_6 .gfield_radio {
  list-style: none;
  margin: 0;
  padding: 0;
}

#section-fret-cotation #field_4_6 .gfield-choice-input
{
  display: none;
}

#section-fret-cotation #field_4_6 .gchoice,
#section-fret-cotation #field_4_6 .gchoice:hover,
#section-fret-cotation #field_4_6 .gchoice:has(input:checked) {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer;
}
/* Type véhicule - MOBILE */
@media (max-width: 1024px) {
  #section-fret-cotation #field_4_6 .gchoice {
    width: 45%;
    /* permet de jouer sur le nombre d'éléments pas ligne */
    max-inline-size: 45%;
    min-inline-size: 45%;
  }
}
#section-fret-cotation .gfield-image-choice-wrapper-inner { /* on masque les input/label par défaut du formulaire */
  display: none;
}
#section-fret-cotation #field_4_6 .gfield-image-choice-wrapper-inner {
  display: block;
  margin-top: 8px;
  text-align: center;
  color: #c8c8c8;
  font-family: 'Circular-Medium', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  transition: color 0.2s ease;
}
#section-fret-cotation #field_4_6 .gchoice .gfield-choice-image-wrapper img {
  transition: opacity 0.2s ease;
}
#section-fret-cotation #field_4_6 .gchoice:hover .gfield-image-choice-wrapper-inner,
#section-fret-cotation #field_4_6 .gchoice:has(input:checked) .gfield-image-choice-wrapper-inner {
  color: #e3000b;
}
#section-fret-cotation #field_4_6 .gchoice:has(input:checked) .gfield-choice-input + label,
#section-fret-cotation #field_4_6 .gchoice:hover .gfield-choice-input + label {
  color: #e3000b;
}
@media (max-width: 1024px) {
  #section-fret-cotation #field_4_6 .gfield-image-choice-wrapper-inner {
    font-size: 14px;
  }
}
/* Type de véhicule : on masque la coche de sélection par défaut */
.gform-theme--framework .gfield--type-image_choice.gfield--image-choice-style-square.gfield--image-choice-appearance-card .gchoice:where(:has(input:checked))::after {
  display: none;
}

/* On masque le séparateur sous les titres du Gravity Form */
.gform-theme--framework:where(:not(.gform_editor)) .gfield--type-section {
  border-block-end: none;
}

/* Div de résumé des informations saisies */
#section-fret-cotation #estim-resume-container {
  display: grid;
  /*grid-template-rows: repeat(3, 50px);*/
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: min-content;
  gap: 10px;
  height: fit-content;
  margin-bottom: 30px;
}
/* Recapitulatif des infos saisies - MOBILE */
@media (max-width: 1024px) {
  #section-fret-cotation #estim-resume-container {
    grid-template-columns: repeat(1, 1fr);
  }
}
#section-fret-cotation #estim-resume-container .box {
  height: fit-content;
}

#section-fret-cotation .estim-subtitle,
#section-fret-cotation h3.gsection_title {
  font-size: 24px;
  color: black;
  font-weight: bold;
  font-family: 'Museo500-Regular';
  /*margin-bottom: 20px;*/
  /*margin-top: 20px;*/
}

#section-fret-cotation h3,
#section-fret-cotation .gfield
{
  padding-bottom: 0px !important;
}


#section-fret-cotation .resume-form-field-wrapper {
  font-weight: bold;
  margin-bottom: 15px;
  display: inline-block;
  width: 100%;
  font-family: 'Museo500-Regular';
  font-size: 14px;
  color: black;
}
#section-fret-cotation .resume-form-field-line {
  width: 100%;
  font-weight: normal;
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 6px;
  font-family: 'Museo500-Regular';
  font-size: 14px;
  color: black;
}
#section-fret-cotation .resume-form-field-line-title {
  color: #e3000b;
  flex-shrink: 0;
}

#section-fret-cotation .resume-form-field-line > div {
  width: auto;
  display: inline-flex;
  font-family: 'Museo500-Regular';
  font-size: 14px;
  color: black;
}
#section-fret-cotation .resume-form-field-value {
  font-weight: normal;
}

/* La progress bar des étapes du formulaire */
#section-fret-cotation .gform-theme--framework .gf_progressbar .percentbar_blue {
  background-color: #e3000b;
}

/* Bouton Valider final */
#section-fret-cotation #estim-fret-fend-mail-btn,
#section-fret-cotation #gravity-custom-btn-nouvelle-demande {
  height: 50px;
  background-color: #e3000b;
  border-radius: 25px;
  color: white;
  font-family: 'Museo700-Regular';
  border: none;
  min-width: 130px;
  margin-top: 25px;
  font-weight: bold;
}

#section-fret-cotation .estim-content {
  font-family: 'Museo500-Regular';
  color: black;
  font-size: 14px;
}

/* --- \\ END MCT - Fret Cotation --- */