/* * ====================================================
   SOMMAIRE
* ====================================================

    1. TYPOGRAPHIES
        1.1 Liens et boutons
        1.2 Headings
    2. HEADER
        2.1 Menu Sidebar
            - Conteneur principal
            - Conteneur du menu
            - Navigation sticky
        2.2 Bouton contact
        2.3 Mise en forme du menu
        2.4. Logo en tête de page
    3. FOOTER
        3.1 Mise en forme générale
    4. PAGES
        4.1 Mise en forme générale
        4.2 Accueil
        4.3 Etude
        4.4 Paiement - Validation  */

/* * ====================================================
   1. TYPOGRAPHIES
* ==================================================== */



/* * 1.1 Application générales */


a[aria-current=page] {
    font-weight: bold;
}

.stk-block .stk-button.stk--hover-effect-darken:hover, 
a.wp-block-read-more:hover {
    text-decoration: underline !important;
}

/* * 1.2 Headings */

.expression-cle h1 {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: normal;
}

.titre {
    font-size: 50px;
    font-weight: 600;
    line-height: calc(50px * 1.4);
}

/* * ====================================================
   1. HEADER
* ==================================================== */

/* * 2.1 Menu Sidebar */
/* * Conteneur principal */

#main {
    position: relative;
    min-height: 80vh;
}

#main .ct-container-sidebar {
    display: flex;
    flex: 1;
    position: absolute;
    z-index: 999;
    height: 100%;
    width: 300px;
}

@media (min-width: 1433px) {
    #main .ct-container-sidebar { 
        left: calc((100% - 700px) / 2 - 300px);
    }
}

/*Conteneur du menu */
.widget-area {
    padding: var(--stk-block-background-padding);
    max-width: 230px;
}

@media (max-width: 1023.98px) {
    #main .ct-container-sidebar,
    .widget-area {
        display: none;
    }
}

@media (max-width: 1432px) {
    .widget-area {
        padding-left: calc(var(--stk-block-margin-bottom)*2);
    }
}

/* * Navigation sticky */

.stickynavigation {
    position: -webkit-sticky;
    position: sticky;
    top: 50px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    overflow-y: auto;
    z-index: 1000;
    padding-bottom: 70px;
}

#site-navigation {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

/* * 2.2 Bouton contact */

.stickycontact {
    position: -webkit-sticky;
    position: sticky;
    top: 92vh;
    bottom: 50px;
    z-index: 1000;
}

.ct-widget.widget_block .wp-block-button .wp-block-button__link {
    display: inline-block;
    padding: 10px 20px;
    background-color: transparent;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.ct-widget.widget_block .wp-block-button .wp-block-button__link:hover {
    background-color:var(--theme-palette-color-1);
}

/* * 2.3 Mise en forme du menu */

.primary-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.primary-menu li {
    position: relative;
    margin-bottom: 5px; 
}



.primary-menu li a, .primary-menu li p {
    display: block;
    padding: 5px 10px;
    text-decoration: none;
    color: #333;
}

.primary-menu li p {
    -webkit-margin-after: unset ! important;
            margin-block-end: unset ! important;
}

.primary-menu li a:hover,
.primary-menu li a:focus {
    color: #000;
    text-decoration: underline;
}
.menu-item-537 a:hover, .menu-item-537 a:focus, 
.menu-item-536 > a:hover, .menu-item-536 > a:focus{
    text-decoration: none !important;
}

.primary-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

/* Sous-sous-menus */
.primary-menu li .sub-menu li > ul {
    display: none;
}
.primary-menu li .sub-menu li.current_page_item > ul, .primary-menu li .sub-menu li.current_page_ancestor > ul {
    display: block;
}


.primary-menu li .sub-menu li ul li:not(.current_page_item) a {
    text-decoration: none;
    font-weight: normal;
}

.primary-menu li .sub-menu li ul li:hover a {
    text-decoration: underline;
}

.primary-menu li:hover > ul,
.primary-menu li.current-menu-item > ul,
.primary-menu li.current-menu-ancestor > ul {
    display: block;
}

.primary-menu ul {
    margin-left: 5px;
}

.primary-menu ul li a {
    padding: 5px 10px;
    position: relative;
    padding-left: 20px;
}

.primary-menu ul li a:before {
    content: "¬";
    position: absolute;
    left: 0;
    color: #333;
    margin-left: 5px;
}

nav #menu-menu-principal {
    display: flex;
    flex-direction: column;
}

.primary-menu .sub-menu .sub-menu li {
    line-height: normal;
  font-size: 0.9rem;
  margin-bottom: 1px;
}

.primary-menu .current_page_item a{
    font-weight: bold;
}

/* * 2.4. Logo en tête de page */

body {
    position: relative;
}

body::before {
    content: "";
    background-image: url('/wp-content/uploads/2024/06/logo-amcnotaires-vectoriel.svg');
    background-size: 50vw;
    background-repeat: no-repeat;
    background-position: top right;
    position: absolute;
    z-index: 2;
    opacity: 0.02;
    pointer-events: none;
    mix-blend-mode: multiply;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 1023.98px) {
    body::before {
        background-size: 70vw;
    }
}

@media (max-width: 800px) {
    body::before {
        background-size: 90vw;
    }
}


/* * ====================================================
   3. FOOTER
* ==================================================== */

/* * 3.1. Mise en forme générale */

footer {
    margin-top: 5vh;
}

/* Menu */
@media (min-width: 1023.98px) {
    #menu-menu-footer {
        -moz-column-count: 2;
             column-count: 2;
        -moz-column-gap: 20px;
             column-gap: 20px;
        list-style-position: inside;
      }
      #menu-menu-footer li ul {
        -webkit-padding-start: 0px;
                padding-inline-start: 0px;
      }
}

@media (min-width: 1433px) {
    #menu-menu-footer {
        -moz-column-count: 3;
             column-count: 3;
        -moz-column-gap: 20px;
             column-gap: 20px;
        list-style-position: inside;
      }
      #menu-menu-footer li ul {
        -webkit-padding-start: 0px;
                padding-inline-start: 0px;
      }
}



/* * ====================================================
   4. PAGES
* ==================================================== */

/* * 4.1. Mise en forme générale */

/* * Container personnalisé dans single.php */
.amc-container {
display: flex;
gap: 20px
}

.amc-container .ct-container-full {
        padding-top: 0;
        margin: 0;
        margin-left: auto;
        width: 100%;
}
.amc-container .ct-container-full .entry-content {
    position: relative;

}
.amc-container .ct-container-full .entry-content::after {
    content: '';
    height: 100%;
    width: 20vw;
    position: absolute;
    top: 0;
    left: 100%;
    background-color: white;
}
        
@media only screen and (min-width:1024px){
    .espace-sidebar {
        flex-basis: 300px;
        min-width: 250px;
    }
}

/* * 4.2 Accueil */

.icon-famille > .stk-column-wrapper > .stk-block-content,
.icon-prive > .stk-column-wrapper > .stk-block-content,
.icon-patrimoine > .stk-column-wrapper > .stk-block-content,
.icon-documents > .stk-column-wrapper > .stk-block-content {
    position: relative;
}

.icon-famille > .stk-column-wrapper > .stk-block-content::before,
.icon-prive > .stk-column-wrapper > .stk-block-content::before,
.icon-patrimoine > .stk-column-wrapper > .stk-block-content::before, 
.icon-documents > .stk-column-wrapper > .stk-block-content::before {
    content: "";
    position: absolute;
    left:-10px;
    top: -10px;
    background-size: 110px;
    background-repeat: no-repeat;
    background-position: top left;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: multiply;
    width: 100%;
    height: 100%;
}

.icon-famille > .stk-column-wrapper > .stk-block-content::before {
    background-image: url('/wp-content/uploads/2024/06/icon-droit-famille.svg');
}

.icon-prive > .stk-column-wrapper > .stk-block-content::before {
    background-image: url('/wp-content/uploads/2024/06/icon-droit-international.svg');
}

.icon-patrimoine > .stk-column-wrapper > .stk-block-content::before {
    background-image: url('/wp-content/uploads/2024/06/icon-droit-patrimoine.svg');
}

.icon-documents  > .stk-column-wrapper > .stk-block-content::before {
    background-image: url('/wp-content/uploads/2024/09/icon-documents.svg');
}
  


/** 4.3 Etude */

/* Modale AMC */

.modal-trigger-AMC {
    cursor: pointer;
    position: relative;
    z-index: 4;
}

/* Masquer le modal par défaut */
#myModalAMC {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fond opaque */
    justify-content: center;
    align-items: center;
    padding: 20px;
  }
  
  #myModalAMC .modal-content {
    background-color: white;
    padding: 20px;
    max-width: 95%;
    max-height: 95%;
    margin: auto;
    border-radius: 10px;
    overflow-y: scroll;
  }
  
  #myModalAMC .close {
    position: fixed;
    top: 6%;
    right: 6%;
    font-size: 24px;
    cursor: pointer;
    
  }
  
  /* Style pour le bouton de fermeture */
#myModalAMC .close {
    color: #aaa;
    float: right;
    font-size: 24px;
    font-weight: bold;
    width: auto;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  line-height: 0;
}
  
  #myModalAMC .close:hover,
  #myModalAMC .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
  
  /* Modale JC */

  .modal-trigger-JC {
    cursor: pointer;
    position: relative;
    z-index: 4;
}

/* Masquer le modal par défaut */
#myModalJC {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    padding: 20px;
}

#myModalJC .modal-content {
    background-color: white;
    padding: 20px;
    max-width: 95%;
    max-height: 95%;
    margin: auto;
    border-radius: 10px;
    overflow-y: scroll;
}

#myModalJC .close {
    position: fixed;
    top: 6%;
    right: 6%;
    font-size: 24px;
    cursor: pointer;
}

#myModalJC .close {
    color: #aaa;
    float: right;
    font-size: 24px;
    font-weight: bold;
    width: auto;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    line-height: 0;
}

#myModalJC .close:hover,
#myModalJC .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


/* Modale MJ */

.modal-trigger-MJ {
    cursor: pointer;
    position: relative;
    z-index: 4;
}

/* Masquer le modal par défaut */
#myModalMJ {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    padding: 20px;
}

#myModalMJ .modal-content {
    background-color: white;
    padding: 20px;
    max-width: 95%;
    max-height: 95%;
    margin: auto;
    border-radius: 10px;
    overflow-y: scroll;
}

#myModalMJ .close {
    position: fixed;
    top: 6%;
    right: 6%;
    font-size: 24px;
    cursor: pointer;
}

#myModalMJ .close {
    color: #aaa;
    float: right;
    font-size: 24px;
    font-weight: bold;
    width: auto;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    line-height: 0;
}

#myModalMJ .close:hover,
#myModalMJ .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Modale MP */

.modal-trigger-MP {
    cursor: pointer;
    position: relative;
    z-index: 4;
}

/* Masquer le modal par défaut */
#myModalMP {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    padding: 20px;
}

#myModalMP .modal-content {
    background-color: white;
    padding: 20px;
    max-width: 95%;
    max-height: 95%;
    margin: auto;
    border-radius: 10px;
    overflow-y: scroll;
}

#myModalMP .close {
    position: fixed;
    top: 6%;
    right: 6%;
    font-size: 24px;
    cursor: pointer;
}

#myModalMP .close {
    color: #aaa;
    float: right;
    font-size: 24px;
    font-weight: bold;
    width: auto;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    line-height: 0;
}

#myModalMP .close:hover,
#myModalMP .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


/** 4.4 Paiement-Validation */

/* Styles spécifiques aux formulaires */
form {
    margin-bottom: 25px; /* Pour s'assurer qu'il y ait un espacement entre les formulaires si plusieurs existent */
    max-width: 700px;
    margin-right: auto !important;
}

form .rang-form .demi-colonne {
    margin-bottom:15px; /* Espace de 25px sous chaque champ (demi-colonne) */
}

form input,
form select,
form textarea {
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc; 
    background-color: #eff7ff57 !important;
    color: #333;
    box-sizing: border-box;
}
form label {
    margin-bottom: 5px; /* Petit espace entre le label et le champ */
    display: block; /* Chaque label est sur sa propre ligne */
}

input[type="submit"] {
    margin-top: 25px; /* Un petit espace au-dessus du bouton de soumission */
    margin-bottom: 0; /* Annule la marge en dessous du bouton */
    cursor: pointer;
    font-size: 18px;
    padding: 1rem 2rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
form:not(.validation) input[type="submit"]:hover {
    background-color: #EFF7FF !important;
}

form.validation input:not([type="submit"]),
form.validation select,
form.validation textarea {
    background-color: #eee !important;
    color: #444;
}


form.validation .button-link {
    margin-top: 15px;
    color: #333; /* Couleur du texte */
    text-decoration: none;
    cursor: pointer;
    text-align: center;
}

form.validation .button-link svg {
    fill: #333;
    width: 20px;
    height: 20px;
}


form.validation .button-link:hover {
    color: #ccc;
}

form.validation input[type="submit"]:hover {
    background-color: #E8DB7D !important;
    color: #000;
}

/** 4.5 Contact */

div.wpforms-container-full:not(:empty) {
    margin:0 !important;
    
  }