/* ============================================
    JOURS DE RETRAITE - Design Moderne Navy & Gold
    ============================================ */

/* ============================================
    1. VARIABLES CSS
    ============================================ */
:root {
    color-scheme: only light;
    color-adjust: exact;
    forced-color-adjust: none;
    /* Couleurs principales - Palette Navy & Gold */
    --navy-900: #0a192f;
    --navy-800: #112240;
    --navy-700: #1d3557;
    --navy-600: #233554;
    --navy-500: #2d4a6f;
    --navy-400: #3d5a80;
    --navy-300: #4a6fa5;

    --gold-500: #d4af37;
    --gold-400: #e6c55a;
    --gold-300: #f0d78c;
    --gold-200: #f8e6b8;
    --gold-100: #fdf5dc;

    /* Neutres */
    --white: #ffffff;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;

    /* Gradients */
    --gradient-navy: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
    --gradient-gold: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-400) 50%, var(--gold-300) 100%);
    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    --gradient-card: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);

    /* Ombres */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-gold: 0 4px 20px rgba(212, 175, 55, 0.3);
    --shadow-glow: 0 0 30px rgba(212, 175, 55, 0.2);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-slow: 600ms cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;
}

/* ============================================
    2. POLICES & BASE
    ============================================ */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--gradient-navy) !important;
    color: var(--white);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.5;
}

/* ============================================
    3. LAYOUT PRINCIPAL - Hauteur fixe mobile
    ============================================ */
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 100vw;
    position: relative;
    /* overflow: hidden; */
    /* Cause coupure ombre bouton */
    overflow-x: hidden;
    /* Garder l'overflow-x pour éviter le scroll horizontal */
    overflow-y: auto;
    /* Permet le scroll vertical sur tous les appareils */
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.4rem 0.1rem 0.1rem 0.1rem;
    /* Significantement réduit pour compacter le haut */
}

.main-content::-webkit-scrollbar {
    display: none;
}

/* ============================================
    4. HEADER AVEC BATEAU STYLISÉ
    ============================================ */
.header {
    padding: 0;
    position: relative;
    flex-shrink: 0;
    margin-bottom: 0.2rem;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.25rem;
    overflow: visible;
    margin-left: -0.5rem;
    margin-top: 0;
    /* Removed negative margin -1rem */
}

.header-boat-wrap {
    position: relative;
    display: inline-block;
    transform: translateZ(0);
}

.header-boat {
    width: 45px;
    height: auto;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .header-boat {
        width: 60px;
    }
}



.header-title {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--gold-500);
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
    margin-bottom: 0;
    line-height: 1.1;
    white-space: nowrap;
    overflow: visible;
    max-width: 100%;
    display: inline-block;
    position: relative;
}

/* Title reveal animation moved to index.html for performance */


.header-subtitle {
    font-size: 1.1rem !important;
    color: var(--gray-400);
    font-weight: 400;
    line-height: 1.2;
    display: block;
}

/* Bouton logo rond Linktree */
.header-logo-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    position: relative;
    text-decoration: none;
    transition: transform var(--transition-base);
}

.header-logo-link:hover {
    transform: scale(1.08);
}

.header-logo-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gold-500);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3), 0 0 0 2px rgba(212, 175, 55, 0.1);
    transition: all var(--transition-base);
    cursor: pointer;
}

.header-logo-link:hover .header-logo-img {
    border-color: var(--gold-400);
    box-shadow: 0 6px 25px rgba(212, 175, 55, 0.5), 0 0 0 3px rgba(212, 175, 55, 0.2);
}

/* Indicateur visuel lien externe */
.header-logo-link::before {
    content: "🔗";
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 14px;
    background: var(--navy-800);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gold-500);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 1;
    transition: all var(--transition-base);
}

.header-logo-link:hover::before {
    transform: scale(1.1);
    background: var(--gold-500);
}

/* Tooltip */
.header-logo-tooltip {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-card);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: 0.75rem;
    color: var(--gold-400);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
    pointer-events: none;
}

.header-logo-link:hover .header-logo-tooltip {
    opacity: 1;
    visibility: visible;
    bottom: -35px;
}

/* Responsive pour le bouton logo */
@media (max-width: 380px) {
    .header-logo-img {
        width: 40px;
        height: 40px;
    }
    
    .header-logo-link::before {
        width: 18px;
        height: 18px;
        font-size: 11px;
        top: -6px;
        right: -6px;
    }
}

@media (min-width: 768px) {
    .header-logo-img {
        width: 56px;
        height: 56px;
    }
}

/* ============================================
    5. CARTES MODERNES - Glassmorphism
    ============================================ */
.card {
    background: var(--gradient-card);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 0.4rem !important;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
    transform: translateZ(0);
}

.card> :last-child {
    margin-bottom: 0;
}

.card-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gold-400);
    margin-bottom: 0;
}

/* ============================================
    6. CHAMPS DE SAISIE
    ============================================ */
.input-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 0.1rem;
    /* Reduced from 0.4rem */
}

/* On retire la marge si l'élément est suivi d'un conteneur caché ou s'il est dernier */
.input-wrapper:last-of-type {
    margin-bottom: 0;
}

.input-wrapper .input-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold-500);
    font-size: 0.75rem;
    z-index: 1;
}

.input-field {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    /* Reduced from 0.6rem */
    font-size: 1rem;
    /* Reduced from 1rem */
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    color: var(--white);
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    outline: none;
    transition: all var(--transition-base);
}

.input-field::placeholder {
    color: var(--gray-500);
    font-weight: 400;
}

.input-field:focus {
    border-color: var(--gold-500);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-glow);
}

.input-field:focus+.input-icon {
    color: var(--gold-400);
}

/* ============================================
    7. RÉSULTAT - Compteur animé
    ============================================ */
.result-card {
    background:
        linear-gradient(135deg, rgba(11, 22, 40, 0.8) 0%, rgba(10, 25, 47, 0.9) 100%) padding-box,
        var(--gradient-gold) border-box;
    border: 3px solid transparent;
    border-radius: var(--radius-lg);
    padding: 0.5rem 0.75rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Trait supérieur supprimé au profit d'une bordure complète */

.result-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gold-400);
    margin-bottom: 0.1rem;
}

.result-value {
    /* Styles de base pour le conteneur du résultat */
    color: var(--gold-400);
    width: 100%;
}

/* NOUVEAUX STYLES POUR L'AFFICHAGE STRUCTURÉ */

/* Grilles de résultat */
.result-grid-temporal,
.result-grid-financial {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 0.15rem;
}

.result-box {
    background: rgba(10, 25, 47, 0.4);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--radius-md);
    padding: 0.4rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    flex: 1 1 auto;
    transition: transform var(--transition-base);
}

.result-box:hover {
    border-color: rgba(212, 175, 55, 0.5);
    background: rgba(10, 25, 47, 0.6);
}

@media (hover: hover) {
    .result-box:hover {
        transform: translateY(-2px);
    }
}

.result-box .value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold-400);
    line-height: 1.1;
}

.result-box .label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-400);
    margin-top: 0.1rem;
    font-weight: 600;
}

/* Grille Financière (Mode Financier) */

.result-box.highlight {
    background: rgba(212, 175, 55, 0.1);
    border: 2px solid rgba(212, 175, 55, 0.4);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.15);
}

.result-box.highlight .value {
    color: var(--gold-400);
    font-size: 2rem;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

/* Texte "fois" en dehors de la boîte jaune - même style que le reste de la phrase */
.result-fois-text {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--gray-300);
    margin-left: 0;
    line-height: 1.2;
    display: inline;
    vertical-align: middle;
}

/* Fin Nouveaux Styles */

.counter-digit {
    display: inline-flex;
    flex-direction: column;
    overflow: hidden;
    /* background: rgba(0, 0, 0, 0.3); */
    /* Retiré pour le nouveau design */
    border-radius: var(--radius-sm);
    padding: 0 0.1rem;
    /* min-width: 1.25rem; */
    text-align: center;
}

.counter-digit span {
    display: inline-block;
    transform: translate3d(0, 0, 0);
}

@keyframes slideUp {
    from {
        transform: translate3d(0, 100%, 0);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

/* ============================================
    8. BOUTONS
    ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.btn-primary {
    background: var(--gold-500);
    color: var(--navy-900);
    box-shadow: var(--shadow-gold), 0 0 20px rgba(212, 175, 55, 0.3);
    border: 2px solid var(--gold-500);
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-image: none !important;
    background-size: 1px 1px !important;
}

.btn-primary.one-shot-shimmer {
    position: relative;
    overflow: hidden;
}

.btn-primary.one-shot-shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.05) 35%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0.05) 65%,
            transparent 100%);
    transform: translateX(-120%);
    animation: shimmer 1.4s ease-out 0.2s forwards;
    will-change: transform;
    pointer-events: none;
}

.btn-primary:hover {
    background: var(--gold-500) !important;
    box-shadow: 0 6px 25px rgba(212, 175, 55, 0.4);
}

@media (hover: hover) {
    .btn-primary:hover {
        transform: translateY(-2px);
    }
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: var(--gradient-card);
    color: var(--gray-300);
    border: 2px solid rgba(255, 255, 255, 0.08);
}

.btn-secondary:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
    color: var(--white);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

@media (hover: hover) {
    .btn-secondary:hover {
        transform: translateY(-2px);
    }
}

.btn-group {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.share-section {
    margin-top: 20px;
    padding-top: 0;
    border-top: none;
}

.btn-group .btn {
    flex: 1;
}

/* ============================================
    9. INTERRUPTEUR DE MODES - Sliding Pill Animation
    ============================================ */
.mode-toggle {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-full);
    padding: 0.12rem;
    margin-bottom: 0.3rem;
    margin-top: -6px;
    position: relative;
    z-index: 10;
}

/* La pilule dorée glissante */
.mode-toggle-pill {
    position: absolute;
    top: 0.12rem;
    left: 0.12rem;
    width: calc(50% - 0.12rem);
    height: calc(100% - 0.24rem);
    background: var(--gold-500);
    border-radius: var(--radius-full);
    transition: transform 0.5s cubic-bezier(0.25, 1.05, 0.5, 1.02);
    will-change: transform;
    z-index: 0;
    overflow: hidden;
}

.mode-toggle-pill::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.25) 0%,
            transparent 40%,
            transparent 60%,
            rgba(255, 255, 255, 0.15) 100%);
    pointer-events: none;
    border-radius: inherit;
}

/* Position de la pilule selon le mode */
.mode-toggle[data-active="temporal"] .mode-toggle-pill {
    transform: translateX(0);
}

.mode-toggle[data-active="financial"] .mode-toggle-pill {
    transform: translateX(100%);
}

.mode-toggle-btn {
    flex: 1;
    padding: 0.4rem 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-400);
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-base);
    z-index: 1;
    position: relative;
}

.mode-toggle-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transform: translateX(-5px);
    margin-bottom: -3px;
}

.mode-toggle-btn.active {
    color: var(--navy-900);
    background: transparent;
}

.mode-toggle-btn:hover:not(.active) {
    color: var(--white);
}

@media (hover: hover) {
    .mode-toggle-btn:hover:not(.active) {
        transform: translateY(-2px);
    }
}

.mode-toggle-btn.mobile-tap-glow {
    box-shadow: none !important;
}

/* ============================================
    10. ACCORDÉON MÉTHODOLOGIE
    ============================================ */
.accordion {
    background: var(--gradient-card);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 10px;
    flex-shrink: 0;
    transition: all var(--transition-base);
}

.accordion:hover {
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
}

@media (hover: hover) {
    .accordion:hover {
        transform: translateY(-2px);
    }
}

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: all var(--transition-base);
}



.accordion-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-300);
}

.accordion-icon {
    color: var(--gold-500);
    transition: transform var(--transition-base);
}

.accordion.open .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow);
}

.accordion.open .accordion-content {
    max-height: 500px;
}

.accordion-body {
    padding: 0 0.75rem 0.5rem 0.75rem;
}

/* ============================================
    11. INFOGRAPHIE SVG
    ============================================ */
.infography {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    padding: 0.5rem;
    margin-top: 0.25rem;
}

.infography svg {
    width: 100%;
    height: auto;
}

.infography text {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    fill: var(--gray-300);
}

.infography .label {
    font-size: 10px;
    font-weight: 500;
}

.infography .value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 12px;
    fill: var(--gold-400);
    font-weight: 600;
}

/* ============================================
    12. SNACKBAR PWA
    ============================================ */
.snackbar {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--gradient-card);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: var(--radius-lg);
    padding: 0.875rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    opacity: 0;
    transition: all var(--transition-base);
    width: 90%;
    max-width: 400px;
}

.snackbar.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.snackbar-text {
    font-size: 0.85rem;
    color: var(--gray-200);
}

.snackbar-btn {
    background: var(--gold-500);
    color: var(--navy-900);
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.snackbar-btn:hover {
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

@media (hover: hover) {
    .snackbar-btn:hover {
        transform: translateY(-2px);
    }
}

.snackbar-close {
    background: none;
    border: none;
    color: var(--gray-500);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
    12b. TOAST NOTIFICATIONS
    ============================================ */
.toast-container {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.toast {
    background: var(--gradient-card);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 2px solid var(--gold-500);
    border-radius: var(--radius-lg);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: var(--shadow-lg), 0 0 20px rgba(212, 175, 55, 0.3);
    pointer-events: auto;
    max-width: 90vw;
    min-width: 280px;
    animation: toastSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toast.toast-replacing {
    animation: toastSlideOut 0.25s ease-in forwards;
}

.toast.toast-replace-in {
    animation: toastSlideInReplace 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toast.toast-out {
    animation: toastSlideOut 0.3s ease-in forwards;
}

.toast.error {
    border-color: #ff6b6b;
    box-shadow: var(--shadow-lg), 0 0 20px rgba(255, 107, 107, 0.3);
}

.toast.success {
    border-color: #4caf50;
    box-shadow: var(--shadow-lg), 0 0 20px rgba(76, 175, 80, 0.3);
}

.toast.warning {
    border-color: #ff9800;
    box-shadow: var(--shadow-lg), 0 0 20px rgba(255, 152, 0, 0.3);
}

.toast-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.toast-message {
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 500;
    flex: 1;
    line-height: 1.3;
}

.toast-close {
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast);
    flex-shrink: 0;
}

.toast-close:hover {
    color: var(--white);
}

@keyframes toastSlideIn {
    0% {
        opacity: 0;
        transform: translateY(100px) scale(0.8);
    }

    60% {
        transform: translateY(-10px) scale(1.02);
    }

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

@keyframes toastSlideInReplace {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    60% {
        transform: translateY(-5px) scale(1.02);
    }

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

@keyframes toastSlideOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* ============================================
    12c. FIELD ERROR HIGHLIGHT
    ============================================ */
.field-error {
    border-color: #ff6b6b !important;
    box-shadow: 0 0 15px rgba(255, 107, 107, 0.5) !important;
    animation: fieldShake 0.5s ease-in-out;
}

.custom-dropdown.field-error {
    border: none !important;
    box-shadow: none !important;
    animation: none !important;
}

.custom-dropdown.field-error .dropdown-trigger {
    border-color: #ff6b6b !important;
    box-shadow: 0 0 15px rgba(255, 107, 107, 0.5) !important;
    animation: fieldShake 0.5s ease-in-out;
}

@keyframes fieldShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-6px);
    }

    40% {
        transform: translateX(6px);
    }

    60% {
        transform: translateX(-4px);
    }

    80% {
        transform: translateX(4px);
    }
}

/* ============================================
    12d. FALLBACK ERROR MESSAGE (module load error)
    ============================================ */
.fallback-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(145deg, rgba(11, 22, 40, 0.95) 0%, rgba(10, 25, 47, 0.98) 100%);
    border: 2px solid #ff6b6b;
    border-radius: var(--radius-lg);
    padding: 1.5rem 2rem;
    z-index: 99999;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 107, 107, 0.3);
    text-align: center;
}

.fallback-message.hidden {
    display: none;
}

.fallback-icon {
    margin-bottom: 0.75rem;
}

.fallback-text {
    color: var(--white);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.fallback-close {
    background: rgba(255, 107, 107, 0.2);
    border: 1px solid rgba(255, 107, 107, 0.4);
    color: #ff6b6b;
    padding: 0.5rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.fallback-close:hover {
    background: rgba(255, 107, 107, 0.3);
}

@media (hover: hover) {
    .fallback-close:hover {
        transform: translateY(-2px);
    }
}

/* Low performance devices - disable animations */
.low-perf-device .toast,
.low-perf-device .toast.toast-replacing,
.low-perf-device .toast.toast-replace-in,
.low-perf-device .toast.toast-out {
    animation: none;
}

.low-perf-device .field-error {
    animation: none;
}

/* ============================================
    13. BULLES DÉCORATIVES
    ============================================ */
.bubbles {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: -1;
    transform: translateZ(0);
}

.bubble {
    position: absolute;
    bottom: -20px;
    background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.2), transparent);
    border-radius: 50%;
    will-change: transform, opacity;
    animation: rise 8s infinite ease-in;
}

.bubble:nth-child(1) {
    width: 10px;
    height: 10px;
    left: 10%;
    animation-delay: 0s;
}

.bubble:nth-child(2) {
    width: 6px;
    height: 6px;
    left: 30%;
    animation-delay: 2s;
}

.bubble:nth-child(3) {
    width: 14px;
    height: 14px;
    left: 50%;
    animation-delay: 4s;
}

.bubble:nth-child(4) {
    width: 8px;
    height: 8px;
    left: 70%;
    animation-delay: 1s;
}

.bubble:nth-child(5) {
    width: 12px;
    height: 12px;
    left: 85%;
    animation-delay: 3s;
}

@keyframes rise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.6;
    }

    100% {
        transform: translateY(-100vh) scale(0.5);
        opacity: 0;
    }
}

/* ============================================
    13b. BOUTON EXEMPLE - Marching Ants
    ============================================ */
.example-btn {
    background-color: rgba(212, 175, 55, 0.05);
    border: none;
    color: #d4af37;
    padding: 0 0.6rem;
    height: 32px;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    z-index: 10;
}

.example-btn-wrapper {
    position: relative;
    display: inline-flex;
    transition: all var(--transition-base);
}

@media (hover: hover) {
    .example-btn-wrapper:hover {
        transform: translateY(-2px);
    }
}

.example-btn-border-svg {
    position: absolute;
    top: -2px;
    left: -2px;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

.example-btn-border-svg path {
    fill: none;
    stroke: #d4af37;
    stroke-width: 2.5;
    stroke-linecap: round;
}

.example-btn:hover {
    background-color: rgba(212, 175, 55, 0.15) !important;
    color: #f0d78c !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

.example-btn:active {
    transform: translateY(1px);
}

.example-btn svg:not(.example-btn-border),
.example-btn span {
    position: relative;
    z-index: 1;
}

/* ============================================
    14. UTILITAIRES
    ============================================ */
.hidden {
    display: none !important;
}

/* ============================================
    15. RESPONSIVE
    ============================================ */
/* Réglages pour petits écrans (mobiles) */
@media (max-width: 1099px) {
    .main-content {
        padding: 0.4rem 0.5rem 0.5rem 0.5rem;
    }

    .header-title {
        font-size: 2.4rem;
    }

    .header-content {
        gap: 0.75rem;
        padding: 0.5rem;
    }

    .header-boat {
        width: 80px;
    }

    .card {
        padding: 1rem;
    }

    .btn {
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
    }

    .result-value {
        font-size: 1.75rem;
    }

    .mode-toggle-btn {
        padding: 0.5rem 0.25rem;
        font-size: 0.95rem;
    }
}

@media (min-width: 768px) {
    .main-content {
        max-width: 30rem;
        /* Changed from 480px to rem to allow font-size scaling */
        margin: 0 auto;
        padding: 0.4rem 0.1rem 0.1rem 0.1rem;
    }

    .header-title {
        font-size: 1.5rem;
    }

    .header-content {
        gap: 1rem;
    }

    .header-boat {
        width: 120px;
    }

    .result-value {
        font-size: 2.25rem;
    }

    .card {
        padding: 1.5rem;
    }
}

@media (max-width: 380px) {
    .header-title {
        font-size: 1.7rem;
        /* Reduced from 2.2rem for Fold5 */
    }

    .header-subtitle {
        font-size: 1.1rem !important;
    }

    .header-content {
        /* flex-direction: column; Retiré pour garder l'alignement horizontal */
        gap: 0.25rem;
    }

    .header-boat {
        width: 3.5rem;
        /* ~56px */
    }

    .result-value {
        font-size: 1.5rem;
    }

    .btn {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }
}

@media (min-width: 381px) and (max-width: 450px) {
    .header-title {
        font-size: 1.9rem;
        /* Reduced for iPhone 12 Pro */
    }

    .header-boat {
        width: 4rem;
        /* ~64px */
    }
}

/* Amélioration de la cohérence pour tous les écrans > 450px */
@media (min-width: 451px) {
    .header-title {
        font-size: 2.4rem;
    }

    .header-boat {
        width: 5rem;
        /* ~80px */
    }

    .result-value {
        font-size: 1.6rem;
    }

    .card {
        padding: 1.1rem;
    }
}


/* ============================================
    16.1 CORRECTIONS POUR ÉCRANS TACTILES
    ============================================ */
/* Correction pour les boutons et éléments interactifs sur écrans tactiles */
@media (hover: none) and (pointer: coarse) {

    /* Pour les appareils tactiles (comme les téléphones) */
    .btn {
        min-height: 44px;
        /* Minimum 44px pour touch targets */
        min-width: 44px;
    }

    .mode-toggle-btn {
        min-height: 44px;
        padding: 0.7rem 0.5rem;
    }

    .input-field {
        min-height: 44px;
    }

    /* Augmentation de la taille des zones cliquables */
    .accordion-header {
        min-height: 48px;
    }

    .share-btn {
        min-height: 40px;
        min-width: 40px;
    }

    /* Neutralise les :hover "collants" sur mobile (sticky hover) */
    .btn-primary:hover {
        background: var(--gold-500) !important;
        box-shadow: var(--shadow-gold), 0 0 20px rgba(212, 175, 55, 0.3);
    }

    .btn-secondary:hover {
        background: var(--gradient-card);
        color: var(--gray-300);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: none;
    }

    .mode-toggle-btn:hover:not(.active) {
        color: var(--gray-400);
        transform: none;
    }

    .share-btn:hover {
        border-color: rgba(255, 255, 255, 0.15);
        color: var(--gray-400);
        background: rgba(255, 255, 255, 0.05);
        transform: none;
    }

    .share-btn.native:hover {
        box-shadow: none;
        transform: none;
    }

    .copy-btn:hover {
        background: rgba(212, 175, 55, 0.15);
        border-color: rgba(212, 175, 55, 0.3);
        transform: none;
    }

    .example-btn:hover {
        background-color: rgba(212, 175, 55, 0.05) !important;
        color: #d4af37 !important;
        box-shadow: none;
    }

    .snackbar-btn:hover {
        box-shadow: none;
        transform: none;
    }

    .fallback-close:hover {
        background: rgba(255, 107, 107, 0.2);
        transform: none;
    }

    .instagram-share-copy-btn:hover,
    .instagram-share-save-btn:hover,
    .instagram-share-open-btn:hover,
    .instagram-share-close:hover {
        transform: none;
        box-shadow: none;
    }

    button:focus-visible {
        outline: none;
    }

    /* Feedback tap léger: s'éteint automatiquement via JS */
    .mobile-tap-glow {
        box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.35), 0 0 12px rgba(212, 175, 55, 0.28) !important;
    }
}

:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 2px;
}

/* ============================================
    16.2 TABLETTE PORTRAIT SCALING
    ============================================ */
/* Augmente la taille de base pour les tablettes en mode portrait */
@media (min-width: 768px) and (orientation: portrait) {
    html {
        font-size: 2.5vw;
        /* Échelle fluide : 768px -> ~19px, 853px -> ~21px */
    }

    /* Limite supérieure pour éviter que ça devienne grotesque sur très grands écrans portrait */
    @media (min-width: 1024px) {
        html {
            font-size: 25.6px;
            /* Plafond */
        }
    }
}

/* ============================================
    17. SELECT PERSONNALISÉ
    ============================================ */
select.input-field {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23d4af37' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

select.input-field option {
    background: var(--navy-800);
    color: var(--white);
}

/* ============================================
    18. COPIE RÉSULTAT
    ============================================ */
.copy-btn {
    position: absolute;
    top: calc(0.35rem - 1px);
    right: calc(0.45rem - 1px);
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--gold-400);
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    z-index: 1;
    padding: 5px 7px;
    min-width: 30px;
    min-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copy-btn:hover {
    background: rgba(212, 175, 55, 0.25);
    border-color: rgba(212, 175, 55, 0.5);
}

@media (hover: hover) {
    .copy-btn:hover {
        transform: translateY(-2px);
    }
}


.result-section {
    position: relative;
    margin-top: 0.4rem;
}

/* ============================================
    19. SECTION EXEMPLE
    ============================================ */
.example-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    width: 100%;
    min-width: 0;
    position: relative;
    min-height: 40px;
    justify-content: flex-start !important;
}

.example-btn-wrapper {
    flex-shrink: 0;
    margin-left: 0 !important;
}

/* .example-btn and related moved to index.html for performance and Marching Ants 2.0 implementation */

.share-btn.native {
    width: auto;
    padding: 0 0.6rem;
    background: var(--gradient-gold);
    color: var(--navy-900);
    border: none;
    font-size: 0.75rem;
    gap: 0.35rem;
}

.share-btn.native:hover {
    background: var(--gradient-gold);
    color: var(--navy-900);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

@media (hover: hover) {
    .share-btn.native:hover {
        transform: translateY(-2px);
    }
}

.current-example {
    font-size: 0.9rem;
    color: var(--gold-300);
    font-weight: 700;
    line-height: 1.4;
    background: rgba(212, 175, 55, 0.1);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--gold-500);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.15);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    flex: 1 1 auto;
    min-width: 0;
    min-height: 36px;
    display: flex;
    align-items: center;
    position: relative;
    top: -2px;
    overflow: hidden;
    box-sizing: border-box;
}

.current-example .marquee-content {
    display: inline-block;
    vertical-align: middle;
}

.current-example.scrolling .marquee-content {
    display: inline-block;
    animation-play-state: running;
}

.current-example:empty {
    display: none;
}

/* Alignement bouton Comparer (Mode Financier) */
#financial-inputs .card {
    margin-bottom: 0.4rem;
}

#financial-inputs .btn-group {
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}

/* .example-btn moved to index.html critical path */

.example-btn i,
.example-btn span {
    position: relative;
    z-index: 1;
}

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: -10px;
}

.share-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: var(--gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    font-size: 0.85rem;
}

.share-btn:hover {
    border-color: var(--gold-500);
    color: var(--gold-400);
    background: rgba(212, 175, 55, 0.1);
}

@media (hover: hover) {
    .share-btn:hover {
        transform: translateY(-2px);
    }
}

.share-btn.discord:hover {
    background-color: #5865f2 !important;
    color: white !important;
    border-color: #5865f2 !important;
}

/* All social buttons now use the same gold hover effect from the base .share-btn:hover */

/* ============================================
    20b. INSTAGRAM DESKTOP SHARE MODAL
    ============================================ */
.instagram-share-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 25, 47, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10020;
}

.instagram-share-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    overflow-x: hidden;
    background: linear-gradient(145deg, rgba(17, 34, 64, 0.98) 0%, rgba(10, 25, 47, 0.98) 100%);
    border: 1px solid rgba(212, 175, 55, 0.65);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), 0 0 30px rgba(212, 175, 55, 0.22);
    padding: 1.25rem;
    z-index: 10021;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Réduction des espacements sur desktop pour éviter la scrollbar */
@media (min-width: 769px) {
    .instagram-share-modal {
        padding: 0.875rem;
        gap: 0.5rem;
    }
    
    .instagram-share-content-wrap {
        margin-bottom: 0.75rem;
        gap: 0.5rem;
    }
    
    .instagram-share-preview-wrap {
        max-width: 240px;
        margin-bottom: 0.75rem;
    }
    
    .instagram-share-instructions {
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
    }
    
    .instagram-share-actions {
        gap: 0.6rem;
    }
    
    .instagram-share-copy-btn,
    .instagram-share-save-btn,
    .instagram-share-open-btn {
        min-height: 42px;
        font-size: 0.85rem;
    }
    
    .instagram-share-title {
        font-size: 1rem;
    }
    
    .instagram-share-drag-hint {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

.instagram-share-header {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: center;
    gap: 0.75rem;
}

.instagram-share-close {
    border: 0;
    background: transparent;
    color: var(--gray-300);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    margin: 0;
    padding: 0;
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    grid-column: 3;
    flex-shrink: 0;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.instagram-share-close:hover {
    color: var(--gold-400);
}

.instagram-share-title {
    grid-column: 2;
    color: var(--gold-300);
    font-size: 1.15rem;
    text-align: center;
    margin: 0;
}

.instagram-share-content-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 2rem;
}

.instagram-share-instructions {
    color: var(--gray-300);
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: pre-wrap;
    margin-bottom: 0.5rem;
    width: 100%;
}

.instagram-share-preview-wrap {
    position: relative;
    width: 100%;
    max-width: 320px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    background: #0d1b31;
    margin-bottom: 1.5rem;
}

.instagram-share-preview-image {
    width: 100%;
    height: auto;
    display: block;
}

.instagram-share-text-display {
    width: 100%;
    max-width: 480px;
    padding: 0.3rem 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 12px;
    color: #fff;
    font-size: 0.95rem;
    margin-top: 1.2rem;
    margin-bottom: 1.8rem;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-style: italic;
    line-height: 1.4;
    text-align: center;
}

.instagram-share-image-wrap {
    min-height: 220px;
    border: 1px dashed rgba(212, 175, 55, 0.5);
    border-radius: var(--radius-md);
    padding: 0.8rem;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
}

.instagram-share-image {
    max-width: 100%;
    max-height: 340px;
    border-radius: var(--radius-sm);
    cursor: grab;
    user-select: none;
    -webkit-user-drag: element;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.instagram-share-image:active {
    cursor: grabbing;
}

.instagram-share-drag-hint {
    color: var(--gray-400);
    text-align: center;
    font-size: 0.82rem;
}

.instagram-share-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.instagram-share-copy-btn,
.instagram-share-save-btn,
.instagram-share-open-btn {
    width: 100%;
    max-width: 480px;
    min-height: 48px;
    border-radius: var(--radius-full);
    border: 1px solid var(--gold-500);
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.instagram-share-copy-btn {
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
}

.instagram-share-save-btn {
    background: var(--gradient-gold);
    color: var(--navy-900);
}

.instagram-share-copy-btn:disabled,
.instagram-share-save-btn:disabled {
    opacity: 0.85;
    cursor: not-allowed;
}

.instagram-share-open-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    color: var(--gold-300);
    text-decoration: none;
}

@media (hover: hover) {

    .instagram-share-copy-btn:hover,
    .instagram-share-save-btn:hover,
    .instagram-share-open-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-gold);
    }

    .instagram-share-close:hover {
        transform: scale(1.06);
    }
}

@media (max-width: 560px) {
    .instagram-share-actions {
        align-items: stretch;
    }
}

/* Alignement bouton Comparer (Mode Financier) */

.result-section:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
}

.result-section::after {
    display: none !important;
    content: none !important;
    border: none !important;
    height: 0 !important;
}

/* Textes d'interprétation pour les résultats */
.result-interpretation-header,
.result-interpretation-footer {
    text-align: center;
    color: var(--gray-300);
    font-size: 0.9rem;
    font-weight: 400;
    margin: 0.25rem 0;
}

.result-interpretation-header {
    margin: 0.1rem 0 0.3rem 0;
}

.result-interpretation-footer {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    padding: 0.2rem 0 0.2rem 0.4rem;
    /* Un peu d'espace à gauche si sur la même ligne */
    line-height: 1.2;
}

/* Capitalisation de la première lettre pour les libellés narratifs */
.dropdown-option::first-letter,
.result-interpretation-footer::first-letter,
.trigger-text::first-letter {
    text-transform: uppercase;
}

/* ============================================
    21. GESTION DES MODES (Premium Transitions)
    ============================================ */

/* Conteneur principal */
.modes-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    /* Allow height to adapt if needed, but overlap is key */
    width: 100%;
    position: relative;
}

/* Les deux modes occupent la même cellule (superposition) */
.mode-content {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    /* Transition de base pour toutes les propriétés animées */
    transition:
        opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Point de pivot pour le scaling */
    transform-origin: center top;

    /* État initial (caché par défaut pour éviter le FOUC, géré par l'état parent) */
    opacity: 0;
    visibility: hidden;
    transform: scale(0.92) translateX(0);
    pointer-events: none;
}

@supports (content-visibility: hidden) {
    .mode-content {
        content-visibility: hidden;
        contain-intrinsic-size: 0 500px;
    }
}

/* --- ÉTAT 1: TEMPOREL ACTIF --- */
.modes-container[data-active-mode="temporal"] #temporal-inputs {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateX(0);
    pointer-events: auto;
    /* Instant visibility on start */
    z-index: 10;
}

@supports (content-visibility: visible) {
    .modes-container[data-active-mode="temporal"] #temporal-inputs {
        content-visibility: visible;
        contain-intrinsic-size: auto;
    }
}

.modes-container[data-active-mode="temporal"] #financial-inputs {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95) translateX(60px);
    /* Part vers la droite */
    pointer-events: none;
    z-index: 1;
    /* Faster exit transition */
    transition:
        opacity 0.25s ease-out,
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- ÉTAT 2: FINANCIER ACTIF --- */
.modes-container[data-active-mode="financial"] #financial-inputs {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateX(0);
    pointer-events: auto;
    z-index: 10;
}

@supports (content-visibility: visible) {
    .modes-container[data-active-mode="financial"] #financial-inputs {
        content-visibility: visible;
        contain-intrinsic-size: auto;
    }
}

.modes-container[data-active-mode="financial"] #temporal-inputs {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95) translateX(-60px);
    /* Part vers la gauche */
    pointer-events: none;
    z-index: 1;
    /* Faster exit transition */
    transition:
        opacity 0.25s ease-out,
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Sections de résultat à l'intérieur du modes-container - ne pas participer à la grille */
.modes-container>.result-section {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    margin-top: 1rem;
}

/* ============================================
    22. DROPDOWNS PERSONNALISÉS
    ============================================ */

.custom-dropdown {
    position: relative;
    width: 100%;
    z-index: 5;
}

.custom-dropdown.open {
    z-index: 1001;
}

/* Fix stacking context: ensure the card containing an open dropdown is above subsequent elements */
.card.dropdown-open {
    z-index: 9999 !important;
    position: relative !important;
}

.dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    color: var(--white);
}

.dropdown-trigger:hover {
    border-color: var(--gold-400);
    background: rgba(255, 255, 255, 0.08);
}

.trigger-text {
    font-size: 0.9rem;
    color: var(--gray-300);
    font-weight: 600;
}

.trigger-icon {
    transition: transform var(--transition-base);
    color: var(--gray-400);
}

.custom-dropdown.open .trigger-icon {
    transform: rotate(180deg);
}

.dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.5rem;
    background: var(--navy-800);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    max-height: 300px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Empêche les clics parasites quand le dropdown se ferme */
    transform: translateY(-10px);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.dropdown-options::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

.dropdown-options::-webkit-scrollbar-button,
.dropdown-options::-webkit-scrollbar-track,
.dropdown-options::-webkit-scrollbar-track-piece,
.dropdown-options::-webkit-scrollbar-thumb,
.dropdown-options::-webkit-scrollbar-corner {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.custom-scrollbar {
    position: absolute;
    top: 8px;
    right: 4px;
    width: 10px;
    height: calc(100% - 16px);
    background: transparent;
    border-radius: 5px;
    pointer-events: auto;
    z-index: 10;
    cursor: pointer;
}

.custom-scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 2px;
    width: 6px;
    background: var(--gold-500);
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
    transition: background 0.2s ease;
    min-height: 40px;
}

.custom-scrollbar-thumb:hover {
    background: var(--gold-400);
}

.custom-dropdown.open .dropdown-options {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* Permet les clics sur les options quand le dropdown est ouvert */
    transform: translateY(0);
}

.dropdown-option {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
    color: var(--gray-300);
    font-weight: 600;
}

.dropdown-option:last-child {
    border-bottom: none;
}

.dropdown-option:hover {
    background: rgba(212, 175, 55, 0.1);
    color: var(--gold-400);
}

.dropdown-option.selected {
    background: rgba(212, 175, 55, 0.2);
    color: var(--gold-400);
}

/* Select natif caché */
.hidden-select {
    display: none;
}

/* ============================================
    23. CLASSES UTILITAIRES
    ============================================ */

/* Margin utilities */
.mt-1 {
    margin-top: 0.25rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 0.75rem;
}

/* Text utilities */
.italic {
    font-style: italic;
}

/* Transform utility */
/* ============================================
    24. FOOTER STYLES
    ============================================ */

.app-footer {
    margin-top: 0.25rem;
    /* Reduced from 0.75rem */
    padding: 0.5rem 0;
    text-align: center;
    flex-shrink: 0;
}

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

.footer-link {
    color: var(--gray-400);
    text-decoration: none;
    font-size: 0.85rem;
    display: inline-block;
    transition: all var(--transition-base);
}

.footer-link:hover {
    color: var(--gold-400);
    text-shadow: 0 4px 12px rgba(212, 175, 55, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8);
}

@media (hover: hover) {
    .footer-link:hover {
        transform: translateY(-2px);
    }
}

/* Critical start-up animations moved to index.html */

/* Animation pulse doux pour attirer l'attention */
@keyframes gentlePulse {

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

    50% {
        transform: scale(1.02);
    }
}


/* Classe pour cacher initialement le mode financier sans animation */


/* ============================================
    ANIMATIONS PREMIUM - MODULES FACILEMENT ACTIVABLES
    ============================================
    
    POUR ACTIVER UNE ANIMATION : ajoutez la classe correspondante à l'élément HTML
    POUR DESACTIVER : retirez la classe
    
    Toutes ces animations sont compatibles entre elles
*/



/* ----------------------------------------
    5. MARQUEE SCROLL - Défilement horizontal automatique pour texte trop long
    Classe à ajouter : .scrolling
    Compatible avec : toutes les autres
    ---------------------------------------- */
@keyframes marqueeScroll {

    0%,
    30% {
        transform: translateX(0);
        /* Pause de 30% au début */
    }

    70%,
    100% {
        transform: translateX(var(--scroll-distance, -100%));
        /* Pause de 30% à la fin */
    }
}

.marquee-content {
    display: inline-block;
    white-space: nowrap;
    animation: marqueeScroll 4s ease-in-out infinite alternate paused;
    will-change: transform;
}

/* ----------------------------------------
    4. SHIMMER BUTTON - Reflet lumineux sur les boutons
    Classe à ajouter : .shimmer-btn
    Compatible avec : toutes les autres
    ---------------------------------------- */
@keyframes shimmer {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(120%);
    }
}

.shimmer-btn {
    position: relative;
    overflow: hidden;
    background: var(--gold-500);
}

.shimmer-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.2) 40%,
            rgba(255, 255, 255, 0.7) 50%,
            rgba(255, 255, 255, 0.2) 60%,
            transparent 100%);
    transform: translateX(-120%);
    animation: shimmer 3s ease-in-out infinite;
    will-change: transform;
    pointer-events: none;
}

/* ----------------------------------------
   3b. TITLE SHIMMER - Reflet lumineux sur les lettres du titre
   Classe à ajouter : .title-shimmer
   Compatible avec : title-glow
   ---------------------------------------- */
@keyframes titleShimmerPulse {
    0% {
        opacity: 0.25;
    }

    50% {
        opacity: 0.85;
    }

    100% {
        opacity: 0.25;
    }
}

.title-shimmer {
    position: relative;
}

.title-shimmer::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.35) 40%,
            rgba(255, 255, 255, 0.85) 50%,
            rgba(255, 255, 255, 0.35) 60%,
            transparent 100%);
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    opacity: 0.25;
    animation: titleShimmerPulse 2.8s ease-in-out infinite;
    will-change: opacity;
    pointer-events: none;
}

/* Nettoie les hints de compositing après les animations d'entrée */
.fade-in.anim-complete,
.fade-in-slide-up.anim-complete,
.title-reveal-optimized.anim-complete,
.header-boat.animate.anim-complete {
    will-change: auto;
}

/* ============================================
    25. OPTIMISATIONS APPAREILS PEU PUISSANTS
    ============================================ */
.low-perf-device .card,
.low-perf-device .snackbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: linear-gradient(145deg, rgba(17, 34, 64, 0.92) 0%, rgba(10, 25, 47, 0.95) 100%) !important;
}

.low-perf-device .bubble {
    display: none;
}

.low-perf-device .mode-toggle-pill,
.low-perf-device .marquee-content,
.low-perf-device .shimmer-btn::before,
.low-perf-device .title-shimmer::after {
    animation: none !important;
    will-change: auto;
}

.low-perf-device .fade-in,
.low-perf-device .fade-in-slide-up,
.low-perf-device .header-boat,
.low-perf-device .result-section {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.low-perf-device .card,
.low-perf-device .header-boat-wrap {
    will-change: auto;
}