/* ═══════════════════════════════════════════════════════════════════════════
   Encre — la langue visuelle des écrans d'entrée (2026-09-26)
   Inscription commerçant, inscription membre, connexion pro, connexion
   membre. Blanc intégral, encre noire, une règle verticale née d'une bille
   qui tombe du haut de l'écran. Écrit à la main : le build Tailwind est figé
   (2026-07-03), il ne sert ici qu'à la mise en page.
   Structure attendue par la scène (encre-scene.js) :
     .insc > .insc-form > .insc-regle (+ i) et .insc-glisse > [x-show] | .insc-page
   ═══════════════════════════════════════════════════════════════════════ */

/* ── L'en-tête ─────────────────────────────────────────────────────────── */
.insc-tete {
    position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px; font-size: 13px;
}
/* Pendant la scène, pas de fond : la scène est déjà blanche, et un fond à
   92 % voilerait la bille quand elle traverse la bande du haut. */
body:not(.insc-pret) .insc-tete { background: transparent; backdrop-filter: none; }
.insc-tete .marque { font-family: 'Schibsted Grotesk', 'Inter', sans-serif; font-weight: 700; letter-spacing: -.02em; font-size: 17px; color: #0a0a0a; text-decoration: none; }
.insc-tete .deja { color: #6b6b6b; text-decoration: none; }
.insc-tete .deja b { color: #0a0a0a; font-weight: 600; }
.insc-tete .deja:hover b { text-decoration: underline; text-underline-offset: 3px; }
.insc-flash { max-width: 600px; margin: 8px auto 0; padding: 0 24px; }
.insc-flash p, .insc-flash ul { border-left: 3px solid #0a0a0a; padding: 10px 14px; font-size: 13.5px; background: #fafafa; }
.insc-flash ul { list-style: disc; padding-left: 30px; }

/* ── Le formulaire ─────────────────────────────────────────────────────── */
    /* ── Encre et papier ────────────────────────────────────────────────────
       Une seule couleur : #0a0a0a sur blanc. Les gris ne servent qu'aux
       seconds rôles (aide, bordures au repos). Tout ce qui est actif est noir. */
    .insc { --encre: #0a0a0a; --gris: #6b6b6b; --trait: #d9d9d9; --papier: #fff; --largeur: 600px; }
    .insc { max-width: var(--largeur); margin: 0 auto; padding: 8vh 24px 96px; }
    .insc .ttl { font-family: 'Schibsted Grotesk', 'Inter', sans-serif; font-size: 30px; line-height: 1.1; letter-spacing: -.025em; font-weight: 700; color: var(--encre); margin-bottom: 8px; }
    .insc .sub { font-size: 14.5px; line-height: 1.55; color: var(--gris); margin-bottom: 28px; }
    .insc .lbl { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--encre); margin-bottom: 7px; }
    .insc .req { color: var(--encre); font-weight: 700; }
    .insc .lbl::after { content: ''; display: block; height: 2px; width: 0; background: var(--encre); margin-top: 3px; transition: width .35s cubic-bezier(.2,.8,.2,1); }
    .insc div:has(> .inp:focus) > .lbl::after, .insc div:has(> .relative > .inp:focus) > .lbl::after { width: 28px; }

    /* Les champs : un cadre noir fin, aucun arrondi mou, un focus qui épaissit
       le trait au lieu d'ajouter un halo coloré. */
    .insc .inp {
        width: 100%; padding: 12px 14px; font-size: 15px; color: var(--encre); background: var(--papier);
        border: 1.5px solid var(--encre); border-radius: 6px; outline: none;
        transition: box-shadow .18s ease, border-color .18s ease; -webkit-appearance: none; appearance: none;
    }
    .insc .inp::placeholder { color: #a3a3a3; }
    .insc .inp:focus { box-shadow: 0 0 0 1.5px var(--encre); }
    .insc .inp.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .04em; }
    .insc .inp.large { letter-spacing: .28em; text-transform: uppercase; }
    .insc select.inp { padding-right: 40px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; }
    .insc .chk { width: 18px; height: 18px; border: 1.5px solid var(--encre); border-radius: 4px; accent-color: var(--encre); cursor: pointer; }

    .insc .lien { color: var(--encre); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
    .insc .lien-discret { color: var(--gris); text-decoration: underline; text-underline-offset: 3px; }
    .insc .lien-discret:hover { color: var(--encre); }

    /* Une note : jamais de couleur d'alerte, un trait noir à gauche et du texte. */
    .insc .note { border-left: 3px solid var(--encre); background: #fafafa; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; color: var(--encre); border-radius: 0 6px 6px 0; }
    .insc .note-xs { font-size: 12.5px; padding: 9px 12px; }
    .insc .note ul { margin-top: 4px; }

    /* Les boutons : le principal est un bloc noir, le retour est un mot. */
    .insc .btn-noir {
        display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; font-size: 14.5px; font-weight: 600;
        color: #fff; background: var(--encre); border-radius: 6px; border: 1.5px solid var(--encre);
        transition: transform .18s cubic-bezier(.2,.8,.2,1), background .18s, opacity .18s;
    }
    .insc .btn-noir:hover:not(:disabled) { transform: translateX(3px); }
    .insc .btn-noir:disabled { background: #fff; color: #a3a3a3; border-color: var(--trait); cursor: not-allowed; }
    .insc .btn-noir .fleche { display: inline-block; width: 22px; height: 1.5px; background: currentColor; position: relative; }
    .insc .btn-noir .fleche::after { content: ''; position: absolute; right: -1px; top: -4px; width: 9px; height: 9px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
    .insc .btn-lien { font-size: 14px; color: var(--gris); padding: 12px 4px; background: none; border: 0; }
    .insc .btn-lien:hover { color: var(--encre); }
    .insc .navig { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--trait); }

    /* ── La règle ────────────────────────────────────────────────────────────
       C'est la ligne née de la bille. Elle reste au-dessus du formulaire et
       devient la progression : le noir occupe la part des étapes franchies. */
    /* La règle est VERTICALE, à gauche du formulaire, sur toute sa hauteur.
       C'est la ligne née de la bille ; elle devient la progression, remplie de
       haut en bas. Le formulaire lui laisse sa marge. */
    .insc .insc-form { position: relative; padding-left: 36px; }
    /* La règle ne suit pas le formulaire : elle est FIXE, au milieu de l'écran,
       contre le bord gauche de la colonne — et y reste quand on défile. C'est
       ce qui rend la scène exacte : la bille se dresse au centre de l'écran,
       exactement à la hauteur de la règle, et n'a plus qu'à glisser à
       l'horizontale (retour Norman, 2026-09-25 : « en ligne droite, en partant
       du milieu du screen »). Aucun ancêtre transformé : un `transform` ou un
       `filter` sur un parent ferait perdre le `fixed`. */
    .insc .insc-regle {
        position: fixed; z-index: 30;
        left: max(24px, calc(50% - var(--largeur) / 2 + 24px));
        top: 50%; transform: translateY(-50%);
        height: min(56vh, 480px); width: 6px;
        background: #ececec; border-radius: 3px; overflow: hidden;
    }
    .insc .insc-regle i { position: absolute; left: 0; right: 0; top: 0; background: var(--encre); border-radius: 3px; transition: height .9s cubic-bezier(.34,1.25,.4,1); }
    .insc .insc-regle::after { content: ''; position: absolute; inset: 0; background: var(--encre); border-radius: 3px; transform-origin: center bottom; transition: transform 1s .45s cubic-bezier(.7,0,.2,1); }
    body.insc-pret .insc .insc-regle::after { transform: scaleY(0); }
    .insc .insc-etape { display: flex; justify-content: space-between; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); margin-bottom: 34px; }
    .insc .insc-etape b { color: var(--encre); font-weight: 600; }

    /* Le formulaire arrive de la droite, flou et léger, et se cale contre la
       règle. Le glissement porte sur `.insc-glisse`, un bloc INTÉRIEUR : la
       règle fixe et le catalogue (fixe aussi) restent hors de toute
       transformation. */
    .insc .insc-glisse { opacity: 0; transform: translateX(72px); filter: blur(6px); }
    body.insc-pret .insc .insc-glisse { opacity: 1; transform: none; filter: none; transition: opacity 1.1s .15s ease, transform 1.3s .15s cubic-bezier(.16,.84,.24,1), filter 1s .15s ease; }
    .insc .insc-avant { opacity: 0; transform: translateY(-8px); }
    body.insc-pret .insc .insc-avant { opacity: 1; transform: none; transition: opacity .5s .5s ease, transform .5s .5s ease; }

    /* Changement d'étape : la nouvelle glisse vers la gauche, l'ancienne s'efface net. */
    .insc-in { transition: opacity .2s ease; }
    .insc-in-debut { opacity: 0; }
    .insc-in-fin { opacity: 1; }

    /* Pied de page d'un écran simple : les autres portes, en gris. */
    .insc .pied { margin-top: 30px; font-size: 13.5px; line-height: 1.9; color: var(--gris); }
    .insc .pied .lien { font-weight: 600; }
    .insc .champ { margin-bottom: 22px; }
    .insc .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    @media (max-width: 480px) { .insc .deux { grid-template-columns: 1fr; gap: 0; } }
    /* L'œil du mot de passe (partials/password_toggle.php) : en encre, pas en indigo. */
    .insc [data-pwd-toggle]:hover { color: #0a0a0a; background: #f3f3f3; }

/* ── La scène d'ouverture ──────────────────────────────────────────────── */
    .insc-scene { position: fixed; inset: 0; z-index: 50; background: #fff; pointer-events: none; }
    /* La bille tombe du haut de l'écran, au centre (décision 2026-09-26 :
       « on revient au standard, c'est plus simple »). L'extérieur porte la
       chute (top, en absolu : l'arrivée est le centre CSS, rien n'est calculé
       en JS — sur mobile la hauteur de fenêtre bouge avec la barre d'adresse),
       l'intérieur la forme (goutte, écrasement, encre) et le glissement. */
    .insc-scene .insc-bille-x { position: absolute; left: 50%; top: -12vh; transform: translate(-50%, -50%); will-change: top; }
    .insc-scene .insc-bille {
        width: 22px; height: 22px; background: var(--encre, #0a0a0a); border-radius: 50%;
        will-change: transform, width, height;
        filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .3));
    }
    .insc-scene .insc-ombre {
        position: absolute; left: 50%; top: 50%; width: 46px; height: 12px; margin: 14px 0 0 -23px; border-radius: 50%; background: #000;
        filter: blur(9px); opacity: 0; transform: scale(.3, .3);
    }
    /* Chronologie : chute 1,3 s · rebonds 1 s · encre 0,9 s · glissement 0,9 s
       → 4,1 s. Le formulaire s'imprime au relais. */
    .insc-scene.joue .insc-bille-x {
        animation:
            insc-chute 1.3s cubic-bezier(.4,0,.85,.35) forwards,
            insc-glisse .9s 3.2s cubic-bezier(.62,0,.18,1) forwards;
    }
    .insc-scene.joue .insc-bille {
        animation:
            insc-goutte 1.3s cubic-bezier(.4,0,.85,.35) forwards,
            insc-rebonds 1s 1.3s linear forwards,
            insc-encre .9s 2.3s cubic-bezier(.7,0,.16,1) forwards;
    }
    .insc-scene.joue .insc-ombre {
        animation: insc-ombre-arrive 1.3s cubic-bezier(.4,0,.85,.35) forwards, insc-ombre-part .8s 2.3s ease forwards;
    }
    @keyframes insc-chute { from { top: -12vh; } to { top: 50%; } }
    @keyframes insc-goutte {
        0%   { transform: scale(1, 1); }
        60%  { transform: scale(.9, 1.22); }
        100% { transform: scale(.92, 1.16); }
    }
    @keyframes insc-rebonds {
        0%   { transform: translateY(0) scale(1.34, .66); }
        14%  { transform: translateY(-10px) scale(.96, 1.06); }
        30%  { transform: translateY(-26px) scale(.98, 1.02); }
        46%  { transform: translateY(0) scale(1.16, .86); }
        56%  { transform: translateY(-9px) scale(.99, 1.01); }
        66%  { transform: translateY(0) scale(1.06, .95); }
        80%  { transform: translateY(0) scale(.98, 1.02); }
        100% { transform: translateY(0) scale(1, 1); }
    }
    @keyframes insc-encre { from { width: 22px; height: 22px; border-radius: 50%; } to { width: 6px; height: var(--hauteur-regle, 420px); border-radius: 3px; } }
    @keyframes insc-glisse { from { left: 50%; } to { left: calc(50% + var(--dx, -300px)); } }
    @keyframes insc-ombre-arrive { from { opacity: 0; transform: scale(.3, .3); } to { opacity: .26; transform: scale(1, 1); } }
    @keyframes insc-ombre-part   { from { opacity: .26; } to { opacity: 0; transform: scale(1.7, .5); } }
    body.insc-pret .insc-scene { opacity: 0; transition: opacity .3s ease; } /* la regle reelle est deja la, au pixel : rien a attendre */

    /* ── L'impression ───────────────────────────────────────────────────────
       Chaque bloc de l'étape (titre, sous-titre, champs, navigation) apparaît
       à son tour, de haut en bas, avec un petit pas vers la gauche — dans le
       sillage du remplissage de la règle. Le même mouvement sert au
       chargement et à chaque changement d'étape : une seule langue. */
    .insc-glisse [x-show] > *, .insc-glisse .insc-page > :not(form), .insc-glisse .insc-page > form > *, .insc-glisse .insc-etape { animation: insc-imprime .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.45s + var(--n, 0) * .085s); animation-play-state: paused; }
    body.insc-pret .insc-glisse [x-show] > *, body.insc-pret .insc-glisse .insc-page > :not(form), body.insc-pret .insc-glisse .insc-page > form > *, body.insc-pret .insc-glisse .insc-etape { animation-play-state: running; }
    @keyframes insc-imprime { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }

    @media (prefers-reduced-motion: reduce) {
        .insc .insc-glisse, .insc .insc-avant, .insc-in { transition: none !important; }
        .insc .insc-regle::after { transition: none !important; }
    }
    @media (max-width: 640px) { .insc .ttl { font-size: 25px; } .insc { padding-top: 5vh; } }