/* Composants du compte et de l'annuaire, dans la charte de /site/site.css (chargée avant). */
:root{--gris:var(--doux)}
main.conteneur{padding-top:32px;padding-bottom:40px}
main h1{margin-bottom:20px}
main h2{font-size:20px;margin:0}
.carte{margin-bottom:16px;display:flex;flex-direction:column;gap:16px}
form{display:flex;flex-direction:column;gap:16px;margin:0}
.petit{font-size:15px;line-height:1.5;color:var(--doux);margin:0}
label{display:flex;flex-direction:column;gap:6px;font-size:16px;font-weight:600;color:var(--encre)}
input[type=text],input[type=tel],select{font:400 18px var(--police);color:var(--encre);background:var(--blanc);border:1px solid var(--bordure-forte);border-radius:var(--rayon);padding:0 12px;min-height:50px;width:100%}
input:focus,select:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px rgba(29,75,143,.22)}
input::placeholder{color:#8d96a6}
.deux{display:grid;grid-template-columns:1fr 2fr;gap:16px}
.deux.inv{grid-template-columns:2fr 1fr}
.trois{display:grid;grid-template-columns:1fr 1.4fr 1.6fr;gap:16px}
@media (max-width:480px){.trois{grid-template-columns:1fr 1fr}.trois label:first-child{grid-column:1 / -1}.deux,.deux.inv{grid-template-columns:1fr}}
main button,main .bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border:2px solid var(--bleu);border-radius:var(--rayon);background:var(--bleu);color:#fff;font:600 17px/1.2 var(--police);text-decoration:none;cursor:pointer}
main button:hover,main .bouton:hover{background:var(--bleu-fonce);border-color:var(--bleu-fonce);color:#fff}
main button.ghost,main .bouton.ghost{background:var(--blanc);color:var(--bleu)}
main button.ghost:hover{background:var(--bleu-pale);color:var(--bleu-fonce)}
main button.danger{background:var(--blanc);color:var(--rouge);border-color:var(--rouge)}
main button.danger:hover{background:var(--rouge-pale);color:var(--rouge)}
main button.lien{background:none;border:0;color:var(--bleu);min-height:44px;padding:0;text-decoration:underline;text-underline-offset:2px;font:500 15px var(--police);text-align:left}
main button.lien:hover{background:none;color:var(--bleu-fonce)}
main button:disabled{opacity:.5;cursor:not-allowed}
.ligne{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.otp{display:flex;gap:8px;justify-content:center}
.otp input{width:48px;height:58px;padding:0;text-align:center;font:600 26px var(--police);border:1px solid var(--bordure-forte);border-radius:var(--rayon);background:var(--blanc);color:var(--encre)}
.otp input:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px rgba(29,75,143,.22)}
@media (max-width:380px){.otp{gap:5px}.otp input{width:42px;height:52px}}
.interr{flex-direction:row!important;align-items:center;justify-content:space-between;gap:12px;font-size:17px!important}
.interr input{width:24px;height:24px;flex:none;accent-color:var(--bleu)}
.cases{display:flex;gap:10px 18px;flex-wrap:wrap}
.cases label{flex-direction:row;align-items:center;gap:8px;font-weight:400}
.cases input{width:20px;height:20px;accent-color:var(--bleu)}
.apercu{background:var(--clair);border:1px solid var(--bordure);border-radius:var(--rayon);padding:12px 14px;font-size:17px;font-weight:600;margin:6px 0}
.visible{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:var(--clair);border:1px solid var(--bordure);border-radius:var(--rayon);padding:16px;font-size:15px}
.visible b{font-size:16px}
.visible ul{margin:6px 0 0;padding-left:18px}
@media (max-width:480px){.visible{grid-template-columns:1fr}}
.res{border:1px solid var(--bleu);border-left-width:4px;border-radius:var(--rayon);background:var(--bleu-pale);padding:16px;display:flex;flex-direction:column;gap:8px}
.res b{font-size:18px}
.msg{min-height:1.2em;font-size:16px;font-weight:600;margin:0}
.msg.err{color:var(--rouge)}.msg.ok{color:var(--vert)}
.onglets{display:flex;gap:0;overflow-x:auto;margin:0 0 16px;border-bottom:1px solid var(--bordure);scrollbar-width:none}
main .onglets button{background:none;color:var(--doux);border:0;border-bottom:3px solid transparent;border-radius:0;min-height:48px;padding:0 14px;white-space:nowrap;font:500 16px var(--police);margin-bottom:-1px}
main .onglets button:hover{background:var(--clair);color:var(--bleu)}
main .onglets button[aria-selected=true]{color:var(--bleu);border-bottom-color:var(--bleu);font-weight:600}
.chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--bordure);border-radius:var(--rayon);background:var(--blanc)}
.chiffres div{padding:14px;text-align:center;border-right:1px solid var(--separateur)}
.chiffres div:last-child{border-right:0}
.chiffres b{display:block;font-size:26px;font-variant-numeric:tabular-nums}
.chiffres span{font-size:14px;color:var(--doux)}
.liste{display:flex;flex-direction:column}
.el{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--separateur)}
.el:last-child{border-bottom:0}
.el .num{font-size:14px;font-weight:600;color:var(--doux);font-variant-numeric:tabular-nums}
.el .q{min-width:0}
.el .q b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px}
.el .q span{font-size:15px;color:var(--doux)}
.el .etat{font-size:13px;grid-column:2;line-height:2}
.el > button.lien{grid-column:2;justify-self:start}
.pastille{display:inline-block;padding:1px 8px;border-radius:3px;font-size:13px;font-weight:600;background:var(--bleu-pale);color:var(--bleu)}
.pastille.ok{background:var(--vert-pale);color:var(--vert)}.pastille.att{background:var(--orange-pale);color:var(--orange)}.pastille.err{background:var(--rouge-pale);color:var(--rouge)}
.vide{color:var(--doux);text-align:center;padding:18px 0}
.pin{display:flex;flex-direction:column;gap:10px;background:var(--clair);border:1px solid var(--bordure);border-radius:var(--rayon);padding:16px}
.pin b{font-size:17px}
.pin .otp{gap:6px}
.pin .otp input{-webkit-text-security:disc;width:44px;height:54px}
[hidden]{display:none!important}

.lien-bouton{background:none;border:0;padding:0;color:var(--bleu);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.el .etat .bouton.petit{min-height:34px;padding:0 12px;font-size:14px;vertical-align:middle}

/* Crédit et parrainage (onglet Crédits) */
.code-parrain{display:flex;align-items:baseline;gap:12px}
.code-parrain b{font-size:26px;letter-spacing:.12em;font-variant-numeric:tabular-nums}
.carnets{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
main button.carnet{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--blanc);color:var(--encre);border:1px solid var(--bordure-forte);padding:14px 16px;min-height:0;height:auto}
main button.carnet:hover{border-color:var(--bleu);background:var(--bleu-pale);color:var(--encre)}
.carnet b{font-size:22px;color:var(--bleu)}
.carnet span{font-size:15px;font-weight:400}
.carnet small{font-size:14px;color:var(--vert);font-weight:600}