/*
 Theme Name: ArmorSupport
 Theme URI: https://armorsupport.fr/
 Description: Thème enfant Kadence pour Armor Support.
 Author: Laurent Le Coq
 Author URI: https://armorsupport.fr/
 Template: kadence
 Version: 1.0.0
 Text Domain: armorsupport
*/

/*
 * Ajoutez ici vos personnalisations CSS.
 * Le thème parent Kadence reste intact lors des mises à jour.
 */
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}
:root {
  --blanc:#FFFFFF;
  --bleufonce: #1B3158;
  --bleufonce-03: rgba(27, 49,88,0.3);
  --bleu: #2f5fb3;
  --bleuclair: #4D8BC4;
  --bleuentre:#284F94;
  --grisleger:#DEDEDE;
  --gris:#818A9C;
}
/******************** GENERIQUE *****************/
body {
  font-family: 'Roboto', 'Montserrat', sans-serif !important;
  background:var(--blanc);
}
.site-fullwidth{
  width: 100%;
}
.bleufonce{
  color: var(--bleufonce);
}
.site-branding .site-title,
.site-branding .site-title a {
  font-weight: 700;
}

.wp-block-button__link,
.button,
.kb-button,
input[type="submit"] {
  border-radius: 8px;
}
#primary.content-area{
  margin-top:0;
}
#main h2.elementor-heading-title, #main h3.elementor-heading-title,
#primary h2.elementor-heading-title, #primary h3.elementor-heading-title{
  color: var(--bleufonce);
}
#main .titre_blanc h2.elementor-heading-title, #main .titre_blanc h3.elementor-heading-title,
#primary .titre_blanc h2.elementor-heading-title, #primary .titre_blanc h3.elementor-heading-title{
  color: var(--blanc);
}
/******************* HEADER *********************************/
header{
  border-bottom: 1px solid var(--bleufonce);
}
.logo{
  font-family: 'Montserrat';
}
.logo a.lienacc_logo{
  text-decoration: none;  
}
.logo .Nomlogo{
  font-weight:600;
  font-size: 40px;
  line-height: 80px;
  color: var(--bleuclair);
}
.logo .baseline{
  color: var(--gris);
  font-weight:300;
}
.custom-html-main{
  background-color:var(--bleufonce);
  color: var(--blanc);
  padding: 1em 2em;
}
#titre_header .btn_contact_renfort a{
  color: var(--bleufonce);
  text-align: center;
  width: 250px;
  margin: 0 auto;
  background-color: var(--blanc);
  border-radius:4px;
  border: 1px solid var(--grisleger);
  box-shadow: 1px 1px 5px 3px var(--grisleger);
}
#titre_header .btn_contact_renfort a:hover{
  font-weight: bold;
  box-shadow: 1px 1px 5px 3px var(--bleufonce-03);
}
@media screen and (max-width: 800px) {
  .logo .Nomlogo{
    font-weight:600;
    font-size: 40px;
    line-height: 45px;
  }
}

/********************* Menu navigation ***************************/
#primary-menu li a:hover{
  border: 1px solid var( --bleu);
}
#primary-menu li.current_page_item  a{
  font-weight: bold;
}
#primary-menu li.current_page_item  a::after{
  display: block;
  content: ' ';
  width: 80%;
  height: 2px;
  background:var( --bleu);
  position: absolute;
  bottom: 0.4em;
  left: 0.6em;
}
/********************* Haut page accueil ************************/
#titre_header{
  position: relative;
  overflow: hidden; 
  background:
  radial-gradient(62% 250px at 98% 106%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.85) 52%, transparent 53%),
  radial-gradient(107% 289px at 107% 103%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.16) 48%, transparent 49%),
  radial-gradient(120% 312px at 98% 103%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.10) 45%, transparent 46%),
  linear-gradient(169deg, var(--bleufonce), var(--bleu) 81%, transparent 88%);
  padding:0;
  padding-bottom:1em;
}
#titre_header::before{
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
}
#grand-ecran{
  display: none;
}
 .titre_contenu{
  color: var(--blanc);
  padding: 2.5em 4em 0 4em !important;
}
.titre_contenu #titreh1 h1,#main .titre_contenu .titrehaut h2,#primary .titre_contenu .titrehaut h2{
  color: var(--blanc);
  margin-bottom:0;
}
#titre_header hr{
  background-color: var(--blanc);  
}
#titre_header .titre_echange {
  color: var(--blanc);
}
.titre_illustration::before{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 200px;
  background: rgba(255,255,255,0.1);
  clip-path: ellipse(70% 100% at 50% 100%);  
}

@media screen and (min-width: 1250px) {
  #grand-ecran{
    display: block;
  }
  #titre_header .titre_contenu{
    padding: 4em 2em 0 2em;
  }
}
@media screen and (max-width: 800px) {
  #titre_header .titre_contenu{
    width: 100% !important;
  }      
  #titre_header .titre_illustration {
    display: none !important;
  }
}
/****************** Presentation perso *******************/
#presentation_perso{
  padding: 1em 0 0 0;
}

#presentation_perso .e-con-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:1em;
}

#presentation_perso .e-child{
  display:flex;
  width:calc((100% - 3em) / 4);
  min-width:0;
}
#presentation_perso .elementor-widget-html,
#presentation_perso .elementor-widget-container{
  width:100%;
  height:100%;
}

#presentation_perso .presentation_p{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  padding:0.4em;
  border-radius:4px;
  box-shadow: 1px 1px 5px 3px var(--grisleger);
  box-sizing:border-box;
}

.pres_entete {
  display: flex;
  align-items: center;
  margin-bottom:0.5em;
}

.pres_entete div{
  display: flex;
  justify-content: center;
  align-items: center;
}

.pres_font{
  width:30%;
  padding-right:2%;
  font-size: 1em;
}

.pres_font .fa-solid{
  font-size:3em;
  color: var(--bleu);
}

.pres_titre{
  width:67%;
  font-size:1em;
}

.pres_titre h3{
  font-size:1.2em;
  color: var(--bleufonce);
  margin:0;
  min-height:2.6em;
}

#presentation_perso .presentation_p hr{
  display: block;
  margin: 0 auto;
  width: 80%;
  color: var(--grisleger);
  border-bottom: 1px solid var(--grisleger);
}

.presentation_p .pres_texte{
  padding:0.4em;
  font-size: 0.9em;
  color: var(--bleufonce);
  margin-top:0.5em;
  flex-grow:1;
}

@media screen and (max-width: 800px) {
#presentation_perso .e-con-inner{
    display:block;
  }
  #presentation_perso .e-child{
    display:block;
    width: 100%;
  }
  #presentation_perso .presentation_p{
    display:block;
    width: 100%;
  }
  .pres_font .fa-solid{
    font-size:2em;
  }
  .pres_titre h3{
    font-size:1em;
  }
}
/***************** Contenu page ***********************/
#presentation_web, #presentation_technique{
  padding-bottom: 1em;
}
.Titre_section{
  margin-top:1em;
  padding:0;
}
.Titre_section h2.elementor-heading-title{
  color: var(--bleufonce);
  text-align: center;
  width: 30%;
  margin: 0 auto;
  line-height: 2em;
  background-color: var(--blanc);
  position:relative;
}
.Titre_section::before{
  display: block;
  content:' ';
  width: 100%;
  border-top: 1px solid var(--grisleger);
  position: absolute;
  top: 1.6em;
  left:0;
}
.presentation_card {
  margin:1em;
  border: 0px solid var(--grisleger);
  padding:1em;
  border-radius:4px;
  box-shadow: 1px 1px 5px 3px var(--grisleger);
  text-align: center;
  margin-bottom: 2em;
}
#presentation_web .presentation_card p, #presentation_technique .presentation_card p{
  margin: 0;
}
#presentation_web .presentation_card h3, #presentation_technique .presentation_card h3{
  color: var(--bleufonce);
  margin: 0.5em 0;
}
#presentation_web .presentation_card hr, #presentation_technique .presentation_card hr{
  display: block;
  margin: 0 auto;
  margin-bottom: 1em;
  width: 80%;
  color: var(--grisleger);
  border-bottom: 1px solid var(--grisleger);
}
@media screen and (max-width: 800px) {
  .Titre_section h2.elementor-heading-title{
    width:100%;
  }
}
/******************* Bas accueil *******************/
#footer_contact{
  position: relative;
  overflow: hidden; 
  background:
  radial-gradient(62% 250px at 0% -22%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.85) 52%, transparent 53%),
  radial-gradient(91% 289px at 0% -24%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.16) 48%, transparent 49%),
  radial-gradient(120% 312px at 0% -15%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.10) 45%, transparent 46%),
  linear-gradient(169deg, transparent 12%, var(--bleu) 20%, var(--bleufonce));
  padding: 1em 0;
}
/*#footer_contact::before{
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
}*/
#main #footer_contact h2{
  width: 50%;
  margin: 0 auto;
  color: var(--blanc);
  text-align: center;
}
#footer_contact div{
  color: var(--blanc);
  text-align: center;
}
#footer_contact .btn_contact_renfort a{
  color: var(--bleufonce);
  text-align: center;
  width: 250px;
  margin: 0 auto;
  background-color: var(--blanc);
  border-radius:4px;
  border: 1px solid var(--grisleger);
  box-shadow: 1px 1px 5px 3px var(--grisleger);
}
#footer_contact .btn_contact_renfort a:hover{
  font-weight: bold;
  box-shadow: 1px 1px 5px 3px var(--bleufonce-03);
}

/***************** Page contact ***********************/
#header_contact{
  margin-bottom: 1em;
}
#header_contact h1{
  color: var(--bleufonce);
}
#carte_visite{
  position: relative;
  overflow: hidden; 
  background:
  radial-gradient(139% 246px at 99% 94%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.85) 52%, transparent 53%),
  radial-gradient(187% 283px at 104% 95%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.16) 48%, transparent 49%),
  radial-gradient(250% 327px at 116% 95%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.10) 45%, transparent 46%),
  linear-gradient(169deg, var(--bleufonce), var(--bleu) 81%, transparent 88%);
  padding: 1em;
  border-radius:1em;
  width: 40%;
}
#carte_visite h2,#carte_visite h3, #carte_visite p, #carte_visite ul, #carte_visite ul li{
    color: var(--blanc);
}
#carte_visite h2,#carte_visite h3{
  text-decoration: underline;
}
#carte_visite #cv_presentation picture, #carte_visite #cv_presentation img{
  border-radius:3em;
  width: 25%;
}
#carte_visite .cv_donnee{
  padding-left: 2em;
  font-size: 0.9em;
  position: relative;
}
#carte_visite .cv_donnee::before{
  font-family: 'FontAwesome';
  font-size: 1.7em;
  content: ' ';
  position: absolute;
  left: 0.3em;
  color: var(--blanc);
  top: 0;
}
#carte_visite #mail, #carte_visite #secteur{
  padding-left: 3em;
}
#carte_visite #mail.cv_donnee::before{
  content: '\f0e0';
  top: -0.3em;;
}
#carte_visite #secteur.cv_donnee::before{
  content: '\f3c5';
  top: 0.4em;;
}
#carte_visite hr{
  display: block;
  margin: 0 auto;
  margin-bottom: 1em;
  width: 80%;
  color: var(--blanc);
  border-bottom: 1px solid var(--blanc);
}
#carte_visite #cv_experience p{
  margin-bottom: 1em;
}
#bloc-formulaire{
  padding:0;
  width: 55%;
  margin-right: 5%;
}
#formulaire{
  padding: 1em; 
  box-shadow: 1px 1px 5px 3px var(--bleufonce-03);
  width: 100%;
  border-radius:1em;
}
#formulaire #wpforms-field-limit-text-48-12{
  display: none;
}
#formulaire .contact_envoi{
  display: block;
  margin: 0 auto;
  background: var(--bleufonce);
  box-shadow: 1px 1px 5px 3px var(--bleufonce);
}
#formulaire .contact_envoi:hover{
  box-shadow: none;
}
#zone_bouton .btn_contact_blanc a.elementor-button{
  display: block;
  margin: 0 auto;
  background: var(--blanc);
  box-shadow: 1px 1px 5px 3px var(--bleufonce);
  color: var(--bleufonce);
  width: 50%;
}
#zone_bouton .btn_contact_bleu a.elementor-button{
  display: block;
  margin: 0 auto;
  background: var(--bleufonce);
  box-shadow: 1px 1px 5px 3px var(--bleufonce);
  color: var(--blanc);
  width: 50%;
}
#zone_bouton .btn_contact_blanc a.elementor-button:hover, #zone_bouton .btn_contact_bleu a.elementor-button:hover{
  box-shadow:none;  
}
@media screen and (max-width: 1130px) {
  #carte_visite{
    background:  linear-gradient(169deg, var(--bleufonce), var(--bleu));
  }
}
@media screen and (max-width: 900px) {
  #carte_visite, #bloc-formulaire{
    width:100%;
    margin:0;
  }
  #bloc-formulaire{
      margin-bottom: 1em;;
    }
  #carte_visite .cv_donnee picture, #carte_visite .cv_donnee img{
    width:100%;

  }
}
/***************** FOOTER *****************************/
footer{
  background-color:var(--bleufonce);
  color: var(--blanc);
}
footer .footer-widget-area>*{
  display: flex;
  align-items: center;     /* centre vertical */
}
#footer-navigation{
  display: flex;
  justify-content: center; /* centre horizontal */
  align-items: center;     /* centre vertical */
}
footer #footer-navigation #footer-menu, footer #footer-navigation #footer-menu li, footer #footer-navigation #footer-menu li a{
  color: var(--blanc);
}