/* ============================================================
   SMS BOOST — Composants partages du design system
   Boutons, champs de formulaire, case a cocher, alertes.
   Depend de css/ds-tokens.css (classe .sb-ds sur le conteneur).
   Charge par index.php, inscription.php et identification.php.
   ============================================================ */

/* ============================================================
   Boutons
   ============================================================ */
.sb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: var(--control-h-md);
    min-height: 44px;
    padding: 0 20px;
    font: var(--font-body);
    font-weight: var(--weight-semibold);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: var(--transition-base);
}

.sb-btn:hover {
    text-decoration: none;
}

.sb-btn--sm {
    height: var(--control-h-sm);
    min-height: var(--control-h-sm);
    padding: 0 14px;
    font-size: 14px;
    gap: 7px;
}

.sb-btn--lg {
    height: var(--control-h-lg);
    padding: 0 28px;
    font-size: 18px;
    gap: 11px;
}

.sb-btn--block {
    display: flex;
    width: 100%;
}

.sb-btn--primary {
    background: var(--color-primary);
    color: var(--text-on-brand);
    box-shadow: var(--shadow-xs);
}

.sb-btn--primary:hover {
    background: var(--color-primary-hover);
    color: var(--text-on-brand);
    box-shadow: var(--shadow-brand);
}

.sb-btn--primary:active {
    background: var(--blue-800);
    transform: translateY(1px);
}

.sb-btn--outline {
    background: var(--white);
    color: var(--color-primary);
    border-color: var(--sb-border);
}

.sb-btn--outline:hover {
    background: var(--blue-50);
    border-color: var(--blue-300);
    color: var(--color-primary);
}

.sb-btn--ghost {
    background: transparent;
    color: var(--color-primary);
}

.sb-btn--ghost:hover {
    background: var(--blue-50);
    color: var(--color-primary);
}

.sb-btn--outline-dark {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .45);
}

.sb-btn--outline-dark:hover {
    background: rgba(255, 255, 255, .10);
    color: #fff;
}
.sb-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================
   Champs
   ============================================================ */
.sb-field {
    display: block;
    min-width: 0;
}

.sb-field__label {
    display: block;
    font: var(--font-label);
    color: var(--text-strong);
    margin-bottom: 6px;
}

.sb-field__label small {
    font-weight: 400;
    color: var(--sb-text-muted);
}

.sb-field__box {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--control-h-md);
    padding: 0 14px;
    background: var(--white);
    border: 1px solid var(--sb-border);
    border-radius: var(--radius-md);
    transition: var(--transition-base);
}

.sb-field__box:focus-within {
    border-color: var(--border-focus);
    box-shadow: var(--ring-focus);
}

.sb-field__box > i {
    font-size: 16px;
    color: var(--text-faint);
    flex: none;
}

.sb-field__box input,
.sb-field__box select {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: var(--font-body);
    color: var(--text-strong);
    padding: 0;
    height: 100%;
}

.sb-field__box input::placeholder {
    color: var(--text-faint);
}

.sb-field__box input:disabled {
    color: var(--sb-text-muted);
    cursor: not-allowed;
}

.sb-field__hint {
    display: block;
    margin-top: 6px;
    font: var(--font-caption);
    color: var(--sb-text-muted);
}

.sb-field__hint--ok {
    color: var(--color-success-text);
    font-weight: 600;
}

/* Select natif habille comme un Input */
.sb-field__box--select {
    position: relative;
    padding: 0;
}

.sb-field__box--select select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0 38px 0 14px;
    cursor: pointer;
    border-radius: var(--radius-md);
}

.sb-field__box--select::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    color: var(--sb-text-muted);
    position: absolute;
    right: 14px;
    pointer-events: none;
}

/* Bouton icone dans un champ (recherche SIRET) */
.sb-field__box--action {
    padding-right: 4px;
}

.sb-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--sb-border);
    background: var(--white);
    color: var(--color-primary);
    cursor: pointer;
    transition: var(--transition-base);
}

.sb-iconbtn:hover:not(:disabled) {
    background: var(--blue-50);
    border-color: var(--blue-300);
}

.sb-iconbtn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* ============================================================
   Case a cocher
   ============================================================ */
.sb-consent {
    display: flex;
    align-items: center;
    gap: 10px;
    font: var(--font-body);
    font-size: 14px;
    color: var(--text-body);
    cursor: pointer;
    margin: 0;
}

.sb-consent input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.sb-consent__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: var(--radius-xs);
    border: 1.5px solid var(--border-strong);
    background: var(--white);
    color: #fff;
    transition: var(--transition-base);
}

.sb-consent__box i {
    font-size: 11px;
    opacity: 0;
}

.sb-consent input:checked + .sb-consent__box {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.sb-consent input:checked + .sb-consent__box i {
    opacity: 1;
}

.sb-consent input:focus-visible + .sb-consent__box {
    box-shadow: var(--ring-focus);
}

/* ============================================================
   Alertes
   ============================================================ */
.sb-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    font: var(--font-body);
    font-size: 14px;
}

.sb-alert i {
    margin-top: 3px;
    flex: none;
}

.sb-alert--success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border: 1px solid var(--green-500);
}

.sb-alert--danger {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
    border: 1px solid var(--red-500);
}

.sb-alert a {
    color: inherit;
    text-decoration: underline;
}

/* ============================================================
   Ligne de reassurance
   ============================================================ */
.sb-reassure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: var(--font-caption);
    color: var(--sb-text-muted);
}

.sb-reassure i {
    color: var(--green-600);
}

/* ============================================================
   Zone de texte
   ============================================================ */
.sb-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    background: var(--white);
    border: 1px solid var(--sb-border);
    border-radius: var(--radius-md);
    font: var(--font-body);
    color: var(--text-strong);
    resize: vertical;
    outline: none;
    transition: var(--transition-base);
}

.sb-textarea::placeholder {
    color: var(--text-faint);
}

.sb-textarea:focus {
    border-color: var(--border-focus);
    box-shadow: var(--ring-focus);
}

/* Ligne sous le champ : indication a gauche, compteur a droite */
.sb-field__foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    font: var(--font-caption);
    color: var(--sb-text-muted);
}

.sb-field__count {
    color: var(--text-faint);
    white-space: nowrap;
}

/* ============================================================
   Chips (choix unique en pastilles)
   ============================================================ */
.sb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sb-chip {
    padding: 10px 18px;
    border-radius: var(--radius-full);
    cursor: pointer;
    font: var(--font-body);
    font-weight: var(--weight-semibold);
    color: var(--text-body);
    background: var(--white);
    border: 1px solid var(--sb-border);
    transition: var(--transition-base);
    margin: 0;
}

.sb-chip input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.sb-chip:hover {
    border-color: var(--blue-300);
}

.sb-chip:has(input:checked) {
    color: var(--text-on-brand);
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-brand);
}

.sb-chip:has(input:focus-visible) {
    box-shadow: var(--ring-focus);
}