:root {
    --primary-blue: #0A58CA;
    --secondary-orange: #FD7E14;
    --light-bg: #F8F9FA;
    --dark-text: #212529;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
    font-family: Arial, sans-serif;
    margin: 0;
    color: var(--dark-text);
    line-height: 1.6;
}

img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--primary-blue); outline-offset: 2px; }

/* Navigation */
header {
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.nav-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px;
}
.logo { font-size: 22px; font-weight: bold; color: var(--primary-blue); text-decoration: none; }
.logo span { color: #C2540A; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 15px; margin: 0; padding: 0; }
nav a { text-decoration: none; color: var(--dark-text); font-weight: 500; font-size: 14px; }
nav a:hover, nav a[aria-current="page"] { color: var(--primary-blue); }
nav a[aria-current="page"] { border-bottom: 2px solid var(--secondary-orange); }

.lang-switch { display: flex; gap: 5px; background: #eee; padding: 3px; border-radius: 20px; }
.lang-btn {
    border: none; background: none; padding: 5px 10px; border-radius: 15px;
    cursor: pointer; font-weight: bold; font-size: 12px; color: #555;
    transition: background-color 0.3s, color 0.3s;
}
.lang-btn.active { background: var(--primary-blue); color: #fff; }

/* Boutons */
.btn {
    display: inline-block; padding: 12px 25px; border-radius: 5px;
    text-decoration: none; font-weight: bold; margin: 5px;
}
.btn-orange { background: var(--secondary-orange); color: var(--dark-text); }
.btn-blue { background: var(--primary-blue); color: #fff; }

/* Bandeau de titre */
.page-hero {
    /* Photo propre à chaque page : définie par --hero-img / --hero-pos dans le CSS de la page */
    --hero-img: url('img2.jpeg');
    --hero-pos: center 34%;
    background: linear-gradient(rgba(10, 88, 202, 0.55), rgba(0, 0, 0, 0.6)), var(--hero-img) var(--hero-pos) / cover no-repeat;
    background-color: var(--primary-blue); /* repli si l'image ne charge pas */
    color: #fff;
    text-align: center;
    padding: 80px 20px;
}
.page-hero h1 { font-size: clamp(32px, 6vw, 44px); margin: 0 0 10px; line-height: 1.2; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.page-hero p { font-size: 20px; margin: 0 auto; max-width: 700px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }

/* Sections */
.container { max-width: 1200px; margin: 60px auto; padding: 0 20px; }
.section-title { color: var(--primary-blue); margin: 0 0 20px; }
.section-title.center { text-align: center; margin-bottom: 40px; }

.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 40px;
    align-items: center;
}
.split p { margin: 0 0 15px; max-width: 65ch; }
.split img { width: 100%; height: 360px; object-fit: cover; border-radius: 8px; background: #dde5f2; }

.band { background: var(--light-bg); padding: 1px 0; }

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 30px;
}
.card {
    border: 1px solid #ddd; border-radius: 8px; background: #fff;
    padding: 25px 20px; text-align: center;
}
.card h3 { color: var(--primary-blue); margin: 0 0 10px; }
.card p { margin: 0; }

.checklist { list-style: none; padding: 0; margin: 0 0 20px; }
.checklist li { padding: 8px 0 8px 28px; position: relative; }
.checklist li::before { content: "✔"; position: absolute; left: 0; color: var(--secondary-orange); font-weight: bold; }

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 20px;
}
.gallery img { width: 100%; height: 240px; object-fit: cover; border-radius: 8px; background: #dde5f2; }

.cta { text-align: center; background: var(--primary-blue); color: #fff; padding: 60px 20px; }
.cta h2 { margin: 0 0 10px; }
.cta p { margin: 0 auto 25px; max-width: 600px; }

/* Pied de page */
footer { background: #1a1a1a; color: #fff; padding: 40px 20px; text-align: center; }
footer a { color: var(--secondary-orange); }

@media (max-width: 600px) {
    .page-hero { padding: 60px 20px; }
    .split img { height: 240px; }
}

/* Nos actions */
.section-intro { text-align: center; max-width: 650px; margin: -20px auto 40px; }
.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 30px;
}
.action-card {
    background: #fff; border: 1px solid #ddd; border-radius: 8px;
    overflow: hidden; border-bottom: 4px solid var(--secondary-orange);
}
.action-card img { width: 100%; height: 190px; object-fit: cover; background: #dde5f2; }
.action-body { padding: 20px; }
.action-body h3 { color: var(--primary-blue); margin: 0 0 8px; }
.action-body p { margin: 0; }

/* Photos verticales : recadrage centré sur les visages */
.split img.pos-faces, .action-card img.pos-faces { object-position: center 40%; }