/* Simplified, robust navbar styling
   - Avoids global body padding so content is not pushed off-screen
   - Targets Bootstrap's .navbar and .dropdown-menu so it works even if
     the template hasn't been updated to use custom classes
*/

:root{
    --brand-yellow: #e0b800; /* warm, less neon */
    --brand-yellow-strong: #d09a00;
    --nav-bg: #1f2326; /* deep charcoal */
    --nav-contrast: #111315; /* dropdown bg */
}

/* Decorative thin top band (optional) */
.site-header{
    height: 8px;
    background: linear-gradient(90deg, var(--brand-yellow) 0%, rgba(224,184,0,0.4) 100%);
}

/* Style the main bootstrap navbar without requiring .main-navbar */
.navbar{
    /* subtle horizontal gradient with a warm hint on the right */
    background: linear-gradient(90deg, var(--nav-bg) 0%, #131517 60%, rgba(224,184,0,0.04) 100%) !important;
    border-bottom: 3px solid var(--brand-yellow-strong);
}

.navbar .navbar-brand img{ display: block; }

.navbar .nav-link{
    color: var(--brand-yellow) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .5rem .8rem;
    transition: color .18s ease, background-color .18s ease, transform .08s ease, box-shadow .18s ease;
}

/* Hover/focus: subtle fill + lift */
.navbar .nav-link:hover,
.navbar .nav-link:focus{
    color: #ffffff !important;
    background: rgba(224,184,0,0.08);
    border-radius: 6px;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.navbar .nav-link:focus{ outline: none; box-shadow: 0 0 0 3px rgba(224,184,0,0.08); }

.navbar .nav-link.active{
    background: linear-gradient(90deg, rgba(208,154,0,0.12), rgba(224,184,0,0.06));
    border-radius: 6px;
    color: #fff !important;
}

/* Dropdown menu styling (applies even without custom class) */
.dropdown-menu{
    background: var(--nav-contrast) !important;
    border: 1px solid var(--brand-yellow-strong) !important;
    min-width: 200px;
}

.dropdown-menu .dropdown-item{
    color: var(--brand-yellow) !important;
}

.dropdown-menu .dropdown-item:hover{
    background: rgba(208,154,0,0.06) !important;
    color: #fff !important;
}

/* Make the navbar toggler visible on dark background */
.navbar-light .navbar-toggler-icon,
.navbar-toggler-icon{
    filter: invert(1) contrast(1.2);
}

/* Do not add global top padding - keep layout natural */
/* If you later make the navbar fixed, add body { padding-top: ... } then */

/* Small responsive tweaks */
@media (max-width: 767px){
    .navbar .nav-link{ padding: .45rem .6rem; }
}

/* Utility: brand badge if used */
.brand-badge{ background: var(--brand-yellow); color:#111; padding:.25rem .5rem; border-radius:6px; font-weight:700 }

/* Footer styling */
footer {
    background: linear-gradient(90deg, var(--nav-bg) 0%, #131517 60%, rgba(224,184,0,0.04) 100%) !important;
    border-top: 3px solid var(--brand-yellow-strong);
    margin-top: auto;
}

footer h5 {
    color: var(--brand-yellow);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 1rem;
}

footer a {
    color: rgba(224,184,0,0.6) !important;
    transition: color .18s ease;
    text-decoration: none;
}

footer a:hover {
    color: var(--brand-yellow) !important;
    text-decoration: underline;
}

footer .text_color {
    color: rgba(255,255,255,0.5) !important;
}

footer hr {
    border-color: rgba(224,184,0,0.3) !important;
    margin: 2rem 0;
}
/*CSS pour la carte césium*/

#cesiumContainer{
      width: 100%;
      height: 70vh;
      min-height: 420px;
      display: block;
}

.position-controls{
      display: flex;
      gap: .75rem;
      align-items: end;
      flex-wrap: wrap;
      margin: 1rem 0;
}

.position-controls .mode-switch{
      margin-left: auto;
}


/* --- SECTION PAGE DIVERS --- */

.albi-card-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px; /* Espace entre les deux crawlers */
    padding: 40px 20px;
}

/* --- STYLE COMMUN AUX DEUX CARTES --- */
.albi-custom-card {
    max-width: 1000px;
    width: 100%;
    background: #fff;
    border-radius: 20px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    overflow: hidden;
    border: 2px solid #111;
}

/* --- SECTION 1 : COUPE DE FRANCE (Style Image Uploadée) --- */
.albi-header {
    background: #111 !important;
    padding: 40px 40px 40px 180px !important;
    position: relative;
    border-bottom: 5px solid var(--brand-yellow);
}

.albi-header.no-badge {
    padding: 40px !important;
}

.albi-date-badge {
    position: absolute !important;
    left: 40px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: var(--brand-yellow) !important;
    color: white !important;
    width: 115px !important;
    height: 90px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 10px !important;
    z-index: 100 !important;
}

.albi-title h1, .albi-title h2 {
    color: #fff !important;
    margin: 0 !important;
    font-size: 1.8rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.albi-body {
    padding: 40px;
}

/* --- SECTION 2 : ALBI ÉCO RACE (Style Niveau III) --- */
.albi-eco-body {
    display: flex;
    padding: 0; /* On enlève le padding pour que l'image puisse toucher les bords si besoin */
    align-items: stretch;
}

.eco-contact-box{
    margin-bottom: 50px;
}

.eco-col-image {
    flex: 1;
    min-height: 100%;
}

.eco-col-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* L'image remplit toute la colonne gauche */
}

.eco-col-content {
    flex: 1.5;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

/* Boutons adaptés au style "En savoir plus" */
.eco-actions {
    display: flex;
    gap: 12px;
    margin-top: auto; /* Pousse la bande tout en bas, même si le texte est court */
    margin-bottom: -40px; /* Annule le padding du bas pour coller à la bordure */
    margin-left: -40px; /* Annule le padding gauche */
    margin-right: -40px; /* Annule le padding droit */
    padding: 30px 40px; /* Padding interne de la bande noire */
    background-color: #000; /* Fond noir qui englobe les boutons */
    border-top: 5px solid var(--brand-yellow); /* Barre jaune de séparation */
    /* border-radius enlevé pour épouser naturellement les contours de la carte */
}

.eco-btn {
    flex: 1; /* Permet aux 3 boutons de prendre chacun 1/3 de l'espace pour avoir la même taille complète */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    color: #fff;
    text-align: center;
}

.btn-black { background: var(--brand-yellow) !important; }
.btn-red   { background: var(--brand-yellow) !important; }
.btn-cyan  { background: var(--brand-yellow) !important; }

/* Responsive */
@media (max-width: 850px) {
    .albi-header { padding: 30px 20px 30px 20px !important; text-align: center; }
    .albi-date-badge { position: relative !important; transform: none !important; margin: 0 auto 20px; left: 0 !important; top: 0 !important; }
    .albi-eco-body { flex-direction: column; }
    .eco-col-image { height: 300px; }
}

.titreDivers{
    text-align: center;
    font-size: 2.5rem;
    margin-top: 75px;
    color: #1f2326;
    font-weight: 700;
}

.diversP{
    text-align: center;
    font-size: 1.2rem;
    margin-top: 30px;
    color: #555;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.liensParagraphe{
    display: inline-block;
    margin-top: -2px; /* Remonte le lien sur la bordure de la carte */
    margin-bottom: 40px;
    padding: 10px 20px;
    background-color: #fff; /* Fond blanc pour camoufler la bordure centrale */
    position: relative; /* Met l'élément au premier plan */
    z-index: 10;
    color: var(--brand-yellow);
    font-weight: 600;
    text-decoration: none;
    transition: color .18s ease;
    border: #111 2px solid;
    border-top: none; /* Pas de ligne en haut pour fusionner avec la carte */
    border-radius: 0 0 10px 10px;
}