/* Connexion et Mon compte */
.champ { display: grid; gap: 8px; margin: 0 0 18px; }
.champ label { font-weight: 700; font-size: .95rem; }
.champ input { font: 500 1.05rem/1.2 var(--texte); color: var(--encre); background: var(--blanc); border: 1.5px solid var(--encre-trait); border-radius: 14px; padding: 14px 16px; width: 100%; }
.champ input:focus { outline: none; border-color: var(--sakura); box-shadow: 0 0 0 4px var(--rose-pale); }
.champ-code input { font: 600 1.8rem/1 var(--titre); letter-spacing: .4em; text-align: center; }
.aide { color: var(--encre-doux); font-size: .92rem; margin: 14px 0 0; }
.message { border-radius: 12px; padding: 12px 14px; font-size: .95rem; margin: 0 0 16px; }
.message[hidden] { display: none; }
.message-erreur { background: #FDE7EC; color: var(--framboise-texte); }
.message-ok { background: #E7F5EA; color: #2F6B3B; }
.etape[hidden] { display: none; }
.btn-large { width: 100%; justify-content: center; }
.btn[disabled] { opacity: .55; cursor: wait; }
.btn-lien { background: none; border: 0; padding: 0; font: inherit; color: var(--encre); cursor: pointer; }
.ligne-info { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--encre-trait); }
.ligne-info:first-of-type { border-top: 0; }
.ligne-info span:first-child { color: var(--encre-doux); }
.ligne-info span:last-child { font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.pastille { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--rose); font-weight: 700; font-size: .9rem; }
.pastille-premium { background: var(--encre); color: var(--blanc); }
.macs { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 10px !important; }
.macs li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--mochi); }
.macs small { display: block; color: var(--encre-doux); font-size: .85rem; }
.macs button { flex: none; background: none; border: 1.5px solid var(--encre-trait); border-radius: 10px; padding: 8px 12px; font: 700 .85rem/1 var(--texte); color: var(--encre); cursor: pointer; }
.macs button:hover { border-color: var(--framboise); color: var(--framboise-texte); }
.lien-connexion { text-decoration: none; font-weight: 700; font-size: .92rem; color: var(--encre); padding: 8px 6px; white-space: nowrap; }
.lien-connexion:hover { text-decoration: underline; text-decoration-color: var(--sakura); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.chargement { color: var(--encre-doux); }
.case { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; font-size: .95rem; line-height: 1.45; cursor: pointer; }
.case input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--framboise); }
.case + .btn { margin-top: 8px; }
.champ-mdp { position: relative; }
.champ-mdp input { padding-right: 96px; }
.champ-mdp .btn-lien { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-weight: 700; font-size: .88rem; color: var(--encre-doux); padding: 6px; }
.encart h2 + p, .encart form > p { margin-top: 0; }
.licences-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.licences-tete h2 { margin-bottom: 0; }
.licences-compte { color: var(--encre-doux); margin: 6px 0 16px; }
.licences { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 10px !important; }
.licence { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--mochi); border: 1px solid var(--encre-trait); }
.licence-libre { background: transparent; border-style: dashed; }
.licence-icone { flex: none; width: 36px; height: 26px; border-radius: 5px; border: 2.5px solid var(--encre); position: relative; }
.licence-icone::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 3px; margin-left: -8px; border-radius: 2px; background: var(--encre); }
.licence-libre .licence-icone { border-color: var(--encre-trait); }
.licence-libre .licence-icone::after { background: var(--encre-trait); }
.licence-texte { flex: 1; min-width: 0; }
.licence-texte strong { display: block; overflow-wrap: anywhere; }
.licence-texte small { display: block; color: var(--encre-doux); font-size: .86rem; }
.licence-retirer { flex: none; background: none; border: 1.5px solid var(--encre-trait); border-radius: 10px; padding: 8px 12px; font: 700 .85rem/1 var(--texte); color: var(--encre); cursor: pointer; }
.licence-retirer:hover { border-color: var(--framboise); color: var(--framboise-texte); }
@media (max-width: 520px) { .licence { flex-wrap: wrap; } .licence-retirer { margin-left: 50px; } }
.licences-ajout { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; color: var(--encre-doux); font-size: .92rem; }
.licences-ajout .btn[disabled] { cursor: not-allowed; opacity: .45; }
.cle-licence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; margin: 0 0 16px; border-radius: 14px; background: var(--rose-pale); }
.cle-libelle { font-weight: 700; font-size: .9rem; color: var(--encre-doux); }
.cle-licence code { font: 700 1rem/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; color: var(--encre); overflow-wrap: anywhere; }
.cle-actions { margin-left: auto; display: inline-flex; gap: 14px; font-size: .9rem; }
.encart-ajout .licences-ajout { margin-top: 0; }