/* ================================================
   AB ODYSSÉE - CONSOLIDATED CSS
   Generated: 2026-02-02
   Merged from: base/, components/, pages/, responsive-fix.css
   ================================================ */

/* ============================================
   SECTION 1: BASE STYLES
   ============================================ */

/* ============================================
   COMMON CSS - Styles partagés pour toutes les pages
   ============================================ */

/* ============================================
   SCROLL FLUIDE
   ============================================ */

html {
  scroll-behavior: smooth;
}

/* Smooth scrolling pour tout le site */
body {
  -webkit-overflow-scrolling: touch;
}

/* Transitions fluides pour les éléments animés au scroll */
.reveal,
.animate-on-scroll,
[data-animate] {
  opacity: 1;
  /* FAIL SAFE: Visible by default. JS will set to 0 if loaded. */
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Empêcher la coupure des mots dans les titres */
h1,
h2,
h3,
h4,
h5,
h6 {
  word-break: normal;
  overflow-wrap: normal;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* ============================================
   FORCED TYPOGRAPHY INHERITANCE (GLOBAL)
   ============================================ */
/* Force all form elements to inherit font from body - prevents browser defaults */
input,
textarea,
select,
button,
optgroup {
  font-family: var(--font-sans) !important;
  font-size: inherit;
  line-height: inherit;
}

/* ============================================
   ESPACE ENTRE HEADER ET CONTENU
   ============================================ */

/* Espace entre le header fixed et le contenu pour éviter les chevauchements */
main {
  padding-top: 120px;
  /* Header fixed: 1.5rem (24px) + 76px height + 20px espace */
}

@media (max-width: 1023px) {

  /* Sur mobile, le header desktop n'est pas visible (dock en bas), mais on garde un petit espace */
  main {
    padding-top: 1rem;
  }
}

/* Pour les sections hero qui prennent toute la hauteur - annuler le padding-top du main */
main>section.hero:first-child,
main>section[id="hero"]:first-child,
main>section.section-hero:first-child {
  margin-top: -120px;
  /* Compenser le padding-top du main */
  padding-top: 120px;
  /* Réappliquer l'espace pour le header */
}

@media (max-width: 1023px) {

  main>section.hero:first-child,
  main>section[id="hero"]:first-child,
  main>section.section-hero:first-child {
    margin-top: -1rem;
    padding-top: 1rem;
  }
}

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

  100% {
    background-position: 200% 200%;
  }
}

@keyframes glint {
  0% {
    left: -60%;
  }

  20% {
    left: 140%;
  }

  100% {
    left: 140%;
  }
}

@keyframes drift {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-60px, 100px) scale(1.15);
  }
}

:root {
  /* Palette 'Quiet Luxury' */
  --bg-main: #F5F0E1;
  /* Blanc cassé */
  --bg-secondary: #EBE6D6;
  /* Légère variation pour sections secondaires */
  --bg-card: rgba(245, 240, 225, 0.6);
  /* Transparence sur base creme */
  --bg-dock: rgba(245, 240, 225, 0.95);

  --text-main: #1A2E47;
  /* Noir chaud profond */
  --text-muted: #1A2E47;
  /* Bleu nuit (Texte secondaire) */
  --text-light: #6B7A8F;
  /* Gris bleuté (Éléments secondaires) */

  --accent: #B48A3C;
  /* Or mat - unifié */
  --accent-hover: #D4AF37;
  --accent-glow: rgba(195, 159, 95, 0.1);

  --border-color: rgba(15, 18, 22, 0.08);
  /* Très subtil */
  --border-strong: rgba(195, 159, 95, 0.3);
  /* Or mat léger */

  --glass-bg: rgba(245, 240, 225, 0.8);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-highlight: rgba(255, 255, 255, 0.6);

  --nav-text: #1A2E47;

  /* Fonts */
  --font-serif: 'Instrument Serif', serif;
  --font-sans: 'Manrope', sans-serif;

  /* Spacings */
  --spacing-section-sm: 4rem;
  --spacing-section-md: 6rem;
  --spacing-section-lg: 8rem;
  --spacing-section-xl: 10rem;

  --container-narrow: 42rem;
  --container-medium: 56rem;
  --container-wide: min(80rem, 100%);
  --container-max: 1400px;

  /* Single Fluid Padding - adapts to viewport */
  --padding-page: clamp(1rem, 4vw, 4rem);
}

/* Force Light Mode / Cream Theme as default and only option per 'Palette verrouillée' */
html {
  background-color: var(--bg-main) !important;
  background-image: none !important;
  /* Remove gradients */
  color: var(--text-main);
  min-height: 100%;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: var(--font-sans);
  background-color: var(--bg-main) !important;
  background-image: none !important;
  color: var(--text-main);
  min-height: 100vh;
  /* overflow-x: hidden for mobile menu (translate-x-full) containment */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove Dark Mode Overrides to enforce uniformity */
/* Dark Mode overrides removed */

/* Suppression de body::after pour éviter les fonds clairs */
body::after {
  display: none !important;
}

main {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  /* Serif often looks better with lighter weights in luxury contexts */
  letter-spacing: -0.02em;
  /* Tighten slightly for display */
  color: var(--text-main);
}


.serif-font {
  font-family: 'Instrument Serif', serif;
}

.script-font {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
}

.accent-font {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
}

/* ============================================
   OPTIMISATIONS PERFORMANCE
   ============================================ */

/* Réduire les animations sur appareils qui préfèrent moins de mouvement */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Optimisations pour mobile et appareils peu puissants */
@media (max-width: 768px) {

  /* Désactiver les effets de blur gourmands */
  .backdrop-blur-sm,
  .backdrop-blur-md,
  .backdrop-blur-lg,
  .backdrop-blur-xl {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Simplifier les transitions */
  * {
    transition-duration: 0.15s !important;
  }

  /* Désactiver les ombres complexes */
  .shadow-2xl,
  .shadow-xl {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  }
}

/* Fallback quand Three.js est désactivé */
.no-threejs .hero-section {
  background: linear-gradient(135deg, #0a1628 0%, #1a2a4a 50%, #0a1628 100%);
}

.no-threejs canvas.webgl {
  display: none !important;
}

::selection {
  background-color: #B48A3C;
  color: white;
}

::-moz-selection {
  background-color: #B48A3C;
  color: white;
}

/* Liquid Glass */
.liquid-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
  backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
  border: 1px solid var(--glass-border);
  border-top: 1px solid var(--glass-highlight);
  box-shadow:
    0 8px 32px 0 rgba(0, 0, 0, 0.08),
    0 0 0 0.5px rgba(255, 255, 255, 0.15) inset,
    0 1px 0 rgba(255, 255, 255, 0.3) inset;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

/* Glass Card - Fond semi-transparent avec blur pour les cards (thème clair) */
.glass-card {
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(180, 138, 60, 0.4);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Liquid Glass - texte sombre pour contraste sur fond clair */
.liquid-glass.text-white,
.liquid-glass[class*="text-white"] {
  color: var(--text-main);
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.8),
    0 2px 4px rgba(255, 255, 255, 0.6);
  font-weight: 700;
}

.liquid-glass.text-white:hover,
.liquid-glass[class*="text-white"]:hover {
  color: var(--text-main);
  text-shadow:
    0 1px 3px rgba(255, 255, 255, 0.9),
    0 2px 5px rgba(255, 255, 255, 0.7);
}

.liquid-glass::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
      transparent 30%,
      rgba(255, 255, 255, 0.2) 40%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0.2) 60%,
      transparent 70%);
  background-size: 300% 300%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  -webkit-mask-composite: exclude;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: shimmer-border 2.5s linear infinite;
  will-change: background-position;
  z-index: 1;
}

.liquid-glass:hover::before {
  opacity: 1;
}

/* Liquid Glass with white border override */
.liquid-glass.border-2 {
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-top: 2px solid rgba(255, 255, 255, 0.3) !important;
}

.liquid-glass.border-2:hover {
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Liquid Glass button secondary - Par défaut thème clair */
.button-secondary-glass {
  color: #091A30 !important;
  border: 2px solid rgba(9, 26, 48, 0.5) !important;
  border-top: 2px solid rgba(9, 26, 48, 0.5) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
  backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
  border-radius: 100px;
  transition: all 0.3s ease;
}

.button-secondary-glass:hover {
  border-color: rgba(9, 26, 48, 0.7) !important;
  color: #091A30 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Button secondary glass - texte sombre pour contraste */
.button-secondary-glass.text-white,
.button-secondary-glass[class*="text-white"] {
  color: var(--text-main);
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.9),
    0 2px 4px rgba(255, 255, 255, 0.7);
  font-weight: 700;
}

/* Floating Actions Bubble */
.floating-actions-bubble {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.25rem;
  height: 76px;
  border-radius: 20px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
  backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 8px 32px 0 rgba(0, 0, 0, 0.08),
    0 0 0 0.5px rgba(255, 255, 255, 0.15) inset,
    0 1px 0 rgba(255, 255, 255, 0.3) inset;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1001;
  overflow: visible;
}

.floating-actions-bubble::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
      transparent 30%,
      rgba(255, 255, 255, 0.2) 40%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0.2) 60%,
      transparent 70%);
  background-size: 300% 300%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  -webkit-mask-composite: exclude;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: shimmer-border 2.5s linear infinite;
  will-change: background-position;
  z-index: 1;
  overflow: hidden;
  clip-path: inset(0);
}

.floating-actions-bubble:hover::before {
  opacity: 1;
}

/* Floating actions bubble visible on desktop only */
/* Caché sur mobile et tablette car les boutons sont dans le dock */
@media (max-width: 1023px) {
  .floating-actions-bubble {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

/* FAQ Styles - Details/Summary avec animations */
details {
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  display: block;
}

details summary {
  list-style: none;
  position: relative;
  padding-right: 3rem;
  display: flex;
  align-items: center;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  transition: color 0.3s ease;
  display: block;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--accent);
  transition: transform 0.3s ease, color 0.3s ease, background 0.3s ease;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(180, 138, 60, 0.1);
}

details[open] summary::after {
  content: '−';
  transform: translateY(-50%);
  background: rgba(180, 138, 60, 0.2);
}

details summary:hover {
  color: var(--accent);
}

details summary:hover::after {
  background: rgba(180, 138, 60, 0.2);
  transform: translateY(-50%) scale(1.1);
}

details[open] {
  border-color: var(--accent);
  background: var(--bg-card);
  box-shadow: 0 4px 20px rgba(180, 138, 60, 0.1);
}

details[open] summary {
  margin-bottom: 1rem;
  color: var(--accent);
  font-weight: 700;
}

/* S'assurer que le contenu est visible quand ouvert */
details[open]>div {
  display: block !important;
  visibility: visible !important;
}

details:not([open])>div {
  display: block !important;
  visibility: visible !important;
}

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Navigation Card Container */
/* Navigation Styles Removed (Replaced by Classic Header) */

/* Theme Toggle */
.theme-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--nav-text);
  transition: all 0.3s ease;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover {
  color: var(--accent);
  transform: scale(1.1);
}

/* Theme Toggle Icons - Light mode: show moon, Dark mode: show sun */
.theme-toggle [data-lucide="moon"],
#themeSwitchMobile [data-lucide="moon"] {
  display: block !important;
}

.theme-toggle [data-lucide="sun"],
#themeSwitchMobile [data-lucide="sun"] {
  display: none !important;
}



/* Language Selector */
.language-selector {
  position: relative;
  z-index: 1003;
}

/* Language Toggle */
.language-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--nav-text);
  transition: all 0.3s ease;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.875rem;
}

.language-toggle:hover {
  color: var(--accent);
  background: rgba(180, 138, 60, 0.1);
}

.language-toggle.active #languageChevron {
  transform: rotate(180deg);
}

/* Language Dropdown */
.language-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
  backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 0.5rem;
  min-width: 140px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  z-index: 1002;
  pointer-events: none;
}

.language-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.floating-actions-bubble .language-dropdown {
  right: 0;
  left: auto;
  top: calc(100% + 12px);
  z-index: 1004;
}

/* Language Option */
.language-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border: none;
  background: transparent;
  color: var(--nav-text);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  text-align: left;
}

.language-option:hover {
  background: var(--accent-glow);
  color: var(--accent);
}

.language-option.active {
  background: var(--accent-glow);
  color: var(--accent);
  font-weight: 700;
}

.language-option.active .language-code {
  color: var(--accent);
  opacity: 1;
  font-weight: 700;
}

.language-code {
  font-size: 0.75rem;
  opacity: 0.7;
  font-weight: 600;
}

/* Language Selector Mobile */
.language-selector-mobile {
  position: relative;
}

.language-toggle-mobile {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.language-dropdown-mobile {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
  backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 0.5rem;
  min-width: 80px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  z-index: 1001;
}

.language-dropdown-mobile.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.language-option-mobile {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  font-weight: 600;
}

.language-option-mobile:hover {
  background: var(--accent-glow);
  color: var(--accent);
}

.language-option-mobile.active {
  background: var(--accent);
  color: white;
}

/* Améliorer la visibilité en mode white theme */
:root .language-dropdown {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(9, 26, 48, 0.15);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(9, 26, 48, 0.05) inset;
}



.floating-actions-bubble .theme-toggle {
  padding: 0.375rem;
}

.floating-actions-bubble .language-toggle {
  padding: 0.375rem 0.625rem;
}

.nav-actions-separator {
  width: 1px;
  height: 32px;
  background: var(--glass-border);
  opacity: 0.5;
  flex-shrink: 0;
}

.nav-card-label {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
}

.nav-card-item .text-sm {
  font-size: 1rem !important;
  line-height: 1.5;
}

/* Button Action */
.btn-action {
  position: relative;
  overflow: hidden;
  background: var(--accent);
  color: white;
  padding: 1.1rem 2.75rem;
  border-radius: 100px;
  font-weight: 800;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 10px 30px rgba(180, 138, 60, 0.2);
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn-action::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 20%;
  height: 200%;
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(30deg);
  animation: glint 4s infinite ease-in-out;
}

.btn-action:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(180, 138, 60, 0.4);
}

/* Background Orbs - Masqués en dark mode pour éviter les fonds clairs */
.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(140px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.3;
  animation: drift 35s infinite ease-in-out;
}



.orb-1 {
  width: 70vw;
  height: 70vw;
  background: var(--accent);
  top: -25%;
  right: -15%;
}

.orb-2 {
  width: 60vw;
  height: 60vw;
  background: #1e3a8a;
  bottom: -15%;
  left: -15%;
  animation-delay: -10s;
}

/* Particles Canvas */
#particles-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.5;
}

/* Footer */
footer {
  position: relative;
  z-index: 20;
  background-color: #091A30;
}

/* Form Input */
.form-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  padding: 1.25rem 1.5rem;
  outline: none;
  transition: all 0.3s;
  color: var(--text-main);
  font-weight: 500;
}



.form-input:focus {
  border-color: var(--accent);
  background: transparent;
  transform: scale(1.01);
}

/* Reveal Animation */
.reveal {
  opacity: 0;
  transform: translateY(40px);
}

/* Utility Classes */
.section-hero {
  padding-top: calc(var(--spacing-nav-offset-mobile) + 120px);
  /* Ajouter l'espace pour le header */
  padding-bottom: var(--spacing-section-md);
}

@media (min-width: 1024px) {
  .section-hero {
    padding-top: calc(var(--spacing-nav-offset-desktop) + 120px);
    /* Ajouter l'espace pour le header */
    padding-bottom: var(--spacing-section-lg);
  }
}

@media (max-width: 1023px) {
  .section-hero {
    padding-top: calc(var(--spacing-nav-offset-mobile) + 1rem);
    /* Sur mobile, moins d'espace */
  }
}

/* Classe utilitaire pour les sections hero qui ont leur propre padding */
.hero-section-spacing {
  margin-top: 0;
  padding-top: calc(140px + 3rem);
}

@media (max-width: 1023px) {
  .hero-section-spacing {
    margin-top: 0;
    padding-top: calc(80px + 3rem);
  }
}

.section-hero-large {
  padding-top: calc(var(--spacing-nav-offset-mobile) + 120px);
  /* Ajouter l'espace pour le header */
  padding-bottom: var(--spacing-section-lg);
}

@media (min-width: 1024px) {
  .section-hero-large {
    padding-top: calc(var(--spacing-nav-offset-large) + 120px);
    /* Ajouter l'espace pour le header */
    padding-bottom: var(--spacing-section-xl);
  }
}

@media (max-width: 1023px) {
  .section-hero-large {
    padding-top: calc(var(--spacing-nav-offset-mobile) + 1rem);
    /* Sur mobile, moins d'espace */
  }
}

.section-spacing-sm {
  padding-top: var(--spacing-section-sm);
  padding-bottom: var(--spacing-section-sm);
}

.section-spacing-md {
  padding-top: var(--spacing-section-md);
  padding-bottom: var(--spacing-section-md);
}

.section-spacing-lg {
  padding-top: var(--spacing-section-lg);
  padding-bottom: var(--spacing-section-lg);
}

.section-spacing-xl {
  padding-top: var(--spacing-section-xl);
  padding-bottom: var(--spacing-section-xl);
}

/* Legacy class - use .section-editorial or .container-wide instead */
.page-padding {
  padding-left: var(--padding-page);
  padding-right: var(--padding-page);
}

/* Page wrapper is redefined in layout system section above */

.container-narrow {
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
}

.container-medium {
  max-width: var(--container-medium);
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   DEFINITIVE LAYOUT SYSTEM - FULL-WIDTH DEFAULT
   No global constraints. Sections manage themselves.
   ============================================ */

/* 
 * .content - THE ONLY centering class
 * Use this inside sections when you want centered editorial content
 */
.content {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 5vw, 4rem);
  padding-right: clamp(1rem, 5vw, 4rem);
}

/* Legacy aliases - map to .content */
.container-wide {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 5vw, 4rem);
  padding-right: clamp(1rem, 5vw, 4rem);
}

.section-editorial {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 5vw, 4rem);
  padding-right: clamp(1rem, 5vw, 4rem);
}

/* Full-bleed - explicit opt-in for edge-to-edge */
.section-fullbleed {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Page wrapper - NO padding, NO overflow hiding */
.page-wrapper {
  width: 100%;
  /* No padding - sections manage their own */
  /* No overflow-x: hidden - fix source problems */
}

/* ============================================
   UTILITY CLASSES - Classes réutilisables
   ============================================ */

/* Selection colors */
::selection {
  background-color: var(--accent);
  color: white;
}

/* Text colors */
.text-accent {
  color: var(--accent);
}

.text-main {
  color: var(--text-main);
}

.text-muted {
  color: var(--text-muted);
}

/* En dark mode, text-muted devient blanc pour meilleure lisibilité */


/* En light mode, text-muted reste bleu foncé */
.text-muted {
  color: #091A30 !important;
}

/* Background colors */
.bg-accent {
  background-color: var(--accent) !important;
}

.bg-main {
  background-color: var(--bg-main) !important;
}

.bg-text-main {
  background-color: var(--text-main) !important;
}

.bg-secondary {
  background-color: var(--bg-secondary) !important;
}

/* Background colors with opacity */
.bg-accent-10 {
  background-color: rgba(180, 138, 60, 0.1);
}

.bg-accent-20 {
  background-color: rgba(180, 138, 60, 0.2);
}

.bg-accent-30 {
  background-color: rgba(180, 138, 60, 0.3);
}

.bg-accent-5 {
  background-color: rgba(180, 138, 60, 0.05);
}

.bg-accent-15 {
  background-color: rgba(180, 138, 60, 0.15);
}

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

.bg-main-20 {
  background-color: rgba(9, 26, 48, 0.2);
}

.bg-main-15 {
  background-color: rgba(9, 26, 48, 0.15);
}



/* Gradient backgrounds */
.bg-gradient-accent {
  background: linear-gradient(to bottom right, rgba(180, 138, 60, 0.1), rgba(180, 138, 60, 0.05));
}

.bg-gradient-main {
  background: linear-gradient(to bottom right, rgba(9, 26, 48, 0.2), rgba(9, 26, 48, 0.05));
}



/* Border colors */
.border-accent {
  border-color: var(--accent);
}

.border-main {
  border-color: var(--border-color);
}

/* Button Primary */
.btn-primary {
  background-color: var(--accent);
  color: white;
  padding: 1rem 2rem;
  border-radius: 9999px;
  font-weight: 700;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: #9a7530;
}

/* Service image container */
.service-image-container {
  height: 400px;
  border-radius: 1.5rem;
  overflow: hidden;
  background: linear-gradient(to bottom right, rgba(180, 138, 60, 0.1), rgba(180, 138, 60, 0.05));
  border: 1px solid var(--border-color);
  position: relative;
}

.service-image-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(180, 138, 60, 0.1) 100%);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.service-image-container:hover::before {
  opacity: 1;
}

.service-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 0;
}

/* Premium image quality - 4K UHD OLED quality */
.premium-image {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
  filter:
    brightness(1.05) contrast(1.1) saturate(1.15);
  transition: filter 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.premium-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
    linear-gradient(135deg, rgba(180, 138, 60, 0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

.premium-image:hover::before {
  opacity: 1;
}

.premium-image:hover {
  filter:
    brightness(1.1) contrast(1.15) saturate(1.2) drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
  transform: scale(1.02) translateZ(0);
}

/* Shine effect for premium images */
.premium-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent);
  transition: left 0.8s ease;
  pointer-events: none;
  z-index: 2;
}

.premium-image:hover::after {
  left: 100%;
}

/* Enhanced image container with glow */
.service-image-container,
.logo-sketch,
.logo-final {
  position: relative;
}

.service-image-container::after,
.logo-sketch::after,
.logo-final::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(180, 138, 60, 0.3), rgba(180, 138, 60, 0.1));
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: -1;
  filter: blur(20px);
}

.service-image-container:hover::after,
.logo-sketch:hover::after,
.logo-final:hover::after {
  opacity: 1;
}

/* Step visual icon container */
.step-icon-container {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 0.75rem;
  background-color: rgba(180, 138, 60, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-icon-container i {
  width: 2rem;
  height: 2rem;
  color: var(--accent);
}

/* Step visual text */
.step-visual-text {
  color: var(--text-main);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.25;
}

/* Color swatch */
.color-swatch {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
}

.color-swatch-lg {
  width: 2rem;
  height: 2rem;
}

/* Bento item dot */
.bento-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.25rem;
  background-color: rgba(180, 138, 60, 0.2);
}

.bento-dot-md {
  width: 1rem;
  height: 1rem;
}

/* Bento bar */
.bento-bar {
  height: 0.375rem;
  border-radius: 9999px;
  background-color: rgba(180, 138, 60, 0.3);
}

.bento-bar-md {
  height: 0.5rem;
}

.bento-bar-20 {
  background-color: rgba(180, 138, 60, 0.2);
}

/* Bento grid item */
.bento-grid-item {
  aspect-ratio: 1;
  border-radius: 0.5rem;
  background: linear-gradient(to bottom right, rgba(180, 138, 60, 0.2), rgba(180, 138, 60, 0.05));
  border: 1px solid var(--border-color);
}

.bento-grid-item-alt {
  background: linear-gradient(to bottom right, rgba(9, 26, 48, 0.2), rgba(9, 26, 48, 0.05));
}



.bento-grid-item-15 {
  background: linear-gradient(to bottom right, rgba(180, 138, 60, 0.15), rgba(180, 138, 60, 0.05));
}

.bento-grid-item-main-15 {
  background: linear-gradient(to bottom right, rgba(9, 26, 48, 0.15), rgba(9, 26, 48, 0.05));
}



/* Cookie Banner */
/* Cookie Banner - Quiet Luxury */
.cookie-banner {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  left: auto;
  width: auto;
  min-width: 320px;
  max-width: 400px;
  background: var(--bg-main);
  border: 1px solid rgba(15, 18, 22, 0.05);
  border-radius: 12px;
  padding: 1.5rem;
  z-index: 10000;
  box-shadow: 0 20px 40px rgba(15, 18, 22, 0.05);
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: translateY(0);
  opacity: 1;
}

.cookie-banner.hidden {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

.cookie-banner-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cookie-banner-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text-main);
  margin: 0;
  letter-spacing: -0.02em;
}

.cookie-banner-text {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.cookie-banner-buttons {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.cookie-btn {
  padding: 0.75rem 1.25rem;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.cookie-btn-accept {
  background: var(--text-main);
  color: var(--bg-main);
  border-color: var(--text-main);
}

.cookie-btn-accept:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  transform: translateY(-2px);
}

.cookie-btn-refuse {
  background: transparent;
  color: var(--text-muted);
  border-color: rgba(15, 18, 22, 0.1);
}

.cookie-btn-refuse:hover {
  background: transparent;
  color: var(--text-main);
  border-color: var(--text-main);
}

.cookie-banner-link {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: 0.75rem;
  margin-top: 0.25rem;
  transition: color 0.3s;
}

.cookie-banner-link:hover {
  color: var(--accent);
}

@media (max-width: 768px) {
  .cookie-banner {
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    width: auto;
    max-width: none;
  }

  .cookie-banner-buttons {
    flex-direction: column;
  }

  .cookie-btn {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .cookie-banner {
    bottom: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 12px;
  }
}

/* ============================================
   RESPONSIVE GLOBAL - Amélioration mobile/tablette
   ============================================ */

/* Mobile - Amélioration générale */
@media (max-width: 768px) {

  /* Espacements réduits mais aérés */
  section {
    padding-top: clamp(3rem, 8vw, 5rem) !important;
    padding-bottom: clamp(3rem, 8vw, 5rem) !important;
  }

  /* Conteneurs avec padding adaptatif */
  .container-wide,
  .container-medium,
  .container-narrow {
    padding-left: clamp(1rem, 4vw, 1.5rem) !important;
    padding-right: clamp(1rem, 4vw, 1.5rem) !important;
  }

  /* Titres avec tailles adaptatives */
  h1 {
    font-size: clamp(2rem, 8vw, 3.5rem) !important;
    line-height: 1.1 !important;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem) !important;
  }

  h2 {
    font-size: clamp(1.75rem, 7vw, 3rem) !important;
    line-height: 1.2 !important;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem) !important;
  }

  h3 {
    font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
    line-height: 1.3 !important;
    margin-bottom: clamp(1rem, 3vw, 1.5rem) !important;
  }

  /* Paragraphes avec espacement */
  p {
    font-size: clamp(0.95rem, 3vw, 1.125rem) !important;
    line-height: 1.6 !important;
    margin-bottom: clamp(1rem, 3vw, 1.5rem) !important;
  }

  /* Grilles responsive */
  .grid {
    gap: clamp(1.5rem, 4vw, 2.5rem) !important;
  }

  /* Flex avec espacement adaptatif */
  .flex {
    gap: clamp(1rem, 3vw, 1.5rem) !important;
  }

  /* Espacements verticaux */
  .space-y-12>*+* {
    margin-top: clamp(2rem, 5vw, 3rem) !important;
  }

  .space-y-10>*+* {
    margin-top: clamp(1.5rem, 4vw, 2.5rem) !important;
  }

  .space-y-6>*+* {
    margin-top: clamp(1rem, 3vw, 1.5rem) !important;
  }

  /* Boutons avec padding adaptatif */
  .btn-primary,
  button[class*="px-"],
  a[class*="px-"] {
    padding-left: clamp(1.5rem, 4vw, 2rem) !important;
    padding-right: clamp(1.5rem, 4vw, 2rem) !important;
    padding-top: clamp(0.875rem, 2.5vw, 1rem) !important;
    padding-bottom: clamp(0.875rem, 2.5vw, 1rem) !important;
    font-size: clamp(0.95rem, 3vw, 1.125rem) !important;
  }

  /* Cards et conteneurs */
  .liquid-glass,
  [class*="rounded"] {
    padding: clamp(1rem, 3vw, 1.5rem) !important;
  }

  /* Sections avec padding vertical */
  section[class*="py-"],
  .py-24,
  .py-20,
  .py-32 {
    padding-top: clamp(3rem, 8vw, 5rem) !important;
    padding-bottom: clamp(3rem, 8vw, 5rem) !important;
  }

  /* Grilles avec gap */
  [class*="gap-12"],
  [class*="gap-8"],
  [class*="gap-6"] {
    gap: clamp(1.5rem, 4vw, 2.5rem) !important;
  }

  /* Espacements verticaux dans les sections */
  .space-y-8>*+* {
    margin-top: clamp(1.5rem, 4vw, 2.5rem) !important;
  }

  .space-y-4>*+* {
    margin-top: clamp(1rem, 3vw, 1.5rem) !important;
  }

  /* Padding horizontal */
  .px-6,
  .px-8 {
    padding-left: clamp(1rem, 4vw, 1.5rem) !important;
    padding-right: clamp(1rem, 4vw, 1.5rem) !important;
  }

  /* Container avec max-width */
  .container,
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl {
    padding-left: clamp(1rem, 4vw, 1.5rem) !important;
    padding-right: clamp(1rem, 4vw, 1.5rem) !important;
  }
}

/* Tablette - Ajustements moyens */
@media (min-width: 769px) and (max-width: 1023px) {
  section {
    padding-top: clamp(4rem, 6vw, 6rem) !important;
    padding-bottom: clamp(4rem, 6vw, 6rem) !important;
  }

  .container-wide,
  .container-medium,
  .container-narrow {
    padding-left: clamp(1.5rem, 3vw, 2rem) !important;
    padding-right: clamp(1.5rem, 3vw, 2rem) !important;
  }

  h1 {
    font-size: clamp(3rem, 6vw, 4.5rem) !important;
    margin-bottom: clamp(2rem, 4vw, 3rem) !important;
  }

  h2 {
    font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
    margin-bottom: clamp(2rem, 4vw, 2.5rem) !important;
  }

  .grid {
    gap: clamp(2rem, 4vw, 3rem) !important;
  }
}

/* Mobile très petit */
@media (max-width: 480px) {
  section {
    padding-top: clamp(2.5rem, 6vw, 4rem) !important;
    padding-bottom: clamp(2.5rem, 6vw, 4rem) !important;
  }

  h1 {
    font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
    margin-bottom: clamp(1.25rem, 3vw, 2rem) !important;
  }

  h2 {
    font-size: clamp(1.5rem, 6vw, 2.25rem) !important;
    margin-bottom: clamp(1.25rem, 3vw, 2rem) !important;
  }

  h3 {
    font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
    margin-bottom: clamp(0.875rem, 2.5vw, 1.25rem) !important;
  }

  p {
    font-size: clamp(0.875rem, 2.5vw, 1rem) !important;
    margin-bottom: clamp(0.875rem, 2.5vw, 1.25rem) !important;
  }

  .grid {
    gap: clamp(1.25rem, 3vw, 2rem) !important;
  }

  .flex {
    gap: clamp(0.75rem, 2vw, 1.25rem) !important;
  }
}

/* ============================================
   COMPOSANTS RÉUTILISABLES
   ============================================ */

/* Carte de base - style glass morphism */
.card-base {
  padding: 2rem;
  border-radius: 32px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: all 0.3s ease;
}

.card-base:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}



/* Carte avec effet premium */
.card-premium {
  padding: 2.5rem;
  border-radius: 32px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-premium:hover {
  border-color: var(--accent);
  box-shadow: 0 16px 48px rgba(180, 138, 60, 0.15);
  transform: translateY(-6px);
}

/* Icône dans un cercle doré */
.icon-box-gold {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  background: rgba(180, 138, 60, 0.2);
  color: var(--accent);
  border-radius: 1rem;
  flex-shrink: 0;
}

.icon-box-gold i,
.icon-box-gold svg {
  width: 2rem;
  height: 2rem;
}

.icon-box-gold-sm {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
}

.icon-box-gold-sm i,
.icon-box-gold-sm svg {
  width: 1.25rem;
  height: 1.25rem;
}

.icon-box-gold-lg {
  width: 6rem;
  height: 6rem;
  border-radius: 1.5rem;
}

.icon-box-gold-lg i,
.icon-box-gold-lg svg {
  width: 2.5rem;
  height: 2.5rem;
}

/* Section header (badge + titre + description) */
.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: var(--accent-glow);
  border: 1px solid var(--accent);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.section-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 1rem;
  line-height: 1.1;
}

.section-description {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--text-muted);
  max-width: 42rem;
  margin: 0 auto;
  line-height: 1.6;
}

/* Bouton primaire unifié */
.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.1rem 2.75rem;
  background: var(--accent);
  color: white;
  font-weight: 800;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 12px 30px rgba(180, 138, 60, 0.25);
  text-decoration: none;
}

.btn-gold:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(180, 138, 60, 0.4);
}

/* Container-narrow defined in lines 1148-1152 */

/* Grille standard pour les cartes */
.grid-cards {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Texte avec gradient doré */
.text-gradient-gold {
  background: linear-gradient(135deg, var(--accent) 0%, #D4AF37 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Séparateur doré */
.divider-gold {
  width: 4rem;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}

.divider-gold-center {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   INDEX DESIGN SYSTEM - GLOBALIZED
   ============================================ */
/* Note: Variables already defined in :root above - this section provides additional index-specific styles */

/* Accent Gold Italic (Signature Style) */
.accent-gold-italic {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--accent);
  /* Uses #B48A3C */
  font-size: 0.95em;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.accent-gold-italic::before,
.accent-gold-italic::after {
  content: ' ';
  letter-spacing: 0.05em;
}

/* Remove extra spacing when at start/end */
h1>.accent-gold-italic:first-child::before,
h2>.accent-gold-italic:first-child::before,
h1>.accent-gold-italic:last-child::after,
h2>.accent-gold-italic:last-child::after {
  content: '';
}

@media (max-width: 768px) {
  .accent-gold-italic {
    font-size: 0.9em;
    display: inline;
  }
}

/* Hero Button Primary (Clean Text Link Style) */
.hero-btn-primary {
  background: transparent;
  color: var(--text-main);
  border: none;
  border-bottom: 1px solid var(--accent);
  padding: 0.5rem 0;
  min-height: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 400;
  transition: all 0.3s ease;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: none;
  text-decoration: none;
}

@media (min-width: 768px) {
  .hero-btn-primary {
    font-size: 1rem;
    padding: 0.75rem 0;
    letter-spacing: 0.05em;
  }
}

.hero-btn-primary::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: var(--accent);
  transition: width 0.3s ease;
}

.hero-btn-primary:hover::after,
.hero-btn-primary:focus::after {
  width: 100%;
}

.hero-btn-primary:hover,
.hero-btn-primary:focus {
  color: var(--accent);
  border-bottom-color: transparent;
  outline: none;
}

/* ============================================
   RÈGLES GLOBALES TYPOGRAPHIE & ESPACEMENT
   Uniformise les espacements et alignements sur toutes les pages
   ============================================ */

/* ============================================
   FLUID TYPOGRAPHY SYSTEM (clamp)
   Single source of truth for all headings
   ============================================ */

/* ============================================
   FLUID TYPOGRAPHY SYSTEM (clamp)
   Single source of truth for all headings
   ============================================ */

/* Global Premium Settings */
html,
body {
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "kern", "liga", "calt";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  /* FLUID SCALES (Mobile -> Desktop) - Reduced ~20% for compact interface */
  --fs-h1-fluid: clamp(2rem, 4vw + 0.75rem, 3.5rem);
  /* 32px -> 56px */
  --fs-h2-fluid: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
  /* 24px -> 40px */
  --fs-h3-fluid: clamp(1.25rem, 2vw + 0.25rem, 1.75rem);
  /* 20px -> 28px */
  --fs-h4-fluid: clamp(1rem, 1.5vw + 0.25rem, 1.25rem);
  /* 16px -> 20px */
  --fs-h5-fluid: clamp(0.9375rem, 1vw + 0.25rem, 1.125rem);
  /* 15px -> 18px */
  --fs-h6-fluid: clamp(0.875rem, 0.75vw + 0.25rem, 1rem);
  /* 14px -> 16px */
}

/* H1 - Hero Titles (Impactful, never small) */
h1,
.text-h1 {
  font-size: var(--fs-h1-fluid) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* H2 - Section Titles */
h2,
.text-h2 {
  font-size: var(--fs-h2-fluid) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* H3 - Subsection Titles */
h3,
.text-h3 {
  font-size: var(--fs-h3-fluid) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* H4 - Card Titles */
h4,
.text-h4 {
  font-size: var(--fs-h4-fluid) !important;
  line-height: 1.35 !important;
  text-wrap: balance;
}

/* H5/H6 - Small Titles */
h5,
.text-h5 {
  font-size: var(--fs-h5-fluid) !important;
  line-height: 1.4 !important;
}

h6,
.text-h6 {
  font-size: var(--fs-h6-fluid) !important;
  line-height: 1.5 !important;
}

/* Body Text - Optimal Reading Experience */
p,
.lead,
li {
  text-wrap: pretty;
}

/* Mobile Enhancements - Slightly increased line-height */
@media (max-width: 640px) {

  h1,
  .text-h1 {
    line-height: 1.15 !important;
  }

  h2,
  .text-h2 {
    line-height: 1.25 !important;
  }

  h3,
  .text-h3 {
    line-height: 1.35 !important;
  }
}

/* ============================================
   DECORATIVE LINES (Relative to text)
   Width in em/ch units, tied to title container
   ============================================ */

/* Gold decorative line - base style */
.decorative-line,
.accent-line,
[class*="w-"][class*="h-px"][class*="bg-"] {
  width: 3em !important;
  /* Relative to parent font-size */
  height: 2px;
  background-color: #C39F5F;
  border-radius: 1px;
}

/* When line is inside a heading container */
h1+.decorative-line,
h2+.decorative-line,
h3+.decorative-line,
.text-h1+.decorative-line,
.text-h2+.decorative-line {
  margin-top: 0.75em;
  width: 2.5em;
}

/* Responsive decorative lines - don't collapse */
@media (max-width: 640px) {

  .decorative-line,
  .accent-line {
    width: 2.5em !important;
    min-width: 2rem;
  }
}

/* ============================================
   ESPACEMENTS VERTICAUX UNIFORMES
   ============================================ */

/* Espacement entre sections - Reduced for compact layout */
section {
  padding-top: clamp(3rem, 6vw, 5rem) !important;
  padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}

/* Espacement entre éléments dans les listes */
.space-y-2>*+* {
  margin-top: 0.5rem !important;
}

.space-y-3>*+* {
  margin-top: 0.75rem !important;
}

.space-y-4>*+* {
  margin-top: clamp(1rem, 2vw, 1.25rem) !important;
}

.space-y-6>*+* {
  margin-top: clamp(1.5rem, 3vw, 2rem) !important;
}

.space-y-8>*+* {
  margin-top: clamp(2rem, 4vw, 3rem) !important;
}

.space-y-10>*+* {
  margin-top: clamp(3rem, 6vw, 4rem) !important;
}

.space-y-12>*+* {
  margin-top: clamp(4rem, 8vw, 6rem) !important;
}

/* ============================================
   MARGES VERTICALES UNIFORMES
   ============================================ */

/* Marges bottom cohérentes */
.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: clamp(0.375rem, 1vw, 0.5rem) !important;
}

.mb-3 {
  margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem) !important;
}

.mb-4 {
  margin-bottom: clamp(0.75rem, 2vw, 1rem) !important;
}

.mb-6 {
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem) !important;
}

.mb-8 {
  margin-bottom: clamp(1.25rem, 3vw, 2rem) !important;
}

.mb-10 {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem) !important;
}

.mb-12 {
  margin-bottom: clamp(2rem, 5vw, 3rem) !important;
}

/* Marges top cohérentes */
.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: clamp(0.375rem, 1vw, 0.5rem) !important;
}

.mt-3 {
  margin-top: clamp(0.5rem, 1.5vw, 0.75rem) !important;
}

.mt-4 {
  margin-top: clamp(0.75rem, 2vw, 1rem) !important;
}

/* ============================================
   ALIGNEMENT DE TEXTE
   ============================================ */

/* Alignement vertical des textes dans les cartes */
.flex.items-center {
  align-items: center !important;
}

.flex.items-start {
  align-items: flex-start !important;
}

.flex.items-end {
  align-items: flex-end !important;
}

/* Alignement horizontal */
.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

/* ============================================
   LEADING (LINE HEIGHT) UNIFORME
   ============================================ */

.leading-tight {
  line-height: 1.2 !important;
}

.leading-normal {
  line-height: 1.65 !important;
}

.leading-relaxed {
  line-height: 1.75 !important;
}

.leading-loose {
  line-height: 2 !important;
}

/* ============================================
   TRACKING (LETTER SPACING) UNIFORME
   ============================================ */

.tracking-tight {
  letter-spacing: -0.025em !important;
}

.tracking-normal {
  letter-spacing: 0 !important;
}

.tracking-wide {
  letter-spacing: clamp(0.05em, 0.1vw, 0.1em) !important;
}

.tracking-wider {
  letter-spacing: clamp(0.1em, 0.15vw, 0.15em) !important;
}

/* ============================================
   PADDING HORIZONTAL UNIFORME
   ============================================ */

.px-4 {
  padding-left: clamp(0.75rem, 2vw, 1rem) !important;
  padding-right: clamp(0.75rem, 2vw, 1rem) !important;
}

.px-5 {
  padding-left: clamp(1rem, 2.5vw, 1.25rem) !important;
  padding-right: clamp(1rem, 2.5vw, 1.25rem) !important;
}

.px-6 {
  padding-left: clamp(1rem, 3vw, 1.5rem) !important;
  padding-right: clamp(1rem, 3vw, 1.5rem) !important;
}

.px-8 {
  padding-left: clamp(1.25rem, 4vw, 2rem) !important;
  padding-right: clamp(1.25rem, 4vw, 2rem) !important;
}

/* ============================================
   GAPS UNIFORMES
   ============================================ */

.gap-2 {
  gap: 0.5rem !important;
}

.gap-3 {
  gap: clamp(0.5rem, 1.5vw, 0.75rem) !important;
}

.gap-4 {
  gap: clamp(0.75rem, 2vw, 1rem) !important;
}

.gap-6 {
  gap: clamp(1rem, 2.5vw, 1.5rem) !important;
}

.gap-8 {
  gap: clamp(1.25rem, 3vw, 2rem) !important;
}

.gap-10 {
  gap: clamp(1.5rem, 4vw, 2.5rem) !important;
}

.gap-12 {
  gap: clamp(2rem, 5vw, 3rem) !important;
}

.gap-24 {
  gap: clamp(2rem, 8vw, 6rem) !important;
}

/* ============================================
   CORRECTIONS RESPONSIVE
   ============================================ */

@media (max-width: 640px) {

  /* Réduire les gaps sur mobile */
  .gap-8 {
    gap: 1rem !important;
  }

  .gap-10 {
    gap: 1.25rem !important;
  }

  .gap-12 {
    gap: 1.5rem !important;
  }

  .gap-24 {
    gap: 2rem !important;
  }

  /* Espacements verticaux réduits */
  .space-y-10>*+* {
    margin-top: 1.5rem !important;
  }

  .space-y-12>*+* {
    margin-top: 2rem !important;
  }
}

/* ============================================
   ALIGNEMENT VERTICAL DES CONTENUS
   ============================================ */

/* Garantir l'alignement vertical dans les flex */
.flex {
  align-items: stretch;
}

.flex.items-center {
  align-items: center !important;
}

/* Alignement vertical dans les grilles */
.grid {
  align-items: start;
}

.grid.items-center {
  align-items: center !important;
}

/* ============================================
   CORRECTION DES TEXTES DÉCALÉS
   ============================================ */

/* Éviter les décalages de texte */
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
a {
  line-height: inherit;
  vertical-align: baseline;
}

/* Correction pour les textes dans les flex */
.flex p,
.flex h1,
.flex h2,
.flex h3,
.flex span {
  margin: 0;
  padding: 0;
}

/* Alignement des labels et inputs */
label {
  display: block;
  margin-bottom: 0.5rem;
}

/* Correction des listes */
ul,
ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

/* ============================================
   ESPACEMENTS DANS LES CARTES
   ============================================ */

/* Padding uniforme dans les cartes - ne pas forcer, respecter les classes Tailwind */
.p-4 {
  padding: clamp(1rem, 2.5vw, 1.25rem) !important;
}

.p-5 {
  padding: clamp(1.25rem, 3vw, 1.5rem) !important;
}

.p-6 {
  padding: clamp(1.5rem, 3.5vw, 2rem) !important;
}

.p-8 {
  padding: clamp(2rem, 4vw, 2.5rem) !important;
}

/* Espacement entre icône et texte dans les cartes */
.flex.items-center>[data-lucide]+*,
.flex.items-center>[class*="w-"]+* {
  margin-left: 0 !important;
}

/* Alignement vertical parfait dans les cartes */
[class*="rounded"][class*="border"] {
  display: flex;
  flex-direction: column;
}

[class*="rounded"][class*="border"]>* {
  flex-shrink: 0;
}

/* Espacement cohérent entre icône, titre et description */
[class*="rounded"][class*="border"]>div:first-child {
  margin-bottom: clamp(0.75rem, 2vw, 1rem) !important;
}

[class*="rounded"][class*="border"]>h3 {
  margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem) !important;
  margin-top: 0 !important;
}

[class*="rounded"][class*="border"]>p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ============================================
   CORRECTIONS MOBILE
   ============================================ */

@media (max-width: 480px) {

  /* Réduire encore plus les espacements sur très petits écrans */
  section {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .mb-8 {
    margin-bottom: 1.25rem !important;
  }

  .mb-10 {
    margin-bottom: 1.5rem !important;
  }

  .mb-12 {
    margin-bottom: 2rem !important;
  }
}

/* ============================================
/* ============================================
   MISSING TAILWIND UTILITY CLASSES
   Mapped to Fluid System for consistency
   ============================================ */

.text-xl {
  font-size: var(--fs-h5-fluid) !important;
  line-height: 1.4 !important;
}

.text-2xl {
  font-size: var(--fs-h4-fluid) !important;
  line-height: 1.35 !important;
}

.text-3xl {
  font-size: var(--fs-h3-fluid) !important;
  line-height: 1.25 !important;
}

.text-4xl {
  /* Bridge between H3 and H2 */
  font-size: calc(var(--fs-h3-fluid) * 1.2) !important;
  line-height: 1.2 !important;
}

.text-5xl {
  font-size: var(--fs-h2-fluid) !important;
  line-height: 1.15 !important;
}

.text-6xl {
  /* Bridge between H2 and H1 */
  font-size: calc(var(--fs-h2-fluid) * 1.3) !important;
  line-height: 1.1 !important;
}

.text-7xl {
  font-size: var(--fs-h1-fluid) !important;
  line-height: 1.1 !important;
}

.text-8xl {
  font-size: calc(var(--fs-h1-fluid) * 1.3) !important;
  line-height: 1 !important;
}

.text-9xl {
  font-size: calc(var(--fs-h1-fluid) * 1.6) !important;
  line-height: 1 !important;
}

/* Responsive Overrides (matching Tailwind breakpoints) */
@media (min-width: 640px) {
  .sm\:text-2xl {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }

  .sm\:text-3xl {
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;
  }

  .sm\:text-4xl {
    font-size: 2.25rem !important;
    line-height: 2.5rem !important;
  }

  .sm\:text-5xl {
    font-size: 3rem !important;
    line-height: 1 !important;
  }
}

@media (min-width: 768px) {
  .md\:text-3xl {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }

  .md\:text-4xl {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
  }

  .md\:text-5xl {
    font-size: 2.25rem !important;
    line-height: 1.15 !important;
  }

  .md\:text-6xl {
    font-size: 2.75rem !important;
    line-height: 1.1 !important;
  }

  .md\:text-7xl {
    font-size: 3.25rem !important;
    line-height: 1.1 !important;
  }

  .md\:text-8xl {
    font-size: 4rem !important;
    line-height: 1 !important;
  }
}

@media (min-width: 1024px) {
  .lg\:text-4xl {
    font-size: 1.875rem !important;
    line-height: 1.25 !important;
  }

  .lg\:text-5xl {
    font-size: 2.5rem !important;
    line-height: 1.15 !important;
  }

  .lg\:text-6xl {
    font-size: 3rem !important;
    line-height: 1.1 !important;
  }

  .lg\:text-7xl {
    font-size: 3.5rem !important;
    line-height: 1.1 !important;
  }

  .lg\:text-8xl {
    font-size: 4.5rem !important;
    line-height: 1 !important;
  }
}

@media (min-width: 1536px) {
  .\32 xl\:text-7xl {
    font-size: 3.75rem !important;
    line-height: 1 !important;
  }

  .\32 xl\:text-8xl {
    font-size: 4.75rem !important;
    line-height: 1 !important;
  }

  .\32 xl\:text-9xl {
    font-size: 5.5rem !important;
    line-height: 1 !important;
  }
}

/* ============================================
   MOBILE-FIRST BASE CSS
   AB Odyssée - Approche Mobile-First
   ============================================
   
   BREAKPOINTS (min-width):
   - Base: 0 - 639px (Mobile)
   - sm: 640px+ (Tablette portrait)
   - md: 768px+ (Tablette paysage)
   - lg: 1024px+ (Desktop)
   - xl: 1280px+ (Grand Desktop)
   
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES - Mobile-First Variables
   ============================================ */
:root {
  /* Breakpoints en variables pour documentation */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Espacements Mobile-First */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  /* Padding de section - Mobile par défaut */
  --section-padding-x: 1.25rem;
  --section-padding-y: 4rem;

  /* Container widths */
  --container-max: 100%;

  /* Reading Field (Textes longs, Manifestes) */
  --editorial-max-width: 75rem;

  /* Spatial Staging (Hero, Grilles, Tension) */
  --wide-max-width: 84rem;

  --editorial-padding-x: 3rem;


  /* Grid gaps - Standardized */
  --grid-gap: 1rem;

  /* Card padding */
  --card-padding: 1rem;
}



/* ============================================
   EDITORIAL CONTAINER - CENTRALIZED LAYOUT
   Global definition for all breakpoints
   ============================================ */
.editorial-container {
  width: 100%;
  max-width: var(--editorial-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--editorial-padding-x);
  padding-right: var(--editorial-padding-x);
}

/* Ensure content inside doesn't double-pad */
.editorial-container section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ============================================
   ASYMMETRIC LAYOUT - Left-aligned, breathing right
   For index.html editorial design
   ============================================ */
.layout-asymmetric {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .layout-asymmetric {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .layout-asymmetric {
    padding-left: 2rem;
    padding-right: 0;
  }
}

/* Content blocks - max-width for readability, aligned left */
.layout-asymmetric .content-block {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

@media (min-width: 1024px) {
  .layout-asymmetric .content-block {
    max-width: 65%;
  }
}

@media (min-width: 1280px) {
  .layout-asymmetric .content-block {
    max-width: 60%;
  }
}

/* ============================================
   BASE MOBILE (< 640px)
   Styles par défaut pour les petits écrans
   ============================================ */

/* Typography Mobile */
.hero-title,
.section-hero h1 {
  font-size: var(--fs-hero);
  line-height: 1.1;
}

.section-title,
h2.section-heading {
  font-size: var(--fs-h2);
  line-height: 1.2;
}

/* Layout Mobile - Empilage vertical (Liste) */
.mf-grid,
.mf-section-grid,
.mf-cards-container {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
  width: 100%;
}

/* Cards Mobile - Pleine largeur */
.mf-card {
  width: 100%;
  padding: var(--card-padding);
  border-radius: 0.75rem;
}

/* Stats en 2x2 sur mobile */
.mf-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* Section padding Mobile */
.mf-section {
  padding: var(--section-padding-y) var(--section-padding-x);
}

/* Boutons Mobile - Full width */
.mf-btn-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
}

.mf-btn-group .btn-action,
.mf-btn-group a[class*="btn"] {
  width: 100%;
  justify-content: center;
}

/* Navigation Mobile - Dock visible, Card-nav cachée */
.mf-nav-mobile {
  display: flex;
}

.mf-nav-desktop {
  display: none;
}

/* Menu Burger visible */
.mf-burger-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

/* Process steps - 2 colonnes sur mobile */
.mf-process-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
}

/* Testimonials Mobile */
.mf-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
}

/* FAQ Mobile - Full width */
.mf-faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* ============================================
   TABLETTE PORTRAIT (min-width: 640px)
   ============================================ */
@media (min-width: 640px) {
  :root {
    --section-padding-x: 1.5rem;
    --section-padding-y: 5rem;
    --grid-gap: 1rem;
    --card-padding: 1.25rem;
    --fs-hero: 3rem;
    --fs-h2: 2rem;
  }

  /* Grille 2 colonnes */
  .mf-grid,
  .mf-section-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap);
  }

  /* Cards 2 colonnes avec item pleine largeur en dernier */
  .mf-cards-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap);
  }

  .mf-cards-container>*:last-child:nth-child(odd) {
    grid-column: span 2;
  }

  /* Stats toujours en 4 colonnes sur tablette */
  .mf-stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
  }

  /* Boutons côte à côte */
  .mf-btn-group {
    flex-direction: row;
    justify-content: center;
  }

  .mf-btn-group .btn-action,
  .mf-btn-group a[class*="btn"] {
    width: auto;
  }

  /* Cards plus grandes */
  .mf-card {
    border-radius: 1rem;
  }
}

/* ============================================
   TABLETTE PAYSAGE (min-width: 768px)
   ============================================ */
@media (min-width: 768px) {
  :root {
    --section-padding-y: 6rem;
    --grid-gap: 1.25rem;
    --card-padding: 1.5rem;
    --fs-hero: 3.5rem;
    --fs-h2: 2.25rem;
    --fs-h3: 1.5rem;
  }

  /* Cards radius plus grand */
  .mf-card {
    border-radius: 1.25rem;
  }

  /* Process en 2x2 */
  .mf-process-grid {
    gap: var(--spacing-md);
  }
}

/* ============================================
   DESKTOP (min-width: 1024px)
   Structure classique avec navigation horizontale
   ============================================ */
@media (min-width: 1024px) {
  :root {
    --section-padding-x: 4rem;
    --section-padding-y: 8rem;
    --grid-gap: 1.5rem;
    --card-padding: 1.75rem;
    --fs-hero: 4rem;
    --fs-h2: 2.5rem;
    --container-max: 84rem;
    --section-padding-x: 2.5rem;
  }

  /* Navigation Desktop - Inverser visibilité */
  .mf-nav-mobile {
    display: none !important;
  }

  .mf-nav-desktop {
    display: flex !important;
  }

  /* Burger caché */
  .mf-burger-menu {
    display: none;
  }

  /* Grille 3 colonnes */
  .mf-grid,
  .mf-section-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Services cards - Dernier item sur une colonne */
  .mf-cards-container>*:last-child:nth-child(odd) {
    grid-column: span 1;
  }

  /* Layout Bento complexe pour services */
  .mf-bento-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: var(--grid-gap);
  }

  .mf-bento-featured {
    grid-column: span 2;
  }

  .mf-bento-tall {
    grid-row: span 2;
  }

  /* Process en ligne */
  .mf-process-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
  }

  /* Testimonials 3 colonnes */
  .mf-testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap);
  }

  /* Dernier item centre si impair */
  .mf-testimonials-grid>*:last-child:nth-child(3n+1) {
    grid-column: 2;
  }

  /* Cards avec radius premium */
  .mf-card {
    border-radius: 1.5rem;
  }
}

/* ============================================
   GRAND DESKTOP (min-width: 1280px)
   ============================================ */
@media (min-width: 1280px) {
  :root {
    --section-padding-y: 10rem;
    --grid-gap: 2rem;
    --card-padding: 2rem;
    --fs-hero: 4.5rem;
    --fs-h2: 3rem;
  }

  /* Container centré avec max-width */
  .mf-container {
    max-width: var(--container-max);
    margin: 0 auto;
  }
}

/* ============================================
   OVERRIDE - Compatibilité avec classes Tailwind
   Forcer le comportement Mobile-First 
   ============================================ */

/* Fix pour éviter le débordement sur mobile */
@media (max-width: 639px) {

  /* Stats grid - Réduire la taille sur très petits écrans */
  .grid.grid-cols-4 {
    gap: 0.25rem;
  }

  .grid.grid-cols-4>div {
    padding: 0.375rem !important;
    min-width: 0;
    overflow: hidden;
  }

  .grid.grid-cols-4 p {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Réduire la taille du texte des labels stats */
  .grid.grid-cols-4 .text-\[7px\] {
    font-size: 8px !important;
    letter-spacing: 0.05em !important;
  }

  /* Service cards - Hauteur égale et pas de débordement */
  #services-bento .grid.grid-cols-2>a {
    min-width: 0;
    overflow: hidden;
  }

  #services-bento .grid.grid-cols-2>a h3 {
    word-break: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    font-size: 11px;
  }
}

/* Services Bento - Override des classes Tailwind */
#services-bento .grid.grid-cols-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr) !important;
}

@media (min-width: 1024px) {
  #services-bento .grid.grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Value props grid */
.grid.grid-cols-2.lg\:grid-cols-3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (min-width: 1024px) {
  .grid.grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/* Stats grid - Toujours 4 colonnes */
.grid.grid-cols-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.25rem;
}

@media (min-width: 640px) {
  .grid.grid-cols-4 {
    gap: 0.75rem;
  }
}

/* Process steps */
.grid.grid-cols-2.lg\:grid-cols-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (min-width: 1024px) {
  .grid.grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}

/* ============================================
   NAVIGATION OVERRIDES - Mobile-First
   ============================================ */

/* Floating actions bubble - Caché par défaut (mobile) */
.floating-actions-bubble {
  display: none !important;
}

@media (min-width: 1024px) {
  .floating-actions-bubble {
    display: flex !important;
  }
}

/* Card nav container - Caché par défaut (mobile) */
.card-nav-container {
  display: none;
}

@media (min-width: 1024px) {
  .card-nav-container {
    display: block;
  }
}

/* Dock container - Visible par défaut (mobile) */
.dock-container {
  display: flex;
}

@media (min-width: 1024px) {
  .dock-container {
    display: none !important;
  }
}

/* ============================================
   TRANSITIONS - Fluides pour les breakpoints
   ============================================ */
.mf-grid,
.mf-section-grid,
.mf-cards-container,
.mf-card,
.mf-process-grid,
.mf-testimonials-grid {
  transition: gap 0.3s ease, grid-template-columns 0.3s ease;
}

.mf-card {
  transition: padding 0.3s ease, border-radius 0.3s ease, transform 0.3s ease;
}

/* ============================================
   UTILITIES - Classes utilitaires Mobile-First
   ============================================ */

/* Hide on mobile, show on desktop */
.mf-hide-mobile {
  display: none !important;
}

@media (min-width: 1024px) {
  .mf-hide-mobile {
    display: block !important;
  }

  .mf-hide-mobile.flex,
  .mf-hide-mobile[class*="flex"] {
    display: flex !important;
  }
}

/* Show on mobile, hide on desktop */
.mf-show-mobile {
  display: block;
}

@media (min-width: 1024px) {
  .mf-show-mobile {
    display: none !important;
  }
}

/* Full width on mobile */
.mf-full-mobile {
  width: 100%;
}

@media (min-width: 640px) {
  .mf-full-mobile {
    width: auto;
  }
}

/* Stack on mobile, row on desktop */
.mf-stack-mobile {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

@media (min-width: 640px) {
  .mf-stack-mobile {
    flex-direction: row;
  }
}

/* Text sizes responsive */
.mf-text-responsive {
  font-size: var(--fs-small);
}

@media (min-width: 640px) {
  .mf-text-responsive {
    font-size: var(--fs-body);
  }
}

@media (min-width: 1024px) {
  .mf-text-responsive {
    font-size: calc(var(--fs-body) * 1.1);
  }
}

/* ============================================
   GLOBAL PAGE FIXES - Apply to all pages
   ============================================ */

/* Global Mobile Overflow Prevention */
@media (max-width: 639px) {

  /* Empêcher le débordement horizontal sur tout le site */
  html,
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Containers - forcer largeur max */
  .container,
  .container-wide,
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl {
    max-width: 100%;
    padding-left: 2rem !important;
    /* Padding forcé augmenté */
    padding-right: 2rem !important;
  }

  /* Toutes les grilles - gap réduit et pas de débordement */
  [class*="grid"] {
    gap: 0.5rem;
  }

  [class*="grid"]>* {
    min-width: 0;
    overflow: hidden;
  }

  /* Texte long - césure automatique */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    word-break: break-word;
    overflow-wrap: break-word;
  }



  /* Override: Ne pas justifier les témoignages (trop courts, ça casse l'affichage) */
  #testimonials-grid p {
    text-align: left !important;
  }

  /* Override: Traversée section - alignement à gauche */
  .traversee-text p,
  .traversee-text p:not(.text-center):not(.text-left) {
    text-align: left !important;
    -webkit-hyphens: none !important;
    hyphens: none !important;
  }

  /* 2. BOITES (CONTAINERS) DÉCOLLÉS (Correction Demandée) */
  /* On ajoute une marge latérale aux cartes pour qu'elles "respirent" */
  .glass-card,
  .bento-card,
  [class*="bg-black/\\[0\\.015\\]"] {
    /* Pour le formulaire */
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
    width: auto !important;
    /* Safe Area for iOS */
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
  }

  /* ============================================
     SAFETY RESET - Prevent Mobile Overflow
     ============================================ */
  html,
  body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
    position: relative;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Prevent iOS text zoom */
  }

  * {
    box-sizing: border-box;
  }

  /* Ensure images never overflow */
  img,
  video,
  canvas,
  svg,
  iframe {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Prevent long words from breaking layout */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  li {
    overflow-wrap: break-word;
  }

  /* ========================================
     HERO SECTION - Centré horizontalement
     ======================================== */

  /* ========================================
     HERO SECTION - Left Aligned (Mobile First)
     ======================================== */

  /* Hero section - Alignement gauche par défaut */
  .hero-section-spacing,
  .hero-section-spacing * {
    text-align: left !important;
  }

  .hero-section-spacing h1,
  .hero-section-spacing h2,
  .hero-section-spacing p {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .hero-section-spacing .hero-buttons {
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  /* ========================================
     Z-PATTERN - Autres sections à gauche
     ======================================== */

  /* Autres sections - alignement gauche (OVERRIDE pour le Justifié ci-dessus) */
  /* Les titres restent alignés à gauche ou centre selon leur classe, mais les P sont justifiés */
  section:not(.hero-section-spacing) h2,
  section:not(.hero-section-spacing) h3 {
    text-align: left !important;
  }

  /* Labels et spans décoratifs */
  section span[class*="uppercase"],
  section span[class*="tracking"] {
    text-align: left !important;
    display: block;
  }

  /* Service cards icon + title rows - garder alignement horizontal */
  .flex.items-center.gap-4,
  .flex.items-center.gap-3,
  [data-service] .flex.items-center,
  section>div .flex.items-center.gap-4 h3 {
    align-items: center !important;
    flex-direction: row !important;
  }

  /* Icon containers in service lists - fixed size */
  .flex.items-center.gap-4>.w-12,
  .flex.items-center.gap-4>div[class*="rounded"] {
    flex-shrink: 0 !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-width: 2.5rem !important;
    min-height: 2.5rem !important;
  }

  /* Boutons - pleine largeur mais texte centré dans le bouton */
  section .btn-action,
  section a[class*="btn"]:not(.hero-btn-primary),
  section button:not(.hero-btn-primary) {
    text-align: center !important;
    /* Le texte DANS le bouton reste centré */
    width: 100%;
  }

  /* Specific fix for hero-btn-primary to keep it inline */
  section .hero-btn-primary {
    width: fit-content !important;
    display: inline-flex !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Team cards et service cards - garder centré les titres si voulu */
  .team-card,
  .bento-card .text-center {
    text-align: center !important;
  }
}



/* Bento card icons SVG - Taille UNIFORME */
.bento-card svg,
.bento-card i[data-lucide] {
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  min-height: 1rem !important;
  max-width: 1rem !important;
  max-height: 1rem !important;
  flex-shrink: 0 !important;
  stroke: #B48A3C !important;
  color: #B48A3C !important;
  fill: none !important;
}

/* Service cards icons (index.html) */
#services-bento .flex.items-center.justify-center,
.bento-card .flex.items-center.justify-center,
.glass-card .flex.items-center.justify-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Values/Features cards icons */
.value-card .flex.items-center.justify-center,
section .glass-card .flex.items-center.justify-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* ============================================
   MOCKUP MOBILE LAYOUT - Match exact design
   ============================================ */

@media (max-width: 639px) {

  /* ========================================
     TROIS PILIERS (about.html) - 3 colonnes sur mobile
     ======================================== */



  .grid.grid-cols-1.sm\:grid-cols-3,
  .grid.grid-cols-1,
  #notre-difference .grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
  }

  /* Process grid (index.html) - Rester en 2x2 */
  .grid.grid-cols-2.lg\:grid-cols-4 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  /* Process cards - Centrer le contenu */
  .grid.grid-cols-2.lg\:grid-cols-4>div {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 1rem !important;
  }

  .grid.grid-cols-2.lg\:grid-cols-4>div h3,
  .grid.grid-cols-2.lg\:grid-cols-4>div p {
    text-align: center !important;
  }

  /* Pillar cards - Très compactes */
  .grid.grid-cols-1.sm\:grid-cols-3>div,
  .grid.grid-cols-1>div,
  #notre-difference .grid>div {
    padding: 0.75rem 0.5rem !important;
    border-radius: 1rem !important;
    min-height: auto !important;
    text-align: center !important;
  }

  /* Pillar icons - Plus petits et centrés */
  .grid.grid-cols-2.lg\:grid-cols-4 .w-12,
  .grid.grid-cols-2.lg\:grid-cols-4 .w-14,
  .grid.grid-cols-2.lg\:grid-cols-4 .w-16,
  .grid.grid-cols-1.sm\:grid-cols-3 .w-12,
  .grid.grid-cols-1.sm\:grid-cols-3 .w-14,
  .grid.grid-cols-1 .w-12,
  .grid.grid-cols-1 .w-14 {
    width: 2.5rem !important;
    height: 2.5rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .grid.grid-cols-2.lg\:grid-cols-4 .w-12 i,
  .grid.grid-cols-2.lg\:grid-cols-4 i[data-lucide],
  .grid.grid-cols-1.sm\:grid-cols-3 i[data-lucide],
  .grid.grid-cols-1 i[data-lucide] {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  /* Pillar titles - Plus petits */
  .grid.grid-cols-2.lg\:grid-cols-4 h3,
  .grid.grid-cols-2.lg\:grid-cols-4 .font-bold,
  .grid.grid-cols-1.sm\:grid-cols-3 h3,
  .grid.grid-cols-1 h3 {
    font-size: 0.65rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.25rem !important;
  }

  /* Pillar descriptions - Très petites */
  .grid.grid-cols-2.lg\:grid-cols-4 p.text-sm,
  .grid.grid-cols-2.lg\:grid-cols-4 p.text-muted,
  .grid.grid-cols-1.sm\:grid-cols-3 p.text-sm,
  .grid.grid-cols-1 p.text-sm {
    font-size: 0.55rem !important;
    line-height: 1.3 !important;
  }

  /* ========================================
     TEAM CARDS - Grille 2x2
     ======================================== */

  /* Team grid - 2 colonnes sur mobile */
  .grid.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Team cards - Compactes */
  .team-card,
  .team-card .team-card-inner {
    padding: 1rem !important;
    border-radius: 1rem !important;
  }

  /* Team avatars - Taille moyenne */
  .team-card img,
  .team-card .w-32 {
    width: 3.5rem !important;
    height: 3.5rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* Team names */
  .team-card h3 {
    font-size: 0.875rem !important;
    margin-bottom: 0.25rem !important;
  }

  /* Team roles */
  .team-card p[class*="B48A3C"],
  .team-card .text-\[\#B48A3C\] {
    font-size: 0.6rem !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.3 !important;
  }

  /* Team descriptions */
  .team-card p.text-sm,
  .team-card .text-\[var\(--text-muted\)\] {
    font-size: 0.6rem !important;
    line-height: 1.4 !important;
  }

  /* ========================================
     SECTIONS - Espacement réduit
     ======================================== */

  section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Hero section - Moins d'espace */
  .hero-section-spacing {
    padding-top: 4rem !important;
    min-height: 0 !important;
  }

  /* Section headers - Plus compacts */
  section h2 {
    font-size: 1.25rem !important;
    margin-bottom: 0.5rem !important;
  }

  section h2+p,
  section .text-muted {
    font-size: 0.75rem !important;
    margin-bottom: 1rem !important;
  }

  /* ========================================
     SERVICE CARDS - Grille 2 colonnes
     ======================================== */

  #services-bento {
    gap: 0.1rem !important;
    /* Espacement minime (1.6px) */
  }

  #services-bento>a {
    padding: 0.55rem !important;
    border-radius: 1rem !important;
    min-height: auto !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    /* Espacement interne réduit */
  }



  /* FORCE FIXED LAYOUT & VISIBILITY (Correction "Bordel") */

  /* 1. Header (Icon + Number) must be row */
  #services-bento>a>div:first-child {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin-bottom: 0.15rem !important;
    /* Marge titre réduite */
    height: auto !important;
    flex-shrink: 0 !important;
  }

  /* 2. Force text visibility */
  #services-bento>a h3 {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 1.125rem !important;
    /* text-lg */
    color: var(--text-main) !important;
    margin-bottom: 0.25rem !important;
    text-align: left !important;
    /* Titre à gauche */
  }

  #services-bento>a p {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 0.875rem !important;
    /* text-sm */
    color: var(--text-muted) !important;
  }

  #services-bento>a span {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Service card 3 - Pleine largeur */
  #services-bento>a.col-span-2 {
    grid-column: span 2 !important;
    min-height: 120px !important;
  }

  /* ========================================
     STATS ROW - Grille 2x2 lisible
     ======================================== */

  .grid.grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    /* 2 colonnes au lieu de 4 */
    gap: 0.1rem !important;
  }

  .grid.grid-cols-4>div {
    padding: 0.75rem !important;
    border-radius: 0.75rem !important;
  }

  .grid.grid-cols-4 .text-base {
    font-size: 1.25rem !important;
    /* Plus grand */
    font-weight: 900 !important;
  }

  .grid.grid-cols-4 .text-\[7px\],
  .grid.grid-cols-4 p.uppercase {
    font-size: 0.6rem !important;
    letter-spacing: 0.05em !important;
  }

  /* ========================================
     IMAGES - Coins arrondis
     ======================================== */

  section img:not(.team-card img) {
    border-radius: 1rem !important;
  }

  /* ========================================
     CAROUSEL/SLIDER DOTS
     ======================================== */

  .carousel-dots,
  .swiper-pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
  }
}

/* Services grid (grid-cols-2 md:grid-cols-4 lg:grid-cols-6) */
.grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6 {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
  }
}

/* Services cards - Réduire la taille sur mobile */
@media (max-width: 767px) {
  .grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6>div {
    padding: 0.75rem !important;
    min-height: 60px;
  }

  .grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6 p {
    font-size: 11px !important;
    line-height: 1.3;
    word-break: break-word;
  }
}

/* Clients grid (grid-cols-2 md:grid-cols-4) */
.grid.grid-cols-2.md\\:grid-cols-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 768px) {
  .grid.grid-cols-2.md\\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

/* ============================================
   ABOUT.HTML - Team Cards Fixes
   ============================================ */

/* Team grid & Process grid (md:grid-cols-2 lg:grid-cols-4) */
.grid.md\:grid-cols-2.lg\:grid-cols-4,
.grid.grid-cols-2.lg\:grid-cols-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem !important;
  /* Espacement serré (1.6px) */
}

@media (min-width: 768px) {

  .grid.md\:grid-cols-2.lg\:grid-cols-4,
  .grid.grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    /* Un peu plus d'espace sur desktop */
  }
}

@media (min-width: 1024px) {

  .grid.md\:grid-cols-2.lg\:grid-cols-4,
  .grid.grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Process cards mobile styling for tight layout */
@media (max-width: 767px) {
  .grid.grid-cols-2.lg\:grid-cols-4>div {
    padding: 0.55rem !important;
    /* Padding réduit comme le reste */
    border-radius: 1rem !important;
  }
}

/* Team cards mobile styling */
@media (max-width: 767px) {
  .team-card {
    max-width: 100%;
  }

  .team-card .team-card-inner {
    padding: 1.5rem !important;
  }

  .team-card img {
    width: 5rem !important;
    height: 5rem !important;
    margin-bottom: 1rem !important;
  }

  .team-card h3 {
    font-size: 1.25rem !important;
  }

  .team-card p[class*="B48A3C"] {
    font-size: 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }

  .team-card p.text-sm {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }
}

/* ============================================
   CONTACT.HTML - Form Fixes
   ============================================ */

/* Form grid */
.grid.md\\:grid-cols-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .grid.md\\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Form inputs mobile */
@media (max-width: 767px) {

  .form-input,
  input[type="text"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important;
    /* Prevent iOS zoom */
    padding: 0.75rem 1rem !important;
    border-radius: 0.75rem !important;
  }

  .form-label,
  label {
    font-size: 9px !important;
    margin-left: 0.5rem !important;
  }
}

/* ============================================
   CODER-MON-PROJET.HTML & CREER-MA-MARQUE.HTML
   ============================================ */

/* Service details grid */
.grid.md\\:grid-cols-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .grid.md\\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* Cards de technologies */
@media (max-width: 767px) {
  .grid.md\\:grid-cols-3>div {
    padding: 1.25rem !important;
  }

  .grid.md\\:grid-cols-3 h3 {
    font-size: 1.25rem !important;
  }

  .grid.md\\:grid-cols-3 p {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }
}

/* Code blocks */
@media (max-width: 767px) {

  .code-block,
  [class*="code-"] {
    font-size: 0.7rem !important;
    padding: 1rem !important;
    overflow-x: auto;
  }
}

/* ============================================
   HERO SECTIONS - Mobile Optimization
   ============================================ */

@media (max-width: 639px) {

  /* Hero titles */
  .hero-section-spacing h1,
  section h1.text-6xl {
    font-size: 2.25rem !important;
    line-height: 1.1 !important;
  }

  .hero-section-spacing .accent-font,
  section h1 .accent-font {
    font-size: 2rem !important;
  }

  /* Hero buttons - Empilage */
  .flex.flex-col.sm\\:flex-row {
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100%;
  }

  .flex.flex-col.sm\\:flex-row>a,
  .flex.flex-col.sm\\:flex-row>button {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ============================================
   CTA SECTIONS - Mobile fixes
   ============================================ */

@media (max-width: 639px) {

  /* CTA titles */
  section h2.text-5xl {
    font-size: 1.75rem !important;
  }

  section h2.text-4xl {
    font-size: 1.5rem !important;
  }

  /* CTA buttons stack */
  .flex.gap-6.justify-center {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
  }

  .flex.gap-6.justify-center>a {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }
}

/* ============================================
   LEGAL PAGES - Mentions & Privacy
   ============================================ */

@media (max-width: 639px) {

  /* Legal content */
  .space-y-12 {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  }

  /* Legal headings */
  .space-y-12 h2 {
    font-size: 1.5rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* Legal lists */
  .space-y-12 ul {
    padding-left: 0.5rem !important;
  }

  .space-y-12 li {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
  }
}

/* ============================================
   SECTION 2: COMPONENTS
   ============================================ */

/* ============================================
   BUTTONS & CTA COMPONENTS
   Reusable button styles across all pages
   ============================================ */

/* Note: .hero-btn-primary is defined in INDEX DESIGN SYSTEM section above */

/* Secondary Button - Hidden by default */
.hero-btn-secondary {
  display: none;
}

/* ============================================
   BUTTON ENHANCEMENTS
   ============================================ */

/* Main content buttons (not navbar) */
main .btn-primary {
  position: relative;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

main .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 30px rgba(180, 138, 60, 0.3),
    0 0 0 1px rgba(180, 138, 60, 0.2);
}

/* Magnetic Effect */
.magnetic {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.magnetic:hover {
  transform: translateY(-2px);
}

/* Ripple Effect */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.ripple:active::after {
  width: 300px;
  height: 300px;
}

/* ============================================
   CARDS COMPONENTS
   Reusable card styles across all pages
   ============================================ */

/* ============================================
   SERVICE IMAGE CONTAINER
   ============================================ */

.service-image-container {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-image-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(180, 138, 60, 0.1) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 1;
}

.service-image-container:hover::before {
  opacity: 1;
}

.service-image-container:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 60px rgba(180, 138, 60, 0.2),
    0 0 0 1px rgba(180, 138, 60, 0.3);
}

/* ============================================
   PORTFOLIO CARDS
   ============================================ */

.portfolio-card {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(180, 138, 60, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 1;
}

.portfolio-card:hover::after {
  opacity: 1;
}

.portfolio-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.2),
    0 0 0 2px rgba(180, 138, 60, 0.4),
    inset 0 0 60px rgba(180, 138, 60, 0.1);
}

.portfolio-card .absolute.inset-0:first-of-type {
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-card:hover .absolute.inset-0:first-of-type {
  transform: scale(1.1);
}

/* ============================================
   VALUE CARDS
   ============================================ */

.value-card {
  position: relative;
  overflow: hidden;
}

.value-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(180, 138, 60, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.value-card:hover::before {
  opacity: 1;
}

.value-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(180, 138, 60, 0.3);
}

.value-card i {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.value-card:hover i {
  transform: scale(1.1) rotate(5deg);
}

/* ============================================
   SERVICE CARDS (3 PILIERS)
   ============================================ */

.service-card {
  position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1.5rem;
  padding: 2px;
  background: linear-gradient(135deg, rgba(180, 138, 60, 0.3), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.service-card:hover::before {
  opacity: 1;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(180, 138, 60, 0.4);
}

.service-card .absolute.top-0.right-0 {
  transition: transform 0.25s ease;
}

.service-card:hover .absolute.top-0.right-0 {
  transform: translate(-10px, -10px) scale(1.2);
}

/* ============================================
   BENTO GRID CARDS
   ============================================ */

.bento-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: block !important;
}

.bento-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(180, 138, 60, 0.1);
}

/* Bento card internal layout */
.bento-card>div {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* ============================================
   LIGHT THEME CARDS
   ============================================ */

/* Light/Beige theme cards (Default) */
.bento-card {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(180, 138, 60, 0.15) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(180, 138, 60, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.bento-card:hover {
  background: rgba(255, 255, 255, 1) !important;
  border-color: rgba(180, 138, 60, 0.3) !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(180, 138, 60, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: translateY(-8px) scale(1.01);
}

/* Light theme text contrast */
.bento-card .text-\[var\(--text-main\)\] {
  color: #1a1a1a !important;
}

.bento-card .text-muted {
  color: #666 !important;
}

/* Responsive card heights */
@media (max-width: 768px) {

  .service-image-container,
  .portfolio-card {
    height: 300px !important;
  }
}

/* ============================================
   TILTED CARD COMPONENT
   3D tilt effect for client showcase gallery
   ============================================ */

/* ============================================
   TILTED CARD COMPONENT
   3D tilt effect for client showcase gallery
   ============================================ */

.tilted-card {
  position: relative;
  width: 350px;
  height: 500px;
  flex-shrink: 0;
  background: white;
  border: 1px solid rgba(180, 138, 60, 0.12);
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(180, 138, 60, 0.08);
  display: flex;
  flex-direction: column;
}

/* 3/4 Image Area */
.tilted-card-image {
  width: 100%;
  height: 75%;
  background: #f5f5f5;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(180, 138, 60, 0.1);
}

.client-project-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.tilted-card:hover .client-project-img {
  transform: scale(1.05);
}

/* 1/4 Content Area */
.tilted-card-content {
  width: 100%;
  height: 25%;
  padding: 1.5rem;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.5rem;
}

.client-name {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  text-transform: uppercase;
  color: #1a1a1a;
  letter-spacing: 0.05em;
  margin: 0;
}

.client-tags {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.875rem;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

/* Desktop hover - 3D tilt handled by JS */
@media (min-width: 1024px) {
  .tilted-card:hover {
    box-shadow:
      0 20px 40px rgba(0, 0, 0, 0.12),
      0 0 0 1px rgba(180, 138, 60, 0.2);
  }
}

/* Tablet & Mobile - no tilt */
@media (max-width: 1023px) {
  .tilted-card {
    transform: none !important;
  }

  .tilted-card:hover {
    transform: translateY(-4px) !important;
  }
}

/* Mobile - smaller cards */
@media (max-width: 640px) {
  .tilted-card {
    width: 260px;
    height: 370px;
  }

  .tilted-card-inner {
    padding: 1.5rem;
  }
}

/* ============================================
   TRUST GALLERY - Horizontal Scroll
   ============================================ */

.trust-gallery {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 1rem 0 2rem;
}

.trust-gallery::-webkit-scrollbar {
  display: none;
}

.trust-track {
  display: flex;
  gap: 1.5rem;
  padding-left: max(2rem, calc((100vw - 84rem) / 2 + 2rem));
  padding-right: 2rem;
  width: max-content;
}

/* Responsive padding for track */
@media (max-width: 1344px) {
  .trust-track {
    padding-left: 2rem;
  }
}

@media (max-width: 640px) {
  .trust-track {
    padding-left: 1rem;
    padding-right: 1rem;
    gap: 1rem;
  }
}

/* ============================================
   GALLERY ARROW BUTTONS
   Simple transparent arrow buttons
   ============================================ */

.gallery-arrow {
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.gallery-arrow:hover {
  opacity: 1;
}

.gallery-arrow:active {
  opacity: 0.8;
}

/* Mobile Gallery Arrow Positioning */
@media (max-width: 640px) {

  /* Override absolute positioning for mobile - arrows below carousel, right-aligned */
  #ils-nous-font-confiance>div:last-of-type {
    position: static !important;
    margin-top: 1rem !important;
    padding-right: 5rem !important;
    justify-content: flex-end !important;
    flex-direction: row !important;
    gap: 1.5rem !important;
    pointer-events: auto !important;
  }

  .gallery-arrow {
    padding: 12px;
    background: transparent;
    width: auto !important;
    display: inline-flex !important;
  }

  .gallery-arrow svg {
    width: 28px !important;
    height: 28px !important;
  }
}



/* Tablet adjustments */
@media (max-width: 768px) and (min-width: 641px) {
  #ils-nous-font-confiance>div:last-of-type {
    bottom: 8px !important;
    right: 8px !important;
  }

  .gallery-arrow {
    padding: 10px;
  }

  .gallery-arrow svg {
    width: 28px !important;
    height: 28px !important;
  }
}

/* ============================================
   RÈGLES GLOBALES POUR LES ICÔNES
   Garantit la visibilité sur tous les écrans
   ============================================ */

/* Taille minimale pour toutes les icônes Lucide */
[data-lucide],
i[data-lucide],
svg[data-lucide] {
  min-width: 16px !important;
  min-height: 16px !important;
  flex-shrink: 0;
  display: inline-block;
}

/* Tailles adaptatives selon le contexte */
/* Petites icônes (dans le texte, boutons) */
[data-lucide].w-3,
[data-lucide].w-4,
i[data-lucide].w-3,
i[data-lucide].w-4 {
  width: clamp(14px, 1rem, 20px) !important;
  height: clamp(14px, 1rem, 20px) !important;
}

/* Icônes moyennes (cartes, sections) */
[data-lucide].w-5,
[data-lucide].w-6,
[data-lucide].w-7,
i[data-lucide].w-5,
i[data-lucide].w-6,
i[data-lucide].w-7 {
  width: clamp(20px, 1.5rem, 32px) !important;
  height: clamp(20px, 1.5rem, 32px) !important;
}

/* Grandes icônes (hero, features) - Capped at 48px */
[data-lucide].w-8,
[data-lucide].w-10,
[data-lucide].w-12,
[data-lucide].w-14,
[data-lucide].w-16,
i[data-lucide].w-8,
i[data-lucide].w-10,
i[data-lucide].w-12,
i[data-lucide].w-14,
i[data-lucide].w-16 {
  width: clamp(24px, 3vw, 48px) !important;
  height: clamp(24px, 3vw, 48px) !important;
}

/* Conteneurs d'icônes - tailles minimales garanties */
[class*="w-"] [data-lucide],
[class*="h-"] [data-lucide],
.flex [data-lucide],
.items-center [data-lucide] {
  min-width: 16px !important;
  min-height: 16px !important;
}

/* Conteneurs d'icônes avec fond */
[class*="bg-"] [data-lucide],
[class*="rounded"] [data-lucide] {
  min-width: 20px !important;
  min-height: 20px !important;
}

/* Responsive spécifique */
@media (max-width: 640px) {

  /* Sur mobile, garantir une taille minimale visible */
  [data-lucide] {
    min-width: 18px !important;
    min-height: 18px !important;
  }

  [data-lucide].w-5,
  [data-lucide].w-6,
  [data-lucide].w-7 {
    width: clamp(20px, 5vw, 28px) !important;
    height: clamp(20px, 5vw, 28px) !important;
  }

  [data-lucide].w-8,
  [data-lucide].w-10,
  [data-lucide].w-12 {
    width: clamp(32px, 6vw, 48px) !important;
    height: clamp(32px, 6vw, 48px) !important;
  }
}

@media (max-width: 480px) {

  /* Sur très petits écrans, augmenter encore */
  [data-lucide] {
    min-width: 20px !important;
    min-height: 20px !important;
  }
}

/* Force l'affichage même si la classe Tailwind est mal appliquée */
[data-lucide] svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* ============================================
   ANIMATIONS COMPONENTS
   Reusable animation and transition styles
   ============================================ */

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

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

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Simple Fade In */
@keyframes simpleFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   HOVER EFFECTS
   ============================================ */

.hover-lift {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.hover-lift:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.hover-glow {
  transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 30px rgba(180, 138, 60, 0.4);
}

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

@keyframes gradient-xy {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.gradient-animated {
  background-size: 200% 200%;
  animation: gradient-xy 3s ease infinite;
}

/* ============================================
   TEXT REVEAL
   ============================================ */

.text-reveal {
  overflow: hidden;
}

.text-reveal span {
  display: inline-block;
  transform: translateY(100%);
  animation: textReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes textReveal {
  to {
    transform: translateY(0);
  }
}

/* ============================================
   LOADING STATES & SKELETON
   ============================================ */

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

.skeleton {
  background: linear-gradient(90deg,
      var(--bg-secondary) 0%,
      var(--bg-card) 50%,
      var(--bg-secondary) 100%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* ============================================
   MARQUEE
   ============================================ */

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

/* ============================================
   TESTIMONIALS CAROUSEL
   ============================================ */

.testimonial-slides {
  position: relative;
  min-height: 180px;
}

.testimonial-slide {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s;
}

.testimonial-slide.active {
  opacity: 1;
  visibility: visible;
  position: relative;
  transform: translateY(0);
}

.testimonial-dot {
  cursor: pointer;
  border: none;
  outline: none;
}

.testimonial-dot.active {
  background-color: #C39F5F !important;
  transform: scale(1.3);
}

/* ============================================
   PARALLAX
   ============================================ */

.parallax-slow {
  transition: transform 0.1s ease-out;
}

.parallax-fast {
  transition: transform 0.05s ease-out;
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {

  .reveal,
  .hover-lift,
  .hover-glow,
  .testimonial-slide,
  .animate-marquee {
    transition: none !important;
    animation: none !important;
  }
}

/* Loader styles */
#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #091A30;
  /* var(--bg-main) - hardcoded to prevent flash */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}

#loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-content {
  opacity: 0;
  transform: translateY(20px);
  animation: loaderFadeIn 0.8s ease-out forwards;
}

.loader-logo {
  display: inline-block;
  animation: loaderPulse 2s infinite ease-in-out;
}

@keyframes loaderFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loaderPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(0.98);
  }
}

/* ============================================
   PRESTATIONS SECTION - Scroll-Driven Component
   ============================================ */

/* --- Main Container --- */
.prestations-section {
  position: relative;
  min-height: 220vh;
  /* Balanced scroll space - 3 sections with comfortable reading time */
  padding: 0 var(--padding-page, 1rem);
  display: flex;
  flex-direction: column;
  /* Mobile first: stacked */
}

@media (min-width: 1024px) {
  .prestations-section {
    flex-direction: row;
    padding: 0 var(--padding-page, 4rem);
  }
}

/* --- Left Column: Sticky Navigation --- */
.prestations-nav {
  display: none;
  /* Hidden on mobile */
}

@media (min-width: 1024px) {
  .prestations-nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: sticky;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    flex-shrink: 0;
    padding: 4rem 2rem;
  }
}

.prestations-nav-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* --- Glider (Gold indicator) --- */
.prestations-glider {
  position: absolute;
  left: -1.5rem;
  top: 0;
  width: 3px;
  height: 2rem;
  /* Approximate height of a nav item */
  background-color: var(--accent, #C39F5F);
  border-radius: 2px;
  transform: translateY(0);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

/* --- Navigation Item --- */
.prestations-nav-item {
  font-family: var(--font-serif, 'Instrument Serif', serif);
  font-size: 1.75rem;
  color: var(--text-main, #1A2E47);
  opacity: 0.4;
  transition: opacity 0.4s ease, color 0.4s ease;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

.prestations-nav-item.is-active {
  opacity: 1;
  color: var(--accent, #C39F5F);
}

/* --- Right Column: Content --- */
.prestations-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* No gap on mobile, content takes full space */
}

@media (min-width: 1024px) {
  .prestations-content {
    position: relative;
    padding-left: 4rem;
  }
}

/* --- Individual Offer Content Block --- */
.offer-content {
  /* Mobile: Visible and stacked */
  padding: 4rem 0;
  border-bottom: 1px solid var(--border-color, rgba(15, 18, 22, 0.08));
}

.offer-content:last-child {
  border-bottom: none;
}

@media (min-width: 1024px) {
  .offer-content {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 0;
    border-bottom: none;
    opacity: 0;
    transform: translateY(30px);
    pointer-events: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .offer-content.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* --- Offer Title --- */
.offer-title {
  font-family: var(--font-serif, 'Instrument Serif', serif);
  font-size: 2.5rem;
  color: var(--text-main, #1A2E47);
  margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .offer-title {
    font-size: 3.5rem;
  }
}

/* --- Offer Subtitle --- */
.offer-subtitle {
  font-family: var(--font-serif, 'Instrument Serif', serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--accent, #C39F5F);
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .offer-subtitle {
    font-size: 1.5rem;
  }
}

/* --- Offer Description --- */
.offer-description {
  font-family: var(--font-sans, 'Manrope', sans-serif);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-muted, #1A2E47);
  max-width: 600px;
}

@media (min-width: 768px) {
  .offer-description {
    font-size: 1.125rem;
  }
}

/* --- Mobile Offer Title (Inline version for stacked view) --- */
.offer-mobile-title {
  display: block;
  font-family: var(--font-sans, 'Manrope', sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent, #C39F5F);
  margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
  .offer-mobile-title {
    display: none;
  }
}

/* ============================================
   ULYSSE - ASSISTANT IA
   ============================================ */

#ulysse-widget {
  --ulysse-primary: #B48A3C;
  --ulysse-primary-dark: #8a6a2e;
  position: fixed;
  bottom: 24px;
  /* Always bottom right */
  right: 24px;
  z-index: 9999;
  font-family: var(--font-sans), system-ui, -apple-system, sans-serif;
}

/* Default / Light Mode (Matches Site) */
#ulysse-widget {
  --ulysse-bg: #F5F0E1;
  /* var(--bg-main) */
  --ulysse-bg-secondary: #EBE6D6;
  /* var(--bg-secondary) */
  --ulysse-text: #1A1A1A;
  --ulysse-text-muted: #64748b;
  --ulysse-border: rgba(180, 138, 60, 0.2);
  --ulysse-message-bg: rgba(255, 255, 255, 0.5);
}

/* Dark Mode (Uses same Beige theme as rest of site) */




/* Toggle Button - Subtle, Quiet Luxury */
.ulysse-toggle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  /* Desaturated matte gold */
  background: #A08050;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Soft, non-glowing shadow */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.ulysse-toggle:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  background: #A8885A;
}

.ulysse-toggle.active {
  transform: scale(0.98);
}

.ulysse-toggle-icon {
  position: relative;
  width: 22px;
  height: 22px;
  color: white;
}

.ulysse-toggle-icon svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}

.ulysse-icon-chat {
  opacity: 1;
  transform: scale(1) rotate(0);
}

.ulysse-icon-close {
  opacity: 0;
  transform: scale(0.5) rotate(-90deg);
}

.ulysse-toggle.active .ulysse-icon-chat {
  opacity: 0;
  transform: scale(0.5) rotate(90deg);
}

.ulysse-toggle.active .ulysse-icon-close {
  opacity: 1;
  transform: scale(1) rotate(0);
}

/* Pulse Animation - DISABLED for Quiet Luxury */
.ulysse-toggle-pulse {
  display: none;
  /* Completely hidden */
}

@keyframes ulysse-pulse {

  /* Empty - animation disabled */
  0%,
  100% {
    opacity: 0;
  }
}

.ulysse-toggle.active .ulysse-toggle-pulse {
  display: none;
}

/* Chat Window */
.ulysse-chat {
  position: absolute;
  bottom: 80px;
  right: 0;
  width: 380px;
  max-width: calc(100vw - 48px);
  height: 520px;
  max-height: calc(100vh - 140px);
  background: var(--ulysse-bg);
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--ulysse-border);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  overflow: hidden;
}

/* Light mode shadow adjustment */
.ulysse-chat {
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.15),
    0 4px 20px rgba(180, 138, 60, 0.1);
}

.ulysse-chat.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Header */
.ulysse-header {
  padding: 20px;
  background: linear-gradient(135deg, rgba(180, 138, 60, 0.15) 0%, transparent 100%);
  border-bottom: 1px solid var(--ulysse-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ulysse-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ulysse-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ulysse-primary) 0%, var(--ulysse-primary-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
  box-shadow: 0 4px 12px rgba(180, 138, 60, 0.3);
}

.ulysse-robot-icon {
  width: 24px;
  height: 24px;
}

.ulysse-status {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid var(--ulysse-bg);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.ulysse-header-text h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ulysse-text);
  margin: 0;
}

.ulysse-header-text p {
  font-size: 12px;
  color: var(--ulysse-text-muted);
  margin: 0;
}

.ulysse-minimize {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--ulysse-message-bg);
  border: 1px solid var(--ulysse-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ulysse-text-muted);
  transition: all 0.2s ease;
}

.ulysse-minimize:hover {
  background: var(--ulysse-bg-secondary);
  color: var(--ulysse-text);
  border-color: var(--ulysse-primary);
}

.ulysse-minimize svg {
  width: 16px;
  height: 16px;
}

/* Messages */
.ulysse-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ulysse-messages::-webkit-scrollbar {
  width: 6px;
}

.ulysse-messages::-webkit-scrollbar-track {
  background: transparent;
}

.ulysse-messages::-webkit-scrollbar-thumb {
  background: var(--ulysse-border);
  border-radius: 3px;
}

.ulysse-messages::-webkit-scrollbar-thumb:hover {
  background: var(--ulysse-primary);
}

/* Message */
.ulysse-message {
  display: flex;
  animation: ulysse-message-in 0.3s ease;
}

@keyframes ulysse-message-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ulysse-message-content {
  display: flex;
  gap: 10px;
  max-width: 85%;
}

.ulysse-message-user {
  justify-content: flex-end;
}

.ulysse-message-user .ulysse-message-content {
  flex-direction: row-reverse;
}

.ulysse-message-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ulysse-primary) 0%, var(--ulysse-primary-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 2px 8px rgba(180, 138, 60, 0.25);
}

.ulysse-robot-small {
  width: 18px;
  height: 18px;
}

.ulysse-message-bubble {
  padding: 12px 16px;
  border-radius: 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ulysse-message-bot .ulysse-message-bubble {
  background: #ffffff !important;
  border: 1px solid rgba(180, 138, 60, 0.2);
  border-top-left-radius: 4px;
}

.ulysse-message-user .ulysse-message-bubble {
  background: linear-gradient(135deg, var(--ulysse-primary) 0%, var(--ulysse-primary-dark) 100%);
  border-top-right-radius: 4px;
}

.ulysse-message-bubble p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ulysse-text) !important;
  margin: 0;
  word-break: break-word;
}

.ulysse-message-user .ulysse-message-bubble p {
  color: #ffffff !important;
}




.ulysse-message-user .ulysse-message-bubble p {
  color: #ffffff !important;
}

.ulysse-message-bubble a {
  color: var(--ulysse-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

.ulysse-message-bubble a:hover {
  text-decoration-thickness: 2px;
}

.ulysse-message-user .ulysse-message-bubble a {
  color: white;
}

/* Light mode link adjustments */
/* Light mode link adjustments (Default) */
.ulysse-message-bubble a {
  color: var(--ulysse-primary-dark);
}

.ulysse-message-time {
  display: block;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 6px;
  text-align: right;
}

.ulysse-message-bot .ulysse-message-time {
  color: rgba(0, 0, 0, 0.4);
}

.ulysse-message-user .ulysse-message-time {
  color: rgba(255, 255, 255, 0.8);
}

/* Input */
.ulysse-input-container {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--ulysse-border);
  position: relative;
}

.ulysse-typing {
  position: absolute;
  top: -30px;
  left: 20px;
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background: var(--ulysse-message-bg);
  border-radius: 12px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.ulysse-typing.active {
  opacity: 1;
  visibility: visible;
}

.ulysse-typing span {
  width: 6px;
  height: 6px;
  background: var(--ulysse-primary);
  border-radius: 50%;
  animation: ulysse-typing-dot 1.4s infinite;
}

.ulysse-typing span:nth-child(2) {
  animation-delay: 0.2s;
}

.ulysse-typing span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes ulysse-typing-dot {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

.ulysse-form {
  display: flex;
  gap: 10px;
}

.ulysse-input {
  flex: 1;
  padding: 14px 18px;
  background: var(--ulysse-message-bg);
  border: 1px solid var(--ulysse-border);
  border-radius: 14px;
  color: var(--ulysse-text);
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
}

.ulysse-input::placeholder {
  color: var(--ulysse-text-muted);
}

.ulysse-input:focus {
  border-color: var(--ulysse-primary);
  background: var(--ulysse-bg-secondary);
}

.ulysse-send {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--ulysse-primary) 0%, var(--ulysse-primary-dark) 100%);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.2s ease;
}

.ulysse-send:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(180, 138, 60, 0.4);
}

.ulysse-send:active {
  transform: scale(0.95);
}

.ulysse-send svg {
  width: 20px;
  height: 20px;
}

/* Responsive */
@media (max-width: 480px) {
  #ulysse-widget {
    bottom: 24px;
    /* Fix mobile positioning - stays at bottom */
    right: 16px;
  }

  .ulysse-toggle {
    width: 44px;
    height: 44px;
  }

  .ulysse-chat {
    bottom: 74px;
    width: calc(100vw - 32px);
    height: calc(100vh - 120px);
    max-height: 450px;
    border-radius: 20px;
  }

  .ulysse-header {
    padding: 16px;
  }

  .ulysse-messages {
    padding: 16px;
  }

  .ulysse-input-container {
    padding: 12px 16px 16px;
  }
}

/* ============================================
   SECTION 3: PAGE-SPECIFIC STYLES
   ============================================ */

/* ============================================
   INDEX-SPECIFIC CSS - Styles uniquement pour Index.html
   ============================================ */

canvas.webgl {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  outline: none;
  pointer-events: none;
  touch-action: pan-y pinch-zoom;
  background: transparent !important;
}

/* ============================================
   INDEX-SPECIFIC CSS - Styles uniquement pour Index.html
   ============================================ */

/* Remove WebGL Canvas */
canvas.webgl {
  display: none !important;
}

/* Hero Section - Left-aligned at all breakpoints */
section.hero {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  position: relative;
  background: var(--bg-main) !important;
  padding-top: 15vh;
  padding-bottom: 10vh;
}

/* Tablet */
@media (min-width: 768px) {
  section.hero {
    padding-top: 20vh;
    padding-bottom: 5rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  section.hero {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* Hero Content Wrapper - Inherits from layout-asymmetric */
section.hero #hero-content-wrapper {
  align-items: flex-start;
  width: 100%;
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 1024px) {
  section.hero #hero-content-wrapper {
    min-height: 100vh;
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* Slogan Section - Content block handles max-width */
section.hero #hero-slogan-section {
  text-align: left;
}

/* Hero Title - H1 - Mobile Compact */
.hero-title {
  font-family: var(--font-serif) !important;
  color: var(--text-main);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-size: 2.5rem;
  margin-bottom: 1rem;
  /* Compact spacing mobile */
}

/* Hero Description - Compact mobile */
.hero-description {
  margin-bottom: 1.5rem !important;
  /* Tighter than default */
}

@media (min-width: 480px) {
  .hero-title {
    font-size: 2.75rem;
    line-height: 1.08;
  }
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 3.5rem;
    line-height: 1.1;
  }
}

@media (min-width: 1024px) {
  .hero-title {
    font-size: 4.5rem;
    line-height: 1.1;
  }
}

/* Button styles moved to css/components/buttons.css */

/* Scroll Spacer - Remove */
.scroll-spacer,
.scroll-marker {
  display: none !important;
}

/* Animations */
/* Simple Reveal */
.hero-title-line-1,
.hero-title-line-2,
.hero-description,
.hero-buttons {
  opacity: 0;
  animation: simpleFadeIn 1s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}

.hero-title-line-1 {
  animation-delay: 0.2s;
}

.hero-title-line-2 {
  animation-delay: 0.4s;
}

.hero-description {
  animation-delay: 0.6s;
}

.hero-buttons {
  animation-delay: 0.8s;
}

@keyframes simpleFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Remove fancy animations */
.hero-gradient-text {
  background: none;
  -webkit-text-fill-color: initial;
  color: var(--text-main);
}


/* Card styles moved to css/components/cards.css */

/* Reveal animations moved to css/components/animations.css */

/* Button enhancements moved to css/components/buttons.css */

/* ============================================
   RESPONSIVE ENHANCEMENTS
   ============================================ */

@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem !important;
  }

  .service-image-container,
  .portfolio-card {
    height: 300px !important;
  }

  .animate-pulse-slow {
    display: none;
  }
}

/* ============================================
   GLASSMORPHISM ENHANCEMENTS
   ============================================ */

/* Uniquement pour les boutons liquid-glass dans le hero, pas la navbar */
section.hero .button-secondary-glass.liquid-glass {
  position: relative;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

section.hero .button-secondary-glass.liquid-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

section.hero .button-secondary-glass.liquid-glass:hover::before {
  left: 100%;
}

section.hero .button-secondary-glass.liquid-glass:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(180, 138, 60, 0.2),
    0 0 40px rgba(180, 138, 60, 0.1);
}

/* ============================================
   SMOOTH SCROLL ENHANCEMENT
   ============================================ */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ============================================
   LOADING STATES & SKELETON SCREENS
   ============================================ */

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

.skeleton {
  background: linear-gradient(90deg,
      var(--bg-secondary) 0%,
      var(--bg-card) 50%,
      var(--bg-secondary) 100%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* ============================================
   PREMIUM MICRO-INTERACTIONS
   ============================================ */

/* Magnetic Effect for Buttons */
.magnetic {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.magnetic:hover {
  transform: translateY(-2px);
}

/* Ripple Effect */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.ripple:active::after {
  width: 300px;
  height: 300px;
}

/* ============================================
   ENHANCED FOCUS STATES (Accessibility)
   ============================================ */

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================
   PARALLAX ENHANCEMENTS
   ============================================ */

.parallax-slow {
  transition: transform 0.1s ease-out;
}

.parallax-fast {
  transition: transform 0.05s ease-out;
}

/* ============================================
   PREMIUM GRADIENT ANIMATIONS
   ============================================ */

@keyframes gradient-xy {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.gradient-animated {
  background-size: 200% 200%;
  animation: gradient-xy 3s ease infinite;
}

/* ============================================
   PREMIUM HOVER EFFECTS
   ============================================ */

.hover-lift {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.hover-lift:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.hover-glow {
  transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 30px rgba(180, 138, 60, 0.4);
}

/* ============================================
   BENTO GRID CARDS
   ============================================ */

.bento-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: block !important;
}

.bento-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(180, 138, 60, 0.1);
}

/* Bento card internal layout */
.bento-card>div {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Marquee Animation for brands */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

/* Text Reveal Effect */
.text-reveal {
  overflow: hidden;
}

.text-reveal span {
  display: inline-block;
  transform: translateY(100%);
  animation: textReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes textReveal {
  to {
    transform: translateY(0);
  }
}

/* ============================================
   ORGANIC SHAPES & EDITORIAL STYLES
   ============================================ */

/* Font cursive - Great Vibes */
.font-cursive {
  font-family: 'Great Vibes', cursive;
}

/* ============================================
   LIGHT THEME OPTIMIZATIONS
   ============================================ */

/* Ensure cards have proper background in light mode */
.bg-\[var\(--bg-card\)\] {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Better contrast for gold elements in light mode */
.text-\[\#B48A3C\] {
  color: #9A7633;
}

/* Light theme for 3D cards */
.bento-card {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(180, 138, 60, 0.15) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(180, 138, 60, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.bento-card:hover {
  background: rgba(255, 255, 255, 1) !important;
  border-color: rgba(180, 138, 60, 0.3) !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(180, 138, 60, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: translateY(-8px) scale(1.01);
}

/* Light theme text contrast */
.bento-card .text-\[var\(--text-main\)\] {
  color: #1a1a1a !important;
}

.bento-card .text-muted {
  color: #666 !important;
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

/* Smooth horizontal scroll for testimonials on mobile */
@media (max-width: 639px) {
  .overflow-x-auto {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .overflow-x-auto>* {
    scroll-snap-align: start;
  }

  /* Hide scrollbar on mobile */
  .overflow-x-auto::-webkit-scrollbar {
    display: none;
  }

  .overflow-x-auto {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* Ensure touch targets are at least 44px */
@media (max-width: 639px) {

  .btn-action,
  details summary,
  a[href] {
    min-height: 44px;
  }
}

/* Better spacing on very small screens */
@media (max-width: 374px) {
  .text-3xl {
    font-size: 1.5rem;
  }

  .px-5 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Organic blob shapes */
.organic-blob-gold {
  background: radial-gradient(ellipse at center, #B48A3C 0%, transparent 70%);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

.organic-blob-blue {
  background: radial-gradient(ellipse at center, #B48A3C 0%, transparent 70%);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

/* Line-through effect */
.line-through {
  text-decoration: line-through;
  text-decoration-color: var(--text-main);
  text-decoration-thickness: 2px;
}

/* Staggered grid effect */
.stagger-grid>*:nth-child(2) {
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .stagger-grid>*:nth-child(2) {
    margin-top: 4rem;
  }
}

/* Editorial accent line */
.editorial-line::before {
  content: '';
  display: block;
  width: 3rem;
  height: 2px;
  background: var(--accent);
  margin-bottom: 1rem;
}

/* Hand-drawn underline animation */
@keyframes hand-draw {
  from {
    stroke-dashoffset: 100;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.hand-drawn-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: hand-draw 1.5s ease forwards;
}

/* ============================================
   SCROLL PROGRESS INDICATOR
   ============================================ */

#scroll-progress-indicator {
  --indicator-size: 56px;
  --indicator-color: #B48A3C;
  --indicator-bg: var(--bg-card);

  position: fixed;
  bottom: 32px;
  right: 32px;
  width: var(--indicator-size);
  height: var(--indicator-size);
  border-radius: 50%;
  background: var(--indicator-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8) translateY(20px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

#scroll-progress-indicator.is-visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
}

#scroll-progress-indicator:hover {
  border-color: var(--indicator-color);
  box-shadow: 0 12px 40px rgba(180, 138, 60, 0.25);
}

#scroll-progress-indicator svg:first-child {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

#scroll-progress-indicator .indicator-circle-bg {
  fill: none;
  stroke: var(--border-color);
  stroke-width: 3;
}

#scroll-progress-indicator .indicator-circle-progress {
  fill: none;
  stroke: var(--indicator-color);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s ease;
}

#scroll-progress-indicator .indicator-loop {
  position: absolute;
  width: 120%;
  height: 120%;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease;
  animation: indicator-spin 12s linear infinite;
  animation-play-state: paused;
}

#scroll-progress-indicator:hover .indicator-loop {
  opacity: 1;
  transform: scale(1);
  animation-play-state: running;
}

#scroll-progress-indicator .indicator-loop text {
  fill: var(--indicator-color);
  font-size: 5.8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

@keyframes indicator-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

#scroll-progress-indicator .indicator-icon {
  position: relative;
  z-index: 2;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

#scroll-progress-indicator:hover .indicator-icon {
  transform: translateY(-2px);
}

#scroll-progress-indicator .indicator-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--indicator-color);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  #scroll-progress-indicator {
    --indicator-size: 48px;
    bottom: 24px;
    right: 24px;
  }

  #scroll-progress-indicator .indicator-icon {
    width: 16px;
    height: 16px;
  }

  #scroll-progress-indicator .indicator-loop {
    display: none;
  }
}

/* ============================================
   MOBILE-FIRST SECTION REFINEMENTS
   ============================================ */

/* ---- PHILOSOPHY SECTION ---- */
/* Stricter max-width on mobile, more breathing room around quote */
.section-philosophy {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.section-philosophy .philosophy-quote {
  max-width: 90%;
  /* Mobile: tighter width */
  margin: 0 auto;
  font-size: 1.5rem;
  line-height: 1.3;
}

.section-philosophy .philosophy-text {
  max-width: 85%;
  margin: 2rem auto 0;
  font-size: 1rem;
  line-height: 1.8;
}

@media (min-width: 768px) {
  .section-philosophy {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .section-philosophy .philosophy-quote {
    max-width: 75%;
    font-size: 2rem;
  }

  .section-philosophy .philosophy-text {
    max-width: 70%;
    font-size: 1.125rem;
  }
}

@media (min-width: 1024px) {
  .section-philosophy {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .section-philosophy .philosophy-quote {
    max-width: 65%;
    font-size: 2.5rem;
  }

  .section-philosophy .philosophy-text {
    max-width: 60%;
  }
}

/* ---- PILLARS SECTION — EDITORIAL LAYOUT ---- */
/* 
   Comfortable reading width, no hyphenation, clear hierarchy.
   Mobile: 1 pillar per screen. Desktop: 3 columns.
*/

/* Grid Layout */
.pillars-grid {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  /* Generous vertical spacing */
}

@media (min-width: 1024px) {
  .pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 columns - all pillars on same line */
    gap: 3rem;
  }
}

/* Individual Pillar */
.pillar-item {
  max-width: 100%;
  text-align: left;
  -webkit-hyphens: none;
  /* NEVER hyphenate */
  hyphens: none;
  word-break: normal;
}

@media (min-width: 768px) {
  .pillar-item {
    max-width: 90%;
  }
}

@media (min-width: 1024px) {
  .pillar-item {
    max-width: 100%;
  }
}

/* Pillar Number - Very Discrete */
.pillar-number {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-muted);
  opacity: 0.5;
  margin-bottom: 1.5rem;
  letter-spacing: 0.1em;
}

@media (min-width: 768px) {
  .pillar-number {
    font-size: 1.125rem;
  }
}

/* Pillar Title */
.pillar-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text-main);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .pillar-title {
    font-size: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .pillar-title {
    font-size: 2rem;
  }
}

/* Pillar Intention - Short, Strong */
.pillar-intention {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
  /* Increased from 1rem */
  color: #C39F5F;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .pillar-intention {
    font-size: 1.25rem;
    /* Increased from 1.125rem */
    margin-bottom: 2rem;
  }
}

/* Pillar Text - Comfortable Reading */
.pillar-text {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  /* Increased from 1rem */
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.8;
  max-width: 95%;
  /* Reduced by 5% per user request */
  -webkit-hyphens: none;
  hyphens: none;
}

@media (min-width: 768px) {
  .pillar-text {
    font-size: 1.125rem;
    /* Increased from 1.0625rem */
    line-height: 1.85;
  }
}

/* ============================================
   IMAGE BREATHING ZONES
   ============================================ */
/* 
   Visual punctuation - silences, not illustrations.
   Subtle, muted, large, surrounded by space.
*/

.image-breathing-zone {
  background: var(--bg-main);
}

.image-breathing-zone img {
  filter: grayscale(20%) contrast(0.95);
  transition: opacity 0.5s ease;
}

/* ============================================
   LA TRAVERSÉE - TWO COLUMN ALWAYS (EDITORIAL CHOICE)
   ============================================ */
/* 
   Intentional design: Two columns maintained even on mobile.
   Text narrative left (65-70%), Phases right (30-35%).
   The phases serve as a constant compass/anchor.
*/

.section-traversee {
  min-height: 0;
}

/* Forced Two Column Grid - ALL Screen Sizes */
.traversee-grid {
  display: grid;
  grid-template-columns: 58% 42%;
  /* Mobile: more space for phases */
  gap: 1rem;
  align-items: start;
}

/* Tablet: slightly more gap */
@media (min-width: 768px) {
  .traversee-grid {
    grid-template-columns: 55% 45%;
    gap: 2rem;
  }
}

/* Desktop: more comfortable proportions */
@media (min-width: 1024px) {
  .traversee-grid {
    grid-template-columns: 55% 45%;
    gap: 4rem;
    align-items: center;
  }
}

/* Left Column: Narrative Text */
.traversee-text {
  padding-right: 0.5rem;
}

@media (min-width: 768px) {
  .traversee-text {
    padding-right: 1rem;
  }
}

/* Right Column: Phases - Silent Anchor */
.traversee-phases {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-left: 1rem;
  /* Spacing only, no border */
}

@media (min-width: 768px) {
  .traversee-phases {
    gap: 1.5rem;
    padding-left: 2rem;
  }
}

@media (min-width: 1024px) {
  .traversee-phases {
    gap: 2rem;
    padding-left: 3rem;
  }
}

/* Individual Phase */
.traversee-phase {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-bottom: 1rem;
  /* No border - separation by space only */
}

.traversee-phase:last-child {
  padding-bottom: 0;
}

/* Phase Number - Very Discreet */
.traversee-phase-number {
  font-size: 0.7rem;
  /* Larger on mobile */
  font-weight: 600;
  letter-spacing: 0.15em;
  color: #C39F5F;
  opacity: 0.8;
}

@media (min-width: 768px) {
  .traversee-phase-number {
    font-size: 0.7rem;
  }
}

/* Phase Title - Serif, Calm */
.traversee-phase-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  /* Larger on mobile */
  font-weight: 400;
  color: var(--text-main);
  line-height: 1.3;
}

@media (min-width: 768px) {
  .traversee-phase-title {
    font-size: 1.125rem;
  }
}

@media (min-width: 1024px) {
  .traversee-phase-title {
    font-size: 1.25rem;
  }
}

/* ---- RESPONSIVE UPSCALE RULES ---- */
/* Add space not content as screens get larger */

/* Base section padding - REMOVED global horizontal padding */
/* Each section's content wrapper handles its own horizontal padding */
/* This prevents the 64px offset on hero and allows proper alignment with header */

/* Ultra-wide: NO automatic centering - sections manage themselves */
/* REMOVED: max-width: 1400px on section>div was causing 260px offset */

/* ---- TESTIMONIAL SECTION ---- */
/* Breathing pause - emotional moment */
.section-testimonial {
  padding-top: 5rem;
  padding-bottom: 5rem;
  min-height: 60vh;
  /* Elevated importance */
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-testimonial .content-block {
  text-align: center;
}

.section-testimonial blockquote {
  max-width: 90%;
  margin: 0 auto;
}

.section-testimonial .testimonial-author {
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .section-testimonial {
    padding-top: 6rem;
    padding-bottom: 6rem;
    min-height: 70vh;
  }

  .section-testimonial blockquote {
    max-width: 75%;
  }
}

@media (min-width: 1024px) {
  .section-testimonial {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .section-testimonial blockquote {
    max-width: 65%;
  }
}

/* ---- PRE-FOOTER / FINAL CTA ---- */
/* Conclusion before the signature */
.section-prefooter {
  padding-top: 4rem;
  padding-bottom: 4rem;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .section-prefooter {
    padding-top: 5rem;
    padding-bottom: 5rem;
    min-height: 60vh;
  }
}

@media (min-width: 1024px) {
  .section-prefooter {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* ---- SECTION TRANSITIONS ---- */
/* Visual anchors between sections */
.section-divider {
  width: 2.5rem;
  height: 1px;
  background: var(--accent);
  margin: 0 auto;
  opacity: 0.6;
}

/* ---- FOOTER MOBILE/DESKTOP ---- */
/* Minimal on mobile, signature on desktop */
.site-footer {
  padding: 2rem 1.5rem;
}

.site-footer .footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}

.site-footer .footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-footer .footer-links a {
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .site-footer {
    padding: 2.5rem 2rem;
  }

  .site-footer .footer-links {
    flex-direction: row;
    gap: 2rem;
  }
}

@media (min-width: 1024px) {
  .site-footer {
    padding: 3rem 3rem;
  }

  .site-footer .footer-content {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ============================================
   GOLD ITALIC ACCENT — TYPOGRAPHIC SIGNATURE
   ============================================ */
/* 
   Usage Rules:
   - One accent per section maximum
   - Single word in titles, short phrases, citations
   - Never for full titles, paragraphs, lists, navigation
   - If removing it doesn't lose subtlety, don't use it
*/

.accent-gold-italic {
  font-family: var(--font-serif);
  font-style: italic;
  color: #C39F5F;
  font-size: 0.95em;
  /* Slightly smaller than surrounding text */
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Ensure it breathes - add subtle spacing */
.accent-gold-italic::before {
  content: ' ';
  letter-spacing: 0.05em;
}

.accent-gold-italic::after {
  content: ' ';
  letter-spacing: 0.05em;
}

/* Remove extra spacing when at start/end of element */
h1>.accent-gold-italic:first-child::before,
h2>.accent-gold-italic:first-child::before,
h3>.accent-gold-italic:first-child::before,
p>.accent-gold-italic:first-child::before {
  content: '';
}

h1>.accent-gold-italic:last-child::after,
h2>.accent-gold-italic:last-child::after,
h3>.accent-gold-italic:last-child::after,
p>.accent-gold-italic:last-child::after {
  content: '';
}

/* Mobile: ensure single line, proper contrast */
@media (max-width: 768px) {
  .accent-gold-italic {
    font-size: 0.9em;
    display: inline;
    /* Never create line breaks */
  }
}

/* ============================================
   PREMIUM MOBILE MENU — ANTICHAMBRE
   ============================================ */

/* Menu Overlay */
.mobile-menu-overlay {
  will-change: transform;
}

.mobile-menu-overlay.menu-open {
  transform: translateX(0) !important;
}

/* Menu Header */
.mobile-menu-header {
  padding-top: 1rem;
}

/* Menu Content - Centered vertically but left aligned */
.mobile-menu-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 1rem;
}

/* Manifesto Phrase */
.mobile-menu-manifesto {
  max-width: 280px;
  font-size: 1.125rem;
  line-height: 1.5;
}

/* Navigation Links */
.mobile-menu-nav {
  margin-top: 0;
}

.mobile-menu-link {
  position: relative;
  padding: 0.5rem 0;
  display: inline-block;
}

/* Gold underline on hover */
.mobile-menu-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #C39F5F;
  transition: width 0.4s ease;
}

.mobile-menu-link:hover::after,
.mobile-menu-link:focus::after {
  width: 100%;
}

/* Contact link accent */
.mobile-menu-link-accent {
  margin-top: 0;
  padding-left: 0 !important;
}

.mobile-menu-link-accent span:last-child {
  transition: transform 0.3s ease;
}

.mobile-menu-link-accent:hover span:last-child {
  transform: translateX(4px);
}

/* Menu Footer */
.mobile-menu-footer {
  padding-bottom: 1rem;
}

/* Burger to X transformation */
#mobileNavToggle[aria-expanded="true"] span:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
  width: 1.5rem;
}

#mobileNavToggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

#mobileNavToggle[aria-expanded="true"] span:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
  width: 1.5rem;
}

#mobileNavToggle span {
  transition: all 0.4s ease;
}

/* ============================================
   TESTIMONIALS CAROUSEL
   ============================================ */
.testimonial-slides {
  position: relative;
  min-height: 180px;
}

.testimonial-slide {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s;
}

.testimonial-slide.active {
  opacity: 1;
  visibility: visible;
  position: relative;
  transform: translateY(0);
}

.testimonial-dot {
  cursor: pointer;
  border: none;
  outline: none;
}

.testimonial-dot.active {
  background-color: #C39F5F !important;
  transform: scale(1.3);
}

/* ============================================
   ABOUT-SPECIFIC CSS - Styles uniquement pour about.html
   ============================================ */

/* Mission Section - Amélioration esthétique */
section:has(.mission-section) {
  position: relative;
}

section:has(.mission-section)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180, 138, 60, 0.3), transparent);
}

/* Amélioration de l'espacement des mots en gras */
strong {
  display: inline-block;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Style texte doré pour les titres en italique */
strong.serif-font.italic {
  color: #B48A3C !important;
  display: inline;
  line-height: inherit;
}

/* Texte blanc en dark mode, bleu en light mode */


/* Light mode default for text-white is dark blue */
.text-white {
  color: #091A30 !important;
}

@keyframes shimmer-text {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@keyframes shimmer-text-large {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@keyframes particle-float {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.6;
  }

  50% {
    transform: translate(30px, -50px) scale(1.5);
    opacity: 1;
  }
}

.mission-badge-epic {
  opacity: 1;
  transform: translateY(0) scale(1);
  will-change: transform, opacity;
}

.mission-title-epic {
  position: relative;
  width: 100%;
  overflow: visible;
  padding: 0 2rem;
}

.mission-title-line {
  overflow: visible;
  line-height: 0.85;
  width: 100%;
  word-wrap: break-word;
  padding: 0;
  word-break: keep-all;
}

@media (min-width: 1024px) {
  .mission-title-line {
    font-size: clamp(3rem, 8vw, 6rem) !important;
  }
}

@media (max-width: 768px) {
  .mission-title-line {
    font-size: clamp(2.5rem, 10vw, 4rem) !important;
    line-height: 0.9 !important;
  }
}

.mission-title-word {
  display: inline-block;
  opacity: 1;
  transform: translateY(0) rotateX(0);
  transform-origin: bottom;
  will-change: transform, opacity;
  white-space: nowrap;
  word-break: keep-all;
  overflow: visible;
}

.mission-subtitle {
  overflow: visible;
  width: 100%;
}

@media (min-width: 1024px) {
  .mission-subtitle {
    font-size: clamp(2rem, 6vw, 4rem) !important;
  }
}

@media (max-width: 768px) {
  .mission-subtitle {
    font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
  }
}

.mission-subtitle .mission-title-word {
  transform: translateY(0) scale(1);
  opacity: 1;
  white-space: nowrap;
}

.mission-tagline {
  overflow: visible;
  width: 100%;
  max-width: 100%;
}

@media (min-width: 1024px) {
  .mission-tagline {
    font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
  }
}

@media (max-width: 768px) {
  .mission-tagline {
    font-size: clamp(1.25rem, 5vw, 2rem) !important;
  }
}

.mission-tagline .mission-title-word {
  transform: translateY(0);
  opacity: 1;
  white-space: nowrap;
}

.mission-glow {
  background: linear-gradient(135deg, var(--accent) 0%, rgba(180, 138, 60, 0.8) 50%, var(--accent) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-text 3s ease-in-out infinite;
  font-weight: 800;
}

.mission-part-2 {
  position: absolute;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mission-text-column {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.mission-text-block {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.mission-text-line {
  display: block;
  opacity: 1;
  transform: translateX(0);
  will-change: transform, opacity;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

@media (min-width: 1024px) {
  .mission-text-line {
    font-size: clamp(1.25rem, 3vw, 2rem) !important;
  }
}

@media (max-width: 768px) {
  .mission-text-line {
    font-size: clamp(1.125rem, 4vw, 1.5rem) !important;
  }
}

.mission-emphasis {
  font-weight: 700;
  color: var(--text-main);
  font-size: 1.1em;
  position: relative;
  display: inline-block;
  margin: 0 0.15em;
  padding: 0.05em 0.2em;
  background: linear-gradient(180deg, transparent 55%, rgba(180, 138, 60, 0.3) 55%, rgba(180, 138, 60, 0.3) 90%, transparent 90%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  line-height: 1.4;
}

.mission-visual-column {
  position: relative;
  height: 600px;
}

@media (min-width: 1024px) {
  .mission-visual-column {
    height: 400px;
  }
}

@media (max-width: 768px) {
  .mission-visual-column {
    height: 300px;
  }
}

.mission-image-container {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.mission-image-parallax {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transform: scale(1.2);
}

.mission-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.mission-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0.6;
  animation: particle-float var(--duration) ease-in-out infinite;
  animation-delay: var(--delay);
  left: var(--x);
  top: var(--y);
  box-shadow: 0 0 20px var(--accent);
}

.mission-part-3 {
  position: absolute;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mission-text-flow {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.mission-text-flow-line {
  display: block;
  opacity: 1;
  transform: translateY(0) scale(1);
  will-change: transform, opacity;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

@media (max-width: 768px) {
  .mission-text-flow-line {
    font-size: clamp(1.125rem, 4vw, 1.5rem) !important;
  }
}

.mission-part-4 {
  position: absolute;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mission-finale {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.mission-finale-word {
  display: inline-block;
  opacity: 1;
  transform: translateY(0) rotateY(0);
  transform-origin: center;
  will-change: transform, opacity;
  white-space: nowrap;
  word-wrap: break-word;
}

@media (max-width: 768px) {
  .mission-finale-word {
    font-size: clamp(2rem, 8vw, 3rem) !important;
  }
}

.mission-glow-large {
  background: linear-gradient(135deg, var(--accent) 0%, rgba(180, 138, 60, 0.9) 30%, var(--accent) 60%, rgba(180, 138, 60, 0.9) 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-text-large 4s ease-in-out infinite;
  font-weight: 900;
  text-shadow: 0 0 40px rgba(180, 138, 60, 0.3);
}

.mission-brand-section {
  margin-top: 6rem;
}

.mission-brand-text {
  font-weight: 800;
  color: var(--accent);
  font-size: 1.2em;
  letter-spacing: 0.1em;
}

.mission-finale-line {
  display: block;
  opacity: 1;
  transform: translateY(0);
  will-change: transform, opacity;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

.team-card-inner {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-card:hover .team-card-inner {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  border-color: var(--accent);
}

.mission-hero-bg,
.mission-gradient-bg {
  background: linear-gradient(90deg, #091A30 0%, #B48A3C 50%, #091A30 100%);
}

/* ============================================
   RESPONSIVE FIXES - About Page
   ============================================ */

/* Mots en gras - Taille adaptée mobile */
@media (max-width: 768px) {
  strong.serif-font {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    display: block;
    margin: 0.5rem 0 !important;
  }

  .sticky {
    position: relative !important;
    top: auto !important;
  }

  .grid.md\:grid-cols-2 {
    gap: 2rem !important;
  }
}

@media (max-width: 480px) {
  strong.serif-font {
    font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
  }

  h1,
  h2 {
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  /* ADN Cards */
  .grid.md\:grid-cols-3 {
    gap: 1.5rem !important;
  }
}

/* ============================================
   SERVICES-SPECIFIC CSS
   Styles spécifiques à la page Services.html
   ============================================ */

/* ============================================
   LIQUID GLASS EFFECT
   ============================================ */

.liquid-glass-card {
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.liquid-glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.1),
      transparent);
  transition: left 0.6s ease;
}

.liquid-glass-card:hover::before {
  left: 100%;
}

.liquid-glass-card:hover {
  transform: translateY(-4px);
  border-color: rgba(180, 138, 60, 0.3);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(180, 138, 60, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
}

/* Light theme adjustments (Default) */
.liquid-glass-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(180, 138, 60, 0.15);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.liquid-glass-card:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(180, 138, 60, 0.25);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(180, 138, 60, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

/* Animation de brillance au survol */
@keyframes liquid-shine {
  0% {
    transform: translateX(-100%) translateY(-100%);
  }

  100% {
    transform: translateX(100%) translateY(100%);
  }
}

.liquid-glass-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg,
      transparent 30%,
      rgba(255, 255, 255, 0.1) 50%,
      transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.liquid-glass-card:hover::after {
  opacity: 1;
  animation: liquid-shine 1.5s ease-in-out;
}

/* Container defined in common.css */

.serif-text {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
}

.highlight-text {
  background-image: linear-gradient(120deg, var(--accent) 0%, var(--accent) 100%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0 85%;
  -webkit-background-clip: text;
  background-clip: text;
  color: rgba(0, 0, 0, 0.2);
  transition: background-size 1s cubic-bezier(0.22, 1, 0.36, 1), color 0.5s ease;
}

.underline-highlight {
  position: relative;
  display: inline-block;
}

.underline-highlight::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 0%;
  height: 0.4em;
  background-color: var(--accent);
  opacity: 0.3;
  z-index: -1;
  transition: width 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}

.underline-highlight.is-visible::after {
  width: 100%;
}

.underline-highlight-delayed::after {
  transition-delay: 0.2s;
}

.logo-evolution-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.logo-sketch {
  position: absolute;
  inset: 0;
  filter: grayscale(100%) contrast(1.2) brightness(1.1);
  opacity: 1;
  overflow: hidden;
}

.logo-sketch::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(180, 138, 60, 0.1) 0%, transparent 70%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
  z-index: 1;
  pointer-events: none;
  opacity: 0.6;
  mix-blend-mode: overlay;
}

.logo-final {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  z-index: 2;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.2));
}

.scan-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--accent);
  z-index: 3;
  box-shadow: 0 0 15px var(--accent);
  opacity: 0;
}

.tech-grid-bg {
  background-image: linear-gradient(var(--border-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-color) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(circle at center, black 50%, transparent 100%);
  mask-image: radial-gradient(circle at center, black 50%, transparent 100%);
}

/* ============================================
   BROWSER WINDOW COMPONENT - Clean Rebuild
   ============================================ */

/* Browser Window Container */
.browser-window {
  background: #1a1a2e;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  height: 500px;
  position: relative;
}

@media (min-width: 1536px) {
  .browser-window {
    height: 700px;
  }
}

/* Title Bar */
.browser-titlebar {
  height: 44px;
  background: #0f0f1a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
}

/* Traffic Lights */
.traffic-lights {
  display: flex;
  gap: 8px;
}

.light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.light-red {
  background: #ff5f57;
}

.light-yellow {
  background: #febc2e;
}

.light-green {
  background: #28c840;
}

/* URL Bar */
.browser-url {
  margin-left: 12px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Content Area */
.browser-content {
  position: relative;
  height: calc(100% - 44px);
}

/* Layer Base */
.layer {
  position: absolute;
  inset: 0;
  padding: 24px;
  transition: opacity 0.5s ease, filter 0.5s ease;
}

/* Code Layer */
.layer-code {
  z-index: 10;
}

.code-block {
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  white-space: pre;
  overflow-x: auto;
  margin: 0;
  padding: 0;
  background: transparent;
}

.code-block code {
  display: block;
}

/* Syntax Highlighting - Premium Palette */
.code-comment {
  color: #6b7280;
  font-style: italic;
}

.code-keyword {
  color: #d4a574;
}

.code-function {
  color: #e8d5c4;
}

.code-tag {
  color: #b48a3c;
}

.code-attr {
  color: #9ca3af;
}

.code-string {
  color: #a8c5a0;
}

.code-status {
  margin-top: 24px;
  font-family: 'SF Mono', monospace;
  font-size: 13px;
  color: #4ade80;
}

/* UI Layer */
.layer-ui {
  z-index: 5;
  opacity: 0;
  filter: blur(10px);
  transform: scale(0.95);
  background: linear-gradient(135deg, #1a1a2e 0%, #16162a 100%);
}

/* Mini Landing Page */
.mini-landing {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 20px;
}

.mini-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mini-logo {
  width: 80px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.mini-nav {
  display: flex;
  gap: 16px;
}

.mini-nav span {
  width: 48px;
  height: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.mini-hero {
  padding: 20px 0;
}

.mini-title {
  width: 70%;
  height: 28px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  margin-bottom: 12px;
}

.mini-subtitle {
  width: 50%;
  height: 16px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
}

.mini-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  flex: 1;
}

.mini-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mini-card-icon {
  width: 32px;
  height: 32px;
  background: rgba(180, 138, 60, 0.2);
  border-radius: 8px;
}

.mini-card:last-child .mini-card-icon {
  background: rgba(96, 165, 250, 0.2);
}

.mini-card-text {
  width: 80%;
  height: 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

.mini-cta {
  background: linear-gradient(135deg, #b48a3c 0%, #d4a574 100%);
  color: white;
  font-weight: 600;
  font-size: 16px;
  padding: 16px 24px;
  border-radius: 12px;
  text-align: center;
  margin-top: auto;
}

.swiss-grid-item {
  border-top: 1px solid var(--border-color);
  padding-top: 3rem;
  transition: border-color 0.3s;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.swiss-grid-item:hover {
  border-color: var(--accent);
}

/* ============================================
   RESPONSIVE FIXES - Services Page
   ============================================ */

/* Images hauteur adaptative */
@media (max-width: 1023px) {

  .h-\[600px\],
  .h-\[800px\],
  .lg\:h-\[600px\],
  .lg\:h-\[800px\] {
    height: clamp(300px, 50vw, 450px) !important;
  }
}

@media (max-width: 768px) {

  .h-\[600px\],
  .h-\[800px\] {
    height: clamp(250px, 60vw, 350px) !important;
  }

  /* Grilles services */
  .grid.lg\:grid-cols-2 {
    gap: 2rem !important;
  }

  /* Texte services */
  .text-6xl,
  .text-7xl {
    font-size: clamp(2rem, 8vw, 3rem) !important;
  }
}

@media (max-width: 480px) {

  .h-\[600px\],
  .h-\[800px\] {
    height: clamp(200px, 55vw, 280px) !important;
  }

}

/* ============================================
   BROWSER WINDOW - MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .browser-window {
    height: 380px;
    border-radius: 12px;
  }

  .browser-titlebar {
    height: 36px;
    padding: 0 12px;
    gap: 8px;
  }

  .light {
    width: 8px;
    height: 8px;
  }

  .browser-url {
    font-size: 10px;
    padding: 4px 8px;
    max-width: 120px;
  }

  .layer {
    padding: 16px;
  }

  .code-block {
    font-size: 11px;
    line-height: 1.5;
  }

  .code-status {
    font-size: 10px;
    margin-top: 16px;
  }

  .mini-hero {
    padding: 12px 0;
  }

  .mini-title {
    height: 20px;
  }

  .mini-subtitle {
    height: 12px;
  }

  .mini-cards {
    gap: 10px;
  }

  .mini-card {
    padding: 12px;
    border-radius: 8px;
  }

  .mini-card-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
  }

  .mini-cta {
    font-size: 14px;
    padding: 12px 16px;
    border-radius: 8px;
  }
}

@media (max-width: 480px) {
  .browser-window {
    height: 320px;
    margin: 0 -8px;
    border-radius: 10px;
  }

  .browser-titlebar {
    height: 32px;
    padding: 0 10px;
  }

  .traffic-lights {
    gap: 6px;
  }

  .light {
    width: 6px;
    height: 6px;
  }

  .browser-url {
    display: none;
  }

  .layer {
    padding: 12px;
  }

  .code-block {
    font-size: 9px;
    line-height: 1.4;
  }

  .code-status {
    font-size: 9px;
  }

  .mini-cta {
    font-size: 12px;
    padding: 10px 12px;
  }
}

/* ============================================
   CONTACT-SPECIFIC CSS - Styles uniquement pour contact.html
   ============================================ */
/* NOTE: Font inheritance is now handled globally in common.css */

.form-input {
  width: 100%;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.125rem 1.25rem;
  outline: none;
  transition: all 0.3s ease;
  color: var(--text-main);
  font-weight: 400;
  font-size: 1rem;
  font-family: var(--font-sans);
}

.form-input:hover {
  border-color: rgba(180, 138, 60, 0.3);
}

.form-input:focus {
  border-color: #B48A3C;
  background: var(--bg-main);
  box-shadow: 0 0 0 3px rgba(180, 138, 60, 0.1);
}

/* Placeholder cohérent avec le thème */
.form-input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
  font-weight: 300;
}

/* Labels cohérents */
.form-label {
  color: var(--text-muted);
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* Select avec icône déroulante */
.form-select-wrapper {
  position: relative;
  width: 100%;
}

.form-select-wrapper::after {
  content: '';
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--text-muted);
  pointer-events: none;
  transition: all 0.3s ease;
}

.form-select-wrapper:focus-within::after {
  border-top-color: #B48A3C;
}

.form-select-wrapper select {
  padding-right: 3rem;
  cursor: pointer;
}

/* Option du select */
.form-input option {
  background: var(--bg-main);
  color: var(--text-main);
  padding: 1rem;
}

/* ============================================
   RESPONSIVE FIXES - Contact Page
   ============================================ */

@media (max-width: 768px) {

  /* Grille formulaire */
  .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Formulaire padding */
  .p-10,
  .md\:p-16 {
    padding: clamp(1.5rem, 5vw, 2rem) !important;
  }

  /* Cards arrondies */
  .rounded-\[60px\] {
    border-radius: clamp(24px, 6vw, 40px) !important;
  }

  /* Info contacts */
  .flex.items-center.gap-8 {
    gap: 1rem !important;
  }

  .w-16.h-16 {
    width: 3rem !important;
    height: 3rem !important;
    min-width: 3rem !important;
  }

  .w-16.h-16 i {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  .text-2xl {
    font-size: clamp(1rem, 4vw, 1.25rem) !important;
  }
}

@media (max-width: 480px) {

  /* Hero titre */
  .text-6xl,
  .md\:text-9xl {
    font-size: clamp(2rem, 10vw, 3rem) !important;
  }

  /* Espacement sections */
  .gap-24 {
    gap: 2rem !important;
  }

  /* Image hauteur */
  .h-\[480px\] {
    height: clamp(200px, 50vw, 300px) !important;
  }

  /* Bouton submit */
  .py-6 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .text-xl {
    font-size: 1rem !important;
  }
}

/* ============================================
   TESTIMONIALS CAROUSEL
   ============================================ */
.testimonial-slides {
  position: relative;
  min-height: 200px;
}

.testimonial-slide {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s;
}

.testimonial-slide.active {
  opacity: 1;
  visibility: visible;
  position: relative;
  transform: translateY(0);
}

.testimonial-dot {
  cursor: pointer;
  border: none;
  outline: none;
}

.testimonial-dot.active {
  background-color: #B48A3C !important;
  transform: scale(1.3);
}

/* ============================================
   CREER-MA-MARQUE CSS - HARMONIZED
   Aligned with AB Odyssée global design direction
   Premium, minimal, elegant aesthetic
   ============================================ */

/* Container defined in common.css */

.serif-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* ============================================
   TIMELINE - Refined, Discreet
   ============================================ */

.process-timeline {
  position: relative;
  padding: 3rem 0;
}

/* Timeline Line - Subtle, thin */
.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 0%;
  background: rgba(195, 159, 95, 0.3);
  transform: translateX(-50%);
  z-index: 1;
  will-change: height;
}

/* Remove heavy pulsing orb */
.timeline-line::before {
  display: none;
}

/* Timeline Step - Compact spacing */
.timeline-step {
  position: relative;
  margin-bottom: 4rem;
  opacity: 0;
  visibility: hidden;
}

.timeline-step.active {
  opacity: 1;
  visibility: visible;
}

/* Show step1 by default */
.timeline-step#step1 {
  opacity: 1 !important;
  visibility: visible !important;
}

.timeline-step#step1 .step-text,
.timeline-step#step1 .step-visual,
.timeline-step#step1 .step-icon {
  opacity: 1 !important;
  transform: none !important;
}

.step-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* Step Number - Compact, discreet */
.step-number {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(195, 159, 95, 0.15);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 10;
  border: 1px solid rgba(195, 159, 95, 0.3);
  pointer-events: none;
}

/* Step Visual - Compact, lighter */
.step-visual {
  position: relative;
  height: 280px;
  border-radius: 1rem;
  overflow: hidden;
  background: rgba(245, 240, 225, 0.5);
  border: 1px solid rgba(195, 159, 95, 0.1);
  transform: scale(0.95);
  opacity: 0;
  transition: all 0.6s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  margin: 0.25rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-visual.active {
  transform: scale(1);
  opacity: 1;
  border-color: rgba(195, 159, 95, 0.2);
}

.step-text {
  padding: 2rem 1.5rem;
  transform: translateX(-30px);
  opacity: 0;
  transition: all 0.6s ease;
}

.step-text.active {
  transform: translateX(0);
  opacity: 1;
}

.step-text.right {
  transform: translateX(30px);
}

.step-text.right.active {
  transform: translateX(0);
}

.step-text h3 {
  margin-bottom: 0.75rem;
}

/* Fix alignment */
.step-text .flex.items-center h3 {
  margin-bottom: 0 !important;
}

.step-text ul li {
  transition: all 0.4s ease;
}

.step-icon {
  font-size: 3rem;
  color: var(--accent);
  margin-bottom: 1rem;
  display: inline-block;
}

#step3 .step-visual {
  height: clamp(320px, 45vh, 400px);
  min-height: clamp(320px, 45vh, 400px);
}

/* ============================================
   BENTO GRID - Lighter, more breathing room
   ============================================ */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  padding: 1rem;
  grid-auto-flow: row dense;
  align-items: stretch;
}

.bento-item {
  border-radius: 0.75rem;
  padding: 0.75rem;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  background: rgba(245, 240, 225, 0.4);
  border: none;
  transition: transform 0.3s ease;
  overflow: hidden;
  text-align: center !important;
  box-sizing: border-box;
  width: 100%;
  gap: 0.35rem;
  min-height: 80px;
}

.bento-item:hover {
  transform: translateY(-2px);
}

.bento-item>* {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.bento-item i,
.bento-item svg,
.bento-item [data-lucide] {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  margin: 0 auto !important;
  display: block !important;
  flex-shrink: 0;
  opacity: 0.7;
}

.bento-item h4 {
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0 auto;
  line-height: 1.2;
  text-align: center;
  width: 100%;
  display: block;
  color: var(--text-main);
}

.bento-item p {
  font-size: 0.625rem;
  line-height: 1.3;
  color: var(--text-muted);
  opacity: 0.8;
}

/* Bento item positions */
.bento-item-colors {
  grid-column: 1;
  grid-row: 1;
}

.bento-item-typography {
  grid-column: 2;
  grid-row: 1;
}

.bento-item-icons {
  grid-column: 3;
  grid-row: 1;
}

.bento-item-apps {
  grid-column: 1;
  grid-row: 2;
}

.bento-item-mockups {
  grid-column: 2 / span 2;
  grid-row: 2;
}

/* ============================================
   LOGO ELEMENTS - Refined
   ============================================ */

.logo-sketch {
  width: 160px;
  height: 160px;
  border: 2px dashed rgba(26, 46, 71, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--text-muted);
  opacity: 0.6;
}

.logo-final {
  width: clamp(100px, 12vw, 160px);
  height: clamp(100px, 12vw, 160px);
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.5rem;
  box-shadow: 0 8px 30px rgba(195, 159, 95, 0.25);
}

/* ============================================
   SERVICE SECTIONS - Refined
   ============================================ */

.service-icon {
  transform: scale(1);
  transition: transform 0.4s ease;
  opacity: 0.8;
}

.service-image {
  transform: scale(0.98);
  opacity: 0.9;
  transition: all 0.6s ease;
}

[data-service].active .service-image {
  transform: scale(1);
  opacity: 1;
}

[data-service] ul li {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.4s ease;
}

/* Check icons - thinner, less prominent */
[data-service] ul li i {
  opacity: 0.6;
  width: 1rem;
  height: 1rem;
}

/* ============================================
   STEP ICON CONTAINER - Refined
   ============================================ */

.step-icon-container {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background-color: rgba(195, 159, 95, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-icon-container i {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent);
  opacity: 0.7;
}

.step-visual-text {
  color: var(--text-main);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.3;
}

/* ============================================
   RESPONSIVE - Mobile harmonization
   ============================================ */

@media (max-width: 768px) {
  .process-timeline {
    padding: 3rem 0 !important;
  }

  .timeline-step {
    margin-bottom: 4rem !important;
  }

  .step-content {
    grid-template-columns: 1fr;
    gap: 2rem !important;
    padding-left: 3rem;
  }

  .step-text {
    transform: translateY(20px);
    padding: 1.5rem 1rem !important;
  }

  .step-text.right {
    transform: translateY(20px);
  }

  .step-text h3 {
    font-size: 1.5rem !important;
  }

  .step-visual {
    height: auto !important;
    min-height: 280px !important;
  }

  .timeline-line {
    left: 1.5rem;
  }

  .step-number {
    left: 1.5rem;
    width: 28px !important;
    height: 28px !important;
    font-size: 0.75rem !important;
  }

  .step-content>div:first-child {
    order: 2;
  }

  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 0.5rem;
    padding: 1rem;
  }

  .bento-item-colors,
  .bento-item-typography,
  .bento-item-icons,
  .bento-item-apps {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .bento-item-mockups {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}

@media (max-width: 480px) {
  .process-timeline {
    padding: 2rem 0 !important;
  }

  .timeline-step {
    margin-bottom: 3rem !important;
  }

  .step-content {
    gap: 1.5rem !important;
    padding-left: 2.5rem;
  }

  .step-text {
    padding: 1rem 0.75rem !important;
  }

  .step-text h3 {
    font-size: 1.25rem !important;
  }

  .step-visual {
    min-height: 220px !important;
    border-radius: 1rem !important;
    padding: 1rem !important;
  }

  #step3 .step-visual {
    height: auto;
    min-height: 260px !important;
  }

  .step-number {
    left: 1.25rem;
    width: 24px !important;
    height: 24px !important;
    font-size: 0.625rem !important;
  }

  .timeline-line {
    left: 1.25rem;
  }

  .bento-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 0.75rem;
  }

  .bento-item {
    padding: 1rem;
  }

  .bento-item-colors,
  .bento-item-typography,
  .bento-item-icons,
  .bento-item-apps,
  .bento-item-mockups {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* ============================================
   HEADER ALIGNMENT - Consistent
   ============================================ */

.step-text .flex.items-center.gap-4,
[data-service] .flex.items-center.gap-4 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 1rem !important;
  margin-bottom: 1rem !important;
}

.step-text .flex.items-center.gap-4>div:first-child,
[data-service] .flex.items-center.gap-4>div:first-child {
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  flex-shrink: 0 !important;
  border-radius: 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  background: rgba(195, 159, 95, 0.1) !important;
}

.step-text .flex.items-center.gap-4 h3,
[data-service] .flex.items-center.gap-4 h3 {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  line-height: 1.2 !important;
  align-self: center !important;
}

/* Icon inside containers */
.step-text .flex.items-center.gap-4 i,
[data-service] .flex.items-center.gap-4 i {
  width: 1.25rem !important;
  height: 1.25rem !important;
  opacity: 0.8;
}

/* ============================================
   CODER-MON-PROJET-SPECIFIC CSS
   Styles spécifiques à la page coder-mon-projet.html
   ============================================ */

/* Container defined in common.css */

.serif-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.mono-text {
  font-family: var(--font-mono);
}

.code-block {
  background: #091A30;
  color: #FCF9EF;
  padding: 2rem;
  border-radius: 16px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  overflow-x: auto;
}

.code-line {
  display: block;
  margin-bottom: 0.5rem;
}

.token-const {
  color: #B48A3C;
}

.token-tag {
  color: #4aa7ff;
}

.token-attr {
  color: #9cdcfe;
}

.token-str {
  color: #ce9178;
}

/* ============================================
   RESPONSIVE FIXES - Coder Mon Projet
   ============================================ */

@media (max-width: 768px) {

  /* Grilles */
  .grid.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Code blocks */
  .code-block {
    padding: 1rem;
    font-size: 0.75rem;
  }

  /* Titres */
  .text-6xl,
  .md\:text-8xl {
    font-size: clamp(2rem, 8vw, 3rem) !important;
  }

  .text-5xl,
  .md\:text-6xl {
    font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
  }
}

@media (max-width: 480px) {

  /* Cards tech */
  .p-8 {
    padding: 1.25rem !important;
  }

  .rounded-3xl {
    border-radius: 1rem !important;
  }

  /* Icons */
  .w-16.h-16 {
    width: 3rem !important;
    height: 3rem !important;
  }

  .w-8.h-8 {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
}

/* STRICT ALIGNMENT FOR HEADERS WITH ICONS */
.space-y-16 .flex.items-center.gap-4 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 1.5rem !important;
  /* Standardisé à 1.5rem partout */
  margin-bottom: 1.5rem !important;
}

/* Force icon container size */
.space-y-16 .flex.items-center.gap-4>div:first-child {
  width: 3rem !important;
  height: 3rem !important;
  min-width: 3rem !important;
  min-height: 3rem !important;
  flex-shrink: 0 !important;
  border-radius: 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

/* Force text alignment inside header */
.space-y-16 .flex.items-center.gap-4 h3 {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  line-height: 1.2 !important;
  align-self: center !important;
}

/* PROCESS SECTION MOBILE OPTIMIZATIONS */
@media (max-width: 768px) {

  /* Images CARRÉES sur mobile (FIX pour correspondre au mockup) */
  .space-y-20 .h-\[400px\] {
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 300px !important;
    /* Limite largeur */
    aspect-ratio: 1 / 1 !important;
    /* Force le carré */
    margin: 0 auto !important;
    /* Centrer */
  }

  /* Garder les numéros d'étape grands sur mobile */
  .space-y-20 .text-6xl {
    font-size: 3.5rem !important;
    /* Assez grand pour contraster */
    line-height: 1 !important;
    flex-shrink: 0;
  }

  /* Ajuster l'alignement titre/numéro */
  .space-y-20 .flex.items-center.gap-4 {
    align-items: center !important;
    gap: 1rem !important;
  }

  .space-y-20 h3 {
    font-size: 1.75rem !important;
    /* Titre lisible */
    line-height: 1.2 !important;
  }
}

/* ============================================
   SECTION 4: RESPONSIVE FIXES
   ============================================ */

/* ============================================
   RESPONSIVE FIX CSS - Audit 2026-02-02
   AB Odyssée - Complete Responsive Repair
   ============================================
   
   This file contains systematic fixes for all
   responsive issues identified during the audit.
   
   TESTED BREAKPOINTS:
   - 320px, 360px, 375px, 390px, 412px, 428px (mobiles)
   - 480px, 600px (phablettes)
   - 768px, 820px (tablettes)
   - 1024px, 1280px, 1366px (laptops)
   - 1440px, 1536px, 1680px (desktop)
   - 1920px (large)
   
   ============================================ */

/* ============================================
   1. GLOBAL ANTI-OVERFLOW RULES
   ============================================ */

/* Prevent ALL horizontal overflow */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
  position: relative;
}

/* Global box-sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Images and media - Never overflow */
img,
video,
canvas,
svg,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* Long words - Never break layout */
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
a,
li,
td,
th,
label,
button {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ============================================
   2. TYPOGRAPHY - ORPHAN/WIDOW CONTROL
   ============================================ */

/* Prevent orphans and widows in paragraphs */
p {
  widows: 2;
  orphans: 2;
}

/* Hyphenation for French content */
html[lang="fr"] p,
html[lang="fr"] .text-muted,
html[lang="fr"] .hero-description {
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}

/* Titles - NO hyphenation, controlled breaks */
h1,
h2,
h3,
h4,
h5,
h6 {
  -webkit-hyphens: none;
  hyphens: none;
}

/* ============================================
   3. HEADER/NAV FIXES - Mobile Safe Area
   ============================================ */

/* Header - Safe lateral padding on mobile */
@media (max-width: 639px) {

  header,
  .header,
  #header-container header {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Logo and burger spacing */
  header nav,
  header .flex {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Language selector - More breathing room */
  .lang-switcher,
  [class*="lang-"] {
    margin-right: 0.5rem;
  }
}

/* ============================================
   4. GRID FIXES - FORCE MOBILE STACKING
   ============================================ */

/* MOBILE STACK UTILITY - Add this class to any grid for mobile stacking */
@media (max-width: 767px) {

  .mobile-stack,
  .mobile-stack.grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Higher specificity for stubborn grids */
  section .mobile-stack,
  div .mobile-stack {
    grid-template-columns: 1fr !important;
  }
}

/* RESPONSIVE STACK CLASS - Replaces md:grid-cols-3
   Mobile: 1 column | Tablet: 2 columns | Desktop: 3 columns */
.responsive-stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
}

@media (min-width: 768px) {
  .responsive-stack {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
}

@media (min-width: 1024px) {
  .responsive-stack {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Equal height cards within responsive-stack */
.responsive-stack>article,
.responsive-stack>div {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.responsive-stack>article {
  min-height: 100%;
}

/* Fallback for md: prefix grids - use !important cascade */
@media screen and (max-width: 767px) {

  /* Target any element with grid display that should stack */
  .grid {
    grid-template-columns: 1fr !important;
  }

  /* Exclude grids that should stay multi-column on mobile */
  .grid.grid-cols-2:not(.mobile-stack),
  .grid.grid-cols-4:not(.mobile-stack) {
    /* Restore 2-column for stats and other intentional grids */
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================
   5. TRAVERSÉE GRID - Overflow Fix
   ============================================ */

/* Force 1 column on mobile */
@media (max-width: 639px) {

  .traversee-grid,
  .grid.grid-cols-2.lg\\:grid-cols-4,
  #traversee .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Phase cards - Full width */
  .traversee-grid>*,
  #traversee .grid>* {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* 2 columns on tablet */
@media (min-width: 640px) and (max-width: 1023px) {

  .traversee-grid,
  .grid.grid-cols-2.lg\\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================
   6. OFFER CARDS - Mobile Readable
   ============================================ */

@media (max-width: 767px) {

  /* Force full width */
  article[class*="rounded-xl"],
  article[class*="rounded-3xl"] {
    width: 100% !important;
  }

  /* Card content - Readable spacing */
  article[class*="rounded-xl"] h3,
  article[class*="rounded-3xl"] h3 {
    font-size: 1.125rem !important;
    line-height: 1.3 !important;
  }

  /* Feature lists - Tighter */
  article ul.space-y-2 {
    gap: 0.5rem !important;
  }

  /* CTA buttons in cards - Min touch target */
  article a[class*="rounded-full"] {
    min-height: 44px;
    padding: 0.75rem 1rem !important;
  }
}

/* ============================================
   7. FAQ ACCORDION - Touch & Spacing
   ============================================ */

/* Ensure min touch target */
details summary {
  min-height: 44px;
  padding: 1rem;
  cursor: pointer;
}

/* Answer spacing */
details p {
  padding: 0 1rem 1rem 1rem;
}

/* Chevron alignment */
details summary i,
details summary svg {
  flex-shrink: 0;
}

/* ============================================
   8. CTA BUTTONS - Touch Target & Alignment
   ============================================ */

/* Minimum touch target size */
a[class*="btn"],
button[class*="btn"],
.hero-btn-primary,
.hero-btn-secondary,
a[class*="rounded-full"] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mobile - Stack and center button groups */
@media (max-width: 639px) {

  .flex.gap-4,
  .flex.gap-3,
  div[class*="flex"][class*="gap-"] {
    flex-wrap: wrap;
  }

  /* Hero buttons - Full width on very small screens */
  .hero-buttons,
  .flex.flex-col.sm\\:flex-row {
    width: 100%;
  }

  .hero-buttons a,
  .hero-buttons button {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================
   9. (REMOVED - Footer styles restored to original)
   ============================================ */

/* ============================================
   10. ULYSSE WIDGET - Position Fix
   ============================================ */

/* Prevent overlap with footer */
@media (max-width: 767px) {

  .ulysse-toggle,
  #ulysse-toggle {
    bottom: 40px !important;
    /* Reduced from 80px */
    right: 16px !important;
    z-index: 9998;
  }

  /* When dock is visible, more space */
  body:has(.dock-container) .ulysse-toggle,
  body:has(.dock-container) #ulysse-toggle {
    bottom: 100px !important;
  }
}

/* Desktop - Standard position */
@media (min-width: 768px) {

  .ulysse-toggle,
  #ulysse-toggle {
    bottom: 24px;
    right: 24px;
  }
}

/* ============================================
   11. SECTION SPACING - Consistent Rhythm
   ============================================ */

/* Mobile section padding */
@media (max-width: 639px) {
  section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* Hero - More vertical space */
  section.hero,
  .hero-section {
    padding-top: 6rem;
    padding-bottom: 3rem;
  }
}

/* Tablet */
@media (min-width: 640px) and (max-width: 1023px) {
  section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

/* ============================================
   12. TESTIMONIALS - Prevent Edge Collision
   ============================================ */

@media (max-width: 639px) {

  /* Testimonial author - Wrap if needed */
  .testimonial-author,
  [class*="testimonial"] span[class*="tracking"] {
    white-space: normal !important;
    word-break: break-word;
    font-size: 0.75rem;
    line-height: 1.4;
  }

  /* Testimonial card - Safe margin */
  .testimonial-card,
  [class*="testimonial"] {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
}

/* ============================================
   13. SERVICES PAGE - Expertise Cards
   ============================================ */

@media (max-width: 767px) {

  /* Force single column */
  .expertise-grid,
  .grid.md\\:grid-cols-3[class*="gap-x-12"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* ============================================
   14. CONTACT FORM - Button Visibility
   ============================================ */

/* Ensure submit button contrast */
form button[type="submit"],
#contact-form button {
  background: var(--accent, #B48A3C) !important;
  color: white !important;
  border: none;
  min-height: 48px;
  font-weight: 600;
}

form button[type="submit"]:hover {
  opacity: 0.9;
}

/* ============================================
   15. CODE WINDOW (Services) - Width Fix
   ============================================ */

@media (max-width: 639px) {

  .code-window,
  [class*="odyssee-dev"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
  }

  .code-window code,
  .code-window pre {
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-all;
  }
}

/* ============================================
   16. LOGO GALLERY - Prevent Cramping
   ============================================ */

@media (max-width: 639px) {

  .logo-gallery,
  .client-logos {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  .logo-gallery img,
  .client-logos img {
    max-height: 40px;
    object-fit: contain;
  }

  /* Client name - Truncate if too long */
  .logo-gallery span,
  .client-logos span {
    font-size: 0.625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

/* ============================================
   17. ACCESSIBILITY CONTRAST FIXES
   ============================================ */

/* Ensure readable contrast on muted text */
.text-muted,
[class*="text-muted"] {
  color: var(--text-muted, #6B7280);
}

/* Dark theme - Lighter muted */
.theme-dark .text-muted,
.theme-dark [class*="text-muted"] {
  color: #9CA3AF;
}

/* ============================================
   18. SPECIFIC PAGE FIXES
   ============================================ */

/* === DIAGNOSTIC SEO === */
@media (max-width: 767px) {

  /* Coverage section cards */
  #diagnostic-seo .grid.grid-cols-1.md\\:grid-cols-3 article {
    padding: 1.25rem;
  }

  /* Delivery items */
  #diagnostic-seo .flex.items-start.gap-4 {
    gap: 0.75rem;
  }

  /* Number circles - Smaller */
  #diagnostic-seo .w-8.h-8 {
    width: 1.5rem !important;
    height: 1.5rem !important;
    font-size: 0.625rem;
  }
}

/* === ABOUT PAGE === */
@media (max-width: 767px) {

  /* Action cards grid */
  .grid.grid-cols-1.md\\:grid-cols-3.gap-12 {
    gap: 2rem !important;
  }
}

/* === MENTIONS LÉGALES / POLITIQUE === */
@media (max-width: 639px) {

  /* Legal text - Readable */
  .legal-content,
  article.prose {
    padding: 1rem;
    font-size: 0.875rem;
    line-height: 1.7;
  }
}

/* ============================================
   19. PRINT STYLES
   ============================================ */

@media print {

  /* Hide non-essential */
  header,
  footer,
  .ulysse-toggle,
  .dock-container,
  .cookie-banner,
  .floating-actions-bubble {
    display: none !important;
  }

  /* No background colors */
  * {
    background: white !important;
    color: black !important;
  }
}

/* ============================================
   END OF RESPONSIVE FIX CSS
   ============================================ */
/* ================================================
   BENTO GRID COMPONENT
   AB ODYSSÉE - Premium Editorial Design
   
   Architecture: Pure CSS Grid, no hacks, no absolute,
   no fixed dimensions, natural reflow.
   ================================================ */

/* ==============================================
   1. BENTO CONTAINER
   The wrapper card containing the grid
   ============================================== */

.bento {
  --bento-gap: clamp(0.5rem, 1.5vw, 1rem);
  --bento-padding: clamp(1rem, 3vw, 1.5rem);
  --bento-radius-outer: clamp(1rem, 2vw, 1.5rem);
  --bento-radius-inner: clamp(0.5rem, 1vw, 0.75rem);
  --bento-item-bg: rgba(245, 240, 225, 0.5);
  --bento-item-bg-hover: rgba(245, 240, 225, 0.7);

  display: block;
  width: 100%;
  padding: var(--bento-padding);
  background: var(--bg-secondary, #F5F0E1);
  border-radius: var(--bento-radius-outer);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
}

/* ==============================================
   2. BENTO GRID
   The CSS Grid container for tiles
   ============================================== */

.bento__grid {
  display: grid;
  gap: var(--bento-gap);
  width: 100%;

  /* Desktop: 3 columns, asymmetric 2 rows */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;

  /* Named areas for explicit tile placement */
  grid-template-areas:
    "palette typography icons"
    "apps apps mockups";
}

/* ==============================================
   3. BENTO TILES
   Individual grid items with consistent styling
   ============================================== */

.bento__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.375rem, 1vw, 0.5rem);

  padding: clamp(0.75rem, 2vw, 1rem);
  min-height: clamp(80px, 12vw, 120px);

  background: var(--bento-item-bg);
  border-radius: var(--bento-radius-inner);

  text-align: center;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.bento__tile:hover {
  background: var(--bento-item-bg-hover);
  transform: translateY(-2px);
}

/* Tile placement via grid-area */
.bento__tile--palette {
  grid-area: palette;
}

.bento__tile--typography {
  grid-area: typography;
}

.bento__tile--icons {
  grid-area: icons;
}

.bento__tile--apps {
  grid-area: apps;
}

.bento__tile--mockups {
  grid-area: mockups;
}

/* ==============================================
   4. TILE CONTENT ELEMENTS
   Icons, titles, decorative elements
   ============================================== */

/* Icons */
.bento__icon {
  width: clamp(20px, 4vw, 28px);
  height: clamp(20px, 4vw, 28px);
  color: var(--accent, #B48A3C);
  opacity: 0.8;
  flex-shrink: 0;
}

.bento__tile svg,
.bento__tile i,
.bento__tile [data-lucide] {
  width: clamp(20px, 4vw, 28px);
  height: clamp(20px, 4vw, 28px);
  color: var(--accent, #B48A3C);
  opacity: 0.8;
  flex-shrink: 0;
}

/* Titles */
.bento__title {
  font-size: clamp(0.6875rem, 1.5vw, 0.875rem);
  font-weight: 600;
  color: var(--text-main, #091A30);
  line-height: 1.3;
  margin: 0;
}

.bento__tile h4 {
  font-size: clamp(0.6875rem, 1.5vw, 0.875rem);
  font-weight: 600;
  color: var(--text-main, #091A30);
  line-height: 1.3;
  margin: 0;
}

/* Decorative content */
.bento__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.25rem, 0.75vw, 0.5rem);
  width: 100%;
}

/* Color swatches */
.bento__swatch {
  width: clamp(1.25rem, 3vw, 1.75rem);
  height: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: 50%;
  flex-shrink: 0;
}

.bento__swatch--accent {
  background-color: var(--accent, #B48A3C);
}

.bento__swatch--main {
  background-color: var(--text-main, #091A30);
}

.bento__swatch--light {
  background-color: var(--bg-secondary, #F5F0E1);
  border: 2px solid var(--accent, #B48A3C);
}

/* Typography sample */
.bento__sample {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(1rem, 3vw, 1.5rem);
  color: var(--text-muted, #5A6978);
  letter-spacing: 0.05em;
}

/* Icon dots */
.bento__dot {
  width: clamp(0.625rem, 1.5vw, 0.875rem);
  height: clamp(0.625rem, 1.5vw, 0.875rem);
  background: rgba(180, 138, 60, 0.25);
  border-radius: 0.25rem;
}

/* App bars */
.bento__bar {
  width: 60%;
  height: clamp(0.375rem, 1vw, 0.5rem);
  background: rgba(180, 138, 60, 0.3);
  border-radius: 9999px;
}

.bento__bar--short {
  width: 40%;
  background: rgba(180, 138, 60, 0.2);
}

/* ==============================================
   5. RESPONSIVE: TABLET (768px - 1023px)
   2 columns, natural reflow
   ============================================== */

@media (max-width: 1023px) {
  .bento__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas:
      "palette typography"
      "icons apps"
      "mockups mockups";
  }

  .bento__tile {
    min-height: clamp(70px, 10vw, 100px);
  }
}

/* ==============================================
   6. RESPONSIVE: MOBILE (< 560px)
   1 column, stacked layout
   ============================================== */

@media (max-width: 559px) {
  .bento {
    --bento-padding: clamp(0.75rem, 2.5vw, 1rem);
    --bento-gap: clamp(0.375rem, 1vw, 0.5rem);
  }

  .bento__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "palette"
      "typography"
      "icons"
      "apps"
      "mockups";
  }

  .bento__tile {
    min-height: 70px;
    flex-direction: row;
    justify-content: flex-start;
    gap: clamp(0.5rem, 2vw, 0.75rem);
    padding: clamp(0.625rem, 2vw, 1rem);
  }

  .bento__tile svg,
  .bento__tile i,
  .bento__tile [data-lucide] {
    flex-shrink: 0;
  }

  .bento__content {
    flex: 1;
    justify-content: flex-end;
  }
}

/* ==============================================
   7. LEGACY CLASS BRIDGE
   Maps old classes to new structure
   ============================================== */

/* For backward compatibility during migration */
.bento-grid {
  display: grid;
  gap: var(--bento-gap, clamp(0.5rem, 1.5vw, 1rem));
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  grid-template-areas:
    "palette typography icons"
    "apps apps mockups";
  padding: clamp(1rem, 3vw, 1.5rem);
}

.bento-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.375rem, 1vw, 0.5rem);
  padding: clamp(0.75rem, 2vw, 1rem);
  min-height: clamp(80px, 12vw, 120px);
  background: rgba(245, 240, 225, 0.5);
  border-radius: clamp(0.5rem, 1vw, 0.75rem);
  text-align: center;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.bento-item:hover {
  background: rgba(245, 240, 225, 0.7);
  transform: translateY(-2px);
}

/* Legacy tile placement */
.bento-item-colors {
  grid-area: palette;
}

.bento-item-typography {
  grid-area: typography;
}

.bento-item-icons {
  grid-area: icons;
}

.bento-item-apps {
  grid-area: apps;
}

.bento-item-mockups {
  grid-area: mockups;
}

/* Legacy icon sizing */
.bento-item i,
.bento-item svg,
.bento-item [data-lucide] {
  width: clamp(20px, 4vw, 28px);
  height: clamp(20px, 4vw, 28px);
  color: var(--accent, #B48A3C);
  opacity: 0.8;
}

.bento-item h4 {
  font-size: clamp(0.6875rem, 1.5vw, 0.875rem);
  font-weight: 600;
  color: var(--text-main, #091A30);
  line-height: 1.3;
  margin: 0;
}

/* Legacy responsive - Tablet */
@media (max-width: 1023px) {
  .bento-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "palette typography"
      "icons apps"
      "mockups mockups";
  }
}

/* Legacy responsive - Mobile */
@media (max-width: 559px) {
  .bento-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "palette"
      "typography"
      "icons"
      "apps"
      "mockups";
    padding: clamp(0.75rem, 2.5vw, 1rem);
    gap: clamp(0.375rem, 1vw, 0.5rem);
  }

  .bento-item {
    min-height: 70px;
    flex-direction: row;
    justify-content: flex-start;
    gap: clamp(0.5rem, 2vw, 0.75rem);
    padding: clamp(0.625rem, 2vw, 1rem);
  }
}

/* ================================================
   REALISTIC CODE EDITOR COMPONENT
   Styles for VS Code-like code editor mockup
   ================================================ */

/* Editor Container */
.code-editor-realistic {
  display: flex;
  flex-direction: column;
  background: #1e1e2e;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

/* Title Bar */
.code-editor-realistic .browser-titlebar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  background: #181825;
  border-bottom: 1px solid #313244;
  height: 38px;
}

.code-editor-realistic .traffic-lights {
  display: flex;
  gap: 8px;
  padding: 0 16px;
  flex-shrink: 0;
}

/* Editor Tabs */
.editor-tabs {
  display: flex;
  flex: 1;
  overflow-x: auto;
  height: 100%;
}

.editor-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 100%;
  font-size: 12px;
  color: #6c7086;
  background: transparent;
  border-right: 1px solid #313244;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.editor-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #cdd6f4;
}

.editor-tab.active {
  background: #1e1e2e;
  color: #cdd6f4;
  border-bottom: 2px solid #89b4fa;
}

.tab-icon {
  font-size: 14px;
}

.tab-name {
  font-weight: 500;
}

.tab-close {
  font-size: 14px;
  opacity: 0;
  margin-left: 4px;
  transition: opacity 0.2s;
}

.editor-tab:hover .tab-close,
.editor-tab.active .tab-close {
  opacity: 0.6;
}

.tab-close:hover {
  opacity: 1;
}

/* Editor Actions */
.editor-actions {
  display: flex;
  gap: 8px;
  padding: 0 12px;
  flex-shrink: 0;
}

.action-btn {
  font-size: 14px;
  color: #6c7086;
  cursor: pointer;
  transition: color 0.2s;
}

.action-btn:hover {
  color: #89dceb;
}

/* Content Area - Grid Layout */
.code-editor-realistic .browser-content {
  display: flex;
  flex-direction: column;
  height: 450px;
  position: relative;
}

.code-editor-realistic .layer-code {
  display: grid;
  grid-template-columns: 48px 180px 1fr;
  grid-template-rows: 1fr 120px;
  grid-template-areas:
    "sidebar tree code"
    "sidebar tree terminal";
  height: 100%;
}

/* Sidebar */
.editor-sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  background: #181825;
  border-right: 1px solid #313244;
}

.sidebar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  font-size: 18px;
  color: #6c7086;
  cursor: pointer;
  transition: all 0.2s;
  border-left: 2px solid transparent;
}

.sidebar-icon:hover {
  color: #cdd6f4;
}

.sidebar-icon.active {
  color: #cdd6f4;
  border-left-color: #89b4fa;
  background: rgba(137, 180, 250, 0.1);
}

/* File Tree */
.file-tree {
  grid-area: tree;
  display: flex;
  flex-direction: column;
  padding: 12px 8px;
  background: #1e1e2e;
  border-right: 1px solid #313244;
  overflow-y: auto;
  font-size: 12px;
}

.tree-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  color: #cdd6f4;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s;
}

.tree-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.tree-item.active {
  background: rgba(137, 180, 250, 0.15);
  color: #89b4fa;
}

.tree-item.nested {
  padding-left: 20px;
}

.tree-item.nested-2 {
  padding-left: 36px;
}

.tree-arrow {
  font-size: 8px;
  color: #6c7086;
  width: 12px;
}

.tree-icon {
  font-size: 14px;
}

.tree-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Code Panel */
.code-panel {
  grid-area: code;
  display: flex;
  background: #1e1e2e;
  overflow: auto;
}

.line-numbers {
  display: flex;
  flex-direction: column;
  padding: 12px 8px;
  background: rgba(0, 0, 0, 0.2);
  text-align: right;
  -webkit-user-select: none;
  user-select: none;
  min-width: 40px;
}

.line-numbers span {
  font-size: 12px;
  line-height: 1.6;
  color: #6c7086;
}

.code-panel .code-block {
  flex: 1;
  padding: 12px 16px;
  margin: 0;
  background: transparent;
  font-size: 12px;
  line-height: 1.6;
  overflow-x: auto;
}

/* Terminal Panel */
.terminal-panel {
  grid-area: terminal;
  display: flex;
  flex-direction: column;
  background: #11111b;
  border-top: 1px solid #313244;
}

.terminal-header {
  display: flex;
  gap: 0;
  background: #181825;
  border-bottom: 1px solid #313244;
}

.terminal-tab {
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6c7086;
  cursor: pointer;
  transition: all 0.2s;
}

.terminal-tab:hover {
  color: #cdd6f4;
}

.terminal-tab.active {
  color: #cdd6f4;
  border-bottom: 2px solid #89b4fa;
}

.terminal-content {
  flex: 1;
  padding: 12px 16px;
  font-size: 12px;
  overflow-y: auto;
}

.terminal-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  color: #cdd6f4;
}

.terminal-line.success {
  color: #a6e3a1;
}

.terminal-line.info {
  color: #89dceb;
}

.terminal-line.error {
  color: #f38ba8;
}

.terminal-prompt {
  color: #89b4fa;
}

.terminal-cmd {
  color: #f9e2af;
}

.terminal-icon {
  font-size: 14px;
}

.terminal-cursor {
  animation: blink 1s step-end infinite;
  color: #89b4fa;
}

@keyframes blink {

  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

/* Syntax Highlighting - Enhanced */
.code-keyword {
  color: #cba6f7;
}

.code-function {
  color: #89b4fa;
}

.code-string {
  color: #a6e3a1;
}

.code-tag {
  color: #f38ba8;
}

.code-attr {
  color: #89dceb;
}

.code-comment {
  color: #6c7086;
  font-style: italic;
}

.code-type {
  color: #f9e2af;
}

.code-number {
  color: #fab387;
}

/* Responsive */
@media (max-width: 768px) {
  .code-editor-realistic .layer-code {
    grid-template-columns: 40px 1fr;
    grid-template-rows: 1fr 100px;
    grid-template-areas:
      "sidebar code"
      "sidebar terminal";
  }

  .file-tree {
    display: none;
  }

  .editor-tab:not(.active) {
    display: none;
  }
}

@media (max-width: 480px) {
  .editor-sidebar {
    display: none;
  }

  .code-editor-realistic .layer-code {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 80px;
    grid-template-areas:
      "code"
      "terminal";
  }

  .editor-actions {
    display: none;
  }
}

/* ============================================
   SECTION: ESSENTIAL SAFARI COMPATIBILITY
   Purpose: Minimal Safari fixes without layout changes
   Applied: 2026-02-02
   ============================================ */

/* 1. Global box-sizing (standard best practice) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Image/Media containment */
img,
video,
svg,
canvas,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* 3. Safari Backdrop Filter Prefix */
.liquid-glass,
.glass-card,
.floating-actions-bubble,
.language-dropdown,
.language-dropdown-mobile {
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
}

/* 4. Safari Sticky Prefix */
.sticky,
[class*="sticky"] {
  position: -webkit-sticky;
  position: sticky;
}

/* ============================================
   END ESSENTIAL SAFARI COMPATIBILITY
   ============================================ */