/* ================================================================
   Carte Membre Souplex — Styles
   ================================================================ */

:root {
    --bleu:    #1a2340;
    --accent:  #e8a020;
    --vert:    #27ae60;
    --rouge:   #e74c3c;
    --gris:    #f4f6f9;
    --radius:  12px;
    --shadow:  0 6px 28px rgba(26,35,64,.14);
}

/* ── Formulaire ──────────────────────────────────────────────── */
.cms-form-wrap {
    max-width:       520px;
    background:      #fff;
    border-radius:   var(--radius);
    box-shadow:      var(--shadow);
    overflow:        hidden;
    font-family:     'Segoe UI', system-ui, sans-serif;
    margin:          24px 0;
}

.cms-form-header {
    background:      var(--bleu);
    color:           #fff;
    text-align:      center;
    padding:         28px 24px 22px;
}
.cms-form-header__icon { font-size: 2.4rem; margin-bottom: 8px; }
.cms-form-header h2    { margin: 0 0 8px; font-size: 1.25rem; }
.cms-form-header p     { margin: 0; opacity: .75; font-size: .88rem; }

#cms-form {
    padding:         24px;
    display:         flex;
    flex-direction:  column;
    gap:             16px;
}

.cms-row {
    display:         grid;
    grid-template-columns: 1fr 1fr;
    gap:             14px;
}

.cms-field {
    display:         flex;
    flex-direction:  column;
    gap:             5px;
}

.cms-field label {
    font-size:       .82rem;
    font-weight:     600;
    color:           #333;
    text-transform:  uppercase;
    letter-spacing:  .04em;
}

.cms-req { color: var(--rouge); }

.cms-field input[type="text"],
.cms-field input[type="email"],
.cms-field input[type="number"] {
    border:          1.5px solid #d0d6e0;
    border-radius:   7px;
    padding:         9px 12px;
    font-size:       .95rem;
    color:           #222;
    outline:         none;
    transition:      border-color .2s, box-shadow .2s;
}
.cms-field input:focus {
    border-color:    var(--bleu);
    box-shadow:      0 0 0 3px rgba(26,35,64,.1);
}
.cms-field input.cms-invalid {
    border-color:    var(--rouge);
}

/* Checkbox RGPD */
.cms-field--checkbox label.cms-checkbox-label {
    display:         flex;
    align-items:     flex-start;
    gap:             10px;
    font-size:       .82rem;
    font-weight:     400;
    text-transform:  none;
    letter-spacing:  normal;
    cursor:          pointer;
    color:           #444;
}
.cms-field--checkbox input[type="checkbox"] {
    margin-top:      2px;
    flex-shrink:     0;
    accent-color:    var(--bleu);
    width:           16px;
    height:          16px;
}

/* Messages erreur */
.cms-error {
    font-size:       .75rem;
    color:           var(--rouge);
    min-height:      16px;
}

/* Message global */
#cms-form-msg {
    font-size:       .88rem;
    padding:         8px 12px;
    border-radius:   7px;
    display:         none;
}
#cms-form-msg.cms-msg--error {
    background:      #fdf0ef;
    color:           var(--rouge);
    border:          1px solid var(--rouge);
    display:         block;
}

/* Bouton submit */
.cms-btn {
    background:      var(--bleu);
    color:           #fff;
    border:          none;
    border-radius:   8px;
    padding:         12px;
    font-size:       1rem;
    font-weight:     700;
    cursor:          pointer;
    transition:      background .2s, transform .1s;
    letter-spacing:  .02em;
}
.cms-btn:hover   { background: #2c3e6e; }
.cms-btn:active  { transform: scale(.98); }
.cms-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ── Succès ──────────────────────────────────────────────────── */
.cms-success-wrap {
    max-width:       520px;
    background:      #eafaf1;
    border:          2px solid var(--vert);
    border-radius:   var(--radius);
    padding:         40px 32px;
    text-align:      center;
    margin:          24px 0;
    font-family:     'Segoe UI', system-ui, sans-serif;
}
.cms-success__icon { font-size: 3rem; margin-bottom: 12px; }
.cms-success-wrap h2 { color: #1a7a3c; margin: 0 0 10px; }
.cms-success-wrap p  { color: #444; font-size: .95rem; margin: 0; line-height: 1.6; }

/* ── Scanner ─────────────────────────────────────────────────── */
.cms-scan-wrap {
    max-width:       440px;
    margin:          24px 0;
    font-family:     'Segoe UI', system-ui, sans-serif;
}

/* Idle */
.cms-scan-idle {
    background:      var(--gris);
    border:          2px dashed #c0c8d8;
    border-radius:   var(--radius);
    padding:         40px 28px;
    text-align:      center;
}
.cms-scan-idle__icon { font-size: 3.5rem; margin-bottom: 12px; }
.cms-scan-idle h2    { color: var(--bleu); margin: 0 0 8px; font-size: 1.2rem; }
.cms-scan-idle p     { color: #555; margin: 0 0 16px; font-size: .9rem; }
.cms-scan-hint {
    display:         inline-block;
    background:      #fff;
    border:          1px solid #d0d6e0;
    border-radius:   8px;
    padding:         8px 16px;
    font-size:       .78rem;
    color:           #777;
}

/* Résultats */
.cms-scan-result {
    border-radius:   var(--radius);
    padding:         32px 28px;
    text-align:      center;
    box-shadow:      var(--shadow);
}
.cms-scan-result--valide   { background:#eafaf1; border:3px solid var(--vert); }
.cms-scan-result--invalide { background:#fdf0ef; border:3px solid var(--rouge); }

.cms-scan-result__icon   { font-size: 3.5rem; margin-bottom: 10px; }
.cms-scan-result__status { font-size: 1.2rem; font-weight: 700; margin-bottom: 16px;
    color: var(--bleu); }
.cms-scan-result--invalide .cms-scan-result__status { color: var(--rouge); }

.cms-scan-result__info {
    background:      rgba(255,255,255,.7);
    border-radius:   8px;
    padding:         14px 20px;
    margin:          0 auto 20px;
    max-width:       280px;
    text-align:      left;
    font-size:       .9rem;
    line-height:     1.8;
    color:           #333;
}
.cms-scan-result__name { font-size: 1.1rem; font-weight: 700; color: var(--bleu); margin: 0 0 4px; }
.cms-scan-result__info p { margin: 0; }

.cms-scan-btn {
    display:         inline-block;
    padding:         10px 20px;
    border-radius:   8px;
    font-size:       .88rem;
    font-weight:     600;
    text-decoration: none;
    transition:      background .2s;
}
.cms-scan-btn--retour {
    background:      var(--bleu);
    color:           #fff;
}
.cms-scan-btn--retour:hover { background: #2c3e6e; color: #fff; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 480px) {
    .cms-row { grid-template-columns: 1fr; }
}