/* ==========================================================================
   Mantara V3 — composants
   ========================================================================== */

/* ---------- Boutons ---------- */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 52px;
  padding: 0 18px 0 20px;
  border-radius: var(--radius);
  font: 600 0.9375rem/1 var(--f-sans);
  white-space: nowrap;
  transition: color 0.5s var(--ease-snap);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: right; transition: transform 0.6s var(--ease-snap); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn__arrow { position: relative; flex: none; width: 16px; height: 16px; overflow: hidden; }
.btn__arrow svg { position: absolute; inset: 0; width: 16px; height: 16px; transition: transform 0.6s var(--ease-snap); }
.btn__arrow svg + svg { transform: translateX(-120%); }
.btn:hover .btn__arrow svg:first-child { transform: translateX(120%); }
.btn:hover .btn__arrow svg + svg { transform: translateX(0); }
.btn--primary { background: var(--ink); color: var(--white); }
.btn--primary::before { background: var(--signal-ink); }
.btn--ghost { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover { color: var(--white); }
.btn--sm { height: 40px; padding: 0 14px; gap: 12px; font-size: 0.875rem; }
.btn--lg { height: 64px; padding: 0 22px 0 26px; gap: 28px; font-size: 1.0625rem; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
@media (max-width: 560px) {
  /* Un libellé long passe à la ligne plutôt que de déborder de l'écran */
  .btn { max-width: 100%; height: auto; min-height: 52px; padding-block: 12px; white-space: normal; line-height: 1.25; text-align: left; }
  .btn--sm { min-height: 40px; padding-block: 8px; }
  .btn--lg { min-height: 64px; }
}
.night .btn--primary, .on-ink .btn--primary, .nav.is-dark .btn--primary { background: var(--glint); color: var(--night); }
.night .btn--primary::before, .on-ink .btn--primary::before, .nav.is-dark .btn--primary::before { background: var(--on-night); }
.night .btn--ghost, .on-ink .btn--ghost { background: transparent; color: var(--on-night); box-shadow: inset 0 0 0 1px var(--on-night-2); }
.night .btn--ghost::before, .on-ink .btn--ghost::before { background: var(--on-night); }
.night .btn--ghost:hover, .on-ink .btn--ghost:hover { color: var(--night); }

.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--signal-ink); }
.link-arrow svg { width: 16px; height: 16px; flex: none; transition: transform 0.6s var(--ease-snap); }
.link-arrow:hover svg { transform: translateX(6px); }
.link-arrow span { padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat; transition: background-size 0.6s var(--ease-snap); }
.link-arrow:hover span { background-size: 100% 1px; }
.night .link-arrow, .on-ink .link-arrow { color: var(--glint); }
/* Retour (← Toutes les réalisations, ← Tous les services) : la flèche avant le texte, retournée */
.link-arrow.back svg { transform: scaleX(-1); }
.link-arrow.back:hover svg { transform: scaleX(-1) translateX(6px); }

/* ---------- Étiquettes de statut et pastilles ---------- */
.tag { display: inline-flex; align-items: center; gap: 8px; height: 24px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--white); font: 500 0.6875rem/1 var(--f-mono); color: var(--ink); white-space: nowrap; }
.tag::before { content: ""; flex: none; width: 7px; height: 7px; background: currentColor; }
.tag--prod { color: var(--ok); }
.tag--wip { color: var(--signal-ink); }
.tag--wip::before { animation: blink 1.4s steps(2, jump-none) infinite; }
.tag--pilot { color: var(--signal-ink); }
.tag--pilot::before, .tag--scope::before, .tag--dev::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.tag--study { color: var(--ink); }
.tag--scope { color: var(--ink-2); border-style: dashed; }
.tag--internal { background: var(--paper-2); border-color: var(--paper-2); }
.tag--dev { color: var(--ink-2); border-style: dashed; }
.tag--demo { border-style: dashed; color: var(--ink-2); }
.tag--demo::before { display: none; }
@keyframes blink { 50% { opacity: 0.2; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 5px 7px; background: var(--paper-2); font: 500 0.6875rem/1 var(--f-mono); color: var(--ink-2); }
.chips li:has(> a) { padding: 0; }
.chips a { display: block; padding: 5px 7px; transition: color 0.3s, box-shadow 0.3s; }
.chips a:hover { color: var(--signal-ink); box-shadow: inset 0 0 0 1px var(--signal); }

/* ---------- Pré-chargement : le logo se révèle ---------- */
.preloader { display: none; }
.anim .preloader { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 32px; clip-path: inset(0 0 0 0); animation: preloader-safety 0s 8s forwards; }
@keyframes preloader-safety { to { visibility: hidden; } }
.intro-seen .preloader { display: none; }
.preloader__mark { position: relative; width: clamp(88px, 10vw, 128px); clip-path: inset(100% 100% 0 0); }
.preloader__word { width: clamp(180px, 20vw, 260px); clip-path: inset(0 100% 0 0); }
.preloader__glint { position: absolute; left: 41.2%; top: 27.9%; width: 42%; translate: -50% -50%; scale: 0; filter: drop-shadow(0 0 10px rgba(35, 185, 214, 0.9)); }

/* ---------- Rideau entre les pages : monte depuis le bas, repart par le haut ---------- */
.curtain { position: fixed; inset: 0; z-index: 95; display: grid; place-content: center; justify-items: center; gap: 18px; pointer-events: none; visibility: hidden; clip-path: inset(100% 0 0 0); }
.curtain__picto { width: 44px; height: auto; }
.curtain__route { color: var(--signal-ink); }
.curtain.is-closing { visibility: visible; pointer-events: auto; clip-path: inset(0 0 0 0); transition: clip-path 0.6s var(--ease-in-out); }
.curtain.is-opening { visibility: visible; clip-path: inset(0 0 100% 0); transition: clip-path 0.8s var(--ease-in-out); }
.curtain.is-covered { visibility: visible; pointer-events: auto; clip-path: inset(0 0 0 0); animation: curtain-safety 0s 4s forwards; }
@keyframes curtain-safety { to { visibility: hidden; pointer-events: none; } }

/* ---------- Navigation ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; border-bottom: 1px solid transparent; transition: background-color 0.4s, border-color 0.4s, color 0.4s; }
.nav.is-scrolled { background: var(--nav-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom-color: var(--ink); }
.nav.is-dark { color: var(--on-night); background: rgba(4, 24, 32, 0.72); border-bottom-color: var(--night-line); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--nav-h); }
.nav__logo { display: flex; align-items: center; gap: 12px; }
.nav__picto { width: 28px; height: auto; }
.nav__word { height: 12px; width: auto; }
.nav__word--light, .nav.is-dark .nav__word--dark { display: none; }
.nav.is-dark .nav__word--light { display: block; }
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link { display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 12px; font-size: 0.9375rem; font-weight: 500; transition: color 0.3s; }
.nav__link small { font: 500 0.625rem/1 var(--f-mono); color: var(--ink-3); transition: color 0.3s; }
.nav__link:hover, .nav__link:hover small, .nav__services.is-open .nav__link { color: var(--signal-ink); }
.nav__link.is-active { color: var(--signal-ink); box-shadow: inset 0 -2px 0 currentColor; }
.nav__link.is-active small { color: inherit; }
.nav.is-dark .nav__link small { color: var(--on-night-3); }
.nav.is-dark .nav__link:hover, .nav.is-dark .nav__link:hover small, .nav.is-dark .nav__link.is-active { color: var(--glint); }
.nav__chev { width: 10px; height: 10px; align-self: center; transition: transform 0.4s var(--ease-snap); }
.nav__services { position: relative; }
.nav__services.is-open .nav__chev { transform: rotate(180deg); }
.nav__end { display: flex; align-items: center; gap: 8px; }
.nav__menu { display: none; height: 40px; padding: 0 14px; box-shadow: inset 0 0 0 1px currentColor; font: 500 0.8125rem var(--f-mono); }
@media (max-width: 960px) { .nav__links { display: none; } .nav__menu { display: inline-flex; align-items: center; } }
@media (max-width: 520px) { .nav__word { display: none !important; } }

/* Menu déroulant « Services » */
.menu { background: var(--white); border: 1px solid var(--ink); box-shadow: var(--hard-shadow) var(--shadow-soft); color: var(--ink); }
.menu a { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); transition: background-color 0.3s; }
.menu a:hover { background: var(--paper); }
.menu a[aria-current] { box-shadow: inset 3px 0 0 var(--signal); }
.menu a small { grid-row: span 2; font: 500 0.6875rem/1.7 var(--f-mono); color: var(--ink-3); }
.menu b { font-weight: 600; font-size: 0.9375rem; }
.menu span { font-size: 0.8125rem; color: var(--ink-2); }
.menu__group { margin: 0; padding: 10px 14px 7px; border-bottom: 1px solid var(--line); background: var(--paper); font: 500 0.625rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.menu__group ~ .menu__group { border-top: 1px solid var(--ink); }
.menu .menu__all { display: block; border-bottom: 0; font: 500 0.8125rem var(--f-mono); color: var(--signal-ink); }
.drop { position: absolute; left: 0; top: calc(100% + 16px); width: 460px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.25s, transform 0.5s var(--ease-out), visibility 0s 0.25s; }
.nav__services.is-open .drop { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s, transform 0.5s var(--ease-out); }

/* Menu plein écran (mobile) */
.mnav { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; padding: calc(var(--nav-h) + 16px) var(--gutter) 0; overflow-y: auto; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 0.7s var(--ease-snap), visibility 0s 0.7s; }
.mnav.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.7s var(--ease-snap); }
.mnav__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.mnav__list > li { border-bottom: 1px solid var(--line); }
.mnav__link { display: flex; justify-content: space-between; align-items: baseline; width: 100%; padding: 16px 0; font: 600 1.75rem/1.1 var(--f-sans); letter-spacing: -0.02em; text-align: left; }
.mnav__link small { font: 500 0.6875rem var(--f-mono); color: var(--ink-3); }
.mnav__sub { display: none; list-style: none; margin: 0 0 14px; padding: 0; }
.is-expanded .mnav__sub { display: grid; }
.mnav__sub a { display: block; padding: 8px 0; font-size: 1rem; }
.mnav__sub a.minor { color: var(--ink-2); }
.mnav a[aria-current] { color: var(--signal-ink); }
.mnav__group { padding: 14px 0 2px; font: 500 0.6875rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.mnav__group:first-child { padding-top: 2px; }
/* Bas du menu collant (ARBORESCENCE §2) : l'appel et les coordonnées restent à l'écran quand Services est déplié */
.mnav__foot { position: sticky; bottom: 0; display: grid; gap: 12px; margin: auto calc(-1 * var(--gutter)) 0; padding: 16px var(--gutter) max(24px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper); }
.mnav__foot .btn { width: 100%; }
@media (min-width: 961px) { .mnav { display: none; } }

/* ---------- Cote « sur mesure » ---------- */
.dim { position: absolute; left: 0; top: 0; width: 0; height: 16px; color: var(--signal-ink); pointer-events: none; }
.dim::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transform: scaleX(var(--d, 0)); }
.dim__tick { position: absolute; top: 0; width: 1px; height: 16px; background: currentColor; }
.dim__tick--l { left: 0; }
.dim__tick--r { right: 0; }
.dim__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0 8px; background: var(--paper); font: 500 0.75rem/1 var(--f-mono); white-space: nowrap; }
.rm .dim { --d: 1; }

/* ---------- En-tête de section ---------- */
.sec { padding-block: var(--section); }
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: end; margin-bottom: clamp(32px, 6vh, 64px); }
.sec-head__rule { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: clamp(8px, 2.5vh, 24px); border-bottom: 1px solid var(--ink); }
.sec-head__rule .label { margin: 0; }
.sec-head .h2 { grid-column: 1 / span 7; }
.sec-head__aside { grid-column: 9 / span 4; margin: 0; }
.night .sec-head__rule { border-bottom-color: var(--night-line); }
@media (max-width: 960px) { .sec-head .h2, .sec-head__aside { grid-column: 1 / -1; } }

/* ---------- Fiche situation ---------- */
.sit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; list-style: none; margin: 0; padding: 0; }
.sit { display: grid; gap: 10px; align-content: start; min-height: 190px; padding: 20px; background: var(--white); }
.sit:hover::after { inset: -2px; --t: var(--signal); }
.sit .label { display: flex; justify-content: space-between; }
.sit p { margin: 0; color: var(--ink-2); }
.sit-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .sit-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .sit-grid, .sit-grid--4 { grid-template-columns: 1fr; gap: 20px; } .sit { min-height: 0; } }

/* ---------- Ligne service ---------- */
.svc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.svc-row { position: relative; isolation: isolate; display: grid; grid-template-columns: 56px minmax(0, 1.05fr) minmax(0, 1fr) 48px; gap: 8px var(--gap); align-items: center; padding: 28px 16px; border-bottom: 1px solid var(--ink); }
.svc-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--white); transform: scaleY(0); transform-origin: bottom; transition: transform 0.6s var(--ease-snap); }
.svc-row:hover::before { transform: scaleY(1); }
.svc-row__n { font: 500 0.75rem var(--f-mono); color: var(--ink-3); }
.svc-row__head { display: grid; gap: 6px; }
.svc-row__t { font-weight: 600; font-size: clamp(1.375rem, 1rem + 1.3vw, 2.25rem); line-height: 1.05; letter-spacing: -0.025em; font-variation-settings: "wdth" 100; transition: font-variation-settings 0.7s var(--ease-out); }
.svc-row:hover .svc-row__t { font-variation-settings: "wdth" 114; }
.svc-row__route { font: 500 0.6875rem var(--f-mono); color: var(--signal-ink); opacity: 0; transform: translateX(-8px); transition: opacity 0.4s, transform 0.6s var(--ease-snap); }
.svc-row:hover .svc-row__route, .svc-row:focus-visible .svc-row__route { opacity: 1; transform: none; }
.svc-row__d { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.svc-row__go { justify-self: end; display: grid; place-items: center; width: 48px; height: 48px; box-shadow: inset 0 0 0 1px var(--ink); transition: background-color 0.4s, color 0.4s; }
.svc-row__go svg { width: 16px; height: 16px; transition: transform 0.6s var(--ease-snap); }
.svc-row:hover .svc-row__go { background: var(--ink); color: var(--white); }
.svc-row:hover .svc-row__go svg { transform: translateX(3px); }
.svc-group + .svc-group { margin-top: clamp(32px, 6vh, 56px); }
.svc-group__t { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 12px; padding-inline: 16px; color: var(--signal-ink); }
@media (max-width: 760px) {
  .svc-row { grid-template-columns: 32px minmax(0, 1fr) 40px; padding: 22px 0; }
  .svc-row__d { grid-column: 2 / 3; }
  .svc-row__go { grid-row: 1; grid-column: 3; width: 40px; height: 40px; }
  .svc-row__route { display: none; }
  .svc-group__t { padding-inline: 0; }
}

/* ---------- Schémas filaires (règles, réalisations) ---------- */
.wf .sheet { fill: var(--white); stroke: var(--ink); stroke-width: 1.5; }
.wf .ink { fill: var(--ink); }
.wf .mid { fill: var(--ink-3); }
.wf .mute { fill: var(--line); }
.wf .sig { fill: var(--signal); }
.wf .line { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.wf .sig-line { fill: none; stroke: var(--signal); stroke-width: 2; }
.wf .ok-line { fill: none; stroke: var(--ok); stroke-width: 1.5; }
.wf .no-line { fill: none; stroke: var(--friction); stroke-width: 2; }
.wf .ghost { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 4 4; }
.wf .hatch { fill: url(#hatch); stroke: var(--ink); stroke-width: 1.5; }
.wf .draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.wf text { font: 500 10px var(--f-mono); fill: var(--ink-2); }
.wf text.t-ink { fill: var(--ink); }
.wf text.t-sig { fill: var(--signal-ink); }
.wf text.t-inv { fill: var(--white); }
.wf text.t-ok { fill: var(--ok); }
.wf text.t-mute { fill: var(--ink-3); }
.wf .blink { animation: blink 1s steps(2, jump-none) infinite; }

/* ---------- Règle (position sur l'IA) ---------- */
.rule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; list-style: none; margin: 0; padding: 7px; }
.rule { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 26px; background: var(--white); }
.rule__fig { margin: 0 0 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.rule__fig svg { width: 100%; height: auto; overflow: visible; }
.rule p { margin: 0; color: var(--ink-2); }
@media (max-width: 960px) { .rule-grid { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Carte réalisation ---------- */
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.work-card { display: flex; flex-direction: column; gap: 14px; padding: 14px 14px 22px; background: var(--white); border: 1px solid var(--ink); transition: transform 0.5s var(--ease-snap), box-shadow 0.5s var(--ease-snap); }
.work-card:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--signal); }
.work-card[hidden] { display: none; }
.work-card[data-group="labo"] { border-style: dashed; } /* le Labo : un outil interne, pas un projet client */
.work-card__fig { position: relative; margin: 0 0 4px; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line); }
.work-card__fig svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.work-card__fig figcaption { position: absolute; left: 8px; bottom: 6px; font: 500 0.625rem/1 var(--f-mono); color: var(--ink-3); }
.work-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.work-card p { margin: 0; color: var(--ink-2); flex: 1; }
@media (max-width: 960px) { .work-grid { grid-template-columns: 1fr; } }

/* ---------- Outil du Labo ---------- */
.tool { display: flex; flex-direction: column; min-height: 230px; background: var(--white); border: 1px solid var(--ink); }
.tool__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 8px; min-height: 36px; padding: 6px 10px; border-bottom: 1px solid var(--ink); font: 500 0.75rem/1.2 var(--f-mono); }
.tool__body { flex: 1; display: grid; align-content: start; gap: 6px; padding: 14px; font: 400 0.75rem/1.5 var(--f-mono); color: var(--ink-2); }
.tool__line { min-height: 1.5em; }
.tool__line:first-child { color: var(--ink); }
.tool__foot { padding: 12px 14px; border-top: 1px solid var(--line); font-size: 0.875rem; line-height: 1.4; }
.tool__btns { display: flex; gap: 6px; margin-top: 6px; }
.tool__btns span { padding: 4px 8px; box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.tool__btns span:first-child { background: var(--ink); color: var(--white); }
.tool__wave { display: flex; align-items: center; gap: 3px; height: 44px; margin-bottom: 6px; }
.tool__wave i { flex: 1; height: 100%; background: var(--ink); transform-origin: center; animation: wave 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.13s); }
@keyframes wave { from { transform: scaleY(0.12); } to { transform: scaleY(1); } }
.kw { padding: 0 1px; animation: karaoke 4.8s steps(1, end) infinite; animation-delay: calc(var(--i) * 0.4s); }
@keyframes karaoke { 0% { background: rgba(0, 150, 186, 0.22); color: var(--ink); } 8.33% { background: transparent; color: var(--ink-2); } }
.status { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.status b { font-weight: 500; color: var(--ink); }
.status em { font-style: normal; color: var(--ok); }
.status em.wait { color: var(--signal-ink); animation: blink 1.4s steps(2, jump-none) infinite; }

/* ---------- Questions fréquentes ---------- */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; cursor: pointer; font: 600 clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem)/1.3 var(--f-sans); letter-spacing: -0.01em; transition: color 0.3s; }
.faq summary:hover { color: var(--signal-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; font: 500 0.875rem var(--f-mono); font-style: normal; color: var(--signal-ink); }
.faq summary i::before { content: "[+]"; }
.faq details[open] summary i::before { content: "[−]"; }
.faq details p { margin: 0; padding-bottom: 22px; overflow: hidden; color: var(--ink-2); max-width: 62ch; }
.faq details p a { color: var(--signal-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Champs ---------- */
.field { display: grid; gap: 6px; max-width: 460px; }
.field__label { font: 500 0.75rem var(--f-mono); color: var(--ink-2); }
.field__input { width: 100%; height: 48px; padding: 0 12px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--white); font: inherit; color: var(--ink); outline: none; transition: box-shadow 0.4s var(--ease-snap); }
textarea.field__input { height: auto; min-height: 120px; padding: 12px; resize: vertical; }
select.field__input { appearance: none; padding-right: 36px; background: var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M1.5 3.5 5 7l3.5-3.5' fill='none' stroke='%230D1417' stroke-width='1.4'/></svg>") no-repeat right 12px center / 10px; }
.field__input:focus, .field__input.is-focus { box-shadow: 5px 5px 0 var(--signal); }
.field__hint { margin: 0; font-size: 0.8125rem; color: var(--ink-2); }
.field--error .field__input { border-color: var(--friction); box-shadow: 5px 5px 0 rgba(180, 71, 31, 0.25); }
.field--error .field__hint { color: var(--friction); }
.field__input:disabled { background: var(--paper-2); border-color: var(--line-strong); color: var(--ink-3); cursor: not-allowed; }

/* ---------- Ticket (appel final) ---------- */
.ticket { display: flex; flex-direction: column; background: var(--paper); border: 1px dashed var(--ink); }
.ticket__head { display: flex; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px dashed var(--ink); }
.ticket__row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 14px 16px; border-bottom: 1px solid var(--line); font-weight: 500; }
.ticket__row:last-child { border-bottom: 0; }
.ticket__row i { font: 600 0.875rem var(--f-mono); font-style: normal; color: var(--signal-ink); }
.ticket__row i.no { color: var(--friction); }

/* ---------- Portrait en attente : hachures et légende « à fournir », jamais de photo d'illustration ---------- */
.portrait { position: relative; margin: 7px; aspect-ratio: 4 / 5; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--ink-2); font-size: 0.875rem; background: repeating-linear-gradient(45deg, transparent 0 11px, var(--line) 11px 12px), var(--white); border: 1px solid var(--ink); }
.portrait figcaption { position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; justify-content: space-between; gap: 8px; text-align: left; }

/* ---------- Encadré (de la part de…, notre règle…) ---------- */
.callout { margin: 0; padding: 14px 18px; background: var(--white); box-shadow: inset 3px 0 0 var(--signal); color: var(--ink-2); }
.callout .label { display: block; margin-bottom: 4px; color: var(--signal-ink); }
.callout b { color: var(--ink); font-weight: 600; }

/* ---------- Liste cochée (engagements, garanties) ---------- */
.checklist { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.checklist li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.checklist li::before { content: "✓"; font: 600 0.875rem/1.7 var(--f-mono); color: var(--signal-ink); }
.checklist b { color: var(--ink); font-weight: 600; }
.checklist a { color: var(--signal-ink); text-decoration: underline; text-underline-offset: 3px; }
.checklist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
@media (max-width: 760px) { .checklist--2 { grid-template-columns: 1fr; } }

/* ---------- Fiche technique : libellé / valeur ---------- */
.spec { margin: 0; border-top: 1px solid var(--ink); }
.spec > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px var(--gap); padding: 14px 0; border-bottom: 1px solid var(--line); }
.spec dt { font: 500 var(--t-label)/1.6 var(--f-mono); color: var(--ink-2); }
.spec dd { margin: 0; }
.spec a:not(.link-arrow) { color: var(--signal-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .spec > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Cartouche : le bloc d'identification d'un plan technique ---------- */
.cartouche { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 1px; background: var(--white); outline: 1.5px solid var(--ink); outline-offset: -1px; box-shadow: var(--hard-shadow) var(--shadow-soft); }
.cartouche > div { display: grid; align-content: start; gap: 6px; min-height: 84px; padding: 12px 14px; background: var(--white); box-shadow: 0 0 0 1px var(--ink); }
.cartouche dt { font: 500 0.625rem/1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.cartouche dd { margin: 0; font-weight: 500; line-height: 1.4; }
.cartouche dd a { color: var(--signal-ink); }
.cartouche__id { grid-row: span 2; align-content: space-between !important; }
.cartouche__id img { width: 44px; height: auto; }
.cartouche__wide { grid-column: span 2; }
.cartouche__full { grid-column: 1 / -1; min-height: 0 !important; }
@media (max-width: 760px) { .cartouche { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cartouche__id { grid-row: auto; grid-column: 1 / -1; } }

/* ---------- Nomenclature : formats et tarifs ---------- */
.nomen + .nomen { margin-top: clamp(32px, 5vh, 48px); }
.nomen__t { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 10px; color: var(--signal-ink); }
.nomen__table { width: 100%; border-collapse: collapse; border: 1px solid var(--ink); background: var(--white); }
.nomen__table th { padding: 9px 14px; border-bottom: 1px solid var(--ink); background: var(--paper); font: 500 0.625rem/1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; text-align: left; color: var(--ink-2); }
.nomen__table td { padding: 16px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.nomen__table tr:last-child td { border-bottom: 0; }
.nomen__table tbody tr { transition: background-color 0.3s; }
.nomen__table tbody tr:hover { background: color-mix(in srgb, var(--signal) 6%, var(--white)); }
.nomen__rep { width: 56px; font: 500 0.75rem/1.9 var(--f-mono); color: var(--signal-ink); }
.nomen__name { width: 30%; font-weight: 600; line-height: 1.35; }
.nomen__name em { display: block; font-style: normal; font-weight: 400; font-size: 0.8125rem; color: var(--ink-2); }
.nomen__for { color: var(--ink-2); }
.nomen__price { width: 30%; text-align: right; }
.nomen__price small { display: block; font: 500 0.6875rem/1.4 var(--f-mono); color: var(--ink-3); }
.nomen__price b { display: block; font-weight: 650; font-size: 1.25rem; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.nomen__price span { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--ink-2); }
@media (max-width: 760px) {
  .nomen__table, .nomen__table tbody, .nomen__table tr, .nomen__table td { display: block; width: auto; }
  .nomen__table thead { display: none; }
  .nomen__table tr { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 8px; padding: 14px; border-bottom: 1px solid var(--line); }
  .nomen__table tr:last-child { border-bottom: 0; }
  .nomen__table td { padding: 0; border: 0; }
  .nomen__rep { grid-row: span 3; line-height: 1.5; }
  .nomen__price { text-align: left; margin-top: 6px; }
}

/* ---------- Objectif ou mesuré (règle éditoriale n° 2) ----------
   Un objectif est tracé en pointillé ; un résultat mesuré en trait plein, avec sa source ; tant qu'il n'y a pas de mesure, la case reste hachurée. */
.outcome { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 7px; list-style: none; }
.outcome__slot { display: grid; align-content: start; gap: 12px; min-height: 180px; padding: 22px 24px 26px; background: var(--white); }
.outcome__slot > .label { display: flex; justify-content: space-between; gap: 12px; margin: 0; }
.outcome__slot > .label b { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); }
.outcome__slot > .label b::before { content: ""; width: 8px; height: 8px; }
.outcome__slot p { margin: 0; }
.outcome__text { font-size: var(--t-lead); line-height: 1.5; }
.outcome__slot--goal { border: 1px dashed var(--ink); }
.outcome__slot--goal > .label b::before { box-shadow: inset 0 0 0 1.5px var(--signal-ink); }
.outcome__slot--measured { border: 1px solid var(--ink); box-shadow: var(--hard-shadow) var(--shadow-soft); }
.outcome__slot--measured > .label b::before { background: var(--ok); }
.outcome__slot--pending { border: 1px solid var(--line-strong); background: repeating-linear-gradient(45deg, transparent 0 11px, var(--line) 11px 12px), var(--white); }
.outcome__slot--pending > .label b::before { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.outcome__slot--pending .outcome__text { color: var(--ink-2); }
@media (max-width: 760px) { .outcome { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- Constats en liste : ce qui coince, numéroté en rouge (services « Vous vous reconnaissez ? », fiche BTP) ----------
   .pains--who : la même liste pour dire à qui s'adresse une offre (numéros en bleu) */
.pains { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); counter-reset: pain; }
.pains li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); counter-increment: pain; font-size: 1.125rem; line-height: 1.45; }
.pains li::before { content: "0" counter(pain); font: 500 0.75rem/2.2 var(--f-mono); color: var(--friction); }
.pains b { font-weight: 600; }
.pains--who li::before { color: var(--signal-ink); }

/* ---------- Jalons : où en est un projet (fait, prochaine étape, ensuite) ----------
   Le trait se trace jusqu'à la prochaine étape (--f, de 0 à 1) ; ce qui est fait est plein, la prochaine étape clignote, la suite reste en pointillé.
   Verticaux sous 760 px. */
.jalons { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0 var(--gap); margin: 0; padding: 34px 0 0; list-style: none; }
.jalons::before, .jalons::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; }
.jalons::before { background: repeating-linear-gradient(90deg, var(--line-strong) 0 5px, transparent 5px 10px); }
.jalons::after { right: auto; width: calc(var(--reach, 50%) * var(--f, 1)); height: 2px; top: 4.5px; background: var(--signal); }
.jalon { position: relative; display: grid; gap: 10px; align-content: start; padding-right: var(--gap); }
.jalon::before { content: ""; position: absolute; left: 0; top: -34px; width: 11px; height: 11px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.jalon p { margin: 0; color: var(--ink-2); }
.jalon .jalon__when { font: 500 var(--t-label)/1.35 var(--f-mono); color: var(--ink-3); }
.jalon.is-done::before { background: var(--ok); box-shadow: none; }
.jalon.is-done .jalon__when { color: var(--ok); }
.jalon.is-done p:last-child { color: var(--ink); }
.jalon.is-next::before { background: var(--signal); box-shadow: 0 0 0 4px rgba(0, 150, 186, 0.18); animation: blink 1.4s steps(2, jump-none) infinite; }
.jalon.is-next .jalon__when { color: var(--signal-ink); }
.jalon.is-next p:last-child { color: var(--ink); font-size: var(--t-lead); line-height: 1.45; }
.jalons__foot { margin: clamp(24px, 4vh, 40px) 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-2); }
@media (max-width: 760px) {
  .jalons { grid-template-columns: 1fr; gap: 28px; padding: 0 0 0 30px; }
  .jalons::before, .jalons::after { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .jalons::before { background: repeating-linear-gradient(180deg, var(--line-strong) 0 5px, transparent 5px 10px); }
  .jalons::after { left: 4.5px; width: 2px; bottom: auto; height: calc(var(--reach, 50%) * var(--f, 1)); }
  .jalon::before { left: -30px; top: 3px; }
}

/* ---------- Volets numérotés : un travail en plusieurs étapes ou une offre en plusieurs volets ----------
   (fiches artisan et observatoire, collectivités). .parts--stack : titre et texte l'un sous l'autre, pour une demi-largeur */
.parts { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); counter-reset: part; }
.part { display: grid; grid-template-columns: 90px minmax(0, 5fr) minmax(0, 7fr); gap: 16px var(--gap); padding: 28px 0; border-bottom: 1px solid var(--line); counter-increment: part; }
.part::before { content: "0" counter(part); font: 200 3rem/0.85 var(--f-sans); font-variation-settings: "wdth" 62; letter-spacing: -0.03em; color: var(--signal-ink); }
.part__head { display: grid; gap: 10px; align-content: start; }
.part__head .h3 { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); }
.part__head .tag { justify-self: start; }
.part__body { display: grid; gap: 16px; align-content: start; }
.part__body > p { margin: 0; color: var(--ink-2); }
.part__body > p:first-child { color: var(--ink); }
.part--wip { opacity: 1; }
.part--wip::before { color: var(--ink-3); }
.parts--stack .part { grid-template-columns: 72px minmax(0, 1fr); }
.parts--stack .part__body { grid-column: 2; }
@media (max-width: 860px) { .part, .parts--stack .part { grid-template-columns: 56px minmax(0, 1fr); } .part__body { grid-column: 2; } .part::before { font-size: 2.25rem; } }

/* ---------- Paliers : une démarche qui monte d'une marche à la fois ----------
   Chaque palier part plus haut que le précédent (--step), les bas sont alignés : la silhouette dessine l'escalier.
   .palier--run : ce qui continue dans la durée (trait supérieur en pointillé, flèche). */
.paliers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--ink); }
.palier { position: relative; display: grid; align-content: start; gap: 12px; margin-top: calc(var(--step, 0) * clamp(32px, 6vh, 64px)); padding: 22px clamp(18px, 2vw, 28px) 28px; background: var(--white); border-top: 2px solid var(--ink); }
.palier + .palier { border-left: 1px solid var(--ink); }
.palier:nth-child(1) { --step: 2; }
.palier:nth-child(2) { --step: 1; }
.palier__n { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 200 3.5rem/0.85 var(--f-sans); font-variation-settings: "wdth" 62; letter-spacing: -0.03em; color: var(--signal-ink); }
.palier__n small { font: 500 var(--t-label)/1.35 var(--f-mono); letter-spacing: 0.01em; color: var(--ink-2); }
.palier .h3 { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); }
.palier p { margin: 0; color: var(--ink-2); }
.palier--run { border-top: 2px dashed var(--ink); background: color-mix(in srgb, var(--white) 70%, transparent); }
.palier--run::after { content: ""; position: absolute; right: -1px; top: -7px; width: 12px; height: 12px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg); }
@media (max-width: 860px) {
  .paliers { grid-template-columns: 1fr; gap: 12px; border-bottom: 0; }
  .palier { margin-top: 0; }
  .palier + .palier { border-left: 0; }
}

/* ---------- Encadré de nuit : un titre à gauche, une liste à droite (sous le capot, quand nous déconseillons l'IA…) ---------- */
.capot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px var(--gap); padding: clamp(28px, 4vw, 56px); }
.capot__head { grid-column: 1 / span 4; display: grid; gap: 16px; align-content: start; }
.capot__head .label { margin: 0; color: var(--glint); }
.capot__head .h2 { font-size: clamp(1.75rem, 1rem + 2vw, 3rem); color: var(--on-night); }
.capot__head p:not(.label) { margin: 0; color: var(--on-night-2); }
.capot__list { grid-column: 6 / span 7; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--night-line); }
.capot__list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--night-line); color: var(--on-night-2); }
.capot__list li::before { content: "→"; font: 500 0.875rem/1.7 var(--f-mono); color: var(--glint); }
.capot__list b { font-weight: 600; color: var(--on-night); }
.capot__list--no li::before { content: "✕"; color: #F0A585; }
/* Titre long : le titre sur toute la largeur, la liste en deux colonnes dessous */
.capot--stack .capot__head { grid-column: 1 / span 9; }
.capot--stack .capot__list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
@media (max-width: 760px) { .capot--stack .capot__list { grid-template-columns: 1fr; } }
.capot__body { grid-column: 6 / span 7; display: grid; gap: 18px; align-content: start; }
.capot__body p { margin: 0; color: var(--on-night-2); }
.capot__body .lead { color: var(--on-night); }
@media (max-width: 960px) { .capot__head, .capot__list, .capot__body { grid-column: 1 / -1; } }

/* ---------- Figure de démonstration (maquette, jamais de vraies données) ---------- */
.demo { margin: 0; }
.demo figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }

/* ---------- Note d'arbitrage d'une page (observatoire, collectivités) ---------- */
.note { position: relative; display: grid; gap: 16px; padding: clamp(18px, 3vw, 32px); background: var(--white); border: 1px solid var(--ink); box-shadow: var(--hard-shadow) var(--shadow-soft); }
.note__top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.note__top .label { margin: 0; }
.note__q { margin: 0; font-weight: 600; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); line-height: 1.25; letter-spacing: -0.015em; }
.note__figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.note__figs li { display: grid; gap: 4px; align-content: start; padding: 12px; border: 1px solid var(--line); }
.note__figs b { font-weight: 650; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.note__figs span { font-size: 0.8125rem; color: var(--ink-2); }
.note__figs sup, .note__src { font: 500 0.6875rem var(--f-mono); color: var(--signal-ink); }
.note__chart { display: grid; gap: 6px; }
.note__bar { display: grid; grid-template-columns: 150px minmax(0, 1fr) 48px; gap: 10px; align-items: center; font-size: 0.8125rem; color: var(--ink-2); }
.note__bar i { height: 12px; background: var(--ink-3); transform-origin: left; width: calc(var(--v) * 1%); }
.note__bar.is-us i { background: var(--signal); }
.note__bar b { font: 500 0.75rem var(--f-mono); color: var(--ink); text-align: right; }
.note__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.note__cols p { margin: 0; font-size: 0.875rem; color: var(--ink-2); }
.note__cols .label { display: block; margin-bottom: 4px; }
@media (max-width: 600px) { .note__figs, .note__cols { grid-template-columns: 1fr; } .note__bar { grid-template-columns: 100px minmax(0, 1fr) 40px; } }

/* ---------- Surlignage (un mot par page) ----------
   Fond peint ligne par ligne (box-decoration-break) : tient aussi sur un groupe de mots coupé en fin de ligne */
mark.hl { padding-inline: 0.06em; margin-inline: -0.06em; color: inherit; background: linear-gradient(var(--signal), var(--signal)) no-repeat 0 100% / calc(var(--m, 0) * 100%) 88%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: color 0.5s var(--ease-snap) 0.2s; }
mark.hl.is-on, .rm mark.hl { color: var(--white); }
.rm mark.hl { --m: 1; }

/* ---------- Questions fréquentes (mise en page) ---------- */
.faq-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.faq-wrap__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--nav-h) + 40px); display: grid; gap: 20px; }
.faq-wrap .faq { grid-column: 6 / span 7; }
@media (max-width: 960px) { .faq-wrap__head, .faq-wrap .faq { grid-column: 1 / -1; } .faq-wrap__head { position: static; } }

/* ---------- Appel final ---------- */
.cta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--gap); padding: clamp(24px, 4vw, 56px); background: var(--white); border: 1px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); }
.cta__main { grid-column: 1 / span 7; display: grid; gap: 24px; align-content: start; }
.cta--solo .cta__main { grid-column: 1 / span 9; }
.cta__title { margin: 0; font-weight: 650; font-size: clamp(2rem, 1rem + 3.2vw, 4.25rem); line-height: 0.98; letter-spacing: -0.035em; }
.cta__title .char { font-variation-settings: "wdth" var(--w, 100); }
.cta__text { margin: 0; max-width: 52ch; color: var(--ink-2); font-size: var(--t-lead); line-height: 1.55; }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.cta .ticket { grid-column: 9 / span 4; align-self: end; }
@media (max-width: 960px) { .cta__main, .cta--solo .cta__main, .cta .ticket { grid-column: 1 / -1; } .cta { box-shadow: 6px 6px 0 var(--ink); } }

/* ---------- Pied de page ---------- */
.footer { overflow: hidden; background: var(--ink-fixed); color: var(--paper-fixed); padding-top: clamp(64px, 10vh, 120px); }
.footer .label { color: #9AA6A7; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 32px var(--gap); padding-bottom: 48px; border-bottom: 1px solid rgba(241, 243, 242, 0.16); }
.footer__col { display: grid; gap: 14px; align-content: start; }
.footer__col p { margin: 0; color: #C3CCCC; max-width: 36ch; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: #C3CCCC; }
.footer a:not(.btn) { color: #DDE3E3; transition: color 0.3s; }
.footer a:not(.btn):hover { color: var(--glint); }
.footer__inline { display: flex; gap: 16px; flex-wrap: wrap; }
.footer__word { overflow: hidden; padding-top: clamp(32px, 6vh, 64px); }
.footer__word img { width: 100%; height: auto; }
.footer__legal { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-block: 20px 88px; font-size: 0.8125rem; color: #9AA6A7; }
@media (max-width: 960px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__cookies { padding: 0; border: 0; background: none; font: inherit; color: #DDE3E3; cursor: pointer; transition: color 0.3s; }
.footer__cookies:hover { color: var(--glint); }

/* ---------- Mesure d'audience : bandeau de consentement (consentement.js) ----------
   Seulement si la mesure est configurée. « Refuser » et « Accepter » ont le même poids. */
.consent { position: fixed; left: var(--gutter); right: var(--gutter); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; display: grid; gap: 14px; max-width: 560px; margin-inline: auto; padding: 18px 18px 16px; background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink), 8px 8px 0 var(--shadow-soft, rgba(13, 20, 23, 0.12)); }
.consent[hidden] { display: none; }
.consent__text { margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); }
.consent__text b { font-weight: 600; color: var(--ink); }
.consent__text a { color: var(--signal-ink); text-decoration: underline; text-underline-offset: 3px; }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.consent__actions .btn { justify-content: center; }
.mnav-open .consent { visibility: hidden; }

/* ---------- Thème clair / sombre ----------
   Le bouton vit dans l'en-tête (≥ 640 px) ou en bas du menu mobile ; les jetons changent dans tokens.css. */
.nav__theme { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px currentColor; transition: background-color 0.3s, color 0.3s; }
.nav__theme svg { width: 18px; height: 18px; transition: transform 0.7s var(--ease-snap); }
.nav__theme:hover { background: var(--ink); color: var(--white); }
.nav__theme:hover svg { transform: rotate(180deg); }
.nav.is-dark .nav__theme:hover { background: var(--on-night); color: var(--night); }
.mnav__theme { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 12px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.mnav__theme svg { width: 16px; height: 16px; flex: none; }
.mnav__theme span { flex: 1; text-align: left; }
.mnav__theme em { font-style: normal; color: var(--ink-2); }
.mnav__theme[aria-pressed="true"] em { color: var(--signal-ink); }
@media (max-width: 639px) { .nav__theme { display: none; } }
@media (min-width: 640px) { .mnav__theme { display: none; } }

:root[data-theme="dark"] .nav__word--dark { display: none; }
:root[data-theme="dark"] .nav__word--light { display: block; }
:root[data-theme="dark"] select.field__input { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M1.5 3.5 5 7l3.5-3.5' fill='none' stroke='%23EEF3F2' stroke-width='1.4'/></svg>"); }
:root[data-theme="dark"] .cta { box-shadow: 10px 10px 0 var(--signal); }
@media (max-width: 960px) { :root[data-theme="dark"] .cta { box-shadow: 6px 6px 0 var(--signal); } }
:root[data-theme="dark"] .footer { border-top: 1px solid var(--line); }
.preloader__word--light { display: none; }
:root[data-theme="dark"] .preloader__word--dark { display: none; }
:root[data-theme="dark"] .preloader__word--light { display: block; }