/* ---------------------- */
/* PALETTE DE COULEURS  */
/* ---------------------- */

:root {
    --blue-dark: #0b1f45;
    --blue-mid: #162f68;
    --blue-light: #1e3d8f;
    --orange: #ff7b00;
    --orange-light: #ff9a3d;
    /* Amélioration du contraste pour le texte muted */
    --text-muted: #a6b2cc;
}

/* ---------------------- */
/* GLOBAL PAGE  */
/* ---------------------- */

body.bg-page {
    background: var(--blue-dark);
    color: white;
    font-family: "Montserrat", sans-serif;
}

.text-muted-2 {
    color: var(--text-muted) !important;
}

#tilelogo {
    color: #1e3d8f;
}

/* Dégradé orange */
.text-gradient,
.gradient-title {
    background: linear-gradient(90deg, #ff9b21, #ff7b00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------------------- */
/* NAVIGATION / HEADER  */
/* ---------------------- */

.bg-nav {
    background: rgba(10, 20, 50, 0.9);
    backdrop-filter: blur(6px);
}

.navbar-brand .logo-img {
    width: 68px;
    height:auto;
}

/* ---------------------- */
/* HERO SECTION  */
/* ---------------------- */

.hero {
    background: var(--blue-dark);
}

.hero-logo {
    width: 160px;
    height: auto;
    background: white;
    padding: 18px;
    border-radius: 50%;
    box-shadow: 0px 0px 25px rgba(255, 255, 255, 0.2);
}
.imglogo{
    width: 140%;
    height: auto;
}
/* CTA Buttons */
.btn-cta {
    padding: 12px 28px;
    font-size: 1.1rem;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
}

/* Orange button */
.btn-primary {
    background: var(--orange);
    border: none;
}

.btn-primary:hover {
    background: var(--orange-light);
    border: none;
}

/* Outline button */
.btn-outline-light {
    border-color: var(--orange);
    color: var(--orange);
}

.btn-outline-light:hover {
    background: var(--orange);
    color: white;
}

/* ---------------------- */
/* SECTIONS / TITRES  */
/* ---------------------- */

.section-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--orange);
}

.bg-section {
    background: var(--blue-mid);
}

/* ---------------------- */
/* CARTES (programme, tarifs, inscription, bases) */
/* ---------------------- */

.card-section, .tarif-card {
    background: var(--blue-light);
    border: none;
    border-radius: 14px;
    padding: 20px; /* Base padding */
    color: white;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s, box-shadow 0.3s;
}

/* Unification de l'effet hover pour toutes les cartes */
.card-section:hover, .tarif-card:hover {
    transform: translateY(-4px);
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.4);
}

/* Ajustement spécifique pour les cartes tarifs */
.tarif-card {
    text-align: center;
    padding: 30px 25px;
}

/* ---------------------- */
/* AVANTAGES / GARANTIES (Nouveau style)  */
/* ---------------------- */

.advantage-list {
    /* Utilisation de CSS Grid pour un layout adaptatif */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    margin: 0 auto;
}

.advantage-list .advantage-card {
    /* Réutilise .card-section pour les coins et l'ombre */
    padding: 18px 25px;
    align-items: center;
    border-left: 5px solid var(--orange); /* Bande de couleur distinctive */
    display: flex; /* Force la disposition pour le contenu interne */
}

.advantage-list .advantage-card p {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
}

/* ---------------------- */
/* FORMULAIRES / INPUTS  */
/* ---------------------- */

.input-dark, .input-dark:focus, .form-select.input-dark {
    background: #0d224f;
    color: white;
    border: 1px solid #233a70;
    box-shadow: none;
    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}

/* Amélioration du Focus */
.input-dark:focus, .form-select.input-dark:focus {
    border-color: var(--orange-light);
    box-shadow: 0 0 0 0.25rem rgba(255, 123, 0, 0.2);
    background: var(--blue-mid); /* Changement subtil au focus */
}

.input-dark::placeholder {
    color: #aab7d6;
}


/* ---------------------- */
/* MODAL TEST DE NIVEAU */
/* ---------------------- */

.bg-modal {
    background: var(--blue-light);
}

.border-gradient {
    border-top: 4px solid var(--orange);
}

.progress-bar {
    background: var(--orange);
}

/* ---------------------- */
/* FOOTER  */
/* ---------------------- */

footer {
    background: #0a1a3a;
    color: var(--text-muted);
}

footer a {
    color: var(--orange);
}

/* ---------------------- */
/* Responsive/Layout   */
/* ---------------------- */

/* Assurer la même hauteur pour toutes les cartes dans les rangées spécifiques */
.row.g-4 > .col-lg-3,
.row.g-4 > .col-md-6,
.row.g-3 > .col-md-4 {
    display: flex;
    align-items: stretch;
}

/* Style de badge spécifique (si utilisé) */
.badge-premium {
    /* (Ce style peut être conservé si vous prévoyez de l'utiliser) */
    padding: 6px 14px;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    font-size: 0.9rem;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(88, 205, 255, 0.5);
    color: #5bd1ff;
    text-shadow: 0 0 6px rgba(91, 209, 255, 0.7);
    box-shadow: 0 0 10px rgba(91, 209, 255, 0.25),
    inset 0 0 8px rgba(91, 209, 255, 0.25);
    transition: 0.2s ease-in-out;
}

.badge-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(91, 209, 255, 0.5),
    inset 0 0 10px rgba(91, 209, 255, 0.4);
}