/* Espace client, page de désinscription et boîte e-mail de développement.
   Minimal et isolé de site.css, dont la charte est refaite ailleurs. */

.compte { max-width: 44rem; margin: 2rem auto; padding: 0 1rem; }
.compte section { margin: 2rem 0; }
.compte__lien, .compte__form { display: grid; gap: .5rem; max-width: 28rem; }
.compte__resa { border: 1px solid var(--ligne); border-radius: var(--r); padding: .8rem; margin: .6rem 0; background: #fff; }
.compte__resa h3 { margin: 0 0 .3rem; font-size: 1rem; }
.compte__liste { list-style: none; padding: 0; }
.compte__liste li { display: flex; justify-content: space-between; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--ligne); }

/* Connexion : fournisseurs, mot de passe + code TOTP, lien par e-mail. */
.compte__connexion { max-width: 24rem; display: grid; gap: 1.25rem; }
.compte__connexion h1 { margin: 0; }
.compte__fournisseurs { display: grid; gap: .6rem; }
.compte__fournisseurs:not(:has(a:not([hidden]))) { display: none; }
.compte__ou { display: flex; align-items: center; gap: .75rem; margin: 0; color: var(--gris); font-size: var(--t-xs); }
.compte__ou::before, .compte__ou::after { content: ""; flex: 1; border-top: 1px solid var(--ligne); }
.compte__code { font-size: var(--t-lg); letter-spacing: .2em; text-align: center; }
.compte__bascule { justify-self: start; background: none; border: 0; padding: .25rem 0; color: var(--bleu-700); font: 500 var(--t-sm) var(--font); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.compte__enrolement { display: grid; gap: 1rem; align-items: start; margin: 1rem 0; }
@media (min-width: 560px) { .compte__enrolement { grid-template-columns: 200px 1fr; } }
.compte__enrolement img { width: 200px; height: 200px; background: #fff; border: 1px solid var(--ligne); border-radius: var(--r); padding: .5rem; }
.compte__secret { font-size: var(--t-sm); word-break: break-all; background: var(--fond); border: 1px solid var(--ligne); border-radius: var(--r-sm); padding: .5rem .7rem; margin: 0; }
.compte__codes { border: 1px solid var(--bleu-100); background: var(--bleu-050); border-radius: var(--r); padding: 1rem 1.25rem; margin: 1rem 0; }
.compte__codes ol { columns: 2; margin: .5rem 0 0; padding-left: 1.6rem; }

.boite { max-width: 60rem; margin: 1rem auto; padding: 0 1rem; }
.boite__mail { border: 1px solid var(--ligne); border-radius: var(--r); padding: .8rem; margin: .6rem 0; background: #fff; }
.boite__mail pre { white-space: pre-wrap; font: .9rem/1.45 var(--mono); margin: .5rem 0 0; }
.boite__mail[data-categorie="marketing"] { border-left: 4px solid var(--cyan); }