/* ACEE — feuille de styles du site, fidèle au prototype Claude Design v2 */
:root {
  --ink: #22252A;
  --paper: #F7F6F4;
  --white: #FFFFFF;
  --orange: #EE6C2B;
  --red: #E1332F;
  --blue: #3C6E8F;
  --blue-light: #5E8CAD;
  --gray: #6E7681;
  --gray-mid: #9AA0A8;
  --gray-soft: #C4C8CD;
  --border: #E2DFDA;
  --border-strong: #C9C5BF;
  --text: #3E4348;
  --text-soft: #4A4F56;
  --text-muted: #5A6068;
  --dark-line: #3A3E45;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'IBM Plex Sans', sans-serif;
  --head: 'Archivo', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--ink); }
img { max-width: 100%; }
.wrap { padding-left: 56px; padding-right: 56px; }
@media (max-width: 980px) { .wrap { padding-left: 24px; padding-right: 24px; } }

@keyframes acee-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); color: var(--paper); padding: 18px 56px; display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.brand { flex: none; display: inline-flex; align-items: center; gap: .42em; font-size: 28px; color: var(--paper); }
.brand:hover { color: var(--paper); }
.brand-bars { display: flex; gap: .055em; height: .84em; }
.brand-bars i { width: .115em; }
.brand-bars i:nth-child(1) { background: var(--gray-mid); }
.brand-bars i:nth-child(2) { background: var(--orange); }
.brand-bars i:nth-child(3) { background: var(--red); }
.brand-bars i:nth-child(4) { background: var(--blue-light); }
.brand-word { font: 900 1em/.78 'Nunito', sans-serif; letter-spacing: -.045em; }
.site-nav { flex: none; display: flex; align-items: center; gap: 16px; font: 600 11.5px var(--sans); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.site-nav a { color: var(--paper); padding-bottom: 3px; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a.active { border-bottom-color: var(--orange); color: var(--paper); }
.site-nav .nav-cta { background: var(--orange); color: var(--ink); font-weight: 700; padding: 11px 16px; border-bottom: none; }
.site-nav .nav-cta:hover { background: var(--paper); color: var(--ink); }
.nav-toggle { display: none; background: none; border: 1px solid var(--dark-line); color: var(--paper); font: 700 12px var(--head); letter-spacing: .06em; text-transform: uppercase; padding: 9px 14px; cursor: pointer; }
@media (max-width: 980px) {
  .site-header { padding: 14px 24px; flex-wrap: wrap; }
  .nav-toggle { display: block; }
  .site-nav { display: none; flex-direction: column; align-items: flex-start; width: 100%; gap: 0; padding-top: 12px; }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--dark-line); width: 100%; }
  .site-nav .nav-cta { margin-top: 12px; text-align: center; padding: 13px 16px; }
}

/* ---------- Hero (accueil) ---------- */
.hero { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; }
.hero-veil { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(24,26,30,.94) 0%, rgba(24,26,30,.82) 45%, rgba(24,26,30,.25) 100%); pointer-events: none; }
.hero-inner { position: relative; padding: 72px 56px 0; max-width: 820px; }
.hero-kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.kicker-bars { display: flex; gap: 5px; height: 16px; flex: none; }
.kicker-bars i { width: 5px; }
.kicker-bars i:nth-child(1) { background: var(--gray-mid); }
.kicker-bars i:nth-child(2) { background: var(--orange); }
.kicker-bars i:nth-child(3) { background: var(--red); }
.kicker-bars i:nth-child(4) { background: var(--blue-light); }
.hero-kicker span { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--gray-soft); }
.hero h1 { font: 800 58px/1.03 var(--head); letter-spacing: -.03em; text-wrap: balance; margin: 0; }
.hero-sub { font-size: 18px; line-height: 1.55; color: #DDE0E3; margin-top: 22px; max-width: 600px; }
.hero-actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.hero-strip { position: relative; margin-top: 56px; border-top: 1px solid rgba(247,246,244,.18); display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.hero-strip > div { padding: 22px 24px; border-right: 1px solid rgba(247,246,244,.18); }
.hero-strip > div:first-child { padding-left: 56px; }
.hero-strip > div:last-child { border-right: none; }
.hero-strip b { font: 700 15px var(--head); display: block; }
.hero-strip small { font-size: 13px; color: var(--gray-mid); margin-top: 4px; display: block; }
@media (max-width: 980px) {
  .hero-inner { padding: 48px 24px 0; }
  .hero h1 { font-size: 38px; }
  .hero-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero-strip > div:first-child { padding-left: 24px; }
}

/* ---------- Boutons ---------- */
.btn { display: inline-block; cursor: pointer; font: 700 15px var(--head); padding: 18px 28px; border: none; }
.btn-orange { background: var(--orange); color: var(--ink); }
.btn-orange:hover { background: var(--paper); color: var(--ink); }
.btn-ghost-light { border: 1px solid var(--paper); color: var(--paper); background: transparent; }
.btn-ghost-light:hover { background: var(--paper); color: var(--ink); }
.btn-dark { background: var(--ink); color: var(--paper); font-size: 14px; padding: 16px 24px; }
.btn-dark:hover { background: var(--dark-line); color: var(--paper); }
.btn-ghost-dark { border: 1px solid var(--ink); color: var(--ink); background: transparent; font-size: 14px; padding: 16px 24px; }
.btn-ghost-dark:hover { background: var(--ink); color: var(--paper); }

/* ---------- Cartes métiers (accueil) ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); background: var(--paper); border-bottom: 1px solid var(--border); }
.tile { padding: 40px 32px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; color: var(--ink); }
.tile:last-child { border-right: none; }
.tile:hover { background: var(--white); color: var(--ink); }
.tile .bar { width: 44px; height: 5px; }
.tile h3 { font: 700 20px/1.2 var(--head); margin: 0; }
.tile p { font-size: 14px; line-height: 1.6; color: var(--text-soft); margin: 0; }
.tile .more { font: 700 13px var(--head); color: var(--orange); margin-top: auto; }
@media (max-width: 980px) { .tiles { grid-template-columns: repeat(2, minmax(0,1fr)); } .tile { border-bottom: 1px solid var(--border); } }
@media (max-width: 640px) { .tiles { grid-template-columns: 1fr; } }

/* ---------- Bandeau chiffres ---------- */
.stats { background: var(--ink); color: var(--paper); padding: 56px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 40px; }
.stats b { font: 800 40px/1 var(--head); letter-spacing: -.02em; display: block; }
.stats small { font-size: 14px; color: var(--gray-mid); margin-top: 10px; display: block; }
@media (max-width: 980px) { .stats { grid-template-columns: repeat(2, minmax(0,1fr)); padding: 40px 24px; } }

/* ---------- Sections ---------- */
.section { padding: 56px; }
@media (max-width: 980px) { .section { padding: 40px 24px; } }
.section-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--ink); padding-bottom: 14px; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; }
.section-head h2 { font: 700 24px var(--head); letter-spacing: -.01em; margin: 0; }
.section-head a { font: 700 13px var(--head); }

.page-title { font: 800 38px/1.1 var(--head); letter-spacing: -.025em; margin: 0; }
.page-intro { font-size: 16px; line-height: 1.6; color: var(--text); margin-top: 16px; max-width: 680px; }

/* ---------- Cartes références ---------- */
.ref-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
@media (max-width: 980px) { .ref-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .ref-grid { grid-template-columns: 1fr; } }
.ref-card { background: var(--white); border: 1px solid var(--border); color: var(--ink); display: flex; flex-direction: column; }
.ref-card:hover { border-color: var(--ink); color: var(--ink); }
.ref-photo { height: 190px; background: repeating-linear-gradient(135deg, #D6D2CC 0 12px, #E2DFD9 12px 24px); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; color: #8A8F96; text-align: center; line-height: 1.7; }
.ref-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ref-tag { display: flex; align-items: center; gap: 10px; }
.ref-tag i { width: 24px; height: 4px; flex: none; }
.ref-tag span { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--gray); }
.ref-card h3 { font: 700 17px/1.3 var(--head); margin: 0; }
.ref-card p { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 0; }
.ref-meta { font-family: var(--mono); font-size: 11px; color: #8A8F96; margin-top: 6px; }

/* ---------- Témoignages ---------- */
.temoins { background: var(--white); border-top: 1px solid var(--border); padding: 56px; }
.temoins-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.temoins-head h2 { font: 700 24px var(--head); letter-spacing: -.01em; margin: 0; }
.temoins-nav { display: flex; gap: 10px; }
.temoins-nav button { cursor: pointer; border: 1px solid var(--border-strong); background: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font: 700 18px var(--head); color: var(--text-soft); }
.temoins-nav button:hover { border-color: var(--ink); color: var(--ink); }
.temoin-body { display: flex; gap: 32px; align-items: stretch; margin-top: 32px; }
.temoin-body .bar { width: 4px; background: var(--orange); flex: none; }
.temoin-quote { font: 500 19px/1.55 var(--head); color: var(--ink); max-width: 900px; margin: 0; }
.temoin-who { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.temoin-who b { font: 700 14px var(--head); }
.temoin-who span { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: #8A8F96; }
@media (max-width: 980px) { .temoins { padding: 40px 24px; } }

/* ---------- Marquee clients ---------- */
.clients { background: var(--white); border-top: 1px solid var(--border); padding: 32px 0; overflow: hidden; }
.clients-track { display: flex; width: max-content; animation: acee-marquee 28s linear infinite; }
.clients-track > div { flex: none; height: 56px; margin: 0 44px; display: flex; align-items: center; }
.clients-track img { max-height: 56px; max-width: 180px; object-fit: contain; }

/* ---------- Duo FAQ / RSE ---------- */
.duo { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); border-top: 1px solid var(--border); }
.duo a { padding: 44px 56px; background: var(--white); display: flex; flex-direction: column; gap: 12px; color: var(--ink); }
.duo a:first-child { border-right: 1px solid var(--border); }
.duo a:hover { background: var(--paper); color: var(--ink); }
.duo .k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; }
.duo h3 { font: 700 20px var(--head); margin: 0; }
.duo p { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 0; }
.duo .more { font: 700 13px var(--head); color: var(--orange); }
@media (max-width: 980px) { .duo { grid-template-columns: 1fr; } .duo a { padding: 32px 24px; border-right: none !important; border-bottom: 1px solid var(--border); } }

/* ---------- Bande qualifications (accueil) ---------- */
.qualbar { background: var(--white); border-top: 1px solid var(--border); padding: 48px 56px; display: flex; align-items: center; gap: 48px; color: var(--ink); }
.qualbar:hover { color: var(--ink); }
.qualbar .label { flex: none; font: 700 16px var(--head); text-transform: uppercase; letter-spacing: .06em; }
.qualbar .logos { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.qualbar .logos > div { height: 64px; display: flex; align-items: center; justify-content: center; }
.qualbar .logos img { max-height: 60px; max-width: 100%; object-fit: contain; }
@media (max-width: 980px) { .qualbar { flex-direction: column; padding: 32px 24px; gap: 24px; } .qualbar .logos { width: 100%; grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---------- CTA bandeau sombre ---------- */
.cta-band { background: var(--ink); color: var(--paper); padding: 48px 56px; display: flex; justify-content: space-between; align-items: center; gap: 48px; flex-wrap: wrap; }
.cta-band .txt { font: 700 24px/1.3 var(--head); max-width: 760px; }
@media (max-width: 980px) { .cta-band { padding: 40px 24px; } .cta-band .txt { font-size: 20px; } }

/* ---------- Pages métiers ---------- */
.metier-hero { padding: 56px; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 56px; align-items: start; }
.metier-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--gray); margin-bottom: 20px; }
.metier-bar { width: 56px; height: 5px; margin-bottom: 20px; }
.metier-hero h1 { font: 800 42px/1.08 var(--head); letter-spacing: -.025em; text-wrap: balance; margin: 0; }
.metier-intro { font-size: 17px; line-height: 1.6; color: var(--text); margin-top: 24px; }
.metier-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.photo-slot { background: repeating-linear-gradient(135deg, #D6D2CC 0 12px, #E2DFD9 12px 24px); height: 340px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; color: #8A8F96; text-align: center; line-height: 1.7; }
@media (max-width: 980px) { .metier-hero { grid-template-columns: 1fr; padding: 40px 24px; gap: 32px; } .metier-hero h1 { font-size: 32px; } .photo-slot { height: 220px; } }

.steps { background: var(--ink); color: var(--paper); padding: 56px; }
.steps h2 { font: 700 24px var(--head); letter-spacing: -.01em; margin: 0 0 32px; }
.steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border: 1px solid var(--dark-line); }
.steps-grid > div { padding: 28px; border-right: 1px solid var(--dark-line); }
.steps-grid > div:last-child { border-right: none; }
.steps-grid .n { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; margin-bottom: 14px; color: var(--orange); }
.steps-grid b { font: 700 16px var(--head); display: block; }
.steps-grid p { font-size: 14px; line-height: 1.55; color: var(--gray-mid); margin: 10px 0 0; }
@media (max-width: 980px) { .steps { padding: 40px 24px; } .steps-grid { grid-template-columns: 1fr; } .steps-grid > div { border-right: none; border-bottom: 1px solid var(--dark-line); } .steps-grid > div:last-child { border-bottom: none; } }

.points { padding: 56px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; }
.point { border-top: 4px solid var(--ink); padding-top: 20px; }
.point b { font: 700 18px var(--head); display: block; }
.point p { font-size: 15px; line-height: 1.6; color: var(--text-soft); margin: 10px 0 0; }
.point.o { border-top-color: var(--orange); }
.point.r { border-top-color: var(--red); }
.point.b { border-top-color: var(--blue); }
@media (max-width: 980px) { .points { padding: 40px 24px; grid-template-columns: 1fr; gap: 24px; } }

.metier-links { padding: 32px 56px; display: flex; gap: 16px; flex-wrap: wrap; background: var(--white); border-top: 1px solid var(--border); }
.metier-links a { font: 700 13px var(--head); color: var(--text-soft); border: 1px solid var(--border-strong); padding: 12px 18px; }
.metier-links a:hover, .metier-links a.current { border-color: var(--ink); color: var(--ink); }
@media (max-width: 980px) { .metier-links { padding: 24px; } }

/* ---------- Filtres références ---------- */
.filters { display: flex; gap: 10px; margin-top: 32px; flex-wrap: wrap; align-items: center; }
.filters button { cursor: pointer; background: none; padding: 10px 18px; font: 700 12px var(--head); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--border-strong); color: var(--text-soft); }
.filters button:hover, .filters button.active { border-color: var(--ink); color: var(--ink); }
.filters .state { padding: 10px 0 10px 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--gray); }

/* ---------- Étude de cas ---------- */
.crumbs { padding: 40px 56px 0; display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--gray); }
.case { padding: 32px 56px 56px; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 56px; align-items: start; }
.case h1 { font: 800 38px/1.1 var(--head); letter-spacing: -.025em; margin: 0; }
.case-long { font-size: 16px; line-height: 1.65; color: var(--text); margin-top: 20px; }
.phases { margin-top: 32px; border-top: 2px solid var(--ink); }
.phase { display: flex; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.phase .n { font-family: var(--mono); font-size: 12px; color: var(--orange); width: 36px; flex: none; padding-top: 2px; }
.phase b { width: 200px; flex: none; font: 700 15px var(--head); }
.phase p { font-size: 14px; line-height: 1.5; color: var(--text-muted); margin: 0; }
.case-side { display: flex; flex-direction: column; gap: 20px; }
.fiche { background: var(--ink); color: var(--paper); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.fiche .k { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--orange); }
.fiche dl { display: flex; flex-direction: column; gap: 12px; font-size: 13px; line-height: 1.5; margin: 0; }
.fiche .row { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--dark-line); padding-bottom: 10px; }
.fiche .row:last-child { border-bottom: none; padding-bottom: 0; }
.fiche .row dt { color: var(--gray-mid); }
.fiche .row dd { margin: 0; text-align: right; }
.case-cta { display: block; background: var(--orange); color: var(--ink); padding: 18px; text-align: center; font: 700 14px var(--head); }
.case-cta:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 980px) { .crumbs { padding: 32px 24px 0; } .case { grid-template-columns: 1fr; padding: 24px; gap: 32px; } .case h1 { font-size: 30px; } .phase b { width: 130px; } }

/* ---------- Qualifications ---------- */
.qual-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.qual-card { background: var(--white); border: 1px solid var(--border); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.qual-card .imgs { height: 80px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.qual-card .imgs img { max-height: 76px; max-width: 46%; object-fit: contain; }
.qual-card .imgs img.solo { max-width: 100%; }
.qual-card b { font: 700 14px var(--head); }
.qual-card p { font-size: 13px; line-height: 1.5; color: var(--text-muted); margin: 0; }
@media (max-width: 980px) { .qual-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .qual-grid { grid-template-columns: 1fr; } }
.actradis { background: var(--white); border: 1px solid var(--border); padding: 24px 28px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.actradis b { font: 700 15px var(--head); display: block; }
.actradis p { font-size: 13px; line-height: 1.5; color: var(--text-muted); margin: 6px 0 0; }
.actradis a { flex: none; border: 1px solid var(--ink); color: var(--ink); padding: 12px 20px; font: 700 13px var(--head); }
.actradis a:hover { background: var(--ink); color: var(--paper); }

/* ---------- FAQ ---------- */
.faq-list { border-top: 2px solid var(--ink); max-width: 980px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; background: none; border: none; width: 100%; text-align: left; font: 700 16px/1.4 var(--head); color: var(--ink); }
.faq-q:hover { color: var(--orange); }
.faq-q .mark { font: 700 20px var(--head); color: var(--orange); flex: none; }
.faq-a { font-size: 15px; line-height: 1.65; color: var(--text); padding: 0 48px 24px 0; display: none; }
.faq-item.open .faq-a { display: block; }

/* ---------- Actus ---------- */
.actus { border-top: 2px solid var(--ink); }
.actu { display: flex; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.actu .date { font-family: var(--mono); font-size: 12px; color: #8A8F96; width: 90px; flex: none; padding-top: 4px; }
.actu .tag { width: 150px; flex: none; display: inline-flex; align-items: center; gap: 8px; }
.actu .tag i { width: 18px; height: 4px; flex: none; }
.actu .tag span { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--gray); }
.actu b { font: 700 17px/1.3 var(--head); display: block; }
.actu p { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 8px 0 0; }
@media (max-width: 640px) { .actu { flex-wrap: wrap; gap: 12px; } }

/* ---------- Cartes blanches génériques ---------- */
.white-cards { display: grid; gap: 24px; }
.white-cards.c2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.white-cards.c3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.wcard { background: var(--white); border: 1px solid var(--border); padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.wcard .k { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--blue); }
.wcard .num { font-family: var(--mono); font-size: 12px; color: var(--orange); }
.wcard b { font: 700 18px var(--head); }
.wcard p { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 0; }
@media (max-width: 980px) { .white-cards.c2, .white-cards.c3 { grid-template-columns: 1fr; } }

/* ---------- Deux colonnes texte + photo ---------- */
.split { padding: 56px; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 56px; align-items: start; }
.split h1 { font: 800 38px/1.1 var(--head); letter-spacing: -.025em; margin: 0; }
.split .body p { font-size: 16px; line-height: 1.65; color: var(--text); margin: 16px 0 0; }
@media (max-width: 980px) { .split { grid-template-columns: 1fr; padding: 40px 24px; gap: 32px; } .split h1 { font-size: 30px; } }

/* ---------- Timeline à propos ---------- */
.timeline { background: var(--ink); color: var(--paper); padding: 56px; }
.timeline h2 { font: 700 24px var(--head); margin: 0 0 32px; }
.timeline-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 32px; }
.timeline-grid > div { border-top: 2px solid var(--orange); padding-top: 16px; }
.timeline-grid b { font: 800 20px var(--head); display: block; }
.timeline-grid p { font-size: 14px; line-height: 1.5; color: var(--gray-mid); margin: 8px 0 0; }
@media (max-width: 980px) { .timeline { padding: 40px 24px; } .timeline-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .timeline-grid { grid-template-columns: 1fr; } }

/* ---------- Bandeaux blancs ---------- */
.white-band { background: var(--white); border: 1px solid var(--border); padding: 40px; display: flex; justify-content: space-between; align-items: center; gap: 48px; flex-wrap: wrap; }
.white-band b { font: 700 20px var(--head); display: block; }
.white-band p { font-size: 15px; line-height: 1.6; color: var(--text-soft); margin: 10px 0 0; max-width: 640px; }
.white-band .k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--orange); margin-bottom: 10px; }

/* ---------- Recrutement ---------- */
.poste { background: var(--white); border: 1px solid var(--border); padding: 24px 28px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.poste:hover { border-color: var(--ink); }
.poste b { font: 700 17px var(--head); display: block; }
.poste p { font-size: 14px; color: var(--text-muted); margin: 6px 0 0; }

/* ---------- Agences ---------- */
.agences-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
@media (max-width: 980px) { .agences-grid { grid-template-columns: 1fr; } }
.agence { padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.agence.dark { background: var(--ink); color: var(--paper); }
.agence.light { background: var(--white); border: 1px solid var(--border); }
.agence .k { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; }
.agence.dark .k { color: var(--orange); }
.agence.light .k { color: var(--gray); }
.agence b { font: 700 20px var(--head); }
.agence p { font-size: 14px; line-height: 1.6; margin: 0; }
.agence.dark p { color: var(--gray-soft); }
.agence.light p { color: var(--text-muted); }
.map-frame { border: 1px solid var(--border); }
.map-frame iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); }
.contact-form { padding: 56px; display: flex; flex-direction: column; gap: 24px; }
.contact-form h1 { font: 800 34px/1.12 var(--head); letter-spacing: -.02em; margin: 0; }
.contact-form .lede { font-size: 15px; line-height: 1.6; color: var(--text); margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 8px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.field input, .field textarea { width: 100%; border: 1px solid var(--border-strong); background: var(--white); height: 44px; padding: 0 12px; font: 400 14px var(--sans); color: var(--ink); }
.field textarea { height: 110px; padding: 12px; resize: none; line-height: 1.5; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.chips { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.chips button { cursor: pointer; background: none; border: 1px solid var(--border-strong); color: var(--text-soft); padding: 10px 16px; font: 700 12px var(--head); }
.chips button:hover, .chips button.active { border-color: var(--ink); color: var(--ink); }
.chips .state { padding: 10px 0 10px 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--gray); }
.form-note { border-left: 4px solid var(--orange); background: var(--white); padding: 16px 20px; font-size: 14px; line-height: 1.55; color: var(--ink); display: none; }
.form-note.visible { display: block; }
.contact-side { background: var(--ink); color: var(--paper); padding: 56px; display: flex; flex-direction: column; gap: 32px; }
.contact-side .k { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; margin-bottom: 12px; color: var(--gray-mid); }
.contact-side .k.o { color: var(--orange); }
.contact-side .k.g { color: #25D366; }
.contact-side .phone { font: 800 30px/1.1 var(--head); letter-spacing: -.02em; }
.contact-side .block { border-top: 1px solid var(--dark-line); padding-top: 24px; }
.contact-side .mail { font: 700 18px var(--head); }
.contact-side p { font-size: 14px; line-height: 1.55; color: var(--gray-mid); margin: 10px 0 0; }
.contact-side address { font-style: normal; font-size: 15px; line-height: 1.7; }
.contact-side address span { color: var(--gray-mid); }
.wa-btn { display: inline-flex; align-items: center; gap: 12px; background: #25D366; color: #0B2E1A; padding: 14px 20px; font: 700 14px var(--head); }
.wa-btn:hover { background: var(--paper); color: var(--ink); }
.contact-side .map-frame { margin-top: auto; border-color: var(--dark-line); }
.contact-side .map-frame iframe { height: 200px; }
@media (max-width: 980px) { .contact { grid-template-columns: 1fr; } .contact-form, .contact-side { padding: 32px 24px; } }

/* ---------- Mentions ---------- */
.legal { padding: 56px; max-width: 900px; }
.legal h1 { font: 800 32px/1.1 var(--head); letter-spacing: -.02em; margin: 0; }
.legal .blocks { display: flex; flex-direction: column; gap: 28px; margin-top: 36px; font-size: 14px; line-height: 1.7; color: var(--text); }
.legal .blocks b { font: 700 15px var(--head); display: block; margin-bottom: 8px; color: var(--ink); }
@media (max-width: 980px) { .legal { padding: 40px 24px; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--paper); padding: 56px; display: grid; grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr)); gap: 40px; }
.site-footer .col { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.site-footer .col a { color: var(--gray-mid); }
.site-footer .col a:hover { color: var(--paper); }
.site-footer .col a.hl { color: var(--orange); }
.site-footer .col a.hl:hover { color: var(--paper); }
.site-footer .col-title { font: 700 12px var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--paper); margin-bottom: 4px; }
.footer-brand { display: flex; flex-direction: column; gap: 20px; }
.footer-brand .brand { font-size: 26px; }
.footer-brand address { font-style: normal; font-family: var(--mono); font-size: 12px; line-height: 1.8; color: var(--gray-mid); }
.footer-social { display: flex; gap: 16px; font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.footer-social a { color: var(--gray-mid); }
.footer-social a:hover { color: var(--paper); }
@media (max-width: 980px) { .site-footer { grid-template-columns: repeat(2, minmax(0,1fr)); padding: 40px 24px; } }
@media (max-width: 640px) { .site-footer { grid-template-columns: 1fr; } }
.color-strip { display: flex; height: 10px; }
.color-strip i { flex: 1; }
.color-strip i:nth-child(1) { background: var(--gray); }
.color-strip i:nth-child(2) { background: var(--orange); }
.color-strip i:nth-child(3) { background: var(--red); }
.color-strip i:nth-child(4) { background: var(--blue); }