/* ==========================================================================
   Coccinet — feuille commune (V2)
   Composants nommés pour un découpage en parties de thème WordPress :
   site-header / site-footer / c-* (blocs de section) / u-* (utilitaires)
   ========================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: var(--weight-semibold); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); text-wrap: balance; }
p { margin: 0; }
p, li { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
figure, blockquote { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.c-hero :focus-visible, .config-panel :focus-visible { outline-color: var(--focus-ring-on-dark); }
::selection { background: var(--c-champagne); color: var(--c-ink); }

.u-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.u-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.u-muted { color: var(--text-muted); }

.icon { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
.icon--lg { width: 32px; height: 32px; }

/* Contenu manquant (prototype) : visible, mais discret */
.todo {
  color: var(--accent-ink);
  font-size: 0.875em;
  font-weight: var(--weight-medium);
  font-style: normal;
  letter-spacing: 0;
  border-bottom: 1px dashed currentColor;
}
.todo::before { content: "["; }
.todo::after { content: "]"; }

/* ---------- Lien d'évitement ---------- */
.skip-link {
  position: absolute; left: var(--space-4); top: var(--space-2); z-index: var(--z-skip);
  background: var(--c-ink); color: var(--c-white); padding: var(--space-3) var(--space-4);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- Boutons et liens d'action ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 52px; padding: 0 var(--space-6);
  border: 1.5px solid transparent; border-radius: var(--radius-pill);
  font-weight: var(--weight-medium); font-size: var(--text-body); line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-150) var(--ease-standard), border-color var(--dur-150) var(--ease-standard), color var(--dur-150) var(--ease-standard);
}
.btn--primary { background: var(--action); color: var(--action-text); }
.btn--primary:hover { background: var(--action-hover); }
.btn--secondary { background: transparent; border-color: var(--c-petrol); color: var(--c-petrol); }
.btn--secondary:hover { background: var(--c-petrol); color: var(--c-white); }
.btn--on-dark { background: var(--c-white); color: var(--c-ink); }
.btn--on-dark:hover { background: var(--c-linen); }
.btn--sm { min-height: var(--target-min); padding: 0 var(--space-5); font-size: var(--text-secondary); }
.btn[aria-busy="true"] { cursor: progress; }
.btn .spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.link-action {
  display: inline-flex; align-items: center; min-height: var(--target-min);
  font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 0.35em;
  text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-underline-offset var(--dur-200) var(--ease-out), text-decoration-color var(--dur-200) var(--ease-standard);
}

/* Survol : élévation d'un pixel et couleur plus profonde, sans ombre (illisible sur les fonds sombres), retour à plat au clic.
   Les actions principales portent une flèche qui avance de quelques pixels. Réservé aux appareils à pointeur. */
.btn { position: relative; transition: background-color var(--dur-200) var(--ease-standard), border-color var(--dur-200) var(--ease-standard), color var(--dur-200) var(--ease-standard), transform var(--dur-200) var(--ease-out); }
.btn--cta::after, .btn--next::after {
  content: ""; flex: none; width: 1em; height: 1em; margin-right: -0.15em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-300) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
  .btn--cta:hover::after, .btn--next:hover::after { transform: translateX(3px); }
  .link-action:hover { text-underline-offset: 0.2em; text-decoration-color: currentColor; }
}
.btn:active { transform: none; transition-duration: var(--dur-100); }
.btn[aria-busy="true"]::after { display: none; }

/* ---------- Points ---------- */
.dot { display: inline-block; width: var(--dot-size); height: var(--dot-size); border-radius: var(--radius-dot); border: 2px solid currentColor; flex: none; }
.dot--filled { background: currentColor; }
.dot--current { background: var(--marker-current); border-color: var(--marker-current); }
.dot-line { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--line-color, var(--c-ink)); flex: none; }

/* ==========================================================================
   site-header
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--surface-page); border-bottom: var(--border-hairline); }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 72px; }
.site-logo { display: inline-flex; align-items: center; min-height: var(--target-min); }
.site-logo img { width: 146px; height: 26px; }
.site-header__actions { display: flex; align-items: center; gap: var(--space-2); }
.site-header__poc { display: none; }
.nav-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); padding: 0 var(--space-3);
  background: none; border: 0; cursor: pointer; font-weight: var(--weight-medium);
}
.nav-toggle__icon { width: 18px; height: 12px; position: relative; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.nav-toggle__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 2px solid currentColor; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon { border-color: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 2px solid currentColor; transform: rotate(-45deg); }

.site-nav { display: none; }
.site-nav.is-open {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface-page); border-bottom: var(--border-hairline); box-shadow: var(--elev-2);
  max-height: calc(100dvh - 72px); overflow-y: auto; padding: var(--space-2) var(--gutter) var(--space-6);
}
.site-nav__list { list-style: none; }
.site-nav__item { border-bottom: var(--border-hairline); }
.site-nav__link, .site-nav__trigger {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 52px; padding: 0; background: none; border: 0; text-align: left;
  font-size: var(--text-lead); font-weight: var(--weight-medium); text-decoration: none; cursor: pointer;
}
.site-nav__trigger::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-150) var(--ease-standard); }
.site-nav__trigger[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
.site-nav__mobile-cta { margin-top: var(--space-5); }
.site-nav__mobile-cta .btn { width: 100%; }

@media (min-width: 1120px) {
  .site-header__poc { display: inline-flex; }
  .nav-toggle { display: none; }
  .site-header__bar { gap: var(--space-6); }
  .site-nav, .site-nav.is-open { display: block; position: static; box-shadow: none; border: 0; padding: 0; max-height: none; overflow: visible; margin-inline: auto; }
  .site-nav__list { display: flex; align-items: center; gap: var(--space-1); }
  .site-nav__item { border: 0; position: static; }
  .site-nav__link, .site-nav__trigger { min-height: var(--target-min); padding: 0 var(--space-3); font-size: var(--text-body); width: auto; gap: var(--space-2); }
  .site-nav__link:hover, .site-nav__trigger:hover { text-decoration: underline; text-underline-offset: 0.3em; }
  .site-nav__trigger::after { width: 6px; height: 6px; }
  .site-nav__mobile-cta { display: none; }
}


/* ---------- Méga-menus (Expertises, Secteurs) ---------- */
.mega { padding: var(--space-2) 0 var(--space-5); }
.mega__intro { display: none; }
.mega__grid { list-style: none; display: grid; gap: var(--space-1); }
.mega__item { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-3); align-items: start; padding: var(--space-3); margin-inline: calc(var(--space-3) * -1); border-radius: var(--radius-control); text-decoration: none; transition: background-color var(--dur-150) var(--ease-standard); }
.mega__item .icon { color: var(--accent-ink); }
.mega__item b { display: block; font-weight: var(--weight-semibold); }
.mega__item b + span { display: block; font-size: var(--text-secondary); color: var(--text-muted); line-height: 1.4; margin-top: 2px; }
.mega__item:hover { background: var(--surface-alt); }
.mega__flag { display: inline-block; margin-left: var(--space-2); padding: 0 8px; border-radius: var(--radius-pill); background: var(--c-champagne); color: var(--c-ink); font-size: var(--text-meta); font-weight: var(--weight-semibold); vertical-align: 2px; }
.mega__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--border-hairline); font-size: var(--text-secondary); }
.mega__foot span { color: var(--text-muted); }
.mega__foot a { display: inline-flex; align-items: center; min-height: var(--target-min); font-weight: var(--weight-medium); }
@media (min-width: 1120px) {
  .mega { position: absolute; left: 0; right: 0; top: 100%; padding: 0; background: var(--surface-page); border-top: var(--border-hairline); border-bottom: var(--border-hairline); box-shadow: var(--elev-2); }
  .mega__inner { max-width: var(--container); margin-inline: auto; padding: var(--space-7) var(--gutter); display: grid; grid-template-columns: 18rem 1fr; gap: var(--space-4) var(--space-8); }
  .mega__intro { display: grid; gap: var(--space-3); align-content: start; }
  .mega__title { font-size: var(--text-h4); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
  .mega__text { color: var(--text-muted); }
  .mega__grid { gap: var(--space-2) var(--space-5); }
  .mega__grid--2 { grid-template-columns: repeat(2, 1fr); }
  .mega__grid--3 { grid-template-columns: repeat(3, 1fr); }
  .mega__item { margin: 0; padding: var(--space-4); }
  .mega__foot { grid-column: 2; margin-top: 0; }
}

/* ==========================================================================
   Sections communes
   ========================================================================== */
.c-section { padding-block: var(--section-gap); }
.c-section--alt { background: var(--surface-alt); }
.c-section__head { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); max-width: 760px; }
.c-section__head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3) var(--space-6); }
.c-section__title { font-size: var(--text-h2); letter-spacing: var(--tracking-display); line-height: 1.12; }
.c-section__intro { font-size: var(--text-lead); color: var(--text-muted); max-width: 62ch; }
@media (min-width: 1024px) { .c-section__head { margin-bottom: var(--space-8); } }

/* ==========================================================================
   c-hero — le message qui s'adresse à vous (variante claire : html[data-hero="light"])
   ========================================================================== */
.c-hero { background: var(--surface-dark); color: var(--text-on-dark); }
.c-hero__inner { display: grid; gap: var(--space-7); padding-block: var(--space-8) var(--space-6); }
.c-hero__kicker { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); color: var(--c-on-dark-muted); }
.c-hero__kicker i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-red); box-shadow: 0 0 0 3px var(--c-white); }
.c-hero__title { font-size: clamp(2.5rem, 1.3rem + 5vw, 5.5rem); line-height: 1.03; letter-spacing: -0.04em; max-width: 17ch; }
.rot { display: block; position: relative; height: 1.16em; overflow: hidden; }
.rot > span:not(.rot__bar) { position: absolute; left: 0; top: 0; white-space: nowrap; line-height: 1.05; visibility: hidden; }
.rot > span.is-on, .rot > span.is-out { visibility: visible; }
.rot .ch { display: inline-block; transform: translateY(105%); transition: transform var(--dur-300) var(--ease-out); transition-delay: calc(var(--c) * 18ms); }
.rot > span.is-on .ch { transform: none; }
.rot > span.is-out .ch { transform: translateY(-105%); transition-timing-function: var(--ease-in); transition-duration: var(--dur-200); transition-delay: calc(var(--c) * 10ms); }
.rot__bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 0.06em; background: var(--c-champagne); transform-origin: left; transform: scaleX(var(--s, 0)); transition: transform var(--dur-300) var(--ease-out) 120ms; }

/* Barre de progression « stories » + pause */
.rot-nav { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6); max-width: 720px; }
.rot-nav__list { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); flex: 1; }
.rot-nav__list button { display: grid; gap: var(--space-2); width: 100%; min-height: var(--target-min); padding: var(--space-2) 0 0; background: none; border: 0; color: var(--c-on-dark-muted); cursor: pointer; text-align: left; font-size: var(--text-secondary); font-weight: var(--weight-medium); }
.rot-nav__list button[aria-pressed="true"] { color: var(--c-white); }
.rot-nav__list button:hover { color: var(--c-white); }
.rot-nav__bar { display: block; height: 3px; border-radius: 3px; background: var(--c-on-dark-line); overflow: hidden; }
.rot-nav__bar i { display: block; height: 100%; background: var(--c-champagne); transform-origin: left; transform: scaleX(0); }
.rot-nav__list button.is-done .rot-nav__bar i { transform: scaleX(1); }
.rot-nav__list button[aria-pressed="true"] .rot-nav__bar i { transform: scaleX(var(--p, 0)); }
.rot-nav__list button.is-running .rot-nav__bar i { transform: scaleX(1); transition: transform var(--rot-ms, 3200ms) linear; }
.rot-nav__pause { flex: none; width: var(--target-min); height: var(--target-min); border-radius: 50%; border: 1.5px solid var(--c-on-dark-line); background: none; color: var(--c-white); cursor: pointer; display: grid; place-items: center; }
.rot-nav__pause:hover { border-color: var(--c-white); }
.rot-nav__pause svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rot-nav__pause .i-play { display: none; fill: currentColor; stroke: none; }
.rot-nav__pause[aria-pressed="true"] .i-pause { display: none; }
.rot-nav__pause[aria-pressed="true"] .i-play { display: block; }
@media (max-width: 599px) { .rot-nav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .rot-nav__list button { position: relative; align-content: center; } }
html[data-hero="light"] .rot-nav__list button { color: var(--text-muted); }
html[data-hero="light"] .rot-nav__list button[aria-pressed="true"], html[data-hero="light"] .rot-nav__list button:hover { color: var(--c-petrol); }
html[data-hero="light"] .rot-nav__bar { background: rgba(26, 23, 20, 0.14); }
html[data-hero="light"] .rot-nav__pause { color: var(--c-petrol); border-color: rgba(26, 23, 20, 0.2); }
.c-hero__row { display: grid; gap: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--c-on-dark-line); }
.c-hero__lead { color: var(--c-on-dark-muted); font-size: var(--text-lead); max-width: 52ch; }
.c-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); }
.c-hero .link-action { color: var(--c-white); }
.c-hero__logos { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-7); }
.c-hero__logos img { height: 22px; width: auto; filter: brightness(0) invert(1); opacity: 0.85; }
.c-hero__logos img.is-tall { height: 40px; }
.c-hero__logos-more a { font-size: var(--text-secondary); color: var(--c-on-dark-muted); text-underline-offset: 0.3em; }
@media (min-width: 900px) {
  .c-hero__inner { min-height: min(760px, calc(100vh - 72px)); align-content: space-between; padding-block: var(--space-9) var(--space-6); }
  .c-hero__row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-8); }
}



/* Variante claire (lin) */
html[data-hero="light"] .c-hero { background: var(--surface-alt); color: var(--text); }
html[data-hero="light"] .c-hero__lead, html[data-hero="light"] .c-hero__kicker, html[data-hero="light"] .c-hero__logos-more a { color: var(--text-muted); }
html[data-hero="light"] .c-hero__kicker i { box-shadow: 0 0 0 3px var(--surface-alt); }
html[data-hero="light"] .c-hero__title { color: var(--c-petrol); }
html[data-hero="light"] .c-hero__row { border-color: rgba(26, 23, 20, 0.16); }
html[data-hero="light"] .c-hero .link-action { color: var(--text); }
html[data-hero="light"] .c-hero .btn--on-dark { background: var(--action); color: var(--action-text); }
html[data-hero="light"] .c-hero__logos img { filter: brightness(0); opacity: 0.7; }
html[data-hero="light"] .c-hero :focus-visible { outline-color: var(--focus-ring); }

/* Sélecteur de prototype (retiré à l'intégration) */
.proto-switch { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1); background: var(--c-white); border: 1px solid var(--c-line-strong); border-radius: var(--radius-pill); box-shadow: var(--elev-2); font-size: var(--text-secondary); }
.proto-switch span { padding: 0 var(--space-2) 0 var(--space-3); color: var(--text-muted); }
.proto-switch button { min-height: 40px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: transparent; cursor: pointer; font-weight: var(--weight-medium); }
.proto-switch button[aria-pressed="true"] { background: var(--c-petrol); color: var(--c-white); }

/* ---------- c-clients ---------- */
.c-clients { border-bottom: var(--border-hairline); padding-block: var(--space-6); }
.c-clients__inner { display: grid; gap: var(--space-3); }
.c-clients__title { font-size: var(--text-secondary); font-weight: var(--weight-regular); color: var(--text-muted); letter-spacing: 0; }
.c-clients__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-weight: var(--weight-medium); font-size: var(--text-lead); }
@media (min-width: 1024px) { .c-clients__inner { grid-template-columns: 12rem 1fr; align-items: baseline; } }

/* ==========================================================================
   c-method — explorateur de méthode (onglets)
   ========================================================================== */
.method { display: grid; gap: var(--space-6); }

/* Légende : deux rails */
.method__legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); font-size: var(--text-secondary); color: var(--text-muted); }
.method__legend li { display: inline-flex; align-items: center; gap: var(--space-3); }
.method__legend .k-gate { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--c-petrol); box-shadow: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--c-champagne); flex: none; }
.method__legend .k-ia { width: 28px; height: 0; border-top: 3px dotted var(--c-petrol); flex: none; }

/* Piste : phases + étapes */
.track { position: relative; }
.track__phases { display: grid; grid-template-columns: 3fr 2fr 2fr; gap: var(--space-2); margin-bottom: var(--space-4); }
.track__phase { padding-bottom: var(--space-2); border-bottom: 2px solid var(--c-petrol); font-weight: var(--weight-semibold); font-size: var(--text-secondary); }
.track__phase span { font-weight: var(--weight-regular); color: var(--text-muted); margin-right: var(--space-1); }
.track__steps { list-style: none; position: relative; display: grid; grid-template-columns: repeat(5, 1fr); }
/* rail méthode (plein) et rail IA (pointillé) */
.track__steps::before, .track__steps::after { content: ""; position: absolute; left: calc(100% / 10); right: calc(100% / 10); transform-origin: left; }
.track__steps::before { top: 27px; height: 3px; background: var(--c-petrol); }
.track__steps::after { top: 71px; height: 0; border-top: 3px dotted var(--c-petrol); }
.track__tab {
  position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: var(--space-2); width: 100%;
  padding: 0 2px var(--space-2); background: none; border: 0; cursor: pointer; text-align: center; color: var(--text);
}
.track__node { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-page); border: 2px solid var(--c-petrol); color: var(--c-petrol); transition: background-color var(--dur-150) var(--ease-standard), color var(--dur-150) var(--ease-standard), transform var(--dur-150) var(--ease-standard); }
.track__node .icon { width: 24px; height: 24px; }
.track__tab--gate .track__node { box-shadow: 0 0 0 5px var(--surface-page), 0 0 0 8px var(--c-champagne); }
.track__ia { width: 12px; height: 12px; margin-top: 2px; border-radius: 50%; background: var(--c-petrol); }
.track__label { font-size: var(--text-secondary); font-weight: var(--weight-medium); line-height: 1.3; max-width: 12ch; }
.track__num { display: block; font-size: var(--text-meta); color: var(--text-muted); font-weight: var(--weight-semibold); }
.track__tab:hover .track__node { transform: translateY(-2px); }
.track__tab[aria-selected="true"] .track__node { background: var(--c-petrol); border-color: var(--c-petrol); color: var(--c-white); transform: scale(1.08); }
.track__tab[aria-selected="true"] .track__num { color: var(--accent-ink); }
.track__tab[aria-selected="true"] .track__label { color: var(--c-petrol); font-weight: var(--weight-semibold); }

.track__tab:focus-visible { outline: none; }
.track__tab:focus-visible .track__node { outline: var(--focus-outline); outline-offset: 4px; }

/* Panneau de détail */
.method__panel { background-color: var(--surface-dark); color: var(--c-white); padding: var(--space-6) var(--space-5); display: grid; gap: var(--space-6); }
.method__panel[hidden] { display: none; }
.method__panel :focus-visible { outline-color: var(--focus-ring-on-dark); }
.panel__head { display: grid; gap: var(--space-2); }
.panel__phase { font-size: var(--text-secondary); color: var(--c-on-dark-muted); }
.panel__title { font-size: var(--text-h2); letter-spacing: var(--tracking-display); line-height: 1.05; }
.panel__title span { color: var(--c-champagne); margin-right: var(--space-3); }
.panel__gate { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; margin-top: var(--space-2); padding: 6px 14px 6px 8px; border-radius: var(--radius-pill); background: var(--c-champagne); color: var(--c-ink); font-size: var(--text-secondary); font-weight: var(--weight-semibold); }
.panel__gate::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--c-ink); }
.panel__cols { display: grid; gap: var(--space-5); margin: 0; }
.panel__col { padding-top: var(--space-4); border-top: 1px solid var(--c-on-dark-line); }
.panel__col dt { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-secondary); color: var(--c-on-dark-muted); margin-bottom: var(--space-2); }
.panel__col dt .icon { width: 18px; height: 18px; color: var(--c-champagne); }
.panel__col dd { margin: 0; font-size: var(--text-lead); line-height: 1.45; }
.panel__nav { display: flex; justify-content: space-between; gap: var(--space-3); }
.panel__nav button { min-height: var(--target-min); padding: 0 var(--space-4); background: transparent; color: var(--c-white); border: 1.5px solid var(--c-on-dark-line); border-radius: var(--radius-pill); cursor: pointer; font-weight: var(--weight-medium); }
.panel__nav button:hover { border-color: var(--c-white); }
.panel__nav button[disabled] { visibility: hidden; }
@media (min-width: 900px) {
  .method__panel { padding: var(--space-7); grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--space-8); }
  .panel__cols { grid-template-columns: repeat(3, 1fr); }
  .panel__nav { grid-column: 1 / -1; }
}

/* Mobile : piste compacte (nœuds seuls, libellé dans le panneau) */
@media (max-width: 899px) {
  .track__phases { display: none; }
  .track__node { width: 34px; height: 34px; }
  .track__node .icon { width: 16px; height: 16px; }
  .track__steps::before { top: 16px; }
  .track__steps::after { top: 49px; }
  .track__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .track__tab--gate .track__node { box-shadow: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--c-champagne); }
}

/* Sans JavaScript : toutes les étapes lisibles à la suite */
html:not(.js) .track { display: none; }
html:not(.js) .method__panel[hidden] { display: grid; }

/* Moment orchestré : les rails se tracent, les étapes se posent */
.js [data-schema] .track__steps::before,
.js [data-schema] .track__steps::after { transform: scaleX(0); transition: transform var(--dur-300) var(--ease-out); }
.js [data-schema] .track__steps::after { transition-delay: 300ms; }
.js [data-schema] .track__tab { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-200) var(--ease-out), transform var(--dur-200) var(--ease-out); transition-delay: calc(var(--i) * var(--stagger)); }
.js [data-schema].is-revealed .track__steps::before,
.js [data-schema].is-revealed .track__steps::after { transform: none; }
.js [data-schema].is-revealed .track__tab { opacity: 1; transform: none; }

.c-method__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.c-method__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); }
.todo-note { font-size: var(--text-secondary); }

/* ==========================================================================
   c-expertises
   ========================================================================== */
.feature { display: grid; gap: var(--space-6); padding: var(--space-6); background: var(--surface-page); border: 1px solid var(--c-line); }
.feature .icon--lg, .exp .icon--lg, .sector .icon--lg { color: var(--accent-ink); }
.feature__flag { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--accent-ink); }
.feature__title { margin-top: var(--space-2); font-size: var(--text-h3); }
.feature__title a, .exp__title a { text-decoration: none; }
.feature__title a:hover, .exp__title a:hover { text-decoration: underline; }
.feature__text { margin-top: var(--space-3); color: var(--text-muted); max-width: 52ch; }
.feature .link-action { margin-top: var(--space-3); }
.feature__list { list-style: none; border-top: var(--border-rule); align-self: end; }
.feature__list li { padding-block: var(--space-3); border-bottom: 1px solid var(--c-line); }
@media (min-width: 1024px) { .feature { grid-template-columns: 1.2fr 1fr; gap: var(--space-8); padding: var(--space-7); } }

.exp-grid { list-style: none; display: grid; gap: var(--space-6); margin-top: var(--space-7); }
.exp { display: grid; gap: var(--space-3); align-content: start; border-top: 1px solid var(--c-petrol); padding-top: var(--space-5); position: relative; }
.exp__title { font-size: var(--text-h4); }
.exp__title a::after { content: ""; position: absolute; inset: 0; }
.exp:has(:focus-visible) { outline: var(--focus-outline); outline-offset: 6px; }
.exp__title a:focus-visible { outline: none; }
.exp__text { color: var(--text-muted); }
@media (min-width: 768px) { .exp-grid { grid-template-columns: repeat(3, 1fr); } }

.sectors { margin-top: var(--space-8); display: grid; gap: var(--space-4); }
.sectors__title { font-size: var(--text-h4); }
.sectors__list { list-style: none; display: grid; gap: var(--space-3); }
.sector { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; padding: var(--space-5); background: var(--surface-page); border: 1px solid var(--c-line); text-decoration: none; transition: border-color var(--dur-150) var(--ease-standard); }
.sector:hover { border-color: var(--c-ink); }
.sector span { color: var(--text-muted); }
.sector b { display: block; color: var(--text); font-size: var(--text-lead); font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
@media (min-width: 768px) { .sectors__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .sectors__list { grid-template-columns: repeat(3, 1fr); } }
.sector small { display: block; margin-top: var(--space-2); font-size: var(--text-secondary); color: var(--accent-ink); font-weight: var(--weight-medium); }


/* ==========================================================================
   c-cases
   ========================================================================== */
.case-meta { font-size: var(--text-secondary); color: var(--text-muted); }
.case-feature { display: grid; gap: var(--space-6); }
.case-feature__media { overflow: hidden; background: var(--surface-alt); }
.case-feature__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.case-feature__body { display: grid; gap: var(--space-4); align-content: center; }
.case-feature__title { font-size: var(--text-h3); }
.case-feature__title a, .case-teaser__title a { text-decoration: none; }
.case-feature__title a:hover, .case-teaser__title a:hover { text-decoration: underline; }
.case-quote blockquote { font-size: 1.375rem; line-height: 1.35; letter-spacing: -0.01em; }
.case-quote figcaption { margin-top: var(--space-3); font-size: var(--text-secondary); color: var(--text-muted); }
@media (min-width: 1024px) { .case-feature { grid-template-columns: 1.4fr 1fr; gap: var(--space-8); } }

.case-grid { list-style: none; display: grid; gap: var(--space-7); margin-top: var(--space-8); }
@media (min-width: 900px) { .case-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.case-teaser { display: grid; gap: var(--space-3); align-content: start; }
.case-teaser__media { overflow: hidden; background: var(--surface-alt); }
.case-teaser__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.case-teaser__media--logo { aspect-ratio: 4 / 3; display: grid; place-items: center; }
.case-teaser__media--logo img { width: 45%; aspect-ratio: auto; object-fit: contain; }
.case-teaser__title { font-size: var(--text-h4); margin-top: var(--space-1); }
.case-teaser__summary { color: var(--text-muted); max-width: 56ch; }

/* ==========================================================================
   c-team
   ========================================================================== */
.c-team__head { display: grid; gap: var(--space-6); margin-bottom: var(--space-7); }
.c-team__intro { display: grid; gap: var(--space-4); align-content: end; }
.c-team__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 45%; }
.c-team__photo figcaption { margin-top: var(--space-3); font-size: var(--text-secondary); color: var(--text-muted); }
.people { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-4); }
.person img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--c-line); }
.person__name { margin-top: var(--space-3); font-weight: var(--weight-semibold); }
.person__role { font-size: var(--text-secondary); color: var(--text-muted); }
@media (min-width: 640px) { .people { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
  .c-team__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: end; margin-bottom: var(--space-8); }
  .people { grid-template-columns: repeat(5, 1fr); gap: var(--space-6) var(--space-5); }
}

/* ==========================================================================
   c-quotes
   ========================================================================== */
.quote-hero { max-width: 980px; }
.quote-hero blockquote { font-size: clamp(1.625rem, 1.1rem + 2vw, 2.625rem); font-weight: var(--weight-medium); line-height: 1.2; letter-spacing: -0.025em; }
.quote-hero figcaption, .quote figcaption { margin-top: var(--space-5); font-size: var(--text-secondary); color: var(--text-muted); }
.quote-hero figcaption b, .quote figcaption b { display: block; color: var(--text); font-size: var(--text-body); font-weight: var(--weight-semibold); }
.quote-pair { list-style: none; display: grid; gap: var(--space-7); margin-top: var(--space-8); padding-top: var(--space-7); border-top: var(--border-hairline); }
.quote blockquote { font-size: 1.25rem; line-height: 1.4; letter-spacing: -0.01em; }
@media (min-width: 900px) { .quote-pair { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }

/* ==========================================================================
   c-poc — configurateur
   ========================================================================== */
.c-poc { background: var(--surface-alt); }
.c-poc__head { display: grid; gap: var(--space-4); max-width: 760px; }
.c-poc__head .c-section__title { font-size: var(--text-h1); line-height: 1.05; }
.promise { list-style: none; display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: var(--space-7) 0; }
.promise li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-3); align-items: start; padding-top: var(--space-4); border-top: 1px solid var(--c-petrol); }
.promise .icon { grid-row: span 2; color: var(--accent-ink); }
.promise b { font-weight: var(--weight-semibold); }
.promise li > span { color: var(--text-muted); font-size: var(--text-secondary); }
@media (min-width: 640px) { .promise { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
@media (min-width: 1100px) { .promise { grid-template-columns: repeat(4, 1fr); } }

.configurator { display: grid; gap: var(--space-5); align-items: start; }
.configurator__form, .poc__done { background: var(--surface-page); border: 1px solid var(--c-line); padding: var(--space-5) var(--space-4); }
@media (min-width: 768px) { .configurator__form, .poc__done { padding: var(--space-7); } }
@media (min-width: 1100px) {
  .configurator { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-6); }
  .config-panel { position: sticky; top: 104px; grid-column: 2; grid-row: 1; }
  .poc__done { grid-column: 1; grid-row: 1; }
}

.config-panel { background-color: var(--surface-dark); background-image: var(--texture-points); color: var(--c-white); padding: var(--space-6); display: grid; gap: var(--space-4); }
.config-panel__title { font-size: var(--text-h4); }
.config-panel__list { margin: 0; border-top: 1px solid var(--c-on-dark-line); }
.config-panel__list > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--c-on-dark-line); font-size: var(--text-secondary); }
.config-panel__list dt { color: var(--c-on-dark-muted); }
.config-panel__list dd { margin: 0; color: var(--c-on-dark-muted); overflow-wrap: anywhere; }
.config-panel__list .is-set dd { color: var(--c-white); font-weight: var(--weight-medium); }
.config-panel__subtitle { font-weight: var(--weight-semibold); margin-top: var(--space-2); }
.config-panel__includes { list-style: none; display: grid; gap: var(--space-3); font-size: var(--text-secondary); }
.config-panel__includes li { display: grid; grid-template-columns: 14px 1fr; gap: var(--space-3); }
.config-panel__includes li::before { content: ""; width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; background: var(--accent-light); }
.config-panel__price { padding-top: var(--space-4); border-top: 1px solid var(--c-on-dark-line); font-size: var(--text-secondary); color: var(--c-on-dark-muted); }
.config-panel__price b { color: var(--c-white); font-size: var(--text-lead); }
.config-panel .todo, .c-hero .todo, .site-footer .todo { color: var(--c-on-dark-muted); }

.poc__progress { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.poc__dots { list-style: none; display: flex; gap: var(--space-2); }
.poc__dots li { color: var(--c-petrol); line-height: 0; }
.poc__progress-label { font-size: var(--text-secondary); color: var(--text-muted); }
.poc__step[hidden] { display: none; }
.poc__fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.poc__question { font-size: var(--text-h3); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-heading); padding: 0; margin-bottom: var(--space-5); }
.poc__question:focus { outline: none; }
.poc__question:focus-visible { outline: none; }
.poc__help { color: var(--text-muted); margin: calc(var(--space-3) * -1) 0 var(--space-5); }
.poc__prefilled { font-size: var(--text-secondary); color: var(--c-success); margin: calc(var(--space-3) * -1) 0 var(--space-4); }

/* Tuiles (étape 1) */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.tile, .choice { position: relative; }
.tile input, .choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tile label {
  display: grid; gap: var(--space-1); align-content: start; height: 100%; min-height: 128px; padding: var(--space-4);
  border: 1.5px solid var(--border-control); border-radius: var(--radius-control); background: var(--surface-page); cursor: pointer;
  transition: border-color var(--dur-150) var(--ease-standard), background-color var(--dur-150) var(--ease-standard), color var(--dur-150) var(--ease-standard);
}
.tile label .icon { color: var(--accent-ink); margin-bottom: var(--space-2); }
.tile__title { font-weight: var(--weight-semibold); line-height: 1.25; }
.tile label small { font-size: var(--text-secondary); color: var(--text-muted); line-height: 1.35; }
.tile input:hover + label { border-color: var(--c-ink); }
.tile input:checked + label { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-white); }
.tile input:checked + label .icon { color: var(--accent-light); }
.tile input:checked + label small { color: var(--c-line); }
.tile input:focus-visible + label, .choice input:focus-visible + label { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.tile--wide { grid-column: 1 / -1; }
.tile--wide label { min-height: 0; grid-template-columns: auto 1fr; column-gap: var(--space-3); align-items: center; }
.tile--wide label .icon { grid-row: span 2; margin: 0; }
@media (min-width: 768px) { .tiles { grid-template-columns: repeat(4, 1fr); } }

.choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.choice label {
  display: flex; align-items: center; min-height: 52px; padding: var(--space-2) var(--space-5);
  border: 1.5px solid var(--c-petrol); border-radius: var(--radius-pill); background: var(--surface-page);
  font-weight: var(--weight-medium); cursor: pointer; line-height: 1.3;
  transition: background-color var(--dur-150) var(--ease-standard), color var(--dur-150) var(--ease-standard);
}
.choice label .tile__title { font-weight: var(--weight-medium); }
.choice input:hover + label { background: var(--c-linen); }
.choice input:checked + label { background: var(--c-ink); color: var(--c-white); }

.field { display: grid; gap: var(--space-2); }
.field + .field { margin-top: var(--space-5); }
.field__label { font-weight: var(--weight-medium); }
.field__optional { font-weight: var(--weight-regular); color: var(--text-muted); }
.field__hint { font-size: var(--text-secondary); color: var(--text-muted); }
.field__input {
  width: 100%; min-height: 52px; padding: var(--space-3) var(--space-4);
  background: var(--surface-page); border: var(--border-input); border-radius: var(--radius-control);
  font-size: var(--text-body); line-height: var(--leading-body);
}
textarea.field__input { min-height: 160px; resize: vertical; }
.field__input:hover { border-color: var(--c-ink); }
/* Focus : un seul trait (bordure épaissie à 2px), pas d'outline décalé qui doublait la ligne */
.field__input:focus, .field__input:focus-visible { outline: none; border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); }
.field__input[aria-invalid="true"]:focus { border-color: var(--c-error); box-shadow: none; }
.field__input[aria-invalid="true"] { border-color: var(--c-error); border-width: 2px; }
.field__error { display: flex; gap: var(--space-2); align-items: baseline; color: var(--c-error); font-size: var(--text-secondary); font-weight: var(--weight-medium); }
.field__error[hidden] { display: none; }
.field__error::before { content: "!"; display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--c-error); color: var(--c-white); font-size: 12px; font-weight: var(--weight-semibold); transform: translateY(3px); }
.poc__fieldset > .field__error { margin: calc(var(--space-2) * -1) 0 var(--space-4); }
.field__count { font-size: var(--text-meta); color: var(--text-muted); justify-self: end; }
.field-row { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field-row + .field, .field + .field-row { margin-top: var(--space-5); }

.poc__example { margin: 0 0 var(--space-5); padding: var(--space-4); background: var(--surface-alt); border-left: 3px solid var(--c-champagne); font-size: var(--text-secondary); }
.poc__example b { display: block; font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }

.poc__nav { display: flex; flex-direction: column-reverse; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--c-line); }
.poc__nav .btn { width: 100%; }
@media (min-width: 640px) {
  .poc__nav { flex-direction: row; justify-content: space-between; align-items: center; }
  .poc__nav .btn { width: auto; }
  .poc__nav .btn--next { margin-left: auto; }
}
.poc__error-summary { margin-bottom: var(--space-5); padding: var(--space-4); border: 2px solid var(--c-error); color: var(--c-error); }
.poc__error-summary[hidden] { display: none; }
.poc__error-title { margin-bottom: var(--space-1); }
.poc__error-summary ul { padding-left: 1.2em; }
.poc__error-summary a { font-weight: var(--weight-medium); }

.recap { border-top: var(--border-rule); margin: 0; }
.recap__row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--c-line); }
.recap__row dt { font-size: var(--text-secondary); color: var(--text-muted); grid-column: 1; }
.recap__row dd { margin: 0; grid-column: 1; font-weight: var(--weight-medium); overflow-wrap: anywhere; white-space: pre-line; }
.recap__row .recap__edit { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.recap__edit { min-height: var(--target-min); padding: 0 var(--space-3); background: none; border: 0; text-decoration: underline; text-underline-offset: 0.3em; cursor: pointer; font-weight: var(--weight-medium); }

.poc__legal { margin-top: var(--space-5); font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--text-muted); max-width: 60ch; }
.poc__proto { margin-top: var(--space-5); padding: var(--space-3); border: 1px dashed var(--c-line-strong); font-size: var(--text-secondary); display: flex; align-items: center; gap: var(--space-2); }
.poc__proto input { width: 20px; height: 20px; accent-color: var(--c-ink); }

.poc__alert { padding: var(--space-4); border: 2px solid var(--c-error); margin-bottom: var(--space-5); }
.poc__alert[hidden] { display: none; }
.poc__alert p + p { margin-top: var(--space-2); }
.poc__alert-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

.poc__done { display: grid; gap: var(--space-5); }
.poc__done[hidden] { display: none; }
.poc__done-title { font-size: var(--text-h3); letter-spacing: var(--tracking-heading); max-width: 24ch; }
.poc__done-title:focus { outline: none; }
.poc__next { list-style: none; border-top: var(--border-rule); counter-reset: next; }
.poc__next li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-3); padding-block: var(--space-4); border-bottom: 1px solid var(--c-line); counter-increment: next; }
.poc__next li::before { content: counter(next, decimal-leading-zero); font-size: 1rem; font-weight: var(--weight-semibold); line-height: 1.5; color: var(--accent-ink); }
.poc__next b { font-weight: var(--weight-semibold); }

/* ---------- c-agency-strip ---------- */
.c-agency-strip { border-top: var(--border-hairline); padding-block: var(--space-5); }
.c-agency-strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); }
.c-agency-strip p { color: var(--text-muted); }
.c-agency-strip b { color: var(--text); font-weight: var(--weight-semibold); }

/* ==========================================================================
   site-footer
   ========================================================================== */
.site-footer { background-color: var(--surface-dark); background-image: var(--texture-points); color: var(--c-white); padding-block: var(--space-8) var(--space-6); font-size: var(--text-secondary); }
.site-footer .site-logo img { filter: brightness(0) invert(1); }
.site-footer :focus-visible { outline-color: var(--focus-ring-on-dark); }
.site-footer__sign { margin-top: var(--space-4); font-size: var(--text-h4); font-weight: var(--weight-semibold); letter-spacing: -0.02em; line-height: 1.25; }
.site-footer__grid { display: grid; gap: var(--space-7); }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer__title { font-size: var(--text-body); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); letter-spacing: 0; }
.site-footer__list { list-style: none; }
.site-footer__list a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; color: var(--c-on-dark-muted); }
.site-footer__list a:hover { color: var(--c-white); text-decoration: underline; }
.site-footer address { font-style: normal; line-height: 1.6; color: var(--c-on-dark-muted); }
.site-footer address + .site-footer__title { margin-top: var(--space-5); }
.site-footer__contact { margin-top: var(--space-2); line-height: 1.6; }
.site-footer__contact + .site-footer__title { margin-top: var(--space-5); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--c-on-dark-line); color: var(--c-on-dark-muted); }
.site-footer__bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
.site-footer__bottom a { display: inline-flex; align-items: center; min-height: var(--target-min); }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
.config-panel__note { font-size: var(--text-secondary); }
.poc__done:not([hidden]) { order: -1; }

/* ---------- Offres : sous-liens Apps (méga-menu) et grille de 4 ---------- */
.mega__sub { list-style: none; display: grid; margin: 0 0 var(--space-2) calc(32px + var(--space-3)); }
.mega__sub a { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; font-size: var(--text-secondary); font-weight: var(--weight-medium); text-decoration: none; }
.mega__sub a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
@media (min-width: 1120px) {
  .mega__cell--apps { grid-row: span 2; padding-bottom: var(--space-2); border-right: var(--border-hairline); }
  .mega__sub { margin-left: calc(var(--space-4) + 32px + var(--space-3)); }
}
@media (min-width: 1024px) { .exp-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.feature__list a { text-decoration: none; }
.feature__list a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
@media (min-width: 1120px) { #panel-offres .mega__grid--3 { grid-template-columns: 1.25fr 1fr 1fr; } }
.mega__sub a { white-space: nowrap; }

/* Sous-menu : apparition (panneau en fondu qui descend, puis entrées en léger décalé) */
@keyframes mega-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes mega-item-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (min-width: 1120px) and (prefers-reduced-motion: no-preference) {
  .mega:not([hidden]) { animation: mega-in var(--dur-200) var(--ease-out) both; }
  .mega:not([hidden]) .mega__intro,
  .mega:not([hidden]) .mega__grid > li,
  .mega:not([hidden]) .mega__foot { animation: mega-item-in var(--dur-300) var(--ease-out) both; animation-delay: 60ms; }
  .mega:not([hidden]) .mega__grid > li:nth-child(2) { animation-delay: 90ms; }
  .mega:not([hidden]) .mega__grid > li:nth-child(3) { animation-delay: 120ms; }
  .mega:not([hidden]) .mega__grid > li:nth-child(4) { animation-delay: 150ms; }
  .mega:not([hidden]) .mega__grid > li:nth-child(5) { animation-delay: 180ms; }
  .mega:not([hidden]) .mega__grid > li:nth-child(n+6),
  .mega:not([hidden]) .mega__foot { animation-delay: 210ms; }
}

/* Méthode : étiquette IA et accroche */
.track { position: relative; }
.track__ia-tag { position: absolute; left: 0; top: 63px; font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--c-petrol); }
@media (max-width: 899px) { .track__ia-tag { display: none; } }
.panel__tagline { font-size: var(--text-lead); color: var(--c-on-dark-muted); }

/* ==========================================================================
   c-proof : chiffres + mur de logos
   ========================================================================== */
.c-proof { padding-block: var(--space-8); }
.c-proof__head { display: grid; gap: var(--space-6); margin-bottom: var(--space-7); }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-4); margin: 0; }
.facts > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-4); border-top: 2px solid var(--c-petrol); }
.facts dd { margin: 0; font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem); font-weight: var(--weight-semibold); letter-spacing: -0.045em; line-height: 0.95; color: var(--c-petrol); }
.facts dt { font-size: var(--text-secondary); color: var(--text-muted); max-width: 20ch; }
@media (min-width: 1024px) {
  .c-proof__head { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); align-items: end; gap: var(--space-8); }
  .facts { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
}
.logo-wall { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); border-top: var(--border-hairline); border-left: var(--border-hairline); }
.logo-wall li { display: grid; place-items: center; min-height: 112px; padding: var(--space-5); border-right: var(--border-hairline); border-bottom: var(--border-hairline); text-align: center; transition: background-color var(--dur-150) var(--ease-standard); }
.logo-wall li:hover { background: var(--surface-alt); }
.logo-wall img { max-width: 150px; max-height: 40px; width: auto; height: auto; filter: brightness(0); opacity: 0.78; }
.logo-wall img.logo--tall { max-height: 64px; }
.wordmark { font-size: var(--text-lead); font-weight: var(--weight-semibold); letter-spacing: -0.02em; line-height: 1.15; color: var(--c-ink); opacity: 0.78; max-width: 14ch; }
@media (min-width: 768px) { .logo-wall { grid-template-columns: repeat(4, 1fr); } .logo-wall li { min-height: 136px; } }
.c-proof__note { margin-top: var(--space-3); font-size: var(--text-secondary); }

/* ==========================================================================
   c-sectors : sélecteur « Vous êtes… »
   ========================================================================== */
.c-sectors { background: var(--surface-page); }
.sp-tabs { display: grid; grid-template-columns: 1fr; gap: var(--space-2); margin-bottom: var(--space-5); }
.sp-tab {
  display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3) var(--space-4);
  background: var(--surface-page); border: 1.5px solid var(--c-line); border-radius: var(--radius-control); cursor: pointer; text-align: left;
  font-weight: var(--weight-semibold); line-height: 1.25;
  transition: border-color var(--dur-150) var(--ease-standard), background-color var(--dur-150) var(--ease-standard), transform var(--dur-150) var(--ease-standard);
}
.sp-tab .icon { color: var(--accent-ink); flex: none; }
.sp-tab:hover { border-color: var(--c-petrol); transform: translateY(-2px); }
.sp-tab[aria-selected="true"] { background: var(--c-petrol); border-color: var(--c-petrol); color: var(--c-white); }
.sp-tab[aria-selected="true"] .icon { color: var(--c-champagne); }
.sp-tab:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
@media (min-width: 640px) { .sp-tabs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
  .sp-tabs { grid-template-columns: repeat(5, 1fr); }
  .sp-tab { flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 128px; padding: var(--space-4); }
}
.sp-panel { display: grid; gap: var(--space-6); background: var(--surface-alt); padding: var(--space-6) var(--space-5); overflow: hidden; }
.sp-panel[hidden] { display: none; }
.sp-panel__title { font-size: var(--text-h3); letter-spacing: var(--tracking-heading); }
.sp-panel__label { margin-top: var(--space-5); font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--accent-ink); }
.sp-panel__issues { list-style: none; margin-top: var(--space-2); border-top: 1px solid var(--c-line-strong); }
.sp-panel__issues li { display: grid; grid-template-columns: 14px 1fr; gap: var(--space-3); align-items: baseline; padding-block: var(--space-3); border-bottom: 1px solid var(--c-line); font-size: var(--text-lead); }
.sp-panel__issues li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-champagne); transform: translateY(-1px); }
.sp-panel__refs { margin-top: var(--space-5); color: var(--text-muted); }
.sp-panel__refs b { display: block; color: var(--text); font-size: var(--text-secondary); margin-bottom: var(--space-1); }
.sp-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-6); }
.sp-panel__visual { position: relative; display: grid; place-items: center; min-height: 260px; }
.sp-orbits { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-orbits circle { fill: none; stroke: var(--c-petrol); stroke-opacity: 0.18; }
.sp-orbits circle.d { fill: var(--c-petrol); fill-opacity: 0.6; stroke: none; }
.sp-orbits circle.d.a { fill: var(--c-champagne); fill-opacity: 1; }
.sp-logo { position: relative; width: 55%; max-width: 240px; height: auto; filter: brightness(0); opacity: 0.8; }
.sp-logo--tall { width: 36%; }
.sp-photo { position: relative; width: 78%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--elev-2); }
.sp-bigicon { position: relative; width: 120px; height: 120px; color: var(--c-petrol); }
@media (min-width: 1024px) { .sp-panel { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding: var(--space-7); gap: var(--space-8); } }

/* ==========================================================================
   Configurateur : tuiles 2 × 2 et sélections en pétrole
   ========================================================================== */
.tiles { grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 640px) { .tiles { grid-template-columns: 1fr 1fr; } }
.tile label {
  display: grid; grid-template-columns: 48px 1fr 22px; column-gap: var(--space-4); row-gap: 2px; align-items: center; align-content: center;
  min-height: 100px; height: 100%; padding: var(--space-4); border: 1.5px solid var(--c-line-strong); border-radius: var(--radius-control);
}
.tile label .icon { grid-row: span 2; width: 48px; height: 48px; padding: 12px; margin: 0; border-radius: 50%; background: var(--surface-alt); color: var(--accent-ink); }
.tile__title { grid-column: 2; align-self: end; font-size: var(--text-body); }
.tile label small { grid-column: 2; align-self: start; }
.tile label::after { content: ""; grid-column: 3; grid-row: 1 / span 2; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--c-line-strong); background: var(--surface-page); }
.tile input:hover + label { border-color: var(--c-petrol); }
.tile input:checked + label { background: var(--c-petrol-tint); border-color: var(--c-petrol); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-petrol); }
.tile input:checked + label .icon { background: var(--c-petrol); color: var(--c-white); }
.tile input:checked + label small { color: var(--text-muted); }
.tile input:checked + label::after { border-color: var(--c-petrol); background: var(--c-petrol) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='m6.5 11.3 3 3 6-6.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
.tile--wide label { min-height: 72px; grid-template-columns: 48px 1fr 22px; }
.tile--wide label .icon { width: 48px; height: 48px; }
.choice label { border-color: var(--c-line-strong); }
.choice input:hover + label { background: var(--surface-page); border-color: var(--c-petrol); }
.choice input:checked + label { background: var(--c-petrol); border-color: var(--c-petrol); color: var(--c-white); }

/* Sélecteur de secteurs, mobile : pastilles en rangée défilante */
@media (max-width: 639px) {
  .sp-tabs { display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) var(--space-2); scrollbar-width: none; }
  .sp-tabs::-webkit-scrollbar { display: none; }
  .sp-tab { flex: 0 0 auto; min-height: 52px; padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3); border-radius: var(--radius-pill); scroll-snap-align: start; white-space: nowrap; font-size: var(--text-secondary); }
  .sp-tab .icon { width: 24px; height: 24px; }
  .sp-panel__visual { min-height: 200px; }
}

/* Hero, écrans intermédiaires : le dessin ne doit pas toucher le titre */
@media (min-width: 900px) and (max-width: 1279px) { .c-hero__art { width: 420px; height: 443px; right: -150px; top: 24px; opacity: 0.75; } .c-hero__art .spot-label { display: none; } }

/* ==========================================================================
   Méthode V5 : 5 étapes-verbes, encadrées par le test gratuit et Coccinet Care
   ========================================================================== */
.journey { display: grid; gap: var(--space-4); }
.journey__end { display: grid; gap: 2px; padding: var(--space-4); border: 1.5px dashed var(--c-line-strong); border-radius: var(--radius-control); text-decoration: none; background: var(--surface-page); transition: border-color var(--dur-150) var(--ease-standard); }
.journey__end:hover { border-color: var(--c-petrol); }
.journey__end span { font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--text-muted); }
.journey__end b { font-size: var(--text-body); font-weight: var(--weight-semibold); }
.journey__end small { font-size: var(--text-secondary); color: var(--text-muted); }
.journey__end--before b::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: var(--space-2); border-radius: 50%; background: var(--c-red); vertical-align: 1px; }
.journey__end--after b::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: var(--space-2); border-radius: 50%; background: var(--c-champagne); vertical-align: 1px; }

.track__node { width: 64px; height: 64px; }
.track__node .icon { width: 26px; height: 26px; }
.track__steps::before { top: 31px; }
.track__steps::after { top: 79px; }
.track__ia-tag { top: 71px; }
.track__label { max-width: 18ch; display: grid; gap: 2px; }
.track__verb { display: block; font-size: 1.375rem; font-weight: var(--weight-semibold); letter-spacing: -0.02em; line-height: 1.15; color: var(--text); }
.track__tag { display: block; font-size: var(--text-secondary); font-weight: var(--weight-regular); color: var(--text-muted); line-height: 1.4; }
.track__tab[aria-selected="true"] .track__verb { color: var(--c-petrol); }
.track__tab[aria-selected="true"] .track__label { color: inherit; font-weight: inherit; }

@media (min-width: 1100px) {
  .journey { grid-template-columns: 11rem minmax(0, 1fr) 11rem; align-items: start; gap: var(--space-5); }
  .journey__end { margin-top: 4px; position: relative; }
  .journey__end--before::after, .journey__end--after::before { content: ""; position: absolute; top: 28px; width: var(--space-5); border-top: 2px dashed var(--c-line-strong); }
  .journey__end--before::after { right: calc(var(--space-5) * -1 - 2px); }
  .journey__end--after::before { left: calc(var(--space-5) * -1 - 2px); }
}
@media (max-width: 899px) {
  .track__node { width: 44px; height: 44px; }
  .track__node .icon { width: 20px; height: 20px; }
  .track__steps::before { top: 21px; }
  .track__steps::after { top: 59px; }
  .track__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .track__verb { font-size: var(--text-meta); letter-spacing: 0; }
  .track__tag, .track__num { display: none; }
}

/* Preuves V2 : un grand chiffre + trois chiffres expliqués */
.c-proof__title { font-size: var(--text-h4); font-weight: var(--weight-semibold); letter-spacing: -0.01em; color: var(--accent-ink); }
.c-proof__head { margin-bottom: var(--space-5); display: block; }
.c-proof__grid { display: grid; gap: var(--space-7); padding-bottom: var(--space-7); }
.big-fact__num { display: flex; align-items: baseline; gap: var(--space-3); font-size: clamp(6rem, 3rem + 14vw, 13rem); font-weight: var(--weight-semibold); letter-spacing: -0.06em; line-height: 0.85; color: var(--c-petrol); }
.big-fact__num span { font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); letter-spacing: -0.02em; color: var(--c-ink); }
.big-fact__text { margin-top: var(--space-5); font-size: var(--text-h4); line-height: 1.35; letter-spacing: -0.01em; max-width: 30ch; }
.facts-stack { margin: 0; border-top: 2px solid var(--c-petrol); align-self: end; }
.facts-stack > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--c-line-strong); }
.facts-stack dt { color: var(--text-muted); max-width: 26ch; }
.facts-stack dd { margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: var(--weight-semibold); letter-spacing: -0.035em; color: var(--c-petrol); white-space: nowrap; }
.c-proof__clients { margin-bottom: var(--space-4); font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--text-muted); letter-spacing: 0; }
.c-proof .logo-wall { background: var(--surface-page); }
@media (min-width: 1024px) { .c-proof__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-9); align-items: end; } }

/* ==========================================================================
   Itération : moins de noir, preuves plus compactes, logos à part,
   méthode sans légende, « Vous êtes » en phrase, équipe dirigeante
   ========================================================================== */
.track__steps::after { display: none; }
.track__gate { display: inline-flex; align-items: center; gap: 6px; justify-self: center; margin-top: var(--space-2); padding: 3px 10px 3px 5px; border-radius: var(--radius-pill); background: var(--c-champagne); color: var(--c-ink); font-size: var(--text-meta); font-weight: var(--weight-semibold); }
.track__gate::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-petrol); }
.track__ia-band { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin-top: var(--space-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--c-petrol-tint); color: var(--c-petrol); font-size: var(--text-secondary); }
.track__ia-band .icon { width: 18px; height: 18px; }
.track__ia-band span { color: var(--text-muted); }
@media (max-width: 899px) { .track__gate { padding: 2px 6px; font-size: 0; gap: 0; } .track__gate::before { width: 8px; height: 8px; } }

/* Preuves compactes */
.c-proof { padding-block: var(--space-7); }
.c-proof__grid { padding-bottom: 0; gap: var(--space-6); }
.big-fact__num { font-size: clamp(4.5rem, 2.5rem + 7vw, 8rem); }
.big-fact__num span { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.big-fact__text { margin-top: var(--space-3); font-size: var(--text-lead); }
.facts-stack > div { padding-block: var(--space-3); }
.facts-stack dd { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); }
@media (min-width: 1024px) { .c-proof__grid { gap: var(--space-8); align-items: center; } }

/* Bande logos */
.c-logos { padding-block: var(--space-7); background: var(--surface-page); }
.c-logos__title { margin-bottom: var(--space-5); font-size: var(--text-h4); letter-spacing: -0.01em; text-align: center; }
.c-logos .logo-wall { border: 0; }
.c-logos .logo-wall li { border: 0; min-height: 96px; }
.c-logos .logo-wall img, .c-logos .wordmark { opacity: 0.6; }
.c-logos .logo-wall li:hover img, .c-logos .logo-wall li:hover .wordmark { opacity: 0.9; }
.c-logos .logo-wall li:hover { background: transparent; }
.c-logos .c-proof__note { text-align: center; }

/* « Vous êtes … » : phrase à compléter */
.sp-sentence { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-6); }
.sp-lead { font-size: var(--text-h2); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: 1.1; }
.sector-picker .sp-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; flex: 1 1 520px; overflow: visible; padding: 0; }
.sector-picker .sp-tab { flex: 0 0 auto; flex-direction: row; align-items: center; min-height: 52px; padding: var(--space-2) var(--space-5) var(--space-2) var(--space-4); border-radius: var(--radius-pill); border: 1.5px solid var(--c-line-strong); font-size: var(--text-lead); font-weight: var(--weight-medium); white-space: nowrap; background: var(--surface-page); }
.sector-picker .sp-tab .icon { width: 22px; height: 22px; }
.sector-picker .sp-tab[aria-selected="true"] { background: var(--c-petrol); border-color: var(--c-petrol); color: var(--c-white); }
@media (max-width: 639px) {
  .sector-picker .sp-tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) var(--space-2); flex-basis: 100%; }
  .sector-picker .sp-tab { font-size: var(--text-secondary); }
}

/* Équipe : deux dirigeants + l'équipe */
.c-team__layout { display: grid; gap: var(--space-7); align-items: center; }
.c-team__intro { display: grid; gap: var(--space-5); align-content: center; }
.leaders { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.leader img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.leader__name { margin-top: var(--space-3); font-size: var(--text-h4); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.leader__role { color: var(--text-muted); }
.crew { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.crew__faces { list-style: none; display: flex; }
.crew__faces li + li { margin-left: -14px; }
.crew__faces img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid var(--surface-alt); }
.crew__text { font-size: var(--text-secondary); color: var(--text-muted); }
.crew__text b { display: block; color: var(--text); font-size: var(--text-body); }
@media (min-width: 1024px) { .c-team__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-9); } .leaders { gap: var(--space-5); } }
@media (min-width: 900px) { .track__tag { min-height: calc(1.4em * 3); } }
.sp-orbits { display: none; }
.sp-panel__visual::before { content: ""; position: absolute; width: min(320px, 80%); aspect-ratio: 1; border-radius: 50%; background: var(--surface-page); }

/* Équipe : portraits plus discrets */
.leaders { max-width: 460px; }
@media (min-width: 1024px) { .c-team__layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .leaders { justify-self: end; width: 100%; } }
.leader img { aspect-ratio: 1; }
.leader__name { font-size: var(--text-body); }
.leader__role { font-size: var(--text-secondary); }

/* Méthode : « Avant » et « Après » = petits points posés aux extrémités de la frise */
.journey__end { border: 0; padding: 0; background: transparent; display: grid; justify-items: center; text-align: center; gap: 4px; }
.journey__end::before, .journey__end::after { content: none; }
.journey__end:hover b { text-decoration: underline; text-underline-offset: 0.3em; }
.journey__end b::before { content: none !important; }
.journey__node { width: 28px; height: 28px; border-radius: 50%; margin: 18px 0 var(--space-2); border: 2px dashed var(--c-petrol); display: grid; place-items: center; background: var(--surface-page); position: relative; z-index: 1; }
.journey__node::after { content: ""; width: 12px; height: 12px; border-radius: 50%; }
.journey__end--before .journey__node::after { background: var(--c-red); }
.journey__end--after .journey__node::after { background: var(--c-champagne); }
.journey__kicker { font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--text-muted); }
.journey__end b { font-size: var(--text-secondary); font-weight: var(--weight-semibold); max-width: 12ch; }
@media (min-width: 1100px) {
  .journey { grid-template-columns: 8rem minmax(0, 1fr) 8rem; gap: 0; }
  .journey__end { position: relative; margin-top: 0; }
  .journey__end--before::after, .journey__end--after::before { content: "" !important; position: absolute; top: 31px; height: 0; border-top: 2px dashed var(--c-petrol); width: calc(50% - 14px); }
  .journey__end--before::after { left: calc(50% + 14px); width: calc(50% - 14px + 58px); }
  .journey__end--after::before { right: calc(50% + 14px); width: calc(50% - 14px + 58px); }
}
@media (max-width: 1099px) {
  .journey__end { grid-template-columns: auto auto 1fr; justify-items: start; align-items: center; text-align: left; column-gap: var(--space-2); }
  .journey__node { margin: 0; }
}

/* L'agence : chiffres sous l'équipe */
.team-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-4); margin: var(--space-8) 0 0; padding-top: var(--space-6); border-top: 1px solid var(--c-line-strong); }
.team-facts > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-1); }
.team-facts dd { margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); font-weight: var(--weight-semibold); letter-spacing: -0.035em; line-height: 1.05; color: var(--c-petrol); }
.team-facts dt { font-size: var(--text-secondary); color: var(--text-muted); max-width: 24ch; }
@media (min-width: 1024px) { .team-facts { grid-template-columns: repeat(3, 1fr); } }
.c-hero__logos img.is-wide { height: 16px; }
.rot-nav__list button:not(.is-running) .rot-nav__bar i { transition: none; }
.rot-nav.is-paused button[aria-pressed="true"] .rot-nav__bar i { transform: scaleX(1); }
.c-hero__logos img.is-mid { height: 28px; }
.track__label { margin-top: var(--space-3); }
@media (max-width: 899px) { .track__label { margin-top: var(--space-1); } }

/* Méthode : plus d'anneau doré, la validation est dite par l'étiquette seule */
.track__tab--gate .track__node { box-shadow: none !important; }
.track__gate::before { width: 12px; height: 12px; background: var(--c-petrol) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3.2 6.2 1.8 1.8 3.8-4' fill='none' stroke='%23C4A46E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
@media (max-width: 899px) {
  .track__gate { width: 20px; height: 20px; padding: 0; justify-content: center; border-radius: 50%; }
  .track__gate::before { width: 20px; height: 20px; background-color: var(--c-champagne); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3.2 6.2 1.8 1.8 3.8-4' fill='none' stroke='%231F3A5F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 14px; }
}
.track__hint { display: none; }
@media (max-width: 899px) { .track__hint { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--text-secondary); color: var(--text-muted); } .track__hint .track__gate { margin: 0; } }
.sp-panel__visual picture { position: relative; display: contents; }
.sp-photo--square { width: min(300px, 70%); aspect-ratio: 1; }

/* Hero : pause discrète à droite du titre animé, hors flux pour ne pas grandir le hero (exigée par WCAG 2.2.2) */
.c-hero__head { position: relative; }
.rot-pause { position: absolute; right: 0; bottom: 0.25em; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--c-on-dark-line); background: transparent; color: var(--c-on-dark-muted); cursor: pointer; opacity: 0.8; }
/* Titre pleine largeur : la pastille se loge dans l'espace avant le filet */
@media (max-width: 899px) { .rot-pause { bottom: auto; top: calc(100% + var(--space-2)); } }
.rot-pause:hover { opacity: 1; color: var(--c-white); }
.rot-pause svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.rot-pause .i-play { display: none; fill: currentColor; stroke: none; }
.rot-pause[aria-pressed="true"] .i-pause { display: none; }
.rot-pause[aria-pressed="true"] .i-play { display: block; }
html[data-hero="light"] .rot-pause { color: var(--text-muted); border-color: rgba(26, 23, 20, 0.2); }

/* ==========================================================================
   c-quotes : les mots qui reviennent (données réelles : 36 témoignages)
   ========================================================================== */
.words { display: grid; gap: var(--space-6); }
.words__list { display: grid; gap: 0; border-top: var(--border-rule); align-content: start; }
.word-tab { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--space-1) var(--space-4); padding: var(--space-4) 0; background: none; border: 0; border-bottom: 1px solid var(--c-line); text-align: left; cursor: pointer; color: var(--text-muted); transition: color var(--dur-150) var(--ease-standard); }
.word-tab__word { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); font-weight: var(--weight-semibold); letter-spacing: -0.035em; line-height: 1.05; }
.word-tab__count { font-size: var(--text-secondary); }
.word-tab__count b { color: var(--text); font-weight: var(--weight-semibold); }
.word-tab__bar { grid-column: 1 / -1; display: block; height: 4px; border-radius: 4px; background: var(--c-line); overflow: hidden; }
.word-tab__bar i { display: block; height: 100%; width: calc(var(--n) / 11 * 100%); background: var(--c-line-strong); border-radius: 4px; transition: background-color var(--dur-150) var(--ease-standard); }
.word-tab:hover { color: var(--text); }
.word-tab[aria-selected="true"] { color: var(--c-petrol); }
.word-tab[aria-selected="true"] .word-tab__bar i { background: var(--c-champagne); }
.word-tab:focus-visible { outline: var(--focus-outline); outline-offset: 4px; }
.word-panel { display: grid; gap: var(--space-4); align-content: start; }
.word-panel[hidden] { display: none; }
.word-quote { padding: var(--space-5); background: var(--surface-alt); border-radius: var(--radius-control); }
.word-quote blockquote { font-size: var(--text-lead); line-height: 1.5; }
.word-quote mark { background: var(--c-champagne); color: #fff; padding: 0 0.15em; border-radius: 2px; }
.word-quote figcaption { margin-top: var(--space-3); font-size: var(--text-secondary); color: var(--text-muted); }
.word-quote figcaption b { display: block; color: var(--text); font-weight: var(--weight-semibold); }
@media (min-width: 1024px) { .words { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-8); align-items: start; } }

/* ==========================================================================
   c-statement-band : « Plus vite. Juste. Plus loin. »
   ========================================================================== */
.c-statement-band { padding-block: var(--space-7); border-bottom: var(--border-hairline); }
.c-statement { display: grid; gap: var(--space-5); }
.c-statement__item { display: grid; gap: var(--space-2); text-decoration: none; color: var(--text); }
.c-statement__item b { font-size: var(--text-statement); font-weight: var(--weight-semibold); line-height: 1; letter-spacing: -0.045em; color: var(--c-petrol); transition: color var(--dur-150) var(--ease-standard); }
.c-statement__item:nth-child(2) b { color: var(--c-ink); }
.c-statement__item span { color: var(--text-muted); max-width: 30ch; }
.c-statement__item:hover b { color: var(--c-petrol-dark); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.12em; text-decoration-color: var(--c-champagne); }
@media (min-width: 900px) {
  .c-statement-band { padding-block: var(--space-8); }
  .c-statement { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .c-statement__item { padding-right: var(--space-5); }
  .c-statement__item + .c-statement__item { padding-left: var(--space-6); border-left: 1px solid var(--c-line); }
}
/* Signature S3 : blanc sur pétrole profond, fidèle à la planche validée */
.c-statement-band { background: var(--c-petrol-dark); border-bottom: 0; }
.c-statement__item b, .c-statement__item:nth-child(2) b { color: var(--c-white); }
.c-statement__item span { color: var(--c-on-dark-muted); }
.c-statement__item:hover b { color: var(--c-white); }
.c-statement-band :focus-visible { outline-color: var(--focus-ring-on-dark); }
@media (min-width: 900px) { .c-statement__item + .c-statement__item { border-left-color: var(--c-on-dark-line); } }
.sp-photo--packshot { width: min(380px, 80%); box-shadow: none; background: transparent; mix-blend-mode: multiply; }

/* Témoignages : citations sans fond, mots non sélectionnés en noir plein */
.word-quote { padding: var(--space-2) 0 var(--space-2) var(--space-5); background: none; border-radius: 0; border-left: 2px solid var(--c-petrol); }
.word-quote + .word-quote { margin-top: var(--space-3); }
.word-quote blockquote { font-size: var(--text-h4); line-height: 1.4; letter-spacing: -0.01em; }
.word-tab { color: var(--text); }
.word-tab__bar i { background: var(--c-petrol); opacity: 0.25; }
.word-tab[aria-selected="true"] .word-tab__bar i { opacity: 1; }
.word-tab:hover .word-tab__bar i { opacity: 0.5; }
.word-tab[aria-selected="true"]:hover .word-tab__bar i { opacity: 1; }

/* ==========================================================================
   Test gratuit : section pétrole + carte configurateur unique
   ========================================================================== */
.c-poc { background: var(--surface-dark); color: var(--c-white); }
.c-poc .c-section__title { color: var(--c-white); }
.c-poc .c-section__intro { color: var(--c-on-dark-muted); }
.c-poc .promise li { border-top-color: var(--c-on-dark-line); }
.c-poc .promise .icon { color: var(--c-champagne); }
.c-poc .promise b { color: var(--c-white); }
.c-poc .promise li > span { color: var(--c-on-dark-muted); }
.c-poc .promise .todo { color: var(--c-on-dark-muted); }
/* Rappel confidentialité sous les promesses, lien vers la charte */
.poc__charter { display: flex; gap: var(--space-3); align-items: flex-start; margin: calc(-1 * var(--space-3)) 0 var(--space-7); max-width: 52rem; font-size: var(--text-secondary); color: var(--c-on-dark-muted); }
.poc__charter .icon { flex: none; margin-top: 2px; color: var(--c-champagne); }
.poc__charter b { color: var(--c-white); font-weight: var(--weight-semibold); }
.poc__charter a { color: var(--c-white); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.poc__charter a:hover { color: var(--c-champagne); }
.c-poc :focus-visible { outline-color: var(--focus-ring-on-dark); }

.configurator { gap: 0; background: var(--surface-page); color: var(--text); border-radius: 8px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); }
.configurator :focus-visible { outline-color: var(--focus-ring); }
.configurator__form, .poc__done { border: 0; background: transparent; }
.config-panel { background: var(--surface-alt); background-image: none; color: var(--text); border-left: var(--border-hairline); }
.config-panel__list { border-top-color: var(--c-line-strong); }
.config-panel__list > div { border-bottom-color: var(--c-line); }
.config-panel__list dt, .config-panel__list dd { color: var(--text-muted); }
.config-panel__list .is-set dd { color: var(--c-petrol); }
.config-panel__price { border-top-color: var(--c-line-strong); color: var(--text-muted); }
.config-panel__price b { color: var(--c-petrol); }
.config-panel .todo { color: var(--accent-ink); }
.poc__question { color: var(--c-petrol); }
@media (min-width: 1100px) { .config-panel { position: static; } }
@media (max-width: 1099px) { .config-panel { border-left: 0; border-top: var(--border-hairline); } }
.word-quote { background: var(--c-linen-soft); padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6); border-radius: 0 6px 6px 0; }

/* Mots non sélectionnés : pétrole grisé (grands textes ≥ 3:1), plus de noir */
.word-tab { color: color-mix(in srgb, var(--c-petrol) 62%, #fff); }
.word-tab__count, .word-tab__count b { color: color-mix(in srgb, var(--c-petrol) 80%, #fff); }
.word-tab:hover { color: var(--c-petrol); }
.word-tab[aria-selected="true"] { color: var(--c-petrol); }
.word-tab[aria-selected="true"] .word-tab__count, .word-tab[aria-selected="true"] .word-tab__count b { color: var(--c-petrol); }

/* Hero : halos tramés (points en aplat, aucun dégradé) */
.c-hero { background-image: url("../img/hero-halftone.svg"); background-repeat: no-repeat; background-size: cover; background-position: center; }
html[data-hero="light"] .c-hero { background-image: url("../img/hero-halftone-light.svg"); }
@media (max-width: 899px) { .c-hero { background-size: 220% auto; background-position: 70% 0; } }
@media (min-width: 1100px) { .journey__end--after::before { width: calc(50% - 14px + 63px) !important; } }

/* Méthode : pointillé continu sous toute la frise (raccorde Avant et Après sans calcul de longueur) */
@media (min-width: 1100px) {
  .journey__end--before::after, .journey__end--after::before { content: none !important; }
  .journey { position: relative; }
  .journey::before { content: ""; position: absolute; z-index: 0; top: 31px; left: 4rem; right: 4rem; border-top: 2px dashed var(--c-petrol); }
  .track, .journey__end { position: relative; z-index: 1; }
  .track__steps::before { z-index: 0; }
}

/* Test gratuit : la colonne « Votre POC » s'étire sur toute la hauteur de la carte */
.configurator { align-items: stretch; }
.configurator__form { align-self: start; }
.config-panel { display: flex; flex-direction: column; gap: var(--space-4); }
.config-panel__price { margin-top: auto; }

/* Pied de page : halos tramés en écho au hero (remplace le motif de points) */
.site-footer { background-image: url("../img/footer-halftone.svg"); background-repeat: no-repeat; background-size: cover; background-position: center; }

/* ==========================================================================
   Lueurs douces — EXCEPTION validée à la règle « aucun dégradé »,
   limitée au fond du hero et du pied de page (2026-10-09).
   ========================================================================== */
.c-hero, .site-footer { position: relative; overflow: hidden; isolation: isolate; background-image: none; }
html[data-hero="light"] .c-hero { background-image: none; }
.c-hero > .u-container, .site-footer > .u-container { position: relative; z-index: 1; }
.c-hero::before, .c-hero::after, .site-footer::before, .site-footer::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.c-hero::before { width: 900px; height: 900px; top: -420px; right: -260px; background: radial-gradient(circle, rgba(196, 164, 110, 0.20) 0%, rgba(196, 164, 110, 0.07) 38%, rgba(196, 164, 110, 0) 68%); }
.c-hero::after { width: 760px; height: 760px; bottom: -420px; left: -260px; background: radial-gradient(circle, color-mix(in srgb, color-mix(in srgb, var(--c-petrol) 45%, #fff) 18%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--c-petrol) 45%, #fff) 6%, transparent) 40%, color-mix(in srgb, color-mix(in srgb, var(--c-petrol) 45%, #fff) 0%, transparent) 68%); }
html[data-hero="light"] .c-hero::before { background: radial-gradient(circle, rgba(196, 164, 110, 0.28) 0%, rgba(196, 164, 110, 0.09) 40%, rgba(196, 164, 110, 0) 68%); }
html[data-hero="light"] .c-hero::after { background: radial-gradient(circle, color-mix(in srgb, var(--c-petrol) 10%, transparent) 0%, color-mix(in srgb, var(--c-petrol) 3%, transparent) 40%, color-mix(in srgb, var(--c-petrol) 0%, transparent) 68%); }
.site-footer::before { width: 760px; height: 760px; bottom: -440px; right: -220px; background: radial-gradient(circle, rgba(196, 164, 110, 0.16) 0%, rgba(196, 164, 110, 0.05) 40%, rgba(196, 164, 110, 0) 68%); }
.site-footer::after { width: 640px; height: 640px; top: -360px; left: -220px; background: radial-gradient(circle, color-mix(in srgb, color-mix(in srgb, var(--c-petrol) 45%, #fff) 15%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--c-petrol) 45%, #fff) 5%, transparent) 40%, color-mix(in srgb, color-mix(in srgb, var(--c-petrol) 45%, #fff) 0%, transparent) 68%); }
@media (max-width: 899px) { .c-hero::before { width: 520px; height: 520px; top: -260px; right: -220px; } .c-hero::after { width: 460px; height: 460px; bottom: -260px; left: -220px; } }

/* Panneau « Votre POC » : jauge, contact, interlocuteurs */
.config-progress { display: grid; gap: var(--space-2); }
.config-progress__label { font-size: var(--text-secondary); color: var(--text-muted); }
.config-progress__label b { color: var(--c-petrol); font-weight: var(--weight-semibold); }
.config-progress__bar { display: block; height: 6px; border-radius: 6px; background: var(--c-line); overflow: hidden; }
.config-progress__bar i { display: block; height: 100%; background: var(--c-petrol); transform-origin: left; transform: scaleX(0); transition: transform var(--dur-300) var(--ease-out); border-radius: 6px; }
.config-human { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--surface-page); border-radius: 6px; font-size: var(--text-secondary); color: var(--text-muted); }
.config-human b { color: var(--text); font-weight: var(--weight-semibold); }
.config-human__faces { display: flex; flex: none; }
.config-human__faces img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface-page); }
.config-human__faces img + img { margin-left: -12px; }
.config-panel__price { margin-top: 0; }
.config-human { margin-top: auto; }

/* Titres en pétrole franc (plus de noir) ; blancs sur les fonds sombres */
:where(h1, h2, h3, h4), .sp-lead, .track__verb, .exp__title a, .feature__title a, .case-feature__title a, .case-teaser__title a, .sector b, .leader__name, .person__name, .c-proof__title { color: var(--c-petrol); }
:where(.c-hero, .c-statement-band, .c-poc__head, .method__panel, .site-footer) :where(h1, h2, h3, h4) { color: inherit; }
.mega__item b, .mega__title { color: var(--c-petrol); }

/* Méthode : validation à chaque étape, mention unique en blanc */
.track__validate-band { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--surface-page); border: 1.5px solid var(--c-petrol); color: var(--c-petrol); font-size: var(--text-secondary); font-weight: var(--weight-semibold); }
.track__validate-band span { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--c-petrol) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3.2 6.2 1.8 1.8 3.8-4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.track__validate-band + .track__ia-band { margin-top: var(--space-2); }
.panel__gate { background: var(--c-white); color: var(--c-petrol); }
.panel__gate::before { background: var(--c-petrol) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3.2 6.2 1.8 1.8 3.8-4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
@media (min-width: 900px) { .track__tag { min-height: 0; } }

/* Méthode : deux engagements sous la frise, sans encadré */
.track__notes { list-style: none; display: grid; gap: var(--space-4); margin: var(--space-6) auto 0; max-width: 860px; }
.track__notes li { display: flex; align-items: flex-start; gap: var(--space-3); }
.track__notes b { display: block; color: var(--c-petrol); font-weight: var(--weight-semibold); margin-bottom: 2px; }
.track__notes li > span:last-child { font-size: var(--text-secondary); color: var(--text-muted); line-height: 1.45; }
.track__note-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--c-petrol-tint); color: var(--c-petrol); }
.track__note-ic .icon { width: 18px; height: 18px; }
.track__note-ic--check { background: var(--c-petrol-tint) none; }
@media (min-width: 700px) {
  .track__notes { grid-template-columns: 1fr 1fr; gap: 0; }
  .track__notes li { padding: 0 var(--space-6); }
  .track__notes li + li { border-left: 1px solid var(--c-line-strong); }
}

.track__note-ic--check svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Sélecteur de prototype : fond du hero + couleur principale */
.proto-switch { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100vw - 32px); border-radius: 24px; padding: var(--space-1) var(--space-2); gap: var(--space-1) var(--space-3); }
.proto-switch__group { display: flex; align-items: center; gap: var(--space-1); }
.proto-switch__group > span { padding: 0 var(--space-1) 0 var(--space-2); color: var(--text-muted); font-size: var(--text-secondary); }
.proto-switch .sw { width: 28px; height: 28px; min-height: 0; padding: 0; border-radius: 50%; background: var(--sw); border: 2px solid var(--c-white); box-shadow: 0 0 0 1px var(--c-line-strong); }
.proto-switch .sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--c-ink); background: var(--sw); }

@media (min-width: 900px) { .track__notes { max-width: 1000px; } .track__notes li > span:last-child { white-space: nowrap; } }
/* Signature : les sous-lignes complètent la phrase, en plus grand */
.c-statement__item span { font-size: var(--text-h4); color: var(--c-on-dark-muted); letter-spacing: -0.01em; }
.site-footer__sign { font-size: var(--text-lead); max-width: 30ch; line-height: 1.35; }
.c-statement__item b { font-size: clamp(2.25rem, 1.3rem + 2.6vw, 3.5rem); }
@media (min-width: 900px) { .c-statement__item b { white-space: nowrap; } .c-statement__item { align-content: start; } }
/* Signature « Plus vite. Plus fiable. Plus loin. » : sous-lignes au format courant */
.c-statement__item span { font-size: var(--text-body); letter-spacing: 0; }
.c-statement__item b { font-size: var(--text-statement); }
@media (min-width: 900px) { .c-statement__item b { white-space: nowrap; font-size: clamp(2.5rem, 1.4rem + 3vw, 4.25rem); } }
.site-footer__sign { font-size: var(--text-h4); max-width: none; }
.field { align-content: start; }
.field-row { align-items: start; }
@media (min-width: 640px) { .field-row .field + .field { margin-top: 0; } }

/* ==========================================================================
   Gabarit offre (page-offre.php) — rempli avec « Application métier »
   Blocs : c-page-hero, breadcrumb, toc, c-define, c-paths, c-method-full,
   c-quote-band, c-usecases, c-tech, c-faq
   ========================================================================== */

/* ---------- c-page-hero : pétrole, lueurs du hero (exception validée) ---------- */
.c-page-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--surface-dark); color: var(--text-on-dark); }
.c-page-hero::before, .c-page-hero::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.c-page-hero::before { width: 820px; height: 820px; top: -420px; right: -240px; background: radial-gradient(circle, rgba(196, 164, 110, 0.18) 0%, rgba(196, 164, 110, 0.06) 38%, rgba(196, 164, 110, 0) 68%); }
.c-page-hero::after { width: 640px; height: 640px; bottom: -380px; left: -240px; background: radial-gradient(circle, color-mix(in srgb, color-mix(in srgb, var(--c-petrol) 45%, #fff) 16%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--c-petrol) 45%, #fff) 5%, transparent) 40%, transparent 68%); }
.c-page-hero > .u-container { position: relative; z-index: 1; }
.c-page-hero :focus-visible { outline-color: var(--focus-ring-on-dark); }
.c-page-hero__inner { display: grid; gap: var(--space-7); padding-block: var(--space-5) var(--space-6); }
.c-page-hero__grid { display: grid; gap: var(--space-7); }
.c-page-hero__flag { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--c-on-dark-muted); font-weight: var(--weight-medium); }
.c-page-hero__flag > i { flex: none; width: 10px; height: 10px; margin-right: var(--space-1); border-radius: 50%; background: var(--c-red); box-shadow: 0 0 0 3px var(--c-white); }
.c-page-hero__title { font-size: var(--text-h1); line-height: var(--leading-tight); letter-spacing: -0.035em; max-width: 16ch; }
.c-page-hero__lead { margin-top: var(--space-5); font-size: var(--text-lead); color: var(--c-on-dark-muted); max-width: 52ch; }
.c-page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-6); }
.c-page-hero .link-action { color: var(--c-white); }
@media (min-width: 1024px) {
  .c-page-hero__inner { padding-block: var(--space-5) var(--space-6); gap: var(--space-8); }
  .c-page-hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-9); align-items: end; }
}

/* Fil d'Ariane (sur fond sombre ici ; variante claire possible) */
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; font-size: var(--text-secondary); color: var(--c-on-dark-muted); }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li + li::before { content: ""; width: 4px; height: 4px; margin: 0 var(--space-3); border-radius: 50%; background: currentColor; opacity: 0.7; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: var(--target-min); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; color: var(--c-white); }
.breadcrumb [aria-current="page"] { color: var(--c-white); }

/* Sommaire de page */
.toc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--c-on-dark-line); }
.toc__label { font-size: var(--text-secondary); color: var(--c-on-dark-muted); }
.toc ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.toc a { display: inline-flex; align-items: center; min-height: var(--target-min); font-size: var(--text-secondary); font-weight: var(--weight-medium); text-decoration: none; color: var(--c-white); }
.toc a:hover { text-decoration: underline; }
@media (max-width: 639px) { .toc ul { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; } .toc a { white-space: nowrap; } }

/* ---------- c-define : définition + ce que nous construisons ---------- */
.c-define__grid { display: grid; gap: var(--space-5); padding-bottom: var(--space-8); }
.c-define__body { display: grid; gap: var(--space-4); max-width: 62ch; color: var(--text-muted); font-size: var(--text-lead); }
.c-define__lead { font-size: var(--text-h4); line-height: 1.4; letter-spacing: -0.01em; color: var(--text); }
.c-define__subtitle, .c-tech__subtitle { font-size: var(--text-h4); letter-spacing: -0.01em; }
.builds { margin-top: var(--space-5); row-gap: var(--space-7); }
.exp__title { color: var(--c-petrol); }
.exp__text a { color: var(--c-petrol); font-weight: var(--weight-medium); position: relative; z-index: 1; }
@media (min-width: 1024px) { .c-define__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-9); } }

/* ---------- c-paths : créer / moderniser ---------- */
.paths { display: grid; gap: var(--space-5); }
.path { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) var(--space-5); background: var(--surface-page); border-radius: 8px; border-top: 3px solid var(--c-petrol); }
.path__head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); }
.path__icon { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--c-petrol); color: var(--c-white); }
.path__icon .icon { width: 26px; height: 26px; }
.path__title { font-size: var(--text-h3); letter-spacing: var(--tracking-heading); }
.path__label { margin-top: var(--space-3); font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--accent-ink); }
.path__signs { list-style: none; border-top: 1px solid var(--c-line-strong); }
.path__signs li { display: grid; grid-template-columns: 14px 1fr; gap: var(--space-3); align-items: baseline; padding-block: var(--space-3); border-bottom: 1px solid var(--c-line); }
.path__signs li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-champagne); transform: translateY(-1px); }
.path__text { color: var(--text-muted); max-width: 56ch; }
.path__quote { margin-top: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--c-linen-soft); border-left: 2px solid var(--c-petrol); border-radius: 0 6px 6px 0; }
.path__quote blockquote { font-size: var(--text-lead); line-height: 1.45; }
.path__quote figcaption { margin-top: var(--space-2); font-size: var(--text-secondary); color: var(--text-muted); }
.path__quote figcaption b { display: block; color: var(--text); font-weight: var(--weight-semibold); }
.path__cta { margin-top: auto; align-self: flex-start; white-space: normal; text-align: center; }
.path__quote + .path__cta { margin-top: var(--space-5); }
@media (min-width: 768px) { .path { padding: var(--space-7); } }
@media (min-width: 1024px) { .paths { grid-template-columns: 1fr 1fr; gap: var(--space-6); } .path__quote { margin-top: auto; } }

/* ---------- c-method-full : la frise verticale (méthode complète) ---------- */
.c-method-full__layout { display: grid; gap: var(--space-7); }
.c-method-full__aside { display: grid; gap: var(--space-5); align-content: start; }
.c-method-full__note { font-size: var(--text-secondary); }
.key { list-style: none; display: grid; gap: var(--space-3); font-size: var(--text-secondary); color: var(--text-muted); }
.key li { display: flex; align-items: center; gap: var(--space-3); }
.key__node { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--c-petrol); }
.key__ia { flex: none; width: 24px; height: 24px; display: grid; place-items: center; color: var(--c-petrol); }
.key__ia .icon { width: 18px; height: 18px; fill: none; }
.key__gate { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--c-petrol) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3.2 6.2 1.8 1.8 3.8-4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
@media (min-width: 1100px) {
  .c-method-full__layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: var(--space-9); }
  .c-method-full__aside { position: sticky; top: 112px; }
}

.spine { --node: 44px; list-style: none; position: relative; }
.spine-step, .spine-end { position: relative; display: grid; grid-template-columns: var(--node) minmax(0, 1fr); column-gap: var(--space-4); }
/* Rail : gris de fond, pétrole quand l'étape est atteinte (tracé = moment orchestré) */
.spine-step::before, .spine-end--before::before { content: ""; position: absolute; left: calc(var(--node) / 2 - 1px); top: 0; bottom: 0; border-left: 2px solid var(--c-line); }
.spine-step::after { content: ""; position: absolute; left: calc(var(--node) / 2 - 1px); top: 0; bottom: 0; width: 2px; background: var(--c-petrol); transform-origin: top; transform: scaleY(0); transition: transform 900ms var(--ease-out); }
.spine-step.is-reached::after { transform: none; }
.spine-end--before::before { top: 50%; border-left-style: dashed; border-color: var(--c-petrol); }
.spine-end--after::before { content: ""; position: absolute; left: calc(var(--node) / 2 - 1px); top: 0; height: 50%; border-left: 2px dashed var(--c-petrol); }

.spine-step { padding-block: var(--space-6); }
.spine-step__node { position: relative; z-index: 1; width: var(--node); height: var(--node); border-radius: 50%; display: grid; place-items: center; background: var(--surface-page); border: 2px solid var(--c-line-strong); color: var(--c-line-strong); transition: background-color var(--dur-300) var(--ease-out), border-color var(--dur-300) var(--ease-out), color var(--dur-300) var(--ease-out); }
.spine-step__node .icon { width: 20px; height: 20px; }
.spine-step.is-reached .spine-step__node { background: var(--c-petrol); border-color: var(--c-petrol); color: var(--c-white); }
.spine-step__body { display: grid; gap: var(--space-2); padding-top: 4px; min-width: 0; }
.spine-step__num { font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--text-muted); }
.spine-step__verb { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); letter-spacing: var(--tracking-display); line-height: 1.05; }
.spine-step__tag { font-size: var(--text-lead); color: var(--text-muted); }
.spine-step__cols { display: grid; gap: var(--space-4); margin: var(--space-4) 0 0; }
.spine-step__cols > div { padding-top: var(--space-3); border-top: 1px solid var(--c-line); }
.spine-step__cols dt { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--accent-ink); }
.spine-step__cols dt .icon { width: 18px; height: 18px; }
.spine-step__cols dd { margin: 0; line-height: 1.5; }
.spine-step__gate { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; margin-top: var(--space-3); padding: 6px 14px 6px 6px; border-radius: var(--radius-pill); background: var(--c-petrol-tint); color: var(--c-petrol); font-size: var(--text-secondary); font-weight: var(--weight-semibold); }
.spine-step__gate::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--c-petrol) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3.2 6.2 1.8 1.8 3.8-4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }

.spine-end { align-items: center; padding-block: var(--space-4); }
.spine-end__node { position: relative; z-index: 1; justify-self: center; width: 28px; height: 28px; border-radius: 50%; border: 2px dashed var(--c-petrol); background: var(--surface-page); display: grid; place-items: center; }
.spine-end__node::after { content: ""; width: 12px; height: 12px; border-radius: 50%; }
.spine-end--before .spine-end__node::after { background: var(--c-red); }
.spine-end--after .spine-end__node::after { background: var(--c-champagne); }
.spine-end p { color: var(--text-muted); font-size: var(--text-secondary); }
.spine-end__kicker { display: block; font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--text-muted); }
.spine-end a { color: var(--c-petrol); font-size: var(--text-body); margin-right: var(--space-2); text-underline-offset: 0.3em; }
.spine-end b { font-weight: var(--weight-semibold); }

@media (min-width: 768px) {
  .spine { --node: 64px; }
  .spine-step { column-gap: var(--space-6); padding-block: var(--space-7); }
  .spine-step__node .icon { width: 26px; height: 26px; }
  .spine-step__body { padding-top: var(--space-3); }
  .spine-step__cols { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
  .spine-end { column-gap: var(--space-6); }
}
.spine-step + .spine-step { border-top: 0; }
/* Sans JavaScript : toutes les étapes affichées comme atteintes */
html:not(.js) .spine-step::after { transform: none; }
html:not(.js) .spine-step .spine-step__node { background: var(--c-petrol); border-color: var(--c-petrol); color: var(--c-white); }

/* ---------- c-quote-band ---------- */
.c-quote-band { padding-block: var(--space-8); border-top: var(--border-hairline); }
.c-quote-band .quote-hero { max-width: 940px; padding-left: var(--space-6); border-left: 3px solid var(--c-champagne); }
.c-quote-band .quote-hero blockquote { color: var(--c-petrol); }

/* ---------- c-usecases : un cas réel en vedette + cartes secteurs ---------- */
.uc-feature { display: grid; background: var(--surface-page); border-radius: 8px; overflow: hidden; }
.uc-feature__media { position: relative; padding: var(--space-6) var(--space-5) var(--space-7); background: var(--surface-dark); }
.uc-feature__desktop img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28); }
.uc-feature__mobile { position: absolute; right: var(--space-4); bottom: var(--space-4); width: 26%; max-width: 150px; }
.uc-feature__mobile img { width: 100%; height: auto; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.3)); }
.uc-feature__body { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-6) var(--space-5); }
.uc-feature__kicker { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--accent-ink); }
.uc-feature__kicker .icon { width: 18px; height: 18px; }
.uc-feature__title { font-size: var(--text-h3); letter-spacing: var(--tracking-heading); }
.uc-feature__context { color: var(--text-muted); font-size: var(--text-lead); }
.uc-feature__label { font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--accent-ink); }
.uc-feature__answer { list-style: none; margin-top: calc(var(--space-2) * -1); border-top: 1px solid var(--c-line-strong); }
.uc-feature__answer li { display: flex; align-items: flex-start; gap: var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--c-line); }
.uc-feature__answer li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--c-petrol) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3.2 6.2 1.8 1.8 3.8-4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.uc-feature__tech { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.uc-feature__tech li { padding: 4px var(--space-3); border-radius: var(--radius-pill); background: var(--surface-alt); font-size: var(--text-secondary); font-weight: var(--weight-medium); }
.uc-feature__quote { padding-left: var(--space-5); border-left: 2px solid var(--c-champagne); }
.uc-feature__quote blockquote { font-size: var(--text-lead); line-height: 1.45; color: var(--c-petrol); }
.uc-feature__quote figcaption { margin-top: var(--space-2); font-size: var(--text-secondary); color: var(--text-muted); }
.uc-feature__quote figcaption b { display: block; color: var(--text); font-weight: var(--weight-semibold); }
.uc-feature .link-action { justify-self: start; }
@media (min-width: 640px) { .uc-feature__media { padding: var(--space-7) var(--space-7) var(--space-8); } .uc-feature__mobile { right: var(--space-6); bottom: var(--space-5); } }
@media (min-width: 1024px) {
  .uc-feature { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .uc-feature__media { display: grid; align-content: center; padding: var(--space-8) var(--space-9) var(--space-8) var(--space-7); }
  .uc-feature__mobile { right: var(--space-6); bottom: var(--space-7); width: 24%; }
  .uc-feature__body { padding: var(--space-7); }
}

.c-usecases__subtitle { margin: var(--space-8) 0 var(--space-5); font-size: var(--text-h3); letter-spacing: var(--tracking-heading); }
.sector-cards { list-style: none; display: grid; gap: var(--space-4); }
.sector-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--surface-page); border-radius: 8px; border-top: 3px solid var(--c-petrol); }
.sector-card__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.sector-card__icon { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--c-petrol-tint); color: var(--c-petrol); }
.sector-card__icon .icon { width: 24px; height: 24px; }
.sector-card__name { font-size: var(--text-h4); letter-spacing: -0.01em; line-height: 1.25; }
.sector-card__name a { text-decoration: none; }
.sector-card__name a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.sector-card__label { font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--text-muted); }
.sector-card__issues { list-style: none; margin-top: calc(var(--space-2) * -1); }
.sector-card__issues li { display: grid; grid-template-columns: 8px 1fr; gap: var(--space-3); align-items: baseline; padding-block: 6px; }
.sector-card__issues li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-champagne); transform: translateY(-1px); }
.sector-card__tools { margin-top: calc(var(--space-2) * -1); color: var(--text-muted); }
.sector-card__actions { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.link-action--quiet { color: var(--text-muted); font-weight: var(--weight-regular); }
.sector-card--cta { justify-content: center; align-items: flex-start; border-top-color: var(--c-champagne); background: var(--surface-dark); color: var(--c-white); }
.sector-card--cta .sector-card__icon { background: rgba(255, 255, 255, 0.12); color: var(--c-champagne); }
.sector-card--cta .sector-card__name { color: var(--c-white); }
.sector-card--cta p { color: var(--c-on-dark-muted); }
.sector-card--cta .btn { margin-top: var(--space-3); white-space: normal; text-align: center; }
.sector-card--cta :focus-visible { outline-color: var(--focus-ring-on-dark); }
@media (min-width: 700px) { .sector-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .sector-cards { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } .sector-card { padding: var(--space-6); } }
/* ---------- c-tech : technologies en appui ---------- */
.c-tech__grid { display: grid; gap: var(--space-6); padding-bottom: var(--space-8); }
.tech-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tech-list li { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-5); border: 1.5px solid var(--c-line-strong); border-radius: var(--radius-pill); font-weight: var(--weight-medium); }
.tech-note { margin-top: var(--space-4); font-size: var(--text-secondary); }
.c-tech .exp-grid { margin-top: var(--space-5); }
@media (min-width: 1024px) { .c-tech__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-9); align-items: end; } }

/* ---------- c-faq ---------- */
.c-faq__layout { display: grid; gap: var(--space-6); }
.faq { border-top: var(--border-rule); }
.faq__item { border-bottom: 1px solid var(--c-line-strong); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 72px; padding-block: var(--space-4); cursor: pointer; list-style: none; font-size: var(--text-h4); font-weight: var(--weight-semibold); letter-spacing: -0.01em; line-height: 1.3; color: var(--c-petrol); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--c-petrol); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 16h12M16 10v12' fill='none' stroke='%231F3A5F' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 32px no-repeat; transition: transform var(--dur-200) var(--ease-standard); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.faq__answer { display: grid; gap: var(--space-3); padding-bottom: var(--space-5); max-width: 68ch; color: var(--text-muted); font-size: var(--text-lead); }
.faq__answer a { color: var(--c-petrol); font-weight: var(--weight-medium); }
@media (min-width: 1024px) { .c-faq__layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: var(--space-9); } }

/* ---------- Rouge Coccinet : action principale et point actif ----------
   Un seul sens : « c'est ici qu'il faut agir ». Moins de 5 % de la surface.
   Bouton en rouge profond (blanc 6,0:1) ; rouge du logo réservé aux repères graphiques. */
.btn--cta { background: var(--cta); border-color: var(--cta); color: var(--cta-text); }
.btn--cta:hover { background: var(--cta-hover); border-color: var(--cta-hover); color: var(--cta-text); }
.c-hero .btn--cta:focus-visible, .c-poc .btn--cta:focus-visible { outline-color: var(--focus-ring-on-dark); }
.track__tab[aria-selected="true"] .track__node { background: var(--cta); border-color: var(--cta); color: var(--c-white); }
.track__tab[aria-selected="true"] .track__num { color: var(--cta); }
.sp-tab::after { content: ""; flex: none; width: 10px; height: 10px; margin-left: var(--space-1); border-radius: 50%; background: transparent; }
.sp-tab[aria-selected="true"]::after { background: var(--c-red); box-shadow: 0 0 0 2px var(--c-white); }
.sp-tab[aria-selected="true"] .icon { color: var(--c-white); }
.word-tab[aria-selected="true"] .word-tab__bar i { background: var(--cta); }
.c-page-hero :where(h1, h2, h3) { color: var(--c-white); }
.c-page-hero__inner, .c-page-hero__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .c-page-hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }

/* Rouge Coccinet sur le gabarit offre : même règle que l'accueil (action principale, point actif) */
.c-page-hero .btn--cta:focus-visible { outline-color: var(--focus-ring-on-dark); }
/* Frise : l'étape atteinte la plus récente = étape en cours, en rouge */
.spine-step.is-current .spine-step__node { background: var(--cta); border-color: var(--cta); color: var(--c-white); }
.spine-step.is-current .spine-step__num { color: var(--cta); }

@media (max-width: 639px) { .path__cta { width: 100%; padding-inline: var(--space-4); } }

/* Hero offre : schéma « deux points de départ, une même méthode » */
.flow { display: grid; justify-items: center; padding: var(--space-5) var(--space-4); border: 1px solid var(--c-on-dark-line); border-radius: 8px; background: color-mix(in srgb, var(--c-petrol) 85%, #000); }
.flow__cap { margin-bottom: var(--space-4); font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--c-champagne); text-align: center; }
.flow__starts { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); width: 100%; }
.flow__starts li { display: grid; justify-items: center; gap: 2px; padding: var(--space-3) var(--space-2); border: 1px solid var(--c-on-dark-line); border-radius: 6px; text-align: center; }
.flow__starts .icon { width: 24px; height: 24px; margin-bottom: var(--space-1); color: var(--c-champagne); }
.flow__starts b { font-weight: var(--weight-semibold); }
.flow__starts span { font-size: var(--text-meta); color: var(--c-on-dark-muted); line-height: 1.35; }
.flow__merge { display: block; width: 100%; height: 40px; overflow: visible; }
.flow__merge path { fill: none; stroke: var(--c-on-dark-muted); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.flow__steps { list-style: none; position: relative; width: 100%; }
.flow__steps::before { content: ""; position: absolute; left: 50%; top: 14px; bottom: 14px; width: 2px; margin-left: -1px; background: var(--c-champagne); opacity: 0.6; }
.flow__steps li { position: relative; display: grid; grid-template-columns: 1fr 28px 1fr; align-items: center; column-gap: var(--space-4); min-height: 40px; }
.flow__num { justify-self: end; font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--c-champagne); }
.flow__dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--c-champagne); background: color-mix(in srgb, var(--c-petrol) 85%, #000) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3.2 6.2 1.8 1.8 3.8-4' fill='none' stroke='%23C4A46E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.flow__steps b { font-size: var(--text-lead); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.flow__end { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: 6px; background: var(--c-white); color: var(--c-petrol); }
.flow__end .icon { width: 24px; height: 24px; }
.flow__end span { display: grid; font-size: var(--text-meta); color: var(--text-muted); }
.flow__end b { font-size: var(--text-body); color: var(--c-petrol); }
.flow__note { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--text-meta); color: var(--c-on-dark-muted); text-align: center; }
@media (min-width: 640px) { .flow { padding: var(--space-6); } }
@media (min-width: 1024px) { .c-page-hero__grid { align-items: center; } }
@media (max-width: 639px) { .path__cta { width: 100%; padding-inline: var(--space-4); } }
@media (min-width: 1024px) {
  .uc-feature__media { padding: var(--space-7) var(--space-8) var(--space-7) var(--space-6); }
  .uc-feature__mobile { right: var(--space-5); bottom: var(--space-6); width: 22%; }
}
/* Schéma hero : points de départ en cartes blanches, comme l'arrivée */
.flow__starts li { background: var(--c-white); border-color: var(--c-white); color: var(--c-petrol); }
.flow__starts .icon { color: var(--c-petrol); }
.flow__starts span { color: var(--text-muted); }
.sp-logo--issy { width: 26%; max-width: 104px; }
/* Témoignages : sans comptage (« 11 clients sur 36 » retiré) ; la barre ne sert plus qu'à marquer le mot actif */
.word-tab { grid-template-columns: 1fr; }
.word-tab__bar { background: transparent; }
.word-tab__bar i { width: 100%; opacity: 0; }
.word-tab:hover .word-tab__bar i { opacity: 0.3; }
.word-tab[aria-selected="true"] .word-tab__bar i, .word-tab[aria-selected="true"]:hover .word-tab__bar i { opacity: 1; }
/* Témoignages rééquilibrés (≥ 1024 px) : les mots en ligne, les citations côte à côte en dessous */
@media (min-width: 1024px) {
  .words { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .words__list { grid-auto-flow: column; justify-content: space-between; gap: var(--space-6); border-top: 0; border-bottom: 1px solid var(--c-line); }
  .word-tab { gap: var(--space-3); padding: 0; border-bottom: 0; }
  .word-tab__word { font-size: clamp(1.75rem, 0.9rem + 1.5vw, 2.5rem); }
  .word-tab__bar { margin-bottom: -1px; }
  .word-panel { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-5); align-items: stretch; }
  .word-quote + .word-quote { margin-top: 0; }
  .word-quote { display: flex; flex-direction: column; justify-content: space-between; }
}
/* Témoignages (< 1024 px) : les mots en rangée défilante, les citations remontent juste en dessous */
@media (max-width: 1023px) {
  .words__list { display: flex; gap: var(--space-6); overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(var(--gutter) * -1); padding: var(--space-1) var(--gutter) 0; border-top: 0; border-bottom: 1px solid var(--c-line); scrollbar-width: none; }
  .words__list::-webkit-scrollbar { display: none; }
  .word-tab { flex: none; gap: var(--space-3); padding: 0; border-bottom: 0; scroll-snap-align: start; }
  .word-tab__word { font-size: 1.75rem; white-space: nowrap; }
  .word-tab__bar { margin-bottom: -1px; }
}
/* Rangées défilantes : l’accroche des onglets respecte la marge latérale (sinon le 1er onglet colle au bord) */
.words__list, .sp-tabs { scroll-padding-inline: var(--gutter); }
/* Bande « Plus vite. Plus fiable. Plus loin. » : 1er bloc calé à gauche, dernier à droite,
   filets centrés dans des écarts égaux */
.c-statement__sep { display: none; }
@media (min-width: 900px) {
  .c-statement { display: flex; justify-content: space-between; align-items: stretch; gap: 0; }
  .c-statement__item, .c-statement__item + .c-statement__item { flex: none; padding: 0; border-left: 0; }
  .c-statement__sep { display: flex; justify-content: center; flex: 1 1 0; min-width: var(--space-6); }
  .c-statement__sep::before { content: ""; width: 1px; background: var(--c-on-dark-line); }
}

/* ==========================================================================
   Gabarit offre — itération : titre du schéma, « Ce que nous construisons »,
   cas FICT en vitrine, cartes secteurs avec logos
   ========================================================================== */
/* Schéma hero : titre lisible */
.flow__cap { margin-bottom: var(--space-5); font-size: var(--text-h4); font-weight: var(--weight-semibold); letter-spacing: -0.01em; line-height: 1.3; color: var(--c-white); }

/* Ce que nous construisons : cartes avec fonctions courantes et exemple réel */
.builds { list-style: none; display: grid; gap: var(--space-4); row-gap: var(--space-4); margin-top: var(--space-5); }
.build { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) var(--space-5); background: var(--c-linen-soft); border: 1px solid var(--c-line); border-radius: 8px; transition: border-color var(--dur-150) var(--ease-standard), transform var(--dur-150) var(--ease-standard); }
.build:hover { border-color: var(--c-petrol); transform: translateY(-2px); }
.build__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--c-petrol); color: var(--c-white); margin-bottom: var(--space-2); }
.build__icon .icon { width: 24px; height: 24px; }
.build__title { font-size: var(--text-h4); letter-spacing: -0.01em; }
.build__text { color: var(--text-muted); }
.build__text a { color: var(--c-petrol); font-weight: var(--weight-medium); }
.build__tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.build__tags li { padding: 4px var(--space-3); border-radius: var(--radius-pill); background: var(--surface-page); border: 1px solid var(--c-line); font-size: var(--text-secondary); font-weight: var(--weight-medium); color: var(--c-petrol); }
.build__ref { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--c-line); font-size: var(--text-secondary); color: var(--text-muted); }
.build__ref a { color: var(--c-petrol); font-weight: var(--weight-semibold); }
@media (min-width: 700px) { .builds { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .builds { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } .build { padding: var(--space-6); } }

/* Cas FICT : les captures en vitrine sur toute la largeur, le texte dessous */
.uc-feature, .uc-feature { grid-template-columns: minmax(0, 1fr) !important; }
.uc-feature__media { position: relative; display: grid; justify-items: center; overflow: hidden; padding: var(--space-7) var(--space-4) 0 !important; }
.uc-feature__desktop { width: min(920px, 100%); }
.uc-feature__desktop img { border-radius: 8px 8px 0 0; box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.25); }
.uc-feature__mobile { right: max(var(--space-3), calc(50% - 500px)) !important; bottom: -56px !important; width: clamp(96px, 17%, 190px) !important; max-width: none; }
.uc-feature__body { gap: var(--space-6); }
.uc-feature__intro, .uc-feature__details { display: grid; gap: var(--space-4); align-content: start; }
.uc-feature__title { font-size: var(--text-h2); line-height: 1.12; letter-spacing: var(--tracking-display); }
.uc-feature__details .link-action { justify-self: start; }
@media (min-width: 768px) { .uc-feature__media { padding: var(--space-8) var(--space-6) 0 !important; } }
@media (min-width: 1024px) {
  .uc-feature__body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-9); padding: var(--space-8) var(--space-8); }
}

/* Cartes secteurs : promesse, enjeux, outils en pastilles, logos en couleur au survol */
/* Version resserrée : moins de padding, d'interlignes et de hauteur de logos */
.sector-card { gap: var(--space-3); }
@media (min-width: 1100px) { .sector-card { padding: var(--space-5); } }
.sector-card__head { margin-bottom: 0; }
.sector-card__icon { width: 40px; height: 40px; }
.sector-card__icon .icon { width: 20px; height: 20px; }
.sector-card__promise { font-size: var(--text-body); line-height: 1.45; color: var(--text); }
.sector-card__issues { margin-top: 0; }
.sector-card__issues li { padding-block: 2px; font-size: var(--text-secondary); color: var(--text-muted); }
.sector-card__tools { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0; }
.sector-card__tools li { padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--c-petrol-tint); color: var(--c-petrol); font-size: var(--text-secondary); font-weight: var(--weight-medium); }
/* Projets réalisés : vrais projets (fichier « Références clients »), client + une phrase, ancienneté si significative */
.sector-card__refs { display: grid; gap: var(--space-2); }
.sector-card__refs ul { list-style: none; display: grid; gap: var(--space-2); }
.sector-card__refs li { display: grid; gap: 2px; padding-left: var(--space-3); border-left: 2px solid var(--c-champagne); font-size: var(--text-secondary); line-height: 1.4; color: var(--text-muted); }
.sector-card__refs b { font-size: var(--text-secondary); font-weight: var(--weight-semibold); letter-spacing: -0.01em; color: var(--c-ink); }
.sector-card__since { justify-self: start; margin-top: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--c-petrol-tint); color: var(--c-petrol); font-size: var(--text-meta); font-weight: var(--weight-semibold); }
.sector-card__more { padding-left: calc(var(--space-3) + 2px); font-size: var(--text-secondary); font-style: italic; color: var(--text-muted); }
/* Logos clients : tuiles égales sur fond lin, logos en gris (couleur au survol), noms sans logo en mot-marque */
.sector-card__clients { display: grid; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); border-top: var(--border-hairline); }
.sector-card__logos { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.sector-card__logos li { display: grid; place-items: center; height: 52px; padding: var(--space-1) var(--space-2); border-radius: 6px; background: var(--c-linen-soft); }
.sector-card__logos img { width: auto; height: auto; max-width: 100%; max-height: 24px; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1); opacity: 0.75; transition: filter var(--dur-200) var(--ease-standard), opacity var(--dur-200) var(--ease-standard); }
.sector-card__logos img.is-tall { max-height: 42px; }
.sector-card__logos img.is-wide { max-height: 12px; }
.sector-card:hover .sector-card__logos img { filter: none; opacity: 1; }
.sector-card__logos li.is-name { font-size: var(--text-secondary); font-weight: var(--weight-semibold); letter-spacing: 0.02em; text-transform: uppercase; text-align: center; line-height: 1.2; color: var(--text-muted); }

/* ==========================================================================
   c-steps — méthode, variante B : cinq étapes visibles d'un coup, sans clic.
   Une ligne relie « Votre idée » à « Votre outil en ligne » ; elle se trace
   à l'entrée dans l'écran et les numéros se remplissent un à un.
   ========================================================================== */

.steps { --marker: 44px; position: relative; }
.steps__ends { display: none; }
.steps__list { list-style: none; position: relative; display: grid; gap: var(--space-6); }

/* Mobile : colonne, ligne verticale à gauche */
.steps__list::before, .steps__list::after { content: ""; position: absolute; left: calc(var(--marker) / 2 - 1px); top: calc(var(--marker) / 2); bottom: calc(var(--marker) / 2); width: 2px; }
.steps__list::before { background: var(--border); }
.steps__list::after { background: var(--c-petrol); transform-origin: top; }

.step { position: relative; display: grid; grid-template-columns: var(--marker) 1fr; gap: var(--space-4); }
.step__marker { position: relative; z-index: 1; width: var(--marker); height: var(--marker); border-radius: 50%; display: grid; place-items: center; background: var(--c-petrol); border: 2px solid var(--c-petrol); color: var(--c-white); font-weight: var(--weight-semibold); font-size: var(--text-lead); box-shadow: 0 0 0 6px var(--surface-page); font-variant-numeric: tabular-nums; transition: background-color var(--dur-200) var(--ease-out), color var(--dur-200) var(--ease-out); }
.step__body { display: flex; flex-direction: column; gap: var(--space-2); padding-top: 8px; }
.step__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-h4); color: var(--c-petrol); letter-spacing: -0.01em; }
.step__title .icon { width: 20px; height: 20px; flex: none; }
.step__text { color: var(--text-muted); line-height: 1.5; }
.step__check { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-3); border-top: var(--border-hairline); font-size: var(--text-secondary); line-height: 1.4; }
.step__check svg { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--c-champagne); fill: none; stroke: var(--c-white); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.step__check b { font-weight: var(--weight-semibold); color: var(--text); }

@media (min-width: 900px) {
  .steps__ends { display: flex; justify-content: space-between; margin-bottom: var(--space-3); font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--text-muted); }
  .steps__ends span { display: inline-flex; align-items: center; gap: var(--space-2); }
  .steps__ends span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--c-petrol); }
  .steps__ends span:last-child { flex-direction: row-reverse; }
  .steps__ends span:last-child::before { background: var(--c-champagne); border-color: var(--c-champagne); }
  .steps__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-6); padding-top: calc(var(--marker) + var(--space-5)); }
  .steps__list::before, .steps__list::after { left: 0; right: 0; top: calc(var(--marker) / 2 - 1px); bottom: auto; width: auto; height: 2px; }
  .steps__list::after { transform-origin: left; }
  .step { grid-template-columns: 1fr; gap: 0; }
  .step__marker { position: absolute; top: calc(-1 * (var(--marker) + var(--space-5))); left: 0; }
  .step__body { height: 100%; padding-top: 0; gap: var(--space-3); }
  .step__check { margin-top: auto; }
  .step__text { margin-bottom: var(--space-3); }
}

/* Moment orchestré : la ligne se trace, les numéros se remplissent */
.js [data-steps] .steps__list::after { transform: scaleY(0); transition: transform 1200ms var(--ease-standard); }
@media (min-width: 900px) { .js [data-steps] .steps__list::after { transform: scaleX(0); } }
.js [data-steps] .step__marker { background: var(--surface-page); color: var(--c-petrol); transition-delay: calc(var(--i) * 240ms + 120ms); }
.js [data-steps] .step__body { opacity: 0; transform: translateY(6px); transition: opacity var(--dur-300) var(--ease-out), transform var(--dur-300) var(--ease-out); transition-delay: calc(var(--i) * 240ms + 120ms); }
.js [data-steps].is-revealed .steps__list::after { transform: none; }
.js [data-steps].is-revealed .step__marker { background: var(--c-petrol); color: var(--c-white); }
.js [data-steps].is-revealed .step__body { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-steps] .steps__list::after, .js [data-steps] .step__marker, .js [data-steps] .step__body { transition: none; }
}

.steps__promise { list-style: none; display: grid; gap: var(--space-5); margin-top: var(--space-8); padding: var(--space-6); background: var(--c-linen-soft); }
.steps__promise li { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); }
.steps__promise .icon { width: 24px; height: 24px; color: var(--c-petrol); }
.steps__promise b { display: block; font-weight: var(--weight-semibold); color: var(--c-petrol); }
.steps__promise span { color: var(--text-muted); font-size: var(--text-secondary); }
.steps__promise a { color: var(--c-petrol); font-weight: var(--weight-medium); }
@media (min-width: 900px) { .steps__promise { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); padding: var(--space-6) var(--space-7); } }

.c-steps__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-6); }

/* Configurateur : mention de confidentialité sous le champ libre */
.poc__confidential { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-4) 0 0; font-size: var(--text-secondary); color: var(--text-muted); max-width: 60ch; }
.poc__confidential .icon { flex: none; margin-top: 0.2em; color: var(--c-petrol); }
.poc__confidential b { color: var(--text); font-weight: var(--weight-semibold); }

/* Témoignages : mots en graisse normale (plus légers), numérotés comme un sommaire ; le numéro du mot actif passe en rouge */
.word-tab { gap: var(--space-1); }
.word-tab__num { font-size: var(--text-meta); font-weight: var(--weight-semibold); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: var(--text-muted); transition: color var(--dur-150) var(--ease-standard); }
.word-tab__word { font-weight: 400; letter-spacing: -0.03em; }
.word-tab__bar { margin-top: var(--space-2); }
.word-tab[aria-selected="true"] .word-tab__num { color: var(--cta); }

/* ==========================================================================
   c-hero__field — fond « champ de points », écho du logo (2026-10-12)
   Canvas dessiné à la taille réelle du hero par assets/js/hero-field.js ;
   couleurs lues ici (--field-ink, --field-a) ; désactivable : html[data-herofield="off"]
   ========================================================================== */
.c-hero__field { position: absolute; inset: 0; z-index: 0; pointer-events: none; --field-ink: #F7F4EE; --field-a: 0.1;
  /* Effacé autour du bloc texte (centré sur le conteneur, quelle que soit la largeur d'écran) */
  -webkit-mask-image: radial-gradient(ellipse 820px 400px at calc(50% - 160px) 44%, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.45) 60%, #000 100%);
  mask-image: radial-gradient(ellipse 820px 400px at calc(50% - 160px) 44%, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.45) 60%, #000 100%); }
.c-hero__field canvas { display: block; opacity: 0; animation: hero-field-in 1.4s var(--ease-standard, ease-out) 0.2s forwards; }
@keyframes hero-field-in { to { opacity: 1; } }
html[data-hero="light"] .c-hero__field { --field-ink: var(--c-petrol); --field-a: 0.12; }
html[data-herofield="off"] .c-hero__field { display: none; }
@media (max-width: 899px) { .c-hero__field { --field-a: 0.08; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.5)); mask-image: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.5)); } }
@media (prefers-reduced-motion: reduce) { .c-hero__field canvas { animation: none; opacity: 1; } }
/* Pages intérieures (c-page-hero) : traînée seule, toujours sur fond pétrole ; effacée sous le texte et le schéma */
html .c-page-hero .c-hero__field { --field-ink: #F7F4EE; --field-a: 0.1;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.45), rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.45));
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.45), rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.45)); }

/* ---------- Apparition au défilement : un fondu court et une montée de 12 px, une seule fois ----------
   Posé par site.js sur les blocs situés sous la ligne de flottaison au chargement (rien ne disparaît à l'écran). */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 700ms var(--ease-standard), transform 900ms var(--ease-out); transition-delay: calc(var(--reveal-i, 0) * 70ms); }
.reveal.is-in { opacity: 1; transform: none; }
@media print { .reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   Gabarit méthode (page-methode.php)
   Blocs propres : roles (schéma du hero), facts, frise détaillée, c-ai (circuit), data-grid.
   Réutilisés : c-page-hero, toc, c-define, c-method-full / spine, exp-grid, c-paths, c-quote-band, c-faq, c-poc.
   ========================================================================== */

/* Hero : « Qui fait quoi, à chaque étape » — étapes en lignes, trois rôles en colonnes */
.roles { justify-items: stretch; }
.roles .flow__cap { text-align: left; }
.roles__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); align-items: stretch; }
.roles__grid > * { min-height: 44px; display: flex; align-items: center; border-bottom: 1px solid var(--c-on-dark-line); }
.roles__corner, .roles__who { border-bottom-color: var(--c-on-dark-muted); }
.roles__who { flex-direction: column; justify-content: flex-end; gap: 1px; padding-bottom: var(--space-2); text-align: center; line-height: 1.2; }
.roles__who .icon { width: 20px; height: 20px; margin-bottom: 2px; color: var(--c-champagne); }
.roles__who b { font-size: var(--text-secondary); font-weight: var(--weight-semibold); }
.roles__who small { font-size: var(--text-meta); color: var(--c-on-dark-muted); }
.roles__step { gap: var(--space-2); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.roles__step i { font-style: normal; font-size: var(--text-meta); color: var(--c-champagne); }
.roles__cell { justify-content: center; }
.roles__cell--team::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-white); }
.roles__cell--ia .icon { width: 16px; height: 16px; color: var(--c-champagne); }
.roles__cell--you::before { content: ""; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--c-champagne); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3.2 6.2 1.8 1.8 3.8-4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.roles__grid > :nth-last-child(-n+4) { border-bottom: 0; }
.roles__ends { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px dashed var(--c-on-dark-line); font-size: var(--text-meta); color: var(--c-on-dark-muted); }
.roles__ends span { display: inline-flex; align-items: center; gap: var(--space-2); }
.roles__end { width: 10px; height: 10px; border-radius: 50%; }
.roles__end--before { background: var(--c-red); box-shadow: 0 0 0 2px var(--c-white); }
.roles__end--after { background: var(--c-champagne); }
@media (min-width: 640px) { .roles__grid > * { min-height: 48px; } .roles__step { font-size: var(--text-lead); } }

/* En bref : quatre repères chiffrés, filet pétrole comme les offres */
.facts { list-style: none; display: grid; gap: var(--space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts li { display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-4); border-top: 1px solid var(--c-petrol); }
.facts b { font-size: var(--text-h1); line-height: 1; letter-spacing: var(--tracking-display); font-weight: var(--weight-semibold); color: var(--c-petrol); }
.facts span { display: grid; gap: 2px; color: var(--text-muted); font-size: var(--text-secondary); }
.facts strong { color: var(--text); font-size: var(--text-body); font-weight: var(--weight-semibold); }
@media (min-width: 1024px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); } }

/* Frise détaillée : quatre rubriques (2 × 2), listes courtes, pied « vous validez / de votre côté », citation */
.c-method-full--detail .spine-step__node { background: var(--surface-alt); }
.c-method-full--detail .spine-end__node { background: var(--surface-alt); }
.c-method-full__cta { justify-self: start; }
.spine-step__cols ul { list-style: none; display: grid; gap: var(--space-1); }
.spine-step__cols li { position: relative; padding-left: var(--space-4); }
.spine-step__cols li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-champagne); }
@media (min-width: 768px) { .spine-step__cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); } }
.spine-step__extra { margin-top: var(--space-2); padding: var(--space-3) var(--space-4); border-left: 2px solid var(--c-champagne); background: var(--surface-page); font-size: var(--text-secondary); color: var(--text-muted); }
.spine-step__extra b { color: var(--text); font-weight: var(--weight-semibold); }
.spine-step__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-3); }
.spine-step__foot .spine-step__gate { margin-top: 0; }
.spine-step__you { display: grid; font-size: var(--text-secondary); color: var(--text-muted); max-width: 46ch; }
.spine-step__you b { font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--accent-ink); }
.spine-step__quote { margin-top: var(--space-4); padding-left: var(--space-4); border-left: 2px solid var(--c-petrol); max-width: 60ch; }
.spine-step__quote blockquote { font-size: var(--text-lead); line-height: 1.45; color: var(--c-petrol); }
.spine-step__quote figcaption { margin-top: var(--space-2); font-size: var(--text-secondary); color: var(--text-muted); }
.spine-step__quote figcaption b { margin-right: var(--space-2); color: var(--text); font-weight: var(--weight-semibold); }

/* L'IA : un circuit en trois temps, puis deux colonnes « fait / ne fait pas » */
.circuit { padding: var(--space-6) var(--space-5); border-radius: 8px; background: var(--surface-dark); color: var(--text-on-dark); }
.circuit__cap { margin-bottom: var(--space-5); font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--c-champagne); }
.circuit__list { list-style: none; display: grid; gap: var(--space-5); counter-reset: none; }
.circuit__list li { position: relative; display: grid; grid-template-columns: 48px 1fr; column-gap: var(--space-4); align-items: start; }
.circuit__list li > b { font-size: var(--text-h4); font-weight: var(--weight-semibold); letter-spacing: -0.01em; color: var(--c-white); }
.circuit__list li > span:last-child { grid-column: 2; color: var(--c-on-dark-muted); font-size: var(--text-secondary); }
.circuit__node { grid-row: span 2; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--c-champagne); color: var(--c-champagne); background: var(--surface-dark); position: relative; z-index: 1; }
.circuit__node .icon { width: 22px; height: 22px; }
.circuit__node--you { background: var(--c-champagne); color: var(--c-petrol); }
.circuit__list li:not(:last-child)::after { content: ""; position: absolute; left: 23px; top: 48px; bottom: calc(var(--space-5) * -1); border-left: 2px dashed var(--c-on-dark-line); }
@media (min-width: 900px) {
  .circuit { padding: var(--space-7); }
  .circuit__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .circuit__list li { grid-template-columns: 1fr; row-gap: var(--space-2); }
  .circuit__node { grid-row: auto; margin-bottom: var(--space-3); }
  .circuit__list li > span:last-child { grid-column: 1; }
  .circuit__list li:not(:last-child)::after { left: 56px; right: calc(var(--space-6) * -1 + 8px); top: 23px; bottom: auto; border-left: 0; border-top: 2px dashed var(--c-on-dark-line); }
}
/* L'IA en miroir : ce qu'elle fait / ce qu'elle ne fait pas, étape par étape */
.ai-mirror { margin-top: var(--space-8); }
.ai-mirror__head { display: none; }
.ai-mirror__title { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-h4); font-weight: var(--weight-semibold); letter-spacing: -0.01em; color: var(--c-petrol); }
.ai-mirror__title .icon { width: 24px; height: 24px; }
.ai-mirror__list { list-style: none; display: grid; gap: var(--space-5); }
.ai-mirror__row { display: grid; gap: var(--space-2); }
.ai-mirror__step { justify-self: start; display: inline-flex; align-items: baseline; gap: var(--space-2); font-weight: var(--weight-semibold); color: var(--c-petrol); text-decoration: none; }
.ai-mirror__step span { font-size: var(--text-secondary); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ai-mirror__step:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.ai-mirror__cell { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); border-radius: 8px; }
.ai-mirror__label { font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--text-muted); }
/* Langage visuel de la page : pointillés = IA, plein = humain */
.ai-mirror__cell--does { border: 1.5px dashed var(--c-petrol); }
.ai-mirror__cell--not { background: var(--surface-alt); border-left: 3px solid var(--c-champagne); border-radius: 0 8px 8px 0; }
.ai-pledges { margin-top: var(--space-7); padding: var(--space-5); border-radius: 8px; background: var(--surface-dark); color: var(--text-on-dark); }
.ai-pledges__title { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--weight-semibold); color: var(--c-champagne); }
.ai-pledges__list { list-style: none; display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.ai-pledges__list li { display: grid; gap: 2px; padding-top: var(--space-4); border-top: 1px solid var(--c-on-dark-line); font-size: var(--text-secondary); color: var(--c-on-dark-muted); }
.ai-pledges__list b { font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--c-white); }
@media (min-width: 1024px) {
  .ai-mirror__head, .ai-mirror__row { display: grid; grid-template-columns: 10rem minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-5); align-items: stretch; }
  .ai-mirror__head { padding-bottom: var(--space-4); border-bottom: 1px solid var(--c-line-strong); }
  .ai-mirror__list { gap: 0; }
  .ai-mirror__row { padding-block: var(--space-3); border-bottom: 1px solid var(--c-line); }
  .ai-mirror__step { align-self: center; flex-direction: column; gap: 0; font-size: var(--text-lead); }
  .ai-mirror__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ai-mirror__cell { align-content: center; }
  .ai-pledges { padding: var(--space-6) var(--space-7); }
  .ai-pledges__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
}

/* Données : grille de six engagements (exp-grid) */
.data-grid { margin-top: 0; row-gap: var(--space-7); }
.data-grid .exp > .icon { color: var(--c-petrol); }
.data-grid .exp__text .todo { display: inline-block; margin-top: var(--space-1); }

/* Avant / après : liens dans les listes de la carte */
.path__signs a { color: var(--c-petrol); font-weight: var(--weight-semibold); }
.c-paths:not(.c-section--alt) .path { background: var(--surface-alt); }
.c-paths:not(.c-section--alt) .path__quote { background: var(--surface-page); }

/* ---------- Méthode : les étapes en fiches (visuel du livrable + trois couloirs + validation) ---------- */
.c-method-full__head { margin-bottom: var(--space-6); }
.c-method-full__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-7); }
.spine--cards .spine-step { padding-block: var(--space-4); }
.spine--cards .spine-step__body { padding-top: 0; gap: var(--space-4); }
.spine--cards .spine-step__node { margin-top: var(--space-6); }

.stepcard { display: grid; background: var(--surface-page); border: 1px solid var(--c-line); border-radius: 8px; overflow: hidden; }
.stepcard__main { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5); }
.stepcard__verb { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); letter-spacing: var(--tracking-display); line-height: 1.05; }
.stepcard__goal { font-size: var(--text-lead); color: var(--text-muted); max-width: 40ch; }
.stepcard__extra { padding: var(--space-3) var(--space-4); border-left: 2px solid var(--c-champagne); background: var(--c-linen-soft); font-size: var(--text-secondary); color: var(--text-muted); }
.stepcard__extra b { color: var(--text); font-weight: var(--weight-semibold); }

/* Couloirs : l'équipe, l'IA, vous — toujours dans le même ordre */
.stepcard__lanes { display: grid; padding: 0 var(--space-5) var(--space-3); }
.lane { display: grid; gap: var(--space-2); padding-block: var(--space-4); border-top: 1px solid var(--c-line); }
.lane__who { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--accent-ink); }
.lane__who .icon { width: 18px; height: 18px; }
.lane__text { line-height: 1.5; }
.lane__human { font-size: var(--text-secondary); color: var(--text-muted); }
.lane__human b { color: var(--text); font-weight: var(--weight-semibold); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips li { padding: 5px 12px; border-radius: var(--radius-pill); background: var(--c-petrol-tint); color: var(--c-petrol); font-size: var(--text-secondary); font-weight: var(--weight-medium); line-height: 1.3; }
.lane--ia .chips li { background: transparent; border: 1px dashed var(--c-petrol); padding: 4px 11px; }

/* Validation : bandeau en pied de fiche */
.stepcard__gate { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--c-petrol); color: var(--c-white); }
.stepcard__gate b { font-weight: var(--weight-semibold); }
.stepcard__check { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c-white); }
.stepcard__check svg { width: 18px; height: 18px; fill: none; stroke: var(--c-petrol); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.stepcard__quote { padding-left: var(--space-4); border-left: 2px solid var(--c-champagne); max-width: 62ch; }
.stepcard__quote blockquote { font-size: var(--text-body); line-height: 1.5; color: var(--c-petrol); }
.stepcard__quote figcaption { margin-top: var(--space-1); font-size: var(--text-secondary); color: var(--text-muted); }
.stepcard__quote figcaption b { margin-right: var(--space-2); color: var(--text); font-weight: var(--weight-semibold); }

/* Livrable : vignette dessinée + légende */
.deliv { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--space-4); align-items: center; margin-top: var(--space-2); padding: var(--space-3); border-radius: 6px; background: var(--c-linen-soft); }
.deliv__visual { display: grid; place-items: center; height: 104px; }
.deliv__cap { display: grid; gap: 2px; font-size: var(--text-secondary); color: var(--text-muted); }
.deliv__cap span { font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--accent-ink); }
.deliv__cap b { font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--text); }

.deliv__doc, .deliv__screen { position: relative; width: 112px; background: var(--c-white); border: 1px solid var(--c-line-strong); border-radius: 4px; box-shadow: 0 6px 16px color-mix(in srgb, var(--c-petrol) 14%, transparent); }
.deliv__doc { display: grid; gap: 5px; padding: 9px 10px 10px; transform: rotate(-2deg); }
.deliv__title { font-size: 9px; font-weight: var(--weight-semibold); color: var(--c-petrol); line-height: 1.2; padding-bottom: 4px; border-bottom: 1px solid var(--c-line); }
.deliv__row { display: flex; align-items: center; gap: 5px; font-size: 8.5px; line-height: 1; color: var(--text-muted); }
.deliv__row i { flex: none; width: 8px; height: 8px; border: 1px solid var(--c-petrol); border-radius: 2px; }
.deliv__row--ok i { border-radius: 50%; background: var(--c-petrol) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3.2 6.2 1.8 1.8 3.8-4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 8px no-repeat; }
.deliv__lines { height: 10px; margin-top: 2px; background: linear-gradient(var(--c-line), var(--c-line)) 0 0 / 100% 2px no-repeat, linear-gradient(var(--c-line), var(--c-line)) 0 6px / 70% 2px no-repeat; }

.deliv__screen { height: 84px; display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.deliv__bar { display: flex; gap: 3px; padding: 4px 5px; background: var(--c-linen); }
.deliv__bar i { width: 4px; height: 4px; border-radius: 50%; background: var(--c-line-strong); }
.deliv__wire { display: grid; grid-template-columns: 22px 1fr; gap: 5px; padding: 6px; }
.deliv__side { border-radius: 2px; background: var(--c-petrol); opacity: 0.85; }
.deliv__blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.deliv__blocks i { border-radius: 2px; background: var(--c-petrol-tint); }
.deliv__blocks i:first-child { grid-column: span 2; background: var(--c-line); }
.deliv__cursor { position: absolute; right: 26px; bottom: 16px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 14px solid var(--c-petrol); transform: rotate(-30deg); }
.deliv__cursor::before { content: ""; position: absolute; left: -11px; top: -6px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--c-champagne); }
.deliv__play { position: absolute; left: 50%; top: 40%; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: var(--c-petrol); }
.deliv__play::after { content: ""; position: absolute; left: 10px; top: 7px; border-left: 9px solid var(--c-white); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.deliv__lots { position: absolute; left: 6px; right: 6px; bottom: 6px; display: grid; gap: 3px; font-size: 8px; color: var(--text-muted); }
.deliv__lots b { font-weight: var(--weight-semibold); }
.deliv__lots > span { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.deliv__lots i { height: 4px; border-radius: 2px; background: var(--c-line); }
.deliv__lots i.is-done { background: var(--c-petrol); }
.deliv__status { position: absolute; left: 8px; top: 18px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--c-success) 12%, #fff); color: var(--c-success); font-size: 8.5px; font-weight: var(--weight-semibold); }
.deliv__status i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-success); }
.deliv__spark { position: absolute; left: 8px; right: 8px; bottom: 8px; width: calc(100% - 16px); height: 30px; }
.deliv__spark path { fill: none; stroke: var(--c-petrol); stroke-width: 1.6; vector-effect: non-scaling-stroke; }

@media (min-width: 640px) {
  .deliv { grid-template-columns: 160px minmax(0, 1fr); padding: var(--space-4); }
  .deliv__visual { height: 118px; }
  .deliv__doc, .deliv__screen { width: 128px; }
  .deliv__screen { height: 94px; }
  .lane { grid-template-columns: 128px minmax(0, 1fr); column-gap: var(--space-4); align-items: start; }
  .lane__who { padding-top: 5px; }
  .lane > :not(.lane__who) { grid-column: 2; }
}
@media (min-width: 1100px) {
  .stepcard { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
  .stepcard__main { padding: var(--space-6); border-right: 1px solid var(--c-line); }
  .stepcard__lanes { padding: var(--space-4) var(--space-6); align-content: center; }
  .stepcard__lanes .lane:first-child { border-top: 0; }
  .stepcard__gate { grid-column: 1 / -1; padding-inline: var(--space-6); }
}
/* Mobile : la fiche prend toute la largeur, la frise s'efface */
@media (max-width: 767px) {
  .spine--cards .spine-step { grid-template-columns: minmax(0, 1fr); }
  .spine--cards .spine-step::before, .spine--cards .spine-step::after, .spine--cards .spine-step__node { display: none; }
  .spine--cards .spine-end::before { display: none; }
}


/* Hero méthode : « Qui fait quoi » en trois cartes reliées (l'IA propose → l'équipe relit → vous validez),
   l'équipe montrée par de vrais visages */
.roles--cards { justify-items: stretch; }
.rolecards { display: grid; justify-items: stretch; }
.rolecard { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--space-4); align-items: center; padding: var(--space-4); border-radius: 8px; }
.rolecard p { display: grid; gap: 2px; }
.rolecard b { font-size: var(--text-lead); font-weight: var(--weight-semibold); letter-spacing: -0.01em; line-height: 1.25; }
.rolecard p span { font-size: var(--text-secondary); line-height: 1.4; }
.rolecard__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.rolecard__icon .icon { width: 22px; height: 22px; }
.rolecard--ia { border: 1.5px dashed var(--c-champagne); color: var(--c-white); }
.rolecard--ia .rolecard__icon { border: 1.5px solid var(--c-champagne); color: var(--c-champagne); }
.rolecard--ia p span { color: var(--c-on-dark-muted); }
.rolecard--team { background: var(--c-white); color: var(--c-petrol); }
.rolecard--team .rolecard__icon { background: var(--c-petrol); color: var(--c-white); }
.rolecard--team p span { color: var(--text-muted); }
.rolecard--you { background: var(--c-champagne); color: var(--c-white); }
.rolecard--you .rolecard__icon { background: var(--c-petrol); color: var(--c-champagne); }
.rolecard--you p span { color: var(--c-white); }
/* Liaison entre deux cartes : trait centré, ce qui circule posé dessus en pastille, flèche à l'arrivée */
.rolecard__link { position: relative; display: grid; place-items: center; justify-self: stretch; padding-block: var(--space-4); }
.rolecard__link::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 5px; border-left: 1.5px solid var(--c-champagne); transform: translateX(-50%); }
.rolecard__link::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--c-champagne); }
.rolecard__link span { position: relative; z-index: 1; padding: 3px 12px; border: 1px solid var(--c-champagne); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--c-petrol) 85%, #000); color: var(--c-champagne); font-size: var(--text-meta); font-weight: var(--weight-semibold); letter-spacing: 0.02em; line-height: 1.4; }
.faces { list-style: none; grid-column: 1 / -1; display: flex; margin-top: var(--space-3); padding-left: 4px; }
.faces li { margin-left: -8px; }
.faces li:first-child { margin-left: 0; }
.faces img { display: block; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--c-white); object-fit: cover; }
@media (min-width: 640px) { .rolecard { padding: var(--space-4) var(--space-5); } .faces { padding-left: calc(44px + var(--space-4)); } .faces img { width: 44px; height: 44px; } }

/* ==========================================================================
   Gabarit réalisations (archive-realisation.php) — 2026-10-12
   Blocs : c-page-hero--work + loyal (fidélité), c-featured, c-works (filtres + cartes),
   c-trust (logos sans fiche). Filtres : assets/js/realisations.js
   ========================================================================== */

/* Fidélité : six vignettes (capture réelle + durée écrite en grand), pas de jauge */
.loyal { display: grid; gap: var(--space-5); padding: var(--space-5); border: 1px solid var(--c-on-dark-line); border-radius: 8px; background: rgba(255, 255, 255, 0.04); }
.loyal__cap { font-size: var(--text-h4); font-weight: var(--weight-semibold); letter-spacing: -0.01em; line-height: 1.3; color: var(--c-white); }
.loyal__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
.loyal__item { display: grid; align-content: start; gap: var(--space-1); }
.loyal__shot { display: block; margin-bottom: var(--space-2); aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: var(--c-white); box-shadow: 0 0 0 1px var(--c-on-dark-line), 0 8px 20px -10px rgba(0, 0, 0, 0.6); }
.loyal__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.loyal__shot--draw { display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); color: var(--c-champagne); }
.loyal__shot--draw svg { width: 78%; height: 78%; }
.loyal__val { font-size: var(--text-h4); font-weight: var(--weight-semibold); letter-spacing: -0.02em; line-height: 1.1; color: var(--c-champagne); font-variant-numeric: tabular-nums; }
.loyal__name { font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--c-on-dark-muted); }
.loyal__name b { display: block; font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--c-white); }
.loyal__note { padding-top: var(--space-3); border-top: 1px solid var(--c-on-dark-line); font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--c-on-dark-muted); }
@media (min-width: 640px) { .loyal__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: no-preference) {
  .js .loyal__item { animation: loyal-in 0.6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 150ms); }
  .loyal__item:nth-child(2) { --i: 1; } .loyal__item:nth-child(3) { --i: 2; } .loyal__item:nth-child(4) { --i: 3; } .loyal__item:nth-child(5) { --i: 4; } .loyal__item:nth-child(6) { --i: 5; }
}
@keyframes loyal-in { from { opacity: 0; transform: translateY(8px); } }
@media (min-width: 1024px) { .c-page-hero--work .c-page-hero__grid { align-items: center; } .loyal { padding: var(--space-6); } }

/* Filtres : deux rangées de pastilles, défilement horizontal sur mobile */
.filters { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px solid var(--c-line-strong); }
.filters__group { display: grid; gap: var(--space-2); }
.filters__label { font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--text-muted); }
.filters__chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); padding: 0 var(--space-4); border: 1.5px solid var(--c-line-strong); border-radius: var(--radius-pill); background: var(--surface-page); font-size: var(--text-secondary); font-weight: var(--weight-medium); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-150) var(--ease-standard), border-color var(--dur-150) var(--ease-standard), color var(--dur-150) var(--ease-standard); }
.chip .icon { width: 18px; height: 18px; color: var(--c-petrol); }
.chip__n { min-width: 1.6em; padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface-alt); font-size: var(--text-meta); font-weight: var(--weight-semibold); text-align: center; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.chip:hover { border-color: var(--c-petrol); }
.chip[aria-pressed="true"] { background: var(--c-petrol); border-color: var(--c-petrol); color: var(--c-white); }
.chip[aria-pressed="true"] .icon { color: var(--c-champagne); }
.chip[aria-pressed="true"] .chip__n { background: rgba(255, 255, 255, 0.16); color: var(--c-white); }
.chip.is-zero:not([aria-pressed="true"]) { color: var(--text-muted); border-style: dashed; }
.filters__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-5); }
.filters__count { font-weight: var(--weight-semibold); color: var(--c-petrol); }
.filters__reset { padding: 0; border: 0; background: none; cursor: pointer; color: var(--text-muted); }
@media (max-width: 639px) {
  .filters__chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) var(--space-1); scrollbar-width: none; }
}
@media (min-width: 1024px) { .filters__group { grid-template-columns: 9rem 1fr; align-items: start; } .filters__label { display: flex; align-items: center; min-height: var(--target-min); } }

/* Cartes projet : vignette dessinée du livrable, logo client, ce que nous avons construit */
.works { list-style: none; display: grid; gap: var(--space-4); }
.work__card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); height: 100%; padding: 0 0 var(--space-5); background: var(--surface-page); border: 1px solid var(--c-line); border-radius: 8px; overflow: hidden; transition: border-color var(--dur-200) var(--ease-standard), transform var(--dur-200) var(--ease-out); }
.work__card > :not(.work__media) { margin-inline: var(--space-5); }
.work__media { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; margin-bottom: var(--space-2); border-bottom: 1px solid var(--c-line); background: var(--c-linen-soft); color: var(--c-petrol); overflow: hidden; }
.work__vignette { width: 72%; max-width: 280px; height: auto; aspect-ratio: 160 / 100; opacity: 0.8; transition: opacity var(--dur-200) var(--ease-standard), transform var(--dur-300) var(--ease-out); }
.work__brand { position: absolute; left: var(--space-3); bottom: var(--space-3); display: grid; place-items: center; height: 36px; padding: 0 var(--space-3); border-radius: 6px; background: var(--surface-page); box-shadow: var(--elev-1); }
.work__brand img { width: auto; height: auto; max-height: 20px; max-width: 96px; object-fit: contain; }
.work__brand img.is-tall { max-height: 28px; }
.work__brand img.is-wide { max-height: 12px; }
.work__brand--name { font-size: var(--text-meta); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-petrol); }
.work__when { position: absolute; right: var(--space-3); top: var(--space-3); padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--surface-page); font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--text-muted); }
.work__when--long { background: var(--c-petrol); color: var(--c-white); }
.work__meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); font-size: var(--text-secondary); color: var(--text-muted); }
.work__meta b { font-weight: var(--weight-semibold); color: var(--c-ink); }
.work__meta b:not(:last-child)::after { content: "·"; margin-left: var(--space-2); font-weight: var(--weight-regular); color: var(--text-muted); }
.work__title { font-size: var(--text-h4); letter-spacing: -0.01em; line-height: 1.25; }
.work__title a { text-decoration: none; }
.work__title a::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.work__title a:focus-visible { outline: none; }
.work__title a:focus-visible::after { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.work__text { color: var(--text-muted); }
.work__feat { list-style: none; display: grid; gap: var(--space-1); font-size: var(--text-secondary); }
.work__feat li { display: grid; grid-template-columns: 8px 1fr; gap: var(--space-3); align-items: baseline; }
.work__feat li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-champagne); transform: translateY(-1px); }
.work__tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); }
.work__tags li { padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--c-petrol-tint); color: var(--c-petrol); font-size: var(--text-meta); font-weight: var(--weight-semibold); }
.work__tags li:has(.icon) { display: inline-flex; align-items: center; gap: 6px; padding-left: var(--space-2); }
.work__tags .icon { width: 14px; height: 14px; }
/* Ce que nous avons construit : trois pictos lisibles d'un coup d'œil */
.work__built { list-style: none; display: grid; gap: var(--space-2); font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--c-ink); }
.work__built li { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-3); align-items: center; line-height: 1.3; }
.work__ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--c-petrol-tint); color: var(--c-petrol); }
.work__ico .icon { width: 18px; height: 18px; }
/* Dessins au trait : pétrole et champagne */
.work__media:not(.work__media--shot) { background: var(--c-petrol); color: var(--c-champagne); border-bottom-color: var(--c-petrol); }
.work__media:not(.work__media--shot) .work__vignette { opacity: 1; }
/* Pied de tuile : le secteur en couleur, le type de projet en neutre */
.work__sector--public { --tag: #2A4F8C; }
.work__sector--sante { --tag: #2F7350; }
.work__sector--entreprises { --tag: #1F6A73; }
.work__sector--federations { --tag: #6A4F96; }
.work__sector--culture { --tag: #9A3B5A; }
.work__tags li.work__sector { background: var(--tag); color: var(--c-white); }
.work__card:has(.work__sector--culture) { --sect: #9A3B5A; }
.work__card:has(.work__sector--entreprises) { --sect: #1F6A73; }
.work__card:has(.work__sector--sante) { --sect: #2F7350; }
.work__card:has(.work__sector--public) { --sect: #2A4F8C; }
.work__card:has(.work__sector--federations) { --sect: #6A4F96; }
.work__card .work__ico { background: color-mix(in srgb, var(--sect, var(--c-petrol)) 12%, #fff); color: var(--sect, var(--c-petrol)); }
.work__tags li:not(.work__sector) { background: transparent; box-shadow: inset 0 0 0 1px var(--c-line); color: var(--text-muted); }
.work__tech { font-size: var(--text-meta); color: var(--text-muted); }
@media (hover: hover) and (pointer: fine) {
  .work__card:hover { border-color: var(--c-petrol); transform: translateY(-2px); }
  .work__card:hover .work__vignette { transform: translateY(-3px); }
}
@media (min-width: 700px) { .works { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .works { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }

/* Aucun résultat : on explique, on propose d'élargir, on ouvre le contact */
.works-empty { display: grid; gap: var(--space-5); padding: var(--space-6) var(--space-5); border: 1.5px dashed var(--c-line-strong); border-radius: 8px; background: var(--surface-page); }
.works-empty:focus { outline: none; }
.works-empty__icon { width: 120px; height: 75px; color: var(--c-petrol); opacity: 0.5; }
.works-empty__body { display: grid; gap: var(--space-3); max-width: 62ch; }
.works-empty__title { font-size: var(--text-h4); letter-spacing: -0.01em; }
.works-empty__text { color: var(--text-muted); }
.works-empty__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-2); }
.works-empty__actions .btn { white-space: normal; text-align: left; }
@media (min-width: 768px) { .works-empty { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-7); padding: var(--space-7); } }

/* Ils nous font aussi confiance */
.c-trust__inner { display: grid; gap: var(--space-6); }
.c-trust__head { display: grid; gap: var(--space-3); }
.trust-logos { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.trust-logos li { display: grid; place-items: center; height: 88px; padding: var(--space-3); border-radius: 6px; background: var(--c-linen-soft); }
.trust-logos img { width: auto; height: auto; max-width: 100%; max-height: 32px; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1); opacity: 0.75; transition: filter var(--dur-200) var(--ease-standard), opacity var(--dur-200) var(--ease-standard); }
.trust-logos img.is-tall { max-height: 56px; }
.trust-logos li:hover img { filter: none; opacity: 1; }
.trust-logos li.is-name { font-size: var(--text-secondary); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; text-align: center; color: var(--text-muted); }
@media (min-width: 640px) { .trust-logos { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .c-trust__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: var(--space-9); align-items: center; } }

/* ---------- c-brief : la méthode en bref — le parcours complet en une frise ---------- */
.c-brief__head { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); }
.c-brief__def { font-size: var(--text-h4); line-height: 1.45; letter-spacing: -0.01em; max-width: 56ch; }
@media (min-width: 1024px) { .c-brief__head { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-9); align-items: end; margin-bottom: var(--space-8); } }

.journey { --jn: 48px; list-style: none; position: relative; display: grid; }
.journey a { position: relative; display: grid; grid-template-columns: var(--jn) minmax(0, 1fr); column-gap: var(--space-4); align-items: start; padding-block: var(--space-3); text-decoration: none; color: inherit; }
.journey__node { grid-row: span 3; position: relative; z-index: 1; width: var(--jn); height: var(--jn); border-radius: 50%; display: grid; place-items: center; background: var(--c-petrol); color: var(--c-white); transition: transform var(--dur-200) var(--ease-out); }
.journey__node .icon { width: 22px; height: 22px; }
.journey__item--before .journey__node, .journey__item--after .journey__node { background: var(--surface-page); border: 2px dashed var(--c-petrol); color: var(--c-petrol); }
.journey__item--before .journey__node::after, .journey__item--after .journey__node::after { content: ""; position: absolute; right: -2px; top: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-red); box-shadow: 0 0 0 2px var(--surface-page); }
.journey__item--after .journey__node::after { background: var(--c-champagne); }
/* Validation : petite coche champagne posée sur chaque étape */
.journey__item--step .journey__node::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--surface-page); background: var(--c-champagne) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3.2 6.2 1.8 1.8 3.8-4' fill='none' stroke='%231F3A5F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.journey__kicker { font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--text-muted); }
.journey__name { font-size: var(--text-lead); font-weight: var(--weight-semibold); letter-spacing: -0.01em; color: var(--c-petrol); line-height: 1.25; }
.journey__note { font-size: var(--text-secondary); color: var(--text-muted); line-height: 1.35; }
.journey a:hover .journey__name { text-decoration: underline; text-underline-offset: 0.2em; }
.journey a:hover .journey__node { transform: translateY(-2px); }
/* Ligne du parcours : verticale en mobile */
.journey::before { content: ""; position: absolute; left: calc(var(--jn) / 2 - 1px); top: calc(var(--space-3) + var(--jn) / 2); bottom: calc(var(--space-3) + var(--jn) / 2); border-left: 2px solid var(--c-line-strong); }

@media (min-width: 1024px) {
  .journey { --jn: 56px; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: var(--space-3); }
  .journey a { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; row-gap: var(--space-1); padding: 0; }
  .journey__node { grid-row: auto; margin-bottom: var(--space-3); }
  .journey__node .icon { width: 24px; height: 24px; }
  .journey::before { left: calc(100% / 14); right: calc(100% / 14); top: calc(var(--jn) / 2 - 1px); bottom: auto; border-left: 0; border-top: 2px solid var(--c-line-strong); }
  .journey__note { max-width: 16ch; }
}

/* À chaque validation : les trois choix du client, sous la frise */
.gate-choices { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--c-line); }
.gate-choices__lead { font-weight: var(--weight-semibold); color: var(--c-petrol); }
.gate-choices__list { list-style: none; display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.gate-choice { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--space-4); align-items: center; padding: var(--space-4); border: 1px solid var(--c-line); border-radius: 8px; background: var(--surface-page); }
.gate-choice p { display: grid; gap: 2px; }
.gate-choice b { font-weight: var(--weight-semibold); color: var(--c-petrol); }
.gate-choice p > span { font-size: var(--text-secondary); color: var(--text-muted); }
.gate-choice__icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--c-petrol); color: var(--c-petrol); }
.gate-choice__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gate-choice--go { border-color: var(--c-champagne); background: color-mix(in srgb, var(--c-champagne) 14%, var(--surface-page)); }
.gate-choice--go .gate-choice__icon { background: var(--c-petrol); border-color: var(--c-petrol); color: var(--c-white); }
@media (min-width: 1024px) {
  .gate-choices { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-6); align-items: center; margin-top: var(--space-8); }
  .gate-choices__list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
}
.journey .journey__node { margin-top: 0; }

/* ==========================================================================
   Gabarit agence (page-agence.php) — 2026-10-12
   Blocs : c-page-hero--agency (+ photo), c-facts, c-history (frise), c-team--agency
   (+ offices), c-values, c-commit, c-jobs
   ========================================================================== */
.agency-photo { position: relative; max-width: 440px; }
.agency-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; }
.agency-photo figcaption { margin-top: var(--space-3); font-size: var(--text-secondary); color: var(--c-on-dark-muted); }
@media (min-width: 1024px) { .c-page-hero--agency .c-page-hero__grid { align-items: center; } .agency-photo { justify-self: end; width: 100%; } .agency-photo img { aspect-ratio: 1 / 1; } }

/* Chiffres clés : bande sous le hero */
.c-facts { padding-block: var(--space-7) 0; }
.team-facts--band { margin: 0; padding: 0 0 var(--space-7); border-top: 0; border-bottom: var(--border-hairline); }
@media (min-width: 900px) { .team-facts--band { grid-template-columns: repeat(3, 1fr); } }

/* Histoire : frise verticale sur mobile, horizontale dès 1100 px ; le point rouge marque aujourd'hui */
.history { list-style: none; position: relative; display: grid; gap: var(--space-6); padding-left: var(--space-6); }
.history::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--c-line); }
.history__item { position: relative; display: grid; gap: var(--space-2); align-content: start; }
.history__item::before { content: ""; position: absolute; left: calc(var(--space-6) * -1); top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface-page); border: 2px solid var(--c-petrol); box-sizing: border-box; }
.history__item--start::before { background: var(--c-petrol); }
.history__item--now::before { background: var(--c-red); border-color: var(--c-red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-red) 18%, transparent); }
.history__year { font-size: var(--text-secondary); font-weight: var(--weight-semibold); letter-spacing: 0.02em; color: var(--c-petrol); font-variant-numeric: tabular-nums; }
.history__title { font-size: var(--text-h4); letter-spacing: -0.01em; line-height: 1.25; }
.history__text { color: var(--text-muted); max-width: 46ch; }
.history .link-action { justify-self: start; }
@media (min-width: 1100px) {
  .history { grid-template-columns: repeat(6, 1fr); gap: var(--space-5); padding: var(--space-7) 0 0; }
  .history::before { left: 0; right: 0; top: 6px; bottom: auto; width: auto; height: 2px; }
  .history__item::before { left: 0; top: calc(var(--space-7) * -1); }
  .history__text { font-size: var(--text-secondary); }
}

/* Deux bureaux reliés : panneau bleu nuit, un seul numéro */
.offices { position: relative; display: grid; gap: var(--space-6); margin-top: var(--space-8); padding: var(--space-7) var(--space-5); border-radius: 8px; background-color: var(--surface-dark); color: var(--c-white); overflow: hidden; }
.offices__head { display: grid; gap: var(--space-3); }
.offices__title { color: var(--c-white); font-size: var(--text-h2); letter-spacing: var(--tracking-heading); line-height: 1.1; }
.offices__note { color: var(--c-on-dark-muted); max-width: 56ch; }
.offices__list { list-style: none; display: grid; gap: var(--space-4); }
.office { display: grid; gap: var(--space-1); align-content: start; padding: var(--space-5); border: 1px solid var(--c-on-dark-line); border-radius: 8px; background: rgba(255, 255, 255, 0.04); }
.office__kicker { font-size: var(--text-secondary); color: var(--c-on-dark-muted); }
.office__city { font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: 1; color: var(--c-white); }
.office address { font-style: normal; color: var(--c-on-dark-muted); margin-top: var(--space-2); }
.office__link { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.office__line { display: none; }
.office__badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border: 1px solid var(--c-on-dark-line); border-radius: 999px; font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--c-white); background: var(--surface-dark); white-space: nowrap; }
.office__badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-red); box-shadow: 0 0 0 2px var(--c-white); }
.offices__shared { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--c-on-dark-line); }
.offices__same { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-weight: var(--weight-medium); }
.offices__same li { display: inline-flex; align-items: center; gap: var(--space-2); }
.offices__same li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-champagne); }
.offices__contact { color: var(--c-on-dark-muted); }
.offices__contact a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--c-white); font-weight: var(--weight-semibold); white-space: nowrap; }
@media (min-width: 768px) {
  .offices { padding: var(--space-8) var(--space-7); }
  .offices__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--space-7); }
  .offices__list { grid-template-columns: 1fr 140px 1fr; gap: 0; align-items: center; }
  .office { padding: var(--space-5) var(--space-6); }
  .office__link { position: relative; }
  .office__line { display: block; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dotted var(--c-champagne); }
  .office__line::before, .office__line::after { content: ""; position: absolute; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--c-champagne); }
  .office__line::before { left: -5px; } .office__line::after { right: -5px; }
  .office__badge { position: relative; }
}

/* Valeurs : cartes numérotées, picto, preuve vérifiable en pied */
.values { list-style: none; display: grid; gap: var(--space-4); }
.value { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-3); padding: var(--space-6) var(--space-5); border: 1px solid var(--c-line); border-radius: 8px; background: var(--surface-page); transition: border-color var(--dur-200) var(--ease-standard), transform var(--dur-200) var(--ease-standard); }
/* Numéro discret dans le coin, comme les cartes .issue */
.value__num { position: absolute; top: var(--space-5); right: var(--space-5); font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.value__icon { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--c-petrol); color: var(--c-white); }
.value__icon .icon { width: 24px; height: 24px; }
.value__title { position: relative; font-size: var(--text-h3); letter-spacing: var(--tracking-heading); margin-top: var(--space-2); }
.value__text { color: var(--text-muted); }
.value__proof { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-4); border-top: var(--border-hairline); font-size: var(--text-secondary); font-weight: var(--weight-medium); color: var(--c-petrol); }
.value__proof::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.55em; border-radius: 50%; background: var(--c-champagne); }
@media (hover: hover) {
  .value:hover { border-color: var(--c-petrol); transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) { .value { transition: none; } .value:hover { transform: none; } }
@media (min-width: 700px) { .values { grid-template-columns: 1fr 1fr; gap: var(--space-5); } .value { padding: var(--space-7) var(--space-6); } }
@media (min-width: 1100px) { .values { grid-template-columns: repeat(4, 1fr); } .value { padding: var(--space-6) var(--space-5); } }

/* Engagements */
.commits { list-style: none; display: grid; gap: var(--space-4); }
.commit { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6) var(--space-5); background: var(--surface-page); border-radius: 8px; }
.commit__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--c-petrol); color: var(--c-white); margin-bottom: var(--space-2); }
.commit__icon .icon { width: 24px; height: 24px; }
.commit__kicker { font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--text-muted); }
.commit__title { font-size: var(--text-h3); letter-spacing: var(--tracking-heading); }
.commit__text { color: var(--text-muted); font-size: var(--text-lead); max-width: 52ch; }
@media (min-width: 768px) { .commits { grid-template-columns: 1fr 1fr; gap: var(--space-5); } .commit { padding: var(--space-7); } }

/* Recrutement : bande discrète */
.c-jobs { padding-block: var(--space-7); border-top: var(--border-hairline); }
.c-jobs__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); }
.c-jobs__title { font-size: var(--text-h4); letter-spacing: -0.01em; margin-bottom: var(--space-1); }
.c-jobs p { color: var(--text-muted); }

/* ==========================================================================
   Gabarit contact (page-contact.php) — 2026-10-12
   Blocs : c-page-hero--contact (+ routes), c-contact (formulaire + coordonnées).
   Formulaire : assets/js/contact.js
   ========================================================================== */
.c-page-hero--contact .c-page-hero__inner { padding-bottom: var(--space-7); }
@media (min-width: 1024px) { .c-page-hero--contact .c-page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.routes { display: grid; gap: var(--space-4); }
.routes__title { font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--c-on-dark-muted); }
.routes__list { list-style: none; border: 1px solid var(--c-on-dark-line); border-radius: 8px; overflow: hidden; }
.routes__list li + li { border-top: 1px solid var(--c-on-dark-line); }
.route { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); text-decoration: none; color: var(--c-on-dark-muted); font-size: var(--text-secondary); transition: background-color var(--dur-200) var(--ease-standard); }
.route__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--c-on-dark-line); color: var(--c-champagne); transition: border-color var(--dur-200) var(--ease-standard), background-color var(--dur-200) var(--ease-standard), color var(--dur-200) var(--ease-standard); }
.route b { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: 2px; font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--c-white); }
.route__tag { padding: 1px var(--space-2); border-radius: var(--radius-pill); background: var(--c-champagne); color: var(--c-ink); font-size: var(--text-meta); font-weight: var(--weight-semibold); line-height: 1.5; }
.route__arrow { color: var(--c-on-dark-muted); transition: transform var(--dur-200) var(--ease-standard), color var(--dur-200) var(--ease-standard); }
.route--featured { background: rgba(255, 255, 255, 0.05); }
.route--featured::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--c-champagne); }
.route--featured .route__icon { background: var(--c-champagne); border-color: var(--c-champagne); color: var(--c-ink); }
.route:hover { background: rgba(255, 255, 255, 0.08); }
.route:hover .route__icon { border-color: var(--c-champagne); }
.route:hover .route__arrow { transform: translateX(4px); color: var(--c-white); }
.route:focus-visible { outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .route:hover .route__arrow { transform: none; } }

.c-contact { background: var(--surface-alt); }
.c-contact__grid { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 1024px) { .c-contact__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-8); } }
.contact-card { padding: var(--space-6) var(--space-5); background: var(--surface-page); border-radius: 8px; }
@media (min-width: 768px) { .contact-card { padding: var(--space-7); } }
.contact-card__title, .contact-info__title { font-size: var(--text-h3); letter-spacing: var(--tracking-heading); }
.contact-card__intro { margin: var(--space-2) 0 var(--space-6); color: var(--text-muted); }
.contact-form .field-row + .field-row, .contact-form .field--choice + .field-row { margin-top: var(--space-5); }
.field--choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.field--choice .field__label { padding: 0; margin-bottom: var(--space-2); }
.pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill label { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-4); border: 1.5px solid var(--c-line-strong); border-radius: var(--radius-pill); font-size: var(--text-secondary); font-weight: var(--weight-medium); cursor: pointer; transition: background-color var(--dur-150) var(--ease-standard), border-color var(--dur-150) var(--ease-standard); }
.pill label:hover { border-color: var(--c-petrol); }
.pill input:checked + label { background: var(--c-petrol); border-color: var(--c-petrol); color: var(--c-white); }
.pill input:focus-visible + label { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.contact-form textarea.field__input { min-height: 160px; resize: vertical; }
.contact-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-6); }
.contact-form__delay { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-secondary); color: var(--text-muted); }
.contact-form__delay .icon { color: var(--c-petrol); }
.form-summary { margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); border-left: 3px solid var(--c-error); background: color-mix(in srgb, var(--c-error) 6%, #fff); color: var(--c-error); }
.form-summary ul { margin-top: var(--space-2); padding-left: var(--space-5); }
.form-summary a { color: var(--c-error); font-weight: var(--weight-medium); }
.contact-done { display: grid; gap: var(--space-3); justify-items: start; }
.contact-done__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--c-success); color: var(--c-white); }
.contact-done__title { font-size: var(--text-h3); letter-spacing: var(--tracking-heading); }
.contact-done__title:focus { outline: none; }
.contact-done a { color: var(--c-petrol); font-weight: var(--weight-medium); }

.contact-info { display: grid; gap: var(--space-5); }
.contact-info__label { font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--text-muted); }
.contact-info__big { display: inline-flex; align-items: center; min-height: var(--target-min); font-size: var(--text-h4); font-weight: var(--weight-semibold); letter-spacing: -0.01em; color: var(--c-petrol); }
.contact-offices { list-style: none; display: grid; gap: var(--space-4); }
.contact-office { display: grid; gap: var(--space-1); padding: var(--space-5); background: var(--surface-page); border-radius: 8px; border-top: 3px solid var(--c-petrol); }
.contact-office__city { font-size: var(--text-h4); font-weight: var(--weight-semibold); color: var(--c-petrol); }
.contact-office address { font-style: normal; color: var(--text-muted); }
.contact-office__tel { display: inline-flex; align-items: center; min-height: var(--target-min); font-weight: var(--weight-medium); color: var(--c-petrol); }
@media (min-width: 640px) and (max-width: 1023px) { .contact-offices { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Gabarit étude de cas (single-realisation.php) — rempli avec la FICT, 2026-10-12
   Blocs : c-case-hero (+ case-sheet, case-shots), c-story, c-built (+ links),
   c-results, c-case-method, c-case-tech, c-next (+ next-case, works--3)
   ========================================================================== */
.c-case-hero { padding-bottom: 0; }
.c-case-hero__title { max-width: 20ch; }
.case-tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.case-tags a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--c-on-dark-line); border-radius: var(--radius-pill); font-size: var(--text-secondary); font-weight: var(--weight-medium); text-decoration: none; color: var(--c-white); }
.case-tags a:hover { border-color: rgba(255, 255, 255, 0.6); }
.case-tags .icon { width: 16px; height: 16px; color: var(--c-champagne); }
.case-sheet { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--c-on-dark-line); }
.case-sheet > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--c-on-dark-line); }
.case-sheet dt { font-size: var(--text-secondary); color: var(--c-on-dark-muted); }
.case-sheet dd { margin: 0; font-weight: var(--weight-medium); }
.case-sheet a { color: var(--c-white); }
.case-shots { position: relative; z-index: 1; display: grid; justify-items: center; margin-top: var(--space-7); padding-inline: var(--gutter); }
.case-shots__desktop { width: min(1000px, 100%); }
.case-shots__desktop img { border-radius: 8px 8px 0 0; box-shadow: 0 -12px 60px rgba(0, 0, 0, 0.3); }
.case-shots__mobile { position: absolute; right: max(var(--gutter), calc(50% - 560px)); bottom: -48px; width: clamp(90px, 17%, 200px); }
.case-shots__mobile img { filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.3)); }

/* Contexte, enjeu, réponse : trois colonnes numérotées */
.c-story { padding-top: calc(var(--section-gap) + 32px); }
.story { list-style: none; display: grid; gap: var(--space-7); }
.story__item { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-4); border-top: var(--border-rule); color: var(--text-muted); font-size: var(--text-lead); }
.story__num { font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.story__title { font-size: var(--text-h3); letter-spacing: var(--tracking-heading); }
.story__quote { margin-top: var(--space-2); padding-left: var(--space-4); border-left: 2px solid var(--c-champagne); color: var(--c-petrol); font-weight: var(--weight-medium); }
@media (min-width: 900px) { .story { grid-template-columns: repeat(3, 1fr); gap: var(--space-7); } }

/* Ce que nous avons construit + schéma des liaisons */
.c-built__grid { display: grid; gap: var(--space-7); }
.built { list-style: none; display: grid; gap: var(--space-4); }
.built__item { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); background: var(--surface-page); border-radius: 8px; }
.built__item .icon { color: var(--c-petrol); margin-bottom: var(--space-2); }
.built__item h3 { font-size: var(--text-h4); letter-spacing: -0.01em; }
.built__item p { color: var(--text-muted); }
@media (min-width: 640px) { .built { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .c-built__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; } }
.links { display: grid; gap: var(--space-4); padding: var(--space-6) var(--space-5); background: var(--surface-dark); color: var(--c-white); border-radius: 8px; }
.links__cap { font-size: var(--text-h4); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.links__map { display: grid; justify-items: center; }
.links__node { display: grid; gap: 2px; width: 100%; max-width: 340px; padding: var(--space-4) var(--space-5); border-radius: 8px; border: 1px solid var(--c-on-dark-line); text-align: center; }
.links__node b { font-weight: var(--weight-semibold); }
.links__node span { font-size: var(--text-secondary); color: var(--c-on-dark-muted); }
.links__node--core { background: var(--c-white); color: var(--c-ink); border-color: var(--c-white); box-shadow: 0 0 0 4px rgba(196, 164, 110, 0.35); }
.links__node--core b { color: var(--c-petrol); }
.links__node--core span { color: var(--text-muted); }
.links__wire { position: relative; display: grid; place-items: center; min-height: 72px; padding: var(--space-3) 0; }
.links__wire::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px dotted var(--c-champagne); }
.links__wire span { position: relative; max-width: 30ch; padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--surface-dark); border: 1px solid rgba(196, 164, 110, 0.6); font-size: var(--text-meta); font-weight: var(--weight-medium); text-align: center; color: var(--c-champagne); }
.links__note { padding-top: var(--space-3); border-top: 1px solid var(--c-on-dark-line); font-size: var(--text-secondary); color: var(--c-on-dark-muted); }
@media (min-width: 1024px) { .links { padding: var(--space-7); } }

/* Résultats */
.team-facts dd .todo { font-size: var(--text-body); letter-spacing: 0; }

/* Étapes mobilisées : cinq colonnes, validation client en pied */
.case-steps { list-style: none; display: grid; gap: var(--space-3); counter-reset: none; }
.case-steps li { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); background: var(--surface-page); border-radius: 8px; color: var(--text-muted); font-size: var(--text-secondary); }
.case-steps__num { font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--text-muted); }
.case-steps b { font-size: var(--text-h4); letter-spacing: -0.01em; color: var(--c-petrol); }
.case-steps em { display: flex; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--c-line); font-style: normal; font-weight: var(--weight-semibold); color: var(--c-ink); }
.case-steps em::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--c-petrol) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3.2 6.2 1.8 1.8 3.8-4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.case-steps li:last-child em::before { background-color: var(--c-red-deep); }
.case-steps__note { margin-top: var(--space-4); }
@media (min-width: 700px) { .case-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .case-steps { grid-template-columns: repeat(5, 1fr); } }

/* Technologies */
.c-case-tech__inner { display: grid; gap: var(--space-4); }
.c-case-tech__title { font-size: var(--text-h3); letter-spacing: var(--tracking-heading); }
@media (min-width: 1024px) { .c-case-tech__inner { grid-template-columns: 12rem 1fr; align-items: center; gap: var(--space-8); } }

/* Projet suivant + projets proches */
.next-case { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-5); align-items: center; padding: var(--space-6) 0; border-top: var(--border-rule); border-bottom: 1px solid var(--c-line-strong); text-decoration: none; }
.next-case__label { grid-column: 1; font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--text-muted); }
.next-case__title { grid-column: 1; font-size: var(--text-h2); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: 1.15; color: var(--c-petrol); }
.next-case__arrow { grid-column: 2; grid-row: 1 / span 2; width: 56px; height: 56px; border-radius: 50%; background: var(--c-petrol); -webkit-mask: none; transition: transform var(--dur-300) var(--ease-out); position: relative; }
.next-case__arrow::after { content: ""; position: absolute; inset: 0; background: var(--c-white); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
.next-case:hover .next-case__title { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
@media (hover: hover) and (pointer: fine) { .next-case:hover .next-case__arrow { transform: translateX(4px); } }
.c-next__subtitle { margin: var(--space-8) 0 var(--space-5); font-size: var(--text-h3); letter-spacing: var(--tracking-heading); }
.c-next .works + .link-action { margin-top: var(--space-5); }
@media (min-width: 1100px) { .works--3 { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   Gabarit secteur (taxonomy-secteur.php) — rempli avec « Secteur public », 2026-10-12
   Blocs : c-page-hero--sector (+ proof), c-issues (registre enjeu → réponse),
   c-sector-offers (builds), c-sector-works (works--2 + logos)
   ========================================================================== */
.proof { display: grid; gap: var(--space-5); padding: var(--space-5); border: 1px solid var(--c-on-dark-line); border-radius: 8px; background: rgba(255, 255, 255, 0.04); }
.proof__cap { font-size: var(--text-h4); font-weight: var(--weight-semibold); letter-spacing: -0.01em; line-height: 1.3; color: var(--c-white); }
.proof__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.proof__logo { display: grid; place-items: center; width: 84px; height: 104px; padding: var(--space-3); border-radius: 8px; background: var(--c-white); box-shadow: 0 0 0 4px rgba(196, 164, 110, 0.35); }
.proof__logo img { max-height: 80px; width: auto; }
.proof__big { display: grid; font-size: var(--text-h2); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: 1.05; color: var(--c-champagne); font-variant-numeric: tabular-nums; }
.proof__pre { font-size: var(--text-secondary); font-weight: var(--weight-medium); letter-spacing: 0; line-height: 1.4; color: var(--c-on-dark-muted); }
.proof__post { margin-top: var(--space-2); font-size: var(--text-secondary); font-weight: var(--weight-medium); letter-spacing: 0; line-height: 1.4; color: var(--c-white); }
.proof__sites { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.proof__sites li { padding: 2px var(--space-3); border: 1px solid rgba(196, 164, 110, 0.6); border-radius: var(--radius-pill); font-size: var(--text-meta); font-weight: var(--weight-medium); color: var(--c-champagne); }
.proof__note { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--c-on-dark-line); font-size: var(--text-secondary); color: var(--c-on-dark-muted); }
.proof__note .link-action { justify-self: start; }
@media (min-width: 1024px) { .c-page-hero--sector .c-page-hero__grid { align-items: center; } .proof { padding: var(--space-6); } .proof__logo { width: 100px; height: 124px; } .proof__logo img { max-height: 96px; } }

/* Enjeux → réponses : registre à filets, besoin à gauche, réponse à droite */
.issues { list-style: none; border-top: var(--border-rule); }
.issue { display: grid; gap: var(--space-2) var(--space-6); padding-block: var(--space-6); border-bottom: 1px solid var(--c-line-strong); }
.issue__num { font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.issue__need { font-size: var(--text-h3); letter-spacing: var(--tracking-heading); }
.issue__answer { display: grid; gap: var(--space-2); color: var(--text-muted); font-size: var(--text-lead); max-width: 60ch; }
.issue__link a { display: inline-flex; align-items: center; min-height: var(--target-min); font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--c-petrol); }
@media (min-width: 900px) { .issue { grid-template-columns: 3rem minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; } .issue__num { padding-top: 0.5em; } }

/* Réalisations du secteur */
@media (min-width: 700px) { .works--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .works--2 { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
.sector-trust { display: grid; gap: var(--space-3); margin-top: var(--space-7); }
.sector-trust__label { font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--text-muted); }
@media (min-width: 640px) { .trust-logos--3 { grid-template-columns: repeat(3, 1fr); max-width: 720px; } }
@media (min-width: 1100px) { .c-sector-offers .builds { grid-template-columns: repeat(4, 1fr); } .c-sector-offers .build { padding: var(--space-5); } }
.sector-quote-todo { margin-top: var(--space-5); }
/* Déclinaisons (santé, entreprises, fédérations, culture) : client sans logo, preuve en mots, citation */
.proof__name { font-size: var(--text-secondary); font-weight: var(--weight-semibold); line-height: 1.2; text-align: center; color: var(--c-petrol); overflow-wrap: anywhere; }
.proof__big--word { font-size: var(--text-h3); letter-spacing: var(--tracking-heading); }
.sector-quote { max-width: 760px; margin-top: var(--space-7); padding-left: var(--space-5); border-left: 3px solid var(--c-champagne); }
.sector-quote blockquote { color: var(--c-petrol); }

/* ==========================================================================
   Gabarit offre partenaires (Coccinet Partners, marque blanche) — 2026-10-12
   Blocs : c-page-hero--partners (+ whosees), c-partner-services (builds + tech),
   c-partner-process (case-steps), c-partner-commit (issues)
   ========================================================================== */
.whosees { display: grid; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--c-on-dark-line); border-radius: 8px; background: rgba(255, 255, 255, 0.04); }
.whosees__cap { font-size: var(--text-h4); font-weight: var(--weight-semibold); letter-spacing: -0.01em; color: var(--c-white); }
.whosees__chain { list-style: none; display: grid; justify-items: center; }
.whosees__node { display: grid; gap: 2px; width: 100%; max-width: 360px; padding: var(--space-4) var(--space-5); border-radius: 8px; border: 1px solid var(--c-on-dark-line); text-align: center; }
.whosees__node b { color: var(--c-white); font-weight: var(--weight-semibold); }
.whosees__node span { font-size: var(--text-secondary); color: var(--c-on-dark-muted); }
.whosees__node--agency { background: var(--c-white); border-color: var(--c-white); box-shadow: 0 0 0 4px rgba(196, 164, 110, 0.35); }
.whosees__node--agency b { color: var(--c-petrol); }
.whosees__node--agency span { color: var(--text-muted); }
.whosees__node--us { border-style: dashed; opacity: 0.85; }
.whosees__wire { position: relative; display: grid; place-items: center; min-height: 64px; padding: var(--space-3) 0; }
.whosees__wire::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; }
.whosees__wire--solid::before { border-left: 2px solid var(--c-champagne); }
.whosees__wire--dotted::before { border-left: 2px dotted var(--c-on-dark-muted); }
.whosees__wire span { position: relative; max-width: 30ch; padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--surface-dark); border: 1px solid var(--c-on-dark-line); font-size: var(--text-meta); font-weight: var(--weight-medium); text-align: center; color: var(--c-on-dark-muted); }
.whosees__wire--solid span { border-color: rgba(196, 164, 110, 0.6); color: var(--c-champagne); }
@media (min-width: 1024px) { .c-page-hero--partners .c-page-hero__grid { align-items: center; } .whosees { padding: var(--space-6); } }

/* backstage (Partners) : côté client (client ↔ agence) / rideau / Coccinet en coulisses */
.backstage { --cc-bg: var(--c-white); --cc-fg: var(--c-petrol); display: grid; gap: var(--space-5); padding: var(--space-5); border: 1px solid var(--c-on-dark-line); border-radius: 8px; background: rgba(255, 255, 255, 0.04); }
.backstage__cap { font-size: var(--text-h4); font-weight: var(--weight-semibold); letter-spacing: -0.01em; line-height: 1.3; color: var(--c-white); }
.backstage__stage { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); row-gap: var(--space-4); }
.backstage__zone, .backstage__curtain { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-meta); font-weight: var(--weight-medium); color: var(--c-on-dark-muted); }
.backstage__zone::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c-champagne); }
.backstage__node { display: grid; align-content: start; gap: 2px; padding: var(--space-4); border: 1px solid var(--c-on-dark-line); border-radius: 6px; }
.backstage__node .icon { width: 24px; height: 24px; margin-bottom: var(--space-2); color: var(--c-champagne); }
.backstage__node b { font-weight: var(--weight-semibold); line-height: 1.25; color: var(--c-white); }
.backstage__node span { font-size: var(--text-meta); line-height: 1.4; color: var(--c-on-dark-muted); }
.backstage__node--agency { background: var(--c-white); border-color: var(--c-white); box-shadow: 0 0 0 4px rgba(196, 164, 110, 0.35); }
.backstage__node--agency .icon, .backstage__node--agency b { color: var(--c-petrol); }
.backstage__node--agency span { color: var(--text-muted); }
/* lien plein client ↔ agence, pastilles aux deux bouts */
.backstage__link { align-self: center; height: 2px; background: var(--c-champagne); position: relative; }
.backstage__link::before, .backstage__link::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-champagne); }
.backstage__link::before { left: -4px; }
.backstage__link::after { right: -4px; }
/* rideau : filet pointillé sur toute la largeur, traversé par le fil agence → Coccinet */
.backstage__curtain { grid-row: 3; padding-block: var(--space-2); color: var(--c-champagne); }
.backstage__curtain::after { content: ""; flex: 1; border-top: 1px dashed rgba(196, 164, 110, 0.55); }
.backstage__wire { grid-column: 3; grid-row: 3; justify-self: center; width: 0; margin-block: calc(-1 * var(--space-4)); border-left: 2px dotted var(--c-on-dark-muted); }
.backstage__node--us { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-4); border-style: dashed; background: rgba(0, 0, 0, 0.12); }
.backstage__node--us > span { display: grid; gap: 2px; }
.backstage__mark { flex: none; width: 36px; height: 36px; }
@media (min-width: 1024px) { .backstage { padding: var(--space-6); } .backstage__stage { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); } .backstage__node span { font-size: var(--text-secondary); } }

.partner-tech { display: grid; gap: var(--space-3); margin-top: var(--space-7); }
.partner-tech__label { font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--text-muted); }
.case-steps li:last-child em::before { background-color: var(--c-red-deep); }

/* ==========================================================================
   Pages utilitaires — mentions légales et 404 (2026-10-12)
   Blocs : c-page-hero--plain, c-legal (sommaire collant + texte), c-404 (+ moved), c-404-more
   ========================================================================== */
.c-page-hero--plain .c-page-hero__inner { padding-bottom: var(--space-8); }
.c-legal__grid { display: grid; gap: var(--space-7); }
.legal-toc { display: grid; gap: var(--space-3); align-content: start; }
.legal-toc__label { font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--text-muted); }
.legal-toc ol { list-style: none; display: grid; border-top: var(--border-rule); }
.legal-toc a { display: flex; align-items: center; min-height: var(--target-min); border-bottom: 1px solid var(--c-line); font-weight: var(--weight-medium); text-decoration: none; color: var(--c-petrol); }
.legal-toc a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
@media (min-width: 1024px) { .c-legal__grid { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--space-9); } .legal-toc { position: sticky; top: 104px; } }
.legal { display: grid; gap: var(--space-8); max-width: 72ch; }
.legal__block { display: grid; gap: var(--space-4); color: var(--text-muted); font-size: var(--text-lead); }
.legal__block h2 { font-size: var(--text-h3); letter-spacing: var(--tracking-heading); color: var(--c-petrol); }
.legal__block a { color: var(--c-petrol); font-weight: var(--weight-medium); }
.legal__facts { margin: 0; border-top: 1px solid var(--c-line-strong); font-size: var(--text-body); }
.legal__facts > div { display: grid; gap: var(--space-1); padding-block: var(--space-3); border-bottom: 1px solid var(--c-line); }
.legal__facts dt { font-size: var(--text-secondary); color: var(--text-muted); }
.legal__facts dd { margin: 0; color: var(--text); font-weight: var(--weight-medium); }
@media (min-width: 640px) { .legal__facts > div { grid-template-columns: 13rem 1fr; gap: var(--space-5); } }
.legal__block h3 { margin-top: var(--space-3); font-size: var(--text-h4); letter-spacing: -0.01em; color: var(--c-petrol); }
.legal__block ul { list-style: none; display: grid; gap: var(--space-2); }
.legal__block ul li { position: relative; padding-left: var(--space-5); }
.legal__block ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-champagne); }
.legal__date { font-size: var(--text-secondary); color: var(--text-muted); }

/* 404 : un grand « 404 » avec le point rouge du logo, et les anciennes rubriques */
.c-404__inner { padding-block: var(--space-8); gap: var(--space-8); }
@media (min-width: 1024px) { .c-404__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; padding-block: var(--space-9); } }
.c-404__code { position: relative; display: inline-block; margin-bottom: var(--space-4); font-size: clamp(5rem, 3rem + 9vw, 10rem); font-weight: var(--weight-semibold); letter-spacing: -0.06em; line-height: 0.9; color: rgba(255, 255, 255, 0.14); }
.c-404__code i { position: absolute; right: -0.18em; top: 0.08em; width: 0.16em; height: 0.16em; border-radius: 50%; background: var(--c-red); box-shadow: 0 0 0 3px var(--c-white); }
.moved { display: grid; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--c-on-dark-line); border-radius: 8px; background: rgba(255, 255, 255, 0.04); }
.moved__title { font-size: var(--text-h4); font-weight: var(--weight-semibold); color: var(--c-white); }
.moved ul { list-style: none; display: grid; }
.moved a { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-3); min-height: var(--target-min); padding-block: var(--space-2); border-bottom: 1px solid var(--c-on-dark-line); font-size: var(--text-secondary); text-decoration: none; }
.moved a::after { content: ""; grid-column: 2; grid-row: 1; width: 16px; height: 16px; background: var(--c-champagne); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.moved__old { grid-column: 1; color: var(--c-on-dark-muted); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.35); }
.moved__new { grid-column: 3; font-weight: var(--weight-semibold); color: var(--c-white); }
.moved a:hover .moved__new { text-decoration: underline; text-underline-offset: 0.3em; }
@media (min-width: 1024px) { .moved { padding: var(--space-6); } }
.c-404-more .c-section__title { margin-bottom: var(--space-6); }
.build__title a { text-decoration: none; }
.build__title a::after { content: ""; position: absolute; inset: 0; }
.c-404-more .build { position: relative; }
.c-404-more .build__title a:hover { text-decoration: underline; text-underline-offset: 0.3em; }

/* ==========================================================================
   Lignes d'offre : monogramme « coin coccinelle » à la place du mot « Coccinet »
   (symbole #i-cc ; le nom complet reste lu par les lecteurs d'écran)
   ========================================================================== */
:root { --cc-bg: var(--c-petrol); --cc-fg: var(--c-white); }
.cc { display: inline-flex; align-items: baseline; gap: 0.38em; white-space: nowrap; }
.cc__mark { flex: none; align-self: center; width: 1.15em; height: 1.15em; }
.site-footer, .c-hero, .c-page-hero, .c-poc, .method__panel, .config-panel, .c-statement-band,
.uc-feature__media, .circuit, .links, .sector-card--cta { --cc-bg: var(--c-white); --cc-fg: var(--c-petrol); }
html[data-hero="light"] .c-hero { --cc-bg: var(--c-petrol); --cc-fg: var(--c-white); }
.link-action .cc { margin-inline-start: 0.3em; }

/* ==========================================================================
   Application métier — compléments (2026-10-12)
   c-compare : sur mesure ou logiciel du marché, trois colonnes « Idéal quand / Limites »,
   placé après la FAQ, juste avant le configurateur
   ========================================================================== */
.compare { list-style: none; display: grid; gap: var(--space-4); }
.compare__col { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); background: var(--surface-page); border-radius: 8px; border-top: 3px solid var(--c-line-strong); color: var(--text-muted); }
.compare__title { margin-bottom: var(--space-2); font-size: var(--text-h4); letter-spacing: -0.01em; line-height: 1.25; color: var(--c-petrol); }
.compare__label { margin-top: var(--space-2); font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--text-muted); }
.compare__label + p { color: var(--text); }
.compare__col--ours { border: 1px solid var(--c-petrol); border-top: 3px solid var(--c-champagne); }
.compare__col--ours { position: relative; }
.compare__flag { position: absolute; top: -13px; left: var(--space-5); padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--c-petrol); color: var(--c-white); font-size: var(--text-meta); font-weight: var(--weight-semibold); }
.compare__note { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); margin-top: var(--space-6); font-size: var(--text-lead); color: var(--c-petrol); }
@media (min-width: 900px) { .compare { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } .compare__col { padding: var(--space-6); } .compare__flag { left: var(--space-6); } }
/* Sur fond clair (placé juste avant le test gratuit), les cartes passent sur fond lin */
.c-compare:not(.c-section--alt) .compare__col { background: var(--surface-alt); }

/* ==========================================================================
   Gabarit lignes d'offre et « Toutes les offres » — 2026-10-12
   Pages : offres, coccinet-web-apps, e-commerce, site-vitrine, coccinet-cloud,
   coccinet-security, coccinet-data-ai
   Schémas de hero : cycle (offres), scale (Web & Apps), stack (vitrine, Cloud),
   tiers (Security) ; whosees réutilisé (e-commerce, Data & IA)
   Blocs : line-rows, needs, offer-cards, pricing, cloud-arch, c-related
   ========================================================================== */

/* Cadre commun des schémas de hero (même langage que .whosees) */
.cycle, .scale, .stack, .tiers { display: grid; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--c-on-dark-line); border-radius: 8px; background: rgba(255, 255, 255, 0.04); }
.cycle__cap, .scale__cap, .stack__cap, .tiers__cap { font-size: var(--text-h4); font-weight: var(--weight-semibold); letter-spacing: -0.01em; line-height: 1.3; color: var(--c-white); }
@media (min-width: 1024px) { .cycle, .scale, .stack, .tiers { padding: var(--space-6); } }
.stack__note { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-meta); color: var(--c-on-dark-muted); }
.stack__note span { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c-champagne); }

/* cycle : quatre temps reliés par un filet champagne */
.cycle__list { list-style: none; position: relative; display: grid; gap: var(--space-3); }
.cycle__list::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; border-left: 2px solid var(--c-champagne); opacity: 0.6; }
.cycle__list li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); }
.cycle__num { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--c-champagne); background: color-mix(in srgb, var(--c-petrol) 85%, #000); font-weight: var(--weight-semibold); color: var(--c-champagne); }
.cycle__list b { font-size: var(--text-lead); font-weight: var(--weight-semibold); letter-spacing: -0.01em; color: var(--c-white); }
.cycle__list a { display: inline-flex; align-items: center; min-height: var(--target-min); padding-inline: var(--space-3); border-radius: 6px; background: var(--c-white); color: var(--c-petrol); font-size: var(--text-secondary); font-weight: var(--weight-semibold); text-decoration: none; }
.cycle__list a:hover { box-shadow: 0 0 0 3px rgba(196, 164, 110, 0.5); }
.cycle__loop { display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--c-on-dark-line); font-size: var(--text-secondary); color: var(--c-on-dark-muted); }
.cycle__loop .icon { width: 20px; height: 20px; color: var(--c-champagne); }

/* scale : trois colonnes de hauteur croissante, du standard au sur mesure */
.scale__list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: var(--space-3); height: 240px; }
.scale__item { height: var(--h); }
.scale__item a { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; padding: var(--space-3); border: 1px solid var(--c-on-dark-line); border-radius: 6px; text-decoration: none; color: var(--c-white); transition: border-color var(--dur-150) var(--ease-standard); }
.scale__item a:hover { border-color: var(--c-champagne); }
.scale__item b { font-weight: var(--weight-semibold); line-height: 1.2; }
.scale__item span { font-size: var(--text-meta); line-height: 1.35; color: var(--c-on-dark-muted); }
.scale__item--main a { background: var(--c-white); border-color: var(--c-white); color: var(--c-petrol); box-shadow: 0 0 0 4px rgba(196, 164, 110, 0.35); }
.scale__item--main span { color: var(--text-muted); }
.scale__axis { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); font-size: var(--text-meta); font-weight: var(--weight-medium); color: var(--c-on-dark-muted); }
.scale__axis::before { content: ""; order: 1; flex: 1; border-top: 1px dashed var(--c-on-dark-line); }
.scale__axis span:last-child { order: 2; color: var(--c-champagne); }

/* stack : couches empilées, la couche principale en blanc */
.stack__layers { list-style: none; display: grid; gap: var(--space-2); }
.stack__layer { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--c-on-dark-line); border-radius: 6px; }
.stack__layer .icon { width: 22px; height: 22px; color: var(--c-champagne); }
.stack__layer span { display: grid; font-size: var(--text-meta); color: var(--c-on-dark-muted); }
.stack__layer b { font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--c-white); }
.stack__layer--main { background: var(--c-white); border-color: var(--c-white); box-shadow: 0 0 0 4px rgba(196, 164, 110, 0.35); }
.stack__layer--main .icon, .stack__layer--main b { color: var(--c-petrol); }
.stack__layer--main span { color: var(--text-muted); }
.stack__layer + .stack__layer:not(.stack__layer--main) { margin-top: -1px; }

/* tiers : socle inclus (blanc) + options (pointillés) */
.tiers__base, .tiers__opt { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: 6px; }
.tiers__base { background: var(--c-white); color: var(--c-ink); box-shadow: 0 0 0 4px rgba(196, 164, 110, 0.35); }
.tiers__opt { border: 1.5px dashed var(--c-on-dark-line); }
.tiers__label { font-size: var(--text-meta); font-weight: var(--weight-semibold); }
.tiers__base .tiers__label { color: var(--c-petrol); }
.tiers__opt .tiers__label { color: var(--c-champagne); }
.tiers ul { list-style: none; display: grid; gap: var(--space-1) var(--space-4); font-size: var(--text-secondary); }
.tiers li { display: flex; align-items: baseline; gap: var(--space-2); }
.tiers li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; transform: translateY(-2px); background: var(--c-champagne); }
.tiers__opt li { color: var(--c-on-dark-muted); }
@media (min-width: 480px) { .tiers ul { grid-template-columns: 1fr 1fr; } }

/* ---------- Toutes les offres : une rangée par ligne d'offre ---------- */
.line-rows { list-style: none; border-top: var(--border-rule); }
.line-row { position: relative; display: grid; gap: var(--space-4); padding-block: var(--space-6); border-bottom: 1px solid var(--c-line); }
.line-row__head { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--space-4); row-gap: var(--space-1); }
.line-row__icon { grid-row: span 2; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--c-petrol); color: var(--c-white); }
.line-row__verb { font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--text-muted); }
.line-row__name { font-size: var(--text-h3); letter-spacing: var(--tracking-heading); line-height: 1.15; }
.line-row__name a { text-decoration: none; color: var(--c-petrol); }
.line-row__name a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.line-row__body { display: grid; gap: var(--space-3); }
.line-row__promise { font-size: var(--text-lead); font-weight: var(--weight-semibold); color: var(--c-ink); }
.line-row__text { color: var(--text-muted); max-width: 60ch; }
.line-row__subs { list-style: none; display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.line-row__subs li { display: grid; }
.line-row__subs a { display: grid; align-content: start; gap: 2px; padding: var(--space-3) var(--space-4); border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-linen-soft); text-decoration: none; transition: border-color var(--dur-150) var(--ease-standard); }
.line-row__subs a:hover { border-color: var(--c-petrol); }
.line-row__subs b { color: var(--c-petrol); font-weight: var(--weight-semibold); }
.line-row__subs span { font-size: var(--text-secondary); color: var(--text-muted); }
.line-row__refs { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--text-secondary); color: var(--text-muted); }
.line-row__refs span { font-weight: var(--weight-semibold); color: var(--c-petrol); }
.line-row__more { justify-self: start; }
.line-row--partners .line-row__icon { background: var(--c-champagne); color: var(--c-petrol); }
@media (min-width: 640px) { .line-row__subs { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
  .line-row { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr) auto; gap: var(--space-8); align-items: start; padding-block: var(--space-7); }
  .line-row__more { align-self: start; margin-top: var(--space-2); }
}

/* Selon votre besoin : tuiles « situation → offre » */
.needs { list-style: none; display: grid; gap: var(--space-3); }
.need { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-1); height: 100%; padding: var(--space-5); border: 1px solid var(--c-line); border-radius: 8px; background: var(--surface-page); text-decoration: none; transition: border-color var(--dur-150) var(--ease-standard), transform var(--dur-150) var(--ease-standard); }
.need:hover { border-color: var(--c-petrol); transform: translateY(-2px); }
.need .icon { grid-row: span 2; width: 24px; height: 24px; color: var(--c-petrol); }
.need__text { font-weight: var(--weight-semibold); color: var(--c-ink); line-height: 1.35; }
.need__to { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--c-petrol); }
.need__to::after { content: "→"; transition: transform var(--dur-150) var(--ease-standard); }
.need:hover .need__to::after { transform: translateX(3px); }
.need--open { border-style: dashed; border-color: var(--c-line-strong); background: transparent; }
@media (min-width: 700px) { .needs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .needs { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Web & Apps : trois cartes d'offre ---------- */
.offer-cards { list-style: none; display: grid; gap: var(--space-4); }
/* Carte entièrement cliquable : élévation douce au survol, bouton qui réagit avec la carte.
   Un seul trait de contour (pas d'ombre en plus de la bordure) ; anneau de focus au clavier uniquement. */
.offer-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-linen-soft); cursor: pointer; transition: border-color var(--dur-200) var(--ease-standard), transform var(--dur-200) var(--ease-out), box-shadow var(--dur-200) var(--ease-standard), background-color var(--dur-200) var(--ease-standard); }
.offer-card--main { background: var(--surface-page); border-color: var(--c-petrol); border-top: 3px solid var(--c-champagne); }
@media (hover: hover) and (pointer: fine) {
  .offer-card:hover { border-color: var(--c-petrol); background: var(--surface-page); transform: translateY(-3px); box-shadow: 0 14px 32px -18px rgba(20, 35, 55, 0.35); }
  .offer-card--main:hover { border-top-color: var(--c-champagne); }
  .offer-card:hover .offer-card__more.btn--secondary { background: var(--c-petrol); color: var(--c-white); }
  .offer-card:hover .offer-card__more.btn--primary { background: var(--action-hover); }
  .offer-card:hover .offer-card__more::after { transform: translateX(3px); }
}
.offer-card:active { transform: none; transition-duration: var(--dur-100); }
.offer-card__kicker { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--text-muted); }
.offer-card__kicker .icon { width: 22px; height: 22px; color: var(--c-petrol); }
.offer-card__title { font-size: var(--text-h3); letter-spacing: var(--tracking-heading); line-height: 1.15; }
.offer-card__title a { color: var(--c-petrol); text-decoration: none; }
.offer-card__title a::after { content: ""; position: absolute; inset: 0; }
.offer-card__title a:focus-visible { outline: none; }
.offer-card:has(:focus-visible) { outline: var(--focus-outline); outline-offset: 3px; }
.offer-card__text { color: var(--text-muted); }
.offer-card__refs { display: grid; gap: 2px; margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--c-line); font-size: var(--text-secondary); color: var(--text-muted); }
.offer-card__refs span { font-weight: var(--weight-semibold); color: var(--c-petrol); }
.offer-card__more { align-self: start; margin-top: var(--space-2); pointer-events: none; }
@media (min-width: 900px) { .offer-cards { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }

/* Étapes (case-steps) sur fond blanc : cartes lin ; trois étapes = trois colonnes */
.c-section:not(.c-section--alt) .case-steps li { background: var(--surface-alt); }
@media (min-width: 1100px) { .case-steps:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Security : formule WordPress ---------- */
.pricing { display: grid; gap: var(--space-5); }
.price-card { display: grid; gap: var(--space-5); padding: var(--space-6) var(--space-5); border-radius: 8px; background: var(--surface-page); border: 1px solid var(--c-petrol); border-top: 3px solid var(--c-champagne); }
.price-card__kicker { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--text-muted); }
.price-card__kicker .icon { width: 22px; height: 22px; color: var(--c-petrol); }
.price-card__title { font-size: var(--text-h3); letter-spacing: var(--tracking-heading); line-height: 1.15; color: var(--c-petrol); }
.price-card__prices { display: grid; gap: var(--space-4); }
.price-card__prices p { display: grid; gap: 2px; }
.price-card__prices b { font-size: var(--text-h2); font-weight: var(--weight-semibold); letter-spacing: -0.03em; line-height: 1; color: var(--c-petrol); }
.price-card__prices span { font-size: var(--text-secondary); color: var(--text-muted); }
.price-card__cols { display: grid; gap: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--c-line); }
.price-card__label { margin-bottom: var(--space-2); font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--text-muted); }
.price-card__cols ul { list-style: none; display: grid; gap: var(--space-2); font-size: var(--text-secondary); }
.price-card__cols li { display: flex; align-items: baseline; gap: var(--space-2); }
.price-card__cols li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; transform: translateY(-2px); background: var(--c-champagne); }
.price-card .btn { justify-self: start; }
.price-options { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-6) var(--space-5); border-radius: 8px; background: var(--surface-alt); }
.price-options__title { font-size: var(--text-h4); color: var(--c-petrol); }
.price-options dl { margin: 0; border-top: 1px solid var(--c-line-strong); }
.price-options dl > div { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--c-line); }
.price-options dt { color: var(--text-muted); }
.price-options dd { margin: 0; font-weight: var(--weight-semibold); color: var(--c-petrol); white-space: nowrap; }
.price-options__note { font-size: var(--text-meta); color: var(--text-muted); }
@media (min-width: 640px) { .price-card__prices { grid-template-columns: 1fr 1fr; } .price-card__cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .pricing { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } .price-card { padding: var(--space-7); } }

/* ---------- Cloud : architectures sur mesure ---------- */
.cloud-arch { display: grid; gap: var(--space-4); max-width: 72ch; margin-bottom: var(--space-7); }
.cloud-arch__lead { font-size: var(--text-lead); color: var(--text-muted); }

/* ---------- Offres liées et notes ---------- */
.c-related__title { font-size: var(--text-h3); }
.c-related .exp-grid { margin-top: var(--space-6); }
@media (min-width: 900px) { .c-related .exp-grid { grid-template-columns: repeat(3, 1fr); } }
.c-data__todo { margin-top: var(--space-5); }
.c-section__head--row > div { display: grid; gap: var(--space-4); max-width: 760px; }
/* Méthode (composant .steps de l'accueil) réutilisée pour un parcours en trois temps (Security) */
@media (min-width: 900px) { .steps__list:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.c-section--alt .steps__promise { background: var(--surface-page); }
.c-section__intro a { color: var(--c-petrol); font-weight: var(--weight-medium); }

/* ==========================================================================
   Registre « enjeux / engagements » (.issues) en cartes — 2026-10-12
   Remplace la liste à filets : picto rond (comme .build), petit numéro, titre, texte.
   Utilisé sur Partners, Secteur public, Toutes les offres et les pages d'offre.
   ========================================================================== */
.issues { display: grid; gap: var(--space-4); border-top: 0; }
.issue { position: relative; display: grid; grid-template-columns: 1fr; align-content: start; gap: var(--space-3); padding: var(--space-6) var(--space-5); background: var(--c-linen-soft); border: 1px solid var(--c-line); border-radius: 8px; border-bottom: 1px solid var(--c-line); }
.c-section--alt .issue { background: var(--surface-page); }
.issue__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--c-petrol); color: var(--c-white); margin-bottom: var(--space-2); }
.issue__icon .icon { width: 24px; height: 24px; }
.issue__num { position: absolute; top: var(--space-5); right: var(--space-5); padding: 0 !important; font-size: var(--text-meta); }
.issue__need { font-size: var(--text-h4); line-height: 1.3; letter-spacing: -0.01em; color: var(--c-petrol); }
.issue__answer { font-size: var(--text-body); max-width: none; }
.issue__answer a { color: var(--c-petrol); font-weight: var(--weight-medium); }
@media (min-width: 900px) {
  .issues { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .issue { grid-template-columns: 52px minmax(0, 1fr); column-gap: var(--space-5); padding: var(--space-6); }
  .issue__icon { grid-row: span 2; margin-bottom: 0; }
  .issue__need, .issue__answer, .issue__link { grid-column: 2; }
  .issue__num { top: var(--space-6); right: var(--space-6); }
}

/* Cartes de réalisations : vraie capture du site quand il est public (sinon vignette dessinée) */
.work__media--shot { display: block; background: var(--c-line); }
.work__media--shot .work__shot { position: absolute; inset: 0; }
.work__shot, .work__shot img { display: block; width: 100%; height: 100%; }
.work__shot img { object-fit: cover; object-position: top center; transition: transform var(--dur-300) var(--ease-out); }
.work__media--shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); pointer-events: none; }
.work__media--shot .work__when, .work__media--shot .work__brand { z-index: 1; }
@media (hover: hover) { .work__card:hover .work__shot img { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .work__shot img { transition: none; } }
@media (max-width: 479px) {
  .scale__list { height: 200px; gap: var(--space-2); }
  .scale__item a { padding: var(--space-2); }
  .scale__item b { font-size: var(--text-secondary); white-space: nowrap; }
  .scale__item span { display: none; }
}

/* ==========================================================================
   Étude de cas, compléments (2026-10-12) — 26 fiches générées sur le gabarit FICT
   case-drawn : outil non public, le livrable dessiné au trait à la place des captures
   built--wide : « Ce que nous avons construit » sans schéma de liaisons
   ========================================================================== */
.case-drawn { position: relative; display: grid; place-items: center; width: min(1000px, 100%); aspect-ratio: 1000 / 400; margin: 0; padding: var(--space-6) var(--space-5) var(--space-8); background: var(--surface-page); border-radius: 8px 8px 0 0; box-shadow: 0 -12px 60px rgba(0, 0, 0, 0.3); color: var(--c-petrol); }
.case-drawn__art { width: min(560px, 82%); height: auto; overflow: visible; }
.case-drawn__cap { position: absolute; left: var(--space-5); bottom: var(--space-4); right: var(--space-5); font-size: var(--text-meta); color: var(--text-muted); }
@media (max-width: 639px) { .case-drawn { aspect-ratio: 4 / 3; padding-bottom: var(--space-8); } }
@media (min-width: 1024px) { .built--wide { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .built--wide:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } }
.c-case-tech__inner > .case-steps__note { grid-column: 1 / -1; margin-top: 0; }

/* ==========================================================================
   Gabarit carrières (carrieres.html)
   Blocs : c-page-hero--jobs (reprend --agency), c-values, c-openings (cartes de postes),
   c-contact (formulaire de candidature, même composant que la page Contact).
   ========================================================================== */
.openings { list-style: none; display: grid; gap: var(--space-5); }
.opening { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-6) var(--space-5); border: 1px solid var(--c-line); border-radius: 8px; background: var(--surface-page); transition: border-color var(--dur-200) var(--ease-standard), transform var(--dur-200) var(--ease-standard); }
.opening--open { background: var(--c-linen-soft); }
.opening__kicker { font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--text-muted); margin-bottom: var(--space-2); }
.opening__title { font-size: var(--text-h3); letter-spacing: var(--tracking-heading); }
.opening__meta { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-3); font-size: var(--text-secondary); font-weight: var(--weight-medium); color: var(--c-petrol); }
.opening__meta li { display: inline-flex; align-items: center; gap: var(--space-2); }
.opening__meta .icon { width: 18px; height: 18px; color: var(--c-champagne); }
.opening__text { color: var(--text-muted); max-width: 68ch; }
.opening__more summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); cursor: pointer; font-weight: var(--weight-medium); color: var(--c-petrol); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.opening__more summary::-webkit-details-marker { display: none; }
.opening__more summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-200) var(--ease-standard); }
.opening__more[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.opening__detail { display: grid; gap: var(--space-5); margin-top: var(--space-4); padding-top: var(--space-5); border-top: var(--border-hairline); }
.opening__detail h4 { font-size: var(--text-body); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }
.opening__list { list-style: none; display: grid; gap: var(--space-2); color: var(--text-muted); }
.opening__list li { position: relative; padding-left: var(--space-5); }
.opening__list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-champagne); }
.opening__plus { margin-top: var(--space-3); font-size: var(--text-secondary); color: var(--text-muted); }
.opening__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
@media (hover: hover) { .opening:hover { border-color: var(--c-petrol); transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .opening, .opening__more summary::after { transition: none; } .opening:hover { transform: none; } }
@media (min-width: 700px) { .opening { padding: var(--space-7) var(--space-6); } .opening__detail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .openings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opening:first-child { grid-column: 1 / -1; }
}
.field__input--file { padding-block: var(--space-3); cursor: pointer; }
.field__input--file::file-selector-button { margin-right: var(--space-4); padding: var(--space-2) var(--space-4); border: 0; border-radius: 6px; background: var(--c-linen); color: var(--c-ink); font: inherit; font-weight: var(--weight-medium); cursor: pointer; }
/* Sans poste ouvert : les métiers en 3 cartes, puis l'appel à candidature */
@media (min-width: 1024px) { .openings--roles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .openings--roles .opening:first-child { grid-column: auto; } }
.opening--cta { margin-top: var(--space-5); }
@media (min-width: 700px) { .opening--cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-6); } }

/* ===================== Gabarit hub secteurs ===================== */
.sector-proofs { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-5); border: 1px solid var(--c-on-dark-line); border-radius: 8px; background: rgba(255, 255, 255, 0.04); }
.sector-proofs__cap { font-size: var(--text-h4); font-weight: var(--weight-semibold); letter-spacing: -0.01em; line-height: 1.3; color: var(--c-white); }
.sector-proofs__list { list-style: none; display: grid; border-top: 1px solid var(--c-on-dark-line); }
.sector-proof { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--space-3); row-gap: 2px; padding-block: var(--space-3); border-bottom: 1px solid var(--c-on-dark-line); color: var(--c-white); text-decoration: none; }
.sector-proof .icon { grid-row: span 2; width: 24px; height: 24px; color: var(--c-champagne); }
.sector-proof__name { font-weight: var(--weight-semibold); }
.sector-proof__ref { font-size: var(--text-secondary); color: var(--c-on-dark-muted); }
.sector-proof__ref b { font-weight: var(--weight-semibold); color: var(--c-white); }
.sector-proof__ref b::after { content: " · "; font-weight: var(--weight-regular); color: var(--c-on-dark-muted); }
.sector-proof:hover .sector-proof__name { text-decoration: underline; text-underline-offset: 0.3em; }

/* ===================== Gabarit plan du site ===================== */
.sitemap { display: grid; gap: var(--space-7); }
@media (min-width: 700px) { .sitemap { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sitemap { grid-template-columns: repeat(4, 1fr); } }
.sitemap__title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: var(--border-rule); font-size: var(--text-h4); letter-spacing: -0.01em; color: var(--c-petrol); }
.sitemap__title span { font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--text-muted); }
.sitemap__list, .sitemap__list ul, .sitemap__case-list { list-style: none; }
.sitemap__list > li { border-bottom: 1px solid var(--c-line); }
.sitemap__list a { display: flex; align-items: center; min-height: var(--target-min); font-weight: var(--weight-medium); color: var(--c-petrol); text-decoration: none; }
.sitemap__list ul { padding: 0 0 var(--space-3) var(--space-4); border-left: 1px solid var(--c-line); margin-left: var(--space-1); }
.sitemap__list ul a { min-height: 36px; font-size: var(--text-secondary); color: var(--text-muted); }
.sitemap a:hover, .sitemap__cases a:hover b { text-decoration: underline; text-underline-offset: 0.3em; }
.sitemap__cases { margin-top: var(--space-9); }
.sitemap__case-list { display: grid; }
@media (min-width: 900px) { .sitemap__case-list { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-7); } }
.sitemap__case-list a { display: grid; gap: 2px; padding-block: var(--space-3); border-bottom: 1px solid var(--c-line); font-size: var(--text-secondary); color: var(--text-muted); text-decoration: none; }
.sitemap__case-list b { font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--c-petrol); }

/* ===================== Encart WP Serenity (page Security) ===================== */
.serenity { display: grid; gap: var(--space-6); padding: var(--space-6); border: 1px solid var(--c-line-strong); border-radius: 8px; background: var(--surface-alt); }
@media (min-width: 900px) { .serenity { grid-template-columns: 1.2fr 1fr; align-items: center; gap: var(--space-8); padding: var(--space-8); } }
.serenity__main { display: grid; gap: var(--space-3); justify-items: start; }
.serenity__kicker { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--text-muted); }
.serenity__kicker .icon { width: 20px; height: 20px; color: var(--c-petrol); }
.serenity__title { font-size: var(--text-h3); letter-spacing: var(--tracking-heading); color: var(--c-petrol); }
.serenity__text { color: var(--text-muted); }
.serenity__list { list-style: none; display: grid; border-top: var(--border-rule); }
.serenity__list li { position: relative; padding: var(--space-3) 0 var(--space-3) var(--space-5); border-bottom: 1px solid var(--c-line); }
.serenity__list li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-champagne); }

/* ===================== Méthode, version courte (pages d'offre secondaires) ===================== */
.c-steps--compact .steps__list { gap: var(--space-4); }
.c-steps--compact .step { align-items: center; }
.c-steps--compact .step__body { padding-top: 0; }
.c-steps--compact .c-steps__foot { justify-content: space-between; margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--c-line); }
.c-steps--compact .c-steps__foot .step__check { margin: 0; padding: 0; border: 0; }

/* ===================== Cas IA (Data & IA) : conversation illustrée ===================== */
.uc-feature--ai { margin-top: var(--space-8); }
.uc-feature--ai .uc-feature__media { padding: var(--space-7) var(--space-4) !important; }
.chat-demo { display: grid; gap: var(--space-3); width: min(560px, 100%); }
.chat-demo__window { overflow: hidden; border-radius: 8px; background: var(--c-white); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28); }
.chat-demo__bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--c-line); font-size: var(--text-secondary); font-weight: var(--weight-semibold); color: var(--c-petrol); }
.chat-demo__bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--c-champagne); }
.chat-demo__msgs { display: grid; gap: var(--space-3); padding: var(--space-4); font-size: var(--text-secondary); line-height: 1.45; }
.chat-demo__msg { max-width: 88%; padding: var(--space-3) var(--space-4); border-radius: 8px; }
.chat-demo__msg--user { justify-self: end; background: var(--c-petrol); color: var(--c-white); }
.chat-demo__msg--bot { display: grid; gap: var(--space-2); background: var(--surface-alt); color: var(--text); }
.chat-demo__profiles { list-style: none; display: grid; gap: var(--space-2); }
.chat-demo__profiles li { display: grid; gap: 2px; padding: var(--space-2) var(--space-3); border: 1px solid var(--c-line); border-radius: 6px; background: var(--c-white); }
.chat-demo__profiles b { font-weight: var(--weight-semibold); color: var(--c-petrol); }
.chat-demo__profiles span { font-size: var(--text-meta); color: var(--text-muted); }
.chat-demo__cap { font-size: var(--text-meta); color: var(--c-on-dark-muted); text-align: center; }
.chat-demo__profiles sup { line-height: 0; }

/* Réalisations : « Tous les projets » sur fond blanc, séparé d'« À la une » par un filet ; logos sur fond beige */
.c-works--plain { border-top: var(--border-hairline); }
.c-section--alt .trust-logos li { background: var(--surface-page); }

/* ===================== Réalisations : histoires en bandeau (projets avec témoignage) + grille à filets ===================== */
.wstories { grid-auto-flow: dense; gap: var(--space-8) var(--space-6); }
@media (min-width: 700px) { .wstories { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .wstories { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wstory { grid-column: 1 / -1; }
.wstory__card { position: relative; display: grid; gap: var(--space-6); padding: var(--space-5); border-radius: 8px; background: var(--surface-dark); color: var(--c-white); }
@media (min-width: 900px) { .wstory__card { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: var(--space-8); padding: var(--space-7); } }
.wstory .work__media { margin: 0; border: 0; border-radius: 6px; aspect-ratio: 16 / 10; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28); }
.wstory .work__media:not(.work__media--shot) { background: rgba(255, 255, 255, 0.06); }
.wstory__body { display: grid; gap: var(--space-4); align-content: center; }
.wstory__quote { padding-left: var(--space-5); border-left: 2px solid var(--c-champagne); }
.wstory__quote blockquote { font-size: 1.5rem; line-height: 1.35; letter-spacing: -0.01em; color: var(--c-white); }
.wstory__quote figcaption { margin-top: var(--space-3); font-size: var(--text-secondary); color: var(--c-on-dark-muted); }
.wstory__quote figcaption b { display: block; font-weight: var(--weight-semibold); color: var(--c-white); }
.wstory__meta { font-size: var(--text-secondary); color: var(--c-on-dark-muted); }
.wstory__meta b { font-weight: var(--weight-semibold); color: var(--c-white); }
.wstory__title { font-size: var(--text-h4); letter-spacing: -0.01em; color: var(--c-white); }
.wstory__title a { color: inherit; text-decoration: none; }
.wstory__title a::after { content: ""; position: absolute; inset: 0; }
.wstory__more { justify-self: start; color: var(--c-white); font-weight: var(--weight-medium); text-decoration: underline; text-decoration-color: var(--c-champagne); text-underline-offset: 0.3em; }
.wstory__card:hover .wstory__title a { text-decoration: underline; text-underline-offset: 0.2em; }
.wtile__card { position: relative; display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-4); border-top: var(--border-rule); }
.wtile .work__media { margin: 0 0 var(--space-1); border: 0; border-radius: 6px; aspect-ratio: 16 / 10; }
.wtile .work__media:not(.work__media--shot) { background: var(--surface-alt); color: var(--c-petrol); }
.wtile__meta { font-size: var(--text-secondary); color: var(--text-muted); }
.wtile__meta b { font-weight: var(--weight-semibold); color: var(--text); }
.wtile__title { font-size: var(--text-h4); letter-spacing: -0.01em; color: var(--c-petrol); }
.wtile__title a { color: inherit; text-decoration: none; }
.wtile__title a::after { content: ""; position: absolute; inset: 0; }
.wtile__card:hover .wtile__title a { text-decoration: underline; text-underline-offset: 0.2em; }
.wtile__lead { color: var(--text-muted); font-size: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) { .wstory__card:hover .work__shot img, .wtile__card:hover .work__shot img { transform: scale(1.03); } }
.wtile .work__media:not(.work__media--shot) .work__vignette { width: 42%; opacity: 0.5; }
.wtile__card:hover .work__media:not(.work__media--shot) .work__vignette { opacity: 0.8; }

/* ===================== Réalisations, hero : mises en scène des captures (éventail : ordinateur + téléphone, projets en fondu) ===================== */
.show { position: relative; height: clamp(300px, 38vw, 480px); margin: 0; }
.show__v { position: absolute; inset: 0; }
.show img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }

/* Éventail */
.show-fan { list-style: none; position: relative; height: 100%; }
.show-fan__set { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 800ms var(--ease-out), visibility 0s 800ms; }
.show-fan__set.is-on { opacity: 1; visibility: visible; transition: opacity 800ms var(--ease-out); }
.show-fan__back { position: absolute; left: 0; top: 4%; width: 60%; overflow: hidden; border-radius: 8px; opacity: 0.5; transform: rotate(-6deg); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3); }
.show-fan__main { position: absolute; right: 7%; top: 14%; width: 76%; overflow: hidden; border-radius: 8px; background: var(--c-white); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); transform: translateY(10px); transition: transform 900ms var(--ease-out); }
.show-fan__set.is-on .show-fan__main { transform: none; }
.show-fan__bar { display: flex; gap: 5px; padding: 7px 10px; background: #EEF0F3; }
.show-fan__bar i { width: 7px; height: 7px; border-radius: 50%; background: #C9CED6; }
.show-fan__phone { position: absolute; right: 0; bottom: 6%; width: 21%; height: auto; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.4)); }
.show-fan__cap { position: absolute; left: 4%; bottom: 0; display: grid; gap: 2px; font-size: var(--text-secondary); color: var(--c-on-dark-muted); }
.show-fan__cap b { font-weight: var(--weight-semibold); color: var(--c-white); }

/* Pause */
.show__pause { position: absolute; right: 0; bottom: -4px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--c-on-dark-line); border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: var(--c-white); cursor: pointer; }
.show__pause::before { content: ""; width: 10px; height: 12px; border-inline: 3px solid currentColor; box-sizing: border-box; }
.show__pause[aria-pressed="true"]::before { width: 0; height: 0; border: 0; border-left: 10px solid currentColor; border-block: 6px solid transparent; margin-left: 3px; }
.show__pause:hover { background: rgba(255, 255, 255, 0.16); }
.show__pause:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
@media (prefers-reduced-motion: reduce) {
  .show-fan__set, .show-fan__main { transition: none; }
}
.show .show-fan__phone { width: 21%; height: auto; aspect-ratio: auto; object-fit: contain; }
.show-fan__back { top: 2%; width: 58%; }
.show-fan__main { right: 4%; top: 12%; width: 84%; }
.show .show-fan__phone { width: 25%; right: -1%; bottom: 20%; }
.show-fan__cap { left: 52px; bottom: 2px; }
.show__pause.show__pause { right: auto; left: 0; bottom: 0; }
/* Petites listes de réalisations (fiches, secteurs, offres) : même carte à filet que la page Réalisations */
.wtiles { gap: var(--space-7) var(--space-6); }
.c-section--alt .wtile .work__media:not(.work__media--shot) { background: var(--surface-page); }

/* « Votre secteur » (accueil) : onglets à filet, comme les témoignages ; capture d'un projet du secteur */
.sp-list { margin-bottom: var(--space-6); }
.sector-picker .sp-panel { border-radius: 8px; }
.sp-shot { position: relative; display: grid; gap: var(--space-3); align-content: center; }
.sp-shot__frame { overflow: hidden; border-radius: 8px; background: var(--c-white); box-shadow: var(--elev-2); }
.sp-shot__bar { display: flex; gap: 6px; padding: 10px 12px; background: var(--c-white); border-bottom: 1px solid var(--c-line); }
.sp-shot__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-line-strong); }
.sp-shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.sp-shot figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); font-size: var(--text-secondary); color: var(--text-muted); }
.sp-shot figcaption b { color: var(--text); font-weight: var(--weight-semibold); }
.sp-shot figcaption .link-action { margin-left: auto; }
.sp-logos { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-2); }
.sp-logos img { display: block; width: 92px; height: 36px; object-fit: contain; object-position: left center; filter: brightness(0); opacity: 0.65; }

/* Logo en écusson ou cartouche plein (Gendarmerie, Copytop) : niveaux de gris plutôt que silhouette noire */
.sp-logos img.is-badge { width: auto; filter: grayscale(1) contrast(1.1); opacity: 0.8; }