/* MYDJAKA — composants partagés par tous les écrans (base, langue, onglets, champs, boutons, bandeaux).
   Couleurs : uniquement via charte.css (variables). Valeurs reprises des maquettes validées. */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Sora,system-ui,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--link)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Sélecteur de langue FR / EN */
.lang{display:inline-flex;border:1px solid var(--border-strong);border-radius:999px;overflow:hidden;font-size:12px;flex:none}
.lang button{border:0;background:transparent;color:var(--text-2);padding:5px 10px;font:inherit;font-size:12px;cursor:pointer;min-height:28px}
.lang button[aria-pressed="true"]{background:var(--md-color-brand-forest-deep);color:#fff}
.lang button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

/* Onglets E-mail / Téléphone */
.tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--control-bg);border-radius:10px;padding:3px}
.tabs button{border:0;background:transparent;color:var(--text-2);height:34px;border-radius:8px;font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(10,35,32,.12)}
.tabs button:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

/* Champs */
.field{display:flex;flex-direction:column;gap:6px}
.field label,.field .lbl{font-size:13px;font-weight:500;display:flex;justify-content:space-between;gap:8px}
.field label a{font-weight:400;font-size:12px;color:var(--link);text-decoration:none}
.field label a:hover{text-decoration:underline}
.input{height:44px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--text);padding:0 12px;font:inherit;width:100%}
.input:focus{outline:2px solid var(--focus);outline-offset:0;border-color:var(--focus)}
.input::placeholder{color:var(--muted)}
.input[aria-invalid="true"]{border-color:var(--danger)}
.input:disabled{opacity:.7}
.help{font-size:12px;color:var(--danger);margin:0;min-height:0}
.pw{position:relative}.pw .input{padding-right:44px}
.pw .eye{position:absolute;right:6px;top:6px;width:32px;height:32px;border:0;background:transparent;color:var(--muted);border-radius:6px;cursor:pointer;display:grid;place-items:center}
.pw .eye:hover{color:var(--text)}
.pw .eye:focus-visible{outline:2px solid var(--focus)}

.check{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-2);cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--md-color-brand-forest);margin:0;flex:none}
.check input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Bouton principal : un seul par écran */
.btn{height:48px;border-radius:8px;border:0;font:inherit;font-size:15px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-hover)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn[disabled]{cursor:not-allowed}
.btn.is-loading{opacity:.75;pointer-events:none}
.btn.is-blocked,.btn.is-offline{opacity:.45;pointer-events:none}
.spin{display:none;width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:r 1s linear infinite}
.btn.is-loading .spin{display:block}
.btn.is-loading .lbl{display:none}
@keyframes r{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none;border-top-color:rgba(255,255,255,.4);border-right-color:#fff}}

/* Bandeaux : erreur, bloqué, hors ligne, session expirée */
.banner{display:flex;gap:10px;padding:12px 14px;border-radius:10px;font-size:13px;align-items:flex-start;color:var(--text)}
.banner svg{flex:none;margin-top:1px}
.banner.danger{background:var(--danger-soft)}.banner.danger svg{color:var(--danger)}
.banner.info{background:var(--info-soft)}.banner.info svg{color:var(--info)}
.banner.neutral{background:var(--subtle)}.banner.neutral svg{color:var(--text-2)}

.btn-secondaire{background:var(--control-bg);color:var(--text);border:1px solid var(--border-strong);text-decoration:none}