/* Styles généraux */
html {
    scroll-behavior: smooth;
}

/* Préloader */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* à la place de 100vw */
    height: 100vh;
    background-color: black;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease;
    opacity: 1;
    pointer-events: all;
  }
  
  #preloader.fade-out {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }
  
  /* Logo avec rebond doux à l’apparition */
  .preloader-logo {
    width: 90%;
    max-width: 300px;
    animation: appearBounce 1.4s ease-out forwards;
    opacity: 0;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
  }

  
  @keyframes appearBounce {
    0% {
      opacity: 0;
      transform: scale(0.9);
    }
    50% {
      opacity: 1;
      transform: scale(1.05);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  body.fade-in {
    opacity: 0;
    transition: opacity 1.4s ease;
  }
  
  body.loaded.fade-in {
    opacity: 1;
  }
  
  
/* Animation d'apparition + scale */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Animation pour fade-in depuis la gauche */
.fade-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1s ease, transform 1s ease;
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Animation pour contenu de section en décalé */
.staggered-fade .staggered {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.staggered-fade.visible .staggered {
    opacity: 1;
    transform: translateY(0);
}

.staggered:nth-child(1) { transition-delay: 0.1s; }
.staggered:nth-child(2) { transition-delay: 0.3s; }
.staggered:nth-child(3) { transition-delay: 0.5s; }

.page-container {

    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}
  
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100vh;
    background: url('background2.jpg') center/cover no-repeat;
    z-index: -1;
    filter: blur(2px);
    pointer-events: none;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    line-height: 1.6;
    color: black;
    background-color: white;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    position: relative;
    z-index: 0;
    text-align: justify;
    text-justify: inter-word;
}

.image-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 2s ease-out, transform 2s ease-out;
}

.image-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

p, .accordion-content, .bio-text, .cabinet-text, .content, .intro, .texte {
  text-align: justify;
  text-justify: inter-word;
}

/* Ne pas justifier les titres */
h1, h2, h3, h4, h5, h6 {
  text-align: left;
}

.signature {
  text-align: center; /* ou left selon ton design */
  text-justify: auto;
}

/* Effet zoom sur les titres */
h1.zoomable, h2.zoomable {
    display: inline-block;
    transition: transform 0.4s ease-in-out;
}

h1.zoomable:hover, h2.zoomable:hover {
    transform: scale(1.05);
}

/* Animation combinée slide + zoom au scroll */
.title-animate {
    opacity: 0;
    transform: translateX(-40px) scale(0.95);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.title-animate.visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.lift-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
}

.lift-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.underline-animate::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background: #FF4500;
    margin: 10px auto 0;
    transition: width 0.8s ease;
}

.underline-animate.visible::after {
    width: 80%;
    max-width: 300px;
    margin: 10px auto 0;
}

.staggered {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.staggered.visible {
    opacity: 1;
    transform: translateY(0);
}


/* HEADER : position fixe en haut */
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 50px;
  background: transparent;
  z-index: 1000;
  margin: 0; /* supprime le margin-top ! */
}


.logo {
   height: 120px;
   filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
    width: auto;
    display: inline-block;
  }

  

/* Barre de navigation verticale fixe en haut à droite */
.navbar {
    position: absolute; /* ← ajouté */
    top: 10px;
    right: 120px;
    display: flex;
    gap: 30px;
    flex-direction: column;
    align-items: flex-end;
    background: none;
    z-index: 10;
  }
  

.navbar ul {
    display: flex;
    flex-direction: column; /* Affichage vertical */
    gap: 13px; /* Espacement entre les liens */
    list-style: none;
    padding: 0;
}

.navbar ul li a {
    text-decoration: none;
    color: black;
    font-size: 1.2em;
}

/* Style des liens */
.navbar a {
  padding: 10px;
  text-decoration: none;
  color: black;
  font-size: 20px; /* ← augmenté légèrement */
  font-weight: 600; /* ← un peu moins épais que bold pour plus de finesse */
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.9); /* déjà recommandé */
  transition: color 0.3s ease-in-out;
}



/* Effet au survol */
.navbar a:hover {
    color: #FF4500;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
}
/* Menu burger - masqué sur desktop */
.burger {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1100;
}

.burger .bar {
    width: 100%;
    height: 3px;
    background-color: black;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
}

/* Apparition uniquement sur mobile */

@media (max-width: 768px) {
    .navbar,
    .burger {
      display: none !important;
    }
  }

  

/* SECTION HERO */
.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 700px; /* ← garantit un espace minimum même si vidéo lente */
  overflow: hidden;
  display: flex;
  align-items: center;
  z-index: 1;
}


.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
  display: block;
  pointer-events: none;
  opacity: 1; /* IMPORTANT : éviter l'opacité 0 */
}

.hero-video.desktop {
  display: block;
}
.hero-video.mobile {
  display: none;
}

.hero-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 320px;
  background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0.4), transparent);
  z-index: 0;
  pointer-events: none;
}


.logo {
    height: 120px; /* Ajuste la taille du logo */
    width: auto;
    margin-right: auto; /* Pousse le menu vers la droite */
}


/* Section générale */
.section {
    padding: 40px 20px;
    margin: 0 auto;
    margin-top: 60px;
}

#section1, 
#section2, 
#section3 {
max-width: 1200px;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px); /* Départ à gauche */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* Position finale */
    }
}

  
/* Section CABINET */
.cabinet-split-horizontal {
    display: flex;
    flex-wrap: nowrap;
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px; /* marge à gauche et à droite */
    gap: 40px;
    align-items: flex-start;
  }
  
  .cabinet-split-image {
    flex: 1;
  }
  
  .cabinet-split-image img {
    width: 90%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  }
  
  .cabinet-split-text {
    flex: 1;
    font-family: 'Source Serif Pro', serif;
    font-size: 1.1em;
    line-height: 1.8;
    color: #333;
  }
  
  .cabinet-split-text h2 {
    font-family: 'Lexend Giga', sans-serif;
    font-size: 2.2em;
    margin-bottom: 20px;
    color: black;
  }  

.section h2 {
    font-family: 'Lexend Giga', sans-serif;
    font-size: 2.5em;
    font-weight: 700; /* Gras */
    color: black; /* Noir */
    margin-bottom: 20px;
    opacity: 0; /* Caché au départ */
    transform: translateX(-50px); /* Position de départ */
    animation: slideInLeft 1.1s ease-out forwards; /* Animation */
}

.cabinet-dessin {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 40px auto 0 auto;
}

#section2 h2, 
#section3 h2 {
    animation-delay: 0.9s; /* Ajout d'un délai spécifique si nécessaire */
}

.underline-animate::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: #FF4500;
    margin: 10px auto 0;
    transition: width 0.6s ease;
}

.underline-animate.visible::after {
    width: 400px;
}

.section ul {
    margin-left: 40px;
    line-height: 1.6;
}

.section h3 {
    font-size: 2em;
    margin-top: 40px;
    color: black; /* Titres en noir */
    text-transform: uppercase;
}

/* Alignements spécifiques */
#section2 h2,
#section3 h2 {
    text-align: left;
}

#section1 h2,
#section4 h2 {
    text-align: center;
}

/* Animation titre */
.title-animate {
    opacity: 0;
    transform: translateY(20px); /* Départ du titre */
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.title-animate.visible {
    opacity: 1;
    transform: translateY(0); /* Position finale */
}

/* Animation au scroll */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px); /* Départ contenu */
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0); /* Retour à la position normale */
}


/* section CABINET */
#section1 {
    padding: 60px 20px; /* Augmente le padding pour plus d'espace vertical */
    margin-bottom: 40px; /* Espace entre cette section et la suivante */
}

.centered-title {
    text-align: center; /* Centre le titre horizontalement */
    font-family: 'Lexend Giga', sans-serif;
    font-size: 2.5em;
    font-weight: bold;
    color: black;
    margin-bottom: 30px;
}

.centered-text {
    text-align: center; /* Centre le texte horizontalement */
    font-family: 'Source Serif Pro', serif;
    font-size: 1.2em;
    line-height: 1.8;
    color: black;
    margin-bottom: 20px;
}

/* Team/Equipe Section */

#section2 h2 {
  margin-bottom: 10px !important;
}

#section2 .team-member:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.team-member {
    display: flex;
    align-items: center;
    gap: 20px;
}

.team-member h3 {
    text-transform: capitalize; /* Transforme seulement la première lettre en majuscule */
    font-family: 'Lexend Giga', sans-serif; /* Assure la bonne police si nécessaire */
    font-size: 1.8em;
    color: black;
}

.team-member:nth-child(even) {
    flex-direction: row-reverse;
}

.team-member img {
    flex-shrink: 0;
    max-width: 33%; /* La photo occupe 1/3 de l'espace */
    height: auto;
    border-radius: 10px;
    border: 1px solid #ddd; /* Bordure légère pour les photos */
}

.team-member div {
    flex: 2;
    padding: 0 10px;
}

/* Liens sociaux */
.social-links {
    display: flex;
    gap: 10px; /* Espacement entre les icônes */
    margin-top: 20px;
    justify-content: flex-start;
}

.social-links img:not(.social-icon) {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.social-links img {
    flex: none;
    width: 80px; /* Taille fixe des icônes */
    height: 80px;
    object-fit: contain;
    border-radius: 50%; /* Crée des icônes circulaires */
    transition: transform 0.2s ease;
    border: none;
    box-shadow: none;
    background: none;
    padding: 0;
}

.social-links img:hover {
    transform: scale(1.5); /* Agrandit légèrement l'icône au survol */
    cursor: url('plus-orange-small.png'), pointer;
}

/* Rubriques avec accordéon */

.accordion {
    margin-top: 20px;
    z-index: 10; /* Assure qu'il est au-dessus des autres éléments */
}

.accordion-item {
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

.accordion-header {
    font-family: 'Lexend Giga', sans-serif; /* Police pour les catégories */
    font-size: 1.5em;
    color: #FF4500; /* Couleur RAL 2005 */
    cursor: url('plus-orange-small.png'), pointer; /* Curseur personnalisé */
    margin: 0;
    padding: 10px 0;
}

.accordion-header:hover {
    text-decoration: underline; /* Indication visuelle au survol */
}


.accordion-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0 15px;
}


.accordion-content.active {
  padding: 10px 15px;
}


.accordion-content ul {
    padding-left: 20px;
    list-style: disc;
}

/* Section Contact */
/* Section Contact */
#section4 {
    display: block;
    text-align: center;
    width: 100%;    
    padding: 40px 20px; /* au lieu de 60px */
    box-sizing: border-box;
    position: relative;
    color: white;
  }
  
  /* Image au-dessus */
  .contact-image-wrapper {
    max-width: 800px;
    margin: 0 auto 20px auto;
  }
  
  .contact-banner-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    display: block;
  }
  
  /* Titre et texte */
  #section4 h2,
  #section4 p,
  #section4 a {
    position: relative;
    z-index: 2;
    color: black;
  }
  
  #section4 h2 {
    font-size: 2.5em;
    margin-top: 20px;
    margin-bottom: 20px;
    color: black;
  }
  
  /* Conteneur principal */
  .contact-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    text-align: center;
  }
  
  /* Colonnes gauche et droite */
  .contact-left,
  .contact-right {
    flex: 1;
    min-width: auto;
    color: black;
    text-align: center;
    padding: 5px 10px;
}

  
  /* Liens */
  .contact-left a,
  .contact-right a {
    color: black;
    text-decoration: none;
  }
  
  .contact-left a:hover,
  .contact-right a:hover {
    text-decoration: underline;
  }
  
.contact-left p,
.contact-right p {
  line-height: 1.2;
  margin-bottom: 6px;
}

  /* Icônes + lignes */
  .contact-info-line {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 1.1em;
    color: #FF4500;
  }
  
  .contact-icon {
    flex-shrink: 0;
  }

  .footer-legal-link,
  .footer-legal-link:visited,
  .footer-legal-link:active {
    color: #000 !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
  }

  .footer-legal-link:hover,
  .footer-legal-link:focus {
    color: #FF4500 !important;
  }



  
  @media (max-width: 768px) {

  /* 1. HEADER */
  .header {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    height: auto;
  }

  .logo {
    height: 80px;
    margin-bottom: 10px;
  }

  .navbar {
    position: static;
    width: 100%;
    align-items: center;
    display: none;
  }

  .navbar.active {
    display: flex;
    flex-direction: column;
    background: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    padding: 20px;
    gap: 10px;
  }

/* Vidéo mobile à la place de .hero-image */

    .hero-video.desktop { display: none; }
    .hero-video.mobile  { 
      display: block; 
      transform: scale(1.01);
      transform-origin: center top;
    }
    .hero { 
      height: 56vh; 
      min-height: unset; /* ← cela annule la min-height de 700px en desktop */
    }
    .hero-video.mobile  { height: 56vh; object-fit: cover; }

    .hero-video-overlay {
      display: none;
    }

  .body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  .header {
      position: relative;
      z-index: 2;
    }
  
  .header .logo {
      height: 70px; /* encore un peu plus petit */
      width: auto;
      margin-top: 10px;
    }
  
  
/* SECTION CABINET - Mobile */

  #section1 {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .cabinet-split-horizontal {
    flex-direction: column;
    padding: 0 15px;
    gap: 20px;
  }


  .cabinet-split-image {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0;
  }

  .cabinet-split-image img {
    width: 100%;
    max-width: 100%;
    display: block;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    margin: 0 auto;
  }

  #section1 h2 {
    font-size: 1.6em;
    text-align: left;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    line-height: 1.2;
  }
  

  .cabinet-split-text {
    padding-left: 0;
    padding-right: 0;
    text-align: left;
    box-sizing: border-box;
    width: 100%;
  }

  .cabinet-text {
    text-align: justify;
    text-justify: inter-word;
  }


  /* Corrige les marges héritées du parent */
  #section1,
  .page-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* 4. TEAM */
  .team-member {
    flex-direction: column !important;
    text-align: center;
    margin-bottom: 50px;
  }

  .team-member img {
    max-width: 80%;
  }

  .team-member div {
    padding: 0;
  }
  .social-links .social-icon {
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
    display: inline-block;
    object-fit: contain;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .social-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
  }
  
  .social-links a {
    margin: 0 6px;
  }
  
  .team-member:last-child {
    margin-bottom: 0;
  }
  
  /* 5. EXPERTISES */
  .accordion-header {
    font-size: 1.3rem !important;
    font-weight: 600;
    text-transform: none;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #FF4500;
}

.accordion-header::before {
    content: "+";
    font-size: 1.3rem!important;
    color: #FF4500;
    transition: transform 0.3s ease;
    pointer-events: none; /* Pas cliquable */
    text-decoration: none; /* Pas de soulignement */
}

 .accordion-header.active::before {
    content: "−";
}

 .accordion-header:hover {
    text-decoration: none; /* Pas de soulignement au hover */
}

 .accordion-content {
    overflow: hidden;
    max-height: 0; /* ← Important pour transition */
    transition: max-height 0.5s ease, padding 0.5s ease;
    padding: 0 15px;
}

 .accordion-content.active {
    padding: 10px 15px;
}

  /* 6. CONTACT */

  #section4 {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
  }
  
  .contact-container {
    flex-direction: column;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
  }
  
  .contact-left,
  .contact-right {
    min-width: auto;  /* à la place de 400px */
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .contact-right {
    width: 100%;
  }

  .contact-banner-image {
    max-height: 180px;    
  }

  .contact-left p,
  .contact-right p {
    line-height: 1.1;
    margin-bottom: 4px;
}


  /* Marges latérales équilibrées pour toutes les sections sur mobile */
  .section,
  #section1,
  #section2,
  #section3,
  #section4 {
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

}
  
.hidden {
  opacity: 0;
  visibility: hidden;
}