/* Composition du site vitrine. Palette et typographie centralisées dans site.css. */
* { box-sizing: border-box; }
html { scroll-padding-top: 110px; }
body { margin: 0; }
main { min-height: 55vh; }
.container { width: min(100% - 3rem, 1240px); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 100; background: var(--smte-white); border-bottom: 1px solid var(--smte-border); }
.header-inner { min-height: 104px; display: flex; gap: 2rem; align-items: center; }
a { text-underline-offset: 5px; }
.brand { display: inline-flex; align-items: flex-start; flex-shrink: 0; max-width: 100%; text-decoration: none; background: var(--smte-white); }
.brand-logo { display: block; width: 200px; max-width: 100%; height: auto; }
.footer-brand { width: 264px; padding: 12px; border-radius: 2px; }
.footer-brand .brand-logo { width: 240px; }
.header-inner nav { margin-left: auto; }
.site-menu { --rz-menu-background-color: var(--smte-white); --rz-menu-top-item-padding-inline: .8rem; --rz-menu-top-item-color: var(--smte-ink); }
.site-menu .rz-navigation-item-text { font-size: .9rem; font-weight: 600; }
.site-menu .rz-menu-toggle { color: var(--smte-ink); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 1.2rem; padding: .95rem 1.35rem; min-height: 48px; background: var(--smte-accent); color: var(--smte-white); text-decoration: none; border: 1px solid var(--smte-accent); border-radius: 2px; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.button:hover { background: var(--smte-primary-dark); border-color: var(--smte-primary-dark); color: var(--smte-white); }
.button.light { color: var(--smte-primary); background: var(--smte-white); border-color: var(--smte-white); }
.button.light:hover { color: var(--smte-primary-dark); background: var(--smte-primary-lighter); border-color: var(--smte-primary-lighter); }
.header-quote { white-space: nowrap; font-size: .8rem; }
:focus-visible { outline: 3px solid var(--smte-focus); outline-offset: 5px; }
.site-footer :focus-visible, .home-hero :focus-visible, .project-band :focus-visible { outline-color: var(--smte-white); }
.skip-link { position: fixed; left: 1rem; top: -100px; z-index: 200; padding: 1rem; background: var(--smte-white); }
.skip-link:focus { top: 1rem; }
h1, h2, h3 { color: var(--smte-ink); font-weight: 700; line-height: 1.1; letter-spacing: -.04em; }
h1 { font-size: clamp(2.7rem, 5.5vw, 5rem); margin: 0 0 1.8rem; }
h2 { font-size: clamp(2rem, 3.4vw, 3.2rem); margin: 0 0 1.5rem; }
h3 { font-size: 1.5rem; margin: 0 0 1rem; }
p { line-height: 1.8; margin: 0 0 1.3rem; }
.eyebrow { font-size: .72rem; letter-spacing: .15em; font-weight: 700; margin-bottom: 1.5rem; color: var(--smte-primary); }
.home-hero { position: relative; isolation: isolate; min-height: 680px; display: flex; align-items: center; background: var(--smte-ink); color: var(--smte-white); }
.hero-media { position: absolute; inset: 0; z-index: -2; display: block; }
.hero-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; }
.home-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(15 20 24 / 82%), rgb(15 20 24 / 42%) 50%, rgb(15 20 24 / 10%)); }
.hero-content { padding-block: 5rem 8rem; }
.home-hero h1 { color: var(--smte-white); font-size: clamp(3.4rem, 6.8vw, 6.2rem); line-height: 1.01; max-width: 13ch; }
.home-hero .eyebrow, .project-band .eyebrow { color: var(--smte-white); }
.hero-lead { font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.7; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 2rem; margin-top: 2rem; }
.discover { color: var(--smte-white); padding-block: .8rem; }
.discover:hover { color: var(--smte-white); }
.hero-bottom { position: absolute; bottom: 1.5rem; left: 0; right: 0; display: flex; justify-content: space-between; gap: 2rem; font-size: .65rem; letter-spacing: .08em; }
.audience-strip { border-bottom: 1px solid var(--smte-border); }
.audience-strip > div { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: 1.5rem; font-size: .8rem; }
.audience-strip span:first-child { font-weight: 700; font-size: .7rem; letter-spacing: .06em; }
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section-heading { display: grid; grid-template-columns: 1.15fr 1fr; gap: 4rem; align-items: end; margin-bottom: 2.5rem; }
.section-heading p { max-width: 48ch; }
.activity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.activity-card { border: 1px solid var(--smte-border); padding: 0; position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.activity-card:hover, .activity-card:focus-within { background: var(--smte-primary-lighter); border-color: var(--smte-primary); }
.number { display: block; font-size: .7rem; letter-spacing: .12em; color: var(--smte-muted); margin-bottom: .8rem; }
.activity-card-visual { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .7rem; aspect-ratio: 8 / 5; min-height: 0; background: var(--smte-paper); border-bottom: 1px solid var(--smte-border); color: var(--smte-muted); font-size: .75rem; }
.activity-card-visual .rzi { font-size: 2.25rem; color: var(--smte-primary); }
/* Cadres uniformes pour les cartes ; les fichiers source ne sont pas recadrés. */
.activity-card-media { display: block; aspect-ratio: 8 / 5; overflow: hidden; border-bottom: 1px solid var(--smte-border); background: var(--smte-paper); }
.activity-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.activity-media { margin: 0; min-width: 0; }
.activity-media picture { display: block; }
.activity-detail-image { display: block; width: 100%; height: auto; }
.activity-media figcaption { color: var(--smte-muted); font-size: .75rem; padding-block: .6rem; }
/* Les pages métier montrent le visuel complet sur une largeur généreuse. */
.activity-media-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.activity-media-section > .activity-media { width: 100%; max-width: 1120px; margin-inline: auto; }
.activity-media-section > div { width: 100%; max-width: 900px; margin-inline: auto; }
.activity-card-copy { display: flex; flex: 1; flex-direction: column; padding: 1.6rem; }
.activity-card h3 { font-size: 1.5rem; }
.activity-card p { font-size: .95rem; color: var(--smte-muted); }
.activity-card a { color: var(--smte-link); font-size: .85rem; font-weight: 600; margin-top: auto; padding-block: .5rem; }
.activity-card a:hover { color: var(--smte-link-hover); }
.activity-card a::after { content: ''; position: absolute; inset: 0; }
.activity-card a span[aria-hidden] { margin-left: 1rem; }
/* Emplacements explicites, sans photographie attribuée à tort à SMTE. */
.activity-visual { min-height: 360px; padding: 2rem; border: 1px solid var(--smte-border); background: var(--smte-paper); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 1rem; color: var(--smte-muted); }
.activity-visual .rzi { font-size: 3rem; color: var(--smte-primary); }
.activity-visual > span { font-size: 1.3rem; color: var(--smte-ink); }
.activity-visual small { font-size: .8rem; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .85rem; margin-bottom: 2rem; }
.breadcrumbs a { color: var(--smte-link); }
.breadcrumbs a:hover { color: var(--smte-link-hover); }
.site-menu .rz-navigation-menu { min-width: 245px; }
.site-menu .rz-navigation-menu .rz-navigation-item-link { white-space: normal; min-height: 44px; }
.site-menu .rz-navigation-item:focus-visible { outline: 3px solid var(--smte-focus); outline-offset: -3px; }
.site-menu .rz-state-focused > .rz-navigation-item-wrapper { outline: 3px solid var(--smte-focus); outline-offset: -3px; }
.paper, .page-hero { background: var(--smte-paper); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.intro { font-size: 1.2rem; max-width: 58ch; }
.text-link { display: inline-block; padding-block: .6rem; color: var(--smte-link); font-weight: 600; }
.text-link:hover { color: var(--smte-link-hover); }
.editorial-panel { background: var(--smte-ink); color: var(--smte-white); padding: clamp(2rem, 4vw, 4rem); min-height: 410px; }
.editorial-panel h3 { color: var(--smte-white); font-size: clamp(2.3rem, 4vw, 3.5rem); margin-top: 2.5rem; }
.panel-index, .panel-foot { font-size: .7rem; letter-spacing: .13em; }
.panel-foot { display: block; padding-top: 1.5rem; }
.project-band { background: var(--smte-ink); color: var(--smte-white); padding-block: 4rem; }
.project-band h2 { color: var(--smte-white); }
.project-band p:last-child { margin-bottom: 0; }
.project-inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.project-inner .button { flex-shrink: 0; }
.page-hero { padding-block: clamp(3rem, 6vw, 5.5rem); border-bottom: 1px solid var(--smte-border); }
.page-hero .intro { margin-bottom: 0; }
.breadcrumb { display: inline-block; color: var(--smte-muted); font-size: .85rem; margin-bottom: 2rem; }
.stack article { border-top: 1px solid var(--smte-border); padding-top: 1.5rem; }
.scope-panel { padding: 2.5rem; background: var(--smte-paper); }
.scope-panel h2 { font-size: 1.65rem; }
li { line-height: 1.7; margin-bottom: .8rem; }
ul { padding-left: 1.3rem; }
.empty-state { padding: 3rem; border: 1px solid var(--smte-border); max-width: 850px; margin: auto; }
.empty-state .rzi { font-size: 2.5rem; color: var(--smte-primary); margin-bottom: 1.5rem; }
.empty-state h2 { font-size: 2rem; }
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; align-items: start; }
.contact-note { padding: 1.5rem; border-left: 3px solid var(--smte-accent); background: var(--smte-paper); margin-block: 2rem; }
.contact-note h3 { font-size: 1.2rem; }
.contact-note p { margin-bottom: 0; }
.form-panel { border: 1px solid var(--smte-border); padding: 2rem; }
.form-panel h2 { font-size: 1.8rem; }
.form-panel p { font-size: .9rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .5rem; }
input, select, textarea { width: 100%; border: 1px solid var(--smte-border); background: var(--smte-white); color: var(--smte-ink); border-radius: 2px; padding: .8rem; font: inherit; margin-bottom: 1.3rem; min-height: 46px; }
textarea { resize: vertical; }
.invalid { border-color: #a52222; }
.validation-message, .validation-errors { color: #a52222; }
.small { font-size: .8rem; color: var(--smte-muted); }
.download-result { margin-top: 2rem; padding: 1.5rem; background: var(--smte-paper); overflow-wrap: anywhere; }
[hidden] { display: none !important; }
.site-footer { background: var(--smte-ink); border-top: 1px solid var(--smte-muted); color: var(--smte-white); padding-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; }
.site-footer a, .site-footer h2 { color: var(--smte-white); }
.site-footer a:hover { color: var(--smte-white); }
.site-footer h2 { font-size: 1rem; letter-spacing: 0; }
.footer-grid > div > a:not(.brand) { display: block; padding-block: .6rem; font-size: .9rem; }
.footer-lead { margin-top: 1.5rem; font-size: 1.3rem; line-height: 1.5; }
.footer-grid p:not(.footer-lead) { font-size: .85rem; }
.footer-bottom { margin-top: 3rem; padding-block: 1.5rem; border-top: 1px solid var(--smte-muted); display: flex; justify-content: space-between; gap: 1rem; font-size: .75rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1100px) {
 .header-inner { gap: 1.2rem; }
 .activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .header-quote { padding: .8rem; }
 .site-menu .rz-navigation-item-text { font-size: .8rem; }
 .site-menu { --rz-menu-top-item-padding-inline: .5rem; }
}
@media (max-width: 1250px) {
 .header-inner { min-height: 86px; flex-wrap: wrap; padding-block: 1rem; gap: .6rem 1rem; }
 .header-inner nav { order: 3; flex-basis: 100%; margin: 0; }
 .header-quote { margin-left: auto; }
 .site-menu .rz-menu-toggle { display: inline-flex; min-width: 44px; min-height: 44px; }
 .site-menu:not(.rz-menu-open) > .rz-navigation-item { display: none; }
 .site-menu.rz-menu-open { flex-direction: column; align-items: stretch; }
 .site-menu.rz-menu-open { max-height: calc(100dvh - 130px); overflow-y: auto; }
 .site-menu .rz-navigation-menu { position: static !important; width: 100%; min-width: 0; box-shadow: none; padding-inline-start: .7rem; }
 .site-menu .rz-navigation-item-text { font-size: 1rem; }
 .section-heading, .contact-grid { gap: 2rem; }
 .hero-bottom { font-size: .6rem; }
 .audience-strip > div { flex-wrap: wrap; }
}
@media (max-width: 639px) {
 html { scroll-padding-top: 155px; }
 .container { width: calc(100% - 2rem); }
 .header-inner .brand-logo { width: clamp(100px, 30vw, 150px); }
 .home-hero { min-height: 620px; }
 .hero-content { padding-block: 3rem 7rem; }
 .hero-bottom > span { max-width: 45%; }
 .hero-bottom { gap: 1rem; }
 .section-heading, .split, .contact-grid, .footer-grid, .form-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
 .activity-grid { grid-template-columns: minmax(0, 1fr); }
 .activity-card { min-height: 280px; }
 .activity-visual { min-height: 260px; }
 .project-inner, .footer-bottom { flex-direction: column; align-items: flex-start; }
 .form-panel, .empty-state, .scope-panel { padding: 1.5rem; }
 .form-grid { gap: 0; }
 .actions { gap: 1rem; align-items: flex-start; flex-direction: column; }
 .audience-strip > div { gap: .8rem 1.5rem; }
 .audience-strip span:first-child { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Sur tablette et mobile, la scène entière reste visible et le texte passe dessous. */
@media (max-width: 900px) {
 .home-hero { display: block; min-height: 0; }
 .hero-media { position: relative; inset: auto; z-index: 0; }
 .hero-photo { height: auto; object-fit: contain; object-position: center; }
 .home-hero::after { display: none; }
 .hero-content { padding-block: 2.5rem 5rem; }
}