/* ══════════════════════════════════════════════════════════════════════
   LA PAGE DE CONNEXION CLIENT (compte.html, section visiteur)

   Maquette du 2026-08-31. Elle rompt volontairement avec l'habillage de la
   boutique — pas de thème, pas de couleur de marque, du noir et du blanc :
   c'est un écran de confiance, et la sobriété y vaut mieux que la
   décoration. Le reste de compte.html (commandes, fidélité, profil) garde
   l'habillage habituel.

   Tout est sous `.cx` : aucune de ces règles ne peut atteindre les autres
   écrans du site.
   ══════════════════════════════════════════════════════════════════════ */

.cx{
  --cx-encre:#0b0b0c; --cx-doux:#5c5c63; --cx-trait:#dcdce2;
  --cx-lien:#2563eb; --cx-fond:#fff;
  background:var(--cx-fond);color:var(--cx-encre);
  font:16px/1.55 Archivo,system-ui,-apple-system,sans-serif;
}

/* ── L'en-tête : retour à gauche, enseigne au centre ─────────────────── */
.cx-haut{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;
         padding:14px 8px;border-bottom:1px solid #ededf1}
.cx-retour{display:inline-flex;align-items:center;justify-content:center;
           width:44px;height:44px;border:0;background:none;cursor:pointer;
           color:#6b6b73;border-radius:50%;padding:0}
.cx-retour:hover{background:#f4f4f7}
.cx-retour svg{width:22px;height:22px}
.cx-enseigne{text-align:center;font-size:21px;font-weight:600;letter-spacing:-.2px}

/* ── Le corps ────────────────────────────────────────────────────────── */
.cx-corps{max-width:430px;margin:0 auto;padding:30px 22px 26px}
.cx-titre{font-size:33px;font-weight:800;letter-spacing:-.8px;margin:0 0 6px}
.cx-sous{color:var(--cx-doux);margin:0 0 26px;font-size:16px}

.cx-champ{display:block;margin-bottom:17px}
.cx-champ > span:first-child{display:block;margin-bottom:7px;color:#3d3d45;font-size:15px}
.cx-saisie{width:100%;height:56px;border:1px solid var(--cx-trait);border-radius:9px;
           padding:0 17px;font:16px/1 Archivo,system-ui,sans-serif;color:var(--cx-encre);
           background:#fff;transition:border-color .14s,box-shadow .14s}
.cx-saisie::placeholder{color:#a3a3ad}
/* Deux pixels de bord noir au focus, pas un halo coloré : c'est la
   convention de la maquette, et ça reste lisible pour qui distingue mal
   les couleurs. */
.cx-saisie:focus{outline:none;border-color:var(--cx-encre);box-shadow:inset 0 0 0 1px var(--cx-encre)}

/* L'œil du mot de passe. Le bouton est DANS la boîte, d'où le padding
   droit sur la saisie : sans lui, un mot de passe long passerait dessous. */
.cx-mdp{position:relative;display:block}
.cx-mdp .cx-saisie{padding-right:52px}
.cx-oeil{position:absolute;right:6px;top:50%;transform:translateY(-50%);
         width:42px;height:42px;border:0;background:none;cursor:pointer;
         color:#7a7a84;border-radius:50%;display:inline-flex;align-items:center;
         justify-content:center;padding:0}
.cx-oeil:hover{background:#f4f4f7;color:#3d3d45}
.cx-oeil svg{width:21px;height:21px}

.cx-oubli{display:block;text-align:right;margin:-6px 0 22px;
          color:var(--cx-lien);font-size:15px;background:none;border:0;
          cursor:pointer;padding:4px 0}
.cx-oubli:hover{text-decoration:underline}

.cx-valider{width:100%;height:62px;border:0;border-radius:11px;
            background:var(--cx-encre);color:#fff;cursor:pointer;
            font:700 17px/1 Archivo,system-ui,sans-serif;letter-spacing:.1px}
.cx-valider:hover{background:#222229}
.cx-valider:disabled{opacity:.55;cursor:progress}

/* ── Le séparateur ───────────────────────────────────────────────────── */
.cx-ou{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
       gap:14px;margin:26px 0 18px;color:#9a9aa4;font-size:14px}
.cx-ou::before,.cx-ou::after{content:'';height:1px;background:#ececf0}

/* ── Les fournisseurs ────────────────────────────────────────────────── */
.cx-fourn{width:100%;height:60px;border:1px solid var(--cx-trait);border-radius:11px;
          background:#fff;cursor:pointer;display:flex;align-items:center;
          justify-content:center;gap:11px;margin-bottom:13px;
          font:500 17px/1 Archivo,system-ui,sans-serif;color:var(--cx-encre)}
.cx-fourn:hover{background:#fafafc;border-color:#c8c8d2}
.cx-fourn svg{width:21px;height:21px;flex:none}

/* ── Les issues ──────────────────────────────────────────────────────── */
.cx-issues{text-align:center;margin-top:24px;color:var(--cx-doux);font-size:16px}
.cx-issues button{background:none;border:0;padding:0;cursor:pointer;font:inherit}
.cx-lien{color:var(--cx-lien)}
.cx-lien:hover{text-decoration:underline}
.cx-invite{display:block;margin-top:9px;color:var(--cx-doux);text-decoration:underline}

/* ── Le pied rassurant ───────────────────────────────────────────────── */
.cx-pied{display:flex;align-items:center;justify-content:center;gap:22px;
         margin-top:30px;padding-top:18px;border-top:1px solid #ededf1;
         color:#8a8a94;font-size:15px;flex-wrap:wrap}
.cx-pied span{display:inline-flex;align-items:center;gap:7px}
.cx-pied svg{width:16px;height:16px}

@media(max-width:430px){
  .cx-corps{padding:24px 18px 22px}
  .cx-titre{font-size:29px}
  .cx-pied{gap:14px;font-size:14px}
}

/* Sur l'écran de connexion, la barre du site s'efface : cet écran porte sa
   propre en-tête, et deux barres empilées brouillent la lecture. */
body.cx-seul > header.appbar,
body.cx-seul .bg-blobs{display:none}
body.cx-seul{background:#fff}
body.cx-seul .wrap{padding:0;max-width:none}