/* Amélioration graphique du formulaire de contact */

/* ==============================================
   SMOOTH SCROLL
   ============================================= */
html {
  scroll-behavior: smooth;
}

/* ==============================================
   MENU NAVIGATION MODERNE
   ============================================= */

.Menu a {
  --p: 0;
  --bw: 2px;
  
  text-decoration: none !important;
  position: relative;
  padding: 10px 22px;
  border-radius: 25px;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  
  transition: background-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.Menu a:hover {
  background: #fff;
  box-shadow: 0 10px 28px rgba(72, 58, 39, 0.12);
  transform: translateY(-1px);
  text-decoration: none !important;
}

/* Le contour progressif - forme rectangulaire arrondie */
.Menu a::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: var(--bw);
  
  /* Anneau avec conic-gradient - part du haut, sens horaire */
  background:
    conic-gradient(
      from 0deg at 50% 50%,
      #a49d93 calc(var(--p) * 1turn),
      transparent 0
    );
  
  /* Masque pour ne garder que le contour (forme rectangulaire arrondie) */
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  
  opacity: 0;
  transition: opacity 120ms ease;
}

.Menu a:hover::before {
  opacity: 1;
}

.Menu li {
  margin: 0 5px !important;
}

/* ==============================================
   SECTION "NOS SERVICES" (dans bloc emploi)
   ============================================= */
/* Forcer l'ordre des éléments dans la zone texte */
.OnePage-service-employeur-text-zone {
  display: flex !important;
  flex-direction: column !important;
}

.nos-services-section {
  width: 100%;
  margin-top: 2rem;
  padding: 0;
  order: 5;
}

.nos-services-title {
  text-align: center;
  color: #483a27;
  font-size: 1.1em;
  font-weight: 600;
  margin-bottom: 1rem;
}

.nos-services-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.8em;
}

.nos-services-card {
  flex: 1 1 0;
  max-width: 160px;
  min-height: 160px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(72, 58, 39, 0.1);
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.3s ease;
  cursor: default;
}

.nos-services-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(72, 58, 39, 0.15);
}

.nos-services-emoji {
  font-size: 1.6em;
  margin-bottom: 8px;
}

.nos-services-card-title {
  color: #483a27;
  font-size: 0.65em;
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.2;
  text-transform: uppercase;
}

.nos-services-card-text {
  color: #6b5a45;
  font-size: 0.6em;
  line-height: 1.4;
  opacity: 0.9;
}

/* Masquer les services quand le bloc est fermé */
.OnePage-service-employeur .nos-services-section {
  opacity: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
  transition: all 0.3s ease;
}

/* Afficher les services quand le bloc est ouvert */
.OnePage-service-employeur-active .nos-services-section {
  opacity: 1;
  height: auto;
  margin-top: 2rem;
  transition: all 0.3s ease;
}

/* Bouton "Nous contacter" repositionné sous les services */
.OnePage-service-employeur-active .OnePage-service-employeur-button-active {
  order: 10;
  margin-top: 1.5rem;
  font-size: 0.75em !important;
  padding: 0.6em 1.5em !important;
}

@media screen and (max-width: 768px) {
  .nos-services-container {
    flex-wrap: wrap;
  }
  
  .nos-services-card {
    flex: 1 1 45%;
    max-width: 45%;
    min-height: auto;
    padding: 12px 8px;
  }
  
  .nos-services-emoji {
    font-size: 1.4em;
  }
  
  .nos-services-card-title {
    font-size: 0.6em;
  }
  
  .nos-services-card-text {
    font-size: 0.55em;
  }
}

/* ==============================================
   BULLES "NOS VALEURS", "EXPÉRIENCE", "NOTRE RÉSEAU"
   ============================================= */
.OnePage-presentation-small-texts {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 2em !important;
  flex-wrap: wrap !important;
}

.OnePage-presentation-small-text {
  flex: 1 1 300px !important;
  max-width: 350px !important;
  min-height: 400px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  text-align: center !important;
  padding: 25px 20px !important;
  box-sizing: border-box !important;
}

.OnePage-presentation-small-text h4 {
  margin-bottom: 30px !important;
}

.OnePage-presentation-small-text p {
  flex: 1 !important;
  display: flex !important;
  align-items: flex-start !important;
  text-align: justify !important;
}

/* ==============================================
   FORMULAIRE DE CONTACT
   ============================================= */

/* Container principal du formulaire */
.OnePage-quick-contact {
  background-color: #483a271a !important;
  background-image: none !important;
  padding: 60px 20px !important;
  position: relative;
  overflow: hidden;
}

.OnePage-quick-contact::before {
  display: none;
}

/* Contenu principal - structure en colonne */
.OnePage-quick-contact-content {
  position: relative;
  z-index: 1;
  flex-direction: column !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 2em !important;
}

/* Zone formulaire centrée */
.OnePage-quick-contact-form-zone {
  flex-direction: column !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2em !important;
  width: 100% !important;
  max-width: 700px !important;
  margin: 0 auto !important;
}

.OnePage-quick-contact-form {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  align-items: center !important;
}

/* Titre de la section - style cohérent avec les autres sections */
.OnePage-quick-contact h2,
.OnePage-quick-contact h3 {
  color: #483a27 !important;
  text-shadow: none !important;
  font-size: 1.8em !important;
  margin-bottom: 15px !important;
  font-weight: 600 !important;
}

.OnePage-quick-contact-text {
  color: #483a27 !important;
  font-size: 1em !important;
  margin-bottom: 30px !important;
  text-align: center !important;
  max-width: 600px !important;
  line-height: 1.6 !important;
}

/* Formulaire centré */
.OnePage-quick-contact-content form {
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 20px !important;
  padding: 40px !important;
  box-shadow: 0 10px 40px rgba(72, 58, 39, 0.15) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
  animation: fadeInUp 0.6s ease-out;
}

/* Image à droite */
.OnePage-quick-contact-image {
  flex: 0 0 45% !important;
  width: 45% !important;
  min-height: 400px !important;
  height: auto !important;
  opacity: 1 !important;
  z-index: 1 !important;
  position: relative !important;
  border-radius: 20px !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
  overflow: hidden;
}

.OnePage-quick-contact-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(72, 58, 39, 0.2) 0%, rgba(72, 58, 39, 0.4) 100%);
  border-radius: 20px;
}

/* Inputs */
.OnePage-quick-contact-content form input {
  background: #f8f9fa !important;
  border: 2px solid #e9ecef !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  font-size: 1em !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.OnePage-quick-contact-content form input:focus {
  border-color: #483a27 !important;
  box-shadow: 0 0 0 4px rgba(72, 58, 39, 0.1) !important;
  outline: none !important;
  background: white !important;
}

.OnePage-quick-contact-content form input::placeholder {
  color: #adb5bd !important;
}

/* Bouton d'envoi */
.OnePage-quick-contact-button {
  background: linear-gradient(135deg, #483a27 0%, #6b5a45 100%) !important;
  color: white !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 16px 40px !important;
  font-size: 1.1em !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(72, 58, 39, 0.4) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}

.OnePage-quick-contact-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.OnePage-quick-contact-button:active::before {
  width: 300px;
  height: 300px;
}

.OnePage-quick-contact-button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(72, 58, 39, 0.5) !important;
}

.OnePage-quick-contact-button:active {
  transform: translateY(-1px) scale(0.98) !important;
}

/* =============================================
   MENTIONS TÉLÉPHONE/EMAIL - EN DESSOUS
   ============================================= */
.OnePage-quick-contact-mentions {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 3em !important;
  width: 100% !important;
  margin-top: 20px !important;
  padding: 25px 30px !important;
  background: rgba(72, 58, 39, 0.05) !important;
  border-radius: 15px !important;
  color: #483a27 !important;
  max-width: 600px !important;
}

.OnePage-quick-contact-mentions-phone,
.OnePage-quick-contact-mentions-email {
  color: #483a27 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 1em !important;
}

.OnePage-quick-contact-mentions-phone {
  padding-right: 3em !important;
  border-right: 1px solid rgba(72, 58, 39, 0.3) !important;
}

.OnePage-quick-contact-mentions-phone a,
.OnePage-quick-contact-mentions-email a {
  color: #483a27 !important;
  text-decoration: none !important;
  transition: opacity 0.3s ease !important;
}

.OnePage-quick-contact-mentions-phone a:hover,
.OnePage-quick-contact-mentions-email a:hover {
  opacity: 0.8 !important;
}

/* ========================================
   MESSAGE DE CONFIRMATION - ANIMATIONS
   ======================================== */

.OnePage-quick-contact-message-sent {
  background: rgba(255, 255, 255, 0.98) !important;
  border-radius: 20px !important;
  padding: 50px 40px !important;
  text-align: center;
  color: #483a27 !important;
  animation: successAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  position: relative;
  overflow: hidden;
}

.OnePage-quick-contact-message-sent::before {
  content: "✓";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 80px;
  color: rgba(72, 58, 39, 0.1);
  animation: checkmarkPulse 2s ease-in-out infinite;
}

.OnePage-quick-contact-message-sent h3,
.OnePage-quick-contact-message-sent p {
  animation: textFadeIn 0.5s ease-out forwards;
  animation-delay: 0.3s;
  opacity: 0;
}

.OnePage-quick-contact-message-sent p {
  animation-delay: 0.5s;
}

/* Icône de succès animée */
.OnePage-quick-contact-message-sent svg,
.OnePage-quick-contact-message-sent img {
  animation: iconBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.2s;
}

/* Animations keyframes */
@keyframes successAppear {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes checkmarkPulse {
  0%, 100% {
    opacity: 0.1;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 0.15;
    transform: translateX(-50%) scale(1.1);
  }
}

@keyframes textFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes iconBounce {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Confetti effect for success */
.OnePage-quick-contact-message-sent::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, #483a27 2px, transparent 2px),
    radial-gradient(circle at 80% 20%, #6b5a45 2px, transparent 2px),
    radial-gradient(circle at 40% 70%, #483a27 2px, transparent 2px),
    radial-gradient(circle at 70% 60%, #6b5a45 2px, transparent 2px),
    radial-gradient(circle at 10% 80%, #483a27 2px, transparent 2px),
    radial-gradient(circle at 90% 90%, #6b5a45 2px, transparent 2px);
  background-size: 100% 100%;
  animation: confettiFall 3s ease-out forwards;
  pointer-events: none;
  opacity: 0;
}

@keyframes confettiFall {
  0% {
    opacity: 0.8;
    transform: translateY(-100%);
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media screen and (max-width: 768px) {
  .OnePage-quick-contact {
    padding: 40px 15px !important;
  }
  
  .OnePage-quick-contact-form-zone {
    flex-direction: column !important;
  }
  
  .OnePage-quick-contact-image {
    width: 100% !important;
    flex: none !important;
    min-height: 200px !important;
    order: -1;
    margin-bottom: 20px;
  }
  
  .OnePage-quick-contact-content form {
    padding: 25px !important;
  }
  
  .OnePage-quick-contact h2,
  .OnePage-quick-contact h3 {
    font-size: 1.6em !important;
  }
  
  /* Mentions en colonne sur mobile */
  .OnePage-quick-contact-mentions {
    flex-direction: column !important;
    gap: 1em !important;
    padding: 20px !important;
  }
  
  .OnePage-quick-contact-mentions-phone {
    border-right: none !important;
    padding-right: 0 !important;
    padding-bottom: 1em !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
  }
  
  .OnePage-quick-contact-message-sent {
    padding: 30px 20px !important;
  }
  
  .OnePage-quick-contact-message-sent::before {
    font-size: 50px;
  }
}

/* =============================================
   ICÔNE DE SUCCÈS ANIMÉE
   ============================================= */
.OnePage-quick-contact-message-sent .success-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.OnePage-quick-contact-message-sent .success-icon svg {
  animation: iconBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.OnePage-quick-contact-message-sent .success-icon circle {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: drawCircle 0.8s ease-out forwards;
}

.OnePage-quick-contact-message-sent .success-icon path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: drawCheck 0.4s ease-out 0.5s forwards;
}

@keyframes drawCircle {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes drawCheck {
  to {
    stroke-dashoffset: 0;
  }
}

/* ==============================================
   IMAGES PERSONNALISÉES
   ============================================= */

/* Image "Qui sommes-nous ?" - Axelle */
.OnePage-our-team-picture {
  background-image: url("/Images/axelle.jpeg") !important;
  background-position: center !important;
  background-size: cover !important;
}

/* Image "Notre agence" - Contact */
.OnePage-presentation-big-text-picture {
  background-image: url("/Images/contact.jpeg") !important;
}

/* Masquer l'image du formulaire de contact */
.OnePage-quick-contact-image {
  display: none !important;
}

/* ==============================================
   SECTION "QUI SUIS-JE ?"
   ============================================= */

/* Container principal - pleine largeur viewport */
.OnePage-our-team {
  position: relative !important;
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  min-height: 60vh !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Zone texte à gauche - 50% de la largeur */
.OnePage-our-team-text {
  display: block !important;
  width: 50% !important;
  max-width: 50% !important;
  padding: 40px 60px 40px 60px !important;
  box-sizing: border-box !important;
}

.OnePage-our-team-zone {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Titre au-dessus du texte */
.OnePage-our-team-title {
  order: -1 !important;
  width: 100% !important;
  text-align: left !important;
  padding: 0 0 20px 0 !important;
  max-width: none !important;
}

.OnePage-our-team-title h2 {
  text-align: left !important;
}

/* Contenu texte */
.OnePage-our-team-content {
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
}

.OnePage-our-team-description {
  width: 100% !important;
  text-align: justify !important;
}

.OnePage-our-team-description p {
  margin-bottom: 1.5em !important;
}

.OnePage-our-team-description p:last-child {
  margin-bottom: 0 !important;
}

/* Photo à droite - position absolue, de 50% à 100% de la largeur */
.OnePage-our-team-picture {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 50vw !important;
  height: 100% !important;
  min-height: 60vh !important;
  border-radius: 0 !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Responsive */
@media screen and (max-width: 768px) {
  .OnePage-our-team {
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .OnePage-our-team-text {
    width: 100% !important;
    max-width: 100% !important;
    padding: 30px 20px 60px 20px !important;
    margin-bottom: 0 !important;
  }
  
  .OnePage-our-team-picture {
    position: relative !important;
    width: 100% !important;
    margin-left: 0 !important;
    height: 50vh !important;
    min-height: 50vh !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    display: block !important;
  }
  
  /* Supprimer tout espace après la section */
  .OnePage-our-team + * {
    margin-top: 0 !important;
  }
}

/* ==============================================
   BLOC CONTACT (TÉLÉPHONE / EMAIL)
   ============================================= */
.OnePage-quick-contact-mentions {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 2rem !important;
  padding: 1.5rem !important;
  width: auto !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

.OnePage-quick-contact-mentions-phone,
.OnePage-quick-contact-mentions-email {
  flex: none !important;
  justify-content: center !important;
  padding: 0.8rem 1.2rem !important;
  font-size: 0.95rem !important;
  border: none !important;
}

.OnePage-quick-contact-mentions-phone {
  border-right: none !important;
}

.OnePage-quick-contact-mentions a {
  color: #483a27 !important;
  text-decoration: none !important;
  transition: all 0.3s ease;
  padding: 8px 16px;
  border-radius: 8px;
}

.OnePage-quick-contact-mentions a:hover {
  background-color: rgba(72, 58, 39, 0.15) !important;
  text-decoration: none !important;
}

/* ==============================================
   FOOTER / COPYRIGHT
   ============================================= */
.site-footer {
  background-color: #483a27;
  color: #fff;
  text-align: center;
  padding: 1.5rem 1rem;
  font-size: 0.85rem;
  font-family: Poppins, sans-serif;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  box-sizing: border-box;
}

.site-footer a {
  color: #fff;
  text-decoration: underline;
}

.site-footer a:hover {
  opacity: 0.8;
}

@media screen and (max-width: 768px) {
  .OnePage-quick-contact-mentions {
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  .OnePage-quick-contact-mentions-phone,
  .OnePage-quick-contact-mentions-email {
    padding: 0.5rem !important;
    text-align: center !important;
    width: 100% !important;
    justify-content: center !important;
  }
  
  .site-footer {
    font-size: 0.75rem !important;
    padding: 1rem 1rem !important;
    white-space: normal !important;
    line-height: 1.5 !important;
    text-align: center !important;
  }
}

/* ==============================================
   RESPONSIVE MOBILE - HUBLOTS EN FOND PLEIN ÉCRAN
   ============================================= */
@media screen and (max-width: 768px) {
  /* Container des hublots devient un fond plein écran */
  .OnePage-header-pictures {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    display: block !important;
    pointer-events: none !important;
  }
  
  /* Le premier hublot devient le fond plein écran transparent */
  .OnePage-header-picture-1 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
    opacity: 0.15 !important;
    /* URL correcte de l'image (le CSS compilé utilise localhost:3000 qui ne fonctionne pas) */
    background-image: url(/static/media/background-image.40e6cee84bbeb343a397.jpg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: scroll !important;
    box-shadow: none !important;
  }
  
  .OnePage-header-picture-1.oval-visible {
    -webkit-clip-path: none !important;
    clip-path: none !important;
    border-radius: 0 !important;
    opacity: 0.15 !important;
  }
  
  /* Cacher les 2 autres hublots sur mobile */
  .OnePage-header-picture-2,
  .OnePage-header-picture-3 {
    display: none !important;
  }
  
  /* S'assurer que le header content reste au-dessus de l'image de fond */
  .OnePage-header {
    position: relative !important;
  }
  
  .OnePage-header-content {
    position: relative !important;
    z-index: 1 !important;
  }
}