@charset "UTF-8";
/* ==========================================================================
   WilyStore — Console développeur : écran « Nature du compte »
   --------------------------------------------------------------------------
   Feuille DÉDIÉE, chargée par templates/console/layout.php via
   $wilyPageStyles (voir templates/console/onboarding_type.php) : elle n'est
   servie que sur l'écran d'accueil de la console.

   Contraintes (identiques à console-organization.css) :
     * CSP style-src 'self' : aucun attribut style="..." dans le gabarit.
     * Aucune couleur de marque en dur : tout vient des jetons de style.css.
     * Aucun texte dans une propriété content: — les libellés sont dans le
       HTML, donc traduits dans les cinq langues du store.
     * La sélection est portée par :checked + label : visible sans JavaScript,
       et jamais par la seule couleur (bordure + ombre + état natif du radio).

   Sommaire : 1 cadre, 2 grille, 3 radio masqué, 4 carte et états,
              5 actions, 6 adaptations.
   ========================================================================== */

/* 1. Cadre et en-tête ------------------------------------------------------ */
.onboarding {
    display: flex;
    flex-direction: column;
    gap: var(--wily-space-4);
    max-width: 78rem;
}

.onboarding__head,
.onboarding__form {
    display: flex;
    flex-direction: column;
    gap: var(--wily-space-2);
}

.onboarding__title {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.2;
}

.onboarding__intro {
    margin: 0;
    max-width: 60ch;
}

.onboarding__account {
    margin: 0;
    font-weight: 600;
}

.onboarding__fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

/* 2. Grille des deux cartes ----------------------------------------------- */
.onboarding__choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wily-space-4);
    align-items: stretch;
}

.onboarding__choice {
    display: flex;
    min-width: 0;
}

/* 3. Bouton radio masqué mais focusable ----------------------------------- */
/* Une carte = un vrai <input type="radio"> : clavier, flèches et lecteurs
   d'écran fonctionnent sans JavaScript. Le retrait visuel est un clip et non
   un display:none, sinon le contrôle quitterait l'ordre de tabulation. */
.onboarding__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* 4. Carte de choix et états --------------------------------------------- */
.onboarding__card {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--wily-space-2);
    padding: var(--wily-space-4);
    border: 1px solid var(--wily-border);
    border-radius: var(--wily-radius-lg, 1rem);
    background: var(--wily-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.onboarding__card:hover {
    border-color: var(--wily-text-muted, currentColor);
}

/* Deux signaux pour un seul état : bordure marquée ET anneau. La couleur seule
   ne suffirait pas à distinguer les cartes pour un daltonien ou en niveaux de
   gris ; l'anatomie du bouton radio reste, elle, lue par l'assistance. */
.onboarding__radio:checked+.onboarding__card {
    border-color: var(--wily-red);
    box-shadow: 0 0 0 2px var(--wily-red);
}

.onboarding__radio:focus-visible+.onboarding__card {
    outline: 2px solid var(--wily-red);
    outline-offset: 2px;
}

.onboarding__card-title {
    font-size: 1.125rem;
    font-weight: 700;
}

.onboarding__card-summary {
    font-size: 0.9375rem;
}

.onboarding__points {
    display: flex;
    flex-direction: column;
    gap: var(--wily-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Puce dessinée sans texte : aucun libellé dans content: (QUALITE #9). */
.onboarding__point {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.875rem;
}

.onboarding__point::before {
    content: "";
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--wily-red);
}

/* 5. Actions et note ----------------------------------------------------- */
.onboarding__actions {
    display: flex;
    justify-content: flex-start;
}

.onboarding__note {
    max-width: 60ch;
}

/* 6. Adaptations --------------------------------------------------------- */
@media (max-width: 60rem) {
    .onboarding__choices {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .onboarding__card {
        transition: none;
    }
}