/**
 * Multipage Adjustments CSS
 * Styles spécifiques pour le contexte multipage
 */

/* ========================================
   CONFIGURATION WATERMARKS
   ======================================== */

/* Variables pour activer/désactiver les watermarks par page
   block = afficher le watermark
   none = cacher le watermark */
:root {
  --watermark-display-home: block;
  --watermark-display-about: block;
  --watermark-display-process: block;
  --watermark-display-careers: block;
  --watermark-display-contact: block;
}

/* ========================================
   ANIMATIONS
   ======================================== */

/* Cacher les éléments avec data-animate avant l'animation */
[data-animate] {
  opacity: 0;
}

/* Une fois animé, l'élément sera visible grâce à animate.css */
[data-animate].animate__animated {
  opacity: 1;
}

/* ========================================
   COULEURS PAR PAGE
   ======================================== */

/* Index page - Turquoise */
body.page-home {
  --primary-color: #25b5b3;
  --primary-hover: #1e9391;
  --primary-rgb: 37, 181, 179;
}

/* About page - Orange */
body.page-about {
  --primary-color: #f6a83f;
  --primary-hover: #e89620;
  --primary-rgb: 246, 168, 63;
}

/* Process page - Bleu */
body.page-process {
  --primary-color: #2480c3;
  --primary-hover: #1c6ba0;
  --primary-rgb: 36, 128, 195;
}

/* Careers page - Mauve */
body.page-careers {
  --primary-color: #a74c97;
  --primary-hover: #8a3d7a;
  --primary-rgb: 167, 76, 151;
}

/* Contact page - Turquoise (même couleur que l'accueil) */
body.page-contact {
  --primary-color: #25b5b3;
  --primary-hover: #1e9391;
  --primary-rgb: 37, 181, 179;
}

/* ========================================
   ÉLÉMENTS FIXES EN TURQUOISE (HEADER)
   ======================================== */

/* LinkedIn, Bouton Postuler, Langue restent toujours en turquoise */
.nav-linkedin,
.nav-linkedin-mobile,
.nav-cta,
.nav-cta-mobile,
.language-selector,
.language-selector-mobile,
.language-toggle,
.language-toggle-mobile,
.language-option.active {
  --primary-color: #25b5b3 !important;
  --primary-hover: #1e9391 !important;
  --primary-rgb: 37, 181, 179 !important;
}

/* Boutons CTA header - forcer turquoise */
.nav-cta,
.nav-cta-mobile {
  background: #25b5b3 !important;
  border-color: #25b5b3 !important;
}

.nav-cta:hover,
.nav-cta-mobile:hover {
  background: #1e9391 !important;
  border-color: #1e9391 !important;
}

/* LinkedIn icon - turquoise */
.nav-linkedin,
.nav-linkedin-mobile {
  color: #25b5b3 !important;
}

.nav-linkedin:hover,
.nav-linkedin-mobile:hover {
  color: #1e9391 !important;
  background: rgba(37, 181, 179, 0.1) !important;
}

/* Language dropdown - turquoise */
.language-toggle,
.language-toggle-mobile {
  color: #25b5b3 !important;
  /* border-color removed - using original subtle border from style.css */
}

.language-toggle:hover,
.language-toggle-mobile:hover {
  background: rgba(37, 181, 179, 0.1) !important;
}

.language-option.active {
  background: rgba(37, 181, 179, 0.1) !important;
  color: #25b5b3 !important;
}

.language-option:hover {
  background: rgba(37, 181, 179, 0.1) !important;
}

/* ========================================
   FOOTER - TOUJOURS TURQUOISE
   ======================================== */

footer,
footer a,
footer .social-link,
footer .contact-link {
  --primary-color: #25b5b3 !important;
  --primary-hover: #1e9391 !important;
}

footer a:hover,
footer .social-link:hover,
footer .contact-link:hover {
  color: #1e9391 !important;
}

footer .social-link {
  background: #25b5b3 !important;
}

footer .social-link:hover {
  background: #1e9391 !important;
}

/* ========================================
   PLACEHOLDERS HEADER & FOOTER
   ======================================== */

#header-container,
#footer-container {
  min-height: 1px; /* Éviter le collapse avant le chargement */
}

/* Loading state pour header */
#header-container:empty::before {
  content: '';
  display: block;
  height: var(--header-height);
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Loading state pour footer */
#footer-container:empty::before {
  content: '';
  display: block;
  height: 100px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ========================================
   NAVIGATION ACTIVE - URL BASED
   ======================================== */

/* Style pour le lien actif basé sur la page courante */
.nav-link.active {
  color: var(--primary-color);
  font-weight: 600;
}

/* Soulignement actif - toujours visible */
.nav-link.active::after {
  width: 100% !important;
}

/* Soulignement hover basé sur la couleur de la page cible (pas LinkedIn) */
.nav-link[data-page="index"]:not(.nav-linkedin):hover::after { background: var(--color-hero); }
.nav-link[data-page="about"]:not(.nav-linkedin):hover::after { background: var(--color-mission); }
.nav-link[data-page="process"]:not(.nav-linkedin):hover::after { background: var(--color-process); }
.nav-link[data-page="careers"]:not(.nav-linkedin):hover::after { background: var(--color-jobs); }
.nav-link[data-page="contact"]:not(.nav-linkedin):hover::after { background: var(--color-contact); }

/* Navigation mobile - Item actif sobre */
@media (max-width: 820px) {
  /* Augmenter le padding des nav-link pour plus d'espace */
  .nav-link {
    padding: 1.25rem 1.5rem !important;
  }

  .nav-link.active {
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary-color);
    font-weight: 600;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .nav-link.active::after {
    display: none;
  }

  .nav-link.active::before {
    width: 0 !important;
  }
}

  /* Animation d'apparition des items du menu mobile */
  .nav-menu.active .nav-link {
    animation: menuItemSlideUp 0.6s ease-out forwards;
    opacity: 0;
  }

  .nav-menu.active li:nth-child(1) .nav-link { animation-delay: 0.05s; }
  .nav-menu.active li:nth-child(2) .nav-link { animation-delay: 0.1s; }
  .nav-menu.active li:nth-child(3) .nav-link { animation-delay: 0.15s; }
  .nav-menu.active li:nth-child(4) .nav-link { animation-delay: 0.2s; }
  .nav-menu.active li:nth-child(5) .nav-link { animation-delay: 0.25s; }
  .nav-menu.active li:nth-child(6) .nav-link { animation-delay: 0.3s; }
  .nav-menu.active li:nth-child(7) .nav-link { animation-delay: 0.35s; }

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

/* ========================================
   PAGE TRANSITIONS
   ======================================== */

/* Fade in au chargement de la page */
body {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Fix scroll mobile - désactiver smooth scroll sur mobile */
@media (max-width: 820px) {
  html {
    scroll-behavior: auto !important;
    height: 100%;
    overflow: visible;
  }

  body {
    /* S'assurer que le scroll n'est pas bloqué */
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    position: relative;
    /* Désactiver l'animation sur mobile pour éviter les blocages */
    animation: none;
  }

  /* S'assurer que le contenu principal est scrollable */
  main {
    min-height: calc(100vh + 1px);
    position: relative;
  }

  /* Header auto-hide sur mobile */
  .header {
    transition: transform 0.3s ease-in-out;
  }
}

/* ========================================
   TEMPLATE INJECTION - SMOOTH APPEARANCE
   ======================================== */

/* Animation seulement pour le header, pas le footer */
#header-container > * {
  animation: slideInDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Footer sans animation pour éviter l'effet de bas vers le haut */
#footer-container > * {
  animation: none;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   RESPONSIVE - MULTIPAGE ADJUSTMENTS
   ======================================== */

/* S'assurer que les sections ont un padding-top minimal sur les pages individuelles */
main > section:first-child {
  padding-top: calc(var(--header-height) + 2rem);
}

/* Hero section est une exception (full viewport) */
main > section.hero:first-child {
  padding-top: 0;
}

/* Fix hero sur petits écrans mobiles */
@media (max-width: 820px) {
  main > section.hero:first-child {
    padding-top: var(--header-height) !important;
    min-height: auto;
    padding-bottom: 3rem;
  }

  .hero-content {
    padding: 2rem 1.5rem;
    gap: 2rem;
  }

  .hero-logo-wrapper {
    max-width: 100%;
  }

  .hero-logo-svg {
    max-width: 100%;
    animation: none; /* Désactiver l'animation glow sur mobile */
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.1));
  }

  .hero-subtitle {
    font-size: clamp(1rem, 3.5vw, 1.2rem);
    line-height: 1.7;
  }

  .scroll-indicator {
    bottom: 1rem;
  }

  /* Cacher le sélecteur de langue dans le header */
  .language-selector-mobile {
    display: none !important;
  }

  /* Supprimer TOUTES les décorations sur les liens du menu hamburger */
  .nav-link {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
  }

  .nav-link:hover,
  .nav-link:focus,
  .nav-link:active,
  .nav-link:focus-visible {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
  }

  .nav-link.active {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .nav-link::before {
    display: none !important;
  }

  /* Transformer le sélecteur de langue du menu hamburger en boutons */
  .language-selector-wrapper {
    display: block !important; /* Force l'affichage sur <820px */
    order: -1; /* Mettre en haut du menu, avant les liens */
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-left: none !important;
    padding-left: 0 !important;
    background: transparent !important;
  }

  .language-selector {
    width: 100%;
    background: transparent !important;
  }

  .language-toggle {
    display: none !important;
  }

  .language-dropdown {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.5rem;
    padding: 0 !important;
  }

  .language-option {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0.5rem !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    transition: none !important;
    height: auto;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
  }

  .language-option:hover,
  .language-option:focus,
  .language-option:active,
  .language-option:focus-visible {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
  }

  .language-option.active,
  .language-option.active:hover,
  .language-option.active:focus,
  .language-option.active:active {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
  }

  /* Cacher le texte complet des langues */
  .language-option span:not(.lang-flag) {
    display: none !important;
  }

  /* Afficher le code langue (FR, NL, DE, EN) avec ::after */
  .language-option::after {
    content: attr(data-lang);
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.5);
  }

  .language-option .lang-flag {
    font-size: 1.5rem;
  }

  /* Indicateur actif avec opacity */
  .language-option {
    opacity: 0.5;
  }

  .language-option.active {
    opacity: 1;
  }

  .language-option.active::after {
    color: #25b5b3;
  }

  /* Assurer que le menu hamburger utilise flexbox avec direction column */
  .nav-menu {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  #header-container,
  #footer-container {
    display: none !important;
  }
}

/* ========================================
   WATERMARK - SECTION MISSION (PAGE ABOUT)
   ======================================== */

/* Pour désactiver : commenter tout le bloc ci-dessous */
.mission {
  position: relative;
  overflow: hidden;
}

.mission-watermark {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 700px;
  height: 700px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.12;
  display: var(--watermark-display-about);
}

.mission-watermark svg {
  width: 100%;
  height: 100%;
}

.mission-watermark svg path,
.mission-watermark svg polygon {
  fill: var(--primary-color) !important;
}

/* Container au-dessus du watermark */
.mission .container {
  position: relative;
  z-index: 10;
}

/* Responsive - cacher sur mobile */
@media (max-width: 820px) {
  .mission-watermark {
    display: none;
  }
}

/* ========================================
   WATERMARK - SECTION INTRO (PAGE HOME)
   ======================================== */

/* Pour désactiver : commenter tout le bloc ci-dessous */
.intro-split {
  position: relative;
  overflow: hidden;
}

.intro-watermark {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 700px;
  height: 700px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.12;
  display: var(--watermark-display-home);
}

.intro-watermark svg {
  width: 100%;
  height: 100%;
}

.intro-watermark svg path,
.intro-watermark svg polygon {
  fill: var(--primary-color) !important;
}

/* Container au-dessus du watermark */
.intro-split .container {
  position: relative;
  z-index: 10;
}

/* Responsive - cacher sur mobile */
@media (max-width: 820px) {
  .intro-watermark {
    display: none;
  }
}

/* ========================================
   WATERMARK - SECTION PROCESS (PAGE PROCESS)
   ======================================== */

/* Pour désactiver : commenter tout le bloc ci-dessous */
.process {
  position: relative;
  overflow: hidden;
}

.process-watermark {
  position: absolute;
  top: 9%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 700px;
  height: 700px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.12;
  display: var(--watermark-display-process);
}

.process-watermark svg {
  width: 100%;
  height: 100%;
}

.process-watermark svg path,
.process-watermark svg polygon {
  fill: var(--primary-color) !important;
}

/* Container au-dessus du watermark */
.process .container {
  position: relative;
  z-index: 10;
}

/* Responsive - cacher sur mobile */
@media (max-width: 820px) {
  .process-watermark {
    display: none;
  }
}

/* ========================================
   WATERMARK - SECTION JOBS (PAGE CAREERS)
   ======================================== */

/* Pour désactiver : commenter tout le bloc ci-dessous */
.jobs {
  position: relative;
  overflow: hidden;
}

.jobs-watermark {
  position: fixed;
  top: calc(var(--header-height) + 3%);
  left: 50%;
  transform: translate(-50%, 0);
  width: 700px;
  height: 700px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.12;
  display: var(--watermark-display-careers);
}

.jobs-watermark svg {
  width: 100%;
  height: 100%;
}

.jobs-watermark svg path,
.jobs-watermark svg polygon {
  fill: var(--primary-color) !important;
}

/* Container au-dessus du watermark */
.jobs .container {
  position: relative;
  z-index: 10;
}

/* Responsive - cacher sur mobile */
@media (max-width: 820px) {
  .jobs-watermark {
    display: none;
  }
}

/* ========================================
   WATERMARK - SECTION CONTACT (PAGE CONTACT)
   ======================================== */

/* Pour désactiver : commenter tout le bloc ci-dessous */
.contact {
  position: relative;
  overflow: hidden;
}

.contact-watermark {
  position: absolute;
  top: 7.5%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 700px;
  height: 700px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.12;
  display: var(--watermark-display-contact);
}

.contact-watermark svg {
  width: 100%;
  height: 100%;
}

.contact-watermark svg path,
.contact-watermark svg polygon {
  fill: var(--primary-color) !important;
}

/* Container au-dessus du watermark */
.contact .container {
  position: relative;
  z-index: 10;
}

/* Responsive - cacher sur mobile */
@media (max-width: 820px) {
  .contact-watermark {
    display: none;
  }
}

/* ========================================
   JOBS LOADING SKELETON
   ======================================== */

.jobs-loading {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 0;
  max-width: 750px;
  margin: 0 auto;
}

.job-card-skeleton {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  padding: 1.2rem 2rem;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 3px solid var(--primary-color);
}

.skeleton-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.7rem;
}

.skeleton-title {
  width: 60%;
  height: 20px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

.skeleton-badge {
  width: 70px;
  height: 24px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 20px;
}

.skeleton-line {
  width: 100%;
  height: 12px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  margin-bottom: 0.4rem;
}

.skeleton-line.short {
  width: 75%;
}

.skeleton-spacer {
  height: 0.3rem;
  margin-bottom: 0.3rem;
}

.skeleton-actions {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.8rem;
}

.skeleton-btn {
  flex: 1;
  height: 36px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}