
:root{--navy:#112b49;--blue:#116a83;--aqua:#dff5f1;--bg:#f5f8fb;--ink:#1d3146;--line:#dbe6ee}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 system-ui,-apple-system,Segoe UI,Arial,sans-serif}a{color:#0d6684}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #ec8b52;outline-offset:2px}.wrap{width:min(1200px,calc(100% - 36px));margin:auto}.top{background:#102942;color:white;padding:13px 0}.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.top a{color:white;text-decoration:none}.top strong{letter-spacing:.07em}.hero{background:linear-gradient(125deg,#112c4c,#176b81 72%,#279a9d);color:white;padding:70px 0 66px}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:.79rem;font-weight:750;opacity:.87}.hero h1{font-size:clamp(2.3rem,5vw,4rem);line-height:1.13;max-width:850px;margin:15px 0}.hero p{max-width:760px;font-size:1.12rem;opacity:.95}.hero .metrics{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.pill{display:inline-block;border-radius:999px;padding:6px 14px;background:#ffffff24;border:1px solid #ffffff44}.searchbar{background:white;border:1px solid var(--line);box-shadow:0 12px 35px #16314d13;border-radius:18px;padding:20px;margin-top:-28px;position:relative}.searchbar label{display:block;font-weight:700;margin-bottom:8px}.searchbar input{width:100%;font:inherit;border:1px solid #b9cbd7;border-radius:11px;padding:13px 15px}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.filters button{font:inherit;cursor:pointer;border:1px solid #c6d8e1;background:#f4f8fa;border-radius:999px;padding:7px 12px;color:#173c54}.filters button.active{background:#163e5e;color:white;border-color:#163e5e}.sectionhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:42px 0 17px}.sectionhead h2{font-size:1.55rem;margin:0;color:var(--navy)}.sectionhead span{color:#557083}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.card{display:flex;flex-direction:column;text-decoration:none;background:white;border:1px solid var(--line);border-radius:15px;padding:22px;min-height:186px;box-shadow:0 4px 15px #142d4610;transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-3px);box-shadow:0 12px 25px #142d4620}.card small{color:#0d6b80;font-weight:750;letter-spacing:.035em}.card h3{font-size:1.18rem;line-height:1.32;color:var(--navy);margin:10px 0 6px}.card p{font-size:.94rem;color:#506578;margin:0 0 15px}.card .more{margin-top:auto;font-weight:700;color:#0b6885}.intro,.footnote{margin:35px 0;color:#4b6172}.footnote{border-top:1px solid var(--line);padding-top:20px}footer{background:#102942;color:#d8e6f0;margin-top:65px;padding:25px 0}footer a{color:white}#empty{padding:25px;border-radius:12px;background:white;border:1px solid var(--line)}@media(max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.hero{padding:45px 0 55px}.cards{grid-template-columns:1fr}.card{min-height:unset}.sectionhead{margin-top:32px}.wrap{width:min(100% - 24px,1200px)}}

/* Illustrations thematiques V2 */
.sectionhead{align-items:center;justify-content:flex-start;gap:14px}.sectionhead h2{flex:1}.section-visual{width:104px;height:58px;object-fit:cover;border-radius:10px;flex:none}.card{padding:0;overflow:hidden}.card-visual{display:block;width:100%;height:102px;object-fit:cover}.card small,.card h3,.card p,.card .more{margin-left:19px;margin-right:19px}.card small{margin-top:14px}.card .more{margin-bottom:18px}.card h3{margin-top:7px}.card p{margin-bottom:13px}@media(max-width:620px){.section-visual{width:78px;height:52px}.card-visual{height:120px}}

/* Version photo V3 : visuels voyage, logement, sante, emploi, etudes */
.hero-photo{background:linear-gradient(90deg,rgba(13,42,68,.98) 0%,rgba(13,42,68,.90) 42%,rgba(13,42,68,.2) 100%),url("photos/hero.jpg") center right / cover no-repeat;color:#fff}
.hero-photo .wrap{position:relative}.hero-photo h1{max-width:730px}.hero-photo p{max-width:690px}
.section-visual{width:120px;height:72px;object-fit:cover}.card-visual{height:145px;object-fit:cover}
.card:hover .card-visual{filter:saturate(1.12)}
@media(max-width:650px){.hero-photo{background:linear-gradient(90deg,rgba(13,42,68,.93),rgba(13,42,68,.74)),url("photos/hero.jpg") center/cover}.section-visual{width:86px;height:55px}.card-visual{height:150px}}

/* V4 : une seule photo par thématique, placée dans son en-tête */
.sectionhead .section-visual{display:block;object-fit:cover;flex-shrink:0}
.card .card-visual{display:none!important}
/* V6 : grands visuels éditoriaux, un seul par thématique */
.group .sectionhead{display:grid;grid-template-columns:300px minmax(0,1fr) auto;align-items:center;gap:24px;margin:48px 0 18px;padding:12px 22px 12px 12px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 5px 18px #142d4610}
.group .sectionhead .section-visual{width:300px;height:170px;border-radius:12px;object-fit:cover;display:block}
.group .sectionhead h2{font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.2;margin:0}
.group .sectionhead span{white-space:nowrap;font-weight:650}
@media(max-width:750px){.group .sectionhead{grid-template-columns:170px minmax(0,1fr);gap:14px;padding:10px}.group .sectionhead .section-visual{width:170px;height:120px}.group .sectionhead span{grid-column:2;white-space:normal}.group .sectionhead h2{align-self:end}}
@media(max-width:480px){.group .sectionhead{grid-template-columns:1fr;gap:8px;padding:10px}.group .sectionhead .section-visual{width:100%;height:190px}.group .sectionhead span{grid-column:1}.group .sectionhead h2{font-size:1.5rem}}
