/* ============================================================
   site-chrome.css — en-tête, pied de page et colonne Contact
   (refonte 2026-10-11). Chargée après site-v3.css / site-motion.css.
   Interactions : assets/js/site-motion.js (indicateur de menu, heure
   locale, copier l'e-mail, logotype, mini-carte). Règle de la DA :
   pas de bordure sur les boutons — fonds, ombres et mouvement.
   ============================================================ */

body.ng-site:not(.ng-admin) {
  --ch-ease: cubic-bezier(.16, 1, .3, 1);
  --ch-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ══ 1. En-tête ═══════════════════════════════════════════ */
/* Avatar + pastille « en ligne » */
.hd-avatar { position: relative; display: inline-flex; flex: none; }
.hd-avatar img { transition: transform .5s var(--ch-spring); }
.ng-navbrand:hover .hd-avatar img { transform: rotate(-6deg) scale(1.06); }
.hd-avatar i { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2.5px var(--v3-s1, #fff); }
.hd-avatar i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #22c55e; animation: hdPing 2.4s var(--ch-ease) infinite; }
@keyframes hdPing { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.6); opacity: 0; } }

/* Liens : un seul fond qui glisse d'un lien à l'autre (positionné en JS) */
.hd-links { position: relative; isolation: isolate; }
.hd-ind { position: absolute; z-index: -1; top: 50%; left: 0; height: 40px; width: 0; border-radius: 999px; background: var(--ng-inner-hover); opacity: 0; pointer-events: none;
  transform: translate(var(--x, 0), -50%); transition: transform .45s var(--ch-ease), width .45s var(--ch-ease), opacity .25s ease; }
.hd-links.has-ind .hd-ind { opacity: 1; }
body.ng-site:not(.ng-admin) .hd-links.js-ind .ng-navlink,
body.ng-site:not(.ng-admin) .hd-links.js-ind .ng-navlink:hover,
body.ng-site:not(.ng-admin) .hd-links.js-ind .ng-navlink.active { background: transparent; }
body.ng-site:not(.ng-admin) .ng-navlink { transition: color .25s ease; }
body.ng-site:not(.ng-admin) .ng-navlink.active { color: var(--ng-heading); }
/* Point sous la page active */
body.ng-site:not(.ng-admin) .hd-links .ng-navlink.active { position: relative; }
body.ng-site:not(.ng-admin) .hd-links .ng-navlink.active::before { content: ''; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--v3-blue); }

/* Menu déroulant : fondu + flou + léger zoom, éléments en cascade */
body.ng-site:not(.ng-admin) .ng-navdrop-menu { transform: translateY(-6px) scale(.97); filter: blur(6px); transition: opacity .3s var(--ch-ease), transform .4s var(--ch-ease), filter .3s ease, visibility 0s linear .3s; }
body.ng-site:not(.ng-admin) .ng-navdrop.open .ng-navdrop-menu { transform: none; filter: none; transition: opacity .3s var(--ch-ease), transform .4s var(--ch-ease), filter .3s ease, visibility 0s; }
body.ng-site:not(.ng-admin) .ng-navdrop-item { opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .4s var(--ch-ease), background .2s; }
body.ng-site:not(.ng-admin) .ng-navdrop.open .ng-navdrop-item { opacity: 1; transform: none; }
body.ng-site:not(.ng-admin) .ng-navdrop.open .ng-navdrop-item:nth-child(2) { transition-delay: .04s; }
body.ng-site:not(.ng-admin) .ng-navdrop.open .ng-navdrop-item:nth-child(3) { transition-delay: .08s; }
body.ng-site:not(.ng-admin) .ng-navdrop-item:hover .ng-navdrop-item-icon { transform: translateX(2px); opacity: 1; }

/* Bouton « Me contacter » : l'icône s'envole au survol */
body.ng-site:not(.ng-admin) .ng-navcta { position: relative; overflow: hidden; transition: transform .3s var(--ch-spring), opacity .2s; }
body.ng-site:not(.ng-admin) .ng-navcta:hover { opacity: 1; transform: translateY(-1px); }
body.ng-site:not(.ng-admin) .ng-navcta-icon { transition: transform .45s var(--ch-spring); }
body.ng-site:not(.ng-admin) .ng-navcta:hover .ng-navcta-icon { transform: translate(3px, -3px) rotate(-8deg); }
/* Bascule de thème : l'icône tourne */
body.ng-site:not(.ng-admin) .ng-themebtn [data-theme-icon] { display: inline-flex; transition: transform .6s var(--ch-spring); }
body.ng-site:not(.ng-admin) .ng-themebtn:hover [data-theme-icon] { transform: rotate(40deg); }

/* Au défilement : pilule plus dense, ombre plus marquée */
body.ng-site:not(.ng-admin) .ng-header.ng-header-scrolled .ng-navbar::before,
body.ng-site:not(.ng-admin) .ng-header.ng-header-scrolled .ng-toolpill::before { background: rgba(14,14,17,.86); }
html.light body.ng-site:not(.ng-admin) .ng-header.ng-header-scrolled .ng-navbar::before,
html.light body.ng-site:not(.ng-admin) .ng-header.ng-header-scrolled .ng-toolpill::before { background: rgba(255,255,255,.92); box-shadow: 0 1px 2px rgba(10,10,12,.06), 0 18px 40px -18px rgba(10,10,12,.22); }
body.ng-site:not(.ng-admin) .ng-navbar { transition: padding .4s var(--ch-ease); }
@media (min-width: 1024px) {
  body.ng-site:not(.ng-admin) .ng-header.ng-header-scrolled .ng-navbar { padding-top: 9px; padding-bottom: 9px; }
}

/* ══ 2. Pied de page ══════════════════════════════════════ */
.ft { position: relative; z-index: 1; overflow: hidden; margin-top: 40px; padding-top: clamp(64px, 9vw, 120px); isolation: isolate; }
.ft::before { content: ''; position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(circle at 1px 1px, var(--ft-dot, rgba(10,10,12,.07)) 1px, transparent 0) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
html:not(.light) .ft { --ft-dot: rgba(255,255,255,.06); }
.ft-glow { position: absolute; z-index: -1; left: 0; top: 0; width: 720px; height: 720px; margin: -360px 0 0 -360px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(47,76,240,.12), rgba(139,92,246,.06) 40%, transparent 68%); filter: blur(10px);
  transform: translate3d(var(--gx, 70vw), var(--gy, 140px), 0); transition: transform 1.2s var(--ch-ease); }
html:not(.light) .ft-glow { background: radial-gradient(circle, rgba(77,107,255,.2), rgba(139,92,246,.08) 40%, transparent 68%); }
.ft-inner { position: relative; }

/* Appel à écrire */
.ft-cta { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 80px); align-items: end; padding-bottom: clamp(48px, 7vw, 88px); }
.ft-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; font-family: var(--v3-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ng-t50); }
.ft-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.ft-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #22c55e; animation: hdPing 2.4s var(--ch-ease) infinite; }
.ft-title { margin: 0; font-size: clamp(38px, 6.2vw, 92px); line-height: .98; font-weight: 600; letter-spacing: -.05em; color: var(--ng-heading); max-width: 14ch; }
.ft-title .v3-serif { color: var(--ng-t55); }
.ft-cta-side { display: flex; flex-direction: column; gap: 22px; }
.ft-mail { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 16px; text-decoration: none; color: var(--ng-heading); font-size: clamp(17px, 1.7vw, 22px); font-weight: 500; letter-spacing: -.02em; word-break: break-all; }
.ft-mail::before, .ft-mail::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; }
.ft-mail::before { background: var(--v3-line); }
.ft-mail::after { background: var(--ng-heading); transform: scaleX(0); transform-origin: right; transition: transform .7s var(--ch-ease); }
.ft-mail:hover::after { transform: scaleX(1); transform-origin: left; }
.ft-mail-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--v3-ink); color: var(--v3-ink-fg); transition: transform .5s var(--ch-spring); }
.ft-mail-ico svg { width: 19px; height: 19px; transition: transform .5s var(--ch-spring); }
.ft-mail:hover .ft-mail-ico { transform: rotate(45deg); }
.ft-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ft-copy svg, .ct-copy svg { width: 16px; height: 16px; }
.ft-copy.is-copied, .ct-copy.is-copied { color: #16a34a; }

/* Colonnes */
.ft-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); padding: clamp(40px, 5vw, 56px) 0; box-shadow: 0 -1px 0 var(--v3-line); }
.ft-id { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.ft-id img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; transition: transform .5s var(--ch-spring); }
.ft-id:hover img { transform: rotate(-8deg) scale(1.05); }
.ft-id b { display: block; font-size: 16px; font-weight: 600; color: var(--ng-heading); letter-spacing: -.02em; }
.ft-id small { display: block; font-size: 12.5px; color: var(--ng-t45); }
.ft-bio { margin: 18px 0 20px; max-width: 34ch; font-size: 14px; line-height: 1.65; color: var(--ng-t50); }
.ft-clock { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border-radius: 999px; background: var(--ng-inner); font-size: 13px; color: var(--ng-t60); }
.ft-clock b { color: var(--ng-heading); font-weight: 600; font-variant-numeric: tabular-nums; }
.ft-clock small { font-family: var(--v3-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ng-t40); }
.ft-clock-ico { position: relative; width: 20px; height: 20px; border-radius: 50%; background: var(--v3-s1); box-shadow: inset 0 0 0 1.5px var(--ng-t30); }
.ft-clock-ico i, .ft-clock-ico::before { content: ''; position: absolute; left: 50%; bottom: 50%; width: 1.5px; margin-left: -.75px; border-radius: 2px; background: var(--ng-heading); transform-origin: 50% 100%; }
.ft-clock-ico::before { height: 5px; transform: rotate(var(--h, 0deg)); }
.ft-clock-ico i { height: 7px; transform: rotate(var(--m, 0deg)); transition: transform .6s var(--ch-spring); }
.ft-col h3 { margin: 0 0 16px; font-family: var(--v3-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ng-t40); }
.ft-col .ft-h3-gap { margin-top: 30px; }
.ft-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ft-link { display: inline-flex; align-items: center; gap: 8px; padding: 5px 0; text-decoration: none; color: var(--ng-t60); font-size: 14.5px; transition: color .25s; }
.ft-link span { position: relative; }
.ft-link span::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ch-ease); }
.ft-link i { font-style: normal; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .4s var(--ch-ease); }
.ft-link:hover { color: var(--ng-heading); }
.ft-link:hover span::after { transform: scaleX(1); transform-origin: left; }
.ft-link:hover i { opacity: 1; transform: none; }
.ft-link.is-current { color: var(--ng-heading); font-weight: 500; }
.ft-skills li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; color: var(--ng-t60); }
.ft-skill-ico { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--ng-inner); color: var(--ng-heading); transition: transform .4s var(--ch-spring), background .3s; }
.ft-skill-ico svg { width: 16px; height: 16px; }
.ft-skills li:hover .ft-skill-ico { transform: rotate(-8deg) scale(1.08); background: var(--ng-inner-hover); }
.ft-social { display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 6px; margin: 0 -8px 0 -6px; border-radius: 14px; text-decoration: none; color: var(--ng-t60); font-size: 14.5px; transition: background .25s, color .25s; }
.ft-social-ico { position: relative; width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--ng-inner); color: var(--ng-heading); overflow: hidden; isolation: isolate; transition: color .3s, transform .45s var(--ch-spring); }
.ft-social-ico::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--brand); transform: translateY(101%); transition: transform .45s var(--ch-ease); }
.ft-social-ico svg { width: 16px; height: 16px; }
.ft-social-go { margin-left: auto; width: 16px; height: 16px; opacity: 0; transform: translate(-6px, 6px); transition: opacity .3s, transform .45s var(--ch-ease); }
.ft-social-go svg { width: 100%; height: 100%; }
.ft-social:hover { background: var(--ng-inner); color: var(--ng-heading); }
.ft-social:hover .ft-social-ico { color: #fff; transform: rotate(-6deg); }
.ft-social:hover .ft-social-ico::before { transform: none; }
.ft-social:hover .ft-social-go { opacity: 1; transform: none; }

/* Logotype géant */
.ft-wordmark { display: flex; justify-content: center; padding: 0 2vw; margin-top: clamp(10px, 2vw, 24px); font-size: clamp(56px, 15.5vw, 250px); line-height: .8; font-weight: 600; letter-spacing: -.065em; white-space: nowrap; user-select: none; overflow: hidden; height: .82em; }
.ft-wordmark span { display: inline-block; background: linear-gradient(180deg, var(--ng-heading) 10%, color-mix(in srgb, var(--ng-heading) 0%, transparent) 92%); -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translateY(calc(var(--lift, 0px) * -1)); transition: transform .9s var(--ch-ease); }
html.m-on .ft-wordmark span { transform: translateY(105%); transition: transform 1.1s var(--ch-ease); transition-delay: calc(var(--i) * 35ms); }
html.m-on .ft-wordmark.m-in span { transform: translateY(calc(var(--lift, 0px) * -1)); }
html.m-on .ft-wordmark.m-in.m-done span { transition: transform .6s var(--ch-ease); transition-delay: 0s; }

/* Barre du bas */
.ft-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 22px; padding-bottom: 28px; box-shadow: 0 -1px 0 var(--v3-line); font-size: 12.5px; color: var(--ng-t40); }
.ft-bottom p { margin: 0; }
.ft-sep { margin: 0 4px; }
.ft-underline { color: var(--ng-heading); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ch-ease); }
.ft-underline:hover { background-size: 100% 1px; }
.ft-top { display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border: 0; border-radius: 999px; background: var(--ng-inner); color: var(--ng-heading); font: 500 12.5px/1 var(--v3-font); cursor: pointer; transition: background .25s; }
.ft-top i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--v3-ink); color: var(--v3-ink-fg); overflow: hidden; }
.ft-top svg { width: 14px; height: 14px; }
.ft-top:hover { background: var(--ng-inner-hover); }
.ft-top:hover svg { animation: ftUp .6s var(--ch-ease); }
@keyframes ftUp { 0% { transform: none; } 45% { transform: translateY(-140%); } 46% { transform: translateY(140%); } 100% { transform: none; } }
.ft a:focus-visible, .ft button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(77,107,255,.45); border-radius: 10px; }

@media (max-width: 1024px) {
  .ft-cta { grid-template-columns: 1fr; align-items: start; }
  .ft-grid { grid-template-columns: 1fr 1fr; }
  .ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .ft-grid { grid-template-columns: 1fr; }
  .ft-bottom { flex-direction: column; align-items: flex-start; }
}

/* ══ 3. Contact : coordonnées + mini-carte ════════════════ */
.ct-side { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 3vw, 30px) !important; }
.ct-side-title { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--ng-heading); }
.ct-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ct-link { position: relative; display: flex; align-items: center; border-radius: 16px; background: var(--ng-inner); transition: background .25s, transform .4s var(--ch-ease); }
.ct-link:hover { background: var(--ng-inner-hover); transform: translateX(3px); }
.ct-link-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 12px 14px; text-decoration: none; color: inherit; }
.ct-ico { position: relative; flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; isolation: isolate; background: var(--v3-s1); color: var(--ng-heading); box-shadow: 0 1px 2px rgba(10,10,12,.08); transition: color .3s, transform .5s var(--ch-spring); }
.ct-ico::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--brand); transform: scale(0); border-radius: 50%; transition: transform .5s var(--ch-ease), border-radius .5s; }
.ct-ico svg { width: 19px; height: 19px; }
.ct-link:hover .ct-ico { color: #fff; transform: rotate(-6deg); }
.ct-link:hover .ct-ico::before { transform: scale(1.5); border-radius: 0; }
.ct-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ct-txt b { font-size: 14.5px; font-weight: 600; color: var(--ng-heading); }
.ct-txt small { font-size: 12.5px; color: var(--ng-t50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-go { margin-left: auto; width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--ng-t50); transition: transform .45s var(--ch-spring), color .25s, background .25s; }
.ct-go svg { width: 15px; height: 15px; }
.ct-link:hover .ct-go { transform: rotate(45deg); color: var(--ng-heading); background: var(--v3-s1); }
.ct-copy { flex: none; width: 38px; height: 38px; margin-right: 10px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--v3-s1); color: var(--ng-t60); cursor: pointer; transition: color .25s, transform .3s var(--ch-spring); }
.ct-copy:hover { color: var(--ng-heading); transform: scale(1.06); }
.ct-loc { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--ng-inner); }
.ct-ico-pin { background: var(--v3-ink); color: var(--v3-ink-fg); }
.ct-loc .ct-txt small { order: -1; font-family: var(--v3-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ng-t40); }
.ct-clock { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; background: var(--v3-s1); font-size: 12.5px; color: var(--ng-heading); font-variant-numeric: tabular-nums; }
.ct-clock i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }

.ct-map { --ct-bg: #f3f4f7; --ct-ink: #0a0a0c; --ct-muted: rgba(10,10,12,.45); --ct-line: rgba(10,10,12,.09); --ct-water: #9fb4ff; --ct-tag: #ffffff;
  position: relative; flex: 1; min-height: 230px; border-radius: 20px; overflow: hidden; background: var(--ct-bg); }
html:not(.light) .ct-map { --ct-bg: #0c0d14; --ct-ink: #f5f5f7; --ct-muted: rgba(245,245,247,.5); --ct-line: rgba(255,255,255,.08); --ct-water: #4458c9; --ct-tag: #16161d; }
.ct-map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.ct-dotfill { fill: var(--ct-line); }
.ct-glow-a { stop-color: #2f4cf0; stop-opacity: .14; }
.ct-glow-b { stop-color: #2f4cf0; stop-opacity: 0; }
.ct-layer { transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform .9s var(--ch-ease); }
.ct-topo { fill: none; stroke: var(--ct-line); stroke-width: 1.2; }
.ct-river { fill: none; stroke: var(--ct-water); stroke-width: 5; stroke-linecap: round; opacity: .5; }
.ct-river-label { font: italic 500 10px var(--v3-serif, serif); fill: var(--ct-water); letter-spacing: .1em; }
.ct-route-base { fill: none; stroke: var(--ct-line); stroke-width: 7; stroke-linecap: round; }
.ct-route { fill: none; stroke: url(#ctRoute); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ct-route-flow { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 2 10; opacity: .8; animation: ctFlow 1.2s linear infinite; }
@keyframes ctFlow { to { stroke-dashoffset: -24; } }
.ct-packet { fill: #fff; stroke: #2f4cf0; stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(47,76,240,.8)); }
.ct-city-dot { fill: #8b5cf6; }
.ct-city-ring { fill: none; stroke: #8b5cf6; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ctRing 2.6s var(--ch-ease) infinite; }
@keyframes ctRing { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } }
.ct-pulse { fill: #2f4cf0; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ctPulse 2.6s var(--ch-ease) infinite; }
.ct-pulse-2 { animation-delay: 1.3s; }
@keyframes ctPulse { 0% { transform: scale(.4); opacity: .4; } 100% { transform: scale(2.6); opacity: 0; } }
.ct-pin-body { fill: #2f4cf0; filter: drop-shadow(0 6px 8px rgba(47,76,240,.45)); }
.ct-pin-hole { fill: #fff; }
.ct-tag rect { fill: var(--ct-tag); filter: drop-shadow(0 4px 10px rgba(10,10,12,.14)); }
.ct-tag text { font: 600 11.5px var(--v3-font, sans-serif); fill: var(--ct-ink); letter-spacing: -.01em; }
.ct-tag-main text { font-size: 12.5px; }
.ct-tag-sub { fill: var(--ct-muted); font-weight: 500; }
.ct-hud text { font: 500 9.5px var(--v3-mono, monospace); fill: var(--ct-muted); letter-spacing: .06em; }
.ct-compass { fill: var(--ct-tag); filter: drop-shadow(0 2px 6px rgba(10,10,12,.12)); }
.ct-needle { fill: #2f4cf0; transform-box: fill-box; transform-origin: center; animation: ctNeedle 6s ease-in-out infinite; }
@keyframes ctNeedle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.ct-scale { stroke: var(--ct-muted); stroke-width: 1.4; fill: none; }

/* Entrée en scène (classe posée par site-motion.js quand la carte apparaît) */
html.m-on .ct-map .ct-route { stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ch-ease) .3s; }
html.m-on .ct-map.is-in .ct-route { stroke-dashoffset: 0; }
html.m-on .ct-map .ct-route-flow, html.m-on .ct-map .ct-packet { opacity: 0; transition: opacity .6s ease 1.9s; }
html.m-on .ct-map.is-in .ct-route-flow { opacity: .8; }
html.m-on .ct-map.is-in .ct-packet { opacity: 1; }
html.m-on .ct-map .ct-pin { transform: translateY(-40px); opacity: 0; transition: transform .9s var(--ch-spring) 1.5s, opacity .3s ease 1.5s; }
html.m-on .ct-map.is-in .ct-pin { transform: none; opacity: 1; }
html.m-on .ct-map .ct-tag, html.m-on .ct-map .ct-city-from { opacity: 0; transition: opacity .6s ease .2s; }
html.m-on .ct-map.is-in .ct-tag, html.m-on .ct-map.is-in .ct-city-from { opacity: 1; }
html.m-on .ct-map .ct-tag-main { transition-delay: 2s; }
html.m-on .ct-map .ct-topo { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 2.4s var(--ch-ease); }
html.m-on .ct-map.is-in .ct-topo { stroke-dashoffset: 0; }

/* ══ 4. Mouvement réduit / animations stoppées ════════════ */
@media (prefers-reduced-motion: reduce) {
  .hd-avatar i::after, .ft-dot::after, .ct-city-ring, .ct-pulse, .ct-needle, .ct-route-flow { animation: none; }
  .ct-packet { display: none; }
  .hd-ind, .ft-glow, .ct-layer { transition: none; }
}
body.a11y-stop .hd-avatar i::after, body.a11y-stop .ft-dot::after, body.a11y-stop .ct-city-ring, body.a11y-stop .ct-pulse,
body.a11y-stop .ct-needle, body.a11y-stop .ct-route-flow { animation: none; }
body.a11y-stop .ct-packet { display: none; }
body.a11y-stop .ft-wordmark span { transform: none !important; }