@charset "UTF-8";
@import url(main.css);
.lead.p-4.text-color-sixth { font-weight: 400; font-size: 1.2rem; }

.b-bloc-divider { height: 40px !important; background-color: transparent !important; border: none !important; box-shadow: none !important; }

.fs-6.lead.mt-4.mb-4 { font-weight: 400; color: #555; }

.lh-1.mb-3.titles span { line-height: 1.5rem !important; }

i.bi.bi-geo-alt { display: none; }

.animated-border-button:after { background-color: #f1511b; }

.text-shadow.text-color-sixth.text-center.fs-4.mt-4.p-1 { font-size: 1.2rem !important; color: #050a30; }

.svg-picto-card > svg { width: 20%; height: 20%; margin: 0 auto; color: #f1511b; }

.row.row-cols-1.row-cols-lg-3.d-flex.g-3.px-3.my-5.position-relative.justify-content-center { margin-top: 0px !important; }

.lead.p-4.text-color-sixth { padding-left: 100px !important; padding-right: 100px !important; }

/* Responsive */
@media (max-width: 900px) { .lead.p-4.text-color-sixth { padding-left: 15px !important; padding-right: 15px !important; } }

/* =========================== QUALIOPI =========================== */
.qualiopi { background: #fff; padding: 90px 20px; text-align: center; }

.qualiopi-container { max-width: 1100px; margin: 0 auto; }

.qualiopi-title { font-size: 2.2rem; font-weight: 600 !important; text-transform: uppercase; color: #f1511b; margin-bottom: 20px; }

.qualiopi-subtitle { font-size: 1.1rem; color: #555; max-width: 800px; margin: 0 auto 15px; line-height: 1.6; }

.qualiopi-logo img { max-width: 280px; width: 100%; height: auto; }

/* Responsive */
@media (max-width: 768px) { .qualiopi-title { font-size: 1.7rem; } .qualiopi-subtitle { font-size: 1rem; margin-bottom: 35px; } }

/* =========================== SOLUTIONS =========================== */
.solutions { background: #f6f7fb; padding: 80px 20px; }

.solutions-container { max-width: 1300px; margin: 0 auto; }

.solutions-title { text-align: left; font-size: 2.1rem; font-weight: 600 !important; text-transform: uppercase; margin-bottom: 60px; color: #f1511b; max-width: 750px; }

.solutions-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }

.solution-card { padding: 50px 40px; text-align: center; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); }

.solution-card h3 { font-size: 1.5rem; margin-bottom: 25px; color: #f1511b; font-weight: 600 !important; text-align: left; }

/* Listes */
.solution-card ul { list-style: disc; padding-left: 20px; }

.solution-card li { font-size: 1rem; line-height: 1.7; margin-bottom: 15px; text-align: left; }

.solution-card p { font-size: 1rem; line-height: 1.7; text-align: left; }

/* Carte */
.solution-card { background: #050a30; color: #ffffff; border-radius: 12px; }

/* Responsive */
@media (max-width: 900px) { .solutions-cards { grid-template-columns: 1fr; } .solutions-title { max-width: 100%; font-size: 1.7rem; text-align: left; } .solutions { padding: 80px 8%; } }

/* =========================== BLOC SEO =========================== */
.first-activity-title { position: relative; display: inline-block; /* limite à la taille du texte */ }

.first-activity-title::after { content: ""; display: block; width: 100px; height: 3px; background-color: #050a30; margin-top: 15px; }

.display-6.titles.fw-bold.text-body-emphasis.lh-1.mb-5.first-activity-title { margin-bottom: 1rem !important; }

.second-activity-title { position: relative; display: inline-block; /* limite à la taille du texte */ }

.second-activity-title::after { content: ""; display: block; width: 100px; height: 3px; background-color: #050a30; margin-top: 15px; }

.display-6.titles.fw-bold.text-body-emphasis.lh-1.mb-5.second-activity-title { margin-bottom: 1rem !important; }

.third-activity-title { position: relative; display: inline-block; /* limite à la taille du texte */ }

.third-activity-title::after { content: ""; display: block; width: 100px; height: 3px; background-color: #050a30; margin-top: 15px; }

.display-6.titles.fw-bold.text-body-emphasis.lh-1.mb-5.third-activity-title { margin-bottom: 1rem !important; }

/* =========================== SECTION : DOMAINES DE FORMATION (accueil) =========================== */
.portfolio-section { padding: 60px 8%; background-color: #f6f7fb; color: #111; }

.portfolio-header { max-width: 620px; margin-bottom: 40px; }

.portfolio-header h2 { font-size: 2.2rem; font-weight: 600 !important; line-height: 1.3; margin-bottom: 10px; color: #f1511b; }

.portfolio-header p { color: #777; font-size: 1rem; }

/* === Grille principale === */
.portfolio-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 25px; overflow: visible; padding-top: 40px; }

/* === Cartes === */
.portfolio-card { position: relative; flex: 1; min-width: 200px; aspect-ratio: 2 / 3; border-radius: 12px; background-size: cover; background-position: center; overflow: hidden; text-decoration: none; transition: transform 0.3s ease; /* pour l'effet de zoom */ }

/* --- Décalage en quinconce --- */
.portfolio-card:nth-child(odd) { margin-top: 40px; }

.portfolio-card:nth-child(even) { margin-top: 0; }

/* === Filtre permanent === */
.portfolio-card .overlay { position: absolute; inset: 0; background: #050a3099; /* filtre sombre permanent */ transition: background-color 0.3s ease, transform 0.3s ease; z-index: 1; }

/* === Zoom au hover === */
.portfolio-card:hover { transform: scale(1.05); /* zoom léger */ }

/* Tu peux aussi éclaircir le filtre au hover si tu veux */
.portfolio-card:hover .overlay { background: #f1511ba6; }

/* === Titre de la carte === */
.portfolio-card h3 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 1.2rem; font-weight: 600 !important; text-align: center; z-index: 2; margin: 0; }

/* === Responsive === */
@media (max-width: 1200px) { .portfolio-grid { flex-wrap: wrap; justify-content: center; gap: 20px; } .portfolio-card { flex: 0 1 calc(33.33% - 20px); } }

@media (max-width: 768px) { .portfolio-card { flex: 0 1 calc(50% - 20px); margin-top: 0 !important; } }

@media (max-width: 480px) { .portfolio-card { flex: 0 1 100%; } }

/* =========================== SECTION : ABOUT FORMATION (avec images d’icônes) =========================== */
.about-section { background-color: #ffffff; padding: 80px 8%; }

/* --- Disposition générale --- */
.about-container { display: flex; align-items: center; justify-content: space-between; gap: 60px; flex-wrap: wrap; }

/* --- Image de gauche --- */
.about-image { position: relative; /* nécessaire pour positionner le fond décalé */ flex: 1 1 45%; }

.about-image::before { content: ""; position: absolute; top: 30px; /* décale vers le bas */ right: 60px; /* décale vers la droite */ width: 95%; height: 100%; background-color: #050a30; /* 💙 ta couleur bleue */ border-radius: 12px; z-index: 0; /* le fond passe derrière l’image */ }

.about-image img { position: relative; z-index: 1; /* l’image passe au-dessus */ width: 95%; height: auto; border-radius: 12px; object-fit: cover; }

/* --- Contenu texte --- */
.about-content { flex: 1 1 50%; color: #222; }

.about-content .subtitle { display: inline-block; color: #050a30; font-size: 0.9rem; letter-spacing: 2px; font-weight: 600 !important; margin-bottom: 10px; }

.about-content h1 { font-size: 2.3rem; font-weight: 600 !important; margin-bottom: 30px; color: #f1511b; }

.about-content p { color: #555; line-height: 1.6; font-size: 1.05rem; }

/* --- Bloc d’icônes --- */
.about-icons { display: flex; gap: 40px; flex-wrap: wrap; }

.icon-item { text-align: center; flex: 1; }

.icon-item img { width: 60px; height: 60px; object-fit: contain; margin-bottom: 10px; }

.icon-item p { color: #333; font-weight: 500; font-size: 0.95rem; margin: 0; }

/* --- Responsive --- */
@media (max-width: 900px) { .about-container { flex-direction: column; } .about-content { text-align: center; } .about-icons { justify-content: center; } .about-image::before { left: 40%; top: 15px; transform: translateX(-50%); /* recentre le fond horizontalement */ width: 90%; /* un peu plus petit pour s’adapter à la largeur */ } }

/* =========================== SECTION : FORMATIONS (5 cartes alignées) =========================== */
.formation-cards { padding: 80px 8%; background-color: #fff; }

/* --- Titre général --- */
.formation-header h2 { font-size: 1.8rem; font-weight: 600 !important; margin-bottom: 60px; color: #f1511b; text-align: left; /* aligné à gauche */ background-color: #f1511b21; display: inline-block; padding: 12px 18px; border-radius: 8px; }

/* --- Grille : 5 cartes sur une ligne --- */
.formation-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 25px; }

/* --- Carte individuelle --- */
.formation-card { background-color: #f9f9f9; border-radius: 10px; border-bottom: 4px solid #050a30; /* ligne colorée */ padding: 25px 20px 35px 20px; display: flex; flex-direction: column; justify-content: space-between; transition: background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease; min-height: 200px; /* moins haute */ text-align: left; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); }

/* --- Hover --- */
.formation-card:hover { background-color: #050a30; border-color: #f1511b; /* la bordure fusionne avec le fond */ transform: translateY(-5px); }

.formation-card:hover h3, .formation-card:hover button { color: #fff; border-color: #fff; }

/* --- Titre de carte --- */
.formation-card h3 { font-size: 1.1rem; font-weight: 600 !important; color: #050a30; line-height: 1.4; margin-bottom: 20px; }

/* --- Bouton --- */
.formation-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: none; border: 2px solid #111; color: #111; font-size: 1.1rem; font-weight: bold; border-radius: 6px; width: 36px; height: 36px; cursor: pointer; transition: all 0.3s ease; }

.formation-card:hover .formation-btn { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.15); }

/* --- Responsive --- */
@media (max-width: 1200px) { .formation-grid { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 768px) { .formation-grid { grid-template-columns: repeat(2, 1fr); } .formation-header h2 { font-size: 1.5rem; } }

@media (max-width: 480px) { .formation-grid { grid-template-columns: 1fr; } }

/* =========================== SECTION : PROGRAMME DE FORMATION =========================== */
.programme-section { background-color: #f6f7fb; padding: 80px 8%; color: #111; padding-top: 30px; }

/* --- Titre général --- */
.programme-header h2 { font-size: 2rem; font-weight: 600 !important; margin-bottom: 60px; text-align: left; color: #f1511b; }

/* --- Grille des cartes --- */
.programme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

/* --- Carte individuelle --- */
.programme-card { background-color: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 35px 25px 30px 25px; text-align: left; transition: transform 0.3s ease, box-shadow 0.3s ease; }

/* --- Numéro --- */
.programme-number { display: block; font-size: 2.5rem; font-weight: 800; color: #050a30; opacity: 0.15; margin-bottom: 10px; }

/* --- Titre de la carte --- */
.programme-card h3 { font-size: 1.1rem; font-weight: 600 !important; color: #050a30; margin-bottom: 35px; }

/* --- Liste --- */
.programme-card ul { list-style: none; padding: 0; margin: 0 0 15px 0; }

.programme-card ul li { position: relative; padding-left: 16px; margin-bottom: 10px; line-height: 1.4; }

.programme-card ul li::before { content: "●"; color: #f1511b; /* puce colorée */ position: absolute; left: 0; top: 0; }

/* --- Texte Outils --- */
.programme-card p { font-size: 0.95rem; color: #050a30; margin: 0; margin-top: 35px; }

/* --- Responsive --- */
@media (max-width: 1100px) { .programme-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 768px) { .programme-grid { grid-template-columns: 1fr; } }

/* =========================== SECTION : OBJECTIFS PÉDAGOGIQUES =========================== */
.objectifs-section { background-color: #f6f7fb; /* fond doux légèrement bleuté */ padding: 80px 8%; }

.objectifs-container { display: flex; align-items: flex-start; justify-content: space-between; gap: 60px; flex-wrap: wrap; }

/* --- Colonne gauche --- */
.objectifs-left { flex: 1 1 40%; }

.objectifs-left h2 { font-size: 2rem; font-weight: 600 !important; color: #f1511b; margin-bottom: 20px; }

.objectifs-left p { font-size: 1.05rem; color: #333; line-height: 1.6; }

/* --- Colonne droite --- */
.objectifs-right { flex: 1 1 55%; }

.objectifs-right ul { list-style: none; padding: 0; margin: 0; }

.objectifs-right ul li { position: relative; padding-left: 28px; margin-bottom: 14px; color: #222; line-height: 1.6; font-size: 1rem; }

/* --- Puces personnalisées --- */
.objectifs-right ul li::before { content: "✔"; position: absolute; left: 0; top: 0; color: #050a30; font-size: 1.4rem; line-height: 1; }

/* --- Responsive --- */
@media (max-width: 900px) { .objectifs-container { flex-direction: column; gap: 40px; } .objectifs-left, .objectifs-right { flex: 1 1 100%; } .objectifs-left h2 { font-size: 1.6rem; } }

/* =========================== SECTION : INFORMATIONS FORMATION =========================== */
.infos-section { background-color: #050a30; /* fond sombre */ color: #fff; padding: 80px 8%; }

.infos-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: left; }

.infos-card { padding: 15px; }

/* --- Icône --- */
.infos-icon { font-size: 2rem; margin-bottom: 15px; }

/* --- Titre --- */
.infos-card h3 { font-size: 1.4rem; font-weight: 600 !important; margin-bottom: 15px; color: #f1511b; }

/* --- Texte --- */
.infos-card p { font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.85); margin: 0; }

/* --- Responsive --- */
@media (max-width: 992px) { .infos-container { grid-template-columns: 1fr; gap: 30px; } .infos-card { padding: 30px 20px; } }

/* =========================== SECTION : EVALUATION =========================== */
.eval-section { background-color: #050a30; padding: 80px 8%; }

.eval-container { display: flex; align-items: flex-start; justify-content: space-between; gap: 60px; flex-wrap: wrap; }

/* --- Colonne gauche --- */
.eval-left { flex: 1 1 40%; }

.eval-left h2 { font-size: 2rem; font-weight: 600 !important; color: #f1511b; margin-bottom: 20px; }

/* --- Colonne droite --- */
.eval-right { flex: 1 1 55%; }

.eval-right ul { list-style: none; padding: 0; margin: 0; }

.eval-right ul li { position: relative; padding-left: 28px; margin-bottom: 14px; color: #ffffffd9; line-height: 1.6; font-size: 1rem; }

/* --- Puces personnalisées --- */
.eval-right ul li::before { content: "✔"; position: absolute; left: 0; top: 0; color: #ffffffd9; font-size: 1.4rem; line-height: 1; }

/* --- Responsive --- */
@media (max-width: 900px) { .eval-container { flex-direction: column; gap: 40px; } .eval-left, .eval-right { flex: 1 1 100%; } .eval-left h2 { font-size: 1.6rem; } }

/* =========================== SECTION : SUPPORTS =========================== */
.supports-section { background-color: #050a30; padding: 8%; padding-top: 10px; padding-bottom: 60px; }

.supports-container { display: flex; align-items: flex-start; justify-content: space-between; gap: 60px; flex-wrap: wrap; }

/* --- Colonne gauche --- */
.supports-left { flex: 1 1 40%; }

.supports-left h2 { font-size: 2rem; font-weight: 600 !important; color: #f1511b; margin-bottom: 20px; }

/* --- Colonne droite --- */
.supports-right { flex: 1 1 55%; }

.supports-right ul { list-style: none; padding: 0; margin: 0; }

.supports-right ul li { position: relative; padding-left: 28px; margin-bottom: 14px; color: #ffffffd9; line-height: 1.6; font-size: 1rem; }

/* --- Puces personnalisées --- */
.supports-right ul li::before { content: "↪︎"; position: absolute; left: 0; top: 0; color: #ffffffd9; font-size: 1.4rem; line-height: 1; }

/* --- Responsive --- */
@media (max-width: 900px) { .supports-container { flex-direction: column; gap: 40px; } .supports-left, .supports-right { flex: 1 1 100%; } .supports-left h2 { font-size: 1.6rem; } }

/* =========================== SECTION : MÉTHODES PÉDAGOGIQUES =========================== */
.methodes-section { background-color: #f6f7fb; /* fond clair doux */ padding: 80px 8%; text-align: center; }

/* --- Titre --- */
.methodes-header { text-align: left; margin-bottom: 60px; }

.methodes-header h2 { font-size: 2rem; font-weight: 600 !important; color: #f1511b; line-height: 1.3; }

/* --- Grille des 5 éléments --- */
.methodes-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; align-items: start; justify-items: center; }

/* --- Élément individuel --- */
.methodes-item { display: flex; flex-direction: column; align-items: center; text-align: center; }

.methodes-icon { font-size: 3rem; color: #050a30; margin-bottom: 12px; }

.methodes-item p { font-size: 1rem; color: #333; line-height: 1.4; max-width: 220px; }

/* --- Responsive --- */
@media (max-width: 1100px) { .methodes-grid { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 768px) { .methodes-grid { grid-template-columns: 1fr; gap: 25px; } .methodes-item { flex-direction: row; align-items: flex-start; text-align: left; gap: 15px; } .methodes-icon { font-size: 1.8rem; margin-bottom: 0; } .methodes-item p { max-width: none; } }

/* =========================== SECTION : TARIFS =========================== */
.tarifs-section { background-color: #f6f7fb; /* fond doux */ padding: 80px 8%; color: #111; }

/* --- Titre général --- */
.tarifs-header h2 { font-size: 2rem; font-weight: 600 !important; margin-bottom: 60px; text-align: left; color: #f1511b; }

/* --- Grille des 3 cartes --- */
.tarifs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

/* --- Carte individuelle --- */
.tarif-card { background-color: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 40px 30px; text-align: left; }

/* --- Titre de la carte --- */
.tarif-card h3 { font-size: 1.3rem; font-weight: 600 !important; color: #050a30; margin-bottom: 15px; }

/* --- Texte --- */
.tarif-card p { font-size: 1rem; color: #333; line-height: 1.7; }

/* --- Responsive --- */
@media (max-width: 1000px) { .tarifs-grid { grid-template-columns: 1fr 1fr; } }

@media (max-width: 700px) { .tarifs-grid { grid-template-columns: 1fr; } }

/*# sourceMappingURL=custom.css.map */