/* AstroPredict — pages « Connexion » et « Mon compte » (charte Lumière de la maquette figée : verre blanc, encre bleu-graphite, braise en accent, aucune flèche). */

.cache { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bouton--grand { height: 64px; padding: 0 38px; font-size: 17.5px; box-shadow: 0 18px 36px -20px rgb(21 33 43 / .6); }
.bouton--petit { height: 40px; padding: 0 18px; font-size: 14px; }
.bouton:disabled { opacity: .55; cursor: default; }
.champ textarea, .q-form textarea { width: 100%; min-width: 0; padding: 14px; border-radius: 14px; border: 1px solid var(--filet-fort); background: #fff; font: inherit; font-size: 16px; line-height: 1.5; resize: vertical; min-height: 96px; color: var(--encre); }
.q-form textarea:focus { outline: 2px solid var(--encre); outline-offset: 1px; }
.q-form textarea::placeholder { color: var(--encre-3); }

/* ===== Connexion ===== */
.connexion { max-width: 520px; margin: clamp(0px, 2vw, 24px) auto 0; padding: clamp(24px, 4vw, 40px); display: grid; gap: 18px; }
.connexion__form { display: grid; gap: 14px; }
.connexion__envoye { font-weight: 500; overflow-wrap: anywhere; }
.connexion__liens { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.connexion__liens--bas { margin-top: 2px; }
.connexion__nouveau { padding-top: 16px; border-top: 1px solid var(--filet); }
.connexion__nouveau a { font-weight: 600; color: var(--encre); }
.connexion #k-code { font-family: var(--f-mono); font-size: 24px; letter-spacing: .32em; text-align: center; height: 58px; }
.demo { display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; background: #FFE9D9; color: #7A3412; font-size: 14.5px; }
.demo b { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.demo code { font-family: var(--f-mono); font-weight: 600; font-size: 22px; letter-spacing: .22em; color: var(--encre); }
.demo span { display: inline; }

/* ===== Mon compte : en-tête ===== */
.haut--compte { padding-top: clamp(20px, 3vw, 40px); }
.compte { display: grid; gap: 20px; }
.compte-charge { padding: 24px; }
.compte-tete { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; padding: clamp(26px, 4vw, 46px);
  background: radial-gradient(60% 120% at 100% 0%, rgb(255 201 168 / .55), rgb(255 201 168 / 0) 70%), radial-gradient(50% 110% at 0% 100%, rgb(156 203 242 / .45), rgb(156 203 242 / 0) 70%), rgb(255 255 255 / .78); }
.compte-tete__titre { margin: 8px 0 0; font-family: var(--f-titre); font-weight: 400; letter-spacing: -.035em; line-height: 1; font-size: clamp(38px, 5.2vw, 64px); overflow-wrap: anywhere; }
.compte-tete__formule { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 20px; }
.pastille-formule { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet); font-size: 14.5px; font-weight: 600; }
.pastille-formule::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--abricot); }
.pastille-formule--gratuit::before { background: var(--menthe); }
.pastille-formule--previsions::before { background: var(--ciel); }
.pastille-formule[hidden] { display: none; }

/* ===== Mon compte : blocs ===== */
.compte-grille { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "q r" "h i" "a a"; }
.compte-q { grid-area: q; } .compte-r { grid-area: r; } .compte-h { grid-area: h; } .compte-a { grid-area: a; } .compte-i { grid-area: i; }
.bloc-compte { padding: clamp(20px, 2.6vw, 30px); display: grid; gap: 16px; align-content: start; min-width: 0; }
.bloc-compte__tete { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.compteur { display: flex; align-items: baseline; gap: 10px; }
.compteur b { font-family: var(--f-titre); font-weight: 300; font-size: 48px; letter-spacing: -.04em; line-height: 1; color: var(--braise); }
.compteur span { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.q-form { display: grid; gap: 10px; }
.vide { display: grid; gap: 12px; justify-items: start; padding: 16px 18px; border-radius: 16px; background: rgb(21 33 43 / .04); }
.vide p { color: var(--encre-2); }
.attente { color: var(--encre-3); font-size: 15px; }
.attente[role="status"]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: var(--abricot); animation: souffle 1.2s ease-in-out infinite; }
@keyframes souffle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.q-posees { display: grid; gap: 10px; }
.q-cout { margin: 0; font-size: 14px; line-height: 1.45; color: var(--encre-3); }
.q-form__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.detail-liste { display: grid; gap: 8px; }

/* une ligne qui s'ouvre : « Lire » / « Fermer » */
.detail { border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet); }
.detail[open] { box-shadow: inset 0 0 0 1.5px var(--encre); }
.detail__resume { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 13px 14px 13px 16px; cursor: pointer; list-style: none; }
.detail__resume::-webkit-details-marker { display: none; }
.detail__resume:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; border-radius: 16px; }
.detail__texte { display: grid; gap: 2px; min-width: 0; }
.detail__titre { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.detail__repere { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); overflow-wrap: anywhere; }
.detail__action { flex: none; padding: 6px 14px; border-radius: 999px; background: rgb(21 33 43 / .06); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background .2s ease; }
.detail__resume:hover .detail__action { background: rgb(21 33 43 / .12); }
.detail[open] .detail__action { background: var(--encre); color: var(--creme); }
.detail__corps { padding: 2px 16px 18px; }
.texte-long { max-width: 62ch; font-size: 16px; line-height: 1.65; color: var(--encre-2); }
.texte-long p { margin: 0 0 12px; }
.texte-long p:last-child { margin-bottom: 0; }
.texte-long__titre { margin: 18px 0 6px; font-family: var(--f-titre); font-weight: 500; font-size: 18px; letter-spacing: -.01em; line-height: 1.25; color: var(--encre); }
.texte-long > :first-child { margin-top: 4px; }

/* une conversation : question, réponse, question, réponse (aucune flèche) */
.fil .detail__titre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fil__messages { display: grid; gap: 16px; padding-top: 6px; min-width: 0; }
.fil__suite { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--filet); }
.fil__suite .vide { width: 100%; }
.fil__suite .q-form { gap: 12px; }
/* le verdict en bref, au-dessus d'une réponse */
.msg__penche { justify-self: start; margin: 2px 0 0; padding: 5px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--encre); background: var(--verre-fort); border: 1px solid var(--filet-fort); }
.msg__penche--nettement_pour, .msg__penche--plutot_pour { background: rgb(166 229 205 / .55); border-color: rgb(21 33 43 / .16); }
.msg__penche--nettement_contre, .msg__penche--plutot_contre { background: rgb(255 201 168 / .6); border-color: rgb(21 33 43 / .16); }
/* questions suggérées : des pastilles qui remplissent le champ de suivi */
.q-pistes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.q-pistes__titre { flex-basis: 100%; margin: 0 0 2px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--encre-3); }
.q-piste { appearance: none; -webkit-appearance: none; max-width: 100%; min-width: 0; text-align: left; font: inherit; font-size: 14px; line-height: 1.35; color: var(--encre); background: var(--verre-fort); border: 1px solid var(--filet-fort); border-radius: 16px; padding: 8px 14px; cursor: pointer; white-space: normal; overflow-wrap: anywhere; }
.q-piste:hover, .q-piste:focus-visible { border-color: var(--encre-3); background: var(--creme-2); }
.q-piste:focus-visible { outline: 2px solid var(--encre-3); outline-offset: 2px; }
.msg { display: grid; gap: 6px; min-width: 0; }
.msg__qui { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.msg--q { justify-items: end; }
.msg--q .msg__qui { padding-right: 4px; }
.msg__texte { margin: 0; max-width: 90%; padding: 12px 16px; border-radius: 18px 18px 6px 18px; background: var(--encre); color: var(--creme); font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.msg--r { justify-items: stretch; }
.msg--r .msg__qui { padding-left: 4px; }
.msg--r > .texte-long, .msg--attente > .attente, .msg--attente > .msg__duree { max-width: none; }
.msg--r > .texte-long { padding: 16px 18px 18px; border-radius: 18px 18px 18px 6px; background: rgb(21 33 43 / .04); }
.msg--r > .texte-long > :first-child { margin-top: 0; }
.msg--r .texte-long__titre { margin: 18px 0 6px; font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); line-height: 1.4; }
.msg--r .texte-long > .texte-long__titre:first-child { margin-top: 0; }
.msg--attente { padding: 16px 18px; border-radius: 18px 18px 18px 6px; background: rgb(21 33 43 / .04); }
.msg--attente .attente { margin: 0; color: var(--encre-2); font-weight: 500; }
.msg__duree { margin: 0; font-size: 13.5px; color: var(--encre-3); }
/* réponse au fil de l'eau : pendant une reprise, le premier texte reste visible, estompé, jusqu'à l'arrivée du nouveau */
.msg--reprise > .texte-long { opacity: .45; transition: opacity .2s; }

.ligne-natal { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 16px; border: 1px dashed var(--filet-fort); font-weight: 600; }

/* horoscope personnalisé */
.compte-h [data-h-actif] { display: grid; gap: 16px; justify-items: start; }
.h-haut { display: grid; gap: 12px; width: 100%; }
.barre { height: 6px; border-radius: 6px; background: rgb(21 33 43 / .1); overflow: hidden; }
.barre i { display: block; height: 100%; border-radius: 6px; background: var(--braise); width: 4%; }
.compte-h .detail-liste { width: 100%; }
.compte-h h3 { margin-bottom: -4px; }

/* historique des achats */
.achats { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.achats th { padding: 0 8px 10px; text-align: left; font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.achats td { padding: 13px 8px; border-top: 1px solid var(--filet); vertical-align: middle; }
.achats th:first-child, .achats td:first-child { padding-left: 0; }
.achats th:last-child, .achats td:last-child { padding-right: 0; }
.achats th:nth-child(3), .achats td:nth-child(3) { text-align: right; }
.achats__produit { font-weight: 600; }
.achats__montant { font-variant-numeric: tabular-nums; white-space: nowrap; }
.achats__date { color: var(--encre-2); white-space: nowrap; }
.achats th:nth-child(4), .achats td:nth-child(4) { text-align: right; }
.statut { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.statut--livree { background: #DDF4E9; color: #1D6B4C; }
.statut--en_cours, .statut--preparation { background: #FFE9D9; color: #7A3412; }
.statut--refuse, .statut--incident { background: #FCE6DD; color: #7A2A12; }

/* informations */
.infos { margin: 0; display: grid; }
.infos > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--filet); align-items: baseline; }
.infos dt { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.infos dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.compte-i .bouton { justify-self: start; }

@media (max-width: 900px) {
  .compte-grille { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .compte-q, .compte-r, .compte-h, .compte-a, .compte-i { grid-area: auto; }
  .compte-tete { grid-template-columns: minmax(0, 1fr); }
  .compte-tete .bouton--grand { width: 100%; padding: 0 20px; white-space: normal; text-align: center; line-height: 1.2; min-height: 64px; height: auto; padding-top: 12px; padding-bottom: 12px; }
}
@media (max-width: 640px) {
  .achats thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .achats, .achats tbody { display: block; }
  .achats tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 13px 0; border-top: 1px solid var(--filet); }
  .achats td { padding: 0; border: 0; }
  .achats td:first-child { padding-left: 0; }
  .achats__produit { grid-column: 1; grid-row: 1; }
  .achats__montant { grid-column: 2; grid-row: 1; text-align: right; }
  .achats__date { grid-column: 1; grid-row: 2; font-size: 14px; color: var(--encre-3); }
  .achats td.achats__statut { grid-column: 2; grid-row: 2; text-align: right; }
  .infos > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ligne-natal { flex-wrap: wrap; }
  .compteur b { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) { .attente[role="status"]::before { animation: none; } }