/* ==========================================================================
   dk2art.com — couche « pro »
   Système éditorial : Inter pour la voix, JetBrains Mono pour l'index.
   Grille à filets, en-têtes de section indexés, révélations d'images,
   curseur contextuel, pied de page signature.
   ========================================================================== */

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}

:root {
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --hair: rgba(29, 29, 31, .12);
  --hair-d: rgba(245, 245, 247, .14);
  --night: #0E0E10;
  --night-2: #18181B;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
}

body { font-feature-settings: "ss01", "cv11", "calt"; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- Index typographique (mono) ---------- */
.kicker, .tile__label, .stack__meta, .work-card__meta, .case-split__label, .mono-label,
.sh__meta, .eyebrow, .crumbs, .next-case__label, .hero__rail, .ft__bottom, .lightbox__meta,
.hero__cue, .hdr-avail, .mini-board__title, .steps__n, .svc__tags, .client__sector, .intro__count {
  font-family: var(--mono);
  font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase;
  line-height: 1.5;
}
.svc__tags { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.kicker { color: var(--accent); }
.idx { font-family: var(--mono); font-weight: 500; color: var(--accent); margin-right: .9em; letter-spacing: 0; }
.on-dark .idx, .tile--dark .idx, .ft .idx { color: var(--mint); }
.steps__n { font-size: 12px; padding-top: 5px; }
.client__sector { text-transform: none; font-size: 12.5px; letter-spacing: 0; }

/* ---------- Liens soulignés animés ---------- */
.ul-link {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .6s var(--ease-out), color .2s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.ul-link:hover, .ul-link:focus-visible { background-size: 100% 1px; }
.ul-link .icon { width: 14px; height: 14px; }

/* ---------- En-tête ---------- */
.site-header {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: transform .6s var(--ease-out), background-color .4s ease, box-shadow .4s ease;
}
.site-header.is-scrolled {
  background: rgba(245, 245, 247, .78);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header .progress { background: transparent; }
.nav { box-shadow: 0 0 0 1px var(--hair), 0 8px 24px -12px rgba(0,0,0,.12); }
.hdr-avail { display: inline-flex; align-items: center; gap: 10px; margin-right: 10px; color: var(--muted); font-size: 11px; }
@media (max-width: 1100px) { .hdr-avail { display: none; } }

/* ---------- Héros ---------- */
.hero--pro { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(40px, 6vw, 80px); }
.hero__rail {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--hair);
  margin-bottom: clamp(48px, 8vw, 120px); color: var(--muted);
}
.hero--pro .display {
  font-size: clamp(54px, 11.4vw, 184px);
  letter-spacing: -0.068em; line-height: .9;
}
.hero--pro .hero__title { max-width: none; }
.hero__foot {
  margin-top: clamp(40px, 6vw, 88px);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  padding-top: 18px; border-top: 1px solid var(--hair);
}
.hero__note { font-size: clamp(17px, 1.4vw, 20px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; }
.hero__cue { display: inline-flex; align-items: center; gap: 14px; color: var(--muted); min-height: 44px; }
.hero__cue-line { position: relative; width: 1px; height: 56px; background: var(--hair); overflow: hidden; }
.hero__cue-line::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--ink); animation: cue 2.2s var(--ease-io) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 100% { transform: translateY(260%); } }

/* ---------- En-têtes de section ---------- */
.sh {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  column-gap: clamp(16px, 3vw, 40px); row-gap: 20px;
  padding-top: 18px; border-top: 1px solid var(--hair);
  margin-bottom: clamp(40px, 5.5vw, 80px);
}
.sh__meta { grid-column: 1; color: var(--muted); padding-top: .6em; }
.sh__title { grid-column: 2; }
.sh__link { grid-column: 2; }
.ln-rv { display: block; }
.motion .ln-rv { transform: translate3d(0, 106%, 0); transition: transform 1.4s var(--ease-out) var(--d, 0s); }
.motion .is-in .ln-rv { transform: none; }

/* ---------- Tuiles : finitions ---------- */
.tile { box-shadow: inset 0 0 0 1px rgba(0,0,0,.035); }
.tile--dark, .tile--accent, .brand-tile { box-shadow: none; }
.brand-tile { background: radial-gradient(120% 90% at 100% 0%, #1B2740 0%, #111A2B 55%); }
.brand-tile__mark { letter-spacing: -0.075em; }
.stat { letter-spacing: -0.07em; }

/* ---------- Cartes empilées ---------- */
.stack { box-shadow: 0 -1px 0 rgba(255,255,255,.4) inset, 0 -24px 60px -24px rgba(0,0,0,.18); }
.stack--light { box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), 0 -24px 60px -24px rgba(0,0,0,.14); }
.stack__meta { gap: 18px; }
.stack__title { font-size: clamp(40px, 4.6vw, 68px); letter-spacing: -0.065em; }
.stack__impact { font-size: clamp(18px, 1.5vw, 21px); letter-spacing: -0.02em; }
.stack__visual { cursor: none; }
@media (hover: none), (pointer: coarse) { .stack__visual { cursor: pointer; } }

/* ---------- Révélation d'images ---------- */
.motion .reveal-img, .motion .work-card.rv .work-card__img, .motion .gallery__item.rv, .motion .case-hero__img.rv, .motion .side-project__img.rv {
  clip-path: inset(14% 6% 14% 6% round 28px);
  transition: clip-path 1.6s var(--ease-out), opacity 1.3s var(--ease-out), transform 1.5s var(--ease-out), translate .45s var(--ease), box-shadow .45s var(--ease);
}
.motion .reveal-img img, .motion .work-card.rv .work-card__img img, .motion .gallery__item.rv img, .motion .case-hero__img.rv img, .motion .side-project__img.rv img {
  transform: scale(1.16); transition: transform 2s var(--ease-out);
}
.motion .reveal-img.in, .motion .work-card.rv.in .work-card__img, .motion .gallery__item.rv.in, .motion .case-hero__img.rv.in, .motion .side-project__img.rv.in { clip-path: inset(0 0 0 0 round 22px); }
.motion .reveal-img.in img, .motion .work-card.rv.in .work-card__img img, .motion .gallery__item.rv.in img, .motion .case-hero__img.rv.in img, .motion .side-project__img.rv.in img { transform: none; }
.motion .work-card.rv.in:hover .work-card__img img { transform: scale(1.045); transition-duration: 1s; }
.motion .gallery__item.rv, .motion .case-hero__img.rv, .motion .side-project__img.rv { opacity: 1; transform: none; }

/* ---------- Cartes de réalisations ---------- */
.work-card { box-shadow: inset 0 0 0 1px rgba(0,0,0,.035); }
.work-card__title { font-size: 18px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.25; }
.work-card__meta { color: var(--muted); }

/* ---------- Défilement des références ---------- */
.marquee { letter-spacing: -0.07em; }
.marquee--2 { color: transparent; -webkit-text-stroke: 1.5px #B0B0B5; }
@supports not (-webkit-text-stroke: 1px black) { .marquee--2 { color: #B0B0B5; } }

/* ---------- Étude de cas ---------- */
.case-split { border-top: 1px solid var(--hair); padding-top: 18px; }
.case-split__label { color: var(--muted); font-weight: 500; }
.crumbs { margin-bottom: 32px; }
.crumbs a { transition: color .2s ease; }
.next-case { background: var(--night); position: relative; overflow: hidden; isolation: isolate; }
.next-case::after {
  content: ""; position: absolute; right: -8%; bottom: -60%; width: 46%; aspect-ratio: 1; border-radius: 999px;
  background: radial-gradient(closest-side, rgba(100,210,195,.32), rgba(100,210,195,0)); z-index: -1;
  transition: transform 1.2s var(--ease-out);
}
.next-case:hover::after { transform: scale(1.25); }
.meta-grid dt { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .02em; }

/* ---------- Curseur contextuel ---------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor {
    display: block; position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
    width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 999px;
    background: var(--ink); color: #fff;
    display: flex; align-items: center; justify-content: center;
    transform: translate3d(-200px, -200px, 0) scale(0);
    transition: scale .45s var(--ease-out), background-color .3s ease;
    scale: 0;
  }
  .cursor.is-on { scale: 1; }
  .cursor__label { font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; text-align: center; line-height: 1.2; padding: 0 10px; }
  [data-cursor] { cursor: none; }
}

/* ---------- Pied de page signature ---------- */
.site-footer { display: none; }
.ft {
  margin-top: var(--section); background: var(--night); color: var(--on-dark);
  padding-top: clamp(72px, 10vw, 140px); overflow: hidden; position: relative;
}
.ft .mono-label { color: #8E8E93; margin-bottom: 16px; }
.ft__cta { padding-bottom: clamp(56px, 8vw, 112px); border-bottom: 1px solid var(--hair-d); display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.ft__title { font-size: clamp(44px, 8.4vw, 136px); font-weight: 800; letter-spacing: -0.065em; line-height: .94; }
.grey-d { color: #5C5C61; }
.ft__mail {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .3em;
  font-size: clamp(22px, 4.2vw, 60px); font-weight: 600; letter-spacing: -0.045em; line-height: 1.15;
  padding-bottom: .12em;
  background: linear-gradient(var(--mint), var(--mint)) 0 100% / 100% 2px no-repeat;
  transition: color .3s ease, background-size .6s var(--ease-out);
  overflow-wrap: anywhere;
}
.ft__mail:hover { color: var(--mint); }
.ft__mail-arrow { width: .8em; height: .8em; transition: transform .5s var(--ease-out); flex: none; }
.ft__mail:hover .ft__mail-arrow { transform: translate(.08em, -.08em) rotate(45deg); }
.ft__grid {
  display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.6fr)); gap: 32px;
  padding-block: clamp(48px, 6vw, 80px);
}
.ft__claim { font-size: clamp(22px, 2vw, 28px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.15; max-width: 16ch; }
.ft ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 17px; font-weight: 500; }
.ft__place { font-size: 17px; font-weight: 500; line-height: 1.5; }
.muted-d { color: #8E8E93; }
.ft__bottom {
  display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center;
  padding-block: 20px; border-top: 1px solid var(--hair-d); color: #8E8E93;
}
.ft__bottom > :first-child { margin-right: auto; }
.ft__top-ic { transform: rotate(-45deg); }
.ft__mark {
  font-size: clamp(120px, 31vw, 520px); font-weight: 800; letter-spacing: -0.08em; line-height: .74;
  color: var(--night-2); white-space: nowrap; user-select: none;
  margin-top: clamp(8px, 2vw, 24px); margin-bottom: -.06em;
  padding-left: calc(var(--gutter) - .04em);
  will-change: transform;
}
.ft__mark i { font-style: normal; color: var(--accent); }
.ft :focus-visible { outline-color: var(--mint); }

/* ---------- Introduction (première visite) ---------- */
.intro { display: none; }
.has-intro .intro {
  display: flex; position: fixed; inset: 0; z-index: 100; background: var(--night); color: var(--on-dark);
  flex-direction: column; justify-content: flex-end; padding: var(--gutter);
  animation: intro-out 1s var(--ease-io) 1.35s forwards;
}
.intro__in { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.intro__mark { font-size: clamp(88px, 20vw, 300px); font-weight: 800; letter-spacing: -0.08em; line-height: .78; overflow: hidden; display: block; }
.intro__mark span { color: var(--accent); }
.has-intro .intro__mark { animation: intro-mark 1s var(--ease-out) both; }
.intro__count { color: #8E8E93; font-size: 13px; font-variant-numeric: tabular-nums; }
.intro__bar { height: 1px; background: var(--hair-d); margin-top: 24px; }
.intro__bar span { display: block; height: 1px; background: var(--mint); transform-origin: 0 50%; transform: scaleX(0); }
.has-intro .intro__bar span { animation: intro-bar 1.2s var(--ease-io) .1s forwards; }
@keyframes intro-mark { from { clip-path: inset(0 0 100% 0); transform: translateY(30%); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes intro-bar { to { transform: scaleX(1); } }
@keyframes intro-out { to { transform: translateY(-100%); visibility: hidden; } }
.has-intro .hero .ln-mask:nth-child(1) .ln { animation-delay: 1.75s !important; }
.has-intro .hero .ln-mask:nth-child(2) .ln { animation-delay: 1.85s !important; }
.has-intro .hero .ln-mask:nth-child(3) .ln { animation-delay: 1.95s !important; }
.has-intro .hero .fade-up { animation-delay: 2.1s !important; }

/* ---------- Transition entre pages ---------- */
.pt { position: fixed; inset: 0; z-index: 95; background: var(--bg); pointer-events: none; opacity: 0; }
.pt-out .pt { opacity: 1; transition: opacity .38s var(--ease-io); }
.pt-in .pt { animation: pt-in .7s var(--ease-out) .05s both; }
@keyframes pt-in { from { opacity: 1; } to { opacity: 0; } }

/* ---------- Défilement fluide (Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .sh { grid-template-columns: minmax(0, 1fr); }
  .sh__meta, .sh__title, .sh__link { grid-column: 1; }
  .sh__meta { padding-top: 0; }
  .ft__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft__grid > :first-child { grid-column: span 2; }
}
@media (max-width: 760px) {
  .hero__rail { margin-bottom: 40px; }
  .hero__foot { flex-direction: row; align-items: center; }
  .hero__cue-line { height: 40px; }
  .ft__bottom > :first-child { width: 100%; }
  .motion .reveal-img, .motion .work-card.rv .work-card__img { clip-path: inset(10% 4% 10% 4% round 22px); }
}
@media (max-width: 420px) {
  .ft__grid { grid-template-columns: minmax(0, 1fr); }
  .ft__grid > :first-child { grid-column: auto; }
  .hero__cue span:first-child { display: none; }
}

/* ---------- Mouvement réduit ---------- */
@media not all {
  .hero__cue-line::after { animation: none; }
  .motion .ln-rv { transform: none; transition: none; }
  .motion .reveal-img, .motion .work-card.rv .work-card__img, .motion .gallery__item.rv, .motion .case-hero__img.rv, .motion .side-project__img.rv { clip-path: none; transition: none; }
  .motion .reveal-img img, .motion .work-card.rv .work-card__img img, .motion .gallery__item.rv img, .motion .case-hero__img.rv img, .motion .side-project__img.rv img { transform: none; transition: none; }
  .site-header { transition: none; }
}
@media print {
  .ft__mark, .intro, .pt, .cursor { display: none !important; }
}

/* Maquette streaming : tient dans son cadre sur petit écran */
@media (max-width: 760px) {
  .mock-stream { zoom: .74; width: 100% !important; }
  .case-hero__img--vector { padding: 20px; }
}

/* Menu mobile indexé */
.mobile-menu nav { counter-reset: m; }
.mobile-menu nav a { justify-content: flex-start; gap: 16px; }
.mobile-menu nav a::before { counter-increment: m; content: "0" counter(m); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--muted); align-self: flex-start; padding-top: .9em; min-width: 22px; }
.mobile-menu nav a svg { margin-left: auto; }
.motion .mobile-menu.is-open nav a { animation: fadeup .8s var(--ease-out) both; }
.motion .mobile-menu.is-open nav a:nth-child(2) { animation-delay: .06s; }
.motion .mobile-menu.is-open nav a:nth-child(3) { animation-delay: .12s; }
.motion .mobile-menu.is-open nav a:nth-child(4) { animation-delay: .18s; }

/* Cartes services cliquables en entier */
.svc--clickable { cursor: pointer; }
.svc--clickable:hover { translate: 0 -3px; box-shadow: 0 24px 48px -20px rgba(0,0,0,.18); }

/* ---------- Couleur secondaire : orange (liens et interactions) ---------- */
:root {
  --orange-brand: #F5A623;            /* le point du logo .dk2 */
  --orange-ink: #B4580A;              /* même teinte, assombrie pour rester lisible sur fond clair */
}
.link-arrow { color: var(--orange-ink); }
.link-arrow .icon { color: var(--orange-brand); }
.ul-link { background-image: linear-gradient(var(--orange-brand), var(--orange-brand)); }
.ul-link:hover, .ul-link:focus-visible { color: var(--orange-ink); }
.ft .ul-link:hover, .ft .ul-link:focus-visible, .on-dark .ul-link:hover { color: var(--orange-brand); }
.crumbs a:hover { color: var(--orange-ink); }
.client:hover .client__name { color: var(--orange-ink); }
.client__arrow { color: var(--orange-brand); }
.ft__mail { background-image: linear-gradient(var(--orange-brand), var(--orange-brand)); }
.ft__mail:hover { color: var(--orange-brand); }
.prose a, .legal a { color: var(--orange-ink); text-decoration: underline; text-decoration-color: var(--orange-brand); text-underline-offset: 3px; }
.work-card:hover .round-btn, .work-card:focus-visible .round-btn { background: var(--orange-brand); color: #1D1D1F; }
.round-btn { transition: background-color .3s ease, color .3s ease; }
@media (hover: hover) and (pointer: fine) {
  .cursor { background: var(--orange-brand); color: #1D1D1F; }
}

/* ---------- Logo : « .dk2 » ---------- */
.brand { gap: 0; }
.brand__word { font-size: 24px; font-weight: 800; letter-spacing: -0.065em; line-height: 1; }
.brand__dot { color: var(--orange-brand); }
.ft__mark i, .intro__mark span { color: var(--orange-brand); }

/* ---------- Titres : un cran plus petits sur ordinateur, ferrés à gauche sous leur index ---------- */
.hero--pro .display { font-size: clamp(54px, 9.4vw, 148px); }
.display--m { font-size: clamp(44px, 6vw, 92px); }
.h-section { font-size: clamp(40px, 5.2vw, 76px); }
.ft__title { font-size: clamp(44px, 6.8vw, 108px); }
.stack__title { font-size: clamp(38px, 3.9vw, 56px); }
.next-case__title { font-size: clamp(40px, 5.2vw, 76px); }
.sh { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
.sh__meta, .sh__title, .sh__link { grid-column: 1; }
.sh__meta { padding-top: 0; }
.sh__title { max-width: 18ch; }
.sh__link { margin-top: 6px; }

/* ---------- Services : accordéon horizontal sur ordinateur ----------
   Une carte ouverte (noire, large), deux colonnes étroites. Hauteur fixée par le script.
   Séquence : contenu qui s'efface (0,2 s) → largeur qui glisse (0,8 s) → contenu qui revient. */
.svc__toggle { background: var(--bg) !important; color: var(--ink) !important; }
.svc.tile--dark .svc__toggle { background: #F5F5F7 !important; color: #1D1D1F !important; }
@media (min-width: 1001px) {
  .svc-grid, .svc-grid.has-open { display: flex; gap: 16px; align-items: stretch; }
  .svc-grid > .svc {
    flex: 1 1 0; min-width: 0; overflow: hidden;
    transition: flex-grow .8s cubic-bezier(.65, 0, .35, 1), flex-basis .8s cubic-bezier(.65, 0, .35, 1),
                background-color .7s ease, color .7s ease, padding .8s cubic-bezier(.65, 0, .35, 1),
                translate .45s var(--ease), box-shadow .45s var(--ease);
  }
  .svc-grid.has-open > .svc { flex: 0 0 104px; padding: 28px 20px; }
  .svc-grid.has-open > .svc.is-open { flex: 1 1 0; padding: 36px; }

  /* Contenu : apparition / disparition sans à-coup */
  .svc > :not(.svc-dot) { transition: opacity .45s ease, transform .6s var(--ease-out); }
  .svc.is-leaving > :not(.svc-dot), .svc.is-entering > :not(.svc-dot) { opacity: 0; transition: opacity .2s ease; }
  .svc.is-entering > .svc__panel { transform: translate3d(28px, 0, 0); }
  .svc.is-open > .svc__panel { transition-delay: .08s; }
  .motion .svc.is-open > .svc__panel, .motion .svc__panel:not([hidden]) { animation: none; }

  /* Carte ouverte : texte à gauche, détail à droite */
  .svc.is-open {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    grid-template-rows: auto 1fr; column-gap: clamp(28px, 3vw, 48px); align-content: stretch;
    cursor: default;
  }
  .svc.is-open > .svc__head { grid-column: 1; grid-row: 1; }
  .svc.is-open > .svc__foot { grid-column: 1; grid-row: 2; min-height: 0; }
  .svc.is-open > .svc__panel {
    grid-column: 2; grid-row: 1 / span 2; border-top: 0; padding-top: 0;
    padding-left: clamp(24px, 2.6vw, 40px); border-left: 1px solid #3A3A3C;
  }
  .svc.is-open .svc__toggle { display: none; }
  .svc.is-open:hover { translate: none; box-shadow: none; }
  .svc.is-open .svc-dot { opacity: .35; }
  .svc .svc-dot { transition: opacity .6s ease, transform .8s cubic-bezier(.65, 0, .35, 1); }

  /* Colonnes fermées : titre vertical, bouton rond */
  .svc-grid.has-open > .svc:not(.is-open) .svc__head { display: block; }
  .svc-grid.has-open > .svc:not(.is-open) .svc__head > div { display: block; }
  .svc-grid.has-open > .svc:not(.is-open) .svc__lead,
  .svc-grid.has-open > .svc:not(.is-open) .svc__tags,
  .svc-grid.has-open > .svc:not(.is-open) .svc-pic { display: none; }
  .svc-grid.has-open > .svc:not(.is-open) .svc__title {
    writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: 38px; line-height: 1;
  }
  .svc-grid.has-open > .svc:not(.is-open) .svc__foot { min-height: 0; }
  .svc-grid.has-open > .svc:not(.is-open) .svc__toggle-label { display: none; }
  .svc-grid.has-open > .svc:not(.is-open) .svc__toggle { width: 48px; height: 48px; padding: 0; justify-content: center; }
  .svc-grid.has-open > .svc:not(.is-open) .svc__toggle svg { width: 20px; height: 20px; }
  .svc-grid.has-open > .svc:not(.is-open) .svc-dot { transform: scale(.55); transform-origin: 100% 100%; }
  .svc-grid.has-open > .svc:not(.is-open):hover { translate: 0 -4px; }
  .svc-grid.is-switching > .svc:hover { translate: none; }

  /* Mesure de la hauteur : aucune transition */
  .svc-grid.svc-measure { align-items: flex-start; height: auto !important; }
  .svc-grid.svc-measure > .svc, .svc-grid.svc-measure > .svc * { transition: none !important; animation: none !important; }
}

/* ---------- Compétences & outils (accueil) ---------- */
.sk { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: stretch; }
.sk__head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em;
  padding-bottom: 14px; border-bottom: 1px solid var(--hair); margin-bottom: 8px; color: var(--muted);
}
.sk__skills .sk__head { border-bottom-color: var(--hair-d); color: #8E8E93; }
.sk__count { font-variant-numeric: tabular-nums; }
.sk__skills { display: flex; flex-direction: column; gap: 4px; padding: clamp(28px, 3vw, 40px); }
.sk-group { padding: 18px 0; border-bottom: 1px solid var(--hair-d); }
.sk-group:last-child { border-bottom: 0; padding-bottom: 0; }
.sk-group__label { font-family: var(--mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; color: #C7C7CC; margin-bottom: 14px; }
.sk-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sk-list li {
  padding: 8px 14px; border-radius: 999px; font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  transition: background-color .3s ease, color .3s ease;
}
.sk-list li:hover { background: var(--orange-brand); color: #1D1D1F; }
.sk__tools { display: flex; flex-direction: column; }
.tools-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; flex: 1; }
.tool {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  min-height: 104px; padding: 18px 18px 16px; border-radius: 20px; background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); overflow: hidden;
  transition: translate .45s var(--ease), box-shadow .45s var(--ease), opacity 1.3s var(--ease-out), transform 1.5s var(--ease-out);
}
.tool::after {
  content: ""; position: absolute; right: -28px; bottom: -28px; width: 72px; height: 72px; border-radius: 999px;
  background: var(--orange-brand); opacity: 0; transform: scale(.4); transition: opacity .45s ease, transform .6s var(--ease-out);
}
.tool:hover { translate: 0 -3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04), 0 18px 36px -18px rgba(0,0,0,.2); }
.tool:hover::after { opacity: 1; transform: none; }
.tool__name { font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.15; position: relative; z-index: 1; }
.tool__cat { font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); position: relative; z-index: 1; }
@media (max-width: 1000px) {
  .sk { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tool { min-height: 88px; padding: 14px; border-radius: 16px; }
  .sk-list li { font-size: 14px; padding: 7px 12px; }
}
.tool--feat { grid-column: span 2; background: var(--orange-brand); box-shadow: none; }
.tool--feat .tool__name { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.05em; }
.tool--feat .tool__cat { color: rgba(29,29,31,.7); }
.tool--feat::after { background: #1D1D1F; }
@media (max-width: 760px) { .tool--feat { grid-column: span 1; } .tool--feat .tool__name { font-size: 22px; } }

/* ==========================================================================
   Services : étapes interactives (onglets à gauche, scène à droite)
   ========================================================================== */
.svx { display: grid; gap: 20px; }
.svx__tabs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.svx__tab {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 8px; row-gap: 0;
  width: 100%; padding: 14px 0 16px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
  border-top: 1px solid var(--line); opacity: .45; transition: opacity .35s ease;
}
.tile--dark .svx__tab { border-top-color: #3A3A3C; }
.svx__tab:hover { opacity: .8; }
.svx__tab[aria-selected="true"] { opacity: 1; }
.svx__n { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--accent); padding-top: 4px; }
.tile--dark .svx__n { color: var(--mint); }
.svx__t { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; }
.svx__d {
  grid-column: 2; font-size: 15px; line-height: 1.45; color: var(--muted);
  display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .5s var(--ease-out), margin .5s var(--ease-out);
}
.svx__d { max-height: 0; transition: max-height .55s var(--ease-out), margin .55s var(--ease-out), opacity .4s ease; opacity: 0; }
.svx__tab[aria-selected="true"] .svx__d { max-height: 120px; margin-top: 6px; opacity: 1; }
.tile--dark .svx__d { color: #C7C7CC; }
.svx__prog { position: absolute; left: 0; right: 0; top: -1px; height: 2px; overflow: hidden; }
.svx__prog i { display: block; height: 100%; width: 0; background: var(--orange-brand); }
.svx__tab[aria-selected="true"] .svx__prog i { width: 100%; }
.motion .svx__tab.is-playing .svx__prog i { width: 0; animation: svx-prog 6.5s linear forwards; }
.motion .svc:hover .svx__tab.is-playing .svx__prog i { animation-play-state: paused; }
@keyframes svx-prog { to { width: 100%; } }

.svx__stage { display: grid; border-radius: 22px; padding: 14px; background: var(--bg); }
.tile--dark .svx__stage { background: #2A2A2D; }
.svx__slide {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: 16px; min-width: 0;
  opacity: 0; visibility: hidden; transform: translate3d(0, 14px, 0);
  transition: opacity .5s ease, transform .7s var(--ease-out), visibility 0s linear .5s;
}
.svx__slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .55s ease .08s, transform .8s var(--ease-out) .08s, visibility 0s; }
.svx__info { padding: 4px 8px 6px; display: flex; flex-direction: column; gap: 10px; }
.svx__info-t { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.svx__info ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.svx__info li { position: relative; padding-top: 12px; font-size: 14px; line-height: 1.4; color: var(--muted); border-top: 1px solid var(--line-2); }
.tile--dark .svx__info li { color: #C7C7CC; border-top-color: #48484A; }
.svx__info li::before { content: ""; position: absolute; left: 0; top: -1px; width: 18px; height: 1px; background: var(--orange-brand); }

/* Feuilles de visuel */
.vx-paper { background: #fff; color: #1D1D1F; border-radius: 16px; padding: 16px 18px; min-height: 230px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.vx-title { font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; opacity: .6; }
.vx-bar { display: block; border-radius: 99px; }
.vx-week { font-size: 11px; }
.vx-week span { padding: 12px 6px; border-radius: 10px; font-weight: 700; }
.vx-lib { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; flex: 1; }
.vx-lib__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.vx-lib__list li { padding: 7px 10px; border-radius: 8px; color: #6E6E73; }
.vx-lib__list li.on { background: #F5F5F7; color: #1D1D1F; }
.vx-lib__prev { border-radius: 12px; background: #F5F5F7; padding: 14px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.vx-btn { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.vx-sw { width: 28px; height: 28px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.vx-tag { align-self: flex-start; font-family: var(--mono); font-size: 10.5px; padding: 4px 8px; border-radius: 6px; background: #E3F5EE; color: #0B6B4F; }
.vx-prompt { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #2C2C2E; border: 1px solid #48484A; font-size: 12px; white-space: nowrap; overflow: hidden; }
.vx-screens { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-height: 120px; }
.vx-notes { display: flex; gap: 10px; flex-wrap: wrap; }
.vx-note { flex: 1 1 120px; padding: 12px; border-radius: 6px; font-size: 12.5px; font-weight: 600; line-height: 1.35; rotate: var(--r, 0deg); box-shadow: 0 6px 14px -8px rgba(0,0,0,.25); }
.vx-bars { display: flex; align-items: flex-end; gap: 8px; height: 64px; }
.vx-bars i { flex: 1; border-radius: 6px 6px 3px 3px; background: #D2D2D7; transform-origin: 50% 100%; }
.vx-test { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 18px; align-items: center; flex: 1; }
.vx-phone { border: 5px solid #1D1D1F; border-radius: 22px; padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; min-height: 160px; background: #fff; }
.vx-phone > span:first-child { display: flex; flex-direction: column; gap: 5px; }
.vx-hero { display: block; height: 52px; border-radius: 10px; background: #E8E8ED; }
.vx-cta { position: relative; margin-top: auto; text-align: center; padding: 8px; border-radius: 999px; background: #0F766E; color: #fff; font-size: 11px; font-weight: 700; }
.vx-tap { position: absolute; right: 18px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 999px; background: rgba(245,166,35,.9); }
.motion .is-active .vx-tap { animation: vx-tap 1.8s ease-out infinite; }
@keyframes vx-tap { 0% { box-shadow: 0 0 0 0 rgba(245,166,35,.55); } 100% { box-shadow: 0 0 0 16px rgba(245,166,35,0); } }
.vx-results { display: flex; flex-direction: column; gap: 8px; }
.vx-res { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #F5F5F7; font-size: 13px; font-weight: 600; }
.vx-res b { width: 8px; height: 8px; border-radius: 99px; flex: none; }
.vx-tokens { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; flex: 1; align-items: center; }
.vx-tok-col { display: flex; flex-direction: column; gap: 8px; }
.vx-tok { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11.5px; }
.vx-tok i { width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); flex: none; }
.vx-type { display: flex; flex-direction: column; gap: 4px; letter-spacing: -0.04em; line-height: 1.05; }
.vx-space { display: flex; align-items: flex-end; gap: 6px; margin-top: 10px; }
.vx-space i { height: 18px; background: #F5A623; border-radius: 3px; opacity: .85; }
.vx-screens2 { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 14px; align-items: end; flex: 1; }
.vx-desk { border-radius: 12px; box-shadow: inset 0 0 0 1px #E8E8ED; overflow: hidden; }
.vx-desk__top { display: block; height: 16px; background: #F5F5F7; }
.vx-desk__body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.vx-card { display: block; height: 34px; border-radius: 8px; background: #E8E8ED; }
.vx-phone--hi { min-height: 0; border-width: 4px; border-radius: 18px; padding: 8px; gap: 6px; }
.vx-phone--hi .vx-hero { height: 40px; }
.vx-phone--hi .vx-card { height: 20px; }
.vx-spec { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; flex: 1; align-items: center; }
.vx-code { margin: 0; padding: 14px; border-radius: 12px; background: #2C2C2E; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: #F5F5F7; overflow: hidden; white-space: pre; }
.vx-code .c1 { color: #64D2C3; } .vx-code .c2 { color: #C7C7CC; } .vx-code .c3 { color: #F5A623; }
.vx-red { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vx-mh { position: absolute; left: 0; right: 0; bottom: -10px; height: 1px; background: #F5A623; }
.vx-mv { position: absolute; top: 0; bottom: 0; right: -10px; width: 1px; background: #F5A623; }
.vx-meas { font-family: var(--mono); font-size: 11px; color: #F5A623; }

/* Animations des visuels à l'activation */
.motion .svx__slide .vx-pop { opacity: 0; transform: translate3d(0, 8px, 0) scale(.96); }
.motion .svx__slide.is-active .vx-pop { animation: vx-pop .6s var(--ease-out) calc(var(--i, 0) * 90ms + .2s) forwards; }
@keyframes vx-pop { to { opacity: 1; transform: none; } }
.motion .svx__slide .vx-note.vx-pop { rotate: var(--r, 0deg); }
.motion .svx__slide .vx-grow { transform: scaleY(0); }
.motion .svx__slide.is-active .vx-grow { animation: vx-grow .8s var(--ease-out) calc(var(--i, 0) * 80ms + .25s) forwards; }
@keyframes vx-grow { to { transform: scaleY(1); } }
.motion .svx__slide .vx-draw { stroke-dasharray: 100; stroke-dashoffset: 100; }
.motion .svx__slide.is-active .vx-draw { animation: vx-draw 1.4s var(--ease-out) .2s forwards; }
@keyframes vx-draw { to { stroke-dashoffset: 0; } }

/* Ordinateur, carte ouverte : texte + onglets à gauche, scène à droite, sans vide */
@media (min-width: 1001px) {
  .svc.is-open { grid-template-columns: minmax(0, .92fr) minmax(0, 1.28fr); grid-template-rows: auto 1fr; row-gap: 28px; }
  .svc.is-open > .svc__panel, .svc.is-open .svx { display: contents; }
  .svc.is-open .svx__tabs { grid-column: 1; grid-row: 2; align-self: end; }
  .svc.is-open .svx__stage { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
  .svc.is-open > .svc__foot { display: none; }
  .svc.is-open .svc-pic { display: none; }
  .svc .svx__tabs, .svc .svx__stage { transition: opacity .45s ease, transform .7s var(--ease-out); }
  .svc.is-leaving .svx__tabs, .svc.is-leaving .svx__stage,
  .svc.is-entering .svx__tabs, .svc.is-entering .svx__stage { opacity: 0; transition: opacity .2s ease; }
  .svc.is-entering .svx__stage { transform: translate3d(28px, 0, 0); }
  .svc.is-open .svx__stage { transition-delay: .1s; }
  .svc.is-open .svc-dot { opacity: 0; }
}
@media (max-width: 1000px) {
  .svx__info ul { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .vx-lib { grid-template-columns: minmax(0, 1fr); }
  .vx-lib__list { flex-direction: row; flex-wrap: wrap; }
  .vx-test, .vx-spec, .vx-tokens { grid-template-columns: minmax(0, 1fr); }
  .vx-screens2 { grid-template-columns: minmax(0, 1fr) 84px; }
}
@media not all {
  .svx__slide, .svx__slide.is-active { transition: none; transform: none; }
}
@media (min-width: 1001px) { .svc.is-open .svc-dot { opacity: 0 !important; } }
@media (max-width: 1000px) { .svx__slide:not(.is-active) { display: none; } }

/* ---------- Outils v2 : 7 outils, icônes vectorielles, tons doux ---------- */
.tools-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tool { justify-content: space-between; min-height: 150px; }
.tool__txt { display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; }
.tool__ic { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 1; transition: transform .5s var(--ease-out); }
.tool__ic .icon { width: 22px; height: 22px; }
.tool:hover .tool__ic { transform: rotate(-8deg) scale(1.06); }
.tool--sun .tool__ic { background: #FFF1CC; color: #B07A00; }
.tool--rose .tool__ic { background: #FFE1DE; color: #D2443C; }
.tool--clay .tool__ic { background: #F7E4D8; color: #B85C38; }
.tool--mint .tool__ic { background: #DDF2EE; color: #0F766E; }
.tool--sky .tool__ic { background: #E3E8FF; color: #4559D6; }
.tool--feat .tool__ic { background: rgba(29,29,31,.12); color: #1D1D1F; }
.tool--feat .tool__name { font-size: clamp(28px, 2.6vw, 38px); }
.sk-duo { font-family: var(--mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; padding: 2px 6px; margin-left: 6px; border-radius: 6px; background: rgba(245,166,35,.18); color: #F5A623; vertical-align: 1px; cursor: help; }
@media (max-width: 760px) {
  .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool--feat { grid-column: span 2; }
  .tool { min-height: 120px; }
}
/* Mise en page empilée : compétences en 3 colonnes, puis outils sur 4 colonnes */
@media (min-width: 1001px) {
  .sk { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sk__skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); row-gap: 0; }
  .sk__skills .sk__head { grid-column: 1 / -1; }
  .sk-group { border-bottom: 0; padding: 18px 0 0; }
  .sk-group + .sk-group { border-left: 1px solid var(--hair-d); padding-left: clamp(24px, 3vw, 48px); margin-left: calc(-1 * clamp(12px, 1.5vw, 24px)); }
  .sk__tools .sk__head { margin-top: 24px; }
  .tool { min-height: 168px; }
}

/* Carte profil : même noir que les autres cartes sombres */
.brand-tile { background: var(--dark); }

/* ---------- Page Projets : titre, filtres, grille complète ---------- */
.page-hero--projects { padding-bottom: 0; }
.projects-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--hair); margin-bottom: 24px; }
.projects-head__count { font-family: var(--mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); white-space: nowrap; padding-bottom: .8em; }
.page-hero--projects .filters { margin-bottom: 28px; }
@media (min-width: 1101px) { .work-grid--all { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.work-card__img--vector { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.work-card__img--vector > * { zoom: .46; }
.work-card__img--vector .mock-stream { zoom: .52; width: 90% !important; }
.work-card--case .work-card__meta { color: var(--accent); }
.work-card__more { font-size: 13px; font-weight: 600; color: var(--orange-ink); }
.work-card__img--vector > .mock-scale { zoom: .34; }
@media (max-width: 760px) { .work-card__img--vector > .mock-scale { zoom: .4; } }

/* ==========================================================================
   Approche : parcours en 3 étapes, révélées une à une au défilement,
   cartes qui se retournent pour montrer le concret.
   ========================================================================== */
.flow { position: relative; }
.flow__pin { position: relative; }
.flow__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; position: relative; z-index: 1; }
.flow__rail { position: absolute; left: calc(100% / 6); right: calc(100% / 6); top: 22px; height: 2px; background: var(--hair); z-index: 0; }
.flow__fill { position: absolute; inset: 0; background: var(--orange-brand); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.flow__step { display: flex; flex-direction: column; align-items: center; gap: 22px; perspective: 1600px; }
.flow__node {
  width: 46px; height: 46px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); box-shadow: inset 0 0 0 2px var(--line-2); color: var(--muted);
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  transition: background-color .5s ease, color .5s ease, box-shadow .5s ease, transform .6s var(--ease-out);
}
.flow__step.is-on .flow__node { background: var(--orange-brand); color: #1D1D1F; box-shadow: 0 0 0 6px rgba(245,166,35,.18); transform: scale(1.06); }
.flow__card {
  position: relative; width: 100%; display: grid; transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(.65, 0, .35, 1), opacity .8s ease, translate 1s var(--ease-out), scale 1s var(--ease-out);
}
.motion .flow__step:not(.is-on) .flow__card { opacity: .28; translate: 0 36px; scale: .96; }
.motion .flow__step:not(.is-on) * { animation-play-state: paused !important; }
.flow__step.is-flipped .flow__card { transform: rotateY(180deg); }
.flow__face {
  grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: var(--radius-l); padding: clamp(24px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.flow__front { background: var(--surface); box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.flow__step.is-on .flow__front { box-shadow: inset 0 0 0 1px rgba(0,0,0,.04), 0 30px 60px -36px rgba(0,0,0,.28); }
.flow__back { background: var(--dark); color: var(--on-dark); transform: rotateY(180deg); }
.flow__n { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--accent); }
.flow__back .flow__n { color: var(--mint); }
.flow__front .ap__stage { margin: 4px 0 6px; }
.flow__title { letter-spacing: -0.035em; }
.flow__text { color: var(--muted); font-size: 16px; line-height: 1.5; }
.flow__flip {
  align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 10px 16px; border: 0; border-radius: 999px; background: var(--bg); color: var(--ink);
  font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color .3s ease, color .3s ease;
}
.flow__flip svg { width: 16px; height: 16px; fill: currentColor; transition: transform .4s var(--ease-out); }
.flow__flip:hover { background: var(--orange-brand); color: #1D1D1F; }
.flow__flip:hover svg { transform: rotate(90deg); }
.flow__flip--back { background: #F5F5F7; color: #1D1D1F; }
.flow__list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.flow__list li { padding: 12px 0 12px 22px; border-top: 1px solid #3A3A3C; position: relative; font-size: 16px; color: #E5E5EA; }
.flow__list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 2px; background: var(--orange-brand); }
.flow__res { margin-top: 6px; padding: 14px 16px; border-radius: 14px; background: #2A2A2D; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -0.015em; }
.flow__res span { display: block; font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; color: var(--orange-brand); margin-bottom: 6px; }
.flow__hint { margin-top: 28px; text-align: center; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }

/* Ordinateur : la séquence est épinglée pendant le défilement */
@media (min-width: 1001px) {
  .flow.flow--pinned { height: 240vh; }
  .flow.flow--pinned .flow__pin { position: sticky; top: max(24px, calc(50vh - 330px)); }
}

/* Mobile et tablette : rail vertical à gauche */
@media (max-width: 1000px) {
  .flow__steps { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-left: 58px; }
  .flow__rail { left: 22px; right: auto; top: 22px; bottom: 22px; width: 2px; height: auto; }
  .flow__fill { transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
  .flow__step { position: relative; align-items: stretch; }
  .flow__node { position: absolute; left: -58px; top: 0; }
  .flow__hint { text-align: left; padding-left: 58px; }
  .motion .flow__step:not(.is-on) .flow__card { translate: 0 24px; }
}
@media not all {
  .flow__card { transition: none; }
  .motion .flow__step:not(.is-on) .flow__card { opacity: 1; translate: none; scale: none; }
}
.flow__card { flex: 1; }
.flow__face { height: 100%; }
@media (max-width: 1000px) { .flow ol.flow__steps { padding-left: 58px; } }

/* ==========================================================================
   Visuels animés en continu : carrousel d'écrans (france.tv),
   navigateur + téléphone qui défilent (J'écorénove)
   ========================================================================== */
.lv { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
.motion .reveal-img .lv img { transform: none; }
.lv--carousel { background: radial-gradient(70% 90% at 50% 120%, rgba(229,50,39,.32), transparent 60%), radial-gradient(50% 60% at 10% 0%, rgba(120,70,210,.22), transparent 70%), linear-gradient(180deg, #1A1A1E, #0E0E10); }
.lv-car { position: absolute; inset: 0; display: flex; align-items: center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.lv-car__track { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 20px); padding-right: clamp(12px, 1.4vw, 20px); height: 100%; width: max-content; animation: lv-car 46s linear infinite; will-change: transform; }
.lv-car__item { flex: none; height: 84%; aspect-ratio: 460 / 995; border-radius: clamp(14px, 1.6vw, 24px); overflow: hidden; box-shadow: 0 30px 60px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06); }
.lv-car__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lv:hover .lv-car__track { animation-play-state: paused; }
@keyframes lv-car { to { transform: translate3d(-50%, 0, 0); } }

.lv--devices { background: radial-gradient(60% 70% at 85% 10%, rgba(255,255,255,.9), transparent 70%), linear-gradient(160deg, #EAF4F0, #D3E8DF); }
.lv-browser { position: absolute; left: 6%; top: 11%; width: 70%; border-radius: clamp(8px, 1vw, 14px); background: #fff; overflow: hidden; box-shadow: 0 40px 70px -30px rgba(15,60,50,.4), 0 0 0 1px rgba(0,0,0,.04); }
.lv-browser__bar { height: clamp(14px, 1.7vw, 24px); background: #F2F2F5; display: flex; align-items: center; gap: clamp(3px, .4vw, 6px); padding: 0 clamp(6px, .8vw, 12px); }
.lv-browser__bar i { width: clamp(5px, .55vw, 8px); aspect-ratio: 1; border-radius: 99px; background: #FF5F57; }
.lv-browser__bar i:nth-child(2) { background: #FEBC2E; } .lv-browser__bar i:nth-child(3) { background: #28C840; }
.lv-browser__bar span { margin-left: 18%; width: 40%; height: 54%; border-radius: 99px; background: #fff; }
.lv-browser__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.lv-scroll { display: block; width: 100%; height: auto; animation: lv-scroll 24s cubic-bezier(.65, 0, .35, 1) infinite; will-change: transform; }
@keyframes lv-scroll { 0%, 8% { transform: translate3d(0, 0, 0); } 45%, 57% { transform: translate3d(0, -83.3%, 0); } 94%, 100% { transform: translate3d(0, 0, 0); } }
.lv-phone { position: absolute; right: 7%; bottom: 7%; width: 21%; aspect-ratio: 9 / 19.5; border-radius: 14% / 6.4%; background: #161618; padding: 2.4%; box-shadow: 0 40px 70px -26px rgba(15,60,50,.55); }
.lv-phone__screen { width: 100%; height: 100%; border-radius: 11.5% / 5.2%; overflow: hidden; background: #fff; }
.lv-phone__island { position: absolute; left: 50%; top: 4.2%; width: 28%; height: 3.2%; transform: translateX(-50%); border-radius: 99px; background: #161618; }
.lv-scroll--m { animation: lv-scroll-m 20s cubic-bezier(.65, 0, .35, 1) -5s infinite; }
@keyframes lv-scroll-m { 0%, 8% { transform: translate3d(0, 0, 0); } 45%, 57% { transform: translate3d(0, -62%, 0); } 94%, 100% { transform: translate3d(0, 0, 0); } }

/* Dans les cartes empilées */
.stack__visual--live { padding: 0; min-height: 300px; }
.stack__visual--live .lv { border-radius: inherit; }
/* En tête d'étude de cas */
.case-hero__img--live { position: relative; height: clamp(360px, 44vw, 600px); border-radius: var(--radius-xl); overflow: hidden; }
.case-hero__img--carousel .lv-car__item { height: 88%; }
@media (max-width: 760px) {
  .stack__visual--live { min-height: 260px; }
  .case-hero__img--live { height: 380px; border-radius: 22px; }
  .lv-browser { left: 5%; top: 12%; width: 78%; }
  .lv-phone { right: 5%; width: 27%; bottom: 6%; }
}
@media not all {
  .lv-car__track, .lv-scroll, .lv-scroll--m { animation: none; }
}
/* Les règles d'image des cartes ne s'appliquent pas aux visuels animés */
.stack__visual .lv picture, .case-hero__img .lv picture { position: static; inset: auto; width: auto; height: auto; display: contents; }
.stack__visual .lv img.lv-scroll, .case-hero__img .lv img.lv-scroll { width: 100%; height: auto; object-fit: fill; max-width: none; }
.stack__visual .lv .lv-car__item img, .case-hero__img .lv .lv-car__item img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Fond : trame de points et lavis de couleur en fondu (haut et bas de page),
   fragments d'interface qui passent sous les cartes (accueil, ordinateur).
   Inspiré de la bannière LinkedIn : points, styles Figma, pastilles, cercle tracé.
   ========================================================================== */
main { position: relative; isolation: isolate; }
.deco { position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.deco--top { top: calc(-1 * var(--header-h)); height: clamp(720px, 92vh, 1040px); }
.deco--home { height: clamp(900px, 118vh, 1240px); }
.deco--bottom { bottom: 0; height: clamp(520px, 70vh, 820px); }
.deco__dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(29,29,31,.16) 1px, transparent 1.4px);
  background-size: 22px 22px; background-position: 11px 11px;
}
.deco--top .deco__dots { -webkit-mask-image: radial-gradient(90% 75% at 72% 8%, #000 18%, transparent 72%); mask-image: radial-gradient(90% 75% at 72% 8%, #000 18%, transparent 72%); }
.deco--bottom .deco__dots { -webkit-mask-image: radial-gradient(80% 90% at 30% 100%, #000 10%, transparent 70%); mask-image: radial-gradient(80% 90% at 30% 100%, #000 10%, transparent 70%); }
.deco__wash { position: absolute; inset: 0; }
.deco--top .deco__wash {
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), transparent 55%);
}
.deco--bottom .deco__wash {
  background: linear-gradient(0deg, rgba(255,255,255,.5), transparent 60%);
}

/* Fragments (accueil, ordinateur uniquement) */
.deco-frag { position: absolute; display: none; }
@media (min-width: 1280px) {
  .deco--home .deco-frag { display: block; }
  .deco-styles {
    top: 168px; right: max(48px, calc(50% - 600px)); width: 252px; padding: 16px 16px 18px;
    border-radius: 16px; background: #1E1E21; color: #E5E5EA;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
    transform: rotate(7deg); transform-origin: 50% 0;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0;
    animation: deco-float 9s ease-in-out infinite;
  }
  .deco-styles__head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font); font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 12px; }
  .deco-styles__head i { width: 16px; height: 16px; border-radius: 5px; background: #2C2C2E; box-shadow: inset 0 0 0 1px #48484A; }
  .deco-styles__label { color: #8E8E93; text-transform: uppercase; font-size: 9.5px; margin: 10px 0 6px; }
  .deco-styles ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .deco-styles li { display: flex; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 7px; background: #26262A; }
  .deco-styles li i { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
  .deco-styles__type li { font-family: var(--font); font-size: 11px; }
  .deco-styles__type b { width: 22px; font-size: 12px; color: #fff; }
  .deco-pill {
    padding: 9px 18px; border-radius: 12px; background: rgba(255,255,255,.86);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 0 0 1.5px #1F3A5F inset, 0 14px 30px -18px rgba(0,0,0,.3);
    color: #1F3A5F; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
    animation: deco-float 8s ease-in-out infinite;
  }
  .deco-pill--1 { top: 132px; right: max(330px, calc(50% - 300px)); rotate: -4deg; animation-delay: -2s; }
  .deco-pill--2 { top: 222px; right: max(350px, calc(50% - 280px)); rotate: 3deg; animation-delay: -5s; }
  .deco-pill--3 { top: 452px; right: max(300px, calc(50% - 330px)); rotate: -2deg; animation-delay: -1s; }
  .deco-cursor { top: 372px; right: max(260px, calc(50% - 370px)); display: flex !important; align-items: flex-start; gap: 2px; animation: deco-cursor 11s ease-in-out infinite; }
  .deco-cursor span { margin-top: 16px; padding: 3px 9px; border-radius: 7px 7px 7px 2px; background: #F5A623; color: #1D1D1F; font-size: 12px; font-weight: 700; }
}
@keyframes deco-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes deco-cursor { 0%, 100% { translate: 0 0; } 30% { translate: -36px 18px; } 60% { translate: 14px -12px; } }

/* Cercle tracé à la main autour de « Design Ops » (comme sur la bannière) */
.circled { position: relative; display: inline-block; }
.circled__svg { position: absolute; left: -5%; top: -16%; width: 110%; height: 134%; overflow: visible; pointer-events: none; }
.circled__svg path { fill: none; stroke: #2FB59F; stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; }
.hero-risen .hero__title .ln-mask { overflow: visible; }
.hero-risen .circled__svg path { animation: circle-draw 1.3s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes circle-draw { to { stroke-dashoffset: 0; } }
html:not(.motion) .circled__svg path { stroke-dashoffset: 0; }
@media (max-width: 760px) { .circled__svg path { stroke-width: 3.5; } }

@media not all {
  .deco-frag { animation: none !important; }
  .circled__svg path { stroke-dashoffset: 0; animation: none; }
}

/* ==========================================================================
   Compétences & outils v3 : bandeau de compétences en mouvement + outils
   ========================================================================== */
.sk2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.sk2__skills { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 3vw, 48px); align-items: center; padding: clamp(28px, 3vw, 44px); overflow: hidden; }
.sk2__intro { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sk2__skills .sk__head { margin-bottom: 0; }
.sk2__lead { font-size: clamp(22px, 2vw, 30px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.15; color: #fff; text-wrap: balance; }
.sk2__lead span { color: #8E8E93; }
.sk2__ticks { display: flex; flex-direction: column; gap: 12px; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.sk-tick { overflow: hidden; }
.sk-tick__track { display: flex; gap: 10px; padding-right: 10px; width: max-content; animation: sk-tick 42s linear infinite; will-change: transform; }
.sk-tick--b .sk-tick__track { animation-duration: 50s; animation-direction: reverse; }
.sk2__skills:hover .sk-tick__track { animation-play-state: paused; }
.sk-tick__item { padding: 12px 20px; border-radius: 999px; white-space: nowrap; font-size: clamp(15px, 1.3vw, 18px); font-weight: 600; letter-spacing: -0.015em; color: #F5F5F7; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.sk-tick--a .sk-tick__item:nth-child(5n+2), .sk-tick--b .sk-tick__item:nth-child(5n+4) { background: var(--orange-brand); color: #1D1D1F; box-shadow: none; }
.sk-tick--a .sk-tick__item:nth-child(7n+5), .sk-tick--b .sk-tick__item:nth-child(6n+1) { background: transparent; box-shadow: inset 0 0 0 1.5px var(--mint); color: var(--mint); }
@keyframes sk-tick { to { transform: translate3d(-50%, 0, 0); } }
.sk2__note { margin-top: 14px; font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.sk2__note::before { content: ""; width: 18px; height: 2px; background: var(--orange-brand); flex: none; }
.tool__logo { width: 44px; height: 44px; object-fit: contain; display: block; }
.tool--has-logo .tool__ic { background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
@media (max-width: 1000px) {
  .sk2__skills { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sk-tick__item { padding: 10px 16px; }
  .sk2__ticks { margin: 0 -8px; }
}
@media not all {
  .sk-tick__track { animation: none; flex-wrap: wrap; width: auto; }
  .sk-tick__track > :nth-child(n + 10) { display: none; }
}
@media (min-width: 1001px) { .tool { min-height: 136px; } .tool--feat .tool__name { font-size: clamp(26px, 2.2vw, 34px); } }

/* ==========================================================================
   Repasse finale : rythme vertical, espacements, cohérence
   ========================================================================== */
:root { --section: clamp(72px, 8.5vw, 128px); }
.hero--pro { padding-bottom: clamp(32px, 4vw, 56px); }
.hero__rail { margin-bottom: clamp(40px, 6vw, 88px); }
.hero__foot { margin-top: clamp(32px, 4.5vw, 64px); }
.sh { margin-bottom: clamp(32px, 4vw, 56px); }
.page-hero { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(32px, 4vw, 48px); }
.ft { padding-top: clamp(64px, 8vw, 112px); }
.ft__cta { padding-bottom: clamp(48px, 6vw, 88px); }
.ft__grid { padding-block: clamp(40px, 5vw, 64px); }
.flow.flow--pinned { height: 205vh; }
.marquee-wrap { padding-top: clamp(64px, 7vw, 104px); }
.section--tight { padding-top: clamp(40px, 5vw, 64px); }
.case-split--label { margin-bottom: clamp(20px, 2.4vw, 28px); }
.case-split--label .case-split__label { position: static; }

/* Apparitions : un peu plus vives, déplacement plus court */
.motion .rv { transition: opacity 1.1s var(--ease) calc(var(--d, 0s) * .6), transform 1.2s var(--ease) calc(var(--d, 0s) * .6), translate .45s var(--ease), box-shadow .45s var(--ease); }
.motion .rv-l { transform: translate3d(-48px, 0, 0); }
.motion .rv-r { transform: translate3d(48px, 0, 0); }

/* Galerie d'écrans mobiles */
.gallery--phones { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gallery__item--phone { aspect-ratio: 460 / 995; border-radius: clamp(16px, 1.8vw, 26px); background: #111; overflow: hidden; }
.gallery__item--phone img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .gallery--phones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* Parcours (À propos) */
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.tl { border-bottom: 1px solid var(--hair); }
.tl__in {
  display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1.35fr) minmax(0, 1fr) 40px;
  gap: clamp(16px, 2.4vw, 32px); align-items: center; padding: 20px 4px; color: inherit; border-radius: 16px;
  transition: background-color .35s ease, padding .5s var(--ease-out);
}
a.tl__in:hover, a.tl__in:focus-visible { background: var(--surface); padding-inline: 18px; }
.tl__years { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl__role { font-size: clamp(17px, 1.5vw, 21px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.25; }
.tl__org { display: flex; flex-direction: column; gap: 3px; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.tl__org small { font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.tl__go { width: 36px; height: 36px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); display: inline-flex; align-items: center; justify-content: center; transition: background-color .3s ease, transform .4s var(--ease-out); }
.tl__go .icon { width: 16px; height: 16px; }
a.tl__in:hover .tl__go { background: var(--orange-brand); box-shadow: none; transform: rotate(45deg); }
.tl__go--none { background: transparent; box-shadow: none; }
@media (max-width: 760px) {
  .tl__in { grid-template-columns: minmax(0, 1fr) 36px; grid-template-areas: "years go" "role go" "org go"; row-gap: 6px; padding: 18px 2px; }
  .tl__years { grid-area: years; } .tl__role { grid-area: role; } .tl__org { grid-area: org; } .tl__go { grid-area: go; align-self: center; }
}

/* Savoir-faire (À propos) */
.knows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.know { display: flex; flex-direction: column; gap: 12px; min-height: 280px; }
.know__n { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--accent); }
.know.tile--dark .know__n { color: var(--mint); }
.know ul { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; }
.know li { padding: 12px 0 12px 20px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.4; color: var(--ink-2); position: relative; }
.know li::before { content: ""; position: absolute; left: 0; top: 21px; width: 10px; height: 2px; background: var(--orange-brand); }
.know.tile--dark li { border-top-color: #3A3A3C; color: #E5E5EA; }
@media (max-width: 1000px) { .knows { grid-template-columns: minmax(0, 1fr); } .know { min-height: 0; } }
/* Page Projets sur mobile : deux colonnes compactes */
@media (max-width: 760px) {
  .work-grid--all { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .work-grid--all .work-card { padding: 8px 8px 12px; border-radius: 16px; gap: 8px; }
  .work-grid--all .work-card__img { border-radius: 10px; }
  .work-grid--all .work-card__title { font-size: 14.5px; }
  .work-grid--all .work-card__meta { font-size: 10px; }
  .work-grid--all .work-card__foot .round-btn { width: 30px; height: 30px; }
  .work-grid--all .work-card__more, .work-grid--all .work-card__foot .muted { font-size: 12px; }
}

/* Diaporama en fondu (Prisma / Mobfactory) */
.lv--slides { background: #1D1D1F; }
.lv-sl { position: absolute; inset: 0; opacity: 0; animation: lv-sl calc(var(--n) * 4.5s) linear calc(var(--i) * 4.5s) infinite both; }
.lv-sl:first-child { opacity: 1; }
.lv-sl img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stack__visual .lv .lv-sl img, .case-hero__img .lv .lv-sl img { width: 100%; height: 100%; object-fit: cover; }
.motion .lv-sl img { animation: lv-kb calc(var(--n) * 4.5s) ease-in-out calc(var(--i) * 4.5s) infinite both; }
@keyframes lv-sl { 0% { opacity: 0; } 4% { opacity: 1; } 25% { opacity: 1; } 29% { opacity: 0; } 100% { opacity: 0; } }
@keyframes lv-kb { 0% { transform: scale(1.08); } 29% { transform: scale(1); } 100% { transform: scale(1); } }
.lv-sl__dots { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
.lv-sl__dots i { width: 22px; height: 3px; border-radius: 99px; background: rgba(255,255,255,.35); overflow: hidden; position: relative; }
.lv-sl__dots i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(0); animation: lv-dot calc(var(--n) * 4.5s) linear calc(var(--i) * 4.5s) infinite both; }
@keyframes lv-dot { 0% { transform: scaleX(0); } 27% { transform: scaleX(1); opacity: 1; } 29%, 100% { transform: scaleX(0); } }
.motion .lv-sl:first-child { opacity: 0; }

/* Tableau de bord S4M : barres et points vivants */
.motion .mock-bars i { transform-origin: 50% 100%; animation: bar-pulse 3.6s ease-in-out infinite; }
.motion .mock-bars i:nth-child(2) { animation-delay: -.5s; } .motion .mock-bars i:nth-child(3) { animation-delay: -1s; }
.motion .mock-bars i:nth-child(4) { animation-delay: -1.5s; } .motion .mock-bars i:nth-child(5) { animation-delay: -2s; }
.motion .mock-bars i:nth-child(6) { animation-delay: -2.5s; } .motion .mock-bars i:nth-child(7) { animation-delay: -3s; }
@keyframes bar-pulse { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.62); } }
.motion .mock-dash svg circle { transform-box: fill-box; transform-origin: center; animation: dot-pulse 2.8s ease-in-out infinite; }
.motion .mock-dash svg circle:nth-of-type(2) { animation-delay: -.7s; } .motion .mock-dash svg circle:nth-of-type(3) { animation-delay: -1.4s; } .motion .mock-dash svg circle:nth-of-type(4) { animation-delay: -2.1s; }
@keyframes dot-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@media not all {
  .lv-sl, .lv-sl img, .lv-sl__dots i::after, .mock-bars i, .mock-dash svg circle { animation: none !important; }
  .lv-sl:first-child { opacity: 1 !important; }
}
.case-hero__img--slides { height: auto; aspect-ratio: 16 / 10; }
@media (max-width: 760px) { .case-hero__img--slides { height: auto; aspect-ratio: 16 / 10; } }

/* Fragments du héros : repositionnés dans les zones libres (à droite des lignes 2 et 3) */
@media (min-width: 1280px) { .deco--home .deco-frag { display: none; } }
@media (min-width: 1360px) {
  .deco--home .deco-frag { display: block; }
  .deco--home .deco-cursor { display: flex !important; }
  .deco-styles { top: 150px; right: max(48px, calc(50% - 668px)); width: 232px; transform: rotate(6deg); }
  .deco-pill--1 { top: 376px; right: calc(max(48px, calc(50% - 668px)) + 348px); rotate: -3deg; }
  .deco-pill--2 { top: 438px; right: calc(max(48px, calc(50% - 668px)) + 284px); rotate: 2deg; }
  .deco-pill--3 { top: 500px; right: calc(max(48px, calc(50% - 668px)) + 150px); rotate: -2deg; }
  .deco-cursor { top: 410px; right: calc(max(48px, calc(50% - 668px)) + 196px); }
}

/* ==========================================================================
   Outils du quotidien v4 : carte claire qui glisse par-dessus les compétences
   ========================================================================== */
.sk2__tools { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 3vw, 48px); align-items: start; padding: clamp(28px, 3vw, 44px); background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 -24px 60px -36px rgba(0,0,0,.35); }
.sk2__tools .sk2__intro { height: 100%; }
.sk2__tools .sk__head { margin-bottom: 0; }
.sk2__lead--ink { color: var(--ink, #1D1D1F); }
.sk2__lead--ink span { color: var(--muted); }
.sk2__tools .sk2__note { margin-top: auto; padding-top: 12px; }
.tl2-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 36px); }
.tl2 { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--hair, rgba(0,0,0,.08)); position: relative; }
.tl2__ic { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: #F5F5F7; color: #1D1D1F; transition: transform .5s var(--ease-out), background-color .3s; }
.tl2__ic .icon { width: 22px; height: 22px; }
.tl2__ic .tool__logo { width: 28px; height: 28px; }
.tl2__name { font-size: clamp(17px, 1.4vw, 20px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.tl2__cat { grid-column: 2; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.tl2__n { grid-column: 3; grid-row: 1 / 3; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.tl2::after { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--orange-brand); transition: width .6s var(--ease-out); }
.tl2:hover::after { width: 100%; }
.tl2:hover .tl2__ic { transform: rotate(-8deg) scale(1.06); }
.tl2--sun .tl2__ic { background: #FFF1CC; color: #B07A00; }
.tl2--rose .tl2__ic { background: #FFE1DE; color: #D2443C; }
.tl2--clay .tl2__ic { background: #F7E4D8; color: #B85C38; }
.tl2--mint .tl2__ic { background: #DDF2EE; color: #0F766E; }
.tl2--sky .tl2__ic { background: #E3E8FF; color: #4559D6; }
.tl2--feat { grid-column: 1 / -1; padding: 20px 0 22px; }
.tl2--feat .tl2__ic { width: 56px; height: 56px; border-radius: 16px; background: var(--orange-brand); }
.tl2--feat { grid-template-columns: 56px minmax(0, 1fr) auto; }
.tl2--feat .tl2__name { font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -0.05em; }

/* Empilement au défilement : les outils montent par-dessus les compétences */
.sk2 { gap: 16px; }
.sk2__skills { transform-origin: 50% 0; }
@media (min-width: 761px) {
  .sk2[data-sk-stack] .sk2__skills { position: sticky; top: calc(var(--header-h, 72px) + 24px); z-index: 1; }
  .sk2[data-sk-stack] .sk2__tools { position: relative; z-index: 2; margin-top: clamp(40px, 8vh, 96px); }
  .motion .sk2[data-sk-stack] .sk2__skills { transform: scale(calc(1 - var(--cover, 0) * .05)); filter: brightness(calc(1 - var(--cover, 0) * .35)); }
}
@media (max-width: 1000px) {
  .sk2__tools { grid-template-columns: minmax(0, 1fr); }
  .sk2__tools .sk2__note { margin-top: 4px; }
}
@media (max-width: 760px) {
  .tl2-list { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Approche v3 : trois cartes, celle de l'étape en cours s'agrandit,
   les autres se réduisent. Défilement épinglé sur ordinateur.
   ========================================================================== */
.ap3 { position: relative; }
.ap3__cards { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; }
.ap3__card {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-l, 28px); background: #E9E9EE;
  transition: flex-grow .95s cubic-bezier(.7, 0, .2, 1), background-color .6s ease, box-shadow .6s ease;
}
.ap3__card.is-active { flex-grow: 3.3; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04), 0 40px 80px -48px rgba(0,0,0,.35); }
.ap3__open { position: absolute; inset: 0; z-index: 3; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: inherit; }
.ap3__card.is-active .ap3__open { display: none; }
.ap3__open:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: -4px; }
.ap3__card:not(.is-active):hover { background: #E1E1E7; }

/* Le gros chiffre */
.ap3__num {
  position: absolute; z-index: 1; top: clamp(18px, 2vw, 28px); left: clamp(22px, 2.4vw, 34px);
  font-size: clamp(96px, 10vw, 156px); font-weight: 800; line-height: .78; letter-spacing: -0.07em;
  color: #C9C9D0; font-variant-numeric: tabular-nums; pointer-events: none;
  transition: color .6s ease, transform .95s cubic-bezier(.7, 0, .2, 1);
}
.ap3__card.is-active .ap3__num { color: var(--orange-brand); }
/* Légende de la carte réduite */
.ap3__mini { position: absolute; z-index: 1; left: clamp(22px, 2.4vw, 34px); right: 18px; bottom: clamp(20px, 2vw, 28px); display: flex; flex-direction: column; gap: 8px; transition: opacity .4s ease .35s, translate .6s var(--ease-out) .3s; }
.ap3__mini-tag { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.ap3__mini-t { font-size: clamp(18px, 1.5vw, 22px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; color: var(--ink, #1D1D1F); text-wrap: balance; }
.ap3__card.is-active .ap3__mini { opacity: 0; translate: 0 12px; transition-delay: 0s; }

/* Contenu de la carte ouverte (largeur fixe pour éviter tout re-calage du texte) */
.ap3__body {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 2.4vw, 36px); align-items: stretch;
  padding: clamp(22px, 2.4vw, 34px); height: 100%;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s;
}
.ap3__card.is-active .ap3__body { opacity: 1; visibility: visible; transition: opacity .55s ease .5s, visibility 0s; }
.ap3__copy { display: flex; flex-direction: column; gap: 12px; padding-top: clamp(96px, 9vw, 136px); min-width: 0; }
.ap3__tag { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .02em; color: var(--orange-ink); }
.ap3__title { font-size: clamp(26px, 2.4vw, 36px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.04; text-wrap: balance; }
.ap3__text { color: var(--muted); font-size: 16px; line-height: 1.5; }
.ap3__list { list-style: none; margin: 4px 0 0; padding: 0; }
.ap3__list li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid var(--hair, rgba(0,0,0,.08)); font-size: 15px; font-weight: 500; }
.ap3__list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 2px; background: var(--orange-brand); }
.ap3__res { margin-top: auto; padding: 12px 14px; border-radius: 14px; background: #F5F5F7; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: -0.015em; }
.ap3__res span { display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; color: var(--orange-ink); margin-bottom: 4px; }
.ap3__vis { position: relative; min-width: 0; border-radius: 22px; background: #F2F2F5; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 1.8vw, 26px); }
.ap3__card:nth-child(1) .ap3__vis { background: linear-gradient(160deg, #FFF6E6, #FBE7C6); }
.ap3__card:nth-child(2) .ap3__vis { background: linear-gradient(160deg, #E9F4F1, #D4EAE3); }
.ap3__card:nth-child(3) .ap3__vis { background: linear-gradient(160deg, #26262A, #161618); }

.ap3__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.ap3__count b { color: var(--ink, #1D1D1F); font-weight: 500; }

/* Ordinateur : épinglé, les cartes se relaient au défilement */
@media (min-width: 1001px) {
  .ap3__cards { height: clamp(540px, 74vh, 640px); }
  .ap3__body { position: absolute; top: 0; left: 0; bottom: 0; width: var(--aw, 760px); }
  .ap3--pinned { height: 280vh; }
  .ap3--pinned .ap3__pin { position: sticky; top: max(84px, calc(50vh - 340px)); }
}
/* Mobile, tablette, ou sans épinglage : cartes empilées, toutes ouvertes */
@media (max-width: 1000px) {
  .ap3__cards { flex-direction: column; gap: 14px; }
  .ap3__card, .ap3__card.is-active { flex: none; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
  .ap3__open, .ap3__mini { display: none; }
  .ap3__num { color: var(--orange-brand); font-size: 96px; }
  .ap3__body { opacity: 1; visibility: visible; position: static; grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .ap3__copy { padding-top: 84px; }
  .ap3__vis { min-height: 300px; }
  .ap3__foot { display: none; }
}

/* ---------- Visuel 1 : organisation d'équipe ---------- */
.v-team { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 0; font-size: 12px; color: #1D1D1F; }
.v-team__lead { align-self: center; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 10px; border-radius: 16px; background: #fff; box-shadow: 0 14px 30px -18px rgba(120,70,0,.45), 0 0 0 1px rgba(0,0,0,.04); }
.v-team__who { display: flex; flex-direction: column; line-height: 1.25; }
.v-team__who b { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.v-team__who i { font-style: normal; color: #86868B; font-size: 11px; }
.v-team__links { width: 100%; height: 34px; overflow: visible; }
.v-team__links path { fill: none; stroke: rgba(29,29,31,.28); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; }
.v-team__squads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.v-sq { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 10px 22px -16px rgba(120,70,0,.4); }
.v-sq__t { font-weight: 700; font-size: 11.5px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-sq__r { font-family: var(--mono); font-size: 9.5px; color: #86868B; text-transform: uppercase; white-space: nowrap; }
.v-avs { display: flex; }
.v-avs .v-av + .v-av { margin-left: -7px; }
.v-av { width: 24px; height: 24px; border-radius: 99px; box-shadow: 0 0 0 2px #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; flex: none; }
.v-av--l { width: 36px; height: 36px; background: #1D1D1F; color: #F5A623; font-size: 12px; box-shadow: none; }
.v-av--a { background: #F5A623; } .v-av--b { background: #64D2C3; } .v-av--c { background: #1D1D1F; } .v-av--d { background: #C7B8F5; }
.v-chip { margin-left: 6px; padding: 3px 8px; border-radius: 99px; background: #F2F2F5; font-family: var(--mono); font-size: 10px; text-transform: uppercase; color: #1D1D1F; }
.v-chip--o { background: #F5A623; }
.v-week { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.65); box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.v-week__l { width: 100%; font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; color: #86868B; margin-bottom: 2px; }
.v-rit { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 9px; background: #fff; font-weight: 600; font-size: 11px; box-shadow: 0 0 0 1px rgba(0,0,0,.05); }
.v-rit i { font-style: normal; font-family: var(--mono); font-size: 9.5px; color: #86868B; }
.v-rit--d { background: #1D1D1F; color: #fff; } .v-rit--d i { color: #A1A1A6; }
.v-rit--o { background: #F5A623; } .v-rit--o i { color: rgba(29,29,31,.6); }
.v-rit--m { background: #64D2C3; } .v-rit--m i { color: rgba(29,29,31,.6); }

/* ---------- Visuel 2 : design system ---------- */
.v-ds { width: 100%; max-width: 420px; border-radius: 16px; background: #fff; box-shadow: 0 24px 50px -28px rgba(15,80,70,.45), 0 0 0 1px rgba(0,0,0,.04); overflow: hidden; font-size: 11.5px; color: #1D1D1F; }
.v-ds__bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #EEEEF2; }
.v-ds__name { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; white-space: nowrap; }
.v-ds__name i { width: 14px; height: 14px; border-radius: 4px; background: conic-gradient(#F5A623 0 25%, #0F766E 0 50%, #1D1D1F 0 75%, #64D2C3 0); }
.v-ds__tabs { display: flex; gap: 10px; color: #86868B; margin-left: auto; white-space: nowrap; }
.v-ds__tabs b { color: #1D1D1F; font-weight: 700; box-shadow: 0 2px 0 #F5A623; }
.v-ds__bar .v-chip { margin-left: 0; }
.v-ds__body { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
.v-ds__tokens { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: #FAFAFB; border-right: 1px solid #EEEEF2; }
.v-ds__lbl { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; color: #86868B; margin-top: 2px; }
.v-tok { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px; }
.v-tok i { width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.v-rad { display: flex; gap: 6px; }
.v-rad i { width: 20px; height: 20px; background: #E3E3E8; }
.v-ds__comps { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.v-ds__row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.v-btn { padding: 7px 12px; border-radius: 99px; background: #1D1D1F; color: #fff; font-weight: 700; font-size: 11px; }
.v-btn--g { background: #fff; color: #1D1D1F; box-shadow: inset 0 0 0 1px #D2D2D7; }
.v-tgl { margin-left: auto; width: 34px; height: 20px; border-radius: 99px; background: #0F766E; position: relative; }
.v-tgl i { position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; border-radius: 99px; background: #fff; }
.v-field { display: flex; flex-direction: column; gap: 4px; }
.v-field span { font-size: 10px; font-weight: 600; color: #86868B; }
.v-field i { font-style: normal; padding: 7px 10px; border-radius: 9px; box-shadow: inset 0 0 0 1.5px #F5A623; font-size: 11px; color: #1D1D1F; }
.v-badge { padding: 3px 8px; border-radius: 6px; background: #FFF1CC; color: #8A5A00; font-size: 10px; font-weight: 700; }
.v-badge--m { background: #DDF2EE; color: #0F766E; } .v-badge--l { background: #EEEEF2; color: #6E6E73; }
.v-card { display: flex; gap: 8px; align-items: center; padding: 7px; border-radius: 10px; box-shadow: inset 0 0 0 1px #EEEEF2; }
.v-card__img { width: 38px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, #64D2C3, #0F766E); flex: none; }
.v-card__l { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.v-card__l b { height: 6px; width: 70%; border-radius: 3px; background: #1D1D1F; }
.v-card__l i { height: 5px; width: 45%; border-radius: 3px; background: #D2D2D7; }
.v-ds__foot { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-top: 1px solid #EEEEF2; background: #FAFAFB; font-size: 10.5px; font-weight: 600; }
.v-sync, .v-ok { display: inline-flex; align-items: center; gap: 5px; }
.v-ok { color: #0F766E; }

/* ---------- Visuel 3 : IA ---------- */
.v-ai { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 12px; }
.v-ai__prompt { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: #1D1D1F; box-shadow: 0 0 0 1px #3A3A3C; font-size: 13px; color: #F5F5F7; white-space: nowrap; overflow: hidden; }
.v-ai__prompt svg { color: #64D2C3; flex: none; }
.v-ai__screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; height: clamp(170px, 18vw, 240px); }
.v-ai .g-screen { padding: 10px; gap: 7px; }
.v-ai .g-screen > span { height: 8px; }
.v-ai .g-screen > span:first-child { height: 46%; }

@media not all {
  .ap3__card, .ap3__body, .ap3__num, .ap3__mini { transition: none; }
}
/* Approche v3 : visuels plus présents dans leur panneau */
.v-team, .v-ds, .v-ai { max-width: 440px; }
@media (min-width: 1001px) { .ap3__vis > * { zoom: 1.12; } }
@media (min-width: 1300px) { .ap3__vis > * { zoom: 1.22; } }
.v-sq__t { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.2; }
.motion .v-ai .g-screen { animation-name: gscreen-ai; animation-duration: 6s; }
@keyframes gscreen-ai { 0% { opacity: 0; transform: translateY(12px); } 10%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.motion .v-ai .g-type { animation-duration: 6s; }
.v-ai .g-screen { background: #2C2C30; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.v-ai .g-screen > span { background: #48484A; }
.v-ai .g-screen > span:first-child { background: linear-gradient(135deg, #64D2C3, #0F766E); }
.v-ai .g-screen:nth-child(2) > span:first-child { background: linear-gradient(135deg, #F5A623, #E07B00); }
.motion .v-ai .g-screen { animation-delay: calc(-3.2s + var(--i) * .25s); }
/* IA : écrans générés plus détaillés */
.motion .v-ai .g-type { animation-name: gtype-ai; }
@keyframes gtype-ai { 0% { max-width: 0; } 40%, 100% { max-width: 420px; } }
.v-ai__screens { height: auto; }
.v-scr { aspect-ratio: 9 / 16; padding: 8px !important; gap: 6px !important; border-radius: 14px !important; }
.v-scr i { display: block; border-radius: 4px; background: #48484A; }
.v-scr__bar { height: 5px; width: 40%; align-self: center; border-radius: 99px !important; background: #3A3A3C !important; }
.v-scr__hero { flex: 1; border-radius: 9px !important; background: linear-gradient(135deg, #64D2C3, #0F766E) !important; }
.v-scr:nth-child(2) .v-scr__hero { background: linear-gradient(135deg, #F5A623, #E07B00) !important; }
.v-scr:nth-child(3) .v-scr__hero { background: linear-gradient(135deg, #C7B8F5, #6E56CF) !important; }
.v-scr__l { height: 6px; }
.v-scr__l--s { width: 60%; }
.v-scr__btn { height: 16px; border-radius: 99px !important; background: #F5F5F7 !important; margin-top: 2px; }
.v-ai .g-screen > i:first-child { height: 5px; }
.v-ai__foot { display: flex; justify-content: space-between; align-items: center; }
.v-chip--d { margin-left: 0; background: #2C2C30; color: #A1A1A6; }
.v-ai__act { display: flex; gap: 6px; }
.v-ai__act b { padding: 6px 12px; border-radius: 99px; background: #2C2C30; color: #F5F5F7; font-size: 11.5px; font-weight: 700; }
.v-ai__act .v-ai__act--o { background: #F5A623; color: #1D1D1F; }
@media (max-width: 760px) { .v-ds__tabs span:last-child { display: none; } }

/* ==========================================================================
   Approche v3.1 : bande sombre pleine largeur + cartes « texte en haut, visuel en bas »
   ========================================================================== */
.band-dark { position: relative; margin-top: var(--section); padding: clamp(72px, 8vw, 120px) 0 clamp(64px, 7vw, 104px); background: var(--night, #0B0B0D); color: var(--on-dark); isolation: isolate; overflow: clip; }
.band-dark::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 40%, transparent 70%, #000); mask-image: linear-gradient(180deg, #000, transparent 40%, transparent 70%, #000); }
.band-dark .sh__meta { color: var(--on-dark-muted); }
.band-dark .sh__title { color: var(--on-dark); }
.band-dark + .section { padding-top: var(--section); }

.band-dark .ap3__card { background: #161618; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.band-dark .ap3__card:not(.is-active):hover { background: #1C1C1F; }
.band-dark .ap3__card.is-active { background: #1E1E21; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 40px 90px -40px rgba(0,0,0,.8); }
.band-dark .ap3__num { color: #2E2E32; }
.band-dark .ap3__card.is-active .ap3__num { color: var(--orange-brand); }
.band-dark .ap3__mini-t { color: var(--on-dark); }
.band-dark .ap3__mini-tag, .band-dark .ap3__foot { color: var(--on-dark-muted); }
.band-dark .ap3__count b { color: var(--on-dark); }
.band-dark .ap3__tag { color: var(--orange-brand); }
.band-dark .ap3__title { color: #fff; }
.band-dark .ap3__text { color: var(--on-dark-muted); }
.band-dark .ap3__list li { border-top-color: rgba(255,255,255,.1); color: #E5E5EA; }
.band-dark .ap3__res { background: #2A2A2E; color: #F5F5F7; }
.band-dark .ap3__res span { color: var(--orange-brand); }
.band-dark .ap3__card:nth-child(1) .ap3__vis { background: radial-gradient(80% 120% at 20% 0%, rgba(245,166,35,.28), transparent 60%), #252528; }
.band-dark .ap3__card:nth-child(2) .ap3__vis { background: radial-gradient(80% 120% at 80% 0%, rgba(100,210,195,.24), transparent 60%), #252528; }
.band-dark .ap3__card:nth-child(3) .ap3__vis { background: radial-gradient(80% 120% at 50% 0%, rgba(199,184,245,.18), transparent 60%), #252528; }

/* Ordinateur : texte en haut (3 colonnes), visuel en bas sur toute la largeur */
@media (min-width: 1001px) {
  .ap3__cards { height: clamp(600px, 82vh, 720px); }
  .ap3--pinned .ap3__pin { top: max(72px, calc(50vh - 380px)); }
  .ap3__body { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 22px); }
  .ap3__copy { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: clamp(20px, 2.4vw, 40px); row-gap: 8px; padding-top: clamp(84px, 7.5vw, 116px); flex: none; }
  .ap3__tag { grid-column: 1; grid-row: 1; }
  .ap3__title { grid-column: 1; grid-row: 2; font-size: clamp(24px, 2.1vw, 32px); }
  .ap3__text { grid-column: 1; grid-row: 3; font-size: 15px; }
  .ap3__list { grid-column: 2; grid-row: 1 / 4; margin: 0; align-self: start; }
  .ap3__list li { padding: 7px 0 7px 20px; font-size: 14px; }
  .ap3__res { display: none; }
  .ap3__vis { flex: 1; min-height: 0; padding: clamp(14px, 1.4vw, 22px); }
  .ap3__vis > * { zoom: 1 !important; }
  .ap3__num { font-size: clamp(84px, 8vw, 128px); }
  .ap3__mini-t { font-size: clamp(18px, 1.5vw, 22px); }
}

/* Visuels au format paysage */
@media (min-width: 1001px) {
  .v-team, .v-ds, .v-ai { max-width: none; width: min(100%, 640px); }
  .v-team { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 10px; align-items: start; }
  .v-team__lead { grid-column: 1; grid-row: 1; align-self: stretch; }
  .v-team__links { display: none; }
  .v-team__squads { grid-column: 2; grid-row: 1 / 3; align-self: stretch; }
  .v-team__squads .v-sq { justify-content: space-between; }
  .v-week { grid-column: 1; grid-row: 2; margin-top: 0; }
  .v-ds__body { grid-template-columns: 120px minmax(0, 1fr); }
  .v-ds__comps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
  .v-ds__comps .v-ds__row:first-child { grid-column: 1 / -1; }
  .v-ai { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .v-ai__screens { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v-scr { aspect-ratio: auto; height: clamp(120px, 15vh, 170px); }
}
.band-dark .v-week { background: rgba(255,255,255,.08); box-shadow: none; }
.band-dark .v-week__l { color: #A1A1A6; }
.band-dark .ap3__card:nth-child(3) .v-ai__prompt { background: #141416; }
@media (max-width: 1000px) {
  .band-dark .ap3__card, .band-dark .ap3__card.is-active { background: #1E1E21; }
}
.band-dark .ap3__num { color: #3A3A3F; }
@media (min-width: 1001px) { .v-team { width: min(100%, 700px); } .v-sq { padding: 14px; } .v-team__lead { padding: 14px; } }

/* ==========================================================================
   Approche v4 : version épurée, claire, un tout petit visuel par carte
   ========================================================================== */
.ap3--simple .ap3__body { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 28px; }
.ap3s__copy { display: flex; flex-direction: column; gap: 10px; max-width: 460px; min-width: 0; }
.ap3--simple .ap3__title { font-size: clamp(26px, 2.4vw, 36px); }
.ap3--simple .ap3__text { font-size: 16px; }
.ap3s__vis { flex: none; width: 120px; height: 80px; border-radius: 18px; background: #F5F5F7; display: inline-flex; align-items: center; justify-content: center; }
.ap3s__vis svg { display: block; }
@media (min-width: 1001px) {
  .ap3--simple .ap3__cards { height: clamp(380px, 52vh, 460px); }
  .ap3--simple.ap3--pinned { height: 230vh; }
  .ap3--simple.ap3--pinned .ap3__pin { top: max(96px, calc(50vh - 240px)); }
  .ap3--simple .ap3__body { padding: clamp(24px, 2.6vw, 38px); }
}
@media (max-width: 1000px) {
  .ap3--simple .ap3__body { flex-direction: column; align-items: flex-start; padding-top: 120px; }
  .ap3--simple .ap3s__copy { max-width: none; }
}
/* Projets sélectionnés : visuels fixes, sans animation */
.stack__visual, .stack__visual * { animation: none !important; transition: none !important; }
.stack__visual img { transform: none !important; }

/* Approche v5 : étapes au clic (onglets), plus de défilement épinglé */
.ap3__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ap3__tab { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 18px 10px 14px; border: 0; border-radius: 999px; background: #fff; color: var(--ink, #1D1D1F); font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); transition: background-color .3s ease, color .3s ease; }
.ap3__tab span { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--muted); transition: color .3s ease; }
.ap3__tab:hover { background: #EDEDF1; }
.ap3__tab[aria-pressed="true"] { background: #1D1D1F; color: #fff; }
.ap3__tab[aria-pressed="true"] span { color: var(--orange-brand); }
.ap3s__list { list-style: none; margin: 0; padding: 0; flex: none; width: clamp(220px, 22vw, 300px); align-self: flex-end; }
.ap3s__list li { position: relative; padding: 8px 0 8px 20px; border-top: 1px solid var(--hair, rgba(0,0,0,.08)); font-size: 14.5px; font-weight: 500; }
.ap3s__list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 2px; background: var(--orange-brand); }
@media (min-width: 1001px) {
  .ap3--simple .ap3__cards { height: clamp(360px, 46vh, 420px); }
  .ap3--simple .ap3__body { align-items: flex-end; }
  .ap3--simple .ap3s__copy { flex: 1; max-width: 400px; }
  .ap3--simple .ap3s__vis { align-self: flex-start; order: 3; position: absolute; top: clamp(24px, 2.6vw, 38px); right: clamp(24px, 2.6vw, 38px); }
}
@media (max-width: 1000px) {
  .ap3__tabs { display: none; }
  .ap3--simple .ap3__num { font-size: 52px; top: 22px; left: 22px; }
  .ap3--simple .ap3__body { padding-top: 84px; gap: 18px; }
  .ap3--simple .ap3s__vis { position: absolute; top: 18px; right: 18px; width: 84px; height: 56px; border-radius: 14px; }
  .ap3--simple .ap3s__vis svg { width: 84px; height: 56px; }
  .ap3s__list { width: 100%; }
}

/* Approche : carte sélectionnée en dark mode */
.ap3--simple .ap3__card.is-active { background: #1D1D1F; color: #F5F5F7; box-shadow: 0 40px 80px -44px rgba(0,0,0,.55); }
.ap3--simple .ap3__card.is-active .ap3__title { color: #fff; }
.ap3--simple .ap3__card.is-active .ap3__text { color: #A1A1A6; }
.ap3--simple .ap3__card.is-active .ap3__tag { color: var(--orange-brand); }
.ap3--simple .ap3__card.is-active .ap3s__list li { border-top-color: rgba(255,255,255,.12); color: #E5E5EA; }
.ap3--simple .ap3__card.is-active .ap3s__vis { background: #2C2C30; }
.ap3--simple .ap3__card.is-active .ap3s__vis [fill="#1D1D1F"] { fill: #F5F5F7; }
.ap3--simple .ap3__card.is-active .ap3s__vis [fill="#fff"] { fill: #2C2C30; stroke: #636366; }
.ap3--simple .ap3__card.is-active .ap3s__vis [stroke="#D2D2D7"] { stroke: #48484A; }
.ap3--simple .ap3__card.is-active .ap3s__vis [fill="#48484A"] { fill: #1D1D1F; }
@media (max-width: 1000px) {
  .ap3--simple .ap3__card, .ap3--simple .ap3__card.is-active { background: #1D1D1F; box-shadow: none; }
}
/* Chiffres de l'approche plus discrets */
@media (min-width: 1001px) { .ap3--simple .ap3__num { font-size: clamp(56px, 5vw, 76px); } }
@media (max-width: 1000px) { .ap3--simple .ap3__num { font-size: 40px; top: 24px; } .ap3--simple .ap3__body { padding-top: 76px; } }

/* Outils du quotidien v5 : Figma en vedette + trois familles */
.tg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 12px; }
.tg__feat { grid-row: 1 / 3; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 260px; padding: 24px; border-radius: 22px; background: var(--orange-brand); color: #1D1D1F; }
.tg__feat::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; border: 28px solid rgba(29,29,31,.08); }
.tg__feat-ic { width: 56px; height: 56px; border-radius: 16px; background: #1D1D1F; color: var(--orange-brand); display: inline-flex; align-items: center; justify-content: center; }
.tg__feat-ic .icon { width: 28px; height: 28px; }
.tg__feat-txt { display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; }
.tg__feat-name { font-size: clamp(36px, 3.4vw, 52px); font-weight: 800; letter-spacing: -0.06em; line-height: .95; }
.tg__feat-cat { font-size: 14px; font-weight: 500; color: rgba(29,29,31,.72); }
.tg__feat-tag { position: absolute; top: 24px; right: 24px; padding: 5px 10px; border-radius: 99px; background: rgba(29,29,31,.1); font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .02em; }
.tg__group { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 20px; background: #F5F5F7; }
.tg__group:nth-child(4) { grid-column: 2 / 4; }
.tg__label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.tg__tools { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tg__group:nth-child(4) .tg__tools { flex-wrap: nowrap; }
.tg__tool { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.05); font-size: 15px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; transition: transform .4s var(--ease-out), box-shadow .3s ease; }
.tg__tool:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 12px 24px -14px rgba(0,0,0,.3); }
.tg__ic { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #F5F5F7; }
.tg__ic .icon { width: 18px; height: 18px; }
.tg__ic .tool__logo { width: 22px; height: 22px; }
.tg__tool--sun .tg__ic { background: #FFF1CC; color: #B07A00; }
.tg__tool--rose .tg__ic { background: #FFE1DE; color: #D2443C; }
.tg__tool--clay .tg__ic { background: #F7E4D8; color: #B85C38; }
.tg__tool--mint .tg__ic { background: #DDF2EE; color: #0F766E; }
.tg__tool--sky .tg__ic { background: #E3E8FF; color: #4559D6; }
@media (max-width: 1200px) and (min-width: 1001px) { .tg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tg__feat { grid-row: auto; grid-column: 1 / -1; min-height: 200px; } .tg__group:nth-child(4) { grid-column: 1 / -1; } }
@media (max-width: 1000px) { .tg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tg__feat { grid-row: auto; grid-column: 1 / -1; min-height: 200px; } .tg__group:nth-child(4) { grid-column: 1 / -1; } }
@media (max-width: 560px) { .tg { grid-template-columns: minmax(0, 1fr); } .tg__group:nth-child(4) .tg__tools { flex-wrap: wrap; } }
@media (max-width: 560px) { .tg__group { padding: 14px; } .tg__tool { font-size: 14px; gap: 8px; padding: 5px 10px 5px 5px; } .tg__ic { width: 28px; height: 28px; border-radius: 8px; } .tg__ic .icon { width: 16px; height: 16px; } }
.tg__feat::after { display: none; }
@media (min-width: 1201px) {
  .tg__group:nth-child(2) { grid-column: 2 / 4; }
  .tg__group:nth-child(3) { grid-column: 2; }
  .tg__group:nth-child(4) { grid-column: 3; }
}
.tg__group:nth-child(4) .tg__tools { flex-wrap: wrap; }
/* Bandeau défilant plus fin */
.marquee { font-size: clamp(32px, 4.6vw, 68px); gap: clamp(24px, 3vw, 40px); letter-spacing: -0.05em; }
.marquee--2 { -webkit-text-stroke-width: 1px; }
.marquee-wrap { padding-top: clamp(48px, 5vw, 80px); }

/* Outils v6 : Figma en sombre sous l'accroche, familles à droite */
.sk2__tools .sk2__intro { gap: 20px; }
.sk2__tools .tg__feat { margin-top: auto; grid-row: auto; min-height: 220px; background: #1D1D1F; color: #F5F5F7; }
.sk2__tools .tg__feat-ic { background: var(--orange-brand); color: #1D1D1F; }
.sk2__tools .tg__feat-cat { color: #A1A1A6; }
.sk2__tools .tg__feat-tag { background: rgba(255,255,255,.1); color: #E5E5EA; }
.sk2__tools .tg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: stretch; }
.sk2__tools .tg__group:nth-child(1) { grid-column: 1 / -1; }
.sk2__tools .tg__group:nth-child(2) { grid-column: 1; }
.sk2__tools .tg__group:nth-child(3) { grid-column: 2; }
@media (max-width: 560px) { .sk2__tools .tg { grid-template-columns: minmax(0, 1fr); } .sk2__tools .tg__group:nth-child(n) { grid-column: 1; } }
@media (min-width: 1001px) { .sk2__tools { align-items: stretch; } .sk2__tools .tg { height: 100%; grid-template-rows: 1fr 1fr; } }
@media (min-width: 1001px) { .sk2__tools .tg__group { justify-content: space-between; } }
/* Outils v7 : trois familles en lignes, sans trou */
@media (min-width: 1001px) {
  .sk2__tools .tg { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; height: 100%; }
  .sk2__tools .tg__group:nth-child(n) { grid-column: 1; flex-direction: row; align-items: center; justify-content: flex-start; gap: 18px; padding: 14px 18px; }
  .sk2__tools .tg__label { flex: none; width: 118px; }
  .sk2__tools .tg__tools { flex-wrap: wrap; }
}

/* Approche : cartes en light mode sur mobile et tablette */
@media (max-width: 1000px) {
  .ap3--simple .ap3__card, .ap3--simple .ap3__card.is-active { background: #fff; color: var(--ink, #1D1D1F); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
  .ap3--simple .ap3__card .ap3__title, .ap3--simple .ap3__card.is-active .ap3__title { color: var(--ink, #1D1D1F); }
  .ap3--simple .ap3__card .ap3__text, .ap3--simple .ap3__card.is-active .ap3__text { color: var(--muted); }
  .ap3--simple .ap3__card .ap3__tag, .ap3--simple .ap3__card.is-active .ap3__tag { color: var(--orange-ink); }
  .ap3--simple .ap3__card .ap3s__list li, .ap3--simple .ap3__card.is-active .ap3s__list li { border-top-color: var(--hair, rgba(0,0,0,.08)); color: var(--ink, #1D1D1F); }
  .ap3--simple .ap3__card .ap3s__vis, .ap3--simple .ap3__card.is-active .ap3s__vis { background: #F5F5F7; }
  .ap3--simple .ap3__card.is-active .ap3s__vis [fill="#1D1D1F"] { fill: #1D1D1F; }
  .ap3--simple .ap3__card.is-active .ap3s__vis [fill="#fff"] { fill: #fff; stroke: #D2D2D7; }
  .ap3--simple .ap3__card.is-active .ap3s__vis [stroke="#D2D2D7"] { stroke: #D2D2D7; }
}

/* Compétences clés : bloc compact sur mobile (une seule ligne qui défile) */
@media (max-width: 760px) {
  .sk2__skills { gap: 14px; padding: 18px 18px 16px; }
  .sk2__skills .sk2__intro { gap: 8px; }
  .sk2__skills .sk__head { padding-bottom: 8px; font-size: 11px; }
  .sk2__skills .sk2__lead { font-size: 18px; line-height: 1.2; }
  .sk2__skills .sk2__lead span { display: none; }
  .sk2__ticks { gap: 0; margin: 0 -18px; }
  .sk-tick--b { display: none; }
  .sk-tick__track { gap: 8px; padding-right: 8px; animation-duration: 36s; }
  .sk-tick__item { padding: 7px 12px; font-size: 13px; }
}
@media not all {
  .sk2__ticks { margin: 0; }
  .sk-tick__track > :nth-child(n + 5) { display: none; }
}

/* Compétences clés : fermé sur mobile, s'ouvre au clic */
.sk2__more { display: none; }
@media (max-width: 760px) {
  .sk2__skills { cursor: pointer; }
  .sk2__skills.is-open { cursor: default; }
  .sk2__more { display: inline-flex; align-items: center; justify-content: center; gap: 6px; align-self: flex-start; min-height: 40px; padding: 8px 14px 8px 16px; border: 0; border-radius: 999px; background: rgba(255,255,255,.1); color: #F5F5F7; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
  .sk2__more svg { fill: currentColor; transition: transform .3s ease; }
  .sk2__more[aria-expanded="true"] svg { transform: rotate(180deg); }
  .sk2__more:focus-visible { outline: 2px solid var(--orange-brand); outline-offset: 2px; }
  .sk2__skills.is-open .sk2__ticks { margin: 0; gap: 8px; -webkit-mask-image: none; mask-image: none; }
  .sk2__skills.is-open .sk-tick--b { display: block; }
  .sk2__skills.is-open .sk-tick__track { animation: none; flex-wrap: wrap; width: auto; padding-right: 0; }
  .sk2__skills.is-open .sk-tick__track > :nth-child(n + 10) { display: none; }
  .sk2__skills.is-open .sk-tick__track > :nth-child(-n + 9) { display: block; }
}

/* Icônes des boutons : même couleur que le texte du bouton */
.btn svg, .svc__toggle svg { fill: currentColor; }

/* Approche v6 : trois cartes simples qui se retournent (verso en dark mode) */
.ap4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ap4__card { perspective: 1600px; }
.ap4__inner { display: grid; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.7, 0, .2, 1); }
.ap4__card.is-flipped .ap4__inner { transform: rotateY(180deg); }
.ap4__face { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 20px; min-height: 300px; padding: clamp(24px, 2.4vw, 32px); border-radius: var(--radius-l, 28px); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ap4__front { background: #fff; color: var(--ink, #1D1D1F); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.ap4__back { background: #1D1D1F; color: #F5F5F7; transform: rotateY(180deg); }
.ap4__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.ap4__tag { font-family: var(--mono); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.ap4__back .ap4__tag { color: var(--orange-brand); }
.ap4__vis { flex: none; width: 96px; height: 64px; border-radius: 16px; background: #F5F5F7; display: inline-flex; align-items: center; justify-content: center; }
.ap4__vis svg { display: block; width: 84px; height: 56px; }
.ap4__copy { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ap4__front .ap4__flip, .ap4__back .ap4__flip { margin-top: auto; }
.ap4__title { font-size: clamp(24px, 2vw, 30px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.05; text-wrap: balance; }
.ap4__text { color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.ap4__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex: 1; }
.ap4__list li { position: relative; padding: 12px 0 12px 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: 16px; font-weight: 500; line-height: 1.35; color: #E5E5EA; }
.ap4__list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 2px; background: var(--orange-brand); }
.ap4__flip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px 10px 18px; border: 0; border-radius: 999px; background: #F5F5F7; color: #1D1D1F; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.ap4__flip svg { fill: currentColor; transition: transform .4s var(--ease-out, ease); }
.ap4__flip:hover { background: var(--orange-brand); color: #1D1D1F; }
.ap4__flip:hover svg { transform: rotate(90deg); }
.ap4__flip--back { background: rgba(255,255,255,.1); color: #F5F5F7; }
.ap4__flip--back:hover svg { transform: rotate(-90deg); }
.ap4__flip:focus-visible { outline: 2px solid var(--orange-brand); outline-offset: 3px; }
@media (max-width: 1000px) { .ap4 { grid-template-columns: minmax(0, 1fr); } .ap4__face { min-height: 0; gap: 16px; } }
@media not all { .ap4__inner { transition: none; } }

/* Services : visuels des étapes toujours en dark mode */
.vx-paper { background: #1D1D1F !important; color: #F5F5F7 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.vx-paper .week .d { color: #8E8E93; }
.vx-week span[style*="#1D1D1F"] { background: #F5F5F7 !important; color: #1D1D1F !important; }
.vx-week span[style*="#E8E8ED"] { background: #3A3A3C !important; color: #F5F5F7 !important; }
.vx-lib__list li { color: #A1A1A6; }
.vx-lib__list li.on { background: #2C2C2E; color: #fff; }
.vx-lib__prev { background: #2C2C2E; }
.vx-btn[style*="background:#fff"] { background: #3A3A3C !important; color: #F5F5F7; box-shadow: none !important; }
.vx-paper .vx-sw, .vx-paper .vx-tok i { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.vx-tag { background: rgba(100,210,195,.16); color: #64D2C3; }
.vx-note { color: #1D1D1F; }
.vx-bars i { background: #48484A; }
.vx-phone { border-color: #48484A; background: #2C2C2E; }
.vx-paper .vx-bar[style*="#1D1D1F"] { background: #F5F5F7 !important; }
.vx-paper .vx-bar[style*="#E8E8ED"] { background: #48484A !important; }
.vx-hero { background: #3A3A3C; }
.vx-res { background: #2C2C2E; }
.vx-desk { box-shadow: inset 0 0 0 1px #3A3A3C; }
.vx-desk__top { background: #2C2C2E; }
.vx-card { background: #3A3A3C; }
.vx-cta[style*="#1D1D1F"] { background: #F5F5F7 !important; color: #1D1D1F; }
.vx-paper svg circle[fill="#fff"] { fill: #1D1D1F; }
.vx-paper svg circle[stroke="#1D1D1F"] { stroke: #F5F5F7; }
.vx-paper svg path[stroke="#D2D2D7"] { stroke: #48484A; }
.vx-paper svg text { fill: #A1A1A6; }
.vx-paper .g-screen { background: #2C2C2E; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.vx-paper .g-screen > span:not(:first-child) { background: #48484A; }

/* Outils du quotidien v6 : Figma en vedette + une liste sobre, aux couleurs de l'identité */
.tl3 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; }
.tl3__row { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 24px; padding: 22px 0; border-top: 1px solid var(--hair, rgba(0,0,0,.08)); }
.tl3__row:last-child { border-bottom: 1px solid var(--hair, rgba(0,0,0,.08)); }
.tl3__label { font-family: var(--mono); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.tl3__tools { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.tl3__tool { position: relative; padding-left: 20px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.2; color: var(--ink, #1D1D1F); }
.tl3__tool::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 2px; background: var(--orange-brand); }
@media (min-width: 1001px) { .sk2__tools .tl3 { height: 100%; } }
@media (max-width: 560px) { .tl3__row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px 0; } }

/* Outils v6.1 : noms plus petits, liste alignée sur le bloc Figma (ordinateur) */
.tl3__tools { gap: 6px 22px; }
.tl3__tool { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; padding-left: 16px; }
.tl3__tool::before { width: 8px; }
@media (min-width: 1001px) {
  .sk2__tools { grid-template-rows: auto auto 1fr; row-gap: 20px; align-items: stretch; }
  .sk2__tools .sk2__intro { display: contents; }
  .sk2__tools .sk__head { grid-column: 1; grid-row: 1; }
  .sk2__tools .sk2__lead { grid-column: 1; grid-row: 2; }
  .sk2__tools .tg__feat { grid-column: 1; grid-row: 3; margin-top: 0; }
  .sk2__tools .tl3 { grid-column: 2; grid-row: 3; height: auto; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .tl3__row { padding: 0 4px; }
}
@media (min-width: 1001px) { .sk2__tools .tl3 { grid-template-columns: minmax(0, 1fr); justify-content: stretch; } }

/* Ils m'ont fait confiance : logos des marques, petits et monochromes */
.logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: center; gap: 12px 28px; }
.logos__item { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 10px; opacity: .62; transition: opacity .3s ease; }
a.logos__item:hover, a.logos__item:focus-visible { opacity: 1; }
.logos__img { display: block; width: auto; height: 22px; max-width: 100%; object-fit: contain; }
.logos__img--lockself, .logos__img--france-tv, .logos__img--prisma { height: 18px; }
.logos__img--la-tribune, .logos__img--roole { height: 26px; }
@media (max-width: 1000px) { .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 24px; } }
@media (max-width: 560px) { .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; } .logos__item { height: 44px; } }

/* Sélecteur de langue */
.lang { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .02em; }
.lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 0 6px; border-radius: 999px; color: var(--muted); text-decoration: none; transition: color .2s ease, background-color .2s ease; }
.lang a:hover { color: var(--ink, #1D1D1F); background: rgba(0,0,0,.05); }
.lang a[aria-current="true"] { color: var(--ink, #1D1D1F); font-weight: 600; }
.lang span { color: var(--line-2, #D2D2D7); }
.lang--menu { justify-content: center; font-size: 14px; margin-bottom: 8px; }
.lang--menu a { min-width: 44px; min-height: 44px; }
.header-actions .lang { margin-right: 4px; }