/* =============================================================================
   Socle commun DIMOBI — pages de connexion
   =============================================================================
   La scène de la carotte et le formulaire des pages publiques, puis le
   parcours de double authentification (étapes, QR code, clé à recopier, codes
   de secours). Extraits de l'espace client ; la facturation reprend la même
   page de connexion, à la marque près. Chargé après composants.css.
   ============================================================================= */

/* ── Pages publiques : scène de la carotte + formulaire ───────────────── */
.auth {
    min-height: 100dvh;
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    background: var(--fond);
}
.auth-scene {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column;
    padding: clamp(1.75rem, 3.5vw, 3.25rem);
    color: var(--sur-humus);
    background:
        radial-gradient(70% 55% at 15% 0%, rgb(184 112 74 / .22), transparent 70%),
        radial-gradient(60% 40% at 100% 100%, rgb(76 195 207 / .10), transparent 70%),
        var(--humus);
}
/* Grain de terre, très léger. */
.auth-scene::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
    background:
        radial-gradient(circle at 20% 30%, rgb(255 255 255 / .035) 1px, transparent 1.4px) 0 0 / 11px 11px,
        radial-gradient(circle at 70% 70%, rgb(0 0 0 / .25) 1px, transparent 1.5px) 0 0 / 9px 9px;
}
.scene-marque img { height: clamp(48px, 2.2vw + 26px, 60px); width: auto; }
.scene-texte { position: relative; z-index: 2; max-width: 21rem; margin-top: clamp(2.5rem, 9vh, 6rem); }
.scene-texte .surtitre { color: var(--cuivre-clair); }
.scene-titre {
    margin-top: 1rem;
    font: 700 clamp(2.1rem, 1.1rem + 2.2vw, 3.3rem)/1.03 var(--police-titre);
    letter-spacing: -.035em; color: var(--sur-humus);
}
.scene-titre em { font-style: normal; color: var(--cuivre-clair); }
.scene-chapo { margin-top: 1.25rem; max-width: 30ch; color: var(--sur-humus-2); font-size: 1.02rem; line-height: 1.6; }
.scene-pied { position: relative; z-index: 2; margin-top: auto; padding-top: 2rem; color: var(--sur-humus-3); font: 500 .75rem/1.4 var(--police-mono); letter-spacing: .04em; }

/* La carotte : règle des cotes, tube de strates, nappe, échantillons. */
.carotte {
    position: absolute; z-index: 1;
    top: 12%; bottom: 11%; right: clamp(8.5rem, 11vw, 11rem);
    width: 104px;
}
.carotte-regle {
    position: absolute; top: 0; bottom: 0; right: calc(100% + 46px);
    display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
    font: 500 .72rem/1 var(--police-mono); color: var(--sur-humus-3); font-variant-numeric: tabular-nums;
}
.carotte-regle span { position: relative; translate: 0 -50%; white-space: nowrap; }
.carotte-regle span:last-child { translate: 0 50%; }
.carotte-regle span::after {
    content: ""; position: absolute; left: calc(100% + 6px); top: 50%; width: 8px; height: 1px;
    background: currentColor; opacity: .6;
}
/* Le tube ne rogne rien : ses bouts arrondis sont portés par la première et la
   dernière strate, pour qu'une strate survolée puisse gonfler hors du tube. Le
   masque du carottage ne vaut que pendant l'animation (`backwards`). */
.carotte-tube {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    border-radius: 54px;
    animation: carottage 1.7s cubic-bezier(.65, 0, .35, 1) .15s backwards;
}
.strate {
    position: relative; flex: 1;
    transition: transform .35s var(--ressort), border-radius .35s var(--ressort), box-shadow .35s var(--ressort), filter .25s;
}
.strate--1 { border-radius: 54px 54px 0 0; }
.strate--6 { border-radius: 0 0 54px 54px; }
/* Modelé du cylindre : clair à gauche, ombré à droite. */
.strate::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(90deg, rgb(255 255 255 / .1), transparent 24% 64%, rgb(0 0 0 / .34));
}
/* Survol : la strate gonfle et sort du tube (léger rebond), sa légende s'allume. */
.strate:hover {
    z-index: 2;
    transform: scale(1.16, 1.06);
    border-radius: 10px;
    filter: brightness(1.1) saturate(1.08);
    box-shadow: 0 16px 30px -12px rgb(0 0 0 / .75), 0 0 0 1px rgb(255 255 255 / .14);
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), border-radius .3s, box-shadow .3s, filter .25s;
}
.strate--1:hover { border-radius: 54px 54px 10px 10px; }
.strate--6:hover { border-radius: 10px 10px 54px 54px; }
.strate--1 { flex: 1.05;
    background:
        radial-gradient(circle at 25% 35%, rgb(0 0 0 / .3) 1.3px, transparent 1.8px) 0 0 / 9px 9px,
        radial-gradient(circle at 70% 65%, rgb(255 255 255 / .09) 1px, transparent 1.5px) 0 0 / 7px 7px,
        var(--strate-1); }
.strate--2 { flex: .95;
    background: repeating-linear-gradient(135deg, rgb(0 0 0 / .2) 0 2px, transparent 2px 10px), var(--strate-2); }
.strate--3 { flex: 1.15;
    background: repeating-linear-gradient(0deg, rgb(60 35 15 / .16) 0 1px, transparent 1px 6px), var(--strate-3); }
.strate--4 { flex: 1.1;
    background: radial-gradient(circle, rgb(110 75 35 / .38) 1px, transparent 1.4px) 0 0 / 6px 6px, var(--strate-4); }
.strate--5 { flex: 1;
    background:
        repeating-linear-gradient(0deg, rgb(0 0 0 / .14) 0 1px, transparent 1px 9px),
        repeating-linear-gradient(90deg, transparent 0 16px, rgb(0 0 0 / .12) 16px 17px),
        var(--strate-5); }
.strate--6 { flex: .75;
    background:
        radial-gradient(circle at 30% 40%, rgb(0 0 0 / .26) 3px, transparent 3.7px) 0 0 / 17px 15px,
        radial-gradient(circle at 70% 75%, rgb(255 255 255 / .14) 2.4px, transparent 3px) 0 0 / 13px 12px,
        var(--strate-6); }
/* Zone saturée : sous la nappe, la carotte prend un reflet d'eau. */
.carotte-tube::after {
    content: ""; position: absolute; left: 0; right: 0; top: 57%; bottom: 0;
    border-radius: 0 0 54px 54px; pointer-events: none;
    background: linear-gradient(to bottom, rgb(76 195 207 / .34), rgb(76 195 207 / .08) 60%, transparent);
    mix-blend-mode: screen;
}
.carotte-libelles {
    position: absolute; top: 0; bottom: 0; left: calc(100% + 22px);
    display: flex; flex-direction: column;
    font-size: .8rem; color: var(--sur-humus-2); white-space: nowrap;
}
.carotte-libelles span {
    flex: 1; display: flex; align-items: center; gap: .6rem; opacity: 0;
    animation: apparaitre .5s var(--ressort) both; transition: color .25s, translate .45s var(--ressort);
}
.carotte-libelles span::before {
    content: ""; width: 14px; height: 1px; background: var(--sur-humus-3);
    transition: width .45s var(--ressort), background-color .25s;
}
.carotte:has(.strate--1:hover) .carotte-libelles span:nth-child(1),
.carotte:has(.strate--2:hover) .carotte-libelles span:nth-child(2),
.carotte:has(.strate--3:hover) .carotte-libelles span:nth-child(3),
.carotte:has(.strate--4:hover) .carotte-libelles span:nth-child(4),
.carotte:has(.strate--5:hover) .carotte-libelles span:nth-child(5),
.carotte:has(.strate--6:hover) .carotte-libelles span:nth-child(6) { color: var(--sur-humus); translate: 6px 0; }
.carotte:has(.strate--1:hover) .carotte-libelles span:nth-child(1)::before,
.carotte:has(.strate--2:hover) .carotte-libelles span:nth-child(2)::before,
.carotte:has(.strate--3:hover) .carotte-libelles span:nth-child(3)::before,
.carotte:has(.strate--4:hover) .carotte-libelles span:nth-child(4)::before,
.carotte:has(.strate--5:hover) .carotte-libelles span:nth-child(5)::before,
.carotte:has(.strate--6:hover) .carotte-libelles span:nth-child(6)::before { width: 22px; background: var(--cuivre-clair); }
.carotte-libelles span:nth-child(1) { flex: 1.05; animation-delay: .5s; }
.carotte-libelles span:nth-child(2) { flex: .95; animation-delay: .7s; }
.carotte-libelles span:nth-child(3) { flex: 1.15; animation-delay: .9s; }
.carotte-libelles span:nth-child(4) { flex: 1.1; animation-delay: 1.1s; }
.carotte-libelles span:nth-child(5) { flex: 1; animation-delay: 1.3s; }
.carotte-libelles span:nth-child(6) { flex: .75; animation-delay: 1.5s; }
/* La nappe : un trait court, des cotes à sa légende, qui se trace depuis l'axe
   de la carotte (40 px de marge + la moitié des 104 px du tube). */
.carotte-nappe {
    position: absolute; z-index: 3; top: 57%; left: -40px; right: calc(-22px - 7.25rem); height: 0;
    border-top: 1.5px dashed var(--nappe-vive); pointer-events: none;
    transform-origin: 92px center;
    animation: nappe-trace 1.1s var(--ressort) 1.55s both, nappe-houle 7s ease-in-out 2.7s infinite;
}
.carotte-nappe-libelle {
    position: absolute; top: 57%; left: calc(100% + 22px); translate: 0 -150%;
    font: 600 .74rem/1 var(--police-mono); letter-spacing: .03em; color: var(--nappe-vive); white-space: nowrap;
    animation: apparaitre .5s var(--ressort) 2.2s both;
}
.carotte-echantillon {
    position: absolute; z-index: 3; left: -10px; width: 6px;
    border: 2px solid var(--cuivre-clair); border-right: 0; border-radius: 3px 0 0 3px;
    animation: apparaitre .45s var(--ressort) both;
}
.carotte-echantillon span {
    position: absolute; right: calc(100% + 6px); top: 50%; translate: 0 -50%;
    font: 600 .66rem/1 var(--police-mono); color: var(--cuivre-clair);
}
.carotte-echantillon--1 { top: 9%; height: 11%; animation-delay: 1.9s; }
.carotte-echantillon--2 { top: 36%; height: 9%; animation-delay: 2.05s; }
.carotte-echantillon--3 { top: 66%; height: 10%; animation-delay: 2.2s; }

@media (max-width: 1279.98px) {
    /* Moins de place : la carotte seule, calée à droite, sans légendes. */
    .carotte { right: 2.75rem; width: 84px; }
    .carotte-regle, .carotte-libelles, .carotte-nappe-libelle { display: none; }
    .carotte-nappe { left: -14px; right: -14px; transform-origin: center; }
}

@keyframes carottage {
    from { clip-path: inset(0 0 100% 0 round 54px); }
    to { clip-path: inset(0 0 0 0 round 54px); }
}
@keyframes nappe-trace { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes nappe-houle { 0%, 100% { translate: 0 0; } 50% { translate: 0 3px; } }
@keyframes apparaitre { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.auth-panneau {
    display: flex; flex-direction: column; align-items: center;
    padding: clamp(1.5rem, 5vw, 4rem) clamp(1.25rem, 5vw, 4rem) 1.5rem;
}
.auth-carte { width: 100%; max-width: 420px; margin: auto 0; animation: apparaitre .5s var(--ressort) .1s both; }
.auth-carte h1 { font-size: clamp(1.9rem, 1.5rem + 1vw, 2.35rem); }
.auth-carte .chapo { margin: .6rem 0 1.75rem; font-size: .98rem; }
.auth-carte .formulaire { margin-top: 1.5rem; }
.auth-carte .chapo + .formulaire { margin-top: 0; }
.auth-logo { display: none; margin-bottom: 2rem; }
.auth-logo img { height: 36px; width: auto; }
.auth-liens { margin-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; font-size: .9rem; }
.auth-liens a { font-weight: 600; }
.auth-pied { margin-top: 2rem; color: var(--texte-3); font-size: .78rem; text-align: center; }
.auth-pied a { color: inherit; }
.ecusson {
    display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1.25rem;
    border-radius: 14px; background: var(--accent-voile); color: var(--lien);
}
.ecusson--nappe { background: var(--info-voile); color: var(--info); }
.ecusson--danger { background: var(--danger-voile); color: var(--danger); }

@media (max-width: 899.98px) {
    .auth { grid-template-columns: minmax(0, 1fr); }
    .auth-scene { padding: 1.25rem 1.25rem 1.6rem; min-height: 0; }
    .scene-marque img { height: 42px; }
    .scene-texte { margin-top: 1.4rem; max-width: none; }
    .scene-titre { font-size: clamp(1.8rem, 6.5vw, 2.4rem); }
    .scene-chapo, .carotte, .scene-pied { display: none; }
    /* La carotte couchée : un liseré de strates sous la scène. */
    .auth-scene::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
        background: linear-gradient(to right,
            var(--strate-3) 0 16%, var(--strate-2) 16% 31%, var(--strate-1) 31% 47%,
            var(--strate-5) 47% 60%, var(--nappe-vive) 60% 61%, var(--strate-4) 61% 79%, var(--strate-6) 79% 100%);
    }
    .auth-carte { margin-top: .5rem; }
}

/* ── Double authentification : étapes, QR code, clé, codes de secours ── */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; counter-reset: etape; }
.etape { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 1rem; counter-increment: etape; }
.etape::before {
    content: counter(etape);
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    font: 700 .9rem/1 var(--police-titre); background: var(--accent-voile); color: var(--lien);
}
.etape h2 { font-size: 1.02rem; margin-top: .45rem; }
.etape p { color: var(--texte-2); font-size: .92rem; margin-top: .35rem; }
.etape .formulaire { max-width: 320px; margin-top: .75rem; }
.qr {
    width: 208px; height: 208px; margin: 1rem 0 .75rem; padding: 12px;
    background: #fff; border-radius: 16px; border: 1px solid var(--ligne); box-shadow: var(--ombre-2);
}
.qr img { width: 100%; height: 100%; }
.secret {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    padding: .55rem .7rem; border-radius: 10px; background: var(--creux);
    font: 500 .88rem/1.4 var(--police-mono); word-break: break-all;
}
.secret code { flex: 1 1 auto; }
.codes-secours {
    list-style: none; margin: 1.25rem 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem;
}
.codes-secours li {
    padding: .75rem .5rem; border-radius: 10px; text-align: center;
    border: 1px dashed var(--ligne-forte); background: var(--surface-2);
    font: 600 1.05rem/1 var(--police-mono); letter-spacing: .06em;
}

/* Mouvement réduit (réglage du système) : animations terminées d'emblée — mêmes
   valeurs que la règle générale de l'espace client (espace.css), limitées ici aux
   pages de connexion, pour que la facturation se comporte de la même façon. */
@media (prefers-reduced-motion: reduce) {
    .auth *, .auth *::before, .auth *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        animation-delay: 0s !important; transition-duration: .01ms !important;
    }
    .carotte-libelles span { opacity: 1; }
}