/* ======================== */
/* Feuille de style micro66 */
/* ======================== */


/* variables globales */
:root {

  /* couleurs du fond */
  --background-color-primary: #111926;
  --background-color-secondary: #192537;
  
  /* couleur de fond des blocs */
  --block-background-primary-color: #182537; 
  --block-background-secondary-color: #253751;

  /* couleurs des boutons du header */
  --Button-header-background-color: transparent;
  --Button-header-text-color: #ffffff;
  --button-header-hover-background-color: transparent;
  --button-header-hover-text-color: #ff873e;

  /* couleur de la bordure du header */
  --bordure-header-color: #ff873e;

  /* couleurs du bouton RDV */
  --button-rdv-background-primary-color: #ff873e;
  --button-rdv-text-primary-color: #ffffff;
  --button-rdv-background-secondary-color: #ffffff;
  --button-rdv-text-secondary-color: #000000;

  /* couleurs liens page */
  --link-color: #ffffff;
  --link-hover-color: #ff873e;

  /* couleurs boutons et menu format mobile */
  --button-mobile-background-color: #ff873e;
  --button-mobile-text-color: #ffffff;
  --background-mobile-menu-color: rgba(24, 37, 55, 0.80);
  --button-menu-mobile-background-color: #ff873e;
  --button-menu-mobile-background-color-hover: #ffffff;

  /* couleurs du bouton envoyer message */
  --button-envoyer-message-background-primary-color: #ff873e;
  --button-envoyer-message-text-primary-color: #ffffff;
  --button-envoyer-message-background-secondary-color: #ffffff;
  --button-envoyer-message-text-secondary-color: #000000;

  /* contact form */
  --contact-form-saisie-background-color: #182537

}


/* ================ */
/* reglages de base */
/* ================ */


.ko_ThemeBoxed #website {
  margin-top: 0;
  margin-bottom: 0;
  box-shadow: none;
}

html {
  margin-top: 10px !important;
  height: 100%;
}

body {
  min-height: 100vh;
  background-color: var(--background-color-primary);
}

/* Responsive : enlever l'espace au dessus de contact@micro66.fr */
@media (max-width: 992px) {
    #kpg_783956 {
        padding-top: 0 !important;
    }
}


/* ================================= */
/* le header avec le logo et le menu */
/* ================================= */


#headerMenu {
  /* couleur du fond du padding a gauche et a droite */
  background-color: var(--background-color-primary) !important;
}

#header .container {
  position: relative;
  background-color: var(--block-background-primary-color);
  border-radius: 15px !important;
  padding: 30px 20px 20px 20px !important;
  max-width: calc(100% - 20px) !important;
  height: 110px;
}

/* ------------------------------ */
/* bordure orange dans le bandeau */
/* ------------------------------ */

.micro-header-border {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  height: 25px;
  border-radius: 15px 15px 0 0;
  background:
    linear-gradient(
      to top,
      var(--button-rdv-background-secondary-color) 0%,
      var(--button-rdv-background-secondary-color) 50%,
      var(--button-rdv-background-primary-color) 50%,
      var(--button-rdv-background-primary-color) 100%
    );
  background-size: 100% 200%;
  background-position: 0 0;
  transition: background-position 0.4s ease;
  z-index: 10;
}

.micro-header-border a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}

.micro-header-border:hover {
  background-position: 0 100%;
}

.micro-header-border a:hover {
  color: black;
}

/* --------------------------------------------- */
/* animation des chevrons dans la bordure orange */
/* --------------------------------------------- */

.micro-header-border a .arrow {
  display: inline-block;
  position: relative;
  transition: transform 0.3s ease;
}

/* Création du deuxième chevron masqué juste à droite */
.micro-header-border a .arrow::after {
  content: ">";
  position: absolute;
  left: 100%; 
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateX(-5px);
}

/* Au survol : on décale le premier chevron et on fait apparaître le deuxième */
.micro-header-border a:hover .arrow {
  transform: translateX(3px);
}

.micro-header-border a:hover .arrow::after {
  opacity: 1;
  transform: translateX(3px);
}

/* -------------------------------- */
/* boutons a droite dans le bandeau */
/* -------------------------------- */

.menuHolder a {
  color: var(--Button-header-text-color) !important;
  background-color: var(--Button-header-background-color) !important;
  transition: all 0.3s ease-in-out;
}

.menuHolder a:hover {
  color: var(--button-header-hover-text-color) !important;
  background-color: var(--button-header-hover-background-color) !important;
}

/* ==================================== */
/* cacher temporairement le bouton Blog */
/* .menuHolder li a[href="blog"] {
    display: none;
} */
/* ==================================== */


/* ================================ */
/* boutons menu mobile et page menu */
/* ================================ */


/* changement apparence du bouton menu
quand page menu non active*/
#headerMenu .mobileMenuOpener a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 5px;
  color: var(--button-mobile-text-color);
  background-color: var(--button-mobile-background-color);
  margin-right: 20px;
}

/* modification du bouton menu pour format telephone quand page menu non active */
#headerMenu .mobileMenuOpener i {
  color: #cccccc !important;
  font-size: 20px;
}

#headerMenu .mobileMenuOpener:hover i {
  color: #ffffff !important;
  font-size: 20px;
}

/* fond de la page du menu */
.mobileMenu {
  background-color: var(--background-mobile-menu-color);
}

.mobileMenuSocial {
  display: none !important;
}

.mobileMenu li {
  list-style: none;
  /* border-bottom: 1px solid rgba(255, 255, 255, 0.06); */
}

/* modification de la couleur de fond du bouton de
fermeture de la page du menu quand page active */
.mobileMenuCloseHolder {
  background-color: transparent !important;
  height: 82px !important;
}

/* le bouton de fermeture de la page du menu quand page active */
.mobileMenuClose {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px !important;
  height: 40px !important;
  margin: 20px;
  border-radius: 8px;
  background-color: var(--button-mobile-background-color) !important;
}

/* le bouton de fermeture de la page du menu au survol quand page active*/
 .mobileMenuClose .fa {
  color: #ffffff !important;
}

/* .mobileMenuClose:hover {
  background: #a154f3 !important;
} */

/* les liens de la page du menu */
.mobileMenuLevel_1 {
  display: flex !important;
  justify-content: center !important;
  padding: 18px 24px;
  margin: 10px !important;
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  text-decoration: none;
  border-radius: 25px;
  border: 0 !important;
}

.mobileMenuLevel_1:hover {
  color: #000000 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  background-color: var(--button-menu-mobile-background-color-hover) !important;
}

.mobileActive {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  background-color: var(--button-menu-mobile-background-color) !important;
}


/* ==================================== */
/* liens rubriques de la page d'accueil */
/* ==================================== */


#kedit_y2sha6gme .col-container {
 min-height: 30px !important;
 /* background-color: var(--header-background-color) !important;
 border-radius: 0 0 20px 20px !important; */
}

#kedit_y2sha6gme .col-container a {
  color: var(--link-color) !important;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out;
}

#kedit_y2sha6gme .col-container a:hover {
  color: var(--link-hover-color) !important;
}


/* =============== */
/* les gros titres */
/* =============== */


/* bloc : "une assistance complete" */
/* ------------------------------------------ */

/* centrage du texte */
#kedit_cfneo7zwp .no-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#kedit_cfneo7zwp span {
  font-size: clamp(30px, 5vw, 45px) !important;
}

/* bloc : decouvrez linux une alternative a windows */
/* et placement de la mascote tux */
/* ------------------------------------------------ */

/* centrage du texte */
#kedit_hcxzjxqv9 .no-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 63px;
  position: relative;
  overflow: hidden;
}

/* placement de l'image tux */
#kedit_hcxzjxqv9 .no-container::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  top: 0;
  /* bottom: 50px; */
  transform: translateX(-50%);
  left: 50%;
  background-image: url("https://datas.micro66.fr/micro66-alpha/images/tux.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.50;
  z-index: 0;
}

/* Le contenu reste au-dessus de Tux */
/* #kedit_hcxzjxqv9 .no-container > * {
  position: relative;
  z-index: 1;
} */

#kedit_hcxzjxqv9 span {
  font-size: clamp(30px, 5vw, 45px) !important;
}

/* bloc: les tarifs */
/* ---------------- */
#kedit_881ue3e4g .container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#kedit_881ue3e4g span {
  font-size: clamp(30px, 5vw, 45px) !important;
}


/* ================================================= */
/* bloc regroupant :                                 */ 
/* gauche - ASSISTANCE INFORMATIQUE....              */
/* droite - contact, telephone, Bouton RDV           */
/* ================================================= */


/* bloc principal */
#kpg_760323 {
  margin: 0;
}

/* les deux colonnes */
#kpg_760323 .row {
  display: flex;
  align-items: center;
}

/* chaque moitié */
#kpg_760323 .keditColumn {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#kedit_y6umkjlvp span {
    font-size: clamp(25px, 5vw, 45px) !important;
}


/* ===================== */
/* bouton prendre un RDV */
/* ===================== */


#kedit_a0r8gaq4w .container {
  text-align: center;
}

#kedit_a0r8gaq4w .container a {
  display: inline-block;

  padding: 10px 24px;
  border-radius: 9999px;

  background:
    linear-gradient(
      to top,
      var(--button-rdv-background-secondary-color) 0%,
      var(--button-rdv-background-secondary-color) 50%,
      var(--button-rdv-background-primary-color) 50%,
      var(--button-rdv-background-primary-color) 100%
    );

  background-size: 100% 200%;
  background-position: 0 0;

  color: var(--button-rdv-text-primary-color) !important;
  text-decoration: none;

  font-size: 1.40rem;
  font-weight: 900;

  transition:
    background-position 0.4s ease,
    color 0.4s ease;
}

#kedit_a0r8gaq4w .container a:hover {
  background-position: 0 100%;
  color: var(--button-rdv-text-secondary-color) !important;
}


/* ======================================================== */
/* bloc kpg_200893 regroupant 4 blocs :                     */
/* Aide informatique, depannage et reparation               */
/* installation et configuration, creation de site internet */
/* ======================================================== */


#kpg_200893 {
  border-radius: 24px;
  width: calc(100% - 40px);
  margin: 20px auto;
  /* padding: 20px !important; */

  /* background-color: black !important; */

}

/* Le conteneur devient une grille 2x2 avec gouttiere unique */
#kpg_200893 .no-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* On dissout les .row Bootstrap */
#kpg_200893 .no-container .row {
  display: contents;
  margin: 0;
}

/* Le style de la boite va directement sur la colonne */
#kpg_200893 .no-container .col-md-6 {
  width: auto;
  max-width: none;
  flex: none;
  /* padding: 20px; */
  margin-bottom: 0 !important;
  border-radius: 16px;
  background: var(--block-background-primary-color) !important;

  padding-left: 60px !important;
  padding-top: 20px !important;
  /* padding-bottom: 10px !important; */
  
  /* transition: all 0.3s ease-in-out; */
}

/* animation de chaque bloc */
/* #kpg_200893 .no-container .col-md-6:hover {
  transform: scale(1.03);
} */


#kpg_200893 .row:nth-of-type(1) .col-md-6:nth-of-type(1) {
    background-color: var(--block-background-primary-color) !important;;
}

#kpg_200893 .row:nth-of-type(1) .col-md-6:nth-of-type(2) {
    background-color: var(--block-background-secondary-color) !important;
}

#kpg_200893 .row:nth-of-type(2) .col-md-6:nth-of-type(1) {
    background-color: var(--block-background-secondary-color) !important;
}

#kpg_200893 .row:nth-of-type(2) .col-md-6:nth-of-type(2) {
    background-color: var(--block-background-primary-color) !important;
}

/* @media */
@media (max-width: 992px) {  

  /* Responsive : repasser en 1 colonne sur mobile si besoin */
  #kpg_200893 .no-container {
    grid-template-columns: 1fr;
    gap: 10px;
    width: calc(100% - 10px) !important;
    margin: 10px auto !important; 
  }

  /* on reduit l'espace a gauche du contenu
  de chaque bloc */
  #kpg_200893 .no-container .col-md-6 {
    padding-left: 40px !important;
  }

}


/* ======================= */
/* bloc installation Linux */
/* ======================= */


#kpg_980532 {
  width: calc(100% - 80px) !important;
  margin: 25px auto !important;
}

#kpg_980532 img {
  border-radius: 15px;
  border: 10px solid var(--block-background-secondary-color);
}

@media (max-width: 992px) {
    #kpg_980532 {
        width: calc(100% - 20px) !important;
    }
    #kpg_980532 img{
      margin-bottom: 30px !important;
    }
}


/* =============== */
/* bloc les tarifs */
/* =============== */


/* bloc de gauche : tarifs assistance informatique
depannage informatique */
#kedit_88114 {
  background-color: var(--block-background-primary-color) !important;
  border-radius: 24px;
  padding: 20px !important;
  /* transition: all 0.3s ease-in-out; */
}

/* bloc de droite : tarifs site internet */
#kpg_4915701 {
  background-color: var(--block-background-primary-color) !important;
  border-radius: 24px;
  padding: 20px !important;
  /* transition: all 0.3s ease-in-out; */
}


/* ========================== */
/* definitions du bloc footer */
/* ========================== */


#kedit_2vo5br196 {
  background-color: transparent !important;
  /* background-color: var(--block-background-primary-color) !important; */
}

#kedit_2vo5br196 #kpg_footer_contact a {
  text-decoration: none;
  font-style: italic;
}

@media (max-width: 992px) {
  #kedit_2vo5br196 #kpg_footer_logo {
    padding: 10px 0 10px 200px !important;
  }
  #kedit_2vo5br196 #kpg_footer_services {
    padding: 10px 0 10px 200px !important;
  }
  #kedit_2vo5br196 #kpg_footer_contact {
    padding: 10px 0 10px 200px !important;
  }
}

@media (max-width: 768px) {
  #kedit_2vo5br196 #kpg_footer_logo {
    padding: 10px 0 10px 100px !important;
  }
  #kedit_2vo5br196 #kpg_footer_services {
    padding: 10px 0 10px 100px !important;
  }
  #kedit_2vo5br196 #kpg_footer_contact {
    padding: 10px 0 10px 100px !important;
  }
}

.keditFooterLine2 {
  background-color: transparent !important;
  /* background-color: var(--block-background-primary-color); */
}


/* ======================= */
/* Bouton "Retour en haut" */
/* ======================= */


#scrollToTop {
  background-color: #ff873e !important;
  border-radius: 9999px !important;
}


/* ===================================== */
/* bloc alerte champs contact non valide */
/* ===================================== */


.alert {
  background-color: #253751 !important;
  color: #ffffff !important;
  border-radius: 20px !important;
  padding: 10px 20px !important;
  border: none !important;
  cursor: pointer !important;
  margin: 10px !important;
}


/* =================================================== */
/* modification des styles pour le bandeau des cookies */
/* =================================================== */


.cookie-consent {
  background-color: #253751 !important;
  color: #fdfefe !important;
  border-radius: 20px !important;
  padding: 10px 20px !important;
  border: 4px solid #ff873e;
}

.cookie-consent .d-none.d-md-flex {
    justify-content: center !important;
}

.cookie-consent .d-none.d-md-flex .ms-auto {
    margin-left: 0 !important;
}

.cookie-consent #cookieConsentTitle {
  display: flex;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  color: #fdfefe !important;
}

.cookie-consent a {
  display: none !important;
}

.cookie-consent button[onclick*="cookieConsentSettings"] {
    display: none !important;
}

.cookie-consent button {
  background-color: #ff873e !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  padding: 10px 20px !important;
  border: none !important;
  cursor: pointer !important;
  margin: 10px !important;
  font-weight: 700;
}

.cookie-consent button:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
}


/* ===================== */
/* Formulaire de contact */
/* ===================== */


.ContactForm .form-group{
    margin-bottom:24px;
}

/* Titre du formulaire */
.ContactForm .thumbTitle {
  color: #fdfefe !important;
  text-align: center;
  font-size: 30px;
}

/* Champs de saisie du formulaire */
.ContactForm .form-control {
  background: var(--contact-form-saisie-background-color);
  border: 0;
  border-radius: 20px;
  color: #f7f7f7;
  box-shadow: none;
}

/* Placeholder */
.ContactForm ::placeholder {
  color: #8d96b8;
  opacity: 1;
}

/* saisie du code de confirmation */
.ContactForm label{
  color:#fdfefe;
  font-weight:600;
  padding-left:10px;
  /* margin-bottom:8px; */
}

/* zone captcha */
.ContactForm .input-group-text{
  background:#182537;
  border:5px solid black;
  color:black;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* bouton envoyer le message */
.ContactForm .btn-primary{
  background-color: var(--button-envoyer-message-background-primary-color) !important;
  border-radius:999px;
  color: var(--button-envoyer-message-text-primary-color) !important;
  padding:12px 28px;
  border: 0 !important;
  font-weight: 700;
}

.ContactForm .btn-primary:hover{
  background-color: var(--button-envoyer-message-background-secondary-color) !important;
  color: var(--button-envoyer-message-text-secondary-color) !important;
  border: 0 !important;
}


/* ============================================== */
/* ajout d'un pattern motif dans la section Linux */
/* ============================================== */


#atom-pattern {
    position: relative;
    overflow: hidden;
    background: var(--background-color-primary);
}

#atom-pattern::before,
#atom-pattern::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 220px;
    background-repeat: no-repeat;
    background-position-y: top;
    background-size: contain;
    pointer-events: none;
}

#atom-pattern::before {
    left: 0;
    background-image: url("https://datas.micro66.fr/micro66-alpha/images/atom-pattern-left-rounded.svg");
    background-position: left center;
}

#atom-pattern::after {
    right: 0;
    background-image: url("https://datas.micro66.fr/micro66-alpha/images/atom-pattern-right-rounded.svg");
    background-position: right center;
}

/* Le contenu reste au-dessus des décorations */
#atom-pattern > section {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    #atom-pattern::before,
    #atom-pattern::after {
        background-position-y: top;
        background-size: 50% auto !important;
    }
}