* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    
}



/* Container global */
#menu-header {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #E9F3FF;
    color: #1e3a5f;
    padding: 6px 12px;
    border-radius: 8px;
    font-family: 'Louis George Café', sans-serif;
    font-weight: bold;
  }
  
  /* Tous les liens par défaut : inactive */
  #menu-header .trp-language-switcher-container a {
    opacity: 0.7;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  
  /* Langue active : pleine opacité */
  #menu-header .current-language-menu-item a {
    opacity: 1;
  }
  
  /* Slash entre les langues */
  #menu-header .trp-language-switcher-container + .trp-language-switcher-container::before {
    content: "/";
    margin: 0 6px;
    color: #1e3a5f;
  }

  /* Par défaut : cache le menu */
#menu-header {
    display: none;
}

/* À partir de 768px (~md) : affiche le menu */
@media (min-width: 768px) {
  #menu-header {
    display: flex;
  }
}
  


  /* Menu Accueil : structure similaire à l'autre */
#menu-accueil {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #011B49; /* ou #8fc1e3 si tu veux bleu clair */
    color: white;
    padding: 6px 12px;
    border-radius: 2px;
    font-family: 'Louis George Café', sans-serif;
    font-weight: bold;
  }
  
  /* Tous les liens de langue (inactifs) */
  #menu-accueil .trp-language-switcher-container a {
    opacity: 0.7;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  
  /* Langue active : pleine opacité */
  #menu-accueil .current-language-menu-item a {
    opacity: 1;
  }
  
  /* Slash entre les deux langues */
  #menu-accueil .trp-language-switcher-container + .trp-language-switcher-container::before {
    content: "/";
    margin: 0 6px;
    color: white;
  }
  

    /* Par défaut : cache le menu */
#menu-accueil {
    display: none;
}

/* À partir de 768px (~md) : affiche le menu */
@media (min-width: 768px) {
  #menu-accueil {
    display: flex;
  }
}
  
  

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: 'Louis George Café', sans-serif;
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
  }


:root {
    --black:#231f20;
    --white:white;
    --bleu:#01215A;
    --bleu-moyen:#2F61A8;
    --bleu-clair:#E9F3FF;
    --bleu-tclair:#C7DEFF;
    --gris:#EBF1F9;
    --bleu-fonce:#233E70;
    --bleu-tfonce:#011B49;
    --bleu-a:#233E70;
}



.bg-bleu {
    background-color: var(--bleu);
}

.bg-gris {
    background-color: var(--gris);
}

.bg-bleu-moyen {
    background-color: var(--bleu-moyen);
}

.bg-bleu-tclair {
    background-color: var(--bleu-tclair);
}

.bg-bleu-clair {
    background-color: var(--bleu-clair);
}
.bg-bleu-fonce {
    background-color: var(--bleu-fonce);
}
.bg-bleu-tfonce {
    background-color: var(--bleu-tfonce);
}
.bg-bleu-a {
    background-color: var(--bleu-a);
}

.c-white {
    color: var(--white);
}

.c-bleu {
    color: var(--bleu);
}

.c-bleu-tfonce {
    color: var(--bleu-tfonce);
}


.c-bleu-clair {
    color: var(--bleu-clair);
}

.c-bleu-tclair {
    color: var(--bleu-tclair);
}

.fontGras {
    font-weight: 700;
}

#sideMenu {
    position: fixed;
    top: 0;
    right: 0;
    transform: translateX(100%);
    z-index: 1000;
    transition: transform 0.4s ease-in-out;
}

#sideMenu.open {
    transform: translateX(0);
}

.section4-active {
    display: block;
}

.section4-inactive {
    display: none !important;
}

.section4-activebtn {
    opacity: 1;
}

.section4-inactivebtn {
    opacity: 0.5;
}

.rotated {
    transform: rotate(90deg);
    transition: transform 0.5s ease; 
}

.rotatedAgain {
    transform: rotate(0deg);
    transition: transform 0.5s ease; 
}

.W650 {
    width: 649px !important;
    max-width: 649px !important;
}
#marge2ndbtn {
    margin-bottom: -15px;
}



.footer-bg {
    background-size: 20px;
    background-repeat: no-repeat; /* Facultatif pour éviter les répétitions */
}


/* #image-slider {
    position: relative;
    width: 100%;
    height: 1000px; 
    overflow: hidden; 
}

.slider-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover; 
} */


.letter {
    clip-path: inset(100% 0 0 0); /* Masque initial */
    transition: clip-path 1s ease-out; /* Animation douce */
}











.ft {
    margin-bottom: -300px;
}

#domaines {
    margin-bottom: -50px;
    margin-top: 48px;
}

#mirroirmoul {
        margin-top: 250px;
}

@media screen and (max-width: 767px){
    #domaines {
        margin-bottom: 45px;
        
    };

}







/* card_nos-avocats */

#svg2:hover {
    background-color: white !important;
}

#svg2:hover #svgc {
    fill: #233E70 !important;
}

.container {
    width: 180px !important;
    height: 279px !important;
    perspective: 800px !important;
}


@media screen and (max-width: 463px){
    .container {
        width: 155px !important;
        height: 279px !important;
        perspective: 700px !important;
    }

 }

.card1, .card2, .card3, .card4, .card5, .card6, .card7, .card8, .card9, .card10 {
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
    transition: transform 1.5s !important;
    transform-style: preserve-3d !important;
    cursor: pointer !important;
}

.card1.flipped, .card2.flipped, .card3.flipped, .card4.flipped, .card5.flipped, .card6.flipped, .card7.flipped, .card8.flipped, .card9.flipped, .card10.flipped {
    transform: rotateY(180deg) !important;
}

.front, .back {
    height: 100% !important;
    width: 100% !important;
    box-shadow: 0 0 5px 2px rgba(50, 50, 50, 0.25) !important;
    position: absolute !important;
    backface-visibility: hidden !important;
}

.front {
    background-color: #233E70 !important;
    color: white !important;
}

.back {
    background-color: #233E70 !important;
    transform: rotateY(180deg) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    color: white !important;
    font-size: 0.8rem !important;
    top: 0;
}

#imgcarte {
    width: 180px !important;
    height: 180px !important;
}

@media screen and (max-width: 463px){
    #imgcarte {
        width: 155px !important;
        height: 155px !important;
    }

 }






/* Marie-Hure */

#avocatimg {
    z-index: 2;
    position: absolute;
    bottom:0px; 
    height: 400px; 
    left: 50px;
}



@media screen and (max-width: 450px){
    #avocatimg {
        z-index: 2;
        position: absolute;
        bottom:0px; 
        height: 250px; 
        left: 30px !important;
    }

    /* #avocatbox {
        height: 240px;
        width: 100px;
    } */

    #nomavocat {
        left: 224px;
    }

    #content {
        margin-left: 20px;
        margin-right: 20px;
    }
    
}

@media screen and (max-width: 463px){
   #design941 {
        margin-top: 100px !important;
   }
}
@media screen and (max-width: 600px){
   #design941 {
        bottom: 20px !important;
   }
}
@media screen and (max-width: 609px){
   #design941 {
        margin-top: 100px;
   }
   #content {
        margin-left: 20px;
        margin-right: 20px;
    }
}

@media screen and (max-width: 900px){
    #design941 {
        margin-top: 20px;
    }
    #avocatimg { 
        left: 50px;
    }
}



/* Emilie-Loze */

#avocatimg {
    z-index: 2;
    position: absolute;
    bottom:0px; 
    height: 400px; 
    left: -60px;
}



@media screen and (max-width: 450px){
    #avocatimg {
        z-index: 2;
        position: absolute;
        bottom:0px; 
        height: 250px; 
        left: -30px !important;
    }

    /* #avocatbox {
        height: 240px;
        width: 100px;
    } */

    #nomavocat {
        left: 224px;
    }

    #content {
        margin-left: 20px;
        margin-right: 20px;
    }
    
}

@media screen and (max-width: 463px){
   #design941 {
        margin-top: 100px !important;
   }
}
@media screen and (max-width: 600px){
   #design941 {
        bottom: 20px !important;
   }
}
@media screen and (max-width: 609px){
   #design941 {
        margin-top: 100px;
   }
   #content {
        margin-left: 20px;
        margin-right: 20px;
    }
}

@media screen and (max-width: 900px){
    #design941 {
        margin-top: 20px;
    }
    #avocatimg { 
        left: -70px;
    }
}




/* Jean-Pradal */

#avocatimg {
    z-index: 2;
    position: absolute;
    bottom:0px; 
    height: 400px; 
    left: -60px;
}



@media screen and (max-width: 450px){
    #avocatimg {
        z-index: 2;
        position: absolute;
        bottom:0px; 
        height: 250px; 
        left: -50px !important;
    }

    /* #avocatbox {
        height: 240px;
        width: 100px;
    } */

    #nomavocat {
        left: 224px;
    }

    #content {
        margin-left: 20px;
        margin-right: 20px;
    }
    
}

@media screen and (max-width: 463px){
   #design941 {
        margin-top: 100px !important;
   }
}
@media screen and (max-width: 600px){
   #design941 {
        bottom: 20px !important;
   }
}
@media screen and (max-width: 609px){
   #design941 {
        margin-top: 100px;
   }
   #content {
        margin-left: 20px;
        margin-right: 20px;
    }
}

@media screen and (max-width: 900px){
    #design941 {
        margin-top: 20px;
    }
    #avocatimg { 
        left: -70px;
    }
}






/* Philippe-Pradal */

#avocatimg {
    z-index: 2;
    position: absolute;
    bottom:0px; 
    height: 400px; 
    left: 60px;
}


@media screen and (max-width: 450px){
    #avocatimg {
        z-index: 2;
        position: absolute;
        bottom:0px; 
        height: 250px; 
        left: 30px !important;
    }

    /* #avocatbox {
        height: 240px;
        width: 100px;
    } */

    #nomavocat {
        left: 224px;
    }

    #content {
        margin-left: 20px;
        margin-right: 20px;
    }
    
}

@media screen and (max-width: 463px){
   #design941 {
        margin-top: 100px !important;
   }
}
@media screen and (max-width: 600px){
   #design941 {
        bottom: 20px !important;
   }
}
@media screen and (max-width: 609px){
   #design941 {
        margin-top: 100px;
   }
   #content {
        margin-left: 20px;
        margin-right: 20px;
    }
}

@media screen and (max-width: 900px){
    #design941 {
        margin-top: 20px;
    }
    #avocatimg { 
        left: 50px;
    }
}





/* Vanessa-Ketchedjian */

#avocatimg {
    z-index: 2;
    position: absolute;
    bottom:-1px; 
    height: 400px;
    left: -60px;
}


@media screen and (max-width: 450px){
    #avocatimg {
        z-index: 2;
        position: absolute;
        bottom:0px; 
        height: 250px; 
        left: -20px !important;
    }

    /* #avocatbox {
        height: 240px;
        width: 100px;
    } */

    #nomavocat {
        left: 224px;
    }

    #content {
        margin-left: 20px;
        margin-right: 20px;
    }
    
}

@media screen and (max-width: 463px){
   #design941 {
        margin-top: 100px !important;
   }
}
@media screen and (max-width: 600px){
   #design941 {
        bottom: 20px !important;
   }
}
@media screen and (max-width: 609px){
   #design941 {
        margin-top: 100px;
   }
   #content {
        margin-left: 20px;
        margin-right: 20px;
    }
}

@media screen and (max-width: 900px){
    #design941 {
        margin-top: 20px;
    }
    #avocatimg { 
        left: -70px;
    }
}






/* Denis-Ketchedjian */

#avocatimg {
    z-index: 2;
    position: absolute;
    bottom:-6px; 
    height: 320px; 
    left: -19px;
}



@media screen and (max-width: 450px){
    #avocatimg {
        z-index: 2;
        position: absolute;
        bottom:-6px; 
        height: 250px; 
        left: -50px !important;
    }

    /* #avocatbox {
        height: 240px;
        width: 100px;
    } */

    #nomavocat {
        left: 224px;
    }

    #content {
        margin-left: 20px;
        margin-right: 20px;
    }
    
}

@media screen and (max-width: 463px){
   #design941 {
        margin-top: 100px !important;
   }
}
@media screen and (max-width: 600px){
   #design941 {
        bottom: 20px !important;
   }
}
@media screen and (max-width: 609px){
   #design941 {
        margin-top: 100px;
   }
   #content {
        margin-left: 20px;
        margin-right: 20px;
    }
}

@media screen and (max-width: 900px){
    #design941 {
        margin-top: 20px;
    }
    #avocatimg { 
        left: -70px;
    }
}






/* Francois-Xavier-Kelidjian */

#avocatimg {
    z-index: 2;
    position: absolute;
    bottom:0px; 
    height: 400px; 
    left: 30px;
}


@media screen and (max-width: 450px){
    #avocatimg {
        z-index: 2;
        position: absolute;
        bottom:0px; 
        height: 250px; 
        left: 25px !important;
    }

    #avocatbox {
        height: 240px;
        width: 100px;
    }

    #nomavocat {
        left: 224px;
    }

    #content {
        margin-left: 20px;
        margin-right: 20px;
    }
    
}

@media screen and (max-width: 463px){
   #design941 {
        margin-top: 100px !important;
   }
}
@media screen and (max-width: 600px){
   #design941 {
        bottom: 20px !important;
   }
}
@media screen and (max-width: 609px){
   #design941 {
        margin-top: 100px;
   }
   #content {
        margin-left: 20px;
        margin-right: 20px;
    }
}

@media screen and (max-width: 900px){
    #design941 {
        margin-top: 20px;
    }
    #avocatimg { 
        left: 20px;
    }
}






/* François-Ameli */

#avocatimg {
    z-index: 2;
    position: absolute;
    bottom:0px; 
    height: 400px; 
    left: -15px;
}


@media screen and (max-width: 450px){
    #avocatimg {
        z-index: 2;
        position: absolute;
        bottom:0px; 
        height: 250px; 
        left: -5px !important;
    }

    #avocatbox {
        height: 240px;
        width: 100px;
    }

    #nomavocat {
        left: 224px;
    }

    #content {
        margin-left: 20px;
        margin-right: 20px;
    }
    
}

@media screen and (max-width: 463px){
   #design941 {
        margin-top: 100px !important;
   }
}
@media screen and (max-width: 600px){
   #design941 {
        bottom: 20px !important;
   }
}
@media screen and (max-width: 609px){
   #design941 {
        margin-top: 100px;
   }
   #content {
        margin-left: 20px;
        margin-right: 20px;
    }
}

@media screen and (max-width: 900px){
    #design941 {
        margin-top: 20px;
    }
    #avocatimg { 
        left: -10px;
    }
}





/* Contact */

/* #map {
    height: 450px;
    width: 450px;
    margin-right: 45px;
}

.map {
    display: flex;
    justify-content: center;
}

.border-blue {
    border-color: #002668;
}

.container {
    margin-left: 35%;
    width: 500px  ;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.container form .descr {
font-size: 20px;
font-weight: 500;
color: #e8e8e8;
margin-bottom: 25px;
margin-top: 25px;
text-align: center;
}

.form {
display: flex;
flex-direction: column;
margin-right: 50px;
margin-left: 50px;

}

.input, textarea {
margin: 1em 0 1em 0;
width: 450px;
position: relative;
}

.input input, textarea {
font-size: 100%;
padding: 0.7em;
outline: none;
color: #e8e8e8;
border: none;
border-bottom: 2px solid #e8e8e8;
background: transparent;
border-radius: none;
width: 100%;
resize: none;
}

.input label {
font-size: 100%;
position: absolute;
left: 0;
color: #e8e8e8;
padding: 0.7em;
margin-left: 0.1em;
pointer-events: none;
transition: all 0.5s ease;
text-transform: uppercase;
}

.input :is(input:focus, input:valid)~label {
transform: translateY(-50%) scale(.9);
margin: 0em;
padding: 0.4em;
background: transparent;
}

.input textarea:focus ~ label,
.input textarea:valid ~ label {
transform: translateY(-50%) scale(.9);
margin: 0em;
padding: 0.4em;
background: transparent;
}

.inputGroup :is(input:focus, input:valid) {
border-color: rgb(37, 37, 211);
}

.form button {
color: #002668;
align-self: flex-start;
padding: 0.6em;
border: none;
cursor: pointer;
margin-bottom: 50px;
transition: all 0.3s ease-in-out;
position: relative;
overflow: hidden;
}

.form button:before {
content: "";
position: absolute;
bottom: 100%;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}

.form button:hover:before {
opacity: 0.2;
}

.form button:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}


@media screen and (min-width: 300px) {
    
    .input, textarea {
        width: 345px;
    }
    #divcontainer {
        margin-left: 0px;
    
    }    
}
@media screen and (min-width: 460px) {
    .input, textarea {
        width: 400px;
    }
    #divcontainer {
        margin-left: 0px;
    }
  
}
@media screen and (min-width: 520px) {
    .input, textarea {
        width: 430px;
    }
    #divcontainer {
        margin-left: 0px;
    }
  
}
@media screen and (min-width: 590px) {
    .input, textarea {
        width: 510px;
    }
    #divcontainer {
        margin-left: 0px;
    }
  
}
@media screen and (min-width: 768px) {
    .input, textarea {
        width: 250px;
    }
    .form {
        
        margin-right: 60px;
        margin-left: 60px;
    }
    #divcontainer {
        margin-left: 30px;
    }
}
@media screen and (min-width: 1024px) {
    .input, textarea {
        margin: 1em 0 1em 0;
        width: 450px;
        position: relative;
    }
    .form {
        display: flex;
        flex-direction: column;
        margin-right: 50px;
        margin-left: 50px;
    }
    #divcontainer {
        margin-left: 40px;
    }
}
@media screen and (min-width: 1560px) {

    #divcontainer {
        margin-left: 0px;
    }
} */



/* Contenu replié (avec animation lisse) */
.inactive {
    max-height: 0; /* Réduction progressive */
    overflow: hidden;
    opacity: 0; /* Rendre invisible */
    padding: 0; /* Supprimer l'espace */
    transition: max-height 0.5s ease-in-out, 
                padding 0.5s ease-in-out, 
                opacity 0.5s ease-in-out;
}

/* Contenu déplié */
.inactive:not(.inactive) {
    max-height: 500px; /* Ajuster selon le contenu */
    opacity: 1;
    padding: 1rem;
    transition: max-height 0.5s ease-in-out, 
                padding 0.5s ease-in-out, 
                opacity 0.5s ease-in-out;
}





.content {
    transition: height 0.4s ease;
}

.inactive {
    height: 0;
    overflow: hidden;
    display: none !important;
}

.content.active {
    overflow: hidden;
}

button.rotated svg {
    transform: rotate(90deg);
    transition: transform 0.4s ease;
}


@media screen and (max-width: 1055px){
.text-mess {
    height: 32px;
}
}

@media screen and (max-width: 1055px){
    .btn-send {
        margin-bottom: 20px !important;
    }
}

@media (max-width: 640px) {
    .form-bloc {
        margin-top: 360px !important;
    }
}

/* @media (max-width: 640px) {
    .map-bloc {
        width: 80% !important;
    }
} */