/*
    Parcours « Créer un site » (/nouveau-site, nexsas/onboarding/start). Préfixe `ob-`.
    Variables `--cmw-*` de home.css (chargé juste avant, conteneur `.cmw-home`).
    De gros boutons, une seule action par écran : la personne ne lit pas, elle clique.
*/
.ob-page { min-height: 100vh; background: var(--cmw-paper-2); padding: 8px 16px 80px; }
.ob-wrap { max-width: 1200px; margin: 0 auto; }

.ob-steps { display: flex; justify-content: center; gap: 12px; list-style: none; padding: 0; margin: 0 0 32px; flex-wrap: wrap; }
.ob-step { display: flex; align-items: center; gap: 8px; color: var(--cmw-ink-3); font-size: 15px; }
.ob-step-num { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--cmw-line); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; background: var(--cmw-paper); }
.ob-step.is-current { color: var(--cmw-ink); font-weight: 600; }
.ob-step.is-current .ob-step-num { background: var(--cmw-ink); border-color: var(--cmw-ink); color: var(--cmw-paper); }
.ob-step.is-done .ob-step-num { background: var(--cmw-ok-soft); border-color: var(--cmw-ok); color: var(--cmw-ok); }
.ob-step + .ob-step::before { content: ""; width: 32px; height: 1px; background: var(--cmw-line); margin-right: 4px; }

.ob-back { display: inline-flex; align-items: center; gap: 8px; color: var(--cmw-ink-2); text-decoration: none; font-size: 16px; margin-bottom: 16px; }
.ob-back:hover { color: var(--cmw-ink); }

.ob-title { font-size: clamp(30px, 5vw, 52px); line-height: 1.1; font-weight: 600; color: var(--cmw-ink); text-align: center; margin: 0 0 14px; letter-spacing: -0.02em; }
.ob-lead { font-size: clamp(17px, 2vw, 20px); color: var(--cmw-ink-2); text-align: center; max-width: 640px; margin: 0 auto 40px; }
.ob-error { max-width: 640px; margin: 0 auto 24px; background: var(--cmw-danger-soft); color: var(--cmw-danger); border-radius: var(--cmw-radius); padding: 14px 18px; text-align: center; }

.ob-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; max-width: 920px; margin: 0 auto; }
.ob-choice { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 40px 28px; background: var(--cmw-paper); border: 2px solid var(--cmw-line); border-radius: var(--cmw-radius-xl); text-decoration: none; color: var(--cmw-ink); transition: border-color .15s, transform .15s, box-shadow .15s; }
.ob-choice:hover, .ob-choice:focus-visible { border-color: var(--cmw-ink); transform: translateY(-3px); box-shadow: var(--cmw-shadow-lg); }
.ob-choice-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--cmw-accent-soft); color: var(--cmw-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 30px; }
.ob-choice-title { font-size: 26px; font-weight: 600; }
.ob-choice-text { font-size: 17px; color: var(--cmw-ink-2); line-height: 1.5; flex: 1; }
.ob-choice .cmw-btn { pointer-events: none; }

.ob-login { text-align: center; margin-top: 36px; color: var(--cmw-ink-3); font-size: 16px; }
.ob-login a { color: var(--cmw-ink); font-weight: 600; }
.ob-note { text-align: center; margin-top: 32px; color: var(--cmw-ink-3); font-size: 15px; }

@media (max-width: 600px) {
    .ob-step-label { display: none; }
    .ob-choice { padding: 28px 20px; }
}

/*
   Fond du parcours (18/10/2026, /register renvoie ici).
   Visuel AiWrapper n° 720 (même série que la page de connexion et le hero de l'accueil, chacun le sien et
   chacun d'une composition différente) : des fenêtres de sites dans les coins, une petite
   fusée en bas, le centre libre pour les cartes. Fixe : les cartes défilent dessus.
   Les cartes restent blanches ; seuls les textes posés directement sur le bleu passent en blanc.
*/
.ob-page {
    /* De l'air sous la barre du haut : les étapes y étaient collées. */
    padding-top: 40px;
    background: #1e78e6 url("/assets_nexsas/images/home/nouveau-site-fenetres.webp") center / cover no-repeat fixed;
}

.ob-page .ob-title,
.ob-page .ob-step.is-current,
.ob-page .ob-back:hover,
.ob-page .ob-login a { color: #fff; }

.ob-page .cmw-claim-others > summary { color: #fff; }

.ob-page .ob-lead,
.ob-page .ob-step,
.ob-page .ob-back,
.ob-page .ob-login,
.ob-page .ob-note { color: rgba(255, 255, 255, .88); }

/* Le numéro garde sa propre couleur : il hériterait du blanc des libellés, sur une pastille blanche. */
.ob-page .ob-step-num { color: var(--cmw-ink-3); }
.ob-page .ob-step.is-current .ob-step-num { background: #fff; border-color: #fff; color: var(--cmw-ink); }
.ob-page .ob-step.is-done .ob-step-num { color: var(--cmw-ok); }
.ob-page .ob-step + .ob-step::before { background: rgba(255, 255, 255, .5); }
.ob-page .ob-choice:hover,
.ob-page .ob-choice:focus-visible { border-color: #fff; }

@media (max-width: 720px) {
    /* `fixed` est ignoré ou saccadé sur mobile : fond normal, image allégée. */
    .ob-page { background-image: url("/assets_nexsas/images/home/nouveau-site-fenetres-mobile.webp"); background-attachment: scroll; }
}

/* Mention sous le bouton d'une carte (« (Le prix ne change pas !) » sur la boutique haut de gamme). */
.ob-choice-note { font-style: italic; font-size: 15px; color: var(--cmw-ink-3); margin-top: -4px; }

/*
   PANNEAU DU CLIENT CONNECTÉ (/websites/create, 19/10/2026) : même parcours, posé dans le contenu du
   layout à sidebar. Coins arrondis, pas de hauteur d'écran forcée, fond qui défile avec la page
   (`fixed` le calerait sur la fenêtre entière, derrière la sidebar).
*/
.ob-page--panel { min-height: 0; border-radius: var(--cmw-radius-l); padding: 32px 20px 56px; background-attachment: scroll; }
/* Image calée sur la LARGEUR, pas en `cover` : en `cover`, ouvrir un bloc du formulaire
   (adresse publique, réglages avancés) allongeait la page et regrossissait toute l'illustration. */
@media (min-width: 768px) {
    .ob-page--panel { background-size: 100% auto; background-position: top center; }
}
.ob-page--panel .ob-title { font-size: clamp(26px, 3.6vw, 40px); }

.ob-advanced { text-align: center; margin-top: 32px; }
.ob-advanced a { color: rgba(255, 255, 255, .88); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.ob-advanced a:hover { color: #fff; }

/* 3e étape du client connecté : la carte du choix fait, puis le formulaire dans une carte blanche. */
.ob-panel { max-width: 760px; margin: 0 auto; background: var(--cmw-paper); border-radius: var(--cmw-radius-xl); box-shadow: var(--cmw-shadow-lg); padding: 32px; color: var(--cmw-ink); }
.ob-picked { display: flex; align-items: center; gap: 16px; padding: 16px 18px; margin-bottom: 28px; border: 2px solid var(--cmw-accent-line); background: var(--cmw-accent-soft); border-radius: var(--cmw-radius); }
.ob-picked .ob-choice-icon { width: 52px; height: 52px; font-size: 22px; flex-shrink: 0; background: var(--cmw-paper); }
.ob-picked-body { flex: 1; min-width: 0; }
.ob-picked-label { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--cmw-ink-3); }
.ob-picked-title { display: block; font-size: 20px; font-weight: 600; }
.ob-picked-change { font-size: 15px; font-weight: 600; color: var(--cmw-ink); white-space: nowrap; }
.ob-panel .ob-advanced-block > summary { cursor: pointer; font-weight: 600; margin-bottom: 16px; color: var(--cmw-ink-2); }
.ob-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 12px; }
.ob-panel-actions .cmw-btn { border: 0; cursor: pointer; }

@media (max-width: 600px) {
    .ob-panel { padding: 22px 16px; }
    .ob-picked { flex-wrap: wrap; }
}

/* Offres du 28/10/2026 : arguments sous le choix de la structure boutique. */
.ob-args { margin-top: 56px; }