/* chat-mur.css — Le panneau de connexion du chat
   Calqué sur `.ch-modale` : même carte, même bordure, même fond assombri. Le
   but est qu'on ne quitte pas l'écran du regard — recoller la page /auth/login
   dans une boîte donnerait exactement l'impression inverse, celle d'un
   formulaire administratif qui s'intercale. */

.ch-mur {
    width: min(400px, calc(100vw - 2.5rem));
    padding: 1.6rem 1.5rem 1.3rem;
    border: 1px solid var(--mr-border-strong);
    border-radius: 14px;
    background: var(--mr-surface-card);
    color: var(--mr-text);
    font-family: var(--mr-sans);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
}

/* LE FOND SE FLOUTE VRAIMENT. Deux pixels laissaient l'ecran derriere
   parfaitement lisible : la carte flottait sur une page qui continuait de
   reclamer l'attention. Huit pixels le repoussent au second plan sans le faire
   disparaitre — on voit encore ou l'on est, on ne lit plus. */
.ch-mur::backdrop {
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(8px) saturate(0.9);
    -webkit-backdrop-filter: blur(8px) saturate(0.9);
    animation: ch-mur-fond 0.28s ease both;
}

@keyframes ch-mur-fond {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* La carte ARRIVE, elle n'apparait pas. */
.ch-mur[open] {
    animation: ch-mur-venue 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes ch-mur-venue {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to { opacity: 1; transform: none; }
}

/* SUR MOBILE, ELLE MONTE DU BAS. C'est le geste attendu d'une feuille sur
   telephone, et la carte se pose ou le pouce arrive — pas au centre, ou il faut
   remonter la main pour atteindre le premier champ. */
@media (max-width: 620px) {
    .ch-mur {
        width: 100vw;
        max-width: none;
        margin: auto auto 0;
        border-radius: 18px 18px 0 0;
        border-bottom: 0;
        padding-bottom: calc(1.3rem + env(safe-area-inset-bottom, 0px));
    }
    .ch-mur[open] { animation-name: ch-mur-monte; }
}

@keyframes ch-mur-monte {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ch-mur[open], .ch-mur::backdrop { animation: none; }
}

/* La bascule inscription / connexion : un bouton qui se lit comme un lien,
   mais qui se vise au doigt. */
.ch-mur-bascule {
    font: inherit;
    font-size: var(--ch-fs-sm);
    color: var(--mr-text-muted);
    background: none;
    border: 0;
    padding: .55rem .2rem;
    min-height: 44px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ch-mur-bascule:hover { color: var(--mr-text-strong); }
.ch-mur-bascule:focus-visible { outline: 2px solid var(--mr-text-strong); outline-offset: 2px; }

.ch-mur *, .ch-mur *::before, .ch-mur *::after { box-sizing: border-box; }

.ch-mur-titre {
    margin: 0 0 .4rem;
    font-family: var(--mr-serif);
    font-size: var(--ch-fs-xl);
    font-weight: 500;
    line-height: 1.15;
    color: var(--mr-text-strong);
}

.ch-mur-texte {
    margin: 0 0 .9rem;
    font-size: var(--ch-fs-sm);
    line-height: 1.55;
    color: var(--mr-text-muted);
}

/* La phrase déjà tapée, rendue visible : c'est la réponse à « est-ce que je
   vais devoir tout retaper ? », posée avant que la question se pose. */
/* Le refus d'inscription, dit dans le mur. Rouge franc et non pas une teinte
   d'avertissement : ce n'est pas un conseil, c'est un envoi qui n'est pas
   parti, et la personne doit le voir avant de retoucher au formulaire. */
.ch-mur-erreur {
    margin: 0 0 1.1rem;
    padding: .6rem .75rem;
    font-size: var(--ch-fs-sm);
    line-height: 1.45;
    /* LE ROUGE VIENT DU THEME, IL N'EST PLUS ECRIT ICI. Un `#a32c22` fixe est
       calibre pour le fond creme et ne bouge pas quand le fond passe a l'encre :
       mesure a 2,32:1 en theme sombre, la ou AA demande 4,5. Un message
       d'erreur est le dernier texte qu'on peut se permettre de rendre illisible,
       puisqu'il arrive au moment ou la personne est deja bloquee.
       `--mr-rouge` porte deja les deux versions, et `--mr-rouge-voile` le fond
       attenue qui va avec. */
    color: var(--mr-rouge);
    background: var(--mr-rouge-voile);
    border-left: 2px solid var(--mr-rouge);
    border-radius: 0 6px 6px 0;
}
.ch-mur-erreur[hidden] { display: none; }

.ch-mur-rappel {
    margin: 0 0 1.1rem;
    padding: .55rem .75rem;
    font-size: var(--ch-fs-sm);
    line-height: 1.45;
    font-style: italic;
    color: var(--mr-text-strong);
    background: var(--mr-surface-sunken);
    border-left: 2px solid var(--mr-border-strong);
    border-radius: 0 6px 6px 0;
}

/* ── Google ─────────────────────────────────────────────────────────────── */

.ch-mur-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    padding: .72rem 1rem;
    font-size: var(--ch-fs-sm);
    font-weight: 600;
    color: var(--mr-text-strong);
    text-decoration: none;
    background: var(--mr-surface);
    border: 1px solid var(--mr-border-strong);
    border-radius: 999px;
    transition: background .15s ease;
}

.ch-mur-google:hover { background: var(--mr-surface-hover); }

.ch-mur-ou {
    position: relative;
    margin: 1rem 0;
    text-align: center;
}

.ch-mur-ou::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--mr-border);
}

.ch-mur-ou span {
    position: relative;
    padding: 0 .7rem;
    font-size: var(--ch-fs-2xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mr-text-muted);
    background: var(--mr-surface-card);
}

/* ── Email + mot de passe ───────────────────────────────────────────────── */

.ch-mur-forme {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.ch-mur-champ {
    display: flex;
    flex-direction: column;
    gap: .28rem;
}

.ch-mur-champ span {
    font-size: var(--ch-fs-2xs);
    font-weight: 500;
    color: var(--mr-text-muted);
}

.ch-mur-champ input {
    width: 100%;
    padding: .62rem .8rem;
    font: inherit;
    font-size: var(--ch-fs-sm);
    color: var(--mr-text);
    background: var(--mr-surface-sunken);
    border: 1px solid var(--mr-border);
    border-radius: 9px;
    outline: none;
    transition: border-color .15s ease;
}

.ch-mur-champ input:focus { border-color: var(--mr-border-strong); }
.ch-mur-champ input::placeholder { color: var(--mr-text-muted); }

.ch-mur-envoyer {
    margin-top: .3rem;
    padding: .75rem 1rem;
    font: inherit;
    font-size: var(--ch-fs-sm);
    font-weight: 600;
    color: var(--mr-btn-text);
    background: var(--mr-btn-bg);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: opacity .15s ease;
}

.ch-mur-envoyer:hover { opacity: .88; }

.ch-mur-pied {
    margin: 1rem 0 0;
    text-align: center;
    font-size: var(--ch-fs-xs);
    color: var(--mr-text-muted);
}

.ch-mur-pied a {
    color: var(--mr-text-strong);
    font-weight: 500;
}

@media (max-width: 480px) {
    .ch-mur { padding: 1.3rem 1.1rem 1.1rem; }
    .ch-mur-titre { font-size: var(--ch-fs-xl); }
}

/* ── Le mot de passe qu'on peut relire ──────────────────────────────────────
   Un seul champ au lieu de deux, mais avec de quoi verifier ce qu'on a tape.
   La reinitialisation par e-mail etant coupee, une faute de frappe enferme
   dehors pour de bon : voir remplace confirmer. */
.ch-mur-champ--secret { position: relative; }

.ch-mur-champ--secret input { padding-right: 4.2rem; }

.ch-mur-oeil {
    position: absolute;
    right: 0.5rem;
    bottom: 0.35rem;
    /* 44px : le seuil en dessous duquel on rate la cible au doigt. C'est ce qui
       condamnait l'ancien lien « Inscris-toi », haut de 15 px. */
    min-height: 44px;
    min-width: 44px;
    padding: 0 0.6rem;
    border: 0;
    background: none;
    /* `--ink-soft` N'EXISTE PAS SUR CETTE PAGE : il est defini dans landing.css,
       que le chat ne charge pas. Le repli s'appliquait donc toujours, un gris
       fixe cale sur le fond creme, mesure a 3,09:1 sur l'encre. Une variable
       qui n'existe pas ne casse rien de visible, elle installe juste une couleur
       que personne n'a choisie : c'est ce qui la rend difficile a voir. */
    color: var(--ch-tiers);
    font: inherit;
    font-size: var(--ch-fs-xs);
    cursor: pointer;
}

.ch-mur-oeil:hover { text-decoration: underline; }

/* Le lien secondaire s'adresse desormais a une minorite — ceux qui ont deja un
   compte — mais il doit rester visable au doigt. */
.ch-mur-pied a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 0.4rem;
}