/* LayerBase.css - Styles fondamentaux et éléments de base */

/* Intégration de la police Manrope */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

/* Reset global */
body {
  font-family: var(--font-family);
  background-color: var(--background-main);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Container standard */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Cartes et sections */
.card,
.info-tile,
.faq-item {
  background-color: var(--background-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: 0 4px 20px var(--shadow-color);
  transition: all 0.3s ease;
  padding: 2rem;
}

.card:hover,
.info-tile:hover,
.faq-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px var(--shadow-color);
  border-color: var(--primary-02);
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-family: var(--font-family);
  font-weight: 700;
}

/* Textes */
p {
  color: var(--text-secondary);
  font-family: var(--font-family);
  line-height: 1.6;
}

/* Formulaires */
input, textarea, select {
  background-color: var(--background-main);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-family: var(--font-family);
  transition: all 0.3s ease;
  width: 100%;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--primary-02);
  outline: none;
  box-shadow: 0 0 0 3px rgba(52, 179, 250, 0.2);
}

label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  font-weight: 500;
}

.form-group {
  margin-bottom: 1.5rem;
}

/* Barre de navigation supérieure */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: transparent;
  box-shadow: none;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  transition: background-color 0.3s ease;
}

/* Mode clair: appliquer dès l'état initial le même effet glass clair que scrolled */
/* Appliquer le style glass clair par défaut partout SAUF sur la page index */
html:not([data-theme="dark"]) body:not(.home-page) .top-bar {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12) !important;
}

/* Bouton CTA et hamburger lisibles sur fond clair (état initial) */
html:not([data-theme="dark"]) body:not(.home-page) .top-bar .nav-cta {
  color: #0b1220 !important;
  border-color: rgba(0, 0, 0, 0.35) !important;
  background: rgba(255, 255, 255, 0.45) !important;
  text-shadow: none !important;
}
html:not([data-theme="dark"]) body:not(.home-page) .top-bar .nav-cta:hover {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: rgba(0, 0, 0, 0.45) !important;
}
html:not([data-theme="dark"]) body:not(.home-page) .top-bar .menu-toggle {
  background: rgba(255, 255, 255, 0.45) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
}
html:not([data-theme="dark"]) body:not(.home-page) .top-bar .menu-toggle-icon {
  color: #0b1220 !important;
}

/* Ajouter un fond semi-transparent au scroll */
.top-bar.scrolled {
  /* Effet glass sombre pour faire ressortir le logo et les CTA blancs */
  background: rgba(10, 15, 25, 0.55) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18) !important;
}

/* Variante claire (mode blanc): top-bar scrolled en glass clair */
html:not([data-theme="dark"]) .top-bar.scrolled {
  background: rgba(255, 255, 255, 0.55) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12) !important;
}

/* CTA et menu hamburger en noir sur fond clair */
html:not([data-theme="dark"]) .top-bar.scrolled .nav-cta {
  color: #0b1220 !important;
  border-color: rgba(0, 0, 0, 0.35) !important;
  background: rgba(255, 255, 255, 0.45) !important;
  text-shadow: none !important;
}
html:not([data-theme="dark"]) .top-bar.scrolled .nav-cta:hover {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: rgba(0, 0, 0, 0.45) !important;
}
html:not([data-theme="dark"]) .top-bar.scrolled .menu-toggle {
  background: rgba(255, 255, 255, 0.45) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
}
html:not([data-theme="dark"]) .top-bar.scrolled .menu-toggle-icon {
  color: #0b1220 !important;
}

/* Section gauche de la barre de navigation - corrigée pour alignement */
.top-bar-left {
  display: flex;
  align-items: center;
  gap: 10px; /* Espacement léger entre les éléments */
}

/* Solution pour le problème d'espacement entre le logo et le menu hamburger */
.menu-cell, .logo-cell {
  display: flex;
  align-items: center;
}

/* Améliorations pour le menu hamburger */
.menu-toggle {
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  z-index: 2000;
  backdrop-filter: blur(5px);
}

.menu-toggle:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.menu-toggle-icon {
  width: 24px;
  height: 24px;
  color: white;
  transition: transform 0.3s ease;
}

/* Animation subtile pour l'icône du menu */
.menu-toggle.active .menu-toggle-icon {
  transform: rotate(90deg);
}

/* Logo et configuration - conteneur */
.site-logo {
  height: 300px;
  display: flex;
  align-items: center;
  position: relative;
  transition: none;
}

/* Styles de base communs aux deux logos */
.logo-primary,
.logo-secondary {
  position: absolute;
  width: auto;
  transition: opacity 0.3s ease;
  left: 50%;
  transform: translateX(-37%);
}

/* Taille spécifique pour le logo primaire */
.logo-primary {
  height: 270px;
}

/* Taille spécifique pour le logo secondaire */
.logo-secondary {
  height: 37px; /* Vous pouvez ajuster cette valeur selon vos besoins */
  opacity: 0; /* Par défaut, le logo secondaire est invisible */
  transform: translateX(-0%);
}

/* Variantes light/dark du logo secondaire */
.logo-secondary-light { display: inline-block; }
.logo-secondary-dark { display: none; }
[data-theme="dark"] .logo-secondary-light { display: none; }
[data-theme="dark"] .logo-secondary-dark { display: inline-block; }

/* Overrides forts pour contrer d'autres feuilles avec !important */
html:not([data-theme="dark"]) .top-bar .site-logo .logo-secondary-dark { display: none !important; }
html:not([data-theme="dark"]) .top-bar .site-logo .logo-secondary-light { display: inline-block !important; }
[data-theme="dark"] .top-bar .site-logo .logo-secondary-dark { display: inline-block !important; }
[data-theme="dark"] .top-bar .site-logo .logo-secondary-light { display: none !important; }

/* Au scroll, on inverse les opacités */
.top-bar.scrolled .logo-primary {
  opacity: 0;
}

.top-bar.scrolled .logo-secondary {
  opacity: 1;
}

/* Logo à gauche plus visible */
.site-logo img {
  filter: brightness(1.2);
}

/* Section droite de la barre de navigation - ajout pour garantir l'alignement */
.top-bar-right {
  display: flex;
  align-items: center;
  margin-left: auto; /* Pousse tout le conteneur à droite */
}

/* Style commun pour tous les boutons CTA, y compris dans la navbar */
.nav-cta,
.cta-button {
  background: var(--gradient-primary);
  color: white;
  font-size: 0.9rem;
  margin-right: 3rem;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px var(--shadow-color);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
  
.nav-cta:hover,
.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow-color);
  filter: brightness(1.05);
}

/* Boutons avec dégradé */
.button,
.cta-button,
button[type="submit"] {
  background: var(--gradient-primary);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-family);
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center; /* Gardez center pour l'alignement vertical */
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 15px var(--shadow-color);
  cursor: pointer;
  margin-left: auto; /* Pour aligner le bouton à droite dans son conteneur */
}

/* Si le bouton est dans un conteneur flex, vous pouvez également utiliser: */
.button-container {
  display: flex;
  justify-content: flex-end; /* Aligne les éléments à droite */
}

/* Pour le CTA spécifiquement dans la barre de navigation */
.top-bar-right .nav-cta {
  margin-left: auto; /* Pousse le CTA tout à droite */
}

.button:hover,
.cta-button:hover,
button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow-color);
  filter: brightness(1.05);
}

/* Style plus sobre pour le bouton CTA "Prenons contact" */
.nav-cta {
  /* Style de base plus sobre */
  background: transparent !important;
  color: white !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  padding: 0.5rem 1.25rem !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Effet hover similaire aux nav-buttons */
.nav-cta:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Ajustement lorsque la barre de navigation est scrollée (fond plus foncé) */
.top-bar.scrolled .nav-cta {
  color: white !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.top-bar.scrolled .nav-cta:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: white !important;
}

/* Ajustement pour le mode sombre */
[data-theme="dark"] .nav-cta {
  border-color: rgba(255, 255, 255, 0.4) !important;
}

[data-theme="dark"] .nav-cta:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: white !important;
}

/* Ajustements responsive */
@media (max-width: 767px) {
  .nav-cta {
    padding: 0.4rem 1rem !important; /* Plus compact sur mobile */
    font-size: 0.85rem !important;
  }
}

/* Menu latéral */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 280px;
  background-color: var(--background-card);
  box-shadow: 2px 0 10px var(--shadow-color);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 1000;
  overflow-y: auto;
  padding-top: 1rem;
}

.sidebar.open {
  transform: translateX(0);
}

/* En-tête du menu latéral */
.sidebar-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 1rem;
}

/* Logo dans le menu latéral */
.sidebar-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.emblem {
  height: 60px;
  width: auto;
}

/* Items du menu latéral - simplifié comme demandé */
.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-menu-item {
  padding: 0;
  margin: 0;
}

.sidebar-menu-link {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Hover simplifié et discret */
.sidebar-menu-link:hover,
.sidebar-menu-link.active {
  color: var(--primary-02);
  background-color: rgba(52, 179, 250, 0.05);
}

/* Animation et accentuation au survol */
.sidebar-menu-link:hover {
  transform: translateX(5px);
}

/* Accentuation de la page active */
.sidebar-menu-link.active {
  border-left: 3px solid var(--primary-02);
  padding-left: calc(1.5rem - 3px);
}

.sidebar-menu-icon {
  margin-right: 1rem;
  width: 24px;
  height: 24px;
  opacity: 0.7;
}

.sidebar-menu-link:hover .sidebar-menu-icon,
.sidebar-menu-link.active .sidebar-menu-icon {
  opacity: 1;
}

/* Amélioration du style de la page active - simplifié */
.sidebar-menu-link.active {
  font-weight: 500;
}

/* Switch pour le thème sombre/clair */
.theme-switch-container {
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-light);
  margin-top: 2rem;
}

.theme-switch-label {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.theme-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--space);
  transition: .4s;
  border-radius: 26px;
}

.theme-switch-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .theme-switch-slider {
  background-color: var(--primary-02);
}

input:checked + .theme-switch-slider:before {
  transform: translateX(24px);
}

/* Layout principal adapté pour le menu latéral */
.main-content {
  margin-top: 70px;
  transition: margin-left 0.3s ease;
  padding: 1rem;
}

.main-content.sidebar-open {
  margin-left: 280px;
}

/* Overlay pour fermer le menu sur mobile */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
  backdrop-filter: blur(2px);
}

/* Optimisations du menu latéral pour desktop */
@media (min-width: 1024px) {
  /* Largeur augmentée du sidebar */
  .sidebar {
    width: 320px;
  }

  /* Décalage du contenu principal quand le menu est ouvert */
  .main-content.sidebar-open {
    margin-left: 320px;
  }

  /* En-tête du menu plus spacieux */
  .sidebar-header {
    padding: 2rem;
  }

  /* Logo/emblème plus grand */
  .sidebar-logo .emblem {
    height: 75px;
    width: auto;
  }

  /* Éléments du menu plus grands et plus espacés */
  .sidebar-menu-link {
    padding: 1.2rem 2rem;
    font-size: 1.05rem;
  }

  /* Icônes du menu plus grandes */
  .sidebar-menu-icon {
    width: 28px;
    height: 28px;
    margin-right: 1.2rem;
  }
}

/* Footer */
footer {
  background-color: var(--primary-04);
  color: white;
  padding: 4rem 0 2rem;
  text-align: center;
  margin-top: 4rem;
}

.footer-content {
  margin-bottom: 2rem;
}

.footer-logo {
  margin-bottom: 1.5rem;
}

.footer-logo img {
  max-height: 50px;
}

footer p {
  color: var(--steel);
  margin: 0.5rem 0;
}

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.875rem;
  color: var(--steel);
}

/* Animation pour les transitions */
.animate-fadeIn {
  animation: fadeIn 0.6s ease forwards;
}

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

/* Pour le placeholder temporaire */
.placeholder-content {
  height: 200px;
  border: 2px dashed rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
  color: rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

[data-theme="dark"] .placeholder-content {
  border: 2px dashed rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
}

.hero-logo .emblem {
  width: auto;        /* pour garder les proportions */
  height: 30px;       /* 👈 Ajuste la hauteur comme tu veux (ex : 60px, 80px, 100px...) */
}

@media (max-width: 767px) {
  .top-bar {
    background-color: rgba(8, 29, 39, 0.1) !important;
    backdrop-filter: blur(5px) !important;
    transition: background-color 0.3s ease !important;
  }

  .top-bar.scrolled {
    background-color: rgba(8, 29, 39, 0.9) !important;
    backdrop-filter: blur(10px) !important;
  }
}

/* Styles pour les logos de partenaires */
.partner-logo img,
.mobile-partner-logo img {
    filter: grayscale(100%) brightness(0.5);
    transition: filter 0.3s ease;
}

.partner-logo img:hover,
.mobile-partner-logo img:hover {
    filter: grayscale(0%) brightness(1);
}

/* Mode sombre - Adaptation des logos */
[data-theme="dark"] .partner-logo img,
[data-theme="dark"] .mobile-partner-logo img {
    filter: grayscale(100%) brightness(1.5);
    opacity: 0.7;
}

[data-theme="dark"] .partner-logo img:hover,
[data-theme="dark"] .mobile-partner-logo img:hover {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
}

/* ===== STYLES POUR LE NOUVEAU FOOTER MODERNE (disposition image de référence) ===== */

.modern-footer {
  background: url('../assets2/SVG/NewSVG/ArcyFooter.webp') center/cover no-repeat;
  position: relative;
  color: white;
  padding: 4rem 0 2rem;
  margin-top: 2rem;
}

.modern-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.modern-footer .container {
  position: relative;
  z-index: 2;
}

/* 1. SLOGAN EN HAUT avec sélecteur de langue */
.footer-slogan {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-slogan-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.footer-tagline {
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0;
  color: var(--steel);
  line-height: 1.4;
  text-align: center;
}

.footer-tagline .highlighted {
  color: var(--primary-02);
  font-weight: 600;
}

/* Sélecteur de langue */
.language-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  color: var(--steel);
  user-select: none;
  margin-left: auto;
}

.language-selector:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.language-icon {
  color: var(--steel);
  opacity: 0.8;
}

.language-text {
  font-weight: 500;
}

.language-dropdown-icon {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.language-selector:hover .language-dropdown-icon {
  opacity: 1;
}

/* 2. LIGNE PRINCIPALE AVEC COLONNES CÔTE À CÔTE */
.footer-columns {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3rem;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-column {
  flex: 1;
  max-width: 220px;
  text-align: left;
}

.footer-column h3 {
  color: white;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.footer-column li {
  margin-bottom: 0.6rem;
  text-align: left;
}

.footer-column a {
  color: var(--steel);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
  display: block;
  line-height: 1.4;
  text-align: left;
}

.footer-column a:hover {
  color: var(--primary-02);
}

/* 3. COLONNE NEWSLETTER (plus large) */
.newsletter-column {
  flex: 1.5;
  max-width: 280px;
  text-align: left;
}

.newsletter-column p {
  color: var(--steel);
  font-size: 0.9rem;
  margin-bottom: 1.2rem;
  line-height: 1.5;
  text-align: left;
}

.newsletter-form .input-group {
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.newsletter-form .input-group:focus-within {
  border-color: var(--primary-02);
}

.newsletter-form input[type="email"] {
  flex: 1;
  padding: 0.7rem 0.8rem;
  border: none;
  background: transparent;
  color: white;
  font-size: 0.85rem;
  width: auto;
  /* Protéger contre les conflits CSS des autres formulaires */
  max-width: none !important;
  margin: 0 !important;
}

.newsletter-form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.newsletter-form input[type="email"]:focus {
  outline: none;
}

.newsletter-form button {
  padding: 0.7rem 0.8rem;
  border: none;
  background: var(--primary-02);
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  border-radius: 0 4px 4px 0;
  /* Protection contre les conflits CSS des pages PPE et Quality */
  min-width: 40px !important;
  max-width: 50px !important;
  width: auto !important;
  background: var(--primary-02) !important;
}

.newsletter-form button:hover {
  background: var(--primary-01) !important;
}

.newsletter-form button svg {
  width: 16px;
  height: 16px;
}

/* 4. SECTION RÉSEAUX SOCIAUX (avec logo ARCY à gauche) */
.footer-social {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Logo ARCY à gauche */
.footer-logo-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.footer-arcy-logo {
  height: 60px;
  width: auto;
  opacity: 0.6; /* Réduction de l'opacité pour plus de discrétion */
  transition: opacity 0.3s ease;
}

.footer-arcy-logo:hover {
  opacity: 0.8; /* Légèrement plus visible au survol */
}

/* Réseaux sociaux à droite */
.footer-social-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center; /* Centrage vertical du bloc social media */
  text-align: right;
}

.footer-social-right h3 {
  color: white;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.social-links {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.social-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.social-link svg {
  width: 18px;
  height: 18px;
}

/* Images SVG des réseaux sociaux (remplacement inline) */
.social-link .social-icon {
  display: block;
  width: 18px;
  height: 18px;
  /* Les fichiers source sont noirs: rendre l'icône claire pour contraster */
  filter: invert(1) brightness(1.05) contrast(0.95);
}
[data-theme="dark"] .social-link .social-icon {
  /* Passer les icônes noires en teinte claire sur fond sombre */
  filter: invert(1) brightness(1.2) contrast(0.95);
}

/* Couleurs spécifiques par défaut pour chaque réseau */
.social-link.linkedin {
  background: #0077b5;
}

.social-link.linkedin:hover {
  background: #005885;
  box-shadow: 0 4px 15px rgba(0, 119, 181, 0.4);
}

.social-link.youtube {
  background: #ff0000;
}

.social-link.youtube:hover {
  background: #cc0000;
  box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4);
}

.social-link.twitter {
  background: #000000;
}

.social-link.twitter:hover {
  background: #333333;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* 5. LIGNE DE BAS (copyright et liens légaux) */
.footer-social .social-link {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
}
.footer-social .social-link.linkedin,
.footer-social .social-link.youtube,
.footer-social .social-link.twitter {
  background: transparent !important;
}
.footer-social .social-link:hover {
  transform: none;
  box-shadow: none;
  opacity: 0.9;
}
.footer-social .social-link .social-icon {
  width: 28px !important;
  height: 28px !important;
}

/* ===== EFFET HOVER "SORTIE DE BOÎTE" POUR LES ICÔNES SOCIALES ===== */
/* Masquer les icônes colorées sur mobile/tablette (pas d'animation) */
@media (max-width: 1023px) {
  .footer-social .social-link .social-icon-colored {
    display: none !important;
  }
}

/* Uniquement sur desktop (laptop et plus) */
@media (min-width: 1024px) {
  .footer-social .social-link {
    position: relative !important;
    overflow: visible !important;
  }

  /* Icône par défaut (grise) - toujours visible */
  .footer-social .social-link .social-icon-default {
    display: block;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
    position: relative;
  }

  /* Icône colorée - cachée par défaut, positionnée au-dessus */
  .footer-social .social-link .social-icon-colored {
    position: absolute;
    top: -40px; /* Position au-dessus de l'icône par défaut */
    left: 50%;
    transform: translateX(-50%) translateY(20px) scale(0.8);
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
    filter: none !important; /* Pas de filtre pour garder les couleurs originales */
  }

  /* Classes spécifiques pour préserver les couleurs des icônes */
  .footer-social .social-link.linkedin .social-icon-colored,
  .footer-social .social-link.youtube .social-icon-colored,
  .footer-social .social-link.discord .social-icon-colored {
    filter: none !important; /* Force l'absence de filtre pour les icônes colorées */
  }

  /* Au hover : l'icône colorée sort de la boîte avec inclinaison */
  .footer-social .social-link:hover .social-icon-colored {
    transform: translateX(-50%) translateY(0) scale(1.1) rotate(8deg);
    opacity: 1;
    pointer-events: auto;
  }

  /* Au hover : l'icône par défaut s'estompe légèrement */
  .footer-social .social-link:hover .social-icon-default {
    opacity: 0.6;
    transform: scale(0.95);
  }

  /* Animation de rebond pour l'icône colorée */
  .footer-social .social-link:hover .social-icon-colored {
    animation: popOut 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  @keyframes popOut {
    0% {
      transform: translateX(-50%) translateY(20px) scale(0.8) rotate(0deg);
      opacity: 0;
    }
    60% {
      transform: translateX(-50%) translateY(-5px) scale(1.15) rotate(2deg);
      opacity: 1;
    }
    100% {
      transform: translateX(-50%) translateY(0) scale(1.1) rotate(8deg);
      opacity: 1;
    }
  }

  /* Effet de retour quand on quitte le hover */
  .footer-social .social-link:not(:hover) .social-icon-colored {
    animation: popIn 0.3s ease-out;
  }

  @keyframes popIn {
    0% {
      transform: translateX(-50%) translateY(0) scale(1.1) rotate(8deg);
      opacity: 1;
    }
    100% {
      transform: translateX(-50%) translateY(20px) scale(0.8) rotate(0deg);
      opacity: 0;
    }
  }
}
.footer-bottom {
  padding-top: 0;
  border-top: none;
}

.footer-bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--steel);
  gap: 2rem;
}

.footer-left {
  flex: 1;
}

.footer-left p {
  margin: 0 0 0.5rem 0;
  font-weight: 600;
  text-align: left;
}

.footer-left p a {
  color: var(--primary-02);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-left p a:hover {
  color: var(--primary-01);
}

.designer-credit {
  font-size: 0.75rem !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-weight: 300 !important;
  font-style: italic;
}

.footer-contact-info {
  font-size: 0.8rem;
  line-height: 1.4;
}

.footer-contact-info a {
  color: var(--primary-02);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-contact-info a:hover {
  color: var(--primary-01);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  white-space: nowrap;
}

.footer-links a {
  color: var(--steel);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--primary-02);
}

.footer-links span {
  color: rgba(255, 255, 255, 0.3);
}

/* ===== ACCESSIBILITÉ ===== */
/* Classe pour masquer visuellement mais garder pour SEO et lecteurs d'écran */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ===== RESPONSIVE DESIGN POUR LE FOOTER ===== */

/* Tablettes */
@media (max-width: 1200px) {
  .footer-columns {
    gap: 2rem;
  }
  
  .footer-column {
    max-width: 180px;
  }
  
  .newsletter-column {
    max-width: 240px;
  }
}

/* Petites tablettes */
@media (max-width: 992px) {
  .footer-columns {
    flex-wrap: wrap;
    gap: 2rem;
  }
  
  .footer-column {
    flex: 1 1 calc(50% - 1rem);
    max-width: none;
  }
  
  .newsletter-column {
    flex: 1 1 100%;
    max-width: none;
    text-align: center;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .modern-footer {
    padding: 3rem 0 1.5rem;
  }
  
  .footer-slogan {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
  }
  
  .footer-slogan-content {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
  }
  
  .footer-tagline {
    font-size: 1.2rem;
    flex: none;
  }
  
  .language-selector {
    font-size: 0.85rem;
    padding: 0.5rem 0.8rem;
  }
  
  .footer-columns {
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
  }
  
  .footer-column {
    flex: none;
    max-width: none;
    text-align: left;
  }
  
  .footer-column h3 {
    text-align: left;
  }
  
  .footer-column ul,
  .footer-column li,
  .footer-column a {
    text-align: left;
  }
  
  .newsletter-column {
    flex: none;
    max-width: none;
    text-align: left;
  }
  
  .newsletter-column p {
    text-align: left;
  }
  
  /* Footer social responsive */
  .footer-social {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
  }
  
  .footer-logo-left {
    order: 2; /* Logo en dessous sur mobile */
  }
  
  .footer-arcy-logo {
    height: 50px; /* Légèrement plus petit sur mobile */
    opacity: 0.6; /* Maintenir la même opacité discrète sur mobile */
  }
  
  .footer-arcy-logo:hover {
    opacity: 0.8; /* Même effet hover sur mobile */
  }
  
  .footer-social-right {
    order: 1; /* Social media en haut sur mobile */
    text-align: center;
  }
  
  .footer-social-right h3 {
    text-align: center;
  }
  
  .social-links {
    justify-content: center;
  }
  
  .footer-bottom-content {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .footer-links {
    justify-content: center;
  }
  
  .social-links {
    gap: 0.75rem;
  }
  
  .social-link {
    width: 36px;
    height: 36px;
  }
  
  .social-link svg {
    width: 18px;
    height: 18px;
  }
}

/* Très petits écrans */
@media (max-width: 480px) {
  .footer-columns {
    gap: 1.5rem;
  }
  
  .footer-column h3,
  .footer-social h3 {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }
  
  .footer-links {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .footer-links span {
    display: none;
  }
  
  /* Garder la disposition horizontale du bouton newsletter même sur très petits écrans */
  .newsletter-form .input-group {
    flex-direction: row; /* Maintenir la disposition horizontale */
  }
  
  .newsletter-form button {
    border-radius: 0 4px 4px 0; /* Maintenir le border-radius original */
    padding: 0.7rem 0.8rem; /* Maintenir le padding original */
    min-width: 40px; /* Assurer une largeur minimale */
  }
  
  /* Ajuster légèrement l'input pour les très petits écrans */
  .newsletter-form input[type="email"] {
    padding: 0.7rem 0.6rem; /* Réduire légèrement le padding horizontal */
  }
}