/*
 * Page d'attente Eydenn — feuille de style dédiée et ISOLÉE (aucune
 * dépendance à eydenn-premium.css, qui contient des sélecteurs génériques
 * (header, footer, .btn…) pouvant interférer avec cette page autonome).
 * Palette et polices copiées à l'identique de eydenn-premium.css (:root)
 * pour rester fidèle à la charte existante sans en dépendre au runtime.
 * Suppression : ce fichier + coming-soon.blade.php + le contrôleur dédié
 * suffisent à retirer entièrement la fonctionnalité, sans effet sur le
 * reste du site.
 */

:root {
    --cs-emerald: #064333;
    --cs-emerald-deep: #03291F;
    --cs-cream: #F7F1E8;
    --cs-sand: #E7DBC0;
    --cs-gold: #C9A24A;
    --cs-gold-soft: #E2C98B;
    --cs-sage: #93C9AE;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body.cs-body {
    min-height: 100svh;
    background: var(--cs-emerald-deep);
    color: var(--cs-cream);
    font-family: 'Manrope', -apple-system, "Segoe UI", Roboto, sans-serif;
    overflow-x: hidden;
}

.cs-stage {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    isolation: isolate;
}

/* Visuel plein écran (fixed pour un léger effet de profondeur, avec repli
   scroll sur mobile où le rendu "fixed" est parfois instable). */
.cs-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: url('/assets/img/signature-collection-hero.jpg');
    background-size: cover;
    background-position: center 62%;
    background-repeat: no-repeat;
}

@media (max-width: 760px) {
    .cs-bg { position: absolute; }
}

/* Voile de lisibilité — teinté vert profond de la marque, jamais un noir
   neutre générique : plus sombre en haut/bas (texte), plus léger au centre
   (le visuel reste visible). */
.cs-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(3, 41, 31, .78) 0%, rgba(3, 41, 31, .38) 38%, rgba(3, 41, 31, .40) 62%, rgba(3, 41, 31, .82) 100%);
}

@media (max-width: 760px) {
    .cs-overlay { position: absolute; }
}

/* Contenu */
.cs-container {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(1.5rem, 5vw, 3rem) 1.25rem clamp(2rem, 6vw, 4rem);
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
}

/* Logo — plaque crème pour préserver la lisibilité du mark vert/or sur le
   visuel sombre (jamais de recolorisation du logo officiel). */
.cs-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(247, 241, 232, .94);
    border-radius: 999px;
    padding: .85rem 1.6rem;
    box-shadow: 0 10px 30px rgba(3, 41, 31, .35);
    margin-bottom: clamp(1.75rem, 5vw, 3rem);
}

.cs-brand img {
    height: clamp(28px, 4vw, 38px);
    width: auto;
    display: block;
}

.cs-eyebrow {
    font-family: 'Manrope', sans-serif;
    font-size: .78rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--cs-gold-soft);
    margin: 0 0 .9rem;
}

.cs-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: clamp(2.4rem, 7vw, 5rem);
    line-height: 1.08;
    letter-spacing: .01em;
    margin: 0 0 1.1rem;
    color: #FFFDF8;
    text-wrap: balance;
}

.cs-subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.6;
    color: var(--cs-cream);
    max-width: 620px;
    margin: 0 auto;
    font-weight: 400;
}

.cs-divider {
    width: 84px;
    height: 1px;
    margin: clamp(1.6rem, 4vw, 2.5rem) auto;
    background: linear-gradient(90deg, transparent, var(--cs-gold), transparent);
}

.cs-subtitle-en {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1rem, 2.2vw, 1.3rem);
    color: var(--cs-sage);
    max-width: 640px;
    margin: 1rem auto 0;
    line-height: 1.5;
}

/* Compte à rebours */
.cs-launch-label {
    font-family: 'Manrope', sans-serif;
    font-size: .78rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--cs-gold-soft);
    margin: clamp(2.2rem, 5vw, 3.2rem) 0 1.25rem;
}

.cs-countdown {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: clamp(.6rem, 2.4vw, 1.5rem);
    flex-wrap: nowrap;
}

.cs-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: clamp(58px, 14vw, 96px);
    padding: clamp(.7rem, 2vw, 1.2rem) clamp(.4rem, 1.5vw, .9rem);
    background: rgba(247, 241, 232, .07);
    border: 1px solid rgba(201, 162, 74, .35);
    border-radius: 14px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.cs-unit-value {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.7rem, 5vw, 3rem);
    line-height: 1;
    color: #FFFDF8;
}

.cs-unit-label {
    margin-top: .4rem;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(.62rem, 1.4vw, .74rem);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cs-sand);
}

.cs-colon {
    align-self: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    color: var(--cs-gold);
    opacity: .7;
    padding-bottom: 1.4rem;
}

/* État "ouvert" (fin du compte à rebours) */
.cs-open {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    margin-top: clamp(1.5rem, 4vw, 2.2rem);
}

.cs-open.is-visible { display: flex; }
.cs-countdown-wrap.is-hidden,
.cs-launch-label.is-hidden { display: none; }

.cs-open-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.6rem, 4vw, 2.3rem);
    color: #FFFDF8;
    margin: 0;
}

.cs-btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: var(--cs-gold);
    color: var(--cs-emerald-deep);
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .04em;
    text-decoration: none;
    padding: .9rem 2.1rem;
    border-radius: 999px;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    box-shadow: 0 10px 24px rgba(201, 162, 74, .25);
}

.cs-btn:hover,
.cs-btn:focus-visible {
    background: var(--cs-gold-soft);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(201, 162, 74, .35);
}

.cs-btn:focus-visible {
    outline: 2px solid var(--cs-cream);
    outline-offset: 3px;
}

/* Phrase de signature */
.cs-tagline {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(.95rem, 1.8vw, 1.15rem);
    color: var(--cs-sand);
    max-width: 560px;
    margin: clamp(2rem, 5vw, 3rem) auto 0;
    line-height: 1.55;
}

/* Pied de page discret */
.cs-footer {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    text-align: center;
}

.cs-social {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.cs-social a {
    color: var(--cs-sand);
    display: inline-flex;
    transition: color .2s ease, transform .2s ease;
}

.cs-social a:hover,
.cs-social a:focus-visible {
    color: var(--cs-gold);
    transform: translateY(-1px);
}

.cs-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem 1rem;
    font-size: .78rem;
}

.cs-legal a {
    color: rgba(247, 241, 232, .68);
    text-decoration: none;
}

.cs-legal a:hover,
.cs-legal a:focus-visible {
    color: var(--cs-cream);
    text-decoration: underline;
}

.cs-copyright {
    font-size: .74rem;
    color: rgba(247, 241, 232, .45);
    margin: 0;
}

/* Animation d'entrée — discrète et haut de gamme */
.cs-fade-up {
    opacity: 0;
    transform: translateY(14px);
    animation: csFadeUp .9s cubic-bezier(.22, .68, 0, 1) forwards;
}

.cs-delay-1 { animation-delay: .1s; }
.cs-delay-2 { animation-delay: .28s; }
.cs-delay-3 { animation-delay: .46s; }
.cs-delay-4 { animation-delay: .64s; }
.cs-delay-5 { animation-delay: .82s; }

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

@media (prefers-reduced-motion: reduce) {
    .cs-fade-up {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .cs-btn { transition: none; }
}

@media (max-width: 420px) {
    .cs-countdown { gap: .4rem; }
    .cs-unit { min-width: 54px; padding: .6rem .3rem; }
    .cs-colon { display: none; }
}