/* =========================================================
   Variables & thème "Dolce Vita Pop"
   ========================================================= */

@font-face {
    font-family: 'TanMeringue';
    src: url('/assets/fonts/TAN MERINGUE.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --safe-area-bottom: 0px;
    /* Palette inspirée de l'image 'La Dolce Vita' */
    --stripe-1: #F4A261;
    /* Orange Pêche (Solaire) */
    --stripe-2: #FFF9F0;
    /* Crème/Blanc cassé */

    --text-main: #2A9D8F;
    /* Vert Émeraude Rétro */
    --text-accent: #E76F51;
    /* Rouge/Terracotta pour les détails */
    --text-error: #c0392b;

    --white: #ffffff;
    --dark: #1a1a1a;

    /* Typographies */
    --font-retro: 'Playwrite CZ', cursive;
    --font-body: 'Poppins', sans-serif;
    --menu-font: var(--font-body);

    /* Fond */
    --stripe-width-1: 60px;
    --stripe-width-2: 60px;
    --stripe-angle: 90deg;
    --body-bg-color: var(--stripe-1);
    --body-bg-image: repeating-linear-gradient(var(--stripe-angle, 90deg),
            var(--stripe-2),
            var(--stripe-2) var(--stripe-width-2, 60px),
            var(--stripe-1) var(--stripe-width-2, 60px),
            var(--stripe-1) calc(var(--stripe-width-1, 60px) + var(--stripe-width-2, 60px)));
    --body-bg-size: auto;
    --body-bg-position: center;
    --body-bg-attachment: scroll;

    /* Cartes */
    --card-bg: rgba(255, 255, 255, 1);
    --card-border: 4px solid var(--text-main);
    --card-shadow: 15px 15px 0 rgba(0, 0, 0, 0.15);
    --card-blur: 0px;

    /* Navigation */
    --nav-bg: var(--white);
    --nav-border-color: var(--text-main);
    --nav-text-color: var(--text-main);
    --nav-justify: space-between;
    --nav-backdrop-filter: none;
    --nav-shadow: 5px 5px 0 rgba(42, 157, 143, 0.3);
    --nav-identity-display: block;

    /* Badges */
    --badge-border: 3px solid var(--text-main);
    --badge-background: var(--white);
    --badge-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
    --badge-color: var(--text-accent);
    --badge-text-shadow: none;

    /* Accueil */
    --home-align: flex-start;
    --home-padding-top: 150px;
    --home-card-margin-top: 0px;
    --home-card-padding-top: 0px;
    --home-card-bg: var(--card-bg);
    --home-card-border: var(--card-border);
    --home-card-shadow: var(--card-shadow);
    --home-card-blur: var(--card-blur);

    --home-intro-margin-bottom: 80px;
    --home-intro-offset: 0px;
    --home-intro-size: 1.5rem;
    --home-intro-line-height: 1.2;

    --home-title-size: 4rem;
    --home-title-line-height: 1.1;
    --home-names-margin-top: 0px;
    --home-names-margin-bottom: 0px;

    --home-date-margin-top: 30px;
    --home-date-size: 1.6rem;
    --home-date-offset: 0px;
    --home-date-display: inline-block;

    --home-badge-border: var(--badge-border);
    --home-badge-background: var(--badge-background);
    --home-badge-shadow: var(--badge-shadow);
    --home-badge-color: var(--badge-color);
    --home-badge-text-shadow: var(--badge-text-shadow);

    --home-btn-bg: var(--text-accent);
    --home-btn-color: var(--white);
    --home-btn-border: var(--text-accent);
    --home-btn-margin-top: 20px;
    --home-btn-shadow: none;
    --home-btn-hover-bg: var(--home-btn-border);
    --home-btn-hover-color: var(--white);

    /* --- Programme Options --- */
    --program-main-color: var(--text-accent);
    --program-heure-size: 1.4rem;
    --program-title-size: 1.1rem;
    --program-desc-size: 0.9rem;
    --program-card-width: 900px;
    --program-timeline-width: 700px;

    /* Accueil - positionnement absolu */
    --intro-top: 50%;
    --intro-bottom: auto;
    --intro-translate-y: calc(-50% + clamp(-200vh, 15vh, 400vh));
    --names-top: 50%;
    --names-bottom: auto;
    --names-translate-y: calc(-50% + clamp(-200vh, 30vh, 400vh));
    --date-top: auto;
    --date-bottom: calc(var(--safe-area-bottom, 0px) + clamp(-200vh, 15vh, 400vh));
    --date-translate-y: calc(-1 * clamp(-200vh, 15vh, 400vh));

    /* Navigation avancée */
    --nav-top: 20px;
    --nav-radius: 50px;
    --nav-border-width: 3px;
    --nav-width: 90%;
    --nav-max-width: 800px;
    --nav-left: 50%;
    --nav-transform: translateX(-50%);
    --nav-height: 60px;

    --lemon-display: block;
}

@supports (bottom: env(safe-area-inset-bottom)) {
    :root {
        --safe-area-bottom: env(safe-area-inset-bottom);
    }
}