/* ==========================================================================
   SIKO MOBILITY — maquettes codees en HTML/CSS (siko-mobility.html)
   --------------------------------------------------------------------------
   Reproduction des ecrans Figma (fichier Siko Mobility, page Prototype et
   Design system). Comme pour Sportigo, chaque scene garde ses dimensions de
   maquette et est mise a l'echelle de son cadre par script-case.js
   (--mock-scale) : toutes les cotes ci-dessous sont celles de Figma, en px.
   Police : Inter (Google Fonts), chargee dans le <head> de la page.
   Les rappels « justification » viennent du document de choix de conception.
   ========================================================================== */

/* ---------- Jetons (variables Figma « Colors ») ---------- */

.sk-stage {
    --sk-bleu: #1d4ed8;
    --sk-bleu-hover: #204bc2;
    --sk-bleu-2: rgba(211, 220, 247, 0.25);
    --sk-bleu-blanc: #eff6ff;
    --sk-blanc: #fff;
    --sk-blanc-gris: #f0f2f5;
    --sk-blanc-gris-2: #f2f3f3;
    --sk-noir: #111827;
    --sk-gris: #6b7280;
    --sk-gris-2: #cacdd4;
    --sk-gris-stroke: rgba(202, 205, 212, 0.25);
    --sk-vert-2: rgba(34, 197, 94, 0.15);
    --sk-annotation: #9747ff;
}

/* Mode sombre de la maquette : fond gris adouci plutot que noir, texte
   qui reste noir, bleus legerement assombris (modes « Dark mode »). */
.sk-dark {
    --sk-bleu: #204bc2;
    --sk-blanc: #f0f2f5;
    --sk-bleu-blanc: #e4edf8;
    --sk-bleu-2: rgba(211, 220, 247, 0.5);
    /* Survols du mode sombre : un cran plus fonce que les fonds ci-dessus,
       sinon le bleu (deja #204bc2) et le blanc gris ne changent pas. */
    --sk-bleu-hover: #1e40af;
    --sk-blanc-gris-2: #e5e7eb;
}

/* ---------- Cadre et mise a l'echelle ---------- */

.case-mock {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 1px 2px -1px rgba(0, 0, 0, 0.06),
        0 2px 4px 0 rgba(0, 0, 0, 0.04);
}

.sk-stage {
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(var(--mock-scale, 1));
    transform-origin: 0 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: var(--sk-noir);
    text-align: left;
    -webkit-font-smoothing: antialiased;
    pointer-events: none;
}

.sk-stage img {
    display: block;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
}

.sk-stage p {
    margin: 0;
}

/* ---------- Boutons (composants Button / Button 3) ---------- */

.sk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 120px;
    /* Contour interieur comme dans Figma : 1px repris sur le padding. */
    padding: 14px 19px;
    border: 1px solid var(--sk-gris-stroke);
    border-radius: 6px;
    background: var(--sk-blanc);
    font-size: 14px;
    color: var(--sk-noir);
    white-space: nowrap;
}

.sk-btn--primary {
    border-color: transparent;
    background: var(--sk-bleu);
    color: #fff;
}

.sk-btn img {
    width: 14px;
    height: 14px;
}

/* ---------- Navigation ---------- */

.sk-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 20px;
    background: var(--sk-blanc);
}

.sk-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 80px;
}

.sk-logo {
    width: 112px;
    height: 28px;
}

.sk-nav-right,
.sk-nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
}

.sk-nav-links {
    align-items: flex-end;
    font-size: 16px;
}

.sk-nav-btns {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sk-rule {
    height: 2px;
    background: var(--sk-gris-stroke);
}

/* Variante mobile : marge haute de la barre d'etat, burger a droite. */
.sk-nav--mobile {
    gap: 15px;
    padding-top: 78px;
}

.sk-nav--mobile .sk-nav-row {
    padding: 0 15px;
}

.sk-burger {
    position: relative;
    width: 17px;
    height: 14px;
}

.sk-burger span {
    position: absolute;
    left: 0;
    right: 0;
    height: 20%;
    border-radius: 4px;
    background: var(--sk-noir);
}

.sk-burger span:nth-child(1) { top: 0; }
.sk-burger span:nth-child(2) { top: 40%; }
.sk-burger span:nth-child(3) { bottom: 0; }

/* ---------- Tableau de bord (stepper) ---------- */

.sk-steps {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
    padding: 30px;
    overflow: hidden;
    border: 1px solid var(--sk-gris-stroke);
    border-radius: 20px;
    background: var(--sk-blanc);
}

.sk-step {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sk-step-icon {
    flex-shrink: 0;
    padding: 6px;
    border-radius: 50px;
    background: var(--sk-blanc-gris);
}

.sk-step-icon img {
    width: 20px;
    height: 20px;
}

.sk-step--done .sk-step-icon {
    background: var(--sk-vert-2);
}

.sk-step--current .sk-step-icon {
    background: var(--sk-bleu);
}

.sk-step-text {
    font-size: 14px;
    white-space: nowrap;
}

.sk-step-text strong {
    display: block;
    font-weight: 500;
    font-size: 16px;
}

/* Trait entre deux etapes : vert apres une etape validee, bleu pale apres
   l'etape en cours, gris ensuite. */
.sk-step-link {
    padding: 0 13px;
}

.sk-step-link::before {
    content: '';
    display: block;
    width: 6px;
    height: 22px;
    border-radius: 20px;
    background: var(--sk-gris-stroke);
}

.sk-step-link--done::before {
    background: var(--sk-vert-2);
}

.sk-step-link--current::before {
    background: var(--sk-bleu-2);
}

/* Version mobile : icones seules, pilule pleine hauteur. */
.sk-steps--compact {
    padding: 10px;
    border-radius: 9999px;
}

/* ---------- Formulaire ---------- */

.sk-form {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: 20px;
    min-width: 1px;
}

.sk-title {
    font-weight: 700;
    font-size: 30px;
}

.sk-subtitle {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-weight: 700;
    font-size: 16px;
    color: var(--sk-gris);
}

.sk-subtitle::after {
    content: '';
    height: 1px;
    background: var(--sk-gris-2);
}

.sk-fields {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 30px;
}

.sk-col {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: 30px;
    min-width: 369.5px;
}

.sk-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sk-input {
    height: 42px;
    padding: 12px;
    border: 1px solid var(--sk-gris-stroke);
    border-radius: 8px;
    background: var(--sk-blanc-gris);
    color: var(--sk-gris);
}

.sk-options {
    display: flex;
    align-items: center;
    gap: 30px;
}

.sk-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px;
    white-space: nowrap;
}

.sk-radio {
    flex-shrink: 0;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border: 0.5px solid var(--sk-gris-2);
    border-radius: 9999px;
    background: var(--sk-blanc-gris);
}

.sk-radio--on {
    border: 3px solid var(--sk-bleu);
    background: var(--sk-blanc);
}

.sk-consent {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 508px;
}

.sk-consent p {
    flex: 1 0 0;
}

.sk-link {
    color: #1d4ed8;
}

/* ---------- 1. Ecran desktop : formulaire d'identite (1512 x 878) ---------- */

.case-mock--screen {
    aspect-ratio: 1512 / 878;
}

.case-mock--screen .sk-stage {
    width: 1512px;
    height: 878px;
    background: var(--sk-blanc);
}

.sk-body {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding: 40px 80px 30px;
}

.sk-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 80px 40px;
}

/* ---------- 2. Tableau de bord : mobile + desktop (1100 x 660) ---------- */

.case-mock--steps {
    aspect-ratio: 1100 / 660;
    background: #f5f5f5;
}

.case-mock--steps .sk-stage {
    width: 1100px;
    height: 660px;
}

/* Meme marge de 64 px en haut et a gauche ; les deux ecrans filent sous les
   bords du cadre (bas pour le mobile, bas et droite pour le desktop). */
.sk-phone {
    position: absolute;
    top: 64px;
    left: 64px;
    width: 393px;
    height: 700px;
    overflow: hidden;
    border-radius: 55px 55px 0 0;
    /* Ecran a 393 pt (iPhone 15 Pro) reduit a 88 % pour alleger le mobile. */
    transform: scale(0.88);
    transform-origin: 0 0;
    background: var(--sk-blanc);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 12px 32px -8px rgba(17, 24, 39, 0.12);
}

/* Barre d'etat iOS d'un iPhone 15 Pro (393 pt) : heure et icones centrees
   dans les deux "oreilles" de part et d'autre de la Dynamic Island. */
.sk-statusbar {
    position: absolute;
    top: 11px;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 1fr 126px 1fr;
    align-items: center;
    height: 37px;
    color: #000;
}

.sk-statusbar-time {
    justify-self: center;
    padding-left: 6px;
    font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: -0.4px;
}

.sk-island {
    height: 37px;
    border-radius: 18.5px;
    background: #000;
}

.sk-statusbar-icons {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 6px;
}

.sk-statusbar-icons svg {
    display: block;
    fill: currentColor;
}

.sk-body--mobile {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 40px 15px 30px;
}

.sk-body--mobile .sk-col {
    min-width: 0;
    padding-top: 10px;
}

/* Fenetre de navigateur : l'ecran desktop (1512 px) y est reduit aux deux
   tiers pour montrer le tableau de bord complet a cote du formulaire. */
.sk-window {
    position: absolute;
    top: 64px;
    /* 32 px a droite du mobile (64 + 393 * 0.88 + 32), et assez large pour
       filer sous le bord droit du cadre. */
    left: 442px;
    width: 700px;
    height: 640px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--sk-blanc);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 12px 32px -8px rgba(17, 24, 39, 0.12);
}

.sk-window-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border-bottom: 1px solid var(--sk-gris-stroke);
    background: #f9fafb;
}

.sk-window-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sk-gris-2);
}

.sk-window-screen {
    width: 1512px;
    transform: scale(0.66);
    transform-origin: 0 0;
}

/* ---------- 3. Pop-up, clair / sombre (760 x 600) ---------- */

.case-mock--modal {
    aspect-ratio: 760 / 600;
    background: #d1d5db;
}

.case-mock--modal .sk-stage {
    width: 760px;
    height: 600px;
}

/* Fond de page assombri derriere la pop-up en mode sombre (Gris, valeur
   Dark mode), pour lire tout de suite les deux etats cote a cote. */
.case-mock--modal:has(.sk-dark) {
    background: #9ca3af;
}

.sk-modal {
    position: absolute;
    top: 41px;
    left: 120.5px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 519px;
    padding: 40px;
    box-sizing: border-box;
    border-radius: 6px;
    background: var(--sk-blanc);
    box-shadow: 0 16px 40px -12px rgba(17, 24, 39, 0.25);
}

.sk-modal .sk-title {
    width: 100%;
}

.sk-breakdown {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.sk-amounts {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sk-amount {
    display: flex;
    flex-direction: column;
    gap: 7px;
    height: 27px;
}

.sk-amount p {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    font-size: 16px;
    white-space: nowrap;
}

.sk-amount strong {
    font-weight: 700;
}

.sk-amount::after {
    content: '';
    height: 1px;
    background: var(--sk-gris-2);
}

.sk-total {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 91px;
    border-radius: 8px;
    background: var(--sk-bleu-blanc);
    font-weight: 700;
    font-size: 30px;
    color: var(--sk-bleu);
}

.sk-modal-actions {
    display: flex;
    gap: 10px;
}

.sk-modal-actions .sk-btn {
    flex: 1 0 0;
}

/* ---------- 4. Details d'interaction (380 x 300) ---------- */

.case-mock--detail {
    aspect-ratio: 380 / 300;
    background: #f5f5f5;
}

.case-mock--detail .sk-stage {
    width: 380px;
    height: 300px;
}

/* Logique directionnelle des boutons : retour a gauche, suite a droite. */
.sk-cta {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    gap: 10px;
    transform: translate(-50%, -50%);
}

.sk-cta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.sk-cta-note {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.02em;
    color: var(--sk-gris);
    white-space: nowrap;
}

/* Curseur (illustration, hors maquette) qui vient survoler « Suivant ». */
.sk-cursor {
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 20px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.sk-cta .sk-cursor {
    top: 92px;
    left: 230px;
}

/* Zone de clic d'une case a cocher : 4px autour du rond et du libelle. */
.sk-hit {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transform: translate(-50%, -50%);
}

.sk-hit .sk-option {
    outline: 1px dashed transparent;
}

.sk-hit .sk-option--zone {
    outline-color: var(--sk-annotation);
}

.sk-hit-size {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 4px;
    border-radius: 2px;
    background: var(--sk-annotation);
    font-weight: 500;
    font-size: 9px;
    color: #fff;
    white-space: nowrap;
}

.sk-hit .sk-cursor {
    top: 30px;
    left: 112px;
}

/* ---------- Animations des details (survol et clic simules) ---------- */

@media (prefers-reduced-motion: no-preference) {
    .sk-cta .sk-cursor {
        animation: sk-cursor-hover 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    .sk-cta .sk-btn--primary {
        animation: sk-btn-hover 4s step-end infinite;
    }

    .sk-cta .sk-btn--ghost {
        animation: sk-btn-ghost-hover 4s step-end infinite;
    }

    .sk-hit .sk-cursor {
        animation: sk-cursor-click 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    .sk-hit .sk-radio--yes {
        animation: sk-radio-off 5s step-end infinite;
    }

    .sk-hit .sk-radio--no {
        animation: sk-radio-on 5s step-end infinite;
    }
}

/* Le curseur part du bas, survole « Precedent », puis « Suivant ». */
@keyframes sk-cursor-hover {
    0%, 8% { transform: translate(40px, 50px); opacity: 0; }
    15% { opacity: 1; }
    25%, 42% { transform: translate(-150px, -60px); }
    55%, 85% { transform: translate(-10px, -60px); opacity: 1; }
    95%, 100% { transform: translate(40px, 50px); opacity: 0; }
}

@keyframes sk-btn-ghost-hover {
    0% { background: var(--sk-blanc); }
    25% { background: var(--sk-blanc-gris-2); }
    46% { background: var(--sk-blanc); }
}

@keyframes sk-btn-hover {
    0% { background: var(--sk-bleu); }
    54% { background: var(--sk-bleu-hover); }
    87% { background: var(--sk-bleu); }
}

/* Clic sur le libelle « Non » (pas sur le rond) : la selection bascule. */
@keyframes sk-cursor-click {
    0%, 10% { transform: translate(60px, 60px); opacity: 0; }
    20% { opacity: 1; }
    35% { transform: translate(0, 0) scale(1); }
    40% { transform: translate(0, 0) scale(0.85); }
    45%, 75% { transform: translate(0, 0) scale(1); opacity: 1; }
    90%, 100% { transform: translate(60px, 60px); opacity: 0; }
}

@keyframes sk-radio-off {
    0% { border: 3px solid var(--sk-bleu); background: var(--sk-blanc); }
    40% { border: 0.5px solid var(--sk-gris-2); background: var(--sk-blanc-gris); }
    92% { border: 3px solid var(--sk-bleu); background: var(--sk-blanc); }
}

@keyframes sk-radio-on {
    0% { border: 0.5px solid var(--sk-gris-2); background: var(--sk-blanc-gris); }
    40% { border: 3px solid var(--sk-bleu); background: var(--sk-blanc); }
    92% { border: 0.5px solid var(--sk-gris-2); background: var(--sk-blanc-gris); }
}

/* ---------- Survol des boutons et liens (souris uniquement) ----------
   Etats « Hover » du design system Siko : le bouton bleu passe en
   --sk-bleu-hover, le bouton blanc en --sk-blanc-gris-2. La scene est
   inerte : seuls les boutons et liens recoivent le pointeur. Les boutons
   animes de la figure « Precedent / Suivant » gardent leur animation. */

.sk-btn,
.sk-link {
    pointer-events: auto;
    transition: background-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .sk-btn:hover {
        background: var(--sk-blanc-gris-2);
    }

    .sk-btn--primary:hover {
        background: var(--sk-bleu-hover);
    }

    .sk-link:hover {
        color: var(--sk-bleu-hover);
        text-decoration: underline;
        text-underline-offset: 2px;
    }
}