:root {
--color-primary: #875e40;
--color-primary-dark: #6c4a33;
--color-secondary: #2b2d42;
--color-light: #f9f6f4;
--color-white: #fff;
--color-text: #333;
--shadow-light: 0 4px 12px rgba(0, 0, 0, 0.12);
--shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.16);
} #formations-periode {
background-color: var(--color-light);
padding: 4rem 1rem 7rem 1rem;
}
.page-title {
color: var(--color-secondary);
font-weight: 700;
text-align: center;
margin-bottom: 2rem;
} .formations-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.card {
border: none;
border-radius: 0.5rem;
box-shadow: var(--shadow-light);
transition: transform 0.2s ease, box-shadow 0.2s ease;
background-color: var(--color-white);
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
} .card-header {
background-color: var(--color-primary-dark);
color: var(--color-white);
text-align: center;
} .card-body {
text-align: center;
}
.display-6 {
font-size: 2rem;
font-weight: 700;
color: var(--color-secondary);
} hr,
.session-separator {
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
width: 60%;
margin: 0.75rem auto;
} .formation-sessions {
list-style: none;
padding: 0;
margin: 1rem 0 0;
}
.formation-sessions li {
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text);
font-size: 0.95rem;
transition: color 0.2s ease;
}
.formation-sessions li:hover {
color: var(--color-primary);
}
.formation-sessions i,
.fa-calendar {
color: var(--color-secondary);
font-size: 1.1rem;
margin-right: 0.5rem;
}
.session-label {
font-size: 0.95rem;
} .btn-danger {
background-color: var(--color-secondary);
border: none;
transition: background-color 0.25s ease;
}
.btn-danger:hover,
.btn-danger:focus {
background-color: var(--color-primary-dark);
color: var(--color-white);
}
.btn-outline-primary {
color: var(--color-primary);
border-color: var(--color-primary);
transition: background-color 0.25s ease, color 0.25s ease;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
background-color: var(--color-primary);
color: var(--color-white);
border-color: var(--color-primary);
} @media (max-width: 768px) {
.page-title {
font-size: 1.6rem;
}
.display-6 {
font-size: 1.6rem;
}
}