/*
 * Vitrine (lots 194 et 196 ; CDC, P0 § 16) : accueil (maquette retenue, variante C « Agent
 * d'abord ») et page d'erreur. Toujours en palette sombre « Graphite » (attribut posé sur
 * <html>, gabarit landing/base.html.twig) ; tokens de variables.css seulement, aucune couleur ni
 * taille en dur. De 360 px à grand écran : ouverture en deux colonnes quand la place le permet,
 * empilée sinon ; navigation des sections masquée sous 760 px, « Se connecter » et « Créer un
 * studio » toujours visibles, comme le lien de langue (lot 200). Aucune animation ni transition.
 */
.landing {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font: var(--text-landing-body);
}

.landing a:focus-visible,
.landing-main:focus-visible {
    outline: var(--focus-width) solid var(--focus-ring);
    outline-offset: var(--focus-offset);
}

.landing-main:focus {
    outline: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Lien d'évitement : visible seulement au focus. */
.landing-skip {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 1;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    background: var(--navy);
    color: var(--on-navy);
    font-weight: var(--font-weight-semibold);
    transform: translateY(-200%);
}

.landing-skip:focus {
    transform: none;
}

.landing-wrap {
    box-sizing: border-box;
    max-width: var(--landing-max);
    margin: 0 auto;
    padding: 0 var(--landing-gutter);
}

.landing-eyebrow {
    margin: 0;
    color: var(--navy);
    font: var(--text-landing-eyebrow);
    letter-spacing: var(--tracking-landing-eyebrow);
    text-transform: uppercase;
}

/* Boutons « Créer un studio » : orange à l'ouverture, style principal du design system ailleurs. */
.landing-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: var(--landing-button-height);
    padding: 0 var(--space-6);
    border-radius: var(--radius-lg);
    font: var(--text-landing-button);
    text-decoration: none;
}

.landing-button:hover {
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
}

.landing-button--orange {
    background: var(--orange);
    color: var(--on-orange);
}

.landing-button--primary {
    background: var(--navy);
    color: var(--on-navy);
}

.landing-button--primary:hover {
    background: var(--navy-hover);
}

.landing-button--sm {
    min-height: var(--control-size);
    padding: 0 var(--space-4);
    border-radius: var(--radius-md);
    font: var(--text-button);
    font-weight: var(--font-weight-semibold);
}

.landing-closed {
    margin: 0;
    color: var(--ink);
    font-weight: var(--font-weight-semibold);
}

/* En-tête */
.landing-header {
    border-bottom: var(--line-width) solid var(--line);
}

.landing-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
    min-height: var(--landing-header-height);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.landing-header__home {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-size);
    border-radius: var(--radius-sm);
}

.landing-header__home .logo {
    display: block;
}

.landing-header__nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-header__nav-link,
.landing-header__login,
.landing-header__language,
.landing-footer__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-size);
    font: var(--text-body);
    text-underline-offset: var(--underline-offset);
}

.landing-header__nav-link,
.landing-header__language,
.landing-footer__link {
    color: var(--ink-muted);
    text-decoration: none;
}

/* Lien de langue « EN » / « FR » : cible carrée d'au moins la taille d'un contrôle (44 px au doigt). */
.landing-header__language {
    justify-content: center;
    min-width: var(--control-size);
}

.landing-header__login {
    justify-content: center;
    /* « Log in » est plus étroit que 44 px au doigt (jalon 203). */
    min-width: var(--control-size);
    color: var(--ink);
    text-decoration: none;
}

.landing-header__nav-link:hover,
.landing-header__login:hover,
.landing-header__language:hover,
.landing-footer__link:hover {
    color: var(--ink);
    text-decoration: underline;
}

.landing-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);
    margin-left: auto;
}

@media (max-width: 760px) {
    .landing-header__nav {
        display: none;
    }
}

/* Ouverture */
.landing-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--landing-hero-column-min)), 1fr));
    gap: var(--landing-hero-gap);
    align-items: center;
    padding-top: var(--landing-hero-space-top);
    padding-bottom: var(--landing-section-space);
}

.landing-hero__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
}

.landing-hero__title {
    margin: 0;
    color: var(--ink);
    font: var(--text-landing-display);
    letter-spacing: var(--tracking-landing-display);
    overflow-wrap: break-word;
}

.landing-hero__intro {
    max-width: var(--landing-intro-max);
    margin: 0;
    color: var(--ink-muted);
    font: var(--text-landing-lead);
}

.landing-hero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
}

.landing-hero__beta {
    margin: 0;
    color: var(--ink-muted);
    font: var(--text-body);
}

.landing-hero__demo {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

/* Exemple de conversation */
.landing-chat,
.landing-task {
    display: flex;
    flex-direction: column;
    margin: 0;
    border: var(--line-width) solid var(--line);
    background: var(--surface);
}

.landing-chat {
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-landing);
}

.landing-chat__request {
    align-self: flex-end;
    max-width: var(--landing-chat-bubble-max);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-landing-sm);
    background: var(--surface-sunken);
    font: var(--text-body-client);
}

.landing-chat__tools {
    padding: var(--space-3) var(--space-4);
    border: var(--line-width) solid var(--line);
    border-radius: var(--radius-lg);
}

.landing-chat__tool-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ink-muted);
    font: var(--text-mono);
}

/* Colonnes alignées comme dans un terminal ; à la ligne quand la place manque (360 px). */
.landing-chat__tool {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.landing-chat__reply {
    margin: 0;
    font: var(--text-body-client);
}

/* Carte de la tâche passée « En revue » : forme du statut et libellé écrit. */
.landing-task {
    gap: var(--space-3);
    padding: var(--space-5);
    border-radius: var(--radius-landing-sm);
}

.landing-task__name,
.landing-task__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
}

.landing-task__name {
    gap: var(--space-3);
}

.landing-task__number {
    color: var(--ink-muted);
    font: var(--text-mono);
}

.landing-task__title {
    color: var(--ink);
    font-weight: var(--font-weight-semibold);
}

.landing-task__meta {
    gap: var(--space-2) var(--space-5);
    color: var(--ink-muted);
    font: var(--text-small);
}

.landing-task__status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink);
}

.landing-task__status .status-shape {
    flex: none;
    width: var(--shape-size);
    height: var(--shape-size);
}

.landing-task__next {
    margin: 0;
    color: var(--ink-muted);
    font: var(--text-body);
}

/* Sections */
.landing-section {
    padding: var(--landing-section-space) 0;
    border-top: var(--line-width) solid var(--line);
}

.landing-section__title {
    margin: 0 0 var(--space-8);
    color: var(--ink);
    font: var(--text-landing-section);
    letter-spacing: var(--tracking-landing-section);
}

.landing-section__title--narrow {
    max-width: var(--landing-title-max);
}

/* Trois étapes */
.landing-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--landing-step-column-min)), 1fr));
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-steps__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: var(--line-width) solid var(--line-strong);
}

.landing-steps__number {
    color: var(--navy);
    font: var(--text-landing-step-number);
}

.landing-steps__title {
    margin: 0;
    color: var(--ink);
    font: var(--text-landing-step-title);
}

.landing-steps__text {
    margin: 0;
    color: var(--ink-muted);
}

/* Fonctions */
.landing-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--landing-grid-column-min)), 1fr));
    gap: 0 var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ink-muted);
}

.landing-features__item {
    padding: var(--space-5) 0;
    border-bottom: var(--line-width) solid var(--line);
}

.landing-features__term {
    color: var(--ink);
    font-weight: var(--font-weight-bold);
}

/* Pour qui */
.landing-audience {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--landing-grid-column-min)), 1fr));
    gap: var(--space-6);
}

.landing-audience__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-7);
    border: var(--line-width) solid var(--line);
    border-radius: var(--radius-landing);
    background: var(--surface);
}

.landing-audience__title {
    margin: 0;
    color: var(--ink);
    font: var(--text-landing-card-title);
    letter-spacing: var(--tracking-landing-card-title);
}

.landing-audience__text {
    margin: 0;
    color: var(--ink-muted);
}

/* Appel final */
.landing-final {
    padding: var(--landing-final-space) 0;
}

.landing-final__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    text-align: center;
}

.landing-final .landing-section__title {
    margin: 0;
}

.landing-final__text {
    margin: 0;
    color: var(--ink-muted);
    font: var(--text-landing-final);
}

/* Pied */
.landing-footer {
    padding: var(--space-7) 0;
    border-top: var(--line-width) solid var(--line);
    color: var(--ink-muted);
    font: var(--text-body);
}

.landing-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-6);
}

.landing-footer__copyright {
    margin: 0;
}

/* Langues (lot 200) : « Français · English », la langue de la page en gras, l'autre en lien. */
.landing-footer__languages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 0 auto;
}

.landing-footer__language-current {
    color: var(--ink);
    font-weight: var(--font-weight-bold);
}

@media (max-width: 640px) {
    .landing-hero {
        padding-top: var(--space-8);
        padding-bottom: var(--space-8);
    }

    .landing-section,
    .landing-final {
        padding: var(--space-8) 0;
    }

    .landing-section__title {
        margin-bottom: var(--space-7);
    }

    .landing-audience__item {
        padding: var(--space-6);
    }
}

/* Page d'erreur de la vitrine (lot 194). */
.landing__main {
    box-sizing: border-box;
    max-width: var(--measure-max);
    margin: 0 auto;
    padding: var(--space-8) var(--space-5);
    overflow-wrap: break-word;
}

.landing__title {
    margin: 0 0 var(--space-5);
    color: var(--navy);
    font: var(--text-title-1);
}

.landing__intro {
    margin: 0 0 var(--space-6);
    color: var(--ink-muted);
}

.landing__code {
    margin: 0 0 var(--space-5);
    color: var(--ink-muted);
    font-weight: var(--font-weight-semibold);
}

.landing__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-size);
    color: var(--navy);
    font-weight: var(--font-weight-semibold);
    text-underline-offset: var(--underline-offset);
}