/* ====== Variables simples (modifie au besoin) ====== */
:root{
    --bg-page: #f7f8fb;
    --card-bg:#fff;
    --card-border:#e8eaef;
    --card-radius:14px;
    --shadow: 0 6px 22px rgba(20,30,55,.07);
    --text:#1b1f2a;
    --muted:#6b7280;
    --primary:#1e2363;   /* orange sélection */
    --primary-600:#1e2363;
    --input-border:#d8dbe2;
    --input-radius:10px;
    --focus: 0 0 0 4px rgba(245,166,35,.15);
    --seg-border:#9ccbe6;
    --seg-bg: transparent;
    --seg-active: #ebf5fa;
    --seg-text:#222;
}

/* ====== Page & titres ====== */
body { background: var(--bg-page); color: var(--text); }
h1,h2,h3 { letter-spacing:.2px; }

/* ====== Section carte ====== */
.card.section {
    background: #fff;
    border: 1px solid #e8eaef;
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(20,30,55,.07);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

/* plus de padding (ton 1er point) */
.card.section .card-header {
    background: #fafbfe;
    border-bottom: 1px solid #e8eaef;
    padding: 16px 24px;
}

.card.section .card-body {
    padding: 22px 24px;     /* 👈 padding ajouté */
}

.card.section .card-header h2{ margin:0; font-size:1.05rem; font-weight:700; text-transform: uppercase; }

/* ====== Labels + badge REQUIS ====== */
.form-label{ font-weight:700; font-size:.94rem; color:var(--text); }
.form-label.required::after{
    content:" REQUIS";
    display:inline-block;
    margin-left:.5rem;
    font-size:.7rem;
    font-weight:700;
    color:#6b7280;
    background:#eef0f4;
    border-radius:6px;
    padding:.15rem .4rem;
    vertical-align:middle;
}

/* ====== Champs ====== */
.form-control, .form-select{
    border:1px solid var(--input-border);
    border-radius: var(--input-radius);
    padding:.9rem 1rem;
    font-size:.95rem;
    background:#fff;
}
.form-control:focus, .form-select:focus{
    border-color: var(--primary);
    box-shadow: var(--focus);
    outline:0;
}

.form-label { display:block; font-weight: 600; margin-bottom: .35rem; text-transform: uppercase; }
.form-control, .form-select { display:block; width:100%; }
.mb-3 { margin-bottom: 1rem !important; }

/* ====== Aide & erreurs ====== */
.form-text{ color: var(--muted); }
.is-invalid, .form-control.is-invalid{ border-color:#e11d48; }
.invalid-feedback{ color:#e11d48; font-weight:600; }

/* ====== Badges (ex. “Aucun débit immédiat”) ====== */
.badge-soft{
    display:inline-block;
    background:#eef0f4;
    color:#475569;
    font-weight:700;
    border-radius:999px;
    padding:.35rem .6rem;
    font-size:.75rem;
}

/* ====== Boutons ====== */
.btn-primary{
    background:var(--primary);
    border-color:var(--primary);
    font-weight:800;
    padding:.8rem 1.1rem;
    border-radius:12px;
}
.btn-primary:hover{ background:var(--primary-600); border-color:var(--primary-600); }
.btn-outline-secondary{
    border-radius:12px;
    font-weight:700;
}

/* ====== Stripe Payment Element ====== */
#payment-element{
    border:1px solid var(--input-border);
    border-radius: var(--input-radius);
    padding:14px;
    background:#fff;
}
#payment-errors{ color:#e11d48; font-size:.9rem; }

/* ====== Petits ajustements de grille ====== */
.container .row.g-3 > [class*="col-"]{ margin-top:.25rem; }

/* ====== Accessibilité : focus visible pour labels/btns ====== */
.btn:focus, label.btn:focus, .form-check-input:focus{
    box-shadow: var(--focus);
    outline: none;
}

/* ====== Segmented control (Pro / Particulier) ====== */
/* HTML attendu: .segmented .btn-check + label.btn  (Bootstrap-compatible) */

/* Conteneur 2 colonnes */
.segmented{
    width:100%;
    border:2px solid var(--seg-border);
    border-radius:12px;
    overflow:hidden;
}

.segmented #subscribe_isProfessional, .segmented #profile_isProfessional {
    display: flex;
}

.row .segmented {
    padding-left: 0;
    padding-right: 0;
}

.segmented #subscribe_isProfessional .form-check, .segmented #profile_isProfessional .form-check {
    padding-left: 0;
}

/* Chaque choix (Symfony rend .form-check autour de l’input+label) */
.segmented .form-check{
    flex:1 1 50%;
    margin:0;              /* annule les marges bootstrap */
    position:relative;
}

/* Masque le radio natif mais laisse l’accessibilité */
.segmented .form-check-input{
    position:absolute;
    inset:0;               /* couvre toute la zone cliquable pour focus clavier */
    opacity:0;
    cursor:pointer;
    z-index:2;
}

/* Le label devient le “bouton” visuel */
.segmented .form-check-label{
    display:flex;
    align-items:center;
    justify-content:center;
    height:56px;
    padding:.85rem 1rem;
    font-weight:800;
    letter-spacing:.2px;
    color:var(--seg-text);
    background:var(--seg-bg);
    user-select:none;
    z-index:1;
    text-transform: uppercase;
}

/* Séparateur vertical entre les deux moitiés */
.segmented .form-check + .form-check .form-check-label{
    border-left:2px solid var(--seg-border);
}

/* État sélectionné (radio:checked) */
.segmented .form-check-input:checked ~ .form-check-label{
    background:var(--seg-active);
}

/* Hover doux */
.segmented .form-check-label:hover{
    background:var(--seg-active);
    cursor: pointer;
}

/* ====== Mobile ====== */
@media (max-width: 576px){
    .card.section .card-header{ padding:12px 14px; }
    .form-control, .form-select{ padding:.8rem .9rem; }
}