:root {
--color-brand: #2B4C5E;
--color-cta: #0E8388;
--color-bg: #E3EBEF;
--color-card: #FFFFFF;
--color-text: #22323C;
--color-muted: #7A8B94;
}

html, body {
overflow-x: hidden;
}

*, *::before, *::after {
box-sizing: border-box;
}

img, video, iframe, svg, canvas {
max-width: 100%;
height: auto;
}

.page-content {
margin-left: 260px;
background-color: #E3EBEF;
color: #22323C;
min-height: 100vh;
padding: 0 clamp(32px, 5vw, 64px) 96px;
overflow-wrap: break-word;
word-wrap: break-word;
}

.page-content h1,
.page-content h2,
.page-content h3,
.page-content p,
.page-content li,
.page-content td,
.page-content th,
.page-content time,
.page-content span,
.page-content label,
.page-content strong,
.page-content a {
font-family: inherit;
line-height: 1.65;
}

.page-content h1,
.page-content h2,
.page-content h3 {
font-weight: 700;
}

.page-content p,
.page-content li,
.page-content td {
font-weight: 400;
}

.hero-pt {
position: relative;
min-height: 45vh;
padding-top: 72px;
padding-bottom: 72px;
background-color: #2B4C5E;
background-image: url('/images/hero-projets-travaux.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
}

.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.55);
}

.hero-inner {
position: relative;
z-index: 2;
max-width: 900px;
padding: 0 24px;
text-align: center;
}

.hero-inner h1 {
font-size: clamp(44px, 6vw, 76px);
font-weight: 700;
color: #FFFFFF;
max-width: 15ch;
margin: 0 auto 16px;
font-family: 'Arial Black', 'Segoe UI Black', 'Arial Bold', 'Helvetica Neue', sans-serif;
}

.hero-inner h1, .hero-inner p {
line-height: 1.65;
}

.hero-sub {
font-size: 17px;
color: #FFFFFF;
max-width: 62ch;
margin: 0 auto;
}

.section-inner {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}

.section-inner h2 {
font-size: clamp(28px, 3.4vw, 42px);
color: #2B4C5E;
font-family: 'Arial Black', 'Segoe UI Black', 'Arial Bold', 'Helvetica Neue', sans-serif;
margin: 0 0 12px;
}

.section-desc {
font-size: 17px;
color: #22323C;
max-width: 68ch;
margin: 0 0 28px;
}

.section-rule {
border: none;
border-top: 2px solid #2B4C5E;
margin: 96px auto;
max-width: 1100px;
}

.form-svg {
margin-bottom: 20px;
}

.form-svg svg {
display: block;
}

.articles-block {
padding-top: 72px;
}

.articles-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 32px;
}

.article-card {
background-color: #FFFFFF;
border: 2px solid #2B4C5E;
border-radius: 0;
padding: 28px;
box-shadow: 6px 6px 0 rgba(43, 76, 94, 0.15);
min-width: 0;
overflow: hidden;
}

.article-img {
width: 100%;
height: auto;
display: block;
border: 2px solid #2B4C5E;
border-radius: 0;
filter: grayscale(1) contrast(1.05);
margin-bottom: 16px;
}

.article-meta {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #7A8B94;
margin: 0 0 8px;
}

.article-title {
font-size: 20px;
font-weight: 700;
color: #2B4C5E;
margin: 0 0 10px;
}

.article-title a {
color: #2B4C5E;
text-decoration: none;
border-bottom: 2px solid #2B4C5E;
transition: color 0.2s;
}

.article-title a:hover {
color: #22323C;
}

.article-excerpt {
font-size: 16px;
color: #22323C;
margin: 0;
}

.content-block {
padding-top: 64px;
}

.prose-col {
max-width: 720px;
margin-left: auto;
margin-right: auto;
padding: 0 clamp(8px, 2vw, 24px);
}

.prose-col p {
font-size: 17px;
color: #22323C;
margin: 0 0 20px;
}

.big-stat {
font-size: clamp(56px, 7vw, 104px);
font-weight: 700;
color: #2B4C5E;
font-family: 'Arial Black', 'Segoe UI Black', 'Arial Bold', 'Helvetica Neue', sans-serif;
line-height: 1;
display: inline-block;
vertical-align: baseline;
}

.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}

.data-table {
width: 100%;
border-collapse: collapse;
background-color: #FFFFFF;
border: 2px solid #2B4C5E;
}

.data-table th {
background-color: #2B4C5E;
color: #FFFFFF;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
text-align: left;
padding: 12px 14px;
}

.data-table td {
font-size: 16px;
color: #22323C;
padding: 12px 14px;
border-bottom: 1px solid #ddd;
}

.data-table tbody tr:nth-child(even) td {
background-color: #E3EBEF;
}

.cta-line {
text-align: center;
margin-top: 32px;
}

.btn-cta {
display: inline-block;
background-color: #0E8388;
color: #FFFFFF;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
padding: 14px 28px;
border-radius: 0;
box-shadow: 4px 4px 0 rgba(34, 50, 60, 0.2);
transition: background-color 0.2s, box-shadow 0.2s;
}

.btn-cta:hover,
.btn-cta:focus-visible {
background-color: #0B6C70;
box-shadow: 2px 2px 0 rgba(34, 50, 60, 0.2);
color: #FFFFFF;
}

a:focus-visible,
.btn-cta:focus-visible {
outline: 2px solid #2B4C5E;
outline-offset: 2px;
}

@media (max-width: 900px) {
.page-content {
margin-left: 0;
padding: 24px 24px 64px;
}

.section-rule {
margin: 64px auto;
}

.hero-pt {
min-height: 40vh;
padding-top: 48px;
padding-bottom: 48px;
}

.hero-inner h1 {
font-size: clamp(32px, 8vw, 44px);
}

.articles-block,
.content-block {
padding-top: 48px;
}
}

@media (max-width: 480px) {
.page-content {
padding: 16px 16px 48px;
}

.hero-inner {
padding: 0 16px;
}

.hero-sub {
font-size: 16px;
}

.articles-grid {
grid-template-columns: 1fr;
gap: 20px;
}

.article-card {
padding: 20px;
}

.section-inner h2 {
font-size: 28px;
}

.section-desc {
font-size: 16px;
}

.prose-col p {
font-size: 16px;
}

.data-table th,
.data-table td {
font-size: 14px;
padding: 10px;
}
}