/* =========================================================
   LORYANE NOMADE — APPLICATION THEMES

   Les variantes applicatives sont exclusivement sélectionnées
   par une classe issue de ApplicationTheme.

   Aucune valeur administrée n'est injectée comme CSS libre.
   Les valeurs visuelles ci-dessous utilisent les tokens globaux
   tant que les palettes définitives des applications ne sont
   pas validées.
   ========================================================= */

.nomade-theme {
    --nomade-theme-primary: var(--color-brand-primary);
    --nomade-theme-secondary: var(--color-brand-secondary);
    --nomade-theme-accent: var(--color-brand-accent);
    --nomade-theme-surface: var(--color-surface);
    --nomade-theme-border: var(--color-border);
}

.nomade-theme .page-layout__eyebrow {
    color: var(--nomade-theme-secondary);
}

.nomade-theme .page-layout__title {
    color: var(--nomade-theme-primary);
}

.nomade-theme .nomade-feature,
.nomade-theme .nomade-update,
.nomade-theme .nomade-faq__item {
    border-color: var(--nomade-theme-border);
}

/* =========================================================
   DEFAULT
   ========================================================= */

.nomade-theme--default {
    --nomade-theme-primary: var(--color-brand-primary);
    --nomade-theme-secondary: var(--color-brand-secondary);
    --nomade-theme-accent: var(--color-brand-accent);
    --nomade-theme-surface: var(--color-surface);
    --nomade-theme-border: var(--color-border);
}

/* =========================================================
   RITUAL MIND

   Variante structurelle contrôlée.
   Elle repose actuellement sur les tokens LORYANE globaux.
   Les valeurs spécifiques pourront être remplacées lorsque
   la palette Ritual Mind définitive sera validée.
   ========================================================= */

.nomade-theme--ritual-mind {
    --nomade-theme-primary: var(--color-brand-primary);
    --nomade-theme-secondary: var(--color-brand-accent);
    --nomade-theme-accent: var(--color-brand-secondary);
    --nomade-theme-surface: var(--color-surface);
    --nomade-theme-border: var(--color-neutral-300);
}

.nomade-theme--ritual-mind .nomade-feature,
.nomade-theme--ritual-mind .nomade-update,
.nomade-theme--ritual-mind .nomade-faq__item {
    border-radius: var(--radius-xl);
}

/* =========================================================
   NOMADE HUB — PUBLIC COMPOSITION
   ========================================================= */

.nomade-hub {
    background:
        radial-gradient(
            circle at 88% 5rem,
            rgb(var(--color-brand-rose-rgb) / 42%),
            transparent 24rem
        ),
        var(--color-background);
}

.nomade-hub .page-layout__container {
    width: min(100%, var(--width-content-lg));
}

.nomade-hub__hero {
    position: relative;
    max-width: var(--width-content-md);
    overflow: hidden;
    padding: var(--space-8);
    background:
        linear-gradient(
            135deg,
            var(--color-surface),
            var(--color-surface-accent)
        );
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.nomade-hub__hero::after {
    content: "";
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    width: var(--space-12);
    height: var(--space-6);
    border: 1px solid rgb(var(--color-brand-champagne-rgb) / 62%);
    border-radius: 100% 0 100% 0;
    transform: rotate(-20deg);
    pointer-events: none;
}

.nomade-hub__hero .page-layout__intro {
    max-width: var(--width-content-sm);
}

.nomade-hub__applications > h2 {
    margin: var(--space-0) var(--space-0) var(--space-6);
    font-size: var(--font-size-2xl);
}

.nomade-hub__applications .ui-state {
    max-width: var(--width-content-sm);
    background: rgb(var(--color-surface-rgb) / 94%);
    border-radius: var(--radius-xl);
}

.nomade-applications {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
}

.nomade-application {
    min-width: 0;
    padding: var(--space-6);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgb(var(--color-brand-champagne-rgb) / 22%),
            transparent 13rem
        ),
        var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.nomade-application__icon {
    width: var(--space-16);
    height: var(--space-16);
    display: block;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.nomade-application__content {
    min-width: 0;
}

.nomade-application__content h3 {
    margin: var(--space-0) var(--space-0) var(--space-3);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-tight);
}

.nomade-application__content p {
    max-width: var(--width-content-sm);
    margin: var(--space-0);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
}

.nomade-application__stores {
    margin-top: var(--space-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.nomade-application__stores a {
    min-height: var(--space-12);
    padding: var(--space-3) var(--space-5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--color-brand-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    text-decoration: none;
}

.nomade-application__stores a:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

@media (min-width: 48rem) {
    .nomade-application--with-icon {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }
}

@media (min-width: 64rem) {
    .nomade-applications {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   NOMADE HUB — DETAIL LINK & COMPOSITION
   ========================================================= */

.nomade-applications {
    max-width: none;
}

.nomade-application__content h3 a {
    color: inherit;
    text-decoration: none;
}

.nomade-application__content h3 a:hover {
    text-decoration: underline;
    text-underline-offset: var(--space-1);
}

.nomade-application__detail-link:focus-visible,
.nomade-application__discover:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

.nomade-application__actions {
    margin-top: var(--space-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.nomade-application__discover {
    min-height: var(--space-12);
    padding: var(--space-3) var(--space-5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    text-decoration: none;
}

.nomade-application__stores {
    margin-top: var(--space-0);
}

@media (max-width: 35.999rem) {
    .nomade-application__actions,
    .nomade-application__stores {
        width: 100%;
    }

    .nomade-application__discover,
    .nomade-application__stores a {
        width: 100%;
    }
}

/* =========================================================
   NOMADE DETAIL — PUBLIC COMPOSITION
   ========================================================= */

.nomade-detail {
    --nomade-detail-background: var(--color-background);
    --nomade-detail-soft: var(--color-surface);

    background:
        linear-gradient(
            180deg,
            var(--nomade-detail-background) 0,
            var(--color-background) 34rem
        );
}

.nomade-detail.nomade-theme--ritual-mind {
    --nomade-theme-primary: var(--color-brand-primary);
    --nomade-theme-secondary: var(--color-brand-secondary);
    --nomade-theme-accent: var(--color-brand-accent);
    --nomade-theme-surface: var(--color-surface);
    --nomade-theme-border: var(--color-border);
    --nomade-detail-background: var(--color-surface-muted);
    --nomade-detail-soft: var(--color-brand-rose);
}

.nomade-detail .page-layout__container {
    width: min(100%, var(--width-content-lg));
    padding-block: var(--space-10) var(--space-16);
}

.nomade-detail .page-layout__sections {
    gap: var(--space-12);
}

.nomade-detail-hero {
    max-width: var(--width-content-md);
    padding: var(--space-8);
    background:
        linear-gradient(
            135deg,
            var(--nomade-theme-surface),
            var(--nomade-detail-soft)
        );
    border: 1px solid var(--nomade-theme-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.nomade-detail-hero .page-layout__title {
    max-width: var(--width-content-sm);
}

.nomade-detail-hero .page-layout__intro {
    max-width: var(--width-content-sm);
}

.nomade-detail-hero .page-layout__intro p {
    margin-bottom: var(--space-0);
}

.nomade-detail-hero figure {
    aspect-ratio: 16 / 9;
    margin:
        var(--space-8)
        var(--space-0)
        var(--space-0);
    overflow: hidden;
    border-radius: var(--radius-xl);
}

.nomade-detail-hero figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: var(--shadow-md);
}

.nomade-proposition {
    max-width: var(--width-content-md);
    padding: var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--nomade-theme-border);
    border-radius: var(--radius-xl);
}

.nomade-proposition h2,
.nomade-detail-section > h2,
.nomade-download > h2 {
    margin:
        var(--space-0)
        var(--space-0)
        var(--space-6);
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-tight);
}

.nomade-proposition > div {
    max-width: var(--width-content-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
}

.nomade-features,
.nomade-updates {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
}

.nomade-feature,
.nomade-update {
    min-width: 0;
    padding: var(--space-6);
    background: var(--nomade-theme-surface);
    border: 1px solid var(--nomade-theme-border);
    box-shadow: var(--shadow-sm);
}

.nomade-feature {
    border-top:
        var(--space-1)
        solid
        var(--nomade-theme-accent);
}

.nomade-feature h3,
.nomade-update h3 {
    margin:
        var(--space-0)
        var(--space-0)
        var(--space-3);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-tight);
}

.nomade-feature p {
    margin: var(--space-0);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
}

.nomade-update {
    border-left:
        var(--space-1)
        solid
        var(--nomade-theme-accent);
}

.nomade-update > p {
    line-height: var(--line-height-relaxed);
}

.nomade-update > p:nth-of-type(1),
.nomade-update > p:nth-of-type(2) {
    display: inline-block;
    margin:
        var(--space-0)
        var(--space-3)
        var(--space-3)
        var(--space-0);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.nomade-update > p:last-child {
    margin-bottom: var(--space-0);
}

.nomade-screenshots {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
}

.nomade-screenshot {
    margin: var(--space-0);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--nomade-theme-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.nomade-screenshot img {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.nomade-screenshot figcaption {
    margin-top: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

.nomade-faq {
    max-width: var(--width-content-md);
    display: grid;
    gap: var(--space-3);
}

.nomade-faq__item {
    overflow: hidden;
    background: var(--nomade-theme-surface);
    border: 1px solid var(--nomade-theme-border);
    box-shadow: var(--shadow-sm);
}

.nomade-faq__item summary {
    padding: var(--space-5) var(--space-6);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.nomade-faq__item p {
    margin: var(--space-0);
    padding:
        var(--space-0)
        var(--space-6)
        var(--space-6);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
}

.nomade-faq__item summary:focus-visible {
    outline:
        2px
        solid
        var(--nomade-theme-primary);
    outline-offset: -2px;
}

.nomade-download {
    max-width: var(--width-content-md);
    padding: var(--space-8);
    background: var(--nomade-theme-primary);
    color: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.nomade-download > h2 {
    color: inherit;
}

.nomade-detail .nomade-stores {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.nomade-detail .nomade-stores a {
    min-height: var(--space-12);
    padding: var(--space-3) var(--space-5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border: 1px solid var(--color-white);
    border-radius: var(--radius-md);
    color: var(--nomade-theme-primary);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    text-decoration: none;
}

.nomade-detail .nomade-stores a:hover {
    background: var(--nomade-detail-soft);
}

.nomade-detail .nomade-stores a:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-white);
    outline-offset: var(--focus-ring-offset);
}

.nomade-back {
    max-width: var(--width-content-md);
}

.nomade-back p {
    margin: var(--space-0);
}

.nomade-back a {
    color: var(--nomade-theme-primary);
    font-weight: var(--font-weight-semibold);
    text-underline-offset: var(--space-1);
}

@media (min-width: 48rem) {
    .nomade-detail .page-layout__container {
        padding-block:
            var(--space-12)
            var(--space-20);
    }

    .nomade-detail-hero,
    .nomade-proposition,
    .nomade-download {
        padding: var(--space-10);
    }

    .nomade-features,
    .nomade-updates,
    .nomade-screenshots {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .nomade-detail .page-layout__sections {
        gap: var(--space-16);
    }

    .nomade-features {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 35.999rem) {
    .nomade-hub__hero {
        padding: var(--space-6);
    }

    .nomade-detail .page-layout__container {
        padding-block:
            var(--space-6)
            var(--space-12);
    }

    .nomade-detail-hero,
    .nomade-proposition,
    .nomade-download {
        padding: var(--space-6);
    }

    .nomade-detail .nomade-stores,
    .nomade-detail .nomade-stores a {
        width: 100%;
    }
}