/* =========================================================
   THÈME SWITCHASSUR – SOUSCRIPTION (conseillers)
   Complète theme-switch-internaute.css pour l’espace outil.
   Hypothèse : les pages de souscription ont <class="souscription">
   ========================================================= */

:root {
    --container-max-width: 1536px;
    --input-height: 56px;

    --input-border-focus: 1px solid var(--color-blue-dark);
    --input-border-success: 1px solid var(--color-success);
    --input-border-error: 1px solid var(--color-error);
    --input-border-checked: 1px solid var(--color-blue);


    /* États */

    /* Success */
    --color-success: #155724;
    --color-text-success: #2C8657;
    --color-success-muted: #D4EDDA;
    --border-success-muted: rgba(21, 87, 36, 0.2);

    /* Error */
    --color-error: #D43B47;
    --color-text-error: #D43B47;
    --color-error-muted: #F8DEE0;
    --border-error-muted: rgba(212, 59, 71, 0.20);

    /* Info */
    --color-info: #114155;
    --color-info-muted: #D8EFF4;
    --border-info-muted: rgba(17, 65, 85, 0.20);


    /* Warning */
    --color-warning: #856404;
    --color-warning-muted: #FFF3CD;
    --border-warning-muted: rgba(133, 100, 4, 0.2);


    /* Alertes / tags */
    --alert-border-radius: 8px;
    --tag-radius: 200px;
}

/* =========================================================
   CONTEXTE GÉNÉRAL SOUSCRIPTION
   ========================================================= */

/* Layout global un peu plus "outil" (moins marketing) */


/* Conteneur principal : carte blanche simple, sans jumbotron marketing */

/* Les sections sont un peu plus serrées en vertical */

section {
    margin-bottom: var(--space-24);
}

/* =========================================================
   PANELS / BLOCS FONCTIONNELS
   ========================================================= */

/* Panels : look "outil", plus proche d’un back-office */


.panel-heading {
    background-color: var(--color-gray-1);
    color: var(--color-blue-dark);
    border-bottom: 1px solid var(--color-gray-2);
}

.panel-title {
    font-size: var(--font-size-4);
    font-weight: var(--font-weight-bold);
}

/* Panels d’alerte / info dans les écrans fonctionnels */

.panel.asavoir .panel-heading {
    background-color: var(--color-blue);
    color: var(--color-white);
}

/* =========================================================
   BOUTONS – CONTEXTE SOUSCRIPTION
   ========================================================= */

/* Bouton principal (actions fortes : valider, souscrire...) */
/* Base bouton */
.btn {
    padding: var(--space-12) var(--space-24);
    border-radius: var(--space-8);
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-bold);
    font-family: "Inter", sans-serif;
    color: var(--color-blue-dark);
    border: 1px solid transparent;
    background: none;
}
.btn i{
    line-height: 20px;
}


/* PRIMARY
--------------------------------------------- */
.btn-primary {
    background-color: var(--color-yellow);
    border-color: var(--color-yellow);
    color: var(--color-blue-dark);
}

.btn-primary:hover,
.btn-primary:focus {
    color: var(--color-blue-dark);
    background-color: var(--color-yellow-light);
    border-color: var(--color-yellow-light);
}


/* SECONDARY / DEFAULT
--------------------------------------------- */

.btn-default,
.btn-secondary {
    background-color: var(--color-white);
    color: var(--color-blue-dark);
    border: var(--input-border-default);
}

.btn-default:hover,
.btn-secondary:hover,
.btn-default:focus,
.btn-secondary:focus,
.btn-secondary-black,
.btn-secondary-black:hover,
.btn-secondary-black:focus {
    color: var(--color-white);
    background-color: var(--color-blue-dark);
    border-color: var(--color-blue-dark);
}


/* TERTIARY
--------------------------------------------- */

.btn-tertiary {
    background-color: var(--color-white);
    color: var(--color-blue-dark);
    border: 1px solid var(--color-border-muted);
}

.btn-tertiary:hover,
.btn-tertiary:focus {
    background-color: var(--color-gray-1);
    border-color: var(--color-border-muted);
}


/* DANGER
--------------------------------------------- */

.btn-danger {
    background-color: var(--color-red);
    color: var(--color-white);
    border: 1px solid var(--color-red);
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--color-red-hover);
    border-color: var(--color-red-hover);
}


/* LINK
--------------------------------------------- */

.btn-link {
    background-color: var(--color-white);
    color: var(--color-blue-dark);
    border: none;
}

.btn-link:hover,
.btn-link:focus {
    text-decoration: underline;
}

.btn-plus:after {
    font-family: "Font Awesome 7 Pro";
    content: "\2b";
    color: inherit;
    padding-left: var(--space-8);
}

.btn-arrow-right:after {
    font-family: "Font Awesome 7 Pro";
    content: "\f178";
    color: inherit;
    padding-left: var(--space-8);
}

.btn-image {
    height: 65px;
    display: inline-flex;
    align-items: center;
    padding: var(--space-16);
    padding-right: 48px;
    border: none;
    font-weight: var(--font-weight-regular);
    color: var(--color-black);
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.10) !important;
    position: relative;
    gap: 16px;
}

.btn-image:after {
    font-family: "Font Awesome 7 Pro";
    content: "\f178";
    color: inherit;
    position: absolute;
    right: 16px;
}
.btn-ajouterPalier,
.btn-ajoutPret{
    justify-content: center; /* centre horizontalement */
}

.btn-supprime{
    background-color: var(--color-red);
    color: var(--color-white);
    border: 1px solid var(--color-red);
    border-radius: 50%;
    padding: 1px;
}
/* =========================================================
   TABLEAUX / LISTES DE DOSSIERS
   ========================================================= */

/* Tables dans les écrans de gestion (liste de demandes, portefeuille...) */

.table {
    background-color: var(--color-bg);
}

.table > tbody > tr > th {
    background-color: var(--color-blue);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
}

.table-striped > tbody > tr > td {
    color: var(--color-black);
    background-color: var(--color-blue-light);
}

.table-striped > tbody > tr:nth-of-type(2n+1) > td,
.table-striped > tbody > tr:nth-of-type(2n+1) > td {
    color: var(--color-black);
    background-color: var(--color-yellow-ultralight);
}

/* Ligne sélectionnée / active (si utilisée) */

.table > tbody > tr.active,
.table.table-hover > tbody > tr:hover {
    background-color: var(--color-blue-light);
}

/* =========================================================
   BREADCRUMB DEMANDE – SWITCH INTERNAUTE
   ========================================================= */

/* =========================================================
   BREADCRUMB DEMANDE – SWITCH INTERNAUTE
   ========================================================= */

/* Pastille numéro par défaut : bleu foncé Switch */
#breadCrumbDemande .btn-group::before {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
}

/* Étape active : bouton jaune + texte bleu */
#breadCrumbDemande .btn-group.active > .btn {
    background-color: var(--color-yellow);
    color: var(--color-blue-dark);
    font-weight: var(--font-weight-bold);
}

/* Étape success : pastille verte */
#breadCrumbDemande .btn-group.success::before {
    background-color: var(--color-green);
}

/* Texte des step “success” */
#breadCrumbDemande .btn-group.success > .btn {
    color: var(--color-blue-dark);
}

/* Séparateur éventuel */
#breadCrumbDemande .sep {
    color: var(--color-blue-dark);
}

/* =========================================================
   FORMULAIRE
   ========================================================= */
.label, label {
    display: inline-block;
    color: var(--color-black);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder,
input[type="radio"] + label,
.radio-image button {
    border-radius: var(--input-border-radius);
    border: var(--input-border-default);
    background-color: var(--color-white);
    box-shadow: 0 0 25px 0 var(--color-shadow-muted);
}

.bootstrap-select > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle:focus,
input[type="radio"]:checked + label {
    border: var(--input-border-focus);
    background: var(--color-blue-light);
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.10);
    color: var(--color-blue-dark);
}

input[type="radio"]:checked + label {
    border: var(--input-border-checked);
    box-shadow: inset 0 0 0 3px var(--color-blue);
}

/* =========================================================
   FOOTER OUTIL
   ========================================================= */

footer {
    border: none;
    color: var(--color-gray-4);
}