/* Select RH — maquette du nouveau design */
:root {
  --ink: #0e1110;
  --ink-2: #3d4442;
  --muted: #6c7471;
  --paper: #f6f4ef;
  --white: #ffffff;
  --line: #e4e0d7;
  --accent: #1d6f62;
  --accent-bright: #2cc3a7;
  --accent-soft: #e1f0ec;
  --radius: 20px;
  --radius-sm: 12px;
  --wrap: 1180px;
  --serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.65; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
h1, h2, .serif { font-family: var(--serif); letter-spacing: -0.01em; line-height: 1.05; }
h1 { font-size: clamp(2.7rem, 5.6vw, 4.6rem); }
h2 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); }
h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
h1 em, h2 em { font-style: italic; color: var(--accent); }
p { margin: 0 0 1em; }
.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section--white { background: var(--white); }
.section--dark { background: var(--ink); color: var(--white); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.section--dark .eyebrow { color: var(--accent-bright); }
.lead { font-size: 1.15rem; color: var(--ink-2); max-width: 60ch; }
.section--dark .lead { color: #b9c1be; }
.head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.head h2 + p { margin-top: 18px; }

/* Boutons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font-weight: 700; font-size: 0.95rem; border: 1px solid var(--ink); background: var(--ink); color: var(--white); cursor: pointer; font-family: inherit; transition: transform .2s, background .2s, color .2s, border-color .2s; }
.btn:hover { transform: translateY(-2px); background: var(--accent); border-color: var(--accent); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn--light { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--light:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--ink); }
.btn svg, .more svg { width: 16px; height: 16px; flex: none; transition: transform .2s; }
.btn:hover svg, a:hover > .more svg, .more:hover svg { transform: translateX(4px); }
.more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.92rem; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* En-tête */
.header { position: sticky; top: 0; z-index: 50; background: rgba(246, 244, 239, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.header.is-stuck { border-color: var(--line); }
.header .wrap { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 42px; height: 42px; border-radius: 10px; }
.brand b { font-family: var(--serif); font-weight: 400; font-size: 1.55rem; letter-spacing: 0.04em; line-height: 1; display: block; }
.brand small { display: block; font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.nav { display: flex; align-items: center; gap: 30px; font-size: 0.93rem; font-weight: 600; }
.nav a:not(.btn) { position: relative; padding: 6px 0; color: var(--ink-2); }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav a:not(.btn):hover, .nav a[aria-current] { color: var(--ink); }
.nav a:not(.btn):hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.nav .btn { padding: 11px 22px; }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); cursor: pointer; padding: 0; position: relative; }
.burger span, .burger span::before { content: ""; position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--ink); }
.burger span { top: 18px; } .burger span::before { left: 0; right: 0; top: 7px; }

/* Hero accueil */
.hero { padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 7vw, 96px); }
.hero .wrap { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero p.lead { margin-top: 26px; }
.hero-visual { position: relative; }
.hero-visual > img { width: 100%; aspect-ratio: 1 / 1.02; max-height: 620px; object-fit: cover; border-radius: 28px; }
.chip { position: absolute; left: -28px; bottom: 36px; background: var(--white); border-radius: 18px; padding: 18px 22px; box-shadow: 0 24px 60px -24px rgba(14, 17, 16, .35); display: flex; align-items: center; gap: 16px; max-width: 290px; }
.chip b { font-family: var(--serif); font-size: 2.6rem; font-weight: 400; line-height: 1; color: var(--accent); }
.chip span { font-size: 0.82rem; line-height: 1.4; color: var(--ink-2); font-weight: 600; }

/* Logos clients */
.logos { background: var(--white); border-block: 1px solid var(--line); padding: 26px 0; overflow: hidden; }
.logos .wrap { display: flex; align-items: center; gap: 36px; }
.logos p { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.marquee { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 52px; width: max-content; animation: slide 45s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee img { height: 62px; width: auto; filter: grayscale(1); opacity: .9; mix-blend-mode: multiply; transition: filter .2s, opacity .2s; }
.marquee img:hover { filter: none; opacity: 1; }
@keyframes slide { to { transform: translateX(-50%); } }

/* Deux portes */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.door { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 440px; display: flex; flex-direction: column; justify-content: flex-end; padding: 36px; color: var(--white); isolation: isolate; }
.door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.door::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 17, 16, 0) 30%, rgba(14, 17, 16, .88) 100%); }
.door:hover img { transform: scale(1.05); }
.door h3 { font-family: var(--serif); font-weight: 400; font-size: 2.3rem; line-height: 1.05; }
.door p { margin: 10px 0 20px; color: #d9dedc; max-width: 34ch; }

/* Domaines */
.domains { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; border-top: 1px solid var(--line); }
.domain { display: flex; gap: 22px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--line); }
.domain i { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--accent); min-width: 34px; }
.domain h3 { font-size: 1.12rem; }
.domain p { margin: 6px 0 0; color: var(--muted); font-size: 0.95rem; }

/* Valeurs */
.split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.split--rev { grid-template-columns: 1.15fr 0.85fr; }
.split > img, .split .pic { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; }
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; padding: 24px 0; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary b { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; line-height: 1.1; display: block; }
.acc summary small { display: block; color: var(--muted); font-size: 0.95rem; margin-top: 6px; }
.acc summary::after { content: "+"; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 1.3rem; transition: transform .25s, background .25s, color .25s; }
.acc details[open] summary::after { transform: rotate(45deg); background: var(--ink); color: var(--white); border-color: var(--ink); }
.acc details p { color: var(--ink-2); padding: 0 58px 26px 0; margin: 0; }

/* Chiffres */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255, 255, 255, .14); border-left: 1px solid rgba(255, 255, 255, .14); }
.stat { padding: 36px 30px 34px; border-right: 1px solid rgba(255, 255, 255, .14); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.stat b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(2.8rem, 5vw, 4.2rem); line-height: 1; color: var(--accent-bright); }
.stat span { display: block; margin-top: 14px; color: #c3cac7; font-size: 0.97rem; line-height: 1.5; max-width: 26ch; }

/* Témoignages */
.t-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.tabs { display: inline-flex; padding: 5px; background: var(--paper); border-radius: 999px; border: 1px solid var(--line); }
.tabs button { border: 0; background: none; padding: 9px 20px; border-radius: 999px; font: inherit; font-size: 0.9rem; font-weight: 700; color: var(--muted); cursor: pointer; }
.tabs button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.arrows { display: flex; gap: 10px; }
.arrows button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s; }
.arrows button:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.arrows svg { width: 18px; height: 18px; }
.t-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 24px 12px; scroll-padding-left: 24px; margin-inline: -24px; }
.t-track::-webkit-scrollbar { display: none; }
.t-card { flex: 0 0 min(390px, 84vw); scroll-snap-align: start; background: var(--paper); border-radius: var(--radius); padding: 30px; display: flex; flex-direction: column; gap: 22px; min-height: 290px; }
.t-card[hidden] { display: none; }
.t-card blockquote { margin: 0; font-family: var(--serif); font-size: 1.42rem; line-height: 1.3; flex: 1; }
.t-who { display: flex; align-items: center; gap: 14px; font-size: 0.9rem; }
.t-who img, .t-who .avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--white); object-fit: contain; flex: none; }
.t-who .avatar { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.t-who b { display: block; line-height: 1.3; } .t-who span { color: var(--muted); }

/* Bandeau contact */
.cta { background: var(--ink); color: var(--white); border-radius: 28px; padding: clamp(40px, 6vw, 80px); display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; position: relative; overflow: hidden; }
.cta::after { content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(44, 195, 167, .35), transparent 68%); pointer-events: none; }
.cta h2 { max-width: 16ch; } .cta h2 em { color: var(--accent-bright); }
.cta p { color: #b9c1be; margin: 16px 0 0; max-width: 44ch; }

/* Hero des pages intérieures */
.page-hero { padding: clamp(36px, 5vw, 72px) 0 clamp(40px, 6vw, 80px); }
.page-hero .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.page-hero--solo .wrap { display: block; max-width: 900px; margin-inline: auto; }
.page-hero h1 { font-size: clamp(2.5rem, 5.2vw, 4.3rem); }
.page-hero .lead { margin-top: 22px; }
.page-hero img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 28px; }

/* Photo détourée sur fond blanc : posée sur un aplat crème */
.cut { background: #ece8df; border-radius: 28px; overflow: hidden; }
.page-hero .cut img { mix-blend-mode: multiply; border-radius: 0; }
[data-theme="b"] .cut { border-radius: 8px; }

/* Offres */
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.offer { background: var(--white); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); transition: transform .25s, box-shadow .25s; }
.offer:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(14, 17, 16, .35); }
.offer-pic { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink); }
.offer-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.offer:hover .offer-pic img { transform: scale(1.05); }
.offer-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.tag--plain { background: var(--paper); color: var(--ink-2); }
.offer h3 { font-size: 1.14rem; }
.offer p { color: var(--muted); font-size: 0.94rem; margin: 0; flex: 1; }
.offer .more { margin-top: 8px; }

/* Listes */
.checks { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 14px; }
.checks li { display: flex; gap: 14px; align-items: flex-start; }
.checks li::before { content: ""; flex: none; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d6f62' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9'/%3E%3C/svg%3E") center / 16px no-repeat; }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: 28px; padding: clamp(28px, 4.5vw, 56px); }
.panel--paper { background: var(--paper); border: 0; }
.note { color: var(--muted); font-size: 0.93rem; }

/* Étapes */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: s; }
.step { background: var(--paper); border-radius: var(--radius); padding: 26px 26px 28px; counter-increment: s; }
.step::before { content: counter(s, decimal-leading-zero); font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--accent); display: block; margin-bottom: 26px; }
.step h3 { font-size: 1.04rem; font-weight: 600; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.card i { font-family: var(--serif); font-style: italic; color: var(--accent); font-size: 1.2rem; display: block; margin-bottom: 20px; }
.card p { color: var(--muted); font-size: 0.95rem; margin: 8px 0 0; }
.card--cta { grid-column: span 2; background: var(--ink); color: var(--white); border-color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.card--cta h3 { font-family: var(--serif); font-weight: 400; font-size: 2rem; }
.card--cta .more { color: var(--accent-bright); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.duo h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 16px; }
.duo p { color: var(--ink-2); }

/* Formulaires */
.form-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
form.f { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.f label { display: grid; gap: 7px; font-size: 0.84rem; font-weight: 700; color: var(--ink-2); }
.f .full { grid-column: 1 / -1; }
.f input, .f textarea { font: inherit; font-weight: 500; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--white); color: var(--ink); width: 100%; transition: border-color .2s, box-shadow .2s; }
.f input:focus, .f textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.f textarea { min-height: 150px; resize: vertical; }
.f input[type="file"] { padding: 11px; background: var(--paper); border-style: dashed; }
.f .btn { justify-self: start; }
.f-msg { grid-column: 1 / -1; margin: 0; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 0.93rem; }
.coords { display: grid; gap: 18px; margin-top: 28px; }
.coords div { padding-top: 18px; border-top: 1px solid var(--line); }
.coords small { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.coords a, .coords span { font-family: var(--serif); font-size: 1.5rem; }
.coords a:hover, .link { color: var(--accent); }
.link { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* Fiche offre et texte long */
.back { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem; color: var(--muted); margin-bottom: 28px; }
.back:hover { color: var(--ink); } .back svg { width: 16px; height: 16px; }
.offer-layout { display: grid; grid-template-columns: 1fr 340px; gap: clamp(28px, 5vw, 72px); align-items: start; }
.prose h2 { font-size: 1.9rem; margin: 44px 0 14px; } .prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { padding: 0; list-style: none; display: grid; gap: 10px; margin: 0 0 1em; }
.prose li { padding-left: 24px; position: relative; }
.prose li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 8px; height: 1.5px; background: var(--accent); }
.aside { position: sticky; top: 104px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.aside dl { margin: 0 0 24px; display: grid; gap: 16px; }
.aside dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.aside dd { margin: 2px 0 0; font-weight: 700; }
.aside .btn { width: 100%; justify-content: center; }
.legal { max-width: 780px; }

/* Pied de page */
.footer { background: var(--ink); color: #b9c1be; padding: 72px 0 28px; font-size: 0.94rem; }
.footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer .brand b { color: var(--white); } .footer .brand small { color: #8d9693; }
.footer p { max-width: 34ch; margin: 20px 0 0; }
.footer h4 { color: var(--white); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 18px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer a:hover { color: var(--white); }
.footer .base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; font-size: 0.84rem; color: #8d9693; }
.cta-wrap { padding: clamp(56px, 7vw, 96px) 0; }

/* Apparition douce */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  html { scroll-behavior: auto; }
}

/* Tablette et mobile */
@media (max-width: 960px) {
  .hero .wrap, .page-hero .wrap, .split, .split--rev, .form-grid, .offer-layout { grid-template-columns: 1fr; }
  .hero-visual > img { aspect-ratio: 4 / 3; }
  .chip { left: 16px; bottom: 16px; }
  .split > img, .split .pic { aspect-ratio: 4 / 3; }
  .offers, .steps, .cards { grid-template-columns: 1fr 1fr; }
  .card--cta { grid-column: auto; }
  .stats { grid-template-columns: 1fr 1fr; }
  .footer .cols { grid-template-columns: 1fr 1fr; }
  .aside { position: static; }
  .burger { display: block; }
  .nav { position: absolute; top: 78px; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 24px; display: none; }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { margin-top: 18px; justify-content: center; padding: 15px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - 32px); }
  .doors, .domains, .offers, .steps, .cards, .duo, form.f { grid-template-columns: 1fr; }
  .card--cta { grid-column: auto; }
  .door { min-height: 360px; padding: 26px; }
  .logos .wrap { flex-direction: column; align-items: flex-start; gap: 16px; }
  .marquee { width: 100%; }
  .stat { padding: 26px 18px; }
  .acc summary b { font-size: 1.5rem; } .acc details p { padding-right: 0; }
  .footer .cols { grid-template-columns: 1fr; }
  .t-track { padding-inline: 16px; margin-inline: -16px; scroll-padding-left: 16px; }
  .cta { border-radius: 22px; }
}

/* ---------- Piste B : sombre, contrastée, proche du logo ---------- */
:root[data-theme="b"] {
  --ink: #f4f2ec;
  --ink-2: #c6ccc9;
  --muted: #8a9390;
  --paper: #0b0d0c;
  --white: #141817;
  --line: #262c2a;
  --accent: #2cc3a7;
  --accent-soft: #11302a;
  --radius: 6px;
  --radius-sm: 4px;
  --serif: "Bricolage Grotesque", "Manrope", sans-serif;
  color-scheme: dark;
}
[data-theme="b"] h1, [data-theme="b"] h2 { font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
[data-theme="b"] h1 { font-size: clamp(2.5rem, 5.2vw, 4.3rem); }
[data-theme="b"] h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
[data-theme="b"] h1 em, [data-theme="b"] h2 em, [data-theme="b"] .domain i, [data-theme="b"] .card i, [data-theme="b"] .step::before { font-style: normal; }
[data-theme="b"] .brand b, [data-theme="b"] .door h3, [data-theme="b"] .acc summary b, [data-theme="b"] .stat b, [data-theme="b"] .chip b, [data-theme="b"] .coords a, [data-theme="b"] .coords span, [data-theme="b"] .card--cta h3, [data-theme="b"] .domain i, [data-theme="b"] .card i, [data-theme="b"] .step::before { font-weight: 700; letter-spacing: -0.03em; }
[data-theme="b"] .brand b { letter-spacing: 0.02em; font-size: 1.3rem; }
[data-theme="b"] .acc summary b { font-size: 1.45rem; }
[data-theme="b"] .door h3 { font-size: 1.9rem; }
[data-theme="b"] .coords a, [data-theme="b"] .coords span { font-size: 1.25rem; }
[data-theme="b"] .prose h2 { font-size: 1.5rem; }
[data-theme="b"] .t-card blockquote { font-family: var(--sans); font-size: 1.08rem; font-weight: 500; line-height: 1.55; }
[data-theme="b"] .hero-visual > img, [data-theme="b"] .page-hero img, [data-theme="b"] .split > img, [data-theme="b"] .panel, [data-theme="b"] .cta { border-radius: 8px; }
[data-theme="b"] .btn, [data-theme="b"] .tag, [data-theme="b"] .tabs, [data-theme="b"] .tabs button { border-radius: 6px; }
[data-theme="b"] .header { background: rgba(11, 13, 12, .86); }
[data-theme="b"] .brand img { box-shadow: 0 0 0 1px var(--line); }
[data-theme="b"] .door { color: #fff; }
[data-theme="b"] .logos { background: #f4f2ec; border-color: transparent; }
[data-theme="b"] .logos p { color: #3d4442; }
[data-theme="b"] .t-who img { background: #fff; }
[data-theme="b"] .chip { box-shadow: 0 0 0 1px var(--line), 0 24px 60px -24px #000; }
[data-theme="b"] .checks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232cc3a7' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9'/%3E%3C/svg%3E"); }
/* Bloc chiffres : aplat vert, texte noir */
[data-theme="b"] .section--dark { background: var(--accent); color: #06130f; }
[data-theme="b"] .section--dark .eyebrow, [data-theme="b"] .section--dark .lead, [data-theme="b"] .stat b, [data-theme="b"] .stat span { color: #06130f; }
[data-theme="b"] .stats, [data-theme="b"] .stat { border-color: rgba(6, 19, 15, .22); }
/* Bandeau contact et carte d'appel : aplat crème, texte noir */
[data-theme="b"] .cta p { color: #3d4442; }
[data-theme="b"] .cta h2 em, [data-theme="b"] .card--cta .more { color: #14685b; }
[data-theme="b"] .cta::after { background: radial-gradient(circle, rgba(44, 195, 167, .55), transparent 68%); }
[data-theme="b"] .footer { background: #060807; border-top: 1px solid var(--line); }
[data-theme="b"] .footer .brand b, [data-theme="b"] .footer h4, [data-theme="b"] .footer a:hover { color: #fff; }

/* Photos : traitement noir et blanc unique, la couleur revient au survol des cartes */
.hero-visual > img, .page-hero img, .split > img, .door img, .offer-pic img { filter: grayscale(1) contrast(1.1) brightness(.94); transition: filter .5s, transform .7s cubic-bezier(.2, .7, .2, 1); }
.door:hover img, .offer:hover .offer-pic img { filter: grayscale(0) contrast(1) brightness(1); }
.hero-visual > img { object-position: 30% 20%; }

/* Équipe : vrais portraits, déjà en noir et blanc sur fond noir */
.team { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.people { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.person { display: block; }
.person img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; border-radius: var(--radius); background: #000; margin-bottom: 18px; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.person:hover img { transform: translateY(-4px); }
.person p { color: var(--muted); font-size: 0.93rem; margin: 6px 0 12px; }
.person .more { color: var(--accent); }
@media (max-width: 960px) { .team { grid-template-columns: 1fr; } }
.page-hero img.keep { filter: none; aspect-ratio: 1 / 1; object-position: center top; background: #000; }

/* Haut de l'espace entreprise : chiffres clés à la place d'une photo */
.figures { position: relative; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px clamp(24px, 3vw, 40px); }
.figures div { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.figures div:last-child { border-bottom: 0; }
.figures b { font-family: var(--serif); font-weight: 700; letter-spacing: -0.03em; font-size: clamp(2.2rem, 3.6vw, 3.1rem); line-height: 1; color: var(--accent); flex: 0 0 46%; white-space: nowrap; }
.figures span { color: var(--ink-2); font-size: 0.95rem; line-height: 1.45; }
@media (max-width: 640px) { .figures div { flex-direction: column; gap: 8px; } .figures b { flex: none; } }

/* Pastille 97 % : en bas à droite de la photo, pour laisser voir la poignée de main */
.chip { left: auto; right: 20px; bottom: 20px; }
@media (max-width: 960px) { .chip { left: auto; right: 14px; bottom: 14px; } }

/* Témoignages : 6 mis en avant, les autres au clic */
.t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.t-grid .t-card { flex: none; min-height: 0; }
.sur-mesure { max-width: 860px; margin-inline: auto; text-align: center; }
.sur-mesure h2 { margin-bottom: 16px; } .sur-mesure p { color: var(--ink-2); font-size: 1.1rem; margin: 0; }
@media (max-width: 960px) { .t-grid { grid-template-columns: 1fr 1fr; } .form-grid[style] { grid-template-columns: 1fr !important; } }
@media (max-width: 640px) { .t-grid { grid-template-columns: 1fr; } }

/* Variante avec des mots à la place des chiffres : libellé au-dessus, explication en dessous */
.figures--stack div { flex-direction: column; gap: 8px; padding: 24px 0; }
.figures--stack b { flex: none; font-size: clamp(1.9rem, 3vw, 2.5rem); }

/* Accueil : haut de page sans photo, titre centré, arcs de la marque en fond */
.hero--center { position: relative; overflow: hidden; text-align: center; padding: clamp(72px, 11vw, 150px) 0 clamp(72px, 10vw, 130px); }
.hero.hero--center .wrap { display: block; position: relative; z-index: 1; }
.hero--center h1 { font-size: clamp(3rem, 8vw, 6.6rem); max-width: 14ch; margin-inline: auto; }
.hero--center .lead { margin: 28px auto 0; max-width: 58ch; }
.hero--center .btns { justify-content: center; }
.hero--center .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.hero--center::before, .hero--center::after { content: ""; position: absolute; width: min(70vw, 820px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(44, 195, 167, .30) 0 14px, rgba(44, 195, 167, .15) 14px 28px); -webkit-mask-image: linear-gradient(135deg, #000, transparent 55%); mask-image: linear-gradient(135deg, #000, transparent 55%); }
.hero--center::before { right: -22%; top: -46%; transform: rotate(180deg); }
.hero--center::after { left: -24%; bottom: -52%; }

/* Familles de postes : un nom de famille, trois postes concrets */
.families { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.family { padding: 30px 28px 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .3s; }
.family:hover { background: var(--paper); }
.family i { font-family: var(--serif); font-style: normal; font-weight: 700; color: var(--accent); font-size: 0.95rem; letter-spacing: 0.04em; }
.family h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -0.02em; font-size: 1.45rem; margin: 14px 0 14px; }
.family ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--ink-2); font-size: 0.97rem; }
@media (max-width: 960px) { .families { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .families { grid-template-columns: 1fr; } .family { padding: 24px 20px; } }

/* Les familles sont posées sur un fond « papier » sur l'Espace Entreprise : survol inversé */
.section:not(.section--white) .family:hover { background: var(--white); }

/* ===== Essais visuels du haut de l'accueil (maquette) : html[data-hero="1..5"] ===== */
.switch { position: fixed; z-index: 90; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: #050706; box-shadow: 0 16px 40px -12px #000; border: 1px solid rgba(255, 255, 255, .18); font-size: 0.78rem; font-weight: 700; white-space: nowrap; max-width: calc(100vw - 16px); overflow-x: auto; }
.switch span { color: #8d9693; padding: 0 8px 0 12px; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.64rem; }
.switch button { border: 0; background: none; color: #c3cac7; font: inherit; padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.switch button[aria-pressed="true"] { background: var(--accent); color: #06130f; }
.hero-figures, .hero-jobs, .hero-word { display: none; }

/* 2 · Halo : lueur verte et quadrillage fin */
[data-hero="2"] .hero--center::before { inset: 0; width: auto; aspect-ratio: auto; border-radius: 0; transform: none; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 20%, transparent 75%); background: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 56px 56px; }
[data-hero="2"] .hero--center::after { left: 50%; bottom: auto; top: 8%; width: min(90vw, 900px); aspect-ratio: 1.6; transform: translateX(-50%); border-radius: 50%; -webkit-mask-image: none; mask-image: none; background: radial-gradient(closest-side, rgba(44, 195, 167, .34), rgba(44, 195, 167, .08) 55%, transparent 75%); filter: blur(20px); animation: halo 9s ease-in-out infinite alternate; }
@keyframes halo { to { transform: translateX(-46%) translateY(6%) scale(1.08); } }

/* 3 · Métiers : deux bandes de postes qui défilent */
[data-hero="3"] .hero--center::before, [data-hero="3"] .hero--center::after { display: none; }
[data-hero="3"] .hero--center, [data-hero="14"] .hero--center { padding-bottom: clamp(40px, 5vw, 64px); }
[data-hero="3"] .hero-jobs, [data-hero="14"] .hero-jobs { display: grid; gap: 14px; margin-top: clamp(48px, 7vw, 88px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.hero-jobs-row { display: flex; gap: 14px; width: max-content; animation: slide 60s linear infinite; }
.hero-jobs-row--rev { animation-direction: reverse; animation-duration: 70s; }
.hero-jobs-row span { padding: 13px 22px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font-weight: 600; font-size: 0.98rem; background: var(--white); }
.hero-jobs-row span.on { border-color: rgba(44, 195, 167, .5); color: var(--accent); }

/* 4 · Chiffres : trois preuves sous les boutons */
[data-hero="4"] .hero--center::before, [data-hero="4"] .hero--center::after { opacity: .45; }
[data-hero="4"] .hero-figures, [data-hero="13"] .hero-figures { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 900px; margin: clamp(48px, 7vw, 84px) auto 0; border-top: 1px solid var(--line); }
.hero-figures div { padding: 28px 16px 0; border-left: 1px solid var(--line); }
.hero-figures div:first-child { border-left: 0; }
.hero-figures b { display: block; font-family: var(--serif); font-weight: 700; letter-spacing: -0.03em; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1; color: var(--accent); }
.hero-figures span { display: block; margin-top: 10px; color: var(--muted); font-size: 0.92rem; }

/* 5 · Signature : le nom du cabinet en très grand, en filigrane */
[data-hero="5"] .hero--center::before, [data-hero="5"] .hero--center::after { display: none; }
[data-hero="5"] .hero--center { padding-bottom: 0; }
[data-hero="5"] .hero-word { display: block; margin-top: clamp(36px, 5vw, 64px); font-family: var(--serif); font-weight: 800; letter-spacing: -0.04em; font-size: clamp(5rem, 21vw, 19rem); line-height: .78; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(44, 195, 167, .55); background: linear-gradient(180deg, rgba(44, 195, 167, .22), transparent 80%); -webkit-background-clip: text; background-clip: text; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 96%); mask-image: linear-gradient(180deg, #000 30%, transparent 96%); user-select: none; }
.footer { padding-bottom: 84px; }
@media (max-width: 640px) { .switch span { display: none; } .hero-figures { grid-template-columns: 1fr !important; } .hero-figures div { border-left: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-jobs-row, [data-hero="2"] .hero--center::after { animation: none; } }

/* ===== Essais 6 à 12 ===== */
.switch .nav-try { background: rgba(255, 255, 255, .1); color: #fff; padding: 8px 13px; }
.switch { scrollbar-width: none; } .switch::-webkit-scrollbar { display: none; }
.hero-frame { display: none; }

/* 6 · Projecteur : une lueur qui suit la souris sur une trame de points */
[data-hero="6"] .hero--center::before, [data-hero="13"] .hero--center::before, [data-hero="14"] .hero--center::before { inset: 0; width: auto; aspect-ratio: auto; border-radius: 0; transform: none; -webkit-mask-image: none; mask-image: none; background: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.5px) 0 0 / 26px 26px; }
[data-hero="6"] .hero--center::after, [data-hero="13"] .hero--center::after, [data-hero="14"] .hero--center::after { inset: 0; width: auto; aspect-ratio: auto; border-radius: 0; left: 0; bottom: 0; -webkit-mask-image: none; mask-image: none; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 40%), rgba(44, 195, 167, .30), transparent 65%); transition: background .15s; }

/* 7 · Éditorial : titre géant calé à gauche, texte en colonne à droite */
[data-hero="7"] .hero--center::before, [data-hero="7"] .hero--center::after { display: none; }
[data-hero="7"] .hero--center { text-align: left; padding-top: clamp(48px, 7vw, 96px); }
[data-hero="7"] .hero.hero--center .wrap { display: grid; grid-template-columns: 1.5fr 1fr; column-gap: clamp(24px, 5vw, 80px); align-items: end; }
[data-hero="7"] .hero--center .eyebrow { grid-column: 1 / -1; margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line); display: flex; }
[data-hero="7"] .hero--center .eyebrow::after { display: none; }
[data-hero="7"] .hero--center h1 { grid-row: 2 / span 2; font-size: clamp(3.4rem, 9.5vw, 8.4rem); line-height: .92; max-width: none; margin: 0; }
[data-hero="7"] .hero--center h1 em { display: block; }
[data-hero="7"] .hero--center .lead { margin: 0; }
[data-hero="7"] .hero--center .btns { justify-content: flex-start; margin-top: 24px; }

/* 8 · Clair : bandeau crème, texte noir */
[data-hero="8"] .hero--center { --ink: #0e1110; --ink-2: #3d4442; --white: #f4f2ec; --accent: #14685b; --line: #d6d1c5; background: #f4f2ec; color: #0e1110; }
[data-hero="8"] .hero--center::before, [data-hero="8"] .hero--center::after { background: repeating-linear-gradient(135deg, rgba(20, 104, 91, .22) 0 14px, rgba(20, 104, 91, .10) 14px 28px); }
[data-hero="8"] .logos { border-top: 1px solid #d6d1c5; }

/* 9 · Vert : aplat vert, titre noir */
[data-hero="9"] .hero--center { --ink: #06130f; --ink-2: #0c2f27; --white: #eafff9; --accent: #06130f; --line: rgba(6, 19, 15, .3); background: #2cc3a7; color: #06130f; }
[data-hero="9"] .hero--center h1 em { color: #fff; }
[data-hero="9"] .hero--center::before, [data-hero="9"] .hero--center::after { background: repeating-linear-gradient(135deg, rgba(6, 19, 15, .16) 0 14px, rgba(6, 19, 15, .07) 14px 28px); }

/* 10 · Cadre : un cadre fin, des repères aux angles, quatre mentions */
[data-hero="10"] .hero--center::before, [data-hero="10"] .hero--center::after { display: none; }
[data-hero="10"] .hero-frame { display: block; position: absolute; inset: 28px clamp(16px, 3vw, 40px); border: 1px solid var(--line); pointer-events: none; }
.hero-frame i { position: absolute; width: 18px; height: 18px; border: 2px solid var(--accent); }
.hero-frame i:nth-child(1) { left: -2px; top: -2px; border-right: 0; border-bottom: 0; }
.hero-frame i:nth-child(2) { right: -2px; top: -2px; border-left: 0; border-bottom: 0; }
.hero-frame i:nth-child(3) { left: -2px; bottom: -2px; border-right: 0; border-top: 0; }
.hero-frame i:nth-child(4) { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }
.hero-frame span { position: absolute; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.hero-frame span:nth-of-type(1) { left: 22px; top: 18px; } .hero-frame span:nth-of-type(2) { right: 22px; top: 18px; }
.hero-frame span:nth-of-type(3) { left: 22px; bottom: 18px; } .hero-frame span:nth-of-type(4) { right: 22px; bottom: 18px; color: var(--accent); }

/* 11 · Aurore : nappes de couleur floues qui dérivent lentement */
[data-hero="11"] .hero--center::before, [data-hero="11"] .hero--center::after { -webkit-mask-image: none; mask-image: none; border-radius: 50%; filter: blur(70px); width: min(70vw, 760px); aspect-ratio: 1.3; }
[data-hero="11"] .hero--center::before { right: -6%; top: -30%; transform: none; background: radial-gradient(closest-side, rgba(44, 195, 167, .55), transparent); animation: drift 14s ease-in-out infinite alternate; }
[data-hero="11"] .hero--center::after { left: -8%; bottom: -40%; background: radial-gradient(closest-side, rgba(40, 110, 220, .42), transparent); animation: drift 18s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(-14%, 18%) scale(1.15); } }

/* 12 · Cible : cercles concentriques, clin d'œil à la loupe du logo */
[data-hero="12"] .hero--center::after { display: none; }
[data-hero="12"] .hero--center::before { left: 50%; right: auto; top: 46%; width: min(150vw, 1500px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 58px, rgba(44, 195, 167, .5) 58px 59.5px); -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 46%); mask-image: radial-gradient(circle, #000 8%, transparent 46%); animation: pulse 7s ease-in-out infinite alternate; }
@keyframes pulse { to { transform: translate(-50%, -50%) scale(1.06); opacity: .7; } }

@media (max-width: 760px) { [data-hero="7"] .hero.hero--center .wrap { display: block; } [data-hero="7"] .hero--center .lead { margin-top: 24px; } .hero-frame span { display: none; } }
@media (prefers-reduced-motion: reduce) { [data-hero] .hero--center::before, [data-hero] .hero--center::after { animation: none !important; } }

/* 13 · Projecteur + Chiffres : la trame et la lueur du 6, les trois preuves du 4 */
[data-hero="13"] .hero--center { padding-bottom: clamp(56px, 7vw, 96px); }

/* 14 · Projecteur + Métiers : la trame et la lueur du 6, les bandes de postes du 3 (au-dessus du fond) */
[data-hero="14"] .hero-jobs { position: relative; z-index: 1; }
[data-hero="14"] .hero-jobs-row span { background: rgba(20, 24, 23, .82); }

/* ===== Essais de couleur du bloc « Nos chiffres clés » (maquette) : html[data-stats] ; 0 = aplat vert d'origine ===== */
[data-stats="1"] .section--dark { background: #0c2620; color: #e9f3f0; }
[data-stats="1"] .section--dark .eyebrow, [data-stats="1"] .stat b { color: var(--accent); }
[data-stats="1"] .stat span, [data-stats="1"] .section--dark .lead { color: #cfe0db; }
[data-stats="1"] .stats, [data-stats="1"] .stat { border-color: rgba(44, 195, 167, .22); }

[data-stats="2"] .section--dark { background: var(--paper); color: var(--ink); }
[data-stats="2"] .section--dark .eyebrow, [data-stats="2"] .stat b { color: var(--accent); }
[data-stats="2"] .stat span, [data-stats="2"] .section--dark .lead { color: var(--ink-2); }
[data-stats="2"] .stats, [data-stats="2"] .stat { border-color: var(--line); }

[data-stats="3"] .section--dark { background: #f4f2ec; color: #0e1110; }
[data-stats="3"] .section--dark .eyebrow, [data-stats="3"] .stat b { color: #14685b; }
[data-stats="3"] .stat span, [data-stats="3"] .section--dark .lead { color: #2f3634; }
[data-stats="3"] .stats, [data-stats="3"] .stat { border-color: #d6d1c5; }

[data-stats="4"] .section--dark { background: #17695b; color: #ffffff; }
[data-stats="4"] .section--dark .eyebrow { color: #bfeee3; }
[data-stats="4"] .stat b { color: #ffffff; }
[data-stats="4"] .stat span, [data-stats="4"] .section--dark .lead { color: #e3f5f0; }
[data-stats="4"] .stats, [data-stats="4"] .stat { border-color: rgba(255, 255, 255, .28); }
[data-stats] .stat span { font-size: 1.02rem; font-weight: 500; }

/* 5 · Vert fondu : le vert profond en haut, qui se fond vers le noir de la section suivante */
[data-stats="5"] .section--dark { background: linear-gradient(180deg, #0f3a30 0%, #0c2620 38%, var(--white) 100%); color: #e9f3f0; }
[data-stats="5"] .section--dark .eyebrow, [data-stats="5"] .stat b { color: var(--accent); }
[data-stats="5"] .stat span, [data-stats="5"] .section--dark .lead { color: #cfe0db; }
[data-stats="5"] .stats, [data-stats="5"] .stat { border-color: rgba(44, 195, 167, .2); }

/* ===== Essais de disposition des témoignages (maquette) : html[data-temo="1..7"] ; 1 = grille ===== */
.switch--2 { bottom: 62px; }
.switch[data-active="true"] { border-color: var(--accent); }
.t-solo, .t-bands, .t-cols-head { display: none; }

/* 2 · Vedette : une seule grande citation, qui change toutes les 6 secondes */
[data-temo="2"] .t-grid, [data-temo="2"] .t-more-wrap, [data-temo="4"] .t-grid, [data-temo="4"] .t-more-wrap { display: none; }
[data-temo="2"] .t-solo { display: block; max-width: 980px; margin-inline: auto; text-align: center; }
.t-slides { display: grid; }
.t-slide { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .6s; }
.t-slide.on { opacity: 1; visibility: visible; }
.t-slide blockquote { margin: 0; font-family: var(--serif); font-weight: 600; letter-spacing: -0.02em; font-size: clamp(1.6rem, 3.4vw, 2.7rem); line-height: 1.2; }
.t-slide figcaption { margin-top: 28px; color: var(--accent); font-weight: 700; font-size: 0.95rem; }
.t-dots { display: flex; gap: 10px; justify-content: center; margin-top: 36px; }
.t-dots button { width: 34px; height: 4px; border: 0; border-radius: 2px; background: var(--line); cursor: pointer; padding: 0; }
.t-dots button[aria-pressed="true"] { background: var(--accent); }

/* 3 · Deux colonnes : les entreprises à gauche, les candidats à droite */
[data-temo="3"] .t-cols-head { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 16px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
[data-temo="3"] .t-grid { grid-template-columns: 1fr 1fr; grid-auto-flow: dense; }
[data-temo="3"] .t-card[data-kind="entreprise"] { grid-column: 1; }
[data-temo="3"] .t-card[data-kind="candidat"] { grid-column: 2; }

/* 4 · Défilé : deux bandes de témoignages qui défilent, comme les postes du haut de page */
[data-temo="4"] .t-bands { display: grid; gap: 20px; margin-top: 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.t-band { display: flex; gap: 20px; width: max-content; animation: slide 150s linear infinite; }
.t-band--rev { animation-direction: reverse; animation-duration: 170s; }
.t-bands:hover .t-band { animation-play-state: paused; }
.t-band .t-card { flex: 0 0 380px; min-height: 0; }
.t-band .t-card[hidden] { display: flex; }
.t-band .t-card blockquote { font-size: 1.02rem; }

/* 5 · Une + liste : une grande citation à gauche, cinq courtes à droite */
[data-temo="5"] .t-grid { grid-template-columns: 1.1fr 1fr; column-gap: clamp(28px, 5vw, 72px); row-gap: 0; align-items: start; }
[data-temo="5"] .t-card { background: none; padding: 22px 0; border-radius: 0; border-bottom: 1px solid var(--line); grid-column: 2; gap: 14px; }
[data-temo="5"] .t-card:first-child { grid-column: 1; grid-row: 1 / span 5; border: 0; padding: 0; position: sticky; top: 110px; }
[data-temo="5"] .t-card:first-child blockquote { font-family: var(--serif); font-weight: 600; letter-spacing: -0.02em; font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.18; }
[data-temo="5"] .t-card:first-child::before { content: "“"; font-family: var(--serif); font-weight: 800; font-size: 6rem; line-height: .6; color: var(--accent); }

/* 6 · Mosaïque : hauteurs libres, une carte verte pour casser le rythme */
[data-temo="6"] .t-grid { display: block; columns: 3; column-gap: 20px; }
[data-temo="6"] .t-card { break-inside: avoid; margin-bottom: 20px; }
[data-temo="6"] .t-card:nth-child(4n + 1) blockquote { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; line-height: 1.22; letter-spacing: -0.015em; }
[data-temo="6"] .t-card:nth-child(5n + 2) { background: var(--accent); color: #06130f; }
[data-temo="6"] .t-card:nth-child(5n + 2) .t-who span, [data-temo="6"] .t-card:nth-child(5n + 2) .t-who b { color: #06130f; }
[data-temo="6"] .t-card:nth-child(5n + 2) .avatar { background: #06130f; color: var(--accent); }

/* 7 · Grandes citations : trois par ligne, sans carte, le texte en grand et un filet vert */
[data-temo="7"] .t-grid { gap: 44px 40px; }
[data-temo="7"] .t-card { background: none; padding: 22px 0 0; border-radius: 0; border-top: 2px solid var(--accent); }
[data-temo="7"] .t-card blockquote { font-family: var(--serif); font-weight: 600; font-size: 1.36rem; line-height: 1.28; letter-spacing: -0.015em; }

@media (max-width: 960px) { [data-temo="6"] .t-grid { columns: 2; } [data-temo="5"] .t-grid { grid-template-columns: 1fr; } [data-temo="5"] .t-card, [data-temo="5"] .t-card:first-child { grid-column: 1; grid-row: auto; position: static; } [data-temo="5"] .t-card:first-child { padding-bottom: 24px; } }
@media (max-width: 640px) { [data-temo="6"] .t-grid { columns: 1; } [data-temo="3"] .t-grid, [data-temo="3"] .t-cols-head { grid-template-columns: 1fr; } [data-temo="3"] .t-card[data-kind] { grid-column: 1; } [data-temo="3"] .t-cols-head span:last-child { display: none; } .t-band .t-card { flex-basis: 300px; } }
@media (prefers-reduced-motion: reduce) { .t-band { animation: none; } }
#temoignages { overflow-x: clip; }
.t-bands { overflow: hidden; }

/* ===== Essais du bandeau final de l'accueil (maquette) : html[data-cta="1..8"] ; 1 = bloc crème ===== */
.cta-split, .cta-lines { display: none; }
.cta .btns { position: relative; z-index: 1; }

/* 2 · Deux portes : une case par visiteur, sombre, filet vert au survol */
[data-cta="2"] .cta--one, [data-cta="7"] .cta--one, [data-cta="8"] .cta--one { display: none; }
[data-cta="2"] .cta-split, [data-cta="8"] .cta-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cta-half { display: flex; flex-direction: column; gap: 6px; padding: clamp(32px, 4.5vw, 60px); border: 1px solid var(--line); border-radius: 8px; background: var(--white); transition: border-color .3s, transform .3s, background .3s; }
.cta-half h2 { margin-bottom: 26px; }
.cta-half .more { color: var(--accent); }
.cta-half:hover { border-color: var(--accent); transform: translateY(-4px); }

/* 3 · Vert fondu : le même dégradé que le bloc chiffres, titre centré */
[data-cta="3"] .cta { background: linear-gradient(180deg, #0f3a30 0%, #0c2620 45%, var(--paper) 100%); color: var(--ink); flex-direction: column; text-align: center; justify-content: center; border: 1px solid rgba(44, 195, 167, .2); border-bottom: 0; }
[data-cta="3"] .cta::after { display: none; }
[data-cta="3"] .cta h2 em { color: var(--accent); }
[data-cta="3"] .cta .btn--light { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* 4 · Grand titre : pas de bloc, la trame de points et la lueur du haut de page */
[data-cta="4"] .cta-wrap { position: relative; overflow: hidden; padding: clamp(80px, 11vw, 150px) 0; }
[data-cta="4"] .cta-wrap::before { content: ""; position: absolute; inset: 0; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(44, 195, 167, .30), transparent 65%), radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.5px) 0 0 / 26px 26px; transition: background .15s; }
[data-cta="4"] .cta { background: none; color: var(--ink); flex-direction: column; text-align: center; justify-content: center; padding: 0; }
[data-cta="4"] .cta::after { display: none; }
[data-cta="4"] .cta h2 { font-size: clamp(2.4rem, 6vw, 5rem); max-width: 16ch !important; margin-inline: auto; }
[data-cta="4"] .cta h2 em { color: var(--accent); display: block; }
[data-cta="4"] .cta .btn--light { background: var(--ink); color: var(--white); border-color: var(--ink); }
[data-cta="4"] .cta .btn--light + .btn--light { background: transparent; color: var(--ink); }

/* 5 · Cadre : fond noir, filet fin, repères verts aux angles */
[data-cta="5"] .cta { background: none; color: var(--ink); border: 1px solid var(--line); border-radius: 0; }
[data-cta="5"] .cta::after { right: -1px; top: -1px; width: 22px; height: 22px; border-radius: 0; background: none; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); }
[data-cta="5"] .cta::before { content: ""; position: absolute; left: -1px; bottom: -1px; width: 22px; height: 22px; border-bottom: 2px solid var(--accent); border-left: 2px solid var(--accent); }
[data-cta="5"] .cta { overflow: visible; }
[data-cta="5"] .cta h2 em { color: var(--accent); }
[data-cta="5"] .cta .btn--light { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* 6 · Vert plein : aplat vert, texte noir, boutons noirs */
[data-cta="6"] .cta { background: var(--accent); color: #06130f; }
[data-cta="6"] .cta::after { background: radial-gradient(circle, rgba(255, 255, 255, .4), transparent 68%); }
[data-cta="6"] .cta h2 em { color: #ffffff; }
[data-cta="6"] .cta .btn--light { background: #06130f; color: #ffffff; border-color: #06130f; }

/* 7 · Deux lignes : deux très grandes questions cliquables, une par ligne */
[data-cta="7"] .cta-lines { display: block; border-top: 1px solid var(--line); }
.cta-lines a { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(26px, 4vw, 48px) 0; border-bottom: 1px solid var(--line); transition: color .3s, padding .3s; }
.cta-lines h2 { font-size: clamp(2rem, 5.6vw, 4.6rem); }
.cta-lines span { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; white-space: nowrap; color: var(--muted); transition: color .3s; }
.cta-lines svg { width: 22px; height: 22px; transition: transform .3s; }
.cta-lines a:hover { color: var(--accent); padding-left: 18px; }
.cta-lines a:hover span { color: var(--accent); } .cta-lines a:hover svg { transform: translateX(8px); }

/* 8 · Portes vertes : les deux cases du 2, l'une en vert plein, l'autre en crème */
[data-cta="8"] .cta-half:first-child { background: var(--accent); border-color: var(--accent); color: #06130f; }
[data-cta="8"] .cta-half:first-child .eyebrow, [data-cta="8"] .cta-half:first-child .more { color: #06130f; }
[data-cta="8"] .cta-half:last-child { background: #f4f2ec; border-color: #f4f2ec; color: #0e1110; }
[data-cta="8"] .cta-half:last-child .eyebrow, [data-cta="8"] .cta-half:last-child .more { color: #14685b; }

@media (max-width: 760px) { [data-cta="2"] .cta-split, [data-cta="8"] .cta-split { grid-template-columns: 1fr; } .cta-lines a { flex-direction: column; align-items: flex-start; gap: 10px; } }

/* Hauts de page intérieurs : rappel de l'accueil (trame de points, lueur verte qui suit la souris) */
.page-hero { position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px circle at var(--mx, 28%) var(--my, 42%), rgba(44, 195, 167, .26), transparent 65%), radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.5px) 0 0 / 26px 26px; transition: background .15s; }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .figures { background: rgba(20, 24, 23, .86); }

/* Essai sur l'espace candidat seulement (demande de Pierre) : pas de trame de points, lueur plus discrète */
.page-hero--calm::before { background: radial-gradient(520px circle at var(--mx, 28%) var(--my, 42%), rgba(44, 195, 167, .12), transparent 65%); }

/* Tableau de chiffres (Espace Entreprise) : chaque chiffre est centré en hauteur face à son texte */
.figures:not(.figures--stack) div { align-items: center; }
.figures:not(.figures--stack) b { line-height: 1.1; }
/* … et centré en largeur dans sa colonne : autant d'espace entre le bord du cadre et le chiffre qu'entre le chiffre et son texte */
.figures:not(.figures--stack) { --pad: clamp(24px, 3vw, 40px); padding-inline: var(--pad); }
.figures:not(.figures--stack) div { gap: var(--pad); }
.figures:not(.figures--stack) b { text-align: center; flex-basis: 42%; }
@media (max-width: 640px) { .figures:not(.figures--stack) b { text-align: left; } }

/* Pied de page compact : une seule ligne (marque, liens, contact), puis une ligne fine */
.footer, [data-theme="b"] .footer { padding: 26px 0 16px; font-size: 0.9rem; }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 20px 36px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.footer .brand img { width: 36px; height: 36px; }
.footer .brand b { font-size: 1.12rem; }
.foot-nav, .foot-contact { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 26px; }
.foot-contact { gap: 8px 20px; }
.foot-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.footer .base { padding-top: 14px; font-size: 0.8rem; }
@media (max-width: 960px) { .foot-row { flex-direction: column; align-items: flex-start; } }

/* Pied de page, version finale : deux lignes fines (marque + liens, puis contact + mentions) */
.footer, [data-theme="b"] .footer { padding: 20px 0 14px; }
.foot-row { padding-bottom: 14px; }
.footer .base { align-items: center; padding-top: 12px; }
.footer .base .foot-contact { font-size: 0.86rem; color: #b9c1be; }

/* ===== Essais de disposition de « Notre méthode » (maquette) : html[data-methode="1..7"] ; 1 = grille ===== */
.steps-phases { display: none; }

/* 2 · Frise verticale : une ligne, un rond numéroté par étape */
[data-methode="2"] .steps { grid-template-columns: 1fr; gap: 0; max-width: 760px; }
[data-methode="2"] .step { background: none; border-radius: 0; padding: 4px 0 34px 68px; position: relative; }
[data-methode="2"] .step::before { position: absolute; left: 0; top: 0; width: 42px; height: 42px; margin: 0; border: 1px solid var(--accent); border-radius: 50%; display: grid; place-items: center; font-size: 0.92rem; background: var(--white); z-index: 1; }
[data-methode="2"] .step::after { content: ""; position: absolute; left: 21px; top: 42px; bottom: 0; width: 1px; background: var(--line); }
[data-methode="2"] .step:last-child::after { display: none; }
[data-methode="2"] .step h3 { font-size: 1.2rem; padding-top: 8px; }

/* 3 · Trois phases : les neuf étapes rangées en trois colonnes titrées */
[data-methode="3"] .steps-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 14px; }
[data-methode="3"] .steps-phases span { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--accent); padding-bottom: 12px; border-bottom: 2px solid var(--accent); }
[data-methode="3"] .steps { grid-auto-flow: dense; gap: 12px 18px; }
[data-methode="3"] .step { padding: 18px 20px; display: flex; gap: 16px; align-items: baseline; }
[data-methode="3"] .step::before { margin: 0; font-size: 1.05rem; }
[data-methode="3"] .step[data-phase="1"] { grid-column: 1; } [data-methode="3"] .step[data-phase="2"] { grid-column: 2; } [data-methode="3"] .step[data-phase="3"] { grid-column: 3; }

/* 4 · Liste : deux colonnes, numéro à gauche, filets fins, pas de cartes */
[data-methode="4"] .steps { grid-template-columns: 1fr 1fr; gap: 0 56px; border-top: 1px solid var(--line); }
[data-methode="4"] .step { background: none; border-radius: 0; padding: 24px 0; border-bottom: 1px solid var(--line); display: flex; gap: 24px; align-items: baseline; }
[data-methode="4"] .step::before { margin: 0; min-width: 34px; }
[data-methode="4"] .step h3 { font-size: 1.12rem; }

/* 5 · Ruban : les étapes se suivent sur une ligne horizontale que l'on fait défiler */
[data-methode="5"] .steps { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x proximity; padding-top: 8px; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; padding-bottom: 18px; }
[data-methode="5"] .step { flex: 0 0 270px; background: none; border-radius: 0; border-top: 2px solid var(--line); padding: 28px 28px 6px 0; position: relative; scroll-snap-align: start; }
[data-methode="5"] .step::after { content: ""; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
[data-methode="5"] .step::before { margin-bottom: 14px; font-size: 2rem; }

/* 6 · Grands numéros : le numéro en très grand, dessiné au trait, derrière le texte */
[data-methode="6"] .step { position: relative; overflow: hidden; min-height: 176px; display: flex; align-items: flex-end; border: 1px solid var(--line); }
[data-methode="6"] .step::before { position: absolute; right: 12px; top: -22px; margin: 0; font-size: 8rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(44, 195, 167, .5); }
[data-methode="6"] .step h3 { position: relative; max-width: 80%; }

/* 7 · Escalier : chaque étape descend d'un cran, comme une progression */
[data-methode="7"] .steps { grid-template-columns: 1fr; gap: 10px; }
[data-methode="7"] .step { display: flex; gap: 22px; align-items: baseline; padding: 18px 24px; width: min(100%, 520px); }
[data-methode="7"] .step::before { margin: 0; }
[data-methode="7"] .step:nth-child(1) { margin-left: 0; } [data-methode="7"] .step:nth-child(2) { margin-left: 7%; } [data-methode="7"] .step:nth-child(3) { margin-left: 14%; }
[data-methode="7"] .step:nth-child(4) { margin-left: 21%; } [data-methode="7"] .step:nth-child(5) { margin-left: 28%; } [data-methode="7"] .step:nth-child(6) { margin-left: 35%; }
[data-methode="7"] .step:nth-child(7) { margin-left: 42%; } [data-methode="7"] .step:nth-child(8) { margin-left: 49%; } [data-methode="7"] .step:nth-child(9) { margin-left: 56%; border: 1px solid var(--accent); }

@media (max-width: 760px) { [data-methode="3"] .steps, [data-methode="3"] .steps-phases, [data-methode="4"] .steps { grid-template-columns: 1fr; } [data-methode="3"] .step[data-phase] { grid-column: 1; } [data-methode="3"] .steps-phases span:not(:first-child) { display: none; } [data-methode="7"] .step { margin-left: 0 !important; width: 100%; } }

/* ===== Méthode, essais « temps » : 8 cadran, 9 boucle, 10 chrono ===== */
.m-dial, .m-loop, .m-chrono { display: none; }
[data-methode="8"] .steps, [data-methode="9"] .steps, [data-methode="10"] .steps { display: none; }

/* 8 · Cadran : une horloge à neuf graduations, l'aiguille passe d'une étape à l'autre */
[data-methode="8"] .m-dial { display: grid; grid-template-columns: minmax(280px, 440px) 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.dial { position: relative; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line); background: radial-gradient(circle, rgba(44, 195, 167, .10), transparent 62%); }
.dial::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 1px dashed rgba(44, 195, 167, .35); }
.dial-ring i { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-weight: 700; font-size: 0.86rem; color: var(--muted); background: var(--white); border: 1px solid var(--line); transform: rotate(var(--a)) translateY(-205%) rotate(calc(-1 * var(--a))); transform: rotate(var(--a)) translateY(calc(-1 * var(--r, 190px))) rotate(calc(-1 * var(--a))); transition: background .3s, color .3s, border-color .3s; }
.dial-ring i.on { background: var(--accent); color: #06130f; border-color: var(--accent); }
.dial-hand { position: absolute; left: 50%; bottom: 50%; width: 2px; height: 34%; margin-left: -1px; background: var(--accent); transform-origin: 50% 100%; transform: rotate(var(--hand, 0deg)); transition: transform .8s cubic-bezier(.3, 1.3, .5, 1); border-radius: 2px; }
.dial-hand::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--accent); }
.dial-center { position: absolute; left: 50%; top: 66%; transform: translate(-50%, -50%); text-align: center; width: 60%; }
.dial-center b { display: block; font-family: var(--serif); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -0.03em; color: var(--accent); }
.dial-center span { font-size: 0.82rem; color: var(--muted); }
.dial-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dial-list li { display: flex; gap: 18px; align-items: baseline; padding: 12px 16px; border-radius: 6px; color: var(--muted); font-weight: 600; cursor: default; transition: background .3s, color .3s; }
.dial-list li b { font-family: var(--serif); color: var(--accent); min-width: 28px; }
.dial-list li.on { background: var(--paper); color: var(--ink); }

/* 9 · Boucle : les neuf étapes autour d'un anneau */
[data-methode="9"] .m-loop { display: block; position: relative; width: min(100%, 900px); aspect-ratio: 1.25; margin-inline: auto; }
.loop-ring { position: absolute; left: 50%; top: 50%; height: 72%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid var(--line); box-shadow: inset 0 0 0 26px rgba(44, 195, 167, .05); }
.loop-ring::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--accent); border-right-color: var(--accent); animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loop-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.loop-center b, .loop-center span { display: block; font-family: var(--serif); font-weight: 700; letter-spacing: -0.03em; font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.1; }
.loop-center span { color: var(--accent); }
.loop-item { position: absolute; display: flex; align-items: center; gap: 12px; width: 230px; font-weight: 600; font-size: 0.93rem; line-height: 1.3; }
.m-loop .loop-item { left: calc(50% + (var(--x, 0) * 1%)); }
.loop-item i { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #06130f; font-style: normal; font-weight: 800; font-size: 0.82rem; }
.loop-item--r { transform: translate(-19px, -50%); }
.loop-item--l { transform: translate(calc(-100% + 19px), -50%); flex-direction: row-reverse; text-align: right; }
.loop-item--c { transform: translate(-19px, -50%); }

/* 10 · Chrono : une ligne de temps, trois repères, les étapes rangées dessous */
[data-methode="10"] .m-chrono { display: grid; grid-template-columns: 3fr 4fr 2fr; gap: 0; }
.chrono-col { border-top: 2px solid var(--line); padding: 0 24px 0 0; position: relative; }
.chrono-col::before { content: ""; position: absolute; left: 0; top: -8px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px rgba(44, 195, 167, .18); }
.chrono-mark { padding: 26px 0 22px; }
.chrono-mark b { display: block; font-family: var(--serif); font-weight: 700; letter-spacing: -0.03em; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1; color: var(--accent); }
.chrono-mark span { display: block; margin-top: 8px; font-size: 0.86rem; color: var(--muted); }
.chrono-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.chrono-col li { display: flex; gap: 14px; align-items: baseline; background: var(--paper); border-radius: 6px; padding: 14px 16px; font-weight: 600; font-size: 0.95rem; line-height: 1.35; }
.chrono-col li b { font-family: var(--serif); color: var(--accent); }

@media (max-width: 860px) {
  [data-methode="8"] .m-dial { grid-template-columns: 1fr; } .dial { max-width: 340px; margin-inline: auto; width: 100%; }
  [data-methode="9"] .m-loop { aspect-ratio: auto; } .loop-ring, .loop-center { display: none; } .m-loop .loop-item { position: static; transform: none; width: auto; flex-direction: row; text-align: left; margin-bottom: 14px; }
  [data-methode="10"] .m-chrono { grid-template-columns: 1fr; gap: 28px; }
}
@media (prefers-reduced-motion: reduce) { .loop-ring::before { animation: none; } }

/* 9 · Boucle, corrigée : titre central à l'échelle du cercle, étapes bien plus visibles */
.loop-center b, .loop-center span { font-size: clamp(1.9rem, 4.4vw, 3.4rem); line-height: 1.02; }
.loop-item { width: 250px; font-size: 1.04rem; font-weight: 700; gap: 14px; }
.loop-item i { width: 52px; height: 52px; font-family: var(--serif); font-size: 1.15rem; box-shadow: 0 0 0 6px rgba(44, 195, 167, .16); }
.loop-item--r, .loop-item--c { transform: translate(-26px, -50%); }
.loop-item--l { transform: translate(calc(-100% + 26px), -50%); }
[data-methode="9"] .m-loop { width: min(100%, 1040px); aspect-ratio: 1.45; }
.loop-ring { height: 78%; }

/* ===== 11, 12, 13 · Boucles interactives : anneau de progression, centre qui change ===== */
.m-orb { display: none; }
[data-methode="11"] .steps, [data-methode="12"] .steps, [data-methode="13"] .steps { display: none; }
[data-methode="11"] .m-orb--etapes, [data-methode="12"] .m-orb--phases, [data-methode="13"] .m-orb--chrono { display: grid; grid-template-columns: minmax(300px, 520px) 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
[data-methode="11"] .m-orb--solo { grid-template-columns: minmax(300px, 600px); justify-content: center; }
.orb { position: relative; aspect-ratio: 1; }
.orb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.orb-track { fill: none; stroke: var(--line); stroke-width: 2; }
.orb-prog { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1068.14; stroke-dashoffset: 1068.14; transition: stroke-dashoffset .9s cubic-bezier(.3, .8, .3, 1); filter: drop-shadow(0 0 8px rgba(44, 195, 167, .55)); }
.orb-node { position: absolute; width: 50px; height: 50px; margin: -25px; border-radius: 50%; border: 2px solid var(--line); background: var(--white); color: var(--muted); font: 800 0.95rem var(--serif); cursor: pointer; transition: all .3s; padding: 0; }
.orb-node.done { border-color: var(--accent); color: var(--accent); }
.orb-node.on { background: var(--accent); border-color: var(--accent); color: #06130f; transform: scale(1.22); box-shadow: 0 0 0 8px rgba(44, 195, 167, .18); }
.m-orb--chrono .orb-node, .m-orb--phases .orb-node { width: 62px; height: 62px; margin: -31px; font-size: 0.9rem; }
.orb-dot { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: var(--line); transition: background .3s; }
.orb-dot.done { background: var(--accent); }
.orb-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 62%; text-align: center; }
.orb-center small { display: block; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.orb-center b { display: block; font-family: var(--serif); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; font-size: clamp(1.5rem, 3.1vw, 2.5rem); }
.m-orb--phases .orb-center b, .m-orb--chrono .orb-center b { font-size: clamp(2.2rem, 5vw, 4rem); color: var(--accent); }
.orb-center span { display: block; margin-top: 12px; color: var(--ink-2); font-weight: 600; }
.orb-panel { display: grid; gap: 14px; }
.orb-group { border: 1px solid var(--line); border-radius: 8px; padding: 20px 24px; opacity: .45; transition: opacity .3s, border-color .3s, background .3s; cursor: pointer; }
.orb-group.on { opacity: 1; border-color: var(--accent); background: var(--paper); }
.orb-group h3 { font-family: var(--serif); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; margin-bottom: 10px; }
.orb-group.on h3 { color: var(--accent); }
.orb-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.orb-group li { display: flex; gap: 12px; align-items: baseline; font-weight: 600; font-size: 0.95rem; }
.orb-group li b { font-family: var(--serif); color: var(--accent); }
@media (max-width: 860px) { [data-methode="11"] .m-orb--etapes, [data-methode="12"] .m-orb--phases, [data-methode="13"] .m-orb--chrono { grid-template-columns: 1fr; } .orb { max-width: 420px; width: 100%; margin-inline: auto; } .orb-node { width: 40px; height: 40px; margin: -20px; font-size: 0.8rem; } }

/* Retouches mobile (contrôle du 09/10/2026) */
@media (max-width: 640px) {
  .figures:not(.figures--stack) div { align-items: flex-start; }
  .hero--center .eyebrow::before, .hero--center .eyebrow::after { display: none; }
  [data-cta="4"] .cta h2 { font-size: clamp(2rem, 9vw, 2.6rem); }
}

/* Témoignages en défilé, version robuste : le défilement est piloté par le script (voir main.js), plus par une animation CSS.
   Cause du bug vu sur téléphone le 09/10/2026 : une bande animée de plus de 10 000 px de large n'était pas dessinée en entier, d'où des trous. */
.t-band, .t-band--rev { animation: none; }
.t-view { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.t-view::-webkit-scrollbar { display: none; }
.t-bands { overflow: visible; }

/* Chiffres clés sur téléphone : une colonne, le chiffre ne se coupe jamais */
.stat b, .hero-figures b { white-space: nowrap; }
@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr; }
  .stat { padding: 22px 20px; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; }
  .stat b { font-size: clamp(1.9rem, 9vw, 2.5rem); }
  .stat span { margin-top: 0; max-width: none; }
}
@media (max-width: 420px) {
  .stat { grid-template-columns: 1fr; row-gap: 8px; }
}

/* Bandes de postes du haut de page : même mécanisme que les témoignages (pas d'animation CSS sur une bande très large) */
.hero-jobs-row, .hero-jobs-row--rev { animation: none; }
.roll { overflow-x: hidden; }

/* Cas clients (essai du 10/10/2026) : un chiffre, un titre, le récit au clic */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 18px; transition: border-color .25s; }
.case:hover { border-color: var(--accent); }
.case[hidden] { display: none; }
.case-who { display: flex; align-items: center; gap: 12px; font-size: 0.92rem; }
.case-who img, .case-who .avatar { width: 40px; height: 40px; border-radius: 50%; background: #fff; object-fit: contain; flex: none; }
.case-who .avatar { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.case-fig { margin: 6px 0 0; }
.case-fig b { display: block; font-family: var(--serif); font-weight: 700; letter-spacing: -0.03em; font-size: clamp(2.4rem, 4vw, 3.3rem); line-height: 1; color: var(--accent); white-space: nowrap; }
.case-fig span { display: block; margin-top: 10px; color: var(--ink-2); font-size: 0.98rem; line-height: 1.45; }
.case h3 { margin: 0; font-size: 1.15rem; line-height: 1.3; padding-top: 16px; border-top: 1px solid var(--line); }
.case details { margin-top: auto; }
.case summary { cursor: pointer; color: var(--accent); font-weight: 700; font-size: 0.92rem; list-style: none; }
.case summary::-webkit-details-marker { display: none; }
.case summary::after { content: " +"; }
.case details[open] summary::after { content: " −"; }
.case details p { margin: 12px 0 0; color: var(--ink-2); font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 960px) { .cases { grid-template-columns: 1fr; } }
@media (min-width: 961px) { .case:last-child:nth-child(3n+1) { grid-column: 2; } }
.section--white .case { background: var(--paper); }

/* ===== Formulaires Contact Form 7 dans le nouveau design ===== */
.wpcf7 form.f { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wpcf7 form.f > fieldset, .wpcf7 form.f > div[style*="display: none"], .wpcf7 form.f > .hidden-fields-container { display: none; }
.wpcf7-form-control-wrap { display: block; }
.f select { font: inherit; font-weight: 500; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--white); color: var(--ink); width: 100%; }
.f input[type="submit"].btn { width: auto; justify-self: start; padding: 15px 30px; border: 1px solid var(--ink); background: var(--ink); color: var(--white); font-weight: 700; border-radius: 6px; cursor: pointer; }
.f input[type="submit"].btn:hover { background: var(--accent); border-color: var(--accent); }
.f .wpcf7-not-valid { border-color: #ff8f8f !important; }
.f .wpcf7-not-valid-tip { display: block; margin-top: 6px; color: #ff8f8f; font-size: 0.8rem; font-weight: 600; }
.f .wpcf7-response-output { grid-column: 1 / -1; margin: 0 !important; padding: 14px 16px !important; border: 0 !important; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 0.93rem; }
.f.invalid .wpcf7-response-output, .f.failed .wpcf7-response-output, .f.unaccepted .wpcf7-response-output, .f.spam .wpcf7-response-output { background: rgba(255, 143, 143, .12); color: #ff8f8f; }
.f .wpcf7-response-output:empty { display: none; }
.f .wpcf7-spinner { align-self: center; }
.screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 640px) { .wpcf7 form.f { grid-template-columns: 1fr; } }
/* Barre d'administration WordPress : l'en-tête collant passe dessous */
body.srh.admin-bar .header, .admin-bar .header { top: 32px; }
.grecaptcha-badge { z-index: 60; }