:root {
    --primary-blue: #4a90e2;
    --light-blue: #e6f0fd;
    --dark-blue: #303f9f;
    --white: #ffffff;
    --light-gray: #f8faff;
    --text-dark: #333333;
    --border-color: #d0e0fc;
    --accent-orange: #951b81;
	--accent-ircec: #C61C14;
    --accent-green: #4caf50;
    --accent-purple: #9c27b0;
    --accent-red: #f44336;
    --accent-teal: #009688;
	--accent-mustard: #E5AC27;
	--accent-darkblue: #1D508E;
	--accent-medium-blue: #009EE0;
	--accent-gray: #868686;
	--accent-cnavpl: #1097AB;
	--accent-cipav: #a10d59;
	--accent-carmf: #014F99;
	--accent-carcdsf: #005A7C;
	--accent-carpimko: #007067;
	--accent-cavp: #BCD665;
	--accent-carpv: #00B4AA;
	--accent-cavec: #192643;
	--accent-cprn: #204D9C;
	--accent-cavamac: #026AB5;
	--accent-cavom: #2EA0BF;
	--accent-cnbf: #246D96;
	--accent-msa: #1D508E;
	--accent-cavimac: #1CAFE4;
	--accent-ssi: #EC694A;
	--accent-rci: #1F55A0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
	font-family: 'Inter', sans-serif;
            background: linear-gradient(to bottom, 
                #4a90e2 0%, 
                #357abd 40%, 
                #2c7cc4 65%, 
                #f8faff 65%, 
                #f8faff 100%);
            background-attachment: fixed;
            min-height: 100vh;
            color: var(--text-dark);
            overflow-x: hidden;
}

/* Navigation */
        .nav-header {
            background: white;
            backdrop-filter: blur(10px);
            padding: 15px 0;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            color: #4a90e2;
            font-size: 1.5rem;
            font-weight: 700;
            text-decoration: none;
        }

        .back-button {
            color: #4a90e2;
            background: rgba(255, 255, 255, 0.2);
            padding: 10px;
            border-radius: 8px;
            margin-left: 10px;
            text-decoration: none;
            transition: all 0.3s ease;
			border: 1px solid #4a90e2;
        }

        .back-button:hover {
            background: rgba(255, 255, 255, 0.3);
        }
		
		@media (max-width: 768px) {
            .nav-container {
                padding: 0 15px;
            }

            .logo {
                font-size: 1.3rem;
            }

            .back-button {
                padding: 8px;
                margin-left: 8px;
            }
		}

/* Floating elements animation */
        .floating-elements {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
		
		.floating-element {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            animation: float 20s infinite ease-in-out;
        }
		
		.floating-element:nth-child(1) {
            width: 80px;
            height: 80px;
            top: 20%;
            left: 10%;
            animation-delay: 0s;
        }

        .floating-element:nth-child(2) {
            width: 120px;
            height: 120px;
            top: 60%;
            right: 15%;
            animation-delay: -7s;
        }

        .floating-element:nth-child(3) {
            width: 60px;
            height: 60px;
            top: 80%;
            left: 70%;
            animation-delay: -14s;
        }
		
		@keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            33% { transform: translateY(-30px) rotate(120deg); }
            66% { transform: translateY(20px) rotate(240deg); }
        }



/* Header styles */
.header {
    color: var(--white);
    padding: 50px 20px 60px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.header h1 {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 30px;
    line-height: 1.1;
}

.header p {
    font-size: 2rem;
    font-weight: 300;
    margin-bottom: 40px;
}

/* Home page specific styles */
.main-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
}

.services-container {
    display: flex;
    gap: 60px;
    max-width: 1000px;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
}

.service-card {
    flex: 1;
    max-width: 400px;
    background-color: var(--white);
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 40px;
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none;
    color: var(--text-dark);
}

.service-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.service-icon {
    width: 160px;
    height: 160px;
    background-color: var(--primary-blue);
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    transition: background-color 0.3s ease;
}

.service-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--primary-blue);
    margin-bottom: 20px;
}

.service-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-dark);
    margin-bottom: 30px;
}

.service-button {
    display: inline-block;
    background-color: var(--primary-blue);
    color: var(--white);
    padding: 15px 35px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.service-card:hover .service-button {
    background-color: var(--dark-blue);
    transform: scale(1.05);
}

/* Logo container for regime filtering */
.logo-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.logo-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    color: var(--white);
    transition: transform 0.3s ease;
    text-decoration: none;
	min-width: 142px;
}

.logo-box:hover {
    transform: translateY(-10px);
}

.logo-box:hover .logo-icon {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.logo-icon {
    width: 120px;
    height: 120px;
    background: linear-gradient(to bottom, #4a90e2 0%, #357abd 40%, #2c7cc4 65%, #2c7cc4 65%, #2c7cc4 100%);
    border: 3px solid var(--white);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    transition: box-shadow 0.3s ease;
}

.logo-title {
    font-size: 1.2rem;
    font-weight: 500;
    transition: color 0.3s ease;
    text-align: center;
    max-width: 120px;
}

/* Content sections */
.content {
    margin-top: 0px;
    padding: 0px;
    position: relative;
    z-index: 100;
	padding-left: 15px;
    padding-right: 15px;
}

.intro-text {
    max-width: 800px;
    margin: 0 auto 60px;
    text-align: center;
    padding: 30px;
    background-color: var(--white);
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
	border:1px solid #e9ecef;	
}

.intro-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-dark);
}

.section-title {
    text-align: left;
    color: var(--primary-blue);
    font-size: 2rem;
    margin: 60px 0 20px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

/* Regime sections display/hide */
.regimes-section {
    display: none;
}

.regimes-section.active {
    display: block;
}

/* Section de présentation */
        .presentation-wrapper {
            position: relative;
            margin-top: -50px;
            z-index: 100;
        }
        
        .presentation-container {
            max-width: 900px;
            margin: 0 auto;
            background-color: var(--white);
            border-radius: 10px;
            box-shadow: var(--shadow-lg);
            padding: 40px;
        }
        
        .presentation-intro {
            font-size: 1.2rem;
            line-height: 1.7;
            color: var(--text-dark);
            margin-bottom: 20px;
            text-align: left;
        }
        
        .presentation-intro strong {
            color: var(--primary-blue);
        }
        
        .presentation-list {
            text-align: left;
            margin-left: 40px;
            margin-bottom: 30px;
        }
        
        .presentation-list li {
            font-size: 1.1rem;
            line-height: 1.6;
            color: var(--text-dark);
            margin-bottom: 10px;
        }

/* Card container for all cards */
.card-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.card {
    background-color: var(--white);
    border-radius: 20px;
    border: 1px solid #e9ecef;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    text-decoration: none;
    color: var(--text-dark);
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.card-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.card-icon.blue {
    background-color: var(--primary-blue);
    color: var(--white);
}

.card-icon.darkblue {
    background-color: var(--accent-darkblue);
    color: var(--white);
}

.card-icon.medium-blue {
    background-color: var(--accent-medium-blue);
    color: var(--white);
}

.card-icon.ircec {
	background-color: var(--accent-ircec);
	color: var(--white);
}

.card-icon.mustard {
    background-color: var(--accent-mustard);
    color: var(--white);
}

.card-icon.orange {
    background-color: var(--accent-orange);
    color: var(--white);
}

.card-icon.green {
    background-color: var(--accent-green);
    color: var(--white);
}

.card-icon.gray {
    background-color: var(--accent-gray);
    color: var(--white);
}

.card-icon.purple {
    background-color: var(--accent-purple);
    color: var(--white);
}

.card-icon.red {
    background-color: var(--accent-red);
    color: var(--white);
}

.card-icon.cnavpl {
    background-color: var(--accent-cnavpl);
    color: var(--white);
}

.card-icon.cipav {
    background-color: var(--accent-cipav);
    color: var(--white);
}

.card-icon.carmf {
    background-color: var(--accent-carmf);
    color: var(--white);
}

.card-icon.carcdsf {
    background-color: var(--accent-carcdsf);
    color: var(--white);
}

.card-icon.carpimko {
    background-color: var(--accent-carpimko);
    color: var(--white);
}

.card-icon.cavp {
    background-color: var(--accent-cavp);
    color: var(--white);
}

.card-icon.carpv {
    background-color: var(--accent-carpv);
    color: var(--white);
}

.card-icon.cavec {
    background-color: var(--accent-cavec);
    color: var(--white);
}

.card-icon.cprn {
    background-color: var(--accent-cprn);
    color: var(--white);
}

.card-icon.cavamac {
    background-color: var(--accent-cavamac);
    color: var(--white);
}

.card-icon.cavom {
    background-color: var(--accent-cavom);
    color: var(--white);
}

.card-icon.cnbf {
    background-color: var(--accent-cnbf);
    color: var(--white);
}

.card-icon.msa {
    background-color: var(--accent-msa);
    color: var(--white);
}

.card-icon.cavimac {
    background-color: var(--accent-cavimac);
    color: var(--white);
}

.card-icon.ssi {
    background-color: var(--accent-ssi);
    color: var(--white);
}

.card-icon.rci {
    background-color: var(--accent-rci);
    color: var(--white);
}

.card-icon.teal {
    background-color: var(--accent-teal);
    color: var(--white);
}

.card-title {
    color: var(--primary-blue);
    font-size: 1.6rem;
    margin-bottom: 15px;
}

.card-text {
    line-height: 1.6;
    color: var(--text-dark);
    margin-bottom: 20px;
    flex-grow: 1;
}

.card-note {
    background-color: var(--light-blue);
    border-left: 3px solid var(--primary-blue);
    padding: 10px 15px;
    margin-top: 15px;
    font-size: 0.9rem;
    color: var(--dark-blue);
    border-radius: 0 5px 5px 0;
	margin-bottom:10px;
}

.regime-tag {
    background-color: var(--light-blue);
    color: var(--primary-blue);
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.9rem;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
}

.card-button {
    display: inline-block;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: var(--white);
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease;
    align-self: flex-start;
    margin-top: 15px;
}


        .card-button:hover::before {
            width: 100%;
            height: 100%;
        }

        .card-button:hover {
            color: #4a90e2;
            border-color: #4a90e2;
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(74, 144, 226, 0.3);
        }

.card-button-classique {
    background-color: var(--primary-blue);
}

.card-button-simplifiee {
    background-color: var(--accent-green);
}

.card-button {
    display: inline-block;
    color: var(--white);
    padding: 12px 18px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

/* Effets de survol spécifiques à chaque bouton */
.card-button-classique:hover {
    background-color: var(--dark-blue);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card-button-simplifiee:hover {
    background-color: #3d8c40; /* Dark green */
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Fiche specific styles */
.fiche-header {
    background-color: var(--primary-blue);
    color: var(--white);
    padding: 60px 0;
    text-align: center;
}

.logo-icon.pink {
    background-color: var(--accent-pink);
    border-color: var(--white);
}

.fiche-header h1 {
    font-size: 3rem;
    font-weight: 700;
    max-width: 1000px;
    margin: 0 auto;
}

.fiche-content {
    max-width: 1200px;
    margin: 70px auto;
    padding: 10px 10px;
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

#fiche-container {
    padding: 40px;
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Loading state */
.loading {
    text-align: center;
    padding: 40px;
    font-size: 1.2rem;
    color: var(--primary-blue);
}

/* Footer */
.footer {
    background-color: #f8faff;
    color: var(--primary-blue);
    padding: 40px 0;
    margin-top: auto;
    text-align: center;
}

/* Styles pour les boutons de version */
.card-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.card-button-classique {
    background-color: var(--primary-blue);
}

.card-button-simplifiee {
    background-color: var(--accent-green);
}

.card-button {
    display: inline-block;
    color: var(--white);
    padding: 12px 18px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

/* Pseudo-élément pour l'effet de remplissage */
.card-button::before {
    content: '';
    position: absolute;
    
    /* Positionnement au centre */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Commence invisible (taille 0) */
    width: 0;
    height: 0;
    
    /* Apparence du remplissage */
    background: white;
    border-radius: 25px;
    
    /* Derrière le texte */
    z-index: -1;
    
    /* Animation */
    transition: all 0.4s ease;
}

/* État hover */
.card-button:hover::before {
    /* Le pseudo-élément s'étend pour remplir le bouton */
    width: 100%;
    height: 100%;
}

.card-button:hover {
    /* Changement de couleur du texte */
    color: #4a90e2;
    
    /* La bordure reste bleue */
    border-color: #4a90e2;
    
    /* Mouvement vers le haut */
    transform: translateY(-3px);
    
    /* Ombre portée */
    box-shadow: 0 10px 25px rgba(74, 144, 226, 0.3);
}


.card-button-classique:hover {
    background-color: var(--dark-blue);
}

.card-button-simplifiee:hover {
    background-color: #3d8c40; /* Dark green */
}

.version-badge {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 10px;
    color: white;
}

.version-classique {
    background-color: var(--primary-blue);
}

.version-simplifiee {
    background-color: var(--accent-green);
}

.back-button {
    position: relative;
}

.back-button[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 15px;
    padding: 6px 12px;
    background: white;
    color: #4a90e2;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    pointer-events: none;
    opacity: 0;
    animation: tooltipFadeIn 0.2s ease-in-out forwards;
}

.back-button[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    border: 6px solid transparent;
    border-bottom-color: white;
    z-index: 1001;
    pointer-events: none;
    opacity: 0;
    animation: tooltipFadeIn 0.2s ease-in-out forwards;
    filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.1));
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}
@media (max-width: 768px) {
    .nav-container {
        padding: 0 15px;
    }
	
	.header h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 30px;
    line-height: 1.1;
	}

    .logo {
        font-size: 1.3rem;
    }

    .back-button {
        padding: 8px;
        margin-left: 8px;
    }

    /* Masquer les tooltips sur mobile */
    .back-button[data-tooltip]:hover::after,
    .back-button[data-tooltip]:hover::before {
        display: none;
    }
	
	.nav-left
	{
		text-align: left;
		width: 100%;
		padding-left: 20px;
	}
}

@media (max-width: 375px) {
    /* iPhone 8 et appareils similaires
	.logo {
        display:none;
    } */
}

@media (max-width: 480px) {
    /* iPhone 8 et appareils similaires */
	.logo {
        font-size: 1.1rem;
    }
}

/* Styles spécifiques pour la version simplifiée */
#fiche-container.simplifiee {
    font-size: 1.2rem;
    line-height: 1.8;
}

#fiche-container.simplifiee h1,
#fiche-container.simplifiee h2,
#fiche-container.simplifiee h3 {
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}

#fiche-container.simplifiee p {
    margin-bottom: 1.2em;
}
@media (min-width: 1200px)
{
	.card-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .header h1 {
        font-size: 2.5rem;
    }
    
    .header p {
        font-size: 1.5rem;
    }
    
    .logo-container {
        gap: 20px;
    }
    
    .service-card {
        max-width: 100%;
    }
    
    .services-container {
        flex-direction: column;
    }
	
	/* Corrections pour l'impression */
@media print {
    /* Forcer l'affichage des couleurs */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
    
    /* Masquer complètement la navigation et le menu supérieur */
    .nav-header, 
    .nav-container, 
    .back-button, 
    a.logo, 
    a[id="back-to-regime"],
    .logo-container {
        display: none !important;
    }
    
    /* Masquer spécifiquement le titre "Pédagogie Retraite" et le bouton "Retour au régime" */
    body > *:first-child:not(.fiche-header),
    body > div:nth-child(1),
    .logo + a,
    a.back-button {
        display: none !important;
    }
    
    /* Agrandir le header et assurer qu'il est bien visible */
    .fiche-header {
        background-color: var(--primary-blue) !important;
        color: #ffffff !important;
        padding: 40px 0 !important; /* Padding augmenté */
        margin: 0 !important;
        min-height: 180px !important; /* Hauteur augmentée */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        page-break-after: avoid !important;
        position: relative !important;
        top: 0 !important; /* Positionner tout en haut de la page */
    }
    
    /* Augmenter la taille du titre dans le header */
    .fiche-header h1 {
        font-size: 32pt !important; /* Taille de police augmentée */
        font-weight: 700 !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
        text-align: center !important;
        max-width: 90% !important;
    }
    
    /* Corps du document sur fond blanc */
    body {
        background-color: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Assurer que le contenu principal a un fond blanc */
    .fiche-content {
        background-color: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    
    /* Conteneur de fiche sur fond blanc avec marge appropriée */
    #fiche-container {
        background-color: #ffffff !important;
        padding: 20px !important;
        margin-top: 10px !important;
        width: 100% !important;
    }
    
    /* Styles pour les titres de section */
    #fiche-container h1,
    #fiche-container h2,
    #fiche-container h3,
    .fiche-content h2 {
        color: var(--primary-blue) !important;
        margin-top: 1.2em !important;
        page-break-after: avoid !important;
    }
    
    /* Style pour les titres principaux avec la ligne bleue en dessous */
    #fiche-container h2,
    .fiche-content h2 {
        border-bottom: 1px solid var(--primary-blue) !important;
        padding-bottom: 0.3em !important;
        font-size: 24pt !important;
    }
    
    /* Conserver le style des sections "À retenir" */
    #fiche-container [class*="retenir"],
    #fiche-container .card-note,
    #fiche-container blockquote,
    [class*="retenir"] {
        background-color: var(--light-blue) !important;
        border-left: 3px solid var(--primary-blue) !important;
        padding: 15px !important;
        margin: 15px 0 !important;
        border-radius: 0 5px 5px 0 !important;
    }
    
    /* Gérer les sauts de page */
    p, h2, h3, ul, ol, .card, blockquote, table {
        page-break-inside: avoid !important;
    }
    
    /* Assurer que tout le contenu important commence sur la même page */
    h1, h2 {
        page-break-before: auto !important;
        page-break-after: avoid !important;
    }
}
}