/* Identité web CCDSM — complément au thème éditorial */
:root {
  --blue: #0c6682;
  --blue-dark: #123f4d;
  --blue-soft: #e5f0f2;
  --green: #5f8f43;
  --green-dark: #416d32;
  --green-soft: #eaf1e5;
  --yellow: #f1d51a;
  --yellow-soft: #fff7bd;
  --ink: #17272e;
  --muted: #5d6a6f;
  --paper: #f1efe7;
  --cream: #fbfaf5;
  --white: #fff;
  --line: #dcded7;
  --shadow: 0 22px 60px rgba(18, 63, 77, .10);
}

body { background: var(--cream); color: var(--ink); }

.site-header {
  background: rgba(251,250,245,.97);
  border-bottom: 1px solid rgba(18,63,77,.10);
}
.header-inner { min-height: 92px; gap: 1.5rem; }
.brand { min-width: 0; flex: 0 0 auto; }
.brand-logo { width: clamp(185px, 19vw, 255px); height: auto; }
.header-actions { gap: 1rem; }
.nav-list { gap: clamp(.72rem, 1.4vw, 1.2rem); }
.nav-list a { font-size: .86rem; color: #31434b; }
.header-cta { background: var(--yellow); box-shadow: 0 7px 18px rgba(241,213,26,.22); }

.home-hero {
  padding: clamp(3.7rem, 7vw, 6.8rem) 0 clamp(3.4rem, 6vw, 5.8rem);
  background:
    linear-gradient(120deg, rgba(12,102,130,.055), transparent 42%),
    radial-gradient(circle at 93% 13%, rgba(241,213,26,.22), transparent 16rem),
    var(--cream);
  border-bottom: 0;
}
.home-hero::after {
  content: "";
  display: block;
  width: min(1180px, calc(100% - 40px));
  height: 7px;
  margin: clamp(3.2rem, 6vw, 5.4rem) auto 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--blue) 0 52%, var(--green) 52% 91%, var(--yellow) 91%);
  transform: rotate(-.35deg);
}
.home-hero__grid { grid-template-columns: minmax(0,1.1fr) minmax(330px,.9fr); }
.home-hero h1,
.section-heading h2,
.association-section h2,
.join-panel h2,
.archive-heading h1,
.page-hero h1 {
  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  font-weight: 850;
  letter-spacing: -.045em;
}
.home-hero h1 { max-width: 12ch; font-size: clamp(3rem,5.4vw,5.25rem); line-height: .94; }
.home-hero__lead { max-width: 660px; color: #42565e; font-size: clamp(1.06rem,1.55vw,1.28rem); }
.hero-kicker { display: inline-flex; align-items: center; gap: .6rem; font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; color: var(--blue-dark); }
.hero-kicker::before { content:""; width: 12px; height: 12px; border-radius: 50%; background: var(--yellow); }
.slogan-line { border-top-color: rgba(18,63,77,.16); color: var(--green-dark); }
.button { background: var(--blue-dark); }
.button-secondary { background: var(--green-dark); }

.manifesto-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem,4vw,3.2rem);
  border-radius: 30px;
  background: var(--blue-dark);
  color: #fff;
  box-shadow: var(--shadow);
}
.manifesto-panel::before {
  content:"";
  position:absolute;
  width:240px;
  height:70px;
  right:-35px;
  top:26px;
  opacity:.18;
  background: repeating-linear-gradient(-18deg, transparent 0 10px, var(--yellow) 11px 16px);
  transform: rotate(-7deg);
}
.manifesto-panel > * { position: relative; z-index: 1; }
.manifesto-panel__label { color: var(--yellow); font-size:.72rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.manifesto-panel h2 { max-width: 12ch; margin:.7rem 0 1.35rem; font-size:clamp(1.9rem,3vw,3rem); line-height:1; }
.manifesto-list { display:grid; gap:.8rem; }
.manifesto-list div { padding-top:.8rem; border-top:1px solid rgba(255,255,255,.16); display:grid; grid-template-columns:28px 1fr; gap:.7rem; align-items:start; }
.manifesto-list span { color:var(--yellow); font-weight:900; }
.manifesto-list strong { display:block; }
.manifesto-list p { margin:.15rem 0 0; color:#d8e5e8; font-size:.9rem; }

.principles-strip { background: var(--paper); border-block:1px solid var(--line); }
.principles-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.principle { padding:1.55rem 1.4rem; border-right:1px solid var(--line); }
.principle:first-child { padding-left:0; }
.principle:last-child { border-right:0; }
.principle b { display:block; margin-bottom:.22rem; color:var(--blue-dark); font-size:.93rem; }
.principle span { color:var(--muted); font-size:.83rem; }
.principle i { display:block; width:30px; height:5px; margin-bottom:.75rem; border-radius:9px; background:var(--yellow); transform:rotate(-4deg); }
.principle:nth-child(2) i, .principle:nth-child(4) i { background:var(--green); }

.section-heading h2 { font-size:clamp(2.2rem,4vw,3.7rem); }
.featured-story, .post-card { border-color:rgba(18,63,77,.13); }
.post-card h3, .featured-story h2 { font-family:"Avenir Next",Avenir,"Segoe UI",system-ui,sans-serif; font-weight:800; letter-spacing:-.025em; }

.story-section { background:var(--blue-dark); color:#fff; }
.story-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2.5rem,7vw,7rem); align-items:start; }
.story-section .eyebrow { color:var(--yellow); }
.story-section h2 { max-width:12ch; margin:.35rem 0 0; font-size:clamp(2.3rem,4.4vw,4.1rem); line-height:.98; }
.story-copy { max-width:680px; color:#d9e5e8; font-size:1.06rem; }
.story-copy strong { color:#fff; }
.story-copy .text-link { color:var(--yellow); }

.actions-teaser { background:var(--cream); }
.action-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.action-tile { min-height:210px; padding:1.45rem; border:1px solid var(--line); border-radius:22px; background:#fff; }
.action-tile:nth-child(2) { background:var(--green-soft); }
.action-tile:nth-child(3) { background:var(--blue-soft); }
.action-tile:nth-child(4) { background:var(--yellow-soft); }
.action-tile span { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--blue-dark); color:#fff; font-size:.78rem; font-weight:900; }
.action-tile h3 { margin:1.15rem 0 .45rem; font-size:1.22rem; }
.action-tile p { color:#58676d; font-size:.92rem; }

.transparency-panel { display:grid; grid-template-columns:1.15fr .85fr; overflow:hidden; border-radius:28px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); }
.transparency-copy { padding:clamp(2rem,4vw,3.2rem); }
.transparency-copy h2 { margin:.35rem 0 1rem; font-size:clamp(2rem,3.4vw,3.2rem); line-height:1; }
.transparency-numbers { display:grid; grid-template-columns:repeat(2,1fr); background:var(--paper); }
.transparency-numbers div { display:flex; flex-direction:column; justify-content:center; padding:1.7rem; border:1px solid rgba(18,63,77,.08); }
.transparency-numbers strong { color:var(--blue-dark); font-size:clamp(1.55rem,3vw,2.5rem); line-height:1; }
.transparency-numbers span { margin-top:.35rem; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }

.page-hero { padding:clamp(3rem,6vw,5.5rem) 0 2.6rem; background:linear-gradient(130deg,var(--paper),var(--cream)); border-bottom:1px solid var(--line); }
.page-hero h1 { max-width:13ch; margin:.45rem 0 1rem; font-size:clamp(2.8rem,5vw,4.8rem); line-height:.95; }
.page-hero p { max-width:720px; color:#4b5e65; font-size:1.1rem; }
.page-section { padding:clamp(3rem,6vw,5.2rem) 0; }
.page-section--paper { background:var(--paper); border-block:1px solid var(--line); }
.prose-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2.5rem,7vw,7rem); align-items:start; }
.prose-grid h2 { margin:0; font-size:clamp(2rem,3.5vw,3.2rem); line-height:1; }
.prose { max-width:720px; color:#485b62; font-size:1.04rem; }
.prose h3 { margin:1.7rem 0 .5rem; color:var(--ink); }
.values-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.value-card { padding:1.6rem; border-radius:22px; background:#fff; border:1px solid var(--line); }
.value-card:nth-child(2n) { background:var(--green-soft); }
.value-card h3 { margin:.35rem 0 .55rem; }
.value-card p { margin:0; color:#56666c; }
.value-card .value-no { color:var(--yellow); font-weight:950; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.stat-card { padding:1.6rem; border-radius:20px; background:#fff; border:1px solid var(--line); }
.stat-card strong { display:block; color:var(--blue-dark); font-size:2rem; line-height:1; }
.stat-card span { display:block; margin-top:.45rem; color:var(--muted); }
.timeline { display:grid; gap:0; max-width:820px; }
.timeline-item { display:grid; grid-template-columns:110px 1fr; gap:1.4rem; padding:1.45rem 0; border-top:1px solid var(--line); }
.timeline-item time { color:var(--green-dark); font-weight:900; }
.timeline-item h3 { margin:0 0 .35rem; }
.timeline-item p { margin:0; color:var(--muted); }

.site-footer { background:#0e333e; }
.footer-brand { color:#fff; }
.footer-tagline { color:#b7ccd0; }
.footer-links a { color:#dce8ea; }
.footer-bottom { color:#93adb3; border-top-color:rgba(255,255,255,.12); }

@media (max-width: 1080px) {
  .header-inner { align-items:flex-start; padding-block:.8rem; }
  .header-actions { flex:1; justify-content:flex-end; flex-wrap:wrap; }
  .nav-list { flex-wrap:wrap; justify-content:flex-end; }
  .home-hero__grid { grid-template-columns:1fr; }
  .manifesto-panel { max-width:760px; }
  .principles-grid, .action-grid { grid-template-columns:repeat(2,1fr); }
  .transparency-panel { grid-template-columns:1fr; }
}
@media (max-width: 760px) {
  .site-shell { width:min(calc(100% - 28px),var(--max)); }
  .header-inner { min-height:auto; align-items:center; }
  .brand-logo { width:165px; }
  .main-nav { display:none; }
  .header-cta { min-height:38px; }
  .home-hero { padding-top:2.8rem; }
  .home-hero h1 { font-size:clamp(2.75rem,13vw,4rem); }
  .principles-grid, .action-grid, .values-grid, .stat-grid { grid-template-columns:1fr; }
  .principle { padding:1.1rem 0; border-right:0; border-bottom:1px solid var(--line); }
  .principle:last-child { border-bottom:0; }
  .story-grid, .prose-grid { grid-template-columns:1fr; gap:1.8rem; }
  .timeline-item { grid-template-columns:1fr; gap:.35rem; }
  .transparency-numbers { grid-template-columns:1fr 1fr; }
}