:root {
    --onboarding-primary: #0d5364;
    --onboarding-accent: #2d8a8a;
    --onboarding-text: #605e5e;
    --onboarding-button-text: #313030;
    --onboarding-green: #b0d10e;
    --onboarding-green-light: #f5f9e3;
    --onboarding-grey: #dbdbdb;
    --onboarding-dot: #a2d5d0;
    --onboarding-target: #ff5a1f;
    --onboarding-capture-bg: #0f5466;
    --onboarding-capture-nav: #0b4a59;
    --onboarding-capture-subtitle: #d3e2e6;
}

/****************/
/* MODALE *******/
/****************/

.onboarding {
    font-family: "Roboto", sans-serif;

    & .onboarding__dialog {
        width: min(45rem, 96vw);
        max-height: calc(100vh - 2.5rem);
        overflow-y: auto;
        background: #fff;
        border-radius: 1.5rem;
        box-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.18);
    }

    /* Le padding est porté par un conteneur intérieur : core.css force `.modal .modal-content { padding: 0 !important }` */
    & .onboarding__inner {
        padding: 0 2rem 2.125rem;
    }

    & button {
        font-family: inherit;
        cursor: pointer;
    }
}

/* Header : langue + fermeture */
.onboarding__header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.125rem;
    padding: 0.5rem 0.5rem 0.25rem 0;
}

.onboarding__close {
    display: flex;
    padding: 0;
    border: none;
    background: none;
}

.onboarding__lang {
    position: relative;

    &.is-open .onboarding__lang-menu {
        display: block;
    }
}

.onboarding__lang-trigger {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--onboarding-grey);
    border-radius: 0.5rem;
    background: #fff;
    color: var(--onboarding-primary);
    font-size: 0.875rem;
    font-weight: 500;
}

.onboarding__lang-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.25rem);
    z-index: 20;
    min-width: 12rem;
    max-height: min(20rem, 50vh);
    overflow-y: auto;
    padding: 0.375rem 0;
    background: #fff;
    border: 1px solid var(--onboarding-grey);
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.12);
}

.onboarding__lang-option {
    display: block;
    width: 100%;
    padding: 0.375rem 0.875rem;
    border: none;
    background: none;
    text-align: left;
    color: var(--onboarding-button-text);
    font-size: 0.875rem;

    &:hover {
        background: color-mix(in srgb, var(--onboarding-primary), transparent 92%);
    }

    &.is-active {
        color: var(--onboarding-primary);
        font-weight: 500;
    }
}

/* Proposition d'appliquer la langue au portail */
.onboarding__apply {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--onboarding-green-light);
    color: var(--onboarding-primary);
    font-size: 0.85rem;

    & span {
        flex: 1;
    }
}

.onboarding__apply-button {
    padding: 0.25rem 0.875rem;
    border: none;
    border-radius: 0.5rem;
    background: var(--onboarding-grey);
    color: var(--onboarding-button-text);
    font-size: 0.85rem;
    font-weight: 500;

    &.is-primary {
        background: var(--onboarding-green);
    }
}

/****************/
/* VUES & SLIDES */
/****************/

/* Vues et slides sont tous empilés dans la même cellule de grille : la popup prend la taille du
   contenu le plus long (toutes vues confondues), sans hauteur fixe. Elle ne change donc pas de taille
   d'une étape ou d'une vue à l'autre, et les boutons (poussés en pied) ne bougent pas. */
.onboarding__views {
    display: grid;
}

.onboarding__view {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    visibility: hidden;

    &.is-active {
        visibility: visible;
    }

    /* 1fr : les slides remplissent toute la hauteur de la vue, boutons au même niveau que sur l'écran de choix */
    &:has(> .onboarding__slide) {
        display: grid;
        grid-template-rows: 1fr;
        align-items: stretch;
    }
}

.onboarding__slide {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    visibility: hidden;

    /* Le slide courant d'une vue masquée doit rester masqué : visibility se réécrit sur l'enfant */
    .onboarding__view.is-active > &.is-active {
        visibility: visible;
    }
}

.onboarding__columns {
    display: flex;
    flex: 1;
    width: 100%;
}

.onboarding__text {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;

    .onboarding__slide & {
        gap: 1.5rem;
    }
}

.onboarding__heading {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.onboarding__overline {
    color: var(--onboarding-accent);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
}

.onboarding__title {
    color: var(--onboarding-primary);
    font-family: "Montserrat", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: break-word;
}

.onboarding__body {
    color: var(--onboarding-text);
    font-size: 0.85rem;
    line-height: 1.5;

    & p + p {
        margin-top: 0.85rem;
    }

    & a {
        color: var(--onboarding-primary);
        font-weight: 500;
        text-decoration: underline;

        &:hover {
            text-decoration: none;
        }
    }
}

/* Visuel de droite */
.onboarding__visual {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    /* Référence des unités cqi de la capture */
    container-type: inline-size;

    /* Fonds colorés des slides de la visite générale : le padding écarte l'image du bord du fond */
    &.onboarding__visual--blue,
    &.onboarding__visual--orange,
    &.onboarding__visual--green {
        padding: 0.75rem;
    }

    &.onboarding__visual--blue {
        background: #9bd4f033;
    }

    &.onboarding__visual--orange {
        background: #f89d2a33;
    }

    &.onboarding__visual--green {
        background: #b0d10e33;
    }

    &.onboarding__visual--cover {
        background-position: center;
        background-size: cover;
    }
}

.onboarding__logo {
    width: 64%;
}

.onboarding__image {
    max-width: 80%;
    object-fit: contain;
}

/* Pagination */
.onboarding__dots {
    display: flex;
    justify-content: center;
    gap: 1.375rem;
    margin-top: 2.875rem;
}

.onboarding__dot {
    width: 0.75rem;
    aspect-ratio: 1;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--onboarding-dot);

    &.is-active {
        background: var(--onboarding-primary);
    }
}

/* Boutons */
.onboarding__actions {
    /* Deux colonnes égales de part et d'autre du centre : le bouton principal garde la même position
       quelle que soit la longueur du libellé secondaire (« Skip onboarding » / « Back ») selon la langue */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2.375rem;

    .onboarding__view[data-view="choice"] > & {
        margin-top: 6rem;
    }

    > .onboarding__button:first-child {
        justify-self: end;
    }

    > .onboarding__button:last-child {
        justify-self: start;
    }

    > .onboarding__button:only-child {
        grid-column: 1 / -1;
        justify-self: center;
    }
}

.onboarding__button {
    min-width: 9.5rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.75rem;
    background: var(--onboarding-grey);
    color: var(--onboarding-button-text);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;

    &.is-primary {
        background: var(--onboarding-green);
    }

    &:hover {
        background: color-mix(in srgb, var(--onboarding-grey), #000 6%);

        &.is-primary {
            background: color-mix(in srgb, var(--onboarding-green), #000 6%);
        }
    }
}

/********************/
/* ECRAN DE CHOIX ***/
/********************/

.onboarding__option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--onboarding-grey);
    border-radius: 0.75rem;
    background: #fff;
    cursor: pointer;

    &:has(input:checked) {
        padding: calc(0.75rem - 1px) calc(0.875rem - 1px);
        border: 2px solid var(--onboarding-green);
        background: var(--onboarding-green-light);
    }

    & input {
        flex-shrink: 0;
        width: 1.125rem;
        aspect-ratio: 1;
        margin: 0.0625rem 0 0;
        appearance: none;
        border: 1.5px solid var(--onboarding-primary);
        border-radius: 50%;
        background: #fff;

        &:checked {
            border-width: 0.3125rem;
        }
    }
}

.onboarding__option-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.onboarding__option-title {
    color: var(--onboarding-primary);
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.35;
}

.onboarding__option-subtitle {
    color: var(--onboarding-text);
    font-size: 0.78rem;
    line-height: 1.35;
}

/**************************/
/* CAPTURE DU MENU PORTAIL */
/**************************/

/* La capture remplit la hauteur de sa colonne, identique à chaque étape (slides empilés) : sa taille
   ne dépend pas du menu affiché, logo / onglets restent en haut et la pastille en pied.
   Hauteur minimale aux proportions de la maquette (320 × 346), calculée sur la largeur de la colonne
   (cqi) : pas d'aspect-ratio, qui bloque la hauteur et ferait sortir la pastille quand une langue
   longue (de, fi…) allonge le menu */
.onboarding-capture {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    max-width: 20rem;
    min-height: calc(min(100cqi, 20rem) * 346 / 320);
    border-radius: 0.5rem;
    background: var(--onboarding-capture-bg);
    color: #fff;
    text-align: left;
}

.onboarding-capture__nav {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem 0.5rem 0 0;
    background: var(--onboarding-capture-nav);
}

/* Libellés complets sur une seule ligne : pour les langues longues, onboarding.js réduit la taille
   du texte (--onboarding-capture-tab-size) jusqu'à ce que tous les onglets tiennent */
.onboarding-capture__tabs {
    display: flex;
    flex: 1;
    gap: 0.25rem;
    min-width: 0;
    overflow: hidden;
}

.onboarding-capture__tab {
    flex-shrink: 0;
    padding: 0.25rem 0.3125rem;
    border-radius: 0.375rem;
    font-size: var(--onboarding-capture-tab-size, 0.5625rem);
    font-weight: 500;
    white-space: nowrap;

    /* Seul l'onglet cible porte une bordure (padding réduit d'autant) : même taille que les autres,
       rien ne bouge d'une étape à l'autre */
    &.is-target {
        padding: calc(0.25rem - 2px) calc(0.3125rem - 2px);
        border: 2px solid var(--onboarding-target);
        background: rgba(255, 255, 255, 0.22);
    }
}

.onboarding-capture__profile {
    display: flex;
    flex-shrink: 0;
    padding: 0.25rem;
    border: 2px solid transparent;
    border-radius: 0.375rem;

    &.is-target {
        border-color: var(--onboarding-target);
        background: rgba(255, 255, 255, 0.22);
    }
}

.onboarding-capture__menu {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}

.onboarding-capture__title {
    font-size: 0.75rem;
    font-weight: 700;
}

.onboarding-capture__columns {
    display: flex;
    gap: 0.875rem;
}

.onboarding-capture__column {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.onboarding-capture__item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.25rem 0.3125rem;
    border: 2.5px solid transparent;
    border-radius: 0.375rem;
    overflow-wrap: break-word;

    &.is-target {
        border-color: var(--onboarding-target);
    }
}

.onboarding-capture__label {
    font-size: 0.65625rem;
    font-weight: 500;
    line-height: 1.24;
    text-decoration: underline;
}

/* Texte complet (aucune troncature) : avec une langue longue la capture s'allonge, à l'identique
   sur toutes les étapes (slides empilés) */
.onboarding-capture__subtitle {
    color: var(--onboarding-capture-subtitle);
    font-size: 0.5625rem;
    line-height: 1.33;
}

.onboarding-capture__chip {
    display: flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.375rem;
    max-width: calc(100% - 1.25rem);
    margin: auto 0.625rem 0.625rem;
    padding: 0.375rem 0.75rem 0.375rem 0.625rem;
    border-radius: 99px;
    background: #fff;
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.25);
    color: var(--onboarding-primary);
    font-size: 0.625rem;
    font-weight: 500;
}

/**************/
/* MOBILE *****/
/**************/

@media screen and (width < 750px) {
    .onboarding__columns {
        flex-direction: column;
    }

    .onboarding__visual {
        flex: none;

        &.onboarding__visual--cover {
            aspect-ratio: 4 / 3;
        }
    }

    .onboarding__dots {
        margin-top: 1.5rem;
    }

    .onboarding__actions,
    .onboarding__view[data-view="choice"] > .onboarding__actions {
        margin-top: 1.5rem;
    }

    .onboarding__actions > .onboarding__button {
        min-width: 0;
        justify-self: stretch;
    }
}