/* ===== SOPREMA Formulaire Styles ===== */
/* ===== CSS Variables for Maintainability ===== */
:root {
    /* Colors */
    --color-primary: #2989d8;
    --color-secondary: #1e5799;
    --color-tertiary: #2563eb;
    --color-success: #155724;
    --color-error: #e74c3c;
    --color-text-primary: #2c3e50;
    --color-text-secondary: #6c757d;
    --color-border: #e0e6ed;
    --color-border-light: #f0f0f0;
    --color-background: #f8f9fa;
    --color-background-light: #fafbfc;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 40px;
    --spacing-3xl: 60px;

    /* Border Radius */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;

    /* Font Sizes */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.85rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.1rem;
    --font-size-xl: 1.35rem;
    --font-size-2xl: 1.8rem;
    --font-size-3xl: 2.5rem;

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.8s ease;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Azo Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f8f9fa;
    min-height: 100vh;
    width: 100%;
    max-width: 100vw;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}

/* Barre de progression */
.progress-bar-container {
    position: fixed;
    top: -6px;
    left: 0;
    width: 100%;
    height: 6px;
    background-color: white;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, top 0.3s ease;
}
.progress-bar-container.visible {
    opacity: 1;
    top: 0;
}
.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(135deg, #2989d8, #1e5799);
    transition: width 0.3s ease-in-out;
}

/* Modern Navigation Header - Transparent Overlay */
.main-header {
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
    padding: 0;
    transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}
.main-header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}
.header-nav {
    max-width: 1200px;
    width: 100%;
    margin: 20px auto;
    padding: 0 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    position: relative;
    box-sizing: border-box;
}
.nav-logo {
    position: absolute;
    left: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.nav-logo-img {
    height: 90px;
    width: auto;
    object-fit: contain;
    max-width: 200px;
    transition: height 0.3s ease;
}
.nav-brand {
    display: none;
}
.nav-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Original header subtitle */
.nav-subtitle {
    color: white;
    font-size: clamp(0.85rem, 1.5vw + 0.5rem, 1.4rem);
    font-weight: 600;
    margin: 0;
    transition: color 0.3s ease;
    text-align: center;
}

.main-header.scrolled .nav-subtitle {
    color: #1e5799;
}
.nav-actions {
    position: absolute;
    right: clamp(15px, 3vw, 40px);
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.5vw, 16px);
    padding: 8px;
}

/* Hero Header Container - Full Screen */
.hero-header {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
    padding: 0;
    position: relative;
    overflow: hidden;
    margin: 0;
    width: 100%;
    max-width: 100vw;
    min-height: 100vh;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* Desktop only - keep full height */
@media (min-width: 1025px) {
    .hero-header {
        min-height: 100vh;
    }
}

/* ===== Section informative avant formulaire ===== */
.info-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    padding: 80px 40px;
    position: relative;
    z-index: 5;
}

.info-container {
    max-width: 1100px;
    margin: 0 auto;
}

.info-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1e5799;
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.3;
}

.info-intro {
    font-size: 1.2rem;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 50px;
    line-height: 1.7;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.info-criteria-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

.info-card {
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.info-card-positive {
    border-color: #d4edda;
    background: linear-gradient(135deg, #ffffff 0%, #f1f9f4 100%);
}

.info-card-positive:hover {
    border-color: #28a745;
}

.info-card-negative {
    border-color: #f8d7da;
    background: linear-gradient(135deg, #ffffff 0%, #fef5f6 100%);
}

.info-card-negative:hover {
    border-color: #dc3545;
}

.info-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.info-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.info-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-list li {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #495057;
    margin-bottom: 15px;
    padding-left: 25px;
    position: relative;
}

.info-list li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: #2989d8;
    font-weight: bold;
    font-size: 1.2rem;
}

.info-card-positive .info-list li::before {
    color: #28a745;
}

.info-card-negative .info-list li::before {
    color: #dc3545;
}

.info-examples {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-left: 5px solid #2989d8;
    border-radius: 12px;
    padding: 25px 30px;
    margin-bottom: 35px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.info-examples-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.info-examples p {
    font-size: 1.1rem;
    color: #1e5799;
    margin: 0;
    line-height: 1.6;
}

.info-cta {
    text-align: center;
    font-size: 1.6rem;
    color: #1e5799;
    margin: 0;
    padding: 25px 0;
}

.info-cta strong {
    background: linear-gradient(135deg, #2989d8, #1e5799);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto 60px auto;
    background: white;
    border-radius: 20px 20px 20px 20px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    position: relative;
    z-index: 10;
    margin-top: -80px;
    box-sizing: border-box;
}

/* ===== Section intro dans le container ===== */
.intro-section {
    padding: 50px 60px 40px 60px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-bottom: 3px solid #e9ecef;
}

.intro-description {
    font-size: 1.15rem;
    color: #1e5799;
    text-align: center;
    margin-bottom: 35px;
    line-height: 1.7;
    font-weight: 500;
}

.intro-criteria-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 30px;
}

.intro-card {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.intro-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.intro-positive {
    border-color: #d4edda;
    background: linear-gradient(135deg, #ffffff 0%, #f1f9f4 100%);
}

.intro-positive:hover {
    border-color: #28a745;
}

.intro-negative {
    border-color: #f8d7da;
    background: linear-gradient(135deg, #ffffff 0%, #fef5f6 100%);
}

.intro-negative:hover {
    border-color: #dc3545;
}

.intro-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 15px 0;
    text-align: left;
}

.intro-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.intro-card li {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #495057;
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
    text-align: left;
}

.intro-card li::before {
    content: '▸';
    position: absolute;
    left: 0;
    top: 0.1em;
    color: #2989d8;
    font-weight: bold;
    font-size: 1.1rem;
    line-height: 1;
}

.intro-positive li::before {
    color: #28a745;
}

.intro-negative li::before {
    color: #dc3545;
}

.intro-examples {
    background: transparent;
    border-left: none;
    border-radius: 10px;
    padding: 18px 25px;
    margin-bottom: 25px;
    font-size: 1rem;
    color: #1e5799;
    line-height: 1.6;
    text-align: center;
}

.intro-cta {
    text-align: center;
    font-size: 1.35rem;
    color: #1e5799;
    margin: 0;
    padding: 0;
    font-weight: 700;

}

.intro-cta strong {
    background: linear-gradient(135deg, #2989d8, #1e5799);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}


/* ===== Modern Hero Section ===== */
.hero-section {
    background: transparent;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120px 60px 180px 60px;
    color: white;
    overflow: hidden;
    min-height: 100vh;
    text-align: center;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}

/* Desktop only - keep full viewport height */
@media (min-width: 1025px) {
    .hero-section {
        min-height: 100vh;
    }
}
.parallax-layer { position: absolute; width: 100%; height: 100%; }
.particles-layer {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.6)"/><circle cx="150" cy="80" r="1.5" fill="rgba(255,255,255,0.4)"/><circle cx="250" cy="120" r="2.5" fill="rgba(255,255,255,0.5)"/><circle cx="350" cy="60" r="1" fill="rgba(255,255,255,0.7)"/><circle cx="80" cy="200" r="1.8" fill="rgba(255,255,255,0.3)"/><circle cx="300" cy="180" r="1.2" fill="rgba(255,255,255,0.5)"/><circle cx="120" cy="250" r="2.2" fill="rgba(255,255,255,0.4)"/><circle cx="380" cy="220" r="1.6" fill="rgba(255,255,255,0.6)"/><circle cx="20" cy="180" r="1.4" fill="rgba(255,255,255,0.5)"/><circle cx="200" cy="40" r="1.1" fill="rgba(255,255,255,0.7)"/><circle cx="280" cy="280" r="2.8" fill="rgba(255,255,255,0.3)"/><circle cx="160" cy="160" r="1.3" fill="rgba(255,255,255,0.6)"/></svg>') repeat;
    animation: particleFloatRealistic 25s linear infinite;
    opacity: 0.4;
}

/* Couches supplémentaires pour éviter les vides */
.particles-layer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><circle cx="100" cy="30" r="1.5" fill="rgba(255,255,255,0.3)"/><circle cx="200" cy="70" r="2" fill="rgba(255,255,255,0.5)"/><circle cx="300" cy="100" r="1.2" fill="rgba(255,255,255,0.4)"/><circle cx="40" cy="150" r="1.8" fill="rgba(255,255,255,0.6)"/><circle cx="180" cy="200" r="1.4" fill="rgba(255,255,255,0.3)"/><circle cx="320" cy="240" r="2.2" fill="rgba(255,255,255,0.5)"/><circle cx="60" cy="270" r="1.1" fill="rgba(255,255,255,0.4)"/><circle cx="240" cy="20" r="1.6" fill="rgba(255,255,255,0.7)"/></svg>') repeat;
    animation: particleFloatRealistic 30s linear infinite;
    opacity: 0.3;
}

.particles-layer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><circle cx="30" cy="90" r="1.8" fill="rgba(255,255,255,0.4)"/><circle cx="170" cy="130" r="1.3" fill="rgba(255,255,255,0.6)"/><circle cx="270" cy="170" r="2.1" fill="rgba(255,255,255,0.3)"/><circle cx="370" cy="50" r="1.2" fill="rgba(255,255,255,0.5)"/><circle cx="90" cy="220" r="1.7" fill="rgba(255,255,255,0.4)"/><circle cx="230" cy="260" r="1.4" fill="rgba(255,255,255,0.6)"/></svg>') repeat;
    animation: particleFloatRealistic 35s linear infinite;
    opacity: 0.2;
}

.mission-icons-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.mission-icon {
    position: absolute;
    width: 50px;
    top: 250px;
    height: auto;
    opacity: 0.8;
    pointer-events: auto;
    cursor: help;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.mission-icon:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Tooltip personnalisé pour les icônes missions */
.mission-icon[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 102, 204, 0.95);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    pointer-events: none;
    animation: tooltipFadeIn 0.2s ease-in-out;
}

.mission-icon[title]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(120% - 8px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 102, 204, 0.95);
    z-index: 1000;
    pointer-events: none;
    animation: tooltipFadeIn 0.2s ease-in-out;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.icon-access-info {
    left: 30%;
    animation: missionIconFloat4 3s ease-out forwards, missionIconFloating4 3.5s ease-in-out infinite 3.5s;
}

.icon-admin-simplification {
    left: 40%;
    animation: missionIconFloat5 3.25s ease-out forwards, missionIconFloating5 3.5s ease-in-out infinite 7s;
}

.icon-building-intelligence {
    left: 50%;
    animation: missionIconFloat2 3.50s ease-out forwards, missionIconFloating2 3.5s ease-in-out infinite 5s;
        }

.icon-efficiency {
    left: 59%;
    animation: missionIconFloat3 3.75s ease-out forwards, missionIconFloating3 3.5s ease-in-out infinite 6s;
}

.icon-productivity {
    left: 70%;
    animation: missionIconFloat4 4s ease-out forwards, missionIconFloating4 3.5s ease-in-out infinite 4.5s;
}

@keyframes missionIconFloat1 {
    0% { transform: translateY(100vh); opacity: 0; }
    20% { opacity: 0.8; }
    100% { transform: translateY(50vh); opacity: 0.8; }
}

@keyframes missionIconFloat2 {
    0% { transform: translateY(100vh); opacity: 0; }
    15% { opacity: 0.8; }
    100% { transform: translateY(50vh); opacity: 0.8; }
}

@keyframes missionIconFloat3 {
    0% { transform: translateY(100vh); opacity: 0; }
    10% { opacity: 0.8; }
    100% { transform: translateY(50vh); opacity: 0.8; }
}

@keyframes missionIconFloat4 {
    0% { transform: translateY(100vh); opacity: 0; }
    25% { opacity: 0.8; }
    100% { transform: translateY(50vh); opacity: 0.8; }
}

@keyframes missionIconFloat5 {
    0% { transform: translateY(100vh); opacity: 0; }
    8% { opacity: 0.8; }
    100% { transform: translateY(50vh); opacity: 0.8; }
}

@keyframes missionIconFloating1 {
    0%, 100% { transform: translateY(50vh) translateX(0px); }
    50% { transform: translateY(48vh) translateX(3px); }
}

@keyframes missionIconFloating2 {
    0%, 100% { transform: translateY(50vh) translateX(0px); }
    50% { transform: translateY(52vh) translateX(-2px); }
}

@keyframes missionIconFloating3 {
    0%, 100% { transform: translateY(50vh) translateX(0px); }
    50% { transform: translateY(49vh) translateX(4px); }
}

@keyframes missionIconFloating4 {
    0%, 100% { transform: translateY(50vh) translateX(0px); }
    50% { transform: translateY(51vh) translateX(-3px); }
}

@keyframes missionIconFloating5 {
    0%, 100% { transform: translateY(50vh) translateX(0px); }
    50% { transform: translateY(48.5vh) translateX(2px); }
}

/* Gear Layer - Animated Gears */
/* ===== UNIFIED GEAR POSITIONING FOR ALL SCREEN SIZES ===== */

.gear-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.gear {
  position: absolute;
  background: url('../assets/icons/gear.svg') no-repeat;
  background-size: contain;
  opacity: 0.55;
  filter: brightness(1.15);
}

/* Left gear */
.gear-1 {
  bottom: -6%;
  left: -5%;
  width: clamp(180px, 22vw, 320px);
  height: clamp(180px, 22vw, 320px);
  animation: rotateGear2 15s linear infinite reverse;
}

/* Right gear */
.gear-2 {
  bottom: -6%;
  right: -5%;
  width: clamp(180px, 22vw, 320px);
  height: clamp(180px, 22vw, 320px);
  animation: rotateGear3 15s linear infinite;
}

/* Rotation animations */
@keyframes rotateGear2 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes rotateGear3 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


@keyframes rotateGear4 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* --- Big screens behavior --- */
@media (min-width: 1920px) {
    .gear-1 {
    bottom: -6%;
    left: -5%;
    width: clamp(180px, 22vw, 400px);
    height: clamp(180px, 22vw, 400px);
    animation: rotateGear2 15s linear infinite reverse;
    }

    .gear-2 {
    bottom: -6%;
    right: -5%;
    width: clamp(180px, 22vw, 400px);
    height: clamp(180px, 22vw, 400px);
    animation: rotateGear3 15s linear infinite;
    }
}

/* --- Big screens behavior --- */
@media (min-width: 1440px) {
    .gear-1 {
    bottom: -15%;
    left: -5%;
    width: clamp(180px, 22vw, 400px);
    height: clamp(180px, 22vw, 400px);
    animation: rotateGear2 15s linear infinite reverse;
    }

    .gear-2 {
    bottom: -15%;
    right: -5%;
    width: clamp(180px, 22vw, 400px);
    height: clamp(180px, 22vw, 400px);
    animation: rotateGear3 15s linear infinite;
    }
}

/* --- Small screens behavior --- */
@media (max-width: 359px) {
  .gear-1 {
    position: absolute;
    bottom: -55px;
    left: 10px;            
    transform: translateX(-50%) rotate(0deg);
    width: clamp(130px, 45vw, 180px);
    height: clamp(130px, 45vw, 180px);
    opacity: 0.45;
    animation: rotateGear3 25s linear infinite;
  }

  .gear-2 {
    position: absolute;
    bottom: -55px;
    left: 180px;                 
    transform: translateX(-50%) rotate(0deg);
    width: clamp(130px, 45vw, 180px);
    height: clamp(130px, 45vw, 180px);
    opacity: 0.45;
    animation: rotateGear3 25s linear infinite reverse;
  }
}

/* Gear Layer for Login Page - Independent positioning */
.gear-layer-login {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.gear-login {
    position: absolute;
    background: url('../assets/icons/gear.svg') no-repeat;
    background-size: contain;
    opacity: 0;
    animation: fadeInGear 1s ease forwards;
}

.gear-login-1 {
    bottom: 12%;
    left: 30%;
    width: 250px;
    height: 250px;
    animation: fadeInGear 1s ease forwards 1.2s, rotateGear2 12s linear infinite 1.2s reverse;
    filter: brightness(1.2);
}

.gear-login-2 {
    top: 15%;
    right: 30%;
    width: 250px;
    height: 250px;
    animation: fadeInGear 1s ease forwards 1.4s, rotateGear3Login 15s linear infinite 1.4s;
    filter: brightness(1.1) contrast(0.8);
}

@keyframes rotateGear3Login {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeInGear {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 0.6;
        transform: scale(1);
    }
}

/* Responsive adaptations for login gears */

@media (max-width: 1200px) {
    .gear-login-1 {
        bottom: 4%;
        left: 26%;
        width: 150px;
        height: 150px;
    }

    .gear-login-2 {
        top: 10%;
        right: 24%;
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 992px) {
    .gear-login-1 {
        bottom: 8%;
        left: 22%;
        width: 180px;
        height: 180px;
    }

    .gear-login-2 {
        top: 15%;
        right: 15%;
        width: 180px;
        height: 180px;
    }
}

@media (max-width: 768px) {
    .gear-login-1,
    .gear-login-2 {
        display: none;
    }

    .login-container {
        max-width: 85%;
        padding: 25px 20px;
        margin-top: 25px;
    }

    .login-container h1 {
        font-size: 1.4rem;
        margin-bottom: 18px;
    }

    .login-form input {
        padding: 11px 14px;
        font-size: 0.9rem;
        margin-bottom: 12px;
    }

    .login-form button {
        padding: 11px;
        font-size: 0.95rem;
        margin-top: 8px;
    }

    .forgot-password-container {
        margin-top: 10px;
        margin-bottom: 16px;
    }

    .forgot-password-link {
        font-size: 0.85rem;
    }
}

/* Ajustement intermédiaire pour tablettes et grands mobiles */
@media (max-width: 600px) and (min-width: 481px) {
    .login-container {
        max-width: 88%;
        padding: 22px 18px;
        margin-top: 22px;
    }

    .login-container h1 {
        font-size: 1.35rem;
        margin-bottom: 16px;
    }

    .login-form input {
        padding: 10px 13px;
        font-size: 0.9rem;
    }

    .login-form button {
        padding: 10px;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .login-container {
        max-width: 92%;
        padding: 20px 16px;
        margin-top: 18px;
        border-radius: 16px;
    }

    .login-container h1 {
        font-size: 1.3rem;
        margin-bottom: 14px;
    }

    .login-form input {
        padding: 10px 12px;
        font-size: 0.9rem;
        margin-bottom: 10px;
    }

    .login-form button {
        padding: 10px 12px;
        font-size: 0.9rem;
        margin-top: 6px;
    }

    .forgot-password-container {
        margin-top: 10px;
        margin-bottom: 14px;
    }

    .forgot-password-link {
        font-size: 0.85rem;
    }
}

/* Accessibilité : Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    .particles-layer,
    .particles-layer::before,
    .particles-layer::after,
    .mission-icon,
    .gear,
    .gear-login,
    .loading-gear {
        animation: none;
    }
}
.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    opacity: 0;
    animation: splitTextReveal 1.2s ease forwards;
    line-height: 1.1;
    max-width: 900px;
}
.hero-intro {
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 15px;
    opacity: 0;
    animation: fadeUp 0.8s ease forwards 0.3s;
    line-height: 1.4;
    max-width: 800px;
    color: rgba(255, 255, 255, 0.9);
}
.hero-subtitle {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 40px;
    opacity: 0;
    animation: fadeUp 0.8s ease forwards 0.5s;
    line-height: 1.3;
    max-width: 800px;
    color: rgba(255, 255, 255, 1);
}
.hero-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}
.btn-hero-primary, .btn-hero-secondary {
    padding: 16px 32px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    opacity: 0;
    animation: fadeUp 0.8s ease forwards 0.9s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.btn-hero-primary {
    background: white;
    color: #1e40af;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
    font-weight: 700;
}
.btn-hero-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}
.btn-hero-primary:hover {
    background: #f8fafc;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.4);
}
.btn-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: white;
    transform: translateY(-2px);
}
.btn-hero-primary span {
    filter: grayscale(100%) brightness(0) invert(1);
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
}

@keyframes particleFloat { 0% { transform: translateY(100vh);} 100% { transform: translateY(-300px);} }
@keyframes particleFloatRealistic {
    0% { transform: translateY(100vh) translateX(0px); }
    25% { transform: translateY(75vh) translateX(-20px); }
    50% { transform: translateY(50vh) translateX(15px); }
    75% { transform: translateY(25vh) translateX(-10px); }
    100% { transform: translateY(-300px) translateX(25px); }
}
@keyframes splitTextReveal { 0% { opacity:0; transform: rotateX(90deg);} 100% { opacity:1; transform: rotateX(0deg);} }
@keyframes fadeUp { from { opacity:0; transform: translateY(24px);} to { opacity:1; transform: translateY(0);} }

/* ===== Forme ===== */
.form-container { padding: 50px 40px; }
.form-section {
    margin-bottom: 35px;
    padding: 40px 50px;
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    background: #fafbfc;
    transition: all 0.3s ease;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}

.form-section:hover { border-color: #e3f2fd; background: #f8fbff; }
.section-title {
    font-size: 1.4rem;
    color: #1e5799;
    margin-bottom: 25px;
    padding-bottom: 12px;
    border-bottom: 3px solid #e8f4fd;
    display: flex;
    align-items: center;
    font-weight: 600;
}
.section-title::before {
    content: '';
    width: 5px;
    height: 25px;
    background: linear-gradient(135deg, #2989d8, #1e5799);
    margin-right: 15px;
    border-radius: 3px;
}
.sub-section-title {
    font-size: 1.3rem;
    color: #1e5799;
    margin-bottom: 25px;
    margin-top: 0;
    padding-bottom: 12px;
    border-bottom: 3px solid #e8f4fd;
    font-weight: 600;
    display: flex;
    align-items: center;
}
.sub-section-title::before {
    content: '';
    width: 5px;
    height: 22px;
    background: linear-gradient(135deg, #2989d8, #1e5799);
    margin-right: 15px;
    border-radius: 3px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 25px; }
.form-section:first-child .form-row { margin-bottom: 0; }
.form-row-2-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.form-row-3-cols { display: grid; grid-template-columns: 1fr 2fr 3fr; gap: 20px; margin-bottom: 25px; }
.form-row-4-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 25px;
}

/* Cascading fields animation */
.cascading-fields .form-group {
    transition: all 0.4s ease;
}
.cascading-fields .form-group[style*="opacity: 0.5"] {
    opacity: 0.5;
    pointer-events: none;
}
.form-group { margin-bottom: 25px; }
.form-group.full-width { grid-column: span 2; }
label { display: block; font-weight: 400; color: #2c3e50; font-size: 1rem; line-height: 1.4; margin-bottom: 8px; }
.required { color: #e74c3c; margin-left: 4px; cursor: help; position: relative; }
.required:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    background: #2c3e50;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
    top: 50%;
    right: -140px;
    transform: translateY(-50%);
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.required:hover::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: #2c3e50;
    z-index: 1000;
}
input::placeholder, textarea::placeholder, select::placeholder { font-size: 0.8rem; color: #7f8c8d; font-style: italic; opacity: 0.8; }
input:required::placeholder, textarea:required::placeholder { color: #7f8c8d; font-weight: 400; }
input, textarea, select {
    width: 100%; padding: 15px 18px; border: 2px solid #e0e6ed; border-radius: 8px;
    font-size: 1rem; font-family: inherit; font-weight: 400; color: #2c3e50;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; background: white; line-height: 1.5;
}
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
    padding-right: 50px;
}

/* Styling for limited height dropdown with size attribute */
.limited-height-dropdown {
    height: auto !important;
    max-height: 280px; /* Approximately 8 options x 35px each for countries */
    overflow-y: auto;
    background-image: none !important; /* Remove dropdown arrow for size-based selects */
    padding-right: 18px !important; /* Remove extra padding from dropdown arrow */
    border: 2px solid #e0e6ed;
    border-radius: 8px;
    appearance: auto; /* Restore native appearance for scrollable list */
    -webkit-appearance: auto;
    -moz-appearance: auto;
}

/* Specific max-height for role dropdown (7 options) */
#role.limited-height-dropdown {
    max-height: 245px; /* Approximately 7 options x 35px each */
}

/* Améliorer l'espacement des options dans les dropdowns */
select option {
    padding: 8px 12px;
    line-height: 1.4;
    min-height: 34px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Enhanced scrollbar styling for the limited dropdown */
.limited-height-dropdown::-webkit-scrollbar {
    width: 8px;
}

.limited-height-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
    margin: 2px;
}

.limited-height-dropdown::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
    border: 1px solid #f1f1f1;
}

.limited-height-dropdown::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Focus state for limited dropdown */
.limited-height-dropdown:focus {
    outline: none;
    border-color: #2989d8;
    box-shadow: 0 0 0 4px rgba(41, 137, 216, 0.1);
}

/* Force dropdown to open downward */
.form-group {
    position: relative;
    overflow: visible;
}

.form-group select {
    position: relative;
    z-index: 10;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Limited height dropdown for country select - Cross-browser solution */

/* Apply styling when dropdown size is limited */
#country.limited-height-dropdown {
    /* Maintain styling consistency when using size attribute */
    border: 2px solid #e0e6ed;
    border-radius: 8px;
    padding: 15px 18px;
    font-size: 1rem;
    font-family: inherit;
    background: white;
    /* Ensure dropdown arrow is still visible */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
    padding-right: 50px;
}

/* Focus styling for limited height dropdown */
#country.limited-height-dropdown:focus {
    outline: none;
    border-color: #2989d8;
    box-shadow: 0 0 0 4px rgba(41, 137, 216, 0.1);
}

/* Ensure container has enough height */
.form-container {
    min-height: 100vh;
    overflow: visible;
}

.form-section {
    margin-bottom: 100px;
    overflow: visible;
}

body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Specific styling for select elements */
select {
    direction: ltr;
}

select::-ms-expand {
    display: none;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: #2989d8; box-shadow: 0 0 0 4px rgba(41, 137, 216, 0.1); transform: translateY(-1px); }
.error-message { color: #e74c3c; font-size: 0.85rem; margin-top: 5px; display: none; }
.form-group.error input, .form-group.error textarea, .form-group.error select { border-color: #e74c3c; }
.form-group.error .error-message { display: block; }
textarea { resize: vertical; min-height: 120px; line-height: 1.6; max-height: 500px; }

.radio-group, .checkbox-group { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
fieldset { border: none; padding: 0; margin: 0; }
.emoji { margin-right: 12px; }
.radio-item, .checkbox-item {
    display: flex; align-items: center; gap: 6px; padding: 12px 16px;
    border: 2px solid #f0f0f0; border-radius: 8px; background: white;
    transition: all 0.3s ease; cursor: pointer;
    width: fit-content; 
}
/* Espacement spécifique pour la section engagement */
.form-section:last-of-type .checkbox-item {
    margin-top: 12px;
}
.radio-item:hover:not(.selected), .checkbox-item:hover:not(.selected) { border-color: #2989d8; background: #f8fbff; }
.radio-item.selected, .checkbox-item.selected {
    border-color: #2989d8;
    background: white;
    box-shadow: 0 2px 8px rgba(41, 137, 216, 0.2);
}
.radio-item input, .checkbox-item input { width: auto; margin: 0; cursor: pointer; }
.checkbox-item input[type="checkbox"]:hover { background: white !important; opacity: 1 !important; }
.radio-item label, .checkbox-item label { margin-left: 10px; font-weight: 400; cursor: pointer; flex: 1; }
.role-highlight { color: #0072CE; font-weight: 600; }

/* Textarea avec boutons suggestions intégrés comme dans l'image */
.textarea-with-buttons {
    position: relative;
    border: 2px solid #e0e6ed;
    border-radius: 8px;
    background: white;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    min-height: 180px;
}
.textarea-with-buttons:focus-within {
    border-color: #2989d8;
    box-shadow: 0 0 0 4px rgba(41, 137, 216, 0.1);
}
.textarea-with-buttons textarea {
    width: 100%;
    min-height: 80px;
    border: none;
    padding: 15px 18px 80px 18px;
    font-size: 1rem;
    font-family: inherit;
    color: #2c3e50;
    background: transparent;
    resize: vertical;
    box-shadow: none;
    overflow: auto;
    max-height: 400px;
}
.textarea-with-buttons textarea:focus {
    outline: none;
    box-shadow: none;
    transform: none;
    border: none;
}
.suggestions-overlay {
    position: absolute;
    bottom: 5px;
    left: 18px;
    right: 18px;
    pointer-events: auto;
}
.suggestions-label {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 8px;
    font-weight: 500;
}
.suggestion-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.suggestion-btn {
    padding: 4px 12px;
    border: 1px solid #d0d7de;
    border-radius: 16px;
    background: white !important;
    color: #2c3e50 !important;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    white-space: nowrap;
    pointer-events: auto;
    position: relative;
    z-index: 10;
}
.suggestion-btn:hover {
    border-color: #2989d8 !important;
    background: white !important;
    transform: translateY(-1px);
}

/* Style unifié pour les boutons de suggestion - géré par JavaScript */
.suggestion-btn.selected {
    background: #2989d8;
    border-color: #2989d8;
    color: white;
    box-shadow: 0 1px 4px rgba(41, 137, 216, 0.3);
}
.suggestion-btn.selected:hover {
    background: #1e5799;
    border-color: #1e5799;
}

/* Focus management amélioré pour l'accessibilité */
:focus-visible {
    outline: 3px solid #2989d8;
    outline-offset: 2px;
    border-radius: 4px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.radio-item:focus-within,
.checkbox-item:focus-within {
    outline: none !important;
    border-color: #2989d8 !important;
    box-shadow: 0 0 0 2px #2989d833 !important;
    border-radius: 8px;
}

.form-actions { margin-top: 50px; padding-top: 40px; padding-bottom: 40px; border-top: 2px solid #f0f0f0; text-align: center; }
.thank-you-message { font-size: 1.1rem; color: #2c3e50; margin-bottom: 30px; font-style: italic; line-height: 1.6; }
.btn { padding: 18px 40px; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-transform: none; letter-spacing: 0.3px; display: inline-flex; align-items: center; gap: 10px; }
.btn-primary { background: linear-gradient(135deg, #2989d8, #1e5799); color: white; box-shadow: 0 4px 15px rgba(41, 137, 216, 0.3); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(41, 137, 216, 0.4); }
.btn-icon { font-size: 1.2rem; }
.success-message {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    color: #155724; padding: 20px; border-radius: 8px; border: 2px solid #b8dabc;
    margin-bottom: 30px; display: none; text-align: center; font-weight: 500;
}

/* Modern Language Switch - Desktop only (shown above 768px) */
.language-switch {
    display: flex;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 4px;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (min-width: 769px) {
    .language-switch {
        display: flex;
    }
    .mobile-lang-toggle {
        display: none !important;
    }
}
.lang-btn {
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    min-width: 56px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lang-btn:hover {
    background: #e9ecef;
    color: #495057;
    transform: translateY(-1px);
}
.lang-btn.active {
    background: #1e5799;
    color: white;
    box-shadow: 0 2px 8px rgba(30, 87, 153, 0.3);
}

/* Mobile Language Sidebar */
.mobile-lang-toggle {
    display: none;
    background: transparent;
    border: none;
    color: white;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    align-items: center;
    gap: 8px;
    box-shadow: none;
    min-height: 44px;
}
.mobile-lang-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}
.mobile-lang-toggle svg,
.mobile-lang-toggle img {
    width: 24px;
    height: 24px;
    fill: currentColor;
    transition: opacity 0.3s ease;
}
.mobile-lang-toggle span {
    display: none;
}

/* ============================= */
/* Desktop only (above 1000px) */
/* ============================= */
@media (min-width: 1001px) {
    .language-switch {
        display: flex;
    }

    .mobile-lang-toggle {
        display: none !important;
    }
}

/* ============================= */
/* Tablet + Mobile (1000px and below) */
/* ============================= */
@media (max-width: 1000px) {
    /* Hide desktop language buttons */
    .language-switch {
        display: none !important;
    }

    /* Show mobile toggle */
    .mobile-lang-toggle {
        display: none !important;
    }

    /* Prevent overlap with subtitle */
    .nav.subtitle {
        padding-right: 60px;
    }
}

/* ============================= */
/* Critical overlap range fix */
/* 875px – 769px */
/* ============================= */
@media (max-width: 875px) and (min-width: 769px) {
    .nav.subtitle {
        font-size: 14px;
        line-height: 1.4;
        padding-right: 60px;
    }
}

/* ============================= */
/* Small mobile */
/* ============================= */
@media (max-width: 768px) {
    .nav.subtitle {
        text-align: center;
        padding-right: 0;
    }
}

/* ============================= */
/* MOBILE HAMBURGER BUTTON */
/* ============================= */

.mobile-hamburger {
   background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0.5rem;
    position: relative;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
}

/* bars */
.mobile-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.mobile-hamburger.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.mobile-hamburger.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.mobile-hamburger.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}



/* ============================= */
/* MOBILE MENU */
/* ============================= */
@media (max-width: 900px) {

  /* hide desktop language switch */
  .language-switch,
  .login-link,
  .mobile-lang-toggle {
    display: none !important;
  }
    .mobile-hamburger {
        display: flex;
    }

    .mobile-only-toggle {
        display: inline-flex !important;
    }
    /* show only hamburger */
    .mobile-menu {
        position: fixed;
        top: 54px;
        right: 14px;
        background: #edecf1;
        border-radius: 16px;
        width: 60px;
        min-width: 56px;
        min-height: 73px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        box-shadow: 0 8px 32px rgba(30, 87, 153, 0.18);
        z-index: 3000;
    }

    .mobile-menu .login-link,
    .mobile-menu .mobile-lang-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        padding: 0;
        margin: 0 auto;
        border-radius: 50%;
        background: transparent;
        color: #222 !important;
        font-size: 1.7rem;
        transition: background 0.2s, color 0.2s, box-shadow 0.2s;
        box-shadow: none;
        outline: none;
        cursor: pointer;
    }
    .mobile-menu .login-link:active,
    .mobile-menu .mobile-lang-toggle:active,
    .mobile-menu .login-link:focus,
    .mobile-menu .mobile-lang-toggle:focus {
        background: #e0d7d71f;
    }

    .mobile-menu svg,
    .mobile-menu img {
        width: 32px;
        height: 32px;
        color: #222 !important;
        fill: #222 !important;
        filter: none !important;
        margin: 0 auto;
        display: block;
        pointer-events: none;
        transition: color 0.2s, fill 0.2s;
    }
    .mobile-menu .login-link svg,
    .mobile-menu .login-link img,
    .mobile-menu .mobile-lang-toggle svg,
    .mobile-menu .mobile-lang-toggle img {
        color: #222 !important;
        fill: #222 !important;
        filter: none !important;
    }

    .mobile-menu .mobile-lang-toggle img {
        filter: brightness(0) saturate(100%) !important;
    }

}

.lang-sidebar .login-btn {
  display: flex;
  align-items: center;
  gap: 10px;
}


/* ============================= */
/* DESKTOP */
/* ============================= */
@media (min-width: 901px) {
  /* show desktop items */
  .language-switch {
    display: flex !important;
  }

  .login-link {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* hide mobile items */
    .mobile-hamburger {
        display: none;
    }
  
  .mobile-only-toggle {
    display: none !important;
  }
  .mobile-lang-toggle {
    display: none !important;
  }
}


/* Desktop globe image placed in header (visible on desktop, hidden on narrow screens) */
.nav-globe-desktop {
    display: none; /* hidden by default for mobile */
    width: 28px;
    height: 28px;
    object-fit: contain;
    margin-left: 12px;
    transition: opacity 0.25s ease, transform 0.25s ease;
    vertical-align: middle;
}

@media (min-width: 769px) {
    .nav-globe-desktop {
        display: inline-block;
    }
}

/* when header becomes scrolled, visual treatments (if any) apply; swapping image src handles color */
.main-header.scrolled .nav-globe-desktop {
    transform: translateY(-1px);
}

/* Change globe icon color when header is scrolled */
.main-header.scrolled .mobile-lang-toggle {
    color: #1e5799;
}
.main-header.scrolled .mobile-lang-toggle:hover {
    background: rgba(30, 87, 153, 0.1);
}

.lang-sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 300px;
    height: 100vh;
    background: white;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    z-index: 3000;
    padding: 80px 30px 30px;
}
.lang-sidebar.open {
    right: 0;
}
.lang-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 2999;
}
.lang-sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}
.lang-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 20px;
}
.lang-sidebar-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1e5799;
}
.lang-sidebar-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #666;
    cursor: pointer;
    padding: 5px;
}
.lang-sidebar-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.lang-sidebar-btn {
    background: #f8f9fa;
    border: 2px solid transparent;
    color: #1e5799;
    padding: 15px 20px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
}
.lang-sidebar-btn:hover {
    background: #e9ecef;
    transform: translateX(5px);
}
.lang-sidebar-btn.active {
    background: #1e5799;
    color: white;
    border-color: #1e5799;
}

/* Footer Styles - Horizontal Layout */
.footer {
    background: linear-gradient(135deg, #1e5799, #2989d8);
    color: white;
    margin-top: 60px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Partie haute du footer - Logos */
.footer-top {
    width: 100%;
    padding: 30px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.footer-logo-link {
    display: block;
    transition: transform 0.3s ease;
}

.footer-logo-link:hover {
    transform: scale(1.05);
}

.footer-logo-soprema {
    height: 100px;
    width: auto;
    object-fit: contain;
}

.footer-ntl-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.powered-by-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    margin: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    white-space: nowrap;
}

.footer-ntl-link {
    display: block;
    transition: transform 0.3s ease;
}

.footer-ntl-link:hover {
    transform: scale(1.05);
}

.footer-logo-ntl {
    height: 60px;
    width: auto;
    object-fit: contain;
}

/* Partie basse du footer - Liens légaux */
.footer-bottom,
.footer .footer-bottom {
    background: #212322; /* updated to requested color */
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    width: 100%;
    padding: 18px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    box-sizing: border-box;
}

.footer-copyright {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    font-weight: 500;
    white-space: nowrap;
}

.footer-link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: nowrap;
}

.footer-link:hover {
    color: white;
    text-decoration: underline;
}


/* SVG Fallback Styles */
.svg-fallback {
    display: inline-block;
    text-align: center;
    font-size: inherit;
    line-height: 1;
    vertical-align: middle;
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 2px;
    user-select: none;
}

/* Fallback spécifique pour les logos */
.nav-logo .svg-fallback {
    background: rgba(255,255,255,0.2);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
}

.main-header.scrolled .nav-logo .svg-fallback {
    background: rgba(30, 87, 153, 0.1);
    color: #1e5799;
}

/* ===== RESPONSIVE IMPROVEMENTS ===== */

/* Tablet breakpoint - Enhanced */
@media (max-width: 1024px) and (min-width: 769px) {
    .form-container { padding: 40px 30px; }
    .form-section { padding: 30px 40px; }
    .hero-title { font-size: 2.2rem; }
    .hero-intro { font-size: 1.15rem; }
    .hero-subtitle { font-size: 1.6rem; }

    /* Intro section responsive - Tablet */
    .intro-section { padding: 40px 40px 35px 40px; }
    .intro-description { font-size: 1.05rem; margin-bottom: 30px; }
    .intro-criteria-grid { grid-template-columns: 1fr; gap: 20px; }
    .intro-card { padding: 20px; }
    .intro-card h3 { font-size: 1.05rem; }
    .intro-card li { font-size: 0.9rem; }
    .intro-examples { font-size: 0.95rem; padding: 15px 20px; }
    .intro-cta { font-size: 1.2rem; }

    /* Info section responsive - Tablet */
    .info-section { padding: 60px 30px; }
    .info-title { font-size: 1.9rem; }
    .info-intro { font-size: 1.1rem; }
    .info-criteria-grid { grid-template-columns: 1fr; gap: 25px; }
    .info-card { padding: 25px; }
    .info-card h3 { font-size: 1.2rem; }
    .info-list li { font-size: 1rem; }
    .info-examples { padding: 20px 25px; }
    .info-examples p { font-size: 1rem; }
    .info-cta { font-size: 1.4rem; }

    /* Fix 4-cols grid on tablet - convert to 2x2 layout */
    .form-row-4-cols {
        grid-template-columns: 1fr 1fr !important; /* Force 2x2 layout to prevent 4-cols compression */
        gap: 24px;
        row-gap: 20px;
    }

    /* Fix tablet margins - full width hero, reasonable container margins */
    .hero-header {
        margin: 0;
        border-radius: 0;
        min-height: clamp(500px, 70vh, 800px);
    }

    .container {
        margin-bottom: 0 20px 60px 20px;
        border-radius: 0 0 16px 16px;
        padding: 30px 20px;
    }

    .hero-section {
        padding: 150px 40px 120px 40px;
        min-height: clamp(500px, 70vh, 800px);
    }

    .form-row { gap: 20px; }

    /* Hide parallax icons in hero section */
    .parallax-layer.mission-icons-layer { display: none; }

    /* Convert form-section to single column */
    .form-row-2-cols { grid-template-columns: 1fr; gap: 20px; }

    /* Language sidebar responsive improvements */
    .lang-sidebar {
        max-width: 280px;
    }

    /* Header responsive adjustments */
    .header-nav {
        height: 70px;
        padding: 0 30px;
        padding-top: 10px;
        margin: 10px 0;
    }

    .nav-logo {
        left: 30px;
    }

    .nav-logo-img {
        height: 65px;
        max-width: 180px;
    }
}

/* Fix "Votre idée" section - single column under 1024px */
@media (max-width: 1024px) {
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }

    .form-row-2-cols {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }

    /* Reduce textarea height for better tablet/mobile experience */
    textarea {
        min-height: 100px !important;
    }

    /* Specific adjustment for project description */
    #projectDescription {
        min-height: 100px !important;
    }

    /* Adjust textarea-with-buttons container */
    .textarea-with-buttons {
        min-height: auto !important;
        height: auto !important;
        display: flex;
        flex-direction: column;
    }

    .textarea-with-buttons textarea {
        min-height: 80px !important;
        padding-bottom: 10px !important;
    }

    /* ✅ Place suggestions at bottom (no overlay) */
    .suggestions-overlay {
        position: static;
        margin-top: 8px;
        padding: 12px;
        background: #f8f9fa;
        border-radius: 8px;
        border-top: 2px solid #e0e6ed;
        max-height: 200px;
        overflow: hidden;
    }

    /* ✅ Hide suggestions if not enough space */
    @media (max-height: 700px) {
        .suggestions-overlay {
            display: none;
        }
    }

    /* Make suggestion buttons wrap better on small screens */
    .suggestion-buttons {
        gap: 8px;
        flex-wrap: wrap;
    }
}

/* Medium tablet breakpoint - New */
@media (max-width: 900px) and (min-width: 769px) {
    .hero-title { font-size: 2.5rem; }
    .hero-description { font-size: 1.1rem; }

    /* Optimize spacing for medium tablet - MAINTAIN 2x2 grid */
    .form-row-4-cols {
        grid-template-columns: 1fr 1fr; /* Force 2x2 layout on medium tablet */
        gap: 26px;
        row-gap: 22px;
    }

    .form-row-3-cols {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    /* Maximize available space on medium tablet */
    .container {
        margin: 0 15px 60px 15px;
        padding: 25px 15px;
    }
}

/* Medium screens - Footer optimization (769px - 1150px) */
@media (max-width: 1150px) and (min-width: 769px) {
    /* Footer adjustments for medium screens */
    .footer-bottom {
        padding: 18px 30px;
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-link {
        white-space: normal;
        font-size: 0.8rem;
        line-height: 1.3;
        text-align: center;
    }

    .footer-copyright {
        font-size: 0.8rem;
        text-align: center;
    }

    .footer-top {
        padding: 30px 30px;
    }

    .footer-logo-soprema {
        height: 80px;
    }

    .footer-logo-ntl {
        height: 50px;
    }
}

/* Small screens - Force 1 column layout for criteria cards */
@media (max-width: 488px) {
    .intro-criteria-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Small tablet/large mobile - Enhanced */
@media (max-width: 768px) {
    .header-nav { padding: 0 20px; height: 60px; width: 100%; box-sizing: border-box; margin: 10px 0; }
    .nav-logo { left: 20px; }
    .nav-logo-img { height: 50px; max-width: 150px; }
    .nav-subtitle { font-size: clamp(0.8rem, 2.2vw, 1rem); }

    /* Mobile logo will be handled by JavaScript */

    /* Hide desktop language switch, show mobile toggle */
    .language-switch { display: none; }
    .mobile-lang-toggle { display: flex; }

    /* Language sidebar full width on small screens */
    .lang-sidebar {
        width: 100%;
        max-width: 100%;
        right: -100%;
    }

    /* Hide parallax icons in hero section on mobile */
    .parallax-layer.mission-icons-layer { display: none; }

    /* Fix mobile hero margins - remove side margins only for hero */
    .hero-header {
        margin: 0;
        border-radius: 0;
        min-height: clamp(450px, 65vh, 600px);
    }

    /* Keep container margins for form only */
    .container {
        margin-bottom: 60px;
        border-radius: 0 0 16px 16px;
    }

    .hero-section {
        grid-template-columns: 1fr;
        padding: 120px 30px 100px 30px;
        text-align: center;
        gap: 32px;
        min-height: clamp(450px, 65vh, 600px);
    }
    .hero-title { font-size: 2rem; }
    .hero-intro { font-size: 1.1rem; }
    .hero-subtitle { font-size: 1.4rem; }
    .hero-buttons { justify-content: center; }
    .btn-hero-primary, .btn-hero-secondary { padding: 14px 24px; font-size: 1rem; }

    /* Intro section responsive - Mobile */
    .intro-section { padding: 35px 25px 30px 25px; }
    .intro-description { font-size: 1rem; margin-bottom: 25px; }
    .intro-criteria-grid { gap: 18px; }
    .intro-card { padding: 18px; }
    .intro-card h3 { font-size: 1rem; }
    .intro-card li { font-size: 0.85rem; margin-bottom: 10px; padding-left: 18px; }
    .intro-examples { font-size: 0.9rem; padding: 14px 18px; }
    .intro-cta { font-size: 1.15rem; }

    /* Info section responsive - Mobile */
    .info-section { padding: 50px 25px; }
    .info-title { font-size: 1.6rem; line-height: 1.3; }
    .info-intro { font-size: 1rem; margin-bottom: 40px; }
    .info-criteria-grid { gap: 20px; }
    .info-card { padding: 20px; }
    .info-card h3 { font-size: 1.1rem; }
    .info-list li { font-size: 0.95rem; margin-bottom: 12px; }
    .info-examples { padding: 18px 20px; flex-direction: column; gap: 10px; text-align: center; }
    .info-examples-icon { font-size: 1.8rem; }
    .info-examples p { font-size: 0.95rem; }
    .info-cta { font-size: 1.2rem; padding: 20px 0; }

    .form-container { padding: 40px 30px; }
    .form-section { padding: 30px 40px; }

    /* All grids become single column on mobile */
    .form-row-2-cols { grid-template-columns: 1fr; gap: 24px; }
    .form-row-3-cols { grid-template-columns: 1fr; gap: 22px; }
    .form-row-4-cols { grid-template-columns: 1fr; gap: 22px; }

    /* Footer responsive */
    .footer-top {
        flex-direction: column;
        gap: 25px;
        padding: 30px 20px 30px;
    }

    .footer-logo-soprema {
        height: 80px;
    }

    .footer-ntl-section {
        flex-direction: column;
        gap: 10px;
    }

    .footer-logo-ntl {
        height: 50px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        padding: 18 25px;
        text-align: center;
    }

    .footer-link {
        white-space: normal;
        text-align: center;
    }
}

/* Ajustement Hero section - 600px à 768px */
@media (min-width: 600px) and (max-width: 768px) {
    .hero-section {
    padding: 120px 25px 150px 25px;
    min-height: clamp(400px, 60vh, 550px);
    gap: 0px;
    }

}

/* Medium mobile breakpoint - New */
@media (max-width: 600px) {
    .hero-title { font-size: 1.8rem; }
    .hero-intro { font-size: 1rem; }
    .hero-subtitle { font-size: 1.2rem; }

    /* Intro section - Medium mobile */
    .intro-section { padding: 30px 20px 25px 20px; }
    .intro-description { font-size: 0.95rem; margin-bottom: 20px; }
    .intro-card { padding: 15px; }
    .intro-card h3 { font-size: 0.95rem; }
    .intro-card li { font-size: 0.8rem; padding-left: 16px; }
    .intro-examples { font-size: 0.85rem; padding: 12px 15px; }
    .intro-cta { font-size: 1.05rem; }

    /* Info section - Medium mobile */
    .info-section { padding: 40px 20px; }
    .info-title { font-size: 1.4rem; }
    .info-intro { font-size: 0.95rem; margin-bottom: 35px; }
    .info-card { padding: 18px; }
    .info-card h3 { font-size: 1rem; }
    .info-list li { font-size: 0.9rem; margin-bottom: 10px; padding-left: 20px; }
    .info-examples { padding: 15px 18px; }
    .info-examples p { font-size: 0.9rem; }
    .info-cta { font-size: 1.1rem; }

    .form-section { padding: 25px 20px; }

    /* Further reduce hero on medium mobile - remove side margins */
    .hero-header {
        margin: 0;
        border-radius: 0;
        min-height: clamp(400px, 60vh, 550px);
    }

    .hero-section {
        padding: 120px 25px 150px 25px;
        min-height: clamp(400px, 60vh, 550px);
        gap: 0px;
    }

    .btn-hero-primary, .btn-hero-secondary {
        padding: 12px 20px;
        font-size: 0.95rem;
        flex-direction: column;
        gap: 4px;
    }

    /* Improve button spacing on mobile */
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    /* Better form field sizing */
    input, textarea, select {
        padding: 14px 16px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* Small mobile breakpoint - Enhanced */
@media (max-width: 480px) {
    .hero-title { font-size: 1.6rem; line-height: 1.1; }
    .hero-intro { font-size: 0.95rem; }
    .hero-subtitle { font-size: 1.1rem; }
    .btn-hero-primary, .btn-hero-secondary { padding: 12px 20px; font-size: 0.9rem; }

    /* Intro section - Small mobile */
    .intro-section { padding: 25px 15px 20px 15px; }
    .intro-description { font-size: 0.9rem; margin-bottom: 18px; }
    .intro-criteria-grid { gap: 15px; }
    .intro-card { padding: 12px; }
    .intro-card h3 { font-size: 0.9rem; margin-bottom: 12px; }
    .intro-card li { font-size: 0.75rem; margin-bottom: 8px; padding-left: 14px; }
    .intro-card li::before { font-size: 1rem; }
    .intro-examples { font-size: 0.8rem; padding: 10px 12px; }
    .intro-cta { font-size: 1rem; }

    /* Info section - Small mobile */
    .info-section { padding: 35px 15px; }
    .info-title { font-size: 1.3rem; }
    .info-intro { font-size: 0.9rem; margin-bottom: 30px; }
    .info-card { padding: 15px; }
    .info-card-header { gap: 10px; }
    .info-icon { font-size: 1.5rem; }
    .info-card h3 { font-size: 0.95rem; }
    .info-list li { font-size: 0.85rem; margin-bottom: 8px; padding-left: 18px; }
    .info-list li::before { font-size: 1rem; }
    .info-examples { padding: 12px 15px; }
    .info-examples-icon { font-size: 1.5rem; }
    .info-examples p { font-size: 0.85rem; }
    .info-cta { font-size: 1rem; padding: 15px 0; }

    .form-container { padding: 20px 15px; }
    .form-section { padding: 20px 15px; }
    .section-title { font-size: 1.1rem; }
    label { font-size: 0.9rem; }
    input, textarea, select { padding: 12px 15px; font-size: 16px; } /* 16px prevents zoom */
    .header-nav { padding: 0 15px; height: 56px; width: 100%; box-sizing: border-box; margin: 10px 0; }
    .nav-logo { left: 15px; }
    .nav-logo-img { height: 45px; max-width: 120px; }
    .nav-subtitle { font-size: clamp(0.75rem, 2.7vw, 0.9rem); }

    /* Compact hero for small mobile - no margins */
    .hero-header {
        margin: 0;
        border-radius: 0;
        min-height: clamp(380px, 58vh, 500px);
    }

    .hero-section {
        padding: 100px 20px 150px 20px;
        min-height: clamp(380px, 58vh, 500px);
        gap: 0px;
    }

    /* Keep container margins for form */
    .container { margin-bottom:40px; padding: 10px;}

    /* Hide desktop language switch, show mobile toggle */
    .language-switch { display: none; }
    .mobile-lang-toggle { display: flex; }

    /* Language sidebar improvements for very small screens */
    .lang-sidebar {
        padding: 80px 20px 20px;
    }

    /* Hide parallax icons in hero section */
    .parallax-layer.mission-icons-layer { display: none; }

    /* Intégrer les suggestions directement dans le textarea pour mobile */
    .textarea-with-buttons {
        min-height: auto;
        display: flex;
        flex-direction: column;
        border: none;
        background: transparent;
    }

    .textarea-with-buttons textarea {
        padding: 12px 15px;
        min-height: 80px;
        border: 2px solid #e0e6ed;
        border-radius: 8px;
        margin-bottom: 12px;
        order: 1;
    }

    .suggestions-overlay {
        position: relative;
        bottom: auto;
        left: 0;
        right: 0;
        padding: 12px;
        background: #f8f9fa;
        border-radius: 8px;
        border: 2px solid #e0e6ed;
        order: 2;
    }

    .suggestions-label {
        font-size: 0.8rem;
        margin-bottom: 10px;
        display: block;
    }

    /* Better suggestion button sizing - WCAG 2.1 compliant (44x44px minimum touch target) */
    .suggestion-btn {
        padding: 10px 16px;
        font-size: 0.85rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ============================= */
/* HIDE SUGGESTIONS ON MOBILE */
/* ============================= */
@media (max-width: 900px) {
  .suggestions-overlay {
    display: none !important;
  }
}



/* Extra small screens */
@media (max-width: 360px) {
    .hero-title { margin-top: 20px ; font-size: 1.4rem; line-height: 1.15; }
    .hero-intro { font-size: 0.9rem; }
    .hero-subtitle { font-size: 1rem; }

    /* Intro section - Extra small */
    .intro-section { padding: 20px 12px 18px 12px; }
    .intro-description { font-size: 0.85rem; margin-bottom: 15px; }
    .intro-criteria-grid { gap: 12px; }
    .intro-card { padding: 10px; }
    .intro-card h3 { font-size: 0.85rem; margin-bottom: 10px; }
    .intro-card li { font-size: 0.7rem; margin-bottom: 6px; padding-left: 12px; }
    .intro-card li::before { font-size: 0.9rem; }
    .intro-examples { font-size: 0.75rem; padding: 8px 10px; }
    .intro-cta { font-size: 0.9rem; }

    /* Info section - Extra small */
    .info-section { padding: 30px 12px; }
    .info-title { font-size: 1.2rem; line-height: 1.2; }
    .info-intro { font-size: 0.85rem; margin-bottom: 25px; }
    .info-criteria-grid { gap: 15px; }
    .info-card { padding: 12px; }
    .info-card h3 { font-size: 0.9rem; }
    .info-list li { font-size: 0.8rem; margin-bottom: 6px; padding-left: 15px; }
    .info-examples { padding: 10px 12px; }
    .info-examples p { font-size: 0.8rem; }
    .info-cta { font-size: 0.95rem; padding: 12px 0; }

    /* Very compact hero for tiny screens - no margins */
    .hero-header {
        margin: 0;
        border-radius: 0;
        min-height: clamp(360px, 55vh, 450px);
    }

    .hero-section {
        padding: 80px 50px 150px 50px;
        min-height: clamp(360px, 55vh, 450px);
        gap: 5px;
    }

    .form-section { padding: 15px 10px; }
    .section-title { font-size: 1rem; }

    /* Stack form elements better on very small screens */
    .form-row { gap: 15px; }

    /* Adjust language sidebar for very small screens */
    .lang-sidebar {
        padding: 70px 15px 15px;
    }

    .lang-sidebar-btn {
        padding: 12px 15px;
        font-size: 0.9rem;
    }
}

/* Landscape phone specific optimizations */
@media (max-width: 850px) and (max-height: 500px) and (orientation: landscape) {
    /* Very compact hero for landscape - show form immediately */
    .hero-header {
        min-height: 350px;
    }

    .hero-section {
        min-height: 350px;
        padding: 35px 30px 50px 30px;
        gap: 18px;
    }

    .hero-title { font-size: 2rem; line-height: 1.1; }
    .hero-intro { font-size: 1.05rem; }
    .hero-subtitle { font-size: 1.3rem; }

    .hero-buttons {
        gap: 12px;
    }

    .btn-hero-primary, .btn-hero-secondary {
        padding: 10px 18px;
        font-size: 0.85rem;
    }

    /* Optimize header for landscape */
    .header-nav { height: 50px; padding: 0 20px; margin: 10px 0; }
    .nav-logo-img { height: 40px; max-width: 130px; }
    .nav-subtitle { font-size: 0.75rem; }
    .mobile-lang-toggle { min-height: 38px; padding: 8px 12px; font-size: 0.85rem; }
}

/* High DPI/Retina display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure crisp rendering on retina displays */
    .nav-logo-img,
    .footer-logo-simple,
    .footer-logo-NTL {
        image-rendering: crisp-edges;
    }
}

/* === LOGIN PAGE SPECIFIC STYLES === */
.login-hero {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
    position: relative;
    min-height: calc(100vh - 250px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: white;
    padding: 120px 20px 60px 20px;
    box-sizing: border-box;
}

.login-container {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 380px;
    margin-top: 40px;
    padding: 40px 32px;
    text-align: center;
    position: relative;
    z-index: 10;
    animation: fadeUp 1s ease forwards;
}

.login-container h1 {
    font-size: 1.7rem;
    color: #1e5799;
    margin-bottom: 22px;
    font-weight: 700;
}

.login-form {
    display: flex;
    flex-direction: column;
}

.login-form input {
    padding: 13px 16px;
    border: 2px solid #e0e6ed;
    border-radius: 10px;
    font-size: 0.95rem;
    margin-bottom: 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.login-form input:focus {
    border-color: #2989d8;
    box-shadow: 0 0 0 4px rgba(41, 137, 216, 0.1);
    outline: none;
}

.login-form button {
    background: linear-gradient(135deg, #2989d8, #1e5799);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 13px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-form button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(30, 87, 153, 0.4);
}

.login-error-message {
    color: #e74c3c;
    font-size: 0.9rem;
    display: none;
    margin-top: 15px;
}

.forgot-password-container {
    text-align: center;
    margin-top: 12px;
    margin-bottom: 18px;
}

.forgot-password-link {
    color: #2989d8;
    font-size: 0.875rem;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
}

.forgot-password-link:hover {
    color: #1e5799;
    text-decoration: none;
}

.forgot-password-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: linear-gradient(135deg, #2989d8, #1e5799);
    transition: width 0.3s ease;
}

.forgot-password-link:hover::after {
    width: 100%;
}

.particles-layer-login {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.6)"/><circle cx="150" cy="80" r="1.5" fill="rgba(255,255,255,0.4)"/><circle cx="250" cy="120" r="2.5" fill="rgba(255,255,255,0.5)"/><circle cx="350" cy="60" r="1" fill="rgba(255,255,255,0.7)"/><circle cx="80" cy="200" r="1.8" fill="rgba(255,255,255,0.3)"/><circle cx="300" cy="180" r="1.2" fill="rgba(255,255,255,0.5)"/><circle cx="120" cy="250" r="2.2" fill="rgba(255,255,255,0.4)"/><circle cx="380" cy="220" r="1.6" fill="rgba(255,255,255,0.6)"/><circle cx="20" cy="180" r="1.4" fill="rgba(255,255,255,0.5)"/><circle cx="200" cy="40" r="1.1" fill="rgba(255,255,255,0.7)"/><circle cx="280" cy="280" r="2.8" fill="rgba(255,255,255,0.3)"/><circle cx="160" cy="160" r="1.3" fill="rgba(255,255,255,0.6)"/></svg>') repeat;
    animation: particleFloatRealistic 25s linear infinite;
    opacity: 0.4;
}

.login-footer {
    margin-top: 20px;
    font-size: 0.85rem;
    color: #6c757d;
}

.login-footer a {
    color: #2989d8;
    text-decoration: none;
}

.login-footer a:hover {
    text-decoration: underline;
}

.lang-switch-login {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 25px;
}

.lang-switch-login button {
    background: #f8f9fa;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    color: #1e5799;
    font-weight: 600;
    transition: all 0.3s ease;
}

.lang-switch-login button.active {
    background: #1e5799;
    color: white;
    box-shadow: 0 2px 8px rgba(30, 87, 153, 0.3);
}

/* Transition screen styles for login */
.transition-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1d4ed8, #2563eb, #1e40af);
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease;
    z-index: 5000;
}

.transition-screen.visible {
    opacity: 1;
}

.transition-content {
    text-align: center;
    color: white;
    animation: fadeUp 1.2s ease forwards;
}

.transition-logo {
    width: 160px;
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}

.transition-content h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.transition-content p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    color: rgba(255,255,255,0.9);
}

.loader {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes fadeOutUp {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-40px); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Login page body override */
body.login-page {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

body.login-page .main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
}

body.login-page .footer {
    position: relative;
    margin-top: auto;
    z-index: 1000;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: none;
}

body.login-page .footer-top {
    background: transparent;
    border-bottom: none;
}

body.login-page .footer-bottom {
    background: transparent;
}

body.login-page .footer-link:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 2px 4px;
    transition: background 0.3s ease;
}

/* Print styles */
@media print {
    .main-header,
    .nav-actions,
    .hero-section,
    .parallax-layer,
    .footer,
    .mobile-lang-toggle,
    .lang-sidebar,
    .suggestion-btn {
        display: none !important;
    }

    .container {
        margin: 0;
        box-shadow: none;
        border-radius: 0;
    }

    .form-section {
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }
}

/* ===== Accessibility Enhancements ===== */

/* Screen reader only - Visible uniquement pour les lecteurs d'écran */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus visible amélioré pour tous les éléments interactifs */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(41, 137, 216, 0.2);
}

/* Focus pour les boutons de langue */
.lang-btn:focus-visible,
.lang-sidebar-btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(41, 137, 216, 0.3);
}

/* Focus pour les suggestions */
.suggestion-btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(41, 137, 216, 0.2);
}

/* Focus pour les radio et checkbox */
.radio-item:focus-within,
.checkbox-item:focus-within {
    outline: none !important;
    border-color: #2989d8 !important;
    box-shadow: 0 0 0 2px #2989d833 !important;
    border-radius: 8px;
}

/* Amélioration de la visibilité du focus sur les radio/checkbox */
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
    outline: none !important;
    border-color: #2989d8 !important;
    box-shadow: 0 0 0 2px #2989d833 !important;
    border-radius: 8px;
}

/* État hover et focus combinés pour meilleure UX */
button:hover:focus-visible,
a:hover:focus-visible {
    outline: 3px solid var(--color-primary);
    box-shadow: 0 0 0 5px rgba(41, 137, 216, 0.3);
}

/* Respect de prefers-reduced-motion */
@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;
    }

    /* Désactiver les animations parallax */
    .parallax-layer,
    .gear {
        animation: none !important;
        transform: none !important;
    }
}

/* Amélioration du contraste pour les états désactivés */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f0f0f0;
    color: #666;
}

/* Indicateurs visuels non basés uniquement sur la couleur */
.error-message {
    border-left: 4px solid var(--color-error);
    padding-left: 12px;
}

.form-group.error input,
.form-group.error select,
.form-group.error textarea {
    border: 2px solid var(--color-error);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23e74c3c' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px 20px;
    padding-right: 40px;
}

/* Zone de clic minimale (44x44px WCAG) */
.lang-btn,
.mobile-lang-toggle {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .lang-btn,
    .mobile-lang-toggle,
    .lang-sidebar-btn {
        min-width: 48px;
        min-height: 48px;
    }
}

/* Amélioration de la lisibilité avec text-spacing */
@media (min-width: 769px) {
    p,
    li,
    label {
        line-height: 1.6;
        letter-spacing: 0.01em;
    }
}

/* Support pour le mode sombre (si l'OS le préfère) */
@media (prefers-color-scheme: dark) {
    /* Note: Désactivé par défaut, à activer si besoin */
    /* body {
        background-color: #1a1a1a;
        color: #f0f0f0;
    } */
}

/* État de haute luminosité */
@media (prefers-contrast: high) {
    button,
    input,
    select,
    textarea {
        border-width: 2px;
    }

    .btn-primary {
        border: 2px solid #000;
    }

    .error-message {
        border-left-width: 6px;
    }
}

/* Indicateur de chargement accessible */
.loading-indicator {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(41, 137, 216, 0.3);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Gear icon used as a submit loader — rotates while submitting */
.loading-gear {
    width: 24px;       
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    object-fit: contain;

    /* FIX: remove background box */
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    /* Rotation */
    animation: gear-spin 0.5s linear infinite;
    -webkit-animation: gear-spin 0.5s linear infinite;
}

.btn.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


@keyframes gear-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Slightly smaller variant for very small mobile buttons to avoid layout jump */
@media (max-width: 360px) {
    .loading-gear { width: 18px; height: 18px; padding: 5px; margin-right: 8px; border-radius: 5px; }
}

/* Message d'état pour lecteurs d'écran */
[role="status"],
[role="alert"] {
    position: relative;
}

/* Amélioration de la sidebar pour l'accessibilité */
.lang-sidebar[aria-hidden="false"] {
    /* S'assurer que la sidebar est visible et interactive */
    pointer-events: auto;
    visibility: visible;
}

.lang-sidebar[aria-hidden="true"] {
    /* S'assurer que la sidebar est masquée */
    pointer-events: none;
    visibility: hidden;
}

/* Skip link (si ajouté dans le HTML) */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100000;
}

.skip-link:focus {
    top: 0;
}

/* Annonces pour lecteurs d'écran */
[aria-live="polite"],
[aria-live="assertive"] {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Amélioration des tooltips pour accessibilité */
[title]:hover::after {
    /* Les tooltips natifs sont accessibles, mais peuvent être améliorés */
    content: attr(title);
    position: absolute;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    white-space: nowrap;
    z-index: 1000;
}

.login-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.95rem;
  border-width: 10px;
  border-radius: 999px;
  border-color: #ffffff;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: none;
  transition: transform 0.2s ease, background-color 0.2s ease,
    color 0.2s ease;
}

.login-link:hover,
.login-link:focus-visible {
  background: #f0f4ff;
  color: #0a0f1c;
  transform: translateY(-1px);
}

.login-link:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.45);
  outline-offset: 2px;
}

.login-link .login-icon {
  width: 22px;
  height: 22px;
  display: block;
}

.main-header.scrolled .login-link {
  background: #0072ce;
  color: #ffffff;
}

.main-header.scrolled .login-link:hover,
.main-header.scrolled .login-link:focus-visible {
  background: #005fa9;
  color: #ffffff;
}

.main-header.scrolled .login-link:focus-visible {
  outline: 3px solid rgba(0, 114, 206, 0.35);
}

.btn-action {
  position: relative;
}

/* Tooltip hidden by default */
.btn-action .tooltip {
  position: absolute;
  bottom: -36px;            /* ⬇ shows below button */
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}

/* Show tooltip on hover */
.btn-action:hover .tooltip {
  opacity: 1;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 👈 ek row me 5 */
  gap: 20px 24px; /* row-gap | column-gap */
}


/* Fin des styles d'accessibilité */