/* ==========================================================================
   ORION — page de connexion (index.php, reinit_passwd.php)
   Ciel animé, constellation qui se dessine, carte en verre sombre.
   Autonome : ne dépend pas du gabarit « login-6 » de Metronic.
   ========================================================================== */

html, body { margin: 0; padding: 0; height: 100%; }

.or-cx {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 100vh;
    background: #040E22;
    overflow: hidden;
    font-family: Poppins, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --- Fond : dégradés profonds, nébuleuses lentes, étoiles au canevas --- */

.or-ciel {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1200px 700px at 20% 12%, #123663 0%, transparent 60%),
        radial-gradient(1000px 640px at 86% 84%, #0C2B57 0%, transparent 56%),
        linear-gradient(158deg, #061B42 0%, #051531 45%, #030B1C 100%);
}

.or-nebuleuse {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .40;
    will-change: transform;
}

.or-neb-1 {
    width: 620px; height: 620px;
    top: -140px; left: -120px;
    background: radial-gradient(circle, rgba(0, 97, 239, .55) 0%, transparent 68%);
    animation: or-derive-1 26s ease-in-out infinite alternate;
}

.or-neb-2 {
    width: 520px; height: 520px;
    bottom: -160px; left: 32%;
    background: radial-gradient(circle, rgba(217, 14, 21, .34) 0%, transparent 68%);
    animation: or-derive-2 32s ease-in-out infinite alternate;
}

.or-neb-3 {
    width: 460px; height: 460px;
    top: 8%; right: -120px;
    background: radial-gradient(circle, rgba(251, 205, 0, .22) 0%, transparent 68%);
    animation: or-derive-3 29s ease-in-out infinite alternate;
}

/* Pas de scale() ici : un calque flou qui change d'echelle doit etre reflou a
   chaque image. Il ne fait que glisser, et c'est l'opacite — gratuite — qui le
   fait respirer. */
@keyframes or-derive-1 { to { transform: translate3d(90px, 70px, 0); opacity: .30; } }
@keyframes or-derive-2 { to { transform: translate3d(-80px, -60px, 0); opacity: .48; } }
@keyframes or-derive-3 { to { transform: translate3d(-70px, 90px, 0); opacity: .28; } }

#or-etoiles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Voile pour que le texte reste lisible par-dessus le ciel */
.or-voile {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(3, 11, 28, .58) 0%, rgba(3, 11, 28, .18) 48%, transparent 70%);
    pointer-events: none;
}

/* --- Constellation d'Orion, tracée à l'ouverture --- */

.or-constellation {
    position: absolute;
    top: 50%;
    left: 36%;
    width: min(820px, 64vw);
    height: min(820px, 64vw);
    /* Centree par des marges, pas par un transform : le JS suit la souris en
       ecrivant translate3d a chaque image, et un pourcentage dans un transform
       obligerait a recalculer la mise en page a chaque fois. */
    margin-left: calc(min(820px, 64vw) / -2);
    margin-top: calc(min(820px, 64vw) / -2);
    pointer-events: none;
    will-change: transform;
}

.or-constellation .trait {
    stroke: rgba(150, 190, 255, .42);
    stroke-width: 1.1;
    stroke-linecap: round;
    fill: none;
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    animation: or-tracer 1.5s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes or-tracer { to { stroke-dashoffset: 0; } }

.or-constellation .astre {
    fill: #FFFFFF;
    opacity: 0;
    animation: or-paraitre .7s ease forwards, or-battre 4.5s ease-in-out infinite;
}

@keyframes or-paraitre { to { opacity: .9; } }
@keyframes or-battre { 0%, 100% { opacity: .9; } 50% { opacity: .42; } }

/* Les trois étoiles des services : halo coloré et pulsation */
.or-constellation .service {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: or-paraitre-service .9s ease forwards, or-pulser 3.6s ease-in-out infinite;
}

@keyframes or-paraitre-service { to { opacity: 1; } }
@keyframes or-pulser {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.22); }
}

.or-halo { opacity: 0; animation: or-halo-paraitre 1.2s ease forwards, or-halo-respirer 3.6s ease-in-out infinite; }
@keyframes or-halo-paraitre { to { opacity: .5; } }
@keyframes or-halo-respirer { 0%, 100% { opacity: .5; } 50% { opacity: .16; } }

/* --- Colonne de présentation --- */

.or-cx-gauche {
    position: relative;
    z-index: 3;
    flex: 1 1 54%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 0 64px 8vw;
    color: #DDE6F5;
}

.or-monte { opacity: 0; transform: translateY(16px); animation: or-monter .8s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes or-monter { to { opacity: 1; transform: translateY(0); } }

/* Pas de logo ici : le mot ORION le dit déjà, et la constellation fait l'image */
.or-cx-titre {
    font-size: clamp(3rem, 6.4vw, 4.6rem);
    font-weight: 700;
    letter-spacing: .18em;
    line-height: 1;
    color: #FFFFFF;
    margin: 0 0 14px;
    text-shadow: 0 0 46px rgba(120, 175, 255, .45);
}

.or-cx-sous {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(190, 210, 240, .62);
    margin: 0 0 44px;
}

.or-cx-sous::before {
    content: "";
    width: 46px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(190, 210, 240, .7));
    flex: none;
}

.or-cx-services { display: flex; flex-wrap: wrap; gap: 10px; }

.or-cx-service {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 17px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .075);
    border: 1px solid rgba(255, 255, 255, .09);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(235, 242, 255, .88);
}

.or-cx-service .pt {
    position: relative;
    width: 8px; height: 8px;
    border-radius: 50%;
    flex: none;
}

/* Le halo est fixe ; seule son opacite varie. Animer box-shadow obligerait a
   repeindre le point a chaque image. */
.or-cx-service .pt::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    box-shadow: 0 0 11px 1px currentColor;
    animation: or-clignoter 3.2s ease-in-out infinite;
}

.or-cx-service:nth-child(2) .pt::after { animation-delay: 1.1s; }
.or-cx-service:nth-child(3) .pt::after { animation-delay: 2.2s; }

@keyframes or-clignoter { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.or-cx-service .pt-sp { background: #D90E15; color: rgba(217, 14, 21, .95); }
.or-cx-service .pt-fdo { background: #0061EF; color: rgba(0, 97, 239, .95); }
.or-cx-service .pt-sam { background: #FBCD00; color: rgba(251, 205, 0, .95); }

/* Partenariat */
.or-cx-partenaire {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid rgba(160, 200, 255, .12);
}

.or-cx-partenaire span {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(190, 210, 240, .5);
    white-space: nowrap;
}

.or-cx-partenaire img {
    max-height: 42px;
    width: auto;
    display: block;
    opacity: .9;
    transition: opacity .16s;
}

.or-cx-partenaire a:hover img { opacity: 1; }

/* --- Carte de connexion, en verre sombre --- */

.or-cx-droite {
    position: relative;
    z-index: 3;
    flex: 0 0 min(560px, 46%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 6vw 40px 40px;
}

.or-cx-carte {
    position: relative;
    width: 100%;
    max-width: 418px;
    padding: 42px 38px 32px;
    border-radius: 22px;
    /* Fond deja opaque aux trois quarts : le backdrop-filter qui etait ici ne se
       voyait pas, mais obligeait a reflouter le ciel anime a chaque image. */
    background: linear-gradient(160deg, rgba(14, 33, 66, .88) 0%, rgba(7, 19, 42, .92) 100%);
    border: 1px solid rgba(140, 180, 255, .16);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* Liseré lumineux sur l'arête haute */
.or-cx-carte::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 16%;
    right: 16%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(150, 195, 255, .85), transparent);
}

/* Équerres d'angle */
.or-coin {
    position: absolute;
    width: 17px;
    height: 17px;
    border: 1px solid rgba(150, 195, 255, .42);
    pointer-events: none;
}

.or-coin-hg { top: 11px; left: 11px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.or-coin-hd { top: 11px; right: 11px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.or-coin-bg { bottom: 11px; left: 11px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.or-coin-bd { bottom: 11px; right: 11px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }

.or-cx-carte h1 {
    font-size: 1.42rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: #FFFFFF;
    margin: 0 0 7px;
}

.or-cx-aide {
    font-size: .84rem;
    line-height: 1.5;
    color: rgba(185, 205, 235, .62);
    margin: 0 0 30px;
}

.or-champ { margin-bottom: 18px; }

.or-champ label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(150, 180, 220, .72);
    margin-bottom: 8px;
}

.or-champ-boite { position: relative; }

.or-champ-boite > i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .9rem;
    color: rgba(150, 180, 220, .5);
    transition: color .18s;
    pointer-events: none;
}

.or-champ input {
    width: 100%;
    height: 52px;
    padding: 0 16px 0 44px;
    border: 1px solid rgba(140, 180, 255, .17);
    border-radius: 13px;
    background: rgba(3, 12, 30, .55);
    font-family: inherit;
    font-size: .94rem;
    color: #EAF1FF;
    transition: border-color .18s, box-shadow .18s, background-color .18s;
}

.or-champ input::placeholder { color: rgba(150, 180, 220, .32); }

.or-champ input:focus {
    outline: 0;
    background: rgba(3, 12, 30, .78);
    border-color: rgba(120, 175, 255, .62);
    box-shadow: 0 0 0 4px rgba(0, 97, 239, .16), 0 0 24px -6px rgba(90, 160, 255, .55);
}

.or-champ-boite:focus-within > i { color: #7FB2FF; }

.or-cx-ligne {
    display: flex;
    justify-content: flex-end;
    margin: -3px 0 26px;
}

.or-cx-oubli {
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: rgba(150, 190, 250, .8);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color .16s;
}

.or-cx-oubli:hover { color: #A8CBFF; }

/* Bouton : dégradé + balayage lumineux au survol */
.or-cx-valider {
    position: relative;
    width: 100%;
    height: 54px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(100deg, #0B4FC4 0%, #0061EF 52%, #2B86FF 100%);
    color: #FFFFFF;
    font-family: inherit;
    font-size: .94rem;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 14px 34px -12px rgba(0, 97, 239, .85);
    transition: box-shadow .2s, transform .07s;
}

.or-cx-valider::after {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent);
    transition: left .55s cubic-bezier(.3, 0, .2, 1);
}

.or-cx-valider:hover { box-shadow: 0 18px 44px -12px rgba(0, 97, 239, 1); }
.or-cx-valider:hover::after { left: 140%; }
.or-cx-valider:active { transform: translateY(1px); }
.or-cx-valider:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

.or-cx-ferme {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 26px;
    border-radius: 13px;
    background: rgba(251, 205, 0, .07);
    border: 1px solid rgba(251, 205, 0, .26);
    font-size: .82rem;
    line-height: 1.5;
    color: rgba(255, 236, 178, .92);
}

.or-cx-ferme i { color: #FBCD00; margin-top: 2px; }
.or-cx-ferme b { color: #FFE484; }

.or-cx-pied {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(140, 180, 255, .12);
    text-align: center;
    font-size: .72rem;
    letter-spacing: .05em;
    color: rgba(150, 180, 220, .45);
}

.or-cx-pied a { color: rgba(180, 205, 240, .75); font-weight: 600; text-decoration: none; }
.or-cx-pied a:hover { color: #A8CBFF; }

/* --- Tablette et téléphone --- */

@media (max-width: 1150px) {
    .or-cx { flex-direction: column; }

    .or-cx-gauche {
        flex: none;
        align-items: center;
        text-align: center;
        padding: 54px 28px 0;
    }

    .or-cx-sous { margin-bottom: 28px; }
    .or-cx-sous::before { display: none; }
    .or-cx-services { justify-content: center; }
    .or-cx-partenaire { flex-direction: column; gap: 12px; margin-top: 28px; padding-top: 22px; }
    .or-cx-droite { flex: 1 1 auto; padding: 34px 24px 44px; }
    .or-constellation { left: 50%; top: 42%; width: 130vw; height: 130vw; margin-left: -65vw; margin-top: -65vw; opacity: .5; }
    .or-voile { background: linear-gradient(180deg, rgba(3, 11, 28, .5) 0%, rgba(3, 11, 28, .2) 40%, rgba(3, 11, 28, .72) 100%); }
}

@media (max-width: 560px) {
    .or-cx-gauche { padding: 40px 20px 0; }
    .or-cx-titre { letter-spacing: .12em; }
    .or-cx-sous { font-size: .76rem; letter-spacing: .16em; }
    .or-cx-carte { padding: 30px 24px 24px; border-radius: 18px; }
    .or-coin { display: none; }
}

/* --- Mouvement réduit : tout se fige, rien ne clignote --- */

@media (prefers-reduced-motion: reduce) {
    .or-nebuleuse,
    .or-constellation .trait,
    .or-constellation .astre,
    .or-constellation .service,
    .or-halo,
    .or-cx-service .pt::after,
    .or-monte {
        animation: none !important;
    }

    .or-constellation .trait { stroke-dashoffset: 0; }
    .or-constellation .astre { opacity: .9; }
    .or-constellation .service, .or-monte { opacity: 1; transform: none; }
    .or-halo { opacity: .4; }
}

/* Connexion par Discord : séparateur, bouton, et message d'information */
.or-cx-ou {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(150, 190, 250, .55);
}

.or-cx-ou::before,
.or-cx-ou::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(120, 160, 230, .22);
}

.or-cx-discord {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 50px;
    border-radius: 13px;
    background: #5865F2;
    color: #FFFFFF;
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
    box-shadow: 0 12px 30px -14px rgba(88, 101, 242, .9);
    transition: background .16s, box-shadow .2s, transform .07s;
}

.or-cx-discord i { font-size: 1.15rem; }
.or-cx-discord:hover { background: #4752C4; color: #FFFFFF; box-shadow: 0 16px 38px -14px rgba(88, 101, 242, 1); text-decoration: none; }
.or-cx-discord:active { transform: translateY(1px); }

.or-cx-info {
    background: rgba(88, 101, 242, .12);
    border-color: rgba(120, 135, 255, .38);
    color: rgba(214, 221, 255, .95);
}

.or-cx-info i { color: #8E98FF; }
.or-cx-info small { opacity: .8; }

/* ==========================================================================
   HALLOWEEN — le thème de la page de connexion (index.php), classe .or-halloween
   Du 1er octobre au 2 novembre ; ?theme=halloween / ?theme=normal pour forcer.
   Violet nuit, orange citrouille, vert toxique. Rien ici ne s'applique sans la classe.
   ========================================================================== */

.or-halloween { background: #0B0614; }

.or-halloween .or-ciel {
    background:
        radial-gradient(1100px 700px at 18% 10%, #3A1466 0%, transparent 60%),
        radial-gradient(1000px 640px at 88% 86%, #5A1F06 0%, transparent 56%),
        linear-gradient(160deg, #1B0B33 0%, #120720 46%, #080410 100%);
}

.or-halloween .or-neb-1 { background: radial-gradient(circle, rgba(142, 68, 255, .60) 0%, transparent 68%); }
.or-halloween .or-neb-2 { background: radial-gradient(circle, rgba(255, 106, 0, .42) 0%, transparent 68%); }
.or-halloween .or-neb-3 { background: radial-gradient(circle, rgba(124, 255, 58, .16) 0%, transparent 68%); }

.or-halloween .or-voile { background: linear-gradient(105deg, rgba(8, 3, 16, .62) 0%, rgba(8, 3, 16, .2) 48%, transparent 70%); }

/* La constellation : des fils orange, les trois « services » en orange, violet et vert */
.or-halloween .or-constellation .trait { stroke: rgba(255, 168, 80, .40); }
.or-halloween .or-constellation .astre { fill: #FFE2B8; }
.or-halloween .or-constellation .service[fill="#D90E15"] { fill: #FF7A00; }
.or-halloween .or-constellation .service[fill="#0061EF"] { fill: #8E44FF; }
.or-halloween .or-constellation .service[fill="#FBCD00"] { fill: #FFD23F; }
.or-halloween .or-constellation .service[fill="#16A34A"] { fill: #7CFF3A; }
.or-halloween #or-glow-sp stop { stop-color: #FF7A00; }
.or-halloween #or-glow-fdo stop { stop-color: #8E44FF; }
.or-halloween #or-glow-sam stop { stop-color: #FFD23F; }
.or-halloween #or-glow-rou stop { stop-color: #7CFF3A; }

.or-halloween .or-constellation { z-index: 0; }

/* La colonne de gauche */
.or-halloween .or-cx-gauche { color: #EADCFF; }

.or-halloween .or-cx-titre {
    position: relative;
    width: fit-content;
    color: #FFD9A0;
    text-shadow: 0 0 34px rgba(255, 122, 0, .55), 0 0 4px rgba(255, 200, 120, .55);
}

/* Une lueur de bougie derrière le titre : seule son opacité vacille (rien à repeindre) */
.or-halloween .or-cx-titre::after {
    content: "";
    position: absolute;
    left: -22%; right: -22%; top: -70%; bottom: -70%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(255, 106, 0, .34), transparent 100%);
    animation: or-hw-vaciller 3.6s steps(1, end) infinite;
    pointer-events: none;
}

@keyframes or-hw-vaciller {
    0%   { opacity: 1; }
    9%   { opacity: .72; }
    15%  { opacity: .95; }
    38%  { opacity: .8; }
    44%  { opacity: 1; }
    71%  { opacity: .68; }
    78%  { opacity: .92; }
}

.or-halloween .or-cx-sous { color: rgba(226, 204, 255, .72); }
.or-halloween .or-cx-sous::before { background: linear-gradient(90deg, transparent, rgba(255, 160, 70, .85)); }

.or-halloween .or-cx-service {
    background: rgba(142, 68, 255, .13);
    border-color: rgba(190, 140, 255, .24);
    color: rgba(246, 238, 255, .92);
}
.or-halloween .or-cx-service .pt-sp { background: #FF7A00; color: rgba(255, 122, 0, .95); }
.or-halloween .or-cx-service .pt-fdo { background: #8E44FF; color: rgba(142, 68, 255, .95); }
.or-halloween .or-cx-service .pt-sam { background: #FFD23F; color: rgba(255, 210, 63, .95); }
.or-halloween .or-cx-service .pt-rou { background: #7CFF3A; color: rgba(124, 255, 58, .95); }

.or-halloween .or-cx-partenaire { border-top-color: rgba(190, 140, 255, .16); }
.or-halloween .or-cx-partenaire span { color: rgba(214, 190, 255, .55); }

/* La carte de connexion */
.or-halloween .or-cx-carte {
    background: linear-gradient(160deg, rgba(34, 15, 60, .90) 0%, rgba(16, 7, 30, .94) 100%);
    border-color: rgba(255, 140, 50, .26);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 64px -22px rgba(255, 106, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.or-halloween .or-cx-carte::before { background: linear-gradient(90deg, transparent, rgba(255, 150, 60, .95), transparent); }
.or-halloween .or-coin { border-color: rgba(255, 150, 60, .5); }
.or-halloween .or-coin-hg, .or-halloween .or-coin-hd { display: none; }   /* les toiles les remplacent */

.or-halloween .or-cx-aide { color: rgba(216, 198, 246, .68); }
.or-halloween .or-champ label { color: rgba(214, 190, 255, .76); }
.or-halloween .or-champ-boite > i { color: rgba(214, 190, 255, .5); }
.or-halloween .or-champ input {
    border-color: rgba(190, 140, 255, .22);
    background: rgba(10, 4, 20, .62);
    color: #F6EEFF;
}
.or-halloween .or-champ input::placeholder { color: rgba(200, 175, 240, .34); }
.or-halloween .or-champ input:focus {
    background: rgba(10, 4, 20, .84);
    border-color: rgba(255, 150, 60, .72);
    box-shadow: 0 0 0 4px rgba(255, 106, 0, .16), 0 0 24px -6px rgba(255, 140, 40, .6);
}
.or-halloween .or-champ-boite:focus-within > i { color: #FFB066; }

.or-halloween .or-cx-oubli { color: rgba(255, 190, 120, .88); }
.or-halloween .or-cx-oubli:hover { color: #FFD7A8; }

/* Texte sombre sur l'orange : le contraste y est (blanc sur orange vif n'atteignait pas 3:1) */
.or-halloween .or-cx-valider {
    background: linear-gradient(100deg, #E85D00 0%, #FF7A00 52%, #FFA73D 100%);
    color: #1A0B2E;
    font-weight: 700;
    box-shadow: 0 14px 34px -12px rgba(255, 106, 0, .85);
}
.or-halloween .or-cx-valider:hover { box-shadow: 0 18px 44px -12px rgba(255, 122, 0, 1); }

.or-halloween .or-cx-ou { color: rgba(214, 190, 255, .52); }
.or-halloween .or-cx-ou::before,
.or-halloween .or-cx-ou::after { background: rgba(190, 140, 255, .24); }

.or-halloween .or-cx-pied { border-top-color: rgba(190, 140, 255, .15); color: rgba(204, 180, 244, .52); }
.or-halloween .or-cx-pied a { color: rgba(228, 208, 255, .82); }
.or-halloween .or-cx-pied a:hover { color: #FFB066; }
.or-hw-voeu { display: inline-block; margin-top: 6px; letter-spacing: .14em; text-transform: uppercase; font-size: .66rem; color: rgba(255, 176, 102, .8); }

/* La lune, derrière la constellation */
.or-hw-lune {
    position: absolute;
    z-index: 1;
    top: 6vh;
    left: calc(100% - min(560px, 46%) - clamp(150px, 15vw, 210px));
    width: clamp(96px, 11vw, 160px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 62% 30%, rgba(190, 140, 50, .38) 0 7%, transparent 8%),
        radial-gradient(circle at 34% 58%, rgba(190, 140, 50, .30) 0 10%, transparent 11%),
        radial-gradient(circle at 70% 72%, rgba(190, 140, 50, .26) 0 6%, transparent 7%),
        radial-gradient(circle at 38% 34%, #FFF8DC 0%, #FFE7A0 52%, #F0C060 100%);
    box-shadow: 0 0 60px 14px rgba(255, 205, 100, .30), 0 0 200px 70px rgba(255, 140, 40, .16);
    pointer-events: none;
}

/* La brume du bas : deux lueurs qui glissent lentement */
.or-hw-brume {
    position: absolute;
    z-index: 1;
    left: -10%; right: -10%; bottom: -30px;
    height: 240px;
    background:
        radial-gradient(60% 100% at 30% 100%, rgba(255, 122, 0, .24), transparent 70%),
        radial-gradient(50% 90% at 78% 100%, rgba(142, 68, 255, .30), transparent 72%);
    animation: or-hw-brume 24s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes or-hw-brume { to { transform: translate3d(5%, -10px, 0); opacity: .72; } }

/* Les chauves-souris traversent le ciel ; elles battent des ailes en s'aplatissant */
.or-hw-chauve {
    position: absolute;
    z-index: 2;
    top: var(--y, 20%);
    left: -90px;
    width: calc(64px * var(--s, 1));
    opacity: 0;
    pointer-events: none;
    will-change: transform;
    animation: or-hw-traverser var(--t, 24s) linear var(--d, 0s) infinite;
}
.or-hw-chauve svg {
    display: block;
    width: 100%;
    height: auto;
    fill: #0E0618;
    stroke: rgba(255, 190, 110, .6);
    stroke-width: .9;
    transform-origin: 50% 42%;
    animation: or-hw-battre .34s ease-in-out infinite alternate;
}
@keyframes or-hw-traverser {
    0%   { transform: translate3d(0, 0, 0); opacity: 0; }
    4%   { opacity: .95; }
    30%  { transform: translate3d(30vw, 34px, 0); }
    55%  { transform: translate3d(58vw, -26px, 0); }
    80%  { transform: translate3d(86vw, 26px, 0); }
    96%  { opacity: .95; }
    100% { transform: translate3d(calc(100vw + 180px), -10px, 0); opacity: 0; }
}
@keyframes or-hw-battre { from { transform: scaleY(1); } to { transform: scaleY(.5); } }

/* La citrouille : seulement quand l'écran a la place (sinon elle gênerait le texte) */
.or-hw-citrouille {
    display: none;
    position: absolute;
    z-index: 2;
    left: 46%;
    bottom: -8px;
    width: 150px;
    height: auto;
    filter: drop-shadow(0 0 26px rgba(255, 122, 0, .5));
    pointer-events: none;
}
.or-hw-citrouille .visage { animation: or-hw-vaciller 3.1s steps(1, end) infinite; }
@media (min-width: 1151px) and (min-height: 820px) {
    .or-hw-citrouille { display: block; }
}

/* Les toiles d'araignée dans les coins hauts de la carte, l'araignée au bout de son fil */
.or-toile {
    position: absolute;
    top: 1px;
    width: 96px;
    height: 96px;
    fill: none;
    stroke: rgba(236, 226, 255, .24);
    stroke-width: 1;
    clip-path: inset(0 round 21px 0 0 0);
    pointer-events: none;
}
.or-toile-g { left: 1px; }
.or-toile-d { right: 1px; transform: scaleX(-1); }

.or-hw-pendu { position: absolute; top: 0; right: 150px; width: 0; height: 0; z-index: 4; pointer-events: none; }
.or-hw-fil {
    position: absolute;
    left: 0;
    top: -300px;
    width: 1px;
    height: 352px;
    background: linear-gradient(180deg, transparent, rgba(236, 226, 255, .45) 40%);
}
.or-hw-araignee {
    position: absolute;
    left: -20px;
    top: 6px;
    width: 40px;
    height: 44px;
    --or-hw-pendule: 14px;
    animation: or-hw-pendre 5.6s ease-in-out infinite;
}
@keyframes or-hw-pendre { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--or-hw-pendule, 20px)); } }

@media (max-width: 1150px) {
    .or-halloween .or-voile { background: linear-gradient(180deg, rgba(8, 3, 16, .5) 0%, rgba(8, 3, 16, .2) 40%, rgba(8, 3, 16, .72) 100%); }
    .or-hw-lune { left: auto; right: 8%; top: 3vh; width: clamp(72px, 16vw, 120px); }
}
@media (max-width: 560px) {
    .or-toile { width: 92px; height: 92px; }
    .or-hw-pendu { right: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .or-halloween .or-cx-titre::after,
    .or-hw-brume,
    .or-hw-chauve,
    .or-hw-chauve svg,
    .or-hw-citrouille .visage,
    .or-hw-araignee {
        animation: none !important;
    }
    .or-hw-chauve { display: none; }
}

/* ==========================================================================
   CONNEXION SUR MOBILE (2026-10-17) — tout tient dans l'écran, sans défilement
   Les services et le partenariat disparaissent (la présentation tient dans le titre) ; la carte est plus
   serrée, et se serre encore sur les écrans courts. Si l'écran est vraiment trop petit, la page défile
   plutôt que de couper le bouton de connexion.
   ========================================================================== */

@media (max-width: 767.98px) {
    /* Au moins la hauteur de l'écran ; plus haute seulement si le contenu ne tient pas (la page défile alors,
       plutôt que de couper le bouton). overflow reste caché : les nébuleuses débordent exprès. */
    .or-cx {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        justify-content: center;
    }

    .or-cx-services,
    .or-cx-partenaire { display: none; }

    .or-cx-gauche { padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 0; }
    .or-cx-titre { font-size: 2.3rem; margin-bottom: 8px; letter-spacing: .14em; }
    .or-cx-sous { margin-bottom: 14px; font-size: .68rem; letter-spacing: .16em; }

    .or-cx-droite {
        flex: 0 1 auto;
        padding: 6px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    }
    .or-cx-carte { padding: 20px 20px 14px; border-radius: 18px; }
    .or-cx-carte h1 { font-size: 1.15rem; margin-bottom: 3px; }
    .or-cx-aide { font-size: .78rem; margin-bottom: 14px; }

    .or-champ { margin-bottom: 11px; }
    .or-champ label { margin-bottom: 5px; font-size: .64rem; }
    .or-champ input { height: 46px; font-size: 16px; }   /* 16 px : iOS ne zoome pas sur le champ */
    .or-cx-ligne { margin: -2px 0 12px; }
    .or-cx-valider { height: 48px; }
    .or-cx-ou { margin: 11px 0; }
    .or-cx-discord { height: 46px; }
    .or-cx-pied { margin-top: 12px; padding-top: 9px; }
    .or-cx-ferme { margin-bottom: 14px; padding: 10px 12px; }
}

/* Écran court (iPhone SE, navigateur avec ses barres) : on retire le superflu */
@media (max-width: 767.98px) and (max-height: 740px) {
    .or-cx-aide,
    .or-cx-pied { display: none; }
    .or-cx-sous { margin-bottom: 10px; }
    .or-cx-titre { font-size: 2rem; }
    .or-champ input { height: 44px; }
    .or-cx-valider { height: 46px; }
    .or-cx-discord { height: 44px; }
}

@media (max-width: 767.98px) and (max-height: 600px) {
    .or-cx-sous { display: none; }
    .or-cx-carte { padding: 16px 18px 12px; }
    .or-champ { margin-bottom: 8px; }
    .or-cx-ou { margin: 8px 0; }
}

/* Téléphone couché : le titre à gauche, la carte à droite */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 950px) {
    .or-cx { flex-direction: row; align-items: center; }
    .or-cx-gauche { flex: 0 0 38%; padding: 8px 12px 8px 24px; align-items: flex-start; text-align: left; }
    .or-cx-sous { display: none; }
    .or-cx-droite { flex: 1 1 auto; padding: 8px 24px 8px 8px; }
    .or-cx-carte { max-width: 360px; padding: 14px 18px 10px; }
    .or-cx-aide, .or-cx-pied { display: none; }
    .or-champ { margin-bottom: 7px; }
    .or-champ input { height: 40px; }
    .or-cx-valider, .or-cx-discord { height: 42px; }
    .or-cx-ou { margin: 7px 0; }
    .or-hw-citrouille, .or-hw-lune { display: none; }
}

/* Halloween sur mobile : la lune plus petite, l'araignée plus discrète */
@media (max-width: 767.98px) {
    .or-hw-lune { top: 14px; right: 6%; width: 64px; }
    .or-toile { width: 76px; height: 76px; }
    /* L'araignée tient dans la marge du titre : elle ne passe pas sur le premier champ */
    .or-hw-araignee { top: 18px; left: -15px; width: 30px; height: 33px; --or-hw-pendule: 10px; }
}

/* ==========================================================================
   RÉORGANISATION DE LA PAGE DE CONNEXION (2026-10-17)
   Les quatre services en tuiles à gauche, la carte à droite, et une ligne du bas qui porte le partenaire
   et la signature (ils encombraient la colonne et le pied de la carte).
   ========================================================================== */

.or-cx-gauche { padding-bottom: 96px; }
.or-cx-droite { padding-bottom: 96px; }

.or-cx-services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: min(100%, 540px);
}

.or-cx-service {
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    text-align: left;
    background: rgba(7, 20, 44, .62);   /* assez dense pour que les fils de la constellation ne coupent pas le texte */
    border: 1px solid rgba(255, 255, 255, .10);
    transition: background .18s, border-color .18s, transform .18s;
}
.or-cx-service:hover { background: rgba(255, 255, 255, .1); border-color: rgba(160, 200, 255, .26); transform: translateY(-1px); }

.or-cx-service .pt { width: 11px; height: 11px; }
.or-cx-service .pt-rou { background: #16A34A; color: rgba(22, 163, 74, .95); }
.or-cx-service:nth-child(4) .pt::after { animation-delay: 3.3s; }

.or-cx-service-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.or-cx-service-texte b { font-size: .9rem; font-weight: 600; letter-spacing: .01em; color: #F2F6FF; }
.or-cx-service-texte small { font-size: .74rem; font-weight: 500; letter-spacing: .01em; color: rgba(190, 210, 240, .64); }

.or-halloween .or-cx-service-texte small { color: rgba(214, 190, 255, .66); }
.or-halloween .or-cx-service { background: rgba(18, 8, 36, .66); border-color: rgba(190, 140, 255, .26); }

/* La ligne du bas */
.or-cx-bas {
    position: absolute;
    z-index: 3;
    left: 8vw;
    right: 6vw;
    bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(160, 200, 255, .12);
}
.or-halloween .or-cx-bas { border-top-color: rgba(190, 140, 255, .16); }
.or-cx-bas .or-cx-partenaire { margin: 0; padding: 0; border: 0; }

.or-cx-copy {
    font-size: .74rem;
    letter-spacing: .05em;
    text-align: right;
    color: rgba(150, 180, 220, .55);
}
.or-cx-copy a { color: rgba(180, 205, 240, .8); font-weight: 600; text-decoration: none; }
.or-cx-copy a:hover { color: #A8CBFF; }
.or-halloween .or-cx-copy { color: rgba(204, 180, 244, .56); }
.or-halloween .or-cx-copy a { color: rgba(228, 208, 255, .85); }
.or-halloween .or-cx-copy a:hover { color: #FFB066; }
.or-cx-copy .or-hw-voeu { display: block; margin-top: 3px; }

/* L'œil du mot de passe */
.or-champ-boite.a-oeil input { padding-right: 52px; }
.or-champ-oeil {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: rgba(150, 180, 220, .6);
    cursor: pointer;
    transition: color .16s;
}
.or-champ-oeil i { margin: 0; font-size: .95rem; pointer-events: none; }
.or-champ-oeil:hover { color: #A8CBFF; }
.or-champ-oeil:focus-visible { outline: 2px solid rgba(120, 175, 255, .7); outline-offset: -2px; }
.or-halloween .or-champ-oeil { color: rgba(214, 190, 255, .6); }
.or-halloween .or-champ-oeil:hover { color: #FFB066; }

/* Tablette : la ligne du bas passe sous la carte, au fil de la page */
@media (max-width: 1150px) {
    .or-cx-gauche { padding-bottom: 0; }
    .or-cx-droite { padding-bottom: 20px; }
    .or-cx-services { margin: 0 auto; }
    .or-cx-bas {
        position: static;
        flex-direction: column;
        gap: 12px;
        margin: 0 28px;
        padding: 16px 0 22px;
    }
    .or-cx-copy { text-align: center; }
    .or-cx-bas .or-cx-partenaire { flex-direction: row; margin: 0; padding: 0; }
    .or-hw-citrouille { display: none !important; }
}

/* Téléphone : ni services, ni partenaire, ni signature (voir plus haut) */
@media (max-width: 767.98px) {
    .or-cx-services,
    .or-cx-bas { display: none; }
    .or-cx-droite { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}

/* Téléphone couché : la carte seule, à côté du titre */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 950px) {
    .or-cx-services,
    .or-cx-bas { display: none; }
    .or-cx-droite { padding-bottom: 8px; }
}