:root {
	--ninja-bleu: #013fa4;
	--ninja-bleu-10: #c4dafc;
	--ninja-orange: #f39c12;
	--bs-primary: #013fa4;
	--bs-primary-rgb: 1, 63, 164;
    --bg-gradient: linear-gradient(135deg, rgba(1, 63, 164, .1) 0%, #ffffff 100%);
    --premium: #AD46FF;
}

body {
	margin: 0;
}

@media (min-width: 768px) {
	body {
		background: var(--bg-gradient);
	}
}

#app-content {
	background: var(--bg-gradient);
}

.text-orange {
	color: var(--ninja-orange) !important;
}

.bg-orange {
	background-color: var(--ninja-orange) !important;
	color: white !important;
}

.btn-white {
	background-color: white !important;
}

.bg-ninja, .btn-ninja {
	background-color: var(--ninja-bleu) !important;
	color: white !important;
}
.btn-outline-ninja {
	border-color: var(--ninja-bleu) !important;
	color: var(--ninja-bleu) !important;
}
.btn-outline-ninja:hover {
	background-color: var(--ninja-bleu) !important;
	color: white !important;
}
.btn-ninja:hover {
	background-color: rgb(0, 80, 209) !important;
	color: white !important;
}
.bg-ninja-2, .bg-ninja-20 {
	background-color: rgba(1, 63, 164, .2);
	color: white;
}
.bg-ninja-10 {
	background-color: rgba(1, 63, 164, .1);
	color: var(--ninja-bleu);
}
.bg-ninja-05 {
	background-color: rgba(1, 63, 164, .05);
	color: var(--ninja-bleu);
}
.text-ninja {
	color: var(--ninja-bleu) !important;
}
.text-ninja-10 {
	color: var(--ninja-bleu-10) !important;
}
.border-ninja {
	border-color: var(--ninja-bleu) !important;
}

.blured {
	filter: blur(2px);
	cursor: none;
}

.icon-pill, .icon-pill-lg, .icon-pill-28 {
	min-width: 40px; 
	max-width: 40px;
	height: 40px; 
	display: flex; 
	align-items: center; 
	justify-content: center;
	border-radius: 6px;
	padding: 5px;
	margin-right: 1rem;
	font-size: 1.2rem;
}

.icon-pill-lg {
	min-width: 60px; 
	max-width: 60px;
	height: 60px; 
	font-size: 1.8rem;
}

.icon-pill-28 {
	min-width: 28px; 
	max-width: 28px;
	height: 28px; 
	border-radius: 4px;
	padding: 3px;
	font-size: 1rem;
}

.icon-circle, .icon-circle-sm, .icon-circle-lg {
	min-width: 40px; 
	max-width: 40px;
	height: 40px; 
	display: flex; 
	align-items: center; 
	justify-content: center;
	border-radius: 20px;
	padding: 5px;
	margin-right: 1rem;
	font-size: 1.2rem;
}
.icon-circle-sm {
	min-width: 28px; 
	max-width: 28px;
	height: 28px; 
	border-radius: 14px;
	padding: 3px;
	font-size: 1rem;
}
.icon-circle-lg {
	min-width: 60px; 
	max-width: 60px;
	height: 60px; 
	border-radius: 30px;
	font-size: 1.5rem;
	padding: 8px;
}

/* Sidebar */
.nav-link.active { border-radius: 8px; }
.nav-link { color: #666; font-weight: 500; margin-bottom: 5px; }

/* Main Content */
.main-content { margin-left: 280px; padding: 40px; }

/* Navigation Haute (Récurrent/Ponctuel) */
.nav-pills-custom { background: #f1f5f9; padding: 5px; border-radius: 12px; display: inline-flex; }
.nav-pills-custom .nav-link { border-radius: 10px; color: #64748b; font-weight: 600; padding: 8px 20px; }
.nav-pills-custom .nav-link.active { background: #003399; color: white; }

/*
.step-item { position: relative; flex: 1; text-align: center; }
.step-item::after { content: ""; position: absolute; top: 15px; left: 50%; width: 100%; height: 2px; background: #e0e0e0; z-index: 1; }
.step-item.completed::after { content: ""; position: absolute; top: 15px; left: 50%; width: 100%; height: 2px; background: var(--ninja-bleu); z-index: 1; }
.step-item:last-child::after { content: none; }
.step-number { width: 32px; height: 32px; border-radius: 50%; background: #eee; display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 2; font-size: 14px; }
.step-item.active .step-number { background: var(--ninja-bleu); color: white; }
.step-item.active .step-label { color: var(--ninja-bleu); font-weight: bold; }
*/
/* Ajustement Desktop vs Mobile */
@media (min-width: 992px) {
	.sidebar {
	    height: 100vh;
	    background: white;
	    position: fixed;
	    z-index: 1000;
	}
	.main-content {
	    margin-left: 280px;
	    width: calc(100% - 280px);
	}
}

@media (max-width: 991.98px) {
	.main-content {
	    margin-left: 0;
	    padding: 20px;
	}
	.sidebar {
	    width: 300px; /* Largeur du menu sur mobile */
	}
}

/* Style des liens */
.nav-link {
padding: 12px 15px;
border-radius: 10px;
color: #64748b;
transition: 0.2s;
}
.nav-link.active {
background-color: #003399 !important;
color: white !important;
box-shadow: 0 4px 12px rgba(0, 51, 153, 0.2);
}
.nav-link:hover:not(.active) {
background-color: var(--ninja-bleu);
color: white !important;
}

/* Conteneur principal avec bordures arrondies */
.summary-container {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    overflow: hidden;
}

/* En-tête de section */
.section-header {
    padding: 20px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f1f5f9;
}

.icon-box-gray {
    width: 38px;
    height: 38px;
    background: #94a3b8;
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

/* Tuiles de données */
.info-tile {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    height: 100%;
}

.info-tile i {
    font-size: 1.2rem;
    color: #64748b;
    margin-right: 15px;
}

.info-label {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 2px;
    display: block;
}

.info-value {
    font-weight: 600;
    color: #334155;
    font-size: 0.95rem;
}

/* Liste des tâches et avantages */
.feature-item {
    background: #f8fafc;
    border-radius: 10px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    color: #475569;
    margin-bottom: 10px;
}

.feature-item i {
    width: 22px;
    height: 22px;
    background: #666666;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    margin-right: 12px;
    flex-shrink: 0;
}
        
.frequence_annuelle {
	background-color: white;
	color: var(--bs-secondary);
}
        
.frequence_annuelle:hover {
	background-color: #eee;
}
        
.frequence_annuelle.active {
	border: 2px solid var(--ninja-bleu) !important;
	background-color: var(--ninja-bleu-10);
	color: var(--ninja-bleu);
} 

.frequence_annuelle.active .time-icon {
 	background-color: var(--ninja-bleu) !important;
 	color: white !important;
}

.frequence_annuelle .active-icon {
	opacity: 0;
}
.frequence_annuelle.active .active-icon {
	opacity: 1;
}

.access-card.active {
    border-color: var(--ninja-bleu);
    background: var(--ninja-bleu-10);
}

.access-card:hover {
    border-color: var(--ninja-bleu);
    background: var(--ninja-bleu-10);
}

.access-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    height: 100%;
}

/* Grille personnalisée de 7 colonnes */
.col-custom-7 {
    flex: 0 0 auto;
    width: 14.2857%;
    min-height: 100px;
}

/* Style des jours vides et texte standard */
.col-custom-7:not(:has(div)) {
    color: #6c757d;
    font-size: 0.9rem;
}

.form-check-ninja:checked {
    background-color: #000000 !important; /* Noir profond comme sur l'image */
    border-color: #000000 !important;
}

.form-check-input2 {
    width: 2.5em !important;
    height: 1.25em !important;
    cursor: pointer;
}


/* Suppression des bordures du calendrier */
.fc-theme-standard td, .fc-theme-standard th, .fc-theme-standard .fc-scrollgrid {
    border: none !important;
}

/* Style des en-têtes de jours (Dim, Lun...) */
.fc-col-header-cell {
    padding: 8px 0 !important;
}

.fc-col-header-cell-cushion {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    width: 90%;
    display: inline-block;
    color: #6c757d !important;
    font-weight: 400 !important;
    font-size: 0.85rem;
    text-decoration: none;
}

.fc-day-today > div {    
    background-color: white !important;
    color: var(--ninja-bleu) !important;
    border-radius: 12px;
    border: solid 1px var(--ninja-bleu) !important;
}
.fc-daygrid-day-number {
	text-decoration: none;
	color: var(--ninja-bleu) !important;
}
.fc-day-today .fc-daygrid-day-number { 
	font-weight: bold; 
}

/* Style des cartes d'intervention */
.fc-daygrid-event {
    background-color: var(--ninja-bleu) !important;
    border: none !important;
    border-radius: 12px !important;
    /*padding: 10px 5px !important;*/
    margin: 2px 5px !important;
}
/* Navigation */
.fc-toolbar-title { font-weight: bold; font-size: 1.1rem !important; }
.fc-prev-button, .fc-next-button {
    background: none !important;
    border: none !important;
    color: var(--ninja-blue) !important;
}

/* À retirer après le test 
.fc-daygrid-day {
    border: 1px solid #ccc !important; 
    min-height: 100px !important;
}
*/
.fc-daygrid-day-frame:has(.fc-event) {
	margin: 2px;
	background-color: var(--ninja-bleu) !important;
    border-radius: 12px !important;
}


.fc-daygrid-day-frame:has(.fc-event) .fc-daygrid-day-number {
	color: white !important;
}

.fc .fc-daygrid-day-top {
    display: flex;
    justify-content: center;
}

/*************** Devis step 1 ***************************/

/* Custom Select & Toggle */
.custom-select { 
	border-radius: 8px; 
	border: 1.5px solid #e2e8f0; 
	padding: 6px 20px;
	-webkit-box-shadow: 0px 0px 15px 5px rgba(1,57,149,0.39); 
	box-shadow: 0px 0px 15px 5px rgba(1,57,149,0.39);
}

.toggle-group { background: #f8faff; border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 4px; display: flex; height:40px; }
.toggle-btn { flex: 1; border: none; background: transparent; padding: 10px; border-radius: 10px; font-weight: 600; color: #64748b; }
.toggle-btn.active { background: #003399; color: white; }

 /* Alert */
.alert-economy { 
	background-color: #ecfdf5; 
	border: .5px solid #06d694; 
	color: #059669; 
	border-radius: 12px; 
	padding: 6px 10px; 
	font-size: 14px; 
}

.plan-card {
    position: relative;
    background: #fff;
    border-radius: 16px; /* Arrondis prononcés de la version 2 */
    z-index: 1;
    transition: transform 0.3s ease-in-out;
    transition-delay: 0s; 
    border: solid 1px #999999 !important;
}

.plan-card:hover, .plan-card.selected {
    transform: scale(1.02);
    transition-delay: 0s; 
    border-width: 2px !important;
}

.plan-card.standard {
	border-color: #528DEC !important;
}

.plan-card.premium {
	border-color: #AD46FF !important;
}

.plan-card.essentiel:hover::after, .plan-card.essentiel.selected::after {
    content:  "";
    position: absolute;
    /* On l'agrandit de 15px vers l'extérieur */
    top: -15px; 
    left: -15px; 
    right: -15px; 
    bottom: -35px;
    z-index: -1;
    
    /* Dégradé radial avec une zone vide au centre */
    background: radial-gradient(
        circle at center, 
        transparent 0%,     /* L'intérieur reste vide */
        #333333 95%,        /* La couleur commence au bord */
        transparent 100%    /* S'estompe vers l'extérieur */
    );
    
    filter: blur(20px);      /* Adoucit l'effet de halo */
    opacity: 0.2;           /* Intensité selon votre design */
    pointer-events: none;   /* Empêche l'ombre d'interférer avec les clics */
}

.plan-card.standard:hover::after, .plan-card.standard.selected::after {
    content:  "";
    position: absolute;
    /* On l'agrandit de 15px vers l'extérieur */
    top: -15px; 
    left: -15px; 
    right: -15px; 
    bottom: -35px;
    z-index: -1;
    
    /* Dégradé radial avec une zone vide au centre */
    background: radial-gradient(
        circle at center, 
        transparent 0%,     /* L'intérieur reste vide */
        #528DEC 95%,        /* La couleur commence au bord */
        transparent 100%    /* S'estompe vers l'extérieur */
    );
    
    filter: blur(20px);      /* Adoucit l'effet de halo */
    opacity: 0.4;           /* Intensité selon votre design */
    pointer-events: none;   /* Empêche l'ombre d'interférer avec les clics */
}

.plan-card.standard.selected > div {
	position: relative;
	background-color: white;
    z-index: 1;
}

.plan-card.standard.selected > div::before {content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
	background-color: white;
    z-index: -1; /* Place le fond derrière le texte */
    
    background-image: linear-gradient(to right, #1a46e5, #3a40e4, #4f38e3, #602fe1, #6f23df, #5737e2, #3a45e4, #004fe4, #0062db, #006cc8, #0072af, #007596);
    
    opacity: 0.1; /* Ajustez ici pour obtenir l'effet désiré (ex: 30%) */
    border-radius: inherit;
}

.badge.standard, .badge.standalone.standard {
    position: relative;
    z-index: 1;
}

.plan-card.standard.selected .badge.standard::after,
.plan-card.standard:hover .badge.standard::after,
.badge.standalone.standard::after {
    content:  "";
    position: absolute;
    
    top: -5px; 
    left: -25px; 
    right: -25px; 
    bottom: -25px;
    z-index: -1;
    
    background-image: linear-gradient(to right, #1a46e5, #3a40e4, #4f38e3, #602fe1, #6f23df, #5737e2, #3a45e4, #004fe4, #0062db, #006cc8, #0072af, #007596);
    
    filter: blur(20px);      /* Adoucit l'effet de halo */
    opacity: 0.2;           /* Intensité selon votre design */
    pointer-events: none;   /* Empêche l'ombre d'interférer avec les clics */
}

.plan-card.premium:hover::after, .plan-card.premium.selected::after {
    content:  "";
    position: absolute;
    
    top: -15px; 
    left: -15px; 
    right: -15px; 
    bottom: -35px;
    z-index: -1;
    
    background: radial-gradient(
        circle at center, 
        transparent 0%,     /* L'intérieur reste vide */
        #AD46FF 95%,        /* La couleur commence au bord */
        transparent 100%    /* S'estompe vers l'extérieur */
    );
    
    filter: blur(20px);      /* Adoucit l'effet de halo */
    opacity: 0.2;           /* Intensité selon votre design */
    pointer-events: none;   /* Empêche l'ombre d'interférer avec les clics */
}


.btn-selection {
	background-color: #eeeeee;
	color: #333333;
}

.btn-selection:hover {
	filter: brightness(0.9);
    transition: filter 0.2s ease;
}

.btn-selection.premium {
	background-color: #ecdefc !important;
	color: #7600ca !important;
}

.text-standard, .text-premium {
	color:#333333;
}

.plan-card.essentiel.selected .bg-essentiel {
	background-color: #314158;
	color: white;
}


.plan-card.standard .text-standard {
	color:#333333;
    background-image: linear-gradient(to right, #1a46e5, #3a40e4, #4f38e3, #602fe1, #6f23df, #5737e2, #3a45e4, #004fe4, #0062db, #006cc8, #0072af, #007596) ;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.plan-card.standard.selected .bg-standard, .plan-card.standard.selected .badge.bg-standard, .badge.plan.bg-standard {
	background-image: linear-gradient(to right, #1a46e5, #3a40e4, #4f38e3, #602fe1, #6f23df, #5737e2, #3a45e4, #004fe4, #0062db, #006cc8, #0072af, #007596) ;
	color: white !important;
}

.plan-card.premium .text-premium {
	color:#333333;
    background-image: linear-gradient(to right, #8300da, #ad00b5, #c10092, #c80074, #c6005c) !important;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.plan-card.premium.selected .bg-premium, .badge.bg-premium {
	background-image: linear-gradient(to right, #8300da, #ad00b5, #c10092, #c80074, #c6005c) !important;
	color: white !important;
}


.popover-warning {
    --bs-popover-bg: #fff3cd; /* Fond jaune clair (alert-warning) */
    --bs-popover-border-color: #ffe69c; /* Bordure dorée */
    --bs-popover-header-bg: #ffe69c;
    --bs-popover-header-color: #664d03; /* Texte ambre foncé */
    --bs-popover-body-color: #664d03;
    border: 1px solid var(--bs-popover-border-color);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05); /* Ombre légère comme vos cartes */
    z-index: 1000;
    margin-left: 5px;
}

/* Modifier la petite flèche du popover pour qu'elle soit aussi jaune */
.popover-warning .popover-arrow::after {
    border-bottom-color: #fff3cd !important;
    border-top-color: #fff3cd !important;
}