/* Polices hébergées sur le site (Alpino : Fontshare, licence ITF FFL ; SUSE : Google Fonts, OFL) */
@font-face { font-family: 'Alpino'; src: url('fonts/alpino-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: fallback; }
@font-face { font-family: 'SUSE'; src: url('fonts/suse-latin.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; }
/* 08-planche : la planche contact. Alpino 800 (titres, logo) et SUSE (texte), un bleu saturé en champs pleins, papier et nuit. Forme palier : angles vifs, aucun rayon. */
:root {
  --bg: #F2F4FF;
  --surface: #E6EAFF;
  --ink: #0E1433;
  --muted: #434A6E;
  --accent: #2B4BFF;
  --accent-ink: #ffffff;
  --night: #0E1433;
  --night-ink: #ffffff;
  --night-muted: #C9CFEE;
  --field: #2B4BFF;
  --pastel: #D9E0FF;
  --field-ink: #ffffff;
  --font-display: 'Alpino', 'Arial Black', system-ui, sans-serif;
  --font: 'SUSE', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(1.875rem, 1.2rem + 2.4vw, 3.5rem);
  --step-name: clamp(2.2rem, 1rem + 5.4vw, 7.4rem);
  --m: clamp(16px, 2vw, 28px);
  --gap: clamp(16px, 2vw, 28px);
  --ease: cubic-bezier(0.38, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M3 45V33h11V23h10V13h10V3h11v42z'/%3E%3C/svg%3E");
  /* kit Soarway et anneau */
  --sk-accent: #2B4BFF;
  --sk-ink: #0E1433;
  --sk-paper: #F2F4FF;
  --sk-font-display: var(--font-display);
  --sk-font-text: var(--font);
  --sk-font: var(--font);
  --sk-r-card: 0;
  --sk-r-ctl: 0;
  --sk-field: #D9E0FF;
  --sw-accent: #ffffff;
  --sw-paper: #2B4BFF;
  --sw-ink: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--step-body)/1.5 var(--font); font-feature-settings: 'tnum' 1; overflow-x: clip; }
h1, h2, h3, p, ul, figure, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip { position: absolute; left: 8px; top: -60px; z-index: 50; padding: 12px 16px; background: var(--ink); color: #fff; }
.skip:focus { top: 8px; }

/* Boutons : carrés, à plat, un seul remplissage */
.btn {
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.6em; min-height: 52px; padding: 0 24px; border: 0; border-radius: 0;
  background: var(--accent); color: var(--accent-ink); font: 600 var(--step-body)/1 var(--font); text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms;
}
.btn::before { content: ""; flex: none; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--sym) center / contain no-repeat; mask: var(--sym) center / contain no-repeat; transition: translate 240ms var(--ease-out); }
.btn:hover::before { translate: 2px -2px; }
.btn:hover { background: var(--ink); }
.btn:active { transform: scale(0.97); }
.btn--small { min-height: 44px; padding: 0 18px; font-size: var(--step-small); }
.btn--light { background: var(--bg); color: var(--ink); }
.btn--light:hover { background: var(--surface); }

/* En-tête */
.top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px var(--m); }
.mark { display: inline-flex; align-items: center; gap: 0.32em; color: var(--accent); text-decoration: none; font: 800 1.6rem/1 var(--font-display); letter-spacing: -0.02em; }
.mark svg { height: 1.15em; width: 1.15em; flex: none; }
.mark__word { color: var(--ink); white-space: nowrap; }
.mark__word span { font-weight: 400; color: var(--muted); }
.top__links { display: flex; gap: clamp(18px, 2.4vw, 36px); font-size: var(--step-small); font-weight: 600; }
.top__links a { text-decoration: none; }
.top__links a:hover { color: var(--accent); }
.top__end { display: flex; align-items: center; gap: 18px; }
.lang { font-size: var(--step-small); color: var(--muted); }
.lang b { color: var(--ink); }

/* Héros : le nom, la bande de texte, puis la planche */
.hero__h1 { padding: clamp(20px, 4vw, 56px) var(--m) 0; font: 800 var(--step-name)/0.98 var(--font-display); letter-spacing: -0.035em; }
.ln { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.ln > span { display: inline-block; }

/* Héros : planche contact de quatre fenêtres d'outils du kit, une par métier */
.hero { display: flex; flex-direction: column; min-height: calc(100svh - 130px); }

/* Planche */

.run { display: grid; grid-template-columns: clamp(120px, 13vw, 190px) minmax(0, 1fr); column-gap: var(--gap); margin-top: clamp(22px, 2.6vw, 38px); transition: opacity 240ms var(--ease-out); }

/* Têtes de section */
.sechead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 20px; align-items: start; padding: 0 var(--m); }
.sechead h2 { grid-column: 1 / 7; font: 800 var(--step-head)/1.02 var(--font-display); letter-spacing: -0.03em; }
.sechead > p { grid-column: 8 / 13; font-size: var(--step-body); max-width: 52ch; }

/* Anneau : champ bleu plein */

/* Projets : cartes de réalisation, capture réelle dans un navigateur dessiné */
.work { padding: clamp(88px, 11vw, 176px) 0 clamp(72px, 9vw, 140px); }
.work .sechead { margin-bottom: clamp(32px, 5vw, 72px); }

/* Un partenaire plutôt que cinq : nuit */
.partner { background: var(--night); color: var(--night-ink); padding-block: clamp(80px, 10vw, 160px); }
.partner .sechead { margin-bottom: clamp(36px, 5vw, 72px); }
.partner h2 { position: sticky; top: 24px; }

/* Fragments du kit */
.kit { padding: clamp(88px, 11vw, 176px) var(--m) 0; }
.kit .sk--flow { margin: 0; }

/* Configurateur : champ bleu plein */

@keyframes tick { from { opacity: 0.25; translate: 0 6px; } to { opacity: 1; translate: 0; } }

/* Contact */
.ca-form { max-width: 40rem; margin: clamp(40px, 5vw, 72px) auto 0; padding-bottom: clamp(80px, 9vw, 140px); }
.contact { padding: clamp(88px, 11vw, 176px) var(--m) clamp(80px, 9vw, 140px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 32px; align-items: start; }
.contact > * { min-width: 0; }

.contact h2 { font: 800 var(--step-head)/1.02 var(--font-display); letter-spacing: -0.03em; }

.form { grid-column: 7 / 13; display: grid; gap: 14px; }
.field { display: grid; gap: 8px; }
.field span, .budget legend { font-size: var(--step-small); font-weight: 600; }
.field input, .field textarea { width: 100%; padding: 14px 16px; border: 2px solid transparent; border-radius: 0; background: var(--surface); color: var(--ink); font: inherit; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 3px solid var(--accent); outline-offset: 0; background: var(--bg); }
.budget { border: 0; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.budget legend { padding: 0; margin-bottom: 10px; }
.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--surface); font-size: var(--step-small); font-weight: 600; transition: background-color 220ms, color 220ms, transform 160ms; }
.chip input:checked + span { background: var(--ink); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }
.chip:active span { transform: scale(0.97); }
.form__end { margin-top: 14px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* Pied de page : le logo en pleine largeur */
.foot { background: var(--night); color: var(--night-ink); padding: clamp(72px, 9vw, 130px) var(--m) 28px; }
.mark--foot { display: flex; width: 100%; font-size: 12.2vw; justify-content: flex-start; color: var(--accent); line-height: 0.95; }
.mark--foot .mark__word { color: #fff; }
.mark--foot .mark__word span { color: var(--night-muted); }
.foot__line { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: baseline; margin-top: clamp(32px, 4vw, 64px); font-size: var(--step-small); }
.foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
.foot__links a { text-decoration: none; }
.foot__links a:hover { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 2px; }
.foot__what { color: var(--night-ink); }
.foot__year { text-align: right; color: var(--night-muted); }

/* Entrées : un titre, puis le texte, puis l'objet (transform et opacité) */
.js [data-reveal] { opacity: 0; translate: 0 24px; transition: opacity 700ms var(--ease-out), translate 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].is-in { opacity: 1; translate: 0; }
.js [data-rise] { animation: rise 800ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms); }
.js [data-line] { animation: line 900ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes rise { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0; } }
@keyframes line { from { translate: 0 105%; } to { translate: 0; } }

/* Téléphone : la planche passe à trois vignettes par ligne */
@media (max-width: 900px) {
  .top__links, .lang { display: none; }

  .sheet__head h3, .sheet__head p, .sechead h2, .sechead > p, .compose h2, .compose__intro p { grid-column: 1 / 13; }
  .run { grid-template-columns: 1fr; row-gap: 10px; }

  .partner h2 { position: static; }

  .contact__intro, .form { grid-column: 1 / 13; }
  .mark { font-size: 1.4rem; }
  .foot__line { grid-template-columns: 1fr; gap: 10px; }
  .foot__links { justify-content: flex-start; }
  .foot__year { text-align: left; }
}
@media (max-width: 520px) {
  .top { padding-block: 10px; }
  .btn--small { padding: 0 14px; }
  .mark { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; translate: 0; transition: none; }
  .js [data-rise], .js [data-line] { animation: none; }

}

@media (max-width: 400px) {
  .top { gap: 10px; }
  .mark { font-size: 1.02rem; }
  .btn--small { padding: 0 12px; font-size: 0.8125rem; }
}

/* ===== 08-reel : sections du vrai site ===== */
/* Services : lignes larges, nom à gauche, phrase, livrables */
.svc { padding: clamp(88px, 11vw, 176px) 0 clamp(64px, 8vw, 120px); }
.svc .sechead { margin-bottom: clamp(32px, 5vw, 72px); }
.svc__list { list-style: none; margin: 0; padding: 0 var(--m); }
.svc__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 8px; align-items: baseline; padding: clamp(18px, 2.4vw, 32px) 0; border-top: 3px solid var(--ink); }
.svc__row:last-child { border-bottom: 3px solid var(--ink); }
.svc__row h3 { grid-column: 1 / 5; font: 800 var(--step-head)/1 var(--font-display); letter-spacing: -0.03em; }
.svc__row > p { grid-column: 5 / 9; font-size: var(--step-lead); }
.svc__tags { grid-column: 9 / 13; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.svc__tags li { padding: 6px 12px; background: var(--surface); font-size: var(--step-small); font-weight: 600; }
.svc__row:hover h3 { color: var(--accent); }

/* Pour qui : quatre champs pleins pastel */
.who { background: var(--pastel); padding-block: clamp(72px, 9vw, 140px); }
.who .sechead { margin-bottom: clamp(28px, 4vw, 56px); }
.who__grid { list-style: none; margin: 0; padding: 0 var(--m); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.who__c { background: var(--bg); padding: clamp(20px, 2.4vw, 32px); min-height: 15rem; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.who__c h3 { font: 800 var(--step-lead)/1.1 var(--font-display); letter-spacing: -0.015em; }
.who__c:first-child { background: var(--accent); color: var(--accent-ink); }

/* Accompagnement : fond nuit, deux colonnes */
.acc .sechead > p { color: var(--night-muted); }
.acc .sechead h2 { position: static; }
.acc__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); padding: 0 var(--m); }
.acc__col { border-top: 3px solid var(--night-ink); padding-top: 20px; }
.acc__col h3 { font: 800 var(--step-lead)/1.1 var(--font-display); margin-bottom: 20px; }
.acc__list { margin: 0; padding-left: 1.4em; display: grid; gap: 14px; color: var(--night-muted); }
.acc__list b { color: var(--night-ink); font-weight: 600; }

/* Projets réels */
.rp__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); padding: 0 var(--m); list-style: none; margin: 0; }
.rp { display: grid; gap: 14px; align-content: start; }
.rp__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--rp, var(--surface)); }
.rp__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: scale 900ms var(--ease-out); }
.rp:hover .rp__img img { scale: 1.04; }
.rp h3 { font: 800 var(--step-lead)/1.1 var(--font-display); }
.rp p { color: var(--muted); }
.rp__tags { font-size: var(--step-small); font-weight: 600; color: var(--ink); }

/* Héros : vrais projets à la place des fenêtres d'outils */

@media (max-width: 900px) {
  .svc__row { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .svc__tags { order: 1; }
  .svc__row > p { order: 2; }
  .who__grid, .rp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc__cols { grid-template-columns: 1fr; row-gap: 40px; }

}
@media (max-width: 520px) {
  .who__grid { grid-template-columns: 1fr; }
  .who__c { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .rp__img img { transition: none; } }

ul.acc__list { list-style: none; padding-left: 0; }

/* ===== Pages intérieures ===== */
.svc__row h3 a, .who__c h3 a, .rp h3 a, .card-link { color: inherit; text-decoration: none; }
.svc__row h3 a::after, .who__c h3 a::after, .rp h3 a::after { content: ' →'; }
.who__c, .rp, .svc__row { position: relative; }
.who__c h3 a::before, .rp h3 a::before { content: ''; position: absolute; inset: 0; }
.rp:hover h3, .who__c:hover h3 { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 3px; }

.ph { padding: clamp(32px, 6vw, 96px) var(--m) clamp(56px, 7vw, 112px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 28px; align-items: end; }
.ph h1 { grid-column: 1 / 10; font: 800 clamp(2.4rem, 1.2rem + 4.6vw, 6rem)/0.98 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; }
.ph p { grid-column: 1 / 7; font-size: var(--step-lead); max-width: 40ch; }
.ph .btn { grid-column: 8 / 13; justify-self: start; }
.ph__img { grid-column: 1 / 13; margin-top: clamp(16px, 3vw, 40px); }
.ph__img img { width: 100%; height: auto; max-height: 72vh; object-fit: cover; object-position: top; display: block; background: var(--surface); }

.block { padding: clamp(72px, 9vw, 140px) 0; }
.block--surface { background: var(--surface); }
.block--pastel { background: var(--pastel); }
.block .sechead { margin-bottom: clamp(28px, 4vw, 56px); }
.prose { padding: 0 var(--m); max-width: 68ch; display: grid; gap: 1em; }
.prose h2 { font: 800 var(--step-lead)/1.15 var(--font-display); margin-top: 1.2em; }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: 0.4em; }

.cta-band { background: var(--accent); color: var(--accent-ink); padding: clamp(64px, 8vw, 120px) var(--m); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 24px; align-items: end; }
.cta-band h2 { grid-column: 1 / 9; font: 800 var(--step-head)/1.02 var(--font-display); letter-spacing: -0.03em; }
.cta-band .btn { grid-column: 9 / 13; justify-self: end; background: var(--bg); color: var(--ink); }
.cta-band .btn:hover { background: var(--ink); color: #fff; }

.foot__map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(40px, 5vw, 72px); font-size: var(--step-small); }
.foot__map p { color: var(--night-muted); margin-bottom: 10px; }
.foot__map ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot__map a { color: var(--night-ink); text-decoration: none; }
.foot__map a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .ph h1, .ph p, .ph .btn, .cta-band h2, .cta-band .btn { grid-column: 1 / 13; justify-self: start; }
  .foot__map { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}
.rp__grid + .gal { margin-top: var(--gap); }
.gal { list-style: none; margin: 0; padding: 0 var(--m); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.gal img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--surface); }
@media (max-width: 520px) { .gal { grid-template-columns: 1fr 1fr; } .gal li:first-child { grid-column: 1 / 3; } }

/* S qui se dessine (repris du 07) : la route relie les quatre métiers */
.hero { position: relative; }

@media (prefers-reduced-motion: no-preference) {

  @keyframes route-draw { to { stroke-dashoffset: 0; } }
  @keyframes route-fade { to { opacity: 1; } }
}

/* Bande défilante : le logo de Marggi */
.rp__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (prefers-reduced-motion: no-preference) {

  @keyframes marq { to { translate: -100% 0; } }
}
@media (max-width: 900px) { .rp__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Grille de projets : autant de colonnes que de cartes (1 carte = demi-largeur) */
.rp__grid:has(> .rp:only-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rp__grid:has(> .rp:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rp__grid:has(> .rp:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rp__grid:has(> .rp:only-child) .rp__img, .rp__grid:has(> .rp:nth-child(2):last-child) .rp__img { aspect-ratio: 4 / 3; }
@media (max-width: 900px) { .rp__grid:has(> .rp:nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .rp__grid:has(> .rp:only-child), .rp__grid:has(> .rp:nth-child(2):last-child) { grid-template-columns: 1fr; } }

/* ===== v16 : motion design d'après les références (docs/references-motion/choix.md) ===== */
/* 1. Jetons (Revolut, Mercury) */
:root {
  --dur-1: 150ms;
  --dur-2: 300ms;
  --dur-3: 400ms;
  --ease-std: cubic-bezier(0.15, 0.5, 0.5, 1);
  --ease-out: cubic-bezier(0.16, 0, 0.13, 1);
}
.js [data-reveal] { translate: 0 16px; transition: opacity var(--dur-3) var(--ease-std), translate var(--dur-3) var(--ease-out); transition-delay: calc(var(--i, 0) * 40ms); }
.js [data-rise] { animation-duration: 600ms; animation-timing-function: var(--ease-out); animation-delay: calc(var(--i, 0) * 60ms); }
.js [data-line] { animation-duration: 600ms; animation-timing-function: var(--ease-out); animation-delay: calc(var(--i, 0) * 70ms); }
.btn, .top__links a, .foot__map a { transition: background-color var(--dur-1) var(--ease-std), color var(--dur-1) var(--ease-std); }
.btn:active { scale: 0.97; transition: scale var(--dur-1) var(--ease-std); }

/* 2. Menu mobile qui s'ouvre en cercle depuis le bouton (Revolut, Karam) */
.menu-btn { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 0; background: var(--ink); color: var(--bg); font: 600 var(--step-small)/1 var(--font); cursor: pointer; position: relative; z-index: 41; }
.menu-btn__i { width: 16px; height: 10px; border-block: 2px solid currentColor; transition: border-color var(--dur-1), height var(--dur-2) var(--ease-out); }
.menu-btn[aria-expanded='true'] .menu-btn__i { height: 2px; border-bottom-color: transparent; }
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; }
  .top .btn--small { display: none; }
  .top__links { display: flex; position: fixed; inset: 0; z-index: 40; flex-direction: column; justify-content: center; gap: 8px; margin: 0; padding: 96px var(--m) 48px; background: var(--accent); list-style: none;
    clip-path: circle(0 at calc(100% - 52px) 36px); visibility: hidden; transition: clip-path var(--dur-3) var(--ease-out), visibility 0s var(--dur-3); }
  .top__links a { color: var(--accent-ink); font: 800 clamp(2rem, 9vw, 3rem)/1.1 var(--font-display); text-decoration: none; }
  .top.is-open .top__links { clip-path: circle(150% at calc(100% - 52px) 36px); visibility: visible; transition: clip-path var(--dur-3) var(--ease-out), visibility 0s; }
  .top.is-open .menu-btn { background: var(--bg); color: var(--ink); }
  html:has(.top.is-open) { overflow: hidden; }
}

/* 3. Espace client : la fenêtre perd ses marges et son arrondi au défilement (Qonto) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .kit--eco .eco-ps { animation: unmask linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes unmask { from { clip-path: inset(48px 64px round 24px); } to { clip-path: inset(0 0 round 0); } }
  }
}

/* 4. Accompagnement : titre collant, les étapes s'allument au passage (Mercury) */
@media (min-width: 901px) {
  .acc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-inline: var(--m); }
  .acc .sechead { grid-column: 1 / 6; display: block; padding: 0; align-self: start; position: sticky; top: 96px; margin: 0; }
  .acc .sechead > p { margin-top: 20px; }
  .acc__cols { grid-column: 7 / 13; grid-template-columns: 1fr; row-gap: 48px; padding: 0; }
}
.acc__list li { transition: color var(--dur-2) var(--ease-std); }
.acc__list b { transition: color var(--dur-2) var(--ease-std); }
.js .acc__list li:not(.is-lit) { color: #8A92BD; }
.js .acc__list li:not(.is-lit) b { color: var(--night-muted); }
.acc__list li.is-lit::marker { color: var(--accent-ink); }

/* 6. Bande Marggi : bords fondus (Clickway) */

/* 7. Téléphone : projets et profils calés carte par carte (Wise) */
@media (max-width: 600px) {
  .rp__grid, .who__grid, .rp__grid:has(> .rp:nth-child(3):last-child) { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m); overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 8px; }
  .rp__grid > *, .who__grid > * { scroll-snap-align: start; }
  .who__c { min-height: 13rem; }
}

/* 8. Bande d'appel : bordure conique qui tourne au survol (Karam) */
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cta-band .btn { border: 3px solid var(--bg); }
.cta-band .btn:hover, .cta-band .btn:focus-visible { color: var(--ink); border-color: var(--bg); background: var(--bg); }
@media (prefers-reduced-motion: no-preference) {
  .cta-band .btn:hover, .cta-band .btn:focus-visible { animation: spin-border 3s linear infinite; }
  @keyframes spin-border { to { --a: 360deg; } }
}

/* 5. Vidéo KARNET lancée à l'approche (Karam, Wise, Clickway) */
.rp__img video { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

/* 9. Icônes Lottie des services (Qonto) */
.svc__ico { display: inline-block; width: 1em; height: 1em; margin-right: 0.3em; vertical-align: -0.12em; }
.svc__ico svg { display: block; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { transition: none; }
  .menu-btn__i, .top__links { transition: none !important; }
  .js .acc__list li:not(.is-lit), .js .acc__list li:not(.is-lit) b { color: inherit; }
}
@media (max-width: 900px) {
  .top .mark { position: relative; z-index: 41; }
  .top.is-open .mark, .top.is-open .mark__word { color: var(--accent-ink); }
}
/* Rythme vertical resserré (inspecteur : écrans presque vides) */
.svc { padding-bottom: clamp(40px, 5vw, 72px); }

.kit--eco { padding-top: clamp(48px, 6vw, 96px); }

.rp h3 a::before { content: none; }
.rp__link { display: block; }

/* ===== v17 : réservation utilisable, bords arrondis, épuration ===== */
:root {
  --r-xl: 28px; --r-lg: 20px; --r-md: 14px; --r-sm: 10px;
  --sk-r-card: 20px; --sk-r-ctl: 10px;
  --rule: color-mix(in srgb, var(--ink) 14%, transparent);
}

/* Réserver un appel : jours, heures et navigation sont de vrais boutons */
.cal9 button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.cal9 button.cal9-d { background: var(--day); border: 2px solid transparent; transition: border-color var(--dur-1) var(--ease-std), background-color var(--dur-1) var(--ease-std); }
.cal9 button.cal9-d:hover { border-color: var(--e); }
.cal9 button.cal9-d.is-sel { background: var(--e); color: #fff; }
.cal9 button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cal9-nav button { display: grid; place-items: center; padding: 6px; border-radius: 6px; color: var(--e); }
.cal9-nav button:hover:not(:disabled) { background: var(--day); }
.cal9-nav button:disabled { opacity: 0.25; cursor: default; }
.cal9 button.cal9-s { width: 100%; border: 1px solid var(--btn); background: #fff; transition: border-color var(--dur-1) var(--ease-std); }
.cal9 button.cal9-s:hover, .cal9 button.cal9-s.is-hot { border-color: var(--e); }
.cal9 button.cal9-s.is-hot { background: var(--e); color: #fff; }
.cal9 button.cal9-s.is-hot i { background: #fff; }
.ca9-sum { margin: 0 0 14px; max-width: 30ch; font-size: var(--step-body); }
.ca9-btn { border: 0; cursor: pointer; font-family: var(--font); border-radius: var(--r-sm); }
.ca9-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.form__slot { padding: 14px 18px; border-radius: var(--r-sm); background: var(--pastel); color: var(--ink); font-weight: 600; }

/* Arrondis */
.btn, .menu-btn, .ca9-btn { border-radius: var(--r-sm); }
.field input, .field textarea, .form input:not([type=radio]):not([type=hidden]), .form textarea { border-radius: var(--r-sm); }
.chip span, .svc__tags li { border-radius: 999px; }
.rp__img, .ph__img img, .who__c, .eco-ps, .ca9-book, .pv__screen { border-radius: var(--r-lg); overflow: hidden; }
.shots__row .rp__img, .gal img { border-radius: var(--r-md); }

.top__links { border-radius: 0; }

/* Les blocs sombres et l'appel deviennent des panneaux posés sur la page */
.acc, .cta-band, .who { margin-inline: var(--m); border-radius: var(--r-xl); }
.cta-band { margin-bottom: var(--m); }

/* Épuration : filets plus légers, moins de traits */
.svc__row { border-top: 2px solid var(--rule); }
.svc__row:last-child { border-bottom: 2px solid var(--rule); }
.acc__col { border-top: 0; padding-top: 0; }
.svc__tags li { background: var(--surface); font-weight: 500; }
@media (max-width: 900px) {
  .ca7.ca9 { display: flex; flex-direction: column; gap: 24px; padding-block: 32px; }
  .ca7.ca9 .ca7-t > div:first-child, .ca7.ca9 .ca-act { padding-inline: 20px; }
  .ca7.ca9 .ca7-t { display: contents; }
  .ca7.ca9 .ca7-r { order: 1; }
  .ca7.ca9 .ca-act { order: 2; }
}
.acc { margin-top: var(--gap); }
@media (min-width: 901px) { .acc { padding-inline: clamp(28px, 4vw, 64px); } }
.who .sechead, .who__grid { padding-inline: clamp(16px, 2.6vw, 40px); }

/* ===== v18 : services en onglets avec l'espace client ===== */
.eco-lead { margin-top: 18px; max-width: 34ch; font-size: var(--step-lead); color: var(--muted); }
.eco-cap a { color: var(--ink); font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.eco-cap a:hover { color: var(--accent); }
.eco-pane--shot { padding: clamp(14px, 2.4vw, 32px); }
.eco-pane--shot img { width: 100%; height: auto; display: block; border-radius: var(--r-md); }
.kit--svc .eco-n { display: inline-flex; align-items: center; gap: 0.25em; }
.kit--svc .svc__ico { width: 0.8em; height: 0.8em; margin: 0; }

/* ===== v18 : présentations de projets en 3D ===== */
/* Scène : fond à la couleur de la marque, perspective pour les objets 3D en CSS */
.stage { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--rp, var(--surface)); border-radius: var(--r-lg); perspective: 1400px; }
.stage video, .stage__vid { width: 100%; height: 100%; object-fit: cover; display: block; }
.stage--wide { aspect-ratio: 16 / 9; max-height: 72vh; width: 100%; }
.stage--wide .stage__vid { object-fit: contain; }

/* Héros : trois téléphones en 3D et le site Marggi, plus large */

/* Navigateur 3D (Marggi) */
.b3d { width: 82%; border-radius: 12px; overflow: hidden; background: #fff; transform: rotateY(-16deg) rotateX(7deg); transform-style: preserve-3d; transition: transform var(--dur-3) var(--ease-out); }
.b3d__bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #ececec; font: 500 12px/1 system-ui, sans-serif; color: #555; }
.b3d__bar i { width: 9px; height: 9px; border-radius: 50%; background: #c9c9c9; }
.b3d__bar span { margin-left: 10px; padding: 4px 10px; border-radius: 6px; background: #fff; }
.b3d img { display: block; width: 100%; height: auto; }

/* Téléphone en CSS (cadre, écran arrondi) */

/* Inclinaison sous le pointeur (valeurs posées par app.js) */
.tilt.is-tilting { transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition-duration: var(--dur-1); }

/* Réalisations : bento, une grande case et deux petites */

/* Page des projets : la scène occupe la carte */
.pj__img:has(.stage) { background: none; }
.pj__img .stage { height: 100%; aspect-ratio: auto; }
.pj__img .stage .stage__vid { object-fit: contain; }

/* Études de cas : les écrans s'ouvrent en éventail à l'arrivée */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fan li { animation: fan-open linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    .fan li:nth-child(1) { --fx: 110%; --fr: -8deg; }
    .fan li:nth-child(2) { --fx: 36%; --fr: -3deg; }
    .fan li:nth-child(3) { --fx: -36%; --fr: 3deg; }
    .fan li:nth-child(4) { --fx: -110%; --fr: 8deg; }
    @keyframes fan-open { from { transform: translateX(var(--fx, 0)) rotate(var(--fr, 0)) scale(0.92); } to { transform: none; } }
  }
}

/* Une seule boucle décorative : le navigateur flotte doucement */
@media (prefers-reduced-motion: no-preference) {
  .b3d:not(.is-tilting) { animation: b3d-float 7s ease-in-out infinite alternate; }
  @keyframes b3d-float { from { transform: rotateY(-16deg) rotateX(7deg); } to { transform: rotateY(-8deg) rotateX(4deg) translateY(-6px); } }
}
@media (prefers-reduced-motion: reduce) { .b3d, .tel3d { transition: none; } }

/* Bento sur une rangée : KARNET en large, PactApp et Mijo plus étroits */

/* La vidéo remplit exactement sa scène (une hauteur en % ne se résout pas dans une grille à hauteur auto) */
.stage > video { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (max-width: 900px) { .kit--svc { padding-top: 88px; } }

/* v19 : composants intégrés comme chez Qonto, Mercury, Revolut, Wise.
   La fenêtre déborde du cadre (rognée à droite et en bas), une petite carte est posée dessus,
   chaque profil porte un fragment d'interface. Pas d'ombre : la carte est détourée par la couleur du cadre. */
.kit--svc .eco-pane { position: relative; overflow: hidden; }
@media (min-width: 901px) {
  /* La légende passe en haut du cadre, la fenêtre sort par la droite et par le bas */
  .kit--svc .eco-p { position: relative; }
  .kit--svc .eco-cap { position: absolute; top: 0; left: 0; right: 0; z-index: 1; margin: 0; padding: clamp(28px, 3vw, 44px) clamp(28px, 3.6vw, 56px) 0; font-size: var(--step-lead); line-height: 1.3; color: var(--ink); max-width: 30ch; box-sizing: content-box; }
  .kit--svc .eco-cap a { display: block; margin-top: 10px; font-size: var(--step-body); }
  .kit--svc .eco-pane { flex: none; height: clamp(560px, 46vw, 680px); box-sizing: border-box; place-items: start; align-content: start; padding: 168px 0 0 clamp(28px, 3.6vw, 56px); }
  .kit--svc .eco-pane > .sk.ap-screen, .kit--svc .eco-pane--shot img { width: 126%; max-width: none; }
  .kit--svc .eco-pane--shot { padding: 168px 0 0 clamp(28px, 3.6vw, 56px); }
  .kit--svc .eco-pane--shot img { border-radius: var(--r-md) 0 0 0; }
  .kit--svc .eco-float { top: 168px; bottom: auto; left: auto; right: clamp(16px, 2.4vw, 32px); translate: 0 -50%; }
}
.eco-float { position: absolute; left: 12px; bottom: 12px; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; max-width: min(21rem, calc(100% - 24px)); padding: 12px 18px 12px 12px; background: var(--bg); color: var(--ink); border: 6px solid var(--sk-field); border-radius: var(--r-lg); font: 400 var(--step-small)/1.35 var(--font); }
.eco-float i { grid-row: span 2; width: 38px; height: 38px; border-radius: 50%; background: var(--accent) center / 18px no-repeat; }
.eco-float--ok i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.eco-float--cal i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='3'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4'/%3E%3C/svg%3E"); }
.eco-float--up i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17l6-6 4 4 6-7M14 8h6v6'/%3E%3C/svg%3E"); }
.eco-float b { font-weight: 600; }
.eco-float span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .eco-p.is-on .eco-float { animation: float-in var(--dur-3) var(--ease-out) 180ms both; }
  @keyframes float-in { from { opacity: 0; transform: translateY(18px); } }
}

.who__c { justify-content: flex-start; gap: 12px; }
.who__c > p { margin: 0; }
.who__ui { margin: auto calc(-1 * clamp(20px, 2.4vw, 32px)) calc(-1 * clamp(20px, 2.4vw, 32px)) 0; padding: 14px 16px 18px; background: var(--bg); color: var(--ink); border-radius: var(--r-md) 0 0 0; font: 400 var(--step-small)/1.3 var(--font); transform: translateY(8px); transition: transform var(--dur-2) var(--ease-std); }
.who__c:first-child .who__ui { background: #fff; }
.who__c:hover .who__ui { transform: none; }
.who__ui > p { margin: 0 0 10px; font-weight: 600; }
.who__ui .sw { display: flex; align-items: center; gap: 6px; }
.who__ui .sw i { width: 26px; height: 26px; border-radius: 50%; background: var(--c); }
.who__ui .sw b { margin-left: auto; font: 800 1.25rem/1 var(--font-display); }
.who__ui .st, .who__ui .ch { display: flex; flex-wrap: wrap; gap: 6px; }
.who__ui .st span, .who__ui .ch span { padding: 4px 10px; border-radius: 99px; background: var(--surface); }
.who__ui .st .on { background: var(--accent); color: #fff; }
.who__ui .ch span + span::before { content: '→ '; color: var(--accent); }
.who__ui .ok { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.who__ui .ok li::before { content: ''; display: inline-block; width: 0.7em; height: 0.7em; margin-right: 0.7em; border: 1.5px solid var(--muted); border-radius: 50%; vertical-align: -0.05em; }
.who__ui .ok li.on::before { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 2px #fff; } /* taste-skill-ignore : pastille pleine, pas une ombre */

.acc__inv { margin-top: clamp(28px, 3vw, 44px); max-width: 21rem; padding: 18px 20px; background: var(--bg); color: var(--ink); border-radius: var(--r-lg); font: 400 var(--step-small)/1.4 var(--font); rotate: -2deg; }
.acc__inv p { margin: 0; color: var(--muted); }
.acc__inv .acc__inv-t { color: var(--ink); font: 800 var(--step-lead)/1.15 var(--font-display); margin-bottom: 6px; }
.acc__inv-b { display: flex; gap: 8px; margin-top: 14px; }
.acc__inv-b span { padding: 8px 14px; border-radius: var(--r-sm); background: var(--surface); font-weight: 600; }
.acc__inv-b span:first-child { background: var(--accent); color: #fff; }

.ca-form { max-width: none; margin: var(--gap) var(--m) clamp(80px, 9vw, 140px); padding: clamp(24px, 4vw, 64px); background: var(--pastel); border-radius: var(--r-xl); display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap) clamp(24px, 4vw, 64px); align-items: start; }
.ca-form .form { grid-column: auto; }
.ca-form__intro h3 { font: 800 var(--step-head)/1.05 var(--font-display); letter-spacing: -0.02em; margin: 0 0 16px; }
.ca-form__intro p { margin: 0; max-width: 34ch; }
.ca-form .field input, .ca-form .field textarea, .ca-form .chip span { background: var(--bg); }
@media (max-width: 900px) { .ca-form { grid-template-columns: 1fr; } }

/* v19.1 : corrections relevées sur iPhone (Safari, page zoomée) */
.acc__inv { grid-column: 1 / -1; width: 100%; box-sizing: border-box; }
.acc__inv-b { flex-wrap: wrap; }

/* Bords fondus de la bande Marggi : un voile de la couleur de la bande, pour garder la pilule pleine */

/* Calendrier étroit : sans zoom (Safari ne calcule pas 100cqw / 520px), créneaux sous le mois */
@container (max-width: 560px) {
  .ca9-book .cal9 { zoom: 1; width: 100%; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'meta' 'main' 'times'; }
  .ca9-book .cal9-meta { padding: 14px 16px; }
  .ca9-book .cal9-blocks { flex-wrap: wrap; gap: 8px 16px; }
  .ca9-book .cal9-main { padding: 4px 16px 12px; }
  .ca9-book .cal9-wd { font-size: 11px; letter-spacing: 0; gap: 4px; }
  .ca9-book .cal9-times { border-left: 0; border-top: 1px solid var(--line); max-height: none; padding: 4px 16px 16px; } /* taste-skill-ignore */
  .ca9-book .cal9-sl { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
  .ca9-book .cal9-s { margin: 0; }
}
.ca-form { margin-inline: 0; }

/* ===== v20 : héros centré et épuré (d'après la référence fintech) ===== */
/* Boutons en pilule partout, un bouton encre pour l'action principale */
.btn, .menu-btn, .ca9-btn { border-radius: 999px; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--accent); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light::before { display: none; }
.btn--light:hover { background: var(--surface); }

/* En-tête : liens au centre, langue en pastille */
@media (min-width: 901px) {
  .top { display: grid; grid-template-columns: 1fr auto 1fr; }
  .top__end { justify-self: end; }
  .top__links { margin: 0; padding: 0; list-style: none; }
}
.top .btn--small { background: var(--ink); }
.top .btn--small:hover { background: var(--accent); }
.lang { padding: 8px 12px; border-radius: 999px; background: #fff; }

/* Bloc central encadré de quatre coins à la couleur de la marque */
.hero { min-height: 0; overflow: clip; }
.hero__in { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(18px, 2vw, 26px); width: min(100% - 2 * var(--m), 1080px); margin: clamp(24px, 4vw, 56px) auto 0; padding: clamp(28px, 3.4vw, 48px) clamp(16px, 4vw, 64px);
  --cl: clamp(22px, 2.6vw, 40px); }
.hero .hero__h1 { padding: 0; font-size: clamp(2.5rem, 1rem + 6.4vw, 7.6rem); line-height: 0.96; text-wrap: balance; }
.ln--soft { color: #6A7196; }
.hero__lead { max-width: 46ch; font-size: var(--step-lead); line-height: 1.4; color: var(--muted); text-wrap: pretty; }
.hero__act { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Les projets en éventail, KARNET au centre, sur un halo doux */
.shots--fan { position: relative; margin-top: clamp(36px, 4vw, 64px); padding: 0 var(--m) clamp(56px, 6vw, 96px); }

.shots--fan .stage { aspect-ratio: 9 / 14; border-radius: clamp(18px, 2vw, 28px); }
.shots--fan figure { transition: translate var(--dur-3) var(--ease-out); }
.shots--fan a:hover figure, .shots--fan a:focus-visible figure { translate: 0 -10px; }

.shots--fan figcaption { justify-self: center; text-align: center; }

@media (max-width: 600px) {
  .hero__in { --cl: 18px; padding-inline: 14px; }

  .shots--fan figcaption { font-size: 0.8125rem; }
}

/* v21 : comparatif « une seule voie » (Skillize, Catchlead), en vrai tableau */
.cmp { padding-block: clamp(72px, 9vw, 140px); }
.cmp .sechead { margin-bottom: clamp(28px, 4vw, 56px); }
.cmp__wrap { padding: 0 var(--m); }
.cmp__t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--step-body); }
.cmp__t th, .cmp__t td { text-align: left; vertical-align: top; padding: 20px clamp(14px, 1.6vw, 28px); border-top: 3px solid var(--ink); }
.cmp__t thead th, .cmp__t thead td { border-top: 0; font: 800 var(--step-lead)/1.15 var(--font-display); letter-spacing: -0.015em; }
.cmp__t tbody th { width: 22%; padding-left: 0; font: 800 var(--step-lead)/1.2 var(--font-display); letter-spacing: -0.015em; }
.cmp__t td:nth-child(2) { color: var(--muted); }
.cmp__t .cmp__us, .cmp__t td:last-child { width: 39%; background: var(--accent); color: var(--accent-ink); }
.cmp__t td:last-child { border-top-color: #ffffff59; font-weight: 600; }
.cmp__t thead .cmp__us { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.cmp__t tbody tr:last-child td:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
@media (max-width: 700px) {
  .cmp__t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cmp__t, .cmp__t tbody, .cmp__t tr, .cmp__t th, .cmp__t td { display: block; width: auto; }
  .cmp__t tr { margin-bottom: 28px; }
  .cmp__t tbody th { width: auto; }
  .cmp__t td { border-top: 0; padding: 12px 0; }
  .cmp__t td:last-child { width: auto; padding: 16px; border-radius: var(--r-lg); }
  .cmp__t td::before { content: attr(data-l); display: block; margin-bottom: 4px; font-size: var(--step-small); font-weight: 600; opacity: 0.75; }
}

/* v21 : étapes de l'accompagnement illustrées par l'espace client (Skillize) */
.acc__win { display: grid; grid-column: 1 / -1; }
.acc__win > .acc__inv { grid-area: 1 / 1; transition: opacity var(--dur-2) var(--ease-std), translate var(--dur-2) var(--ease-std), visibility var(--dur-2); }
.acc__win > :not(.is-on) { visibility: hidden; opacity: 0; translate: 0 12px; }

/* v21 : pied de page, grand logotype rogné en bas (Skillize, Rociny, Podmax) */
.foot { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.foot__map { margin-top: 0; }
.mark--foot { order: 1; margin: clamp(40px, 5vw, 72px) 0 -0.24em; }
@media (prefers-reduced-motion: reduce) { .acc__win > .acc__inv { transition: none; } }

/* v22 — Réalisations : un bento de quatre cases cadrées, Marggi compris (case sombre, bandeau qui défile) */
.sechead h2#t-projets { grid-column: 1 / 10; text-wrap: balance; }
.sechead__more { grid-column: 10 / 13 !important; justify-self: end; align-self: end; }
.sechead__more a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); text-decoration: none; }
.sechead__more a::after { content: ""; width: 36px; height: 36px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 18px no-repeat; transition: background-color 200ms var(--ease-out), translate 320ms var(--ease-out); }
.sechead__more a:hover::after { background-color: var(--accent); translate: 4px 0; }

.rp__tags { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 900px) {

  .sechead h2#t-projets, .sechead__more { grid-column: 1 / 13 !important; justify-self: start; }
}

/* v22 — Vitrines : l'anneau 3D, aux couleurs du site, sans catégories */
.ring { margin-top: clamp(72px, 9vw, 140px); }
.ring h3 { padding: 0 var(--m); margin-bottom: clamp(16px, 2vw, 28px); font: 800 var(--step-lead)/1.15 var(--font-display); letter-spacing: -0.015em; }
.ring .sw-ring { --sw-paper: var(--bg); --sw-ink: var(--ink); --sw-accent: var(--accent); }
.ring .sw-ring-screen { border-radius: var(--r-lg); border: 0; background: var(--surface); }
.ring .sw-ring-screen { box-shadow: none; } /* taste-skill-ignore : annule l'ombre du composant partagé */
.ring .sw-ring-name { font-weight: 600; }
.ring .sw-ring-meta { color: var(--muted); }
.ring .sw-ring-arrow { background: var(--ink); color: var(--bg); width: 52px; height: 52px; }
.ring .sw-ring-arrow svg { width: 22px; height: 22px; stroke-width: 2; }
.ring .sw-ring-arrow:hover { background: var(--accent); color: #fff; }

/* v22 — Qui on est : le glyphe en points ; la souris y creuse un trou */
.team { position: relative; display: grid; justify-items: center; padding: clamp(72px, 8vw, 120px) var(--m) clamp(80px, 9vw, 140px); text-align: center; overflow: hidden; }
.team__dots { display: block; width: min(560px, 100%); aspect-ratio: 1; color: var(--ink); touch-action: pan-y; }
.team__txt { margin-top: clamp(24px, 3vw, 44px); max-width: 62ch; }
.team h2 { font: 800 var(--step-head)/1.02 var(--font-display); letter-spacing: -0.03em; }
.team__q { margin-top: 18px; font: 600 var(--step-lead)/1.4 var(--font-display); letter-spacing: -0.012em; color: var(--ink); text-wrap: balance; }

/* v22 — Comparatif : une coche ou une croix devant chaque réponse */
.cmp__t tbody td { padding-left: calc(clamp(14px, 1.6vw, 28px) + 34px); background-repeat: no-repeat; background-position: clamp(14px, 1.6vw, 28px) 19px; background-size: 24px; }
.cmp__t tbody td:nth-child(2) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23E6EAFF'/%3E%3Cpath d='m8.5 8.5 7 7m0-7-7 7' stroke='%23434A6E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cmp__t tbody td:last-child { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23fff'/%3E%3Cpath d='m7.5 12.3 3 3 6-6.6' stroke='%232B4BFF' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.cmp__t tbody td:nth-child(2), .cmp__t tbody td:last-child { background-repeat: no-repeat; background-size: 24px; background-position: clamp(14px, 1.6vw, 28px) 19px; padding-left: calc(clamp(14px, 1.6vw, 28px) + 34px); }
@media (max-width: 700px) { .cmp__t tbody td:nth-child(2), .cmp__t tbody td:last-child { background-position: 16px 18px; padding-left: 52px; } }

/* « Qui on est » : le glyphe en tuile dans le titre, la phrase en deux tons */
.team h2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.18em 0.3em; }
.team__tile { display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; border-radius: 0.24em; background: var(--accent); color: #fff; rotate: -6deg; transition: rotate 420ms var(--ease-out); }
.team__tile svg { width: 58%; height: 58%; fill: currentColor; }
.team:hover .team__tile { rotate: 0deg; }
.team__q span { color: var(--muted); }

/* v22 — Pied de page : une lueur qui monte vers l'accent et le nom en très grand (d'après Karam),
   recouvert par un panneau sombre aux coins hauts arrondis (d'après Clickway) */
.foot { display: block; overflow: hidden; padding: 0; background: var(--surface); color: var(--night-ink); }
.foot__glow { position: relative; display: grid; justify-items: center; padding-top: clamp(40px, 5vw, 72px); }
/* le nom s'efface de haut en bas et a disparu avant le bord du panneau : aucune lettre tranchée net */
.foot__ghost { display: block; margin-top: clamp(32px, 5vw, 80px); padding-bottom: 0.06em; font: 800 min(14.6vw, 230px)/0.86 var(--font-display); letter-spacing: -0.05em; white-space: nowrap; color: color-mix(in srgb, var(--accent) 72%, var(--surface)); -webkit-mask-image: linear-gradient(180deg, #000 8%, rgb(0 0 0 / 0.6) 32%, rgb(0 0 0 / 0.18) 54%, transparent 70%); mask-image: linear-gradient(180deg, #000 8%, rgb(0 0 0 / 0.6) 32%, rgb(0 0 0 / 0.18) 54%, transparent 70%); } /* taste-skill-ignore : masque de fondu */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .foot__ghost { animation: foot-ghost linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes foot-ghost { from { translate: 0 28%; opacity: 0; } to { translate: 0 0; opacity: 1; } }
  }
}
.foot__panel { position: relative; margin: calc(min(14.6vw, 230px) * -0.22) clamp(8px, 1vw, 16px) 0; padding: clamp(44px, 6vw, 96px) clamp(18px, 5vw, 88px) 28px; background: var(--night); border-radius: clamp(28px, 4vw, 64px) clamp(28px, 4vw, 64px) 0 0; }
.foot__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 5vw, 96px); }
.foot__id { display: grid; align-content: start; justify-items: start; gap: 14px; }
.mark--foot { order: 0; display: inline-flex; width: auto; margin: 0; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1; }
.foot__what { padding-bottom: 22px; border-bottom: 2px solid color-mix(in srgb, var(--night-ink) 18%, transparent); width: 100%; color: var(--night-muted); }
.foot__mail { margin-top: 8px; font: 800 clamp(1.4rem, 2.6vw, 2.4rem)/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--night-ink); text-decoration: underline 3px transparent; text-underline-offset: 0.2em; transition: text-decoration-color 240ms var(--ease-out); }
.foot__mail:hover, .foot__mail:focus-visible { text-decoration-color: var(--accent); }
.foot__call { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--night-ink); text-decoration: none; }
.foot__call::after { content: ""; width: 32px; height: 32px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / 16px no-repeat; transition: rotate 320ms var(--ease-out); }
.foot__call:hover::after { rotate: 45deg; }
.foot__panel .foot__map { margin-top: 0; }
.foot__panel .foot__map p { font-weight: 600; color: var(--night-ink); }
.foot__panel .foot__map ul { gap: 10px; }
.foot__panel .foot__map a { color: var(--night-muted); }
.foot__panel .foot__map a:hover { color: var(--night-ink); }
.foot__panel .foot__line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: clamp(48px, 6vw, 96px); padding-top: 22px; border-top: 2px solid color-mix(in srgb, var(--night-ink) 18%, transparent); }
.foot__panel .foot__year { text-align: left; }
.foot__panel .foot__links { justify-content: flex-end; }
.foot__panel .foot__links a { color: var(--night-muted); }
.foot__panel .foot__links a:hover { color: var(--night-ink); }
@media (max-width: 900px) {
  .foot__top { grid-template-columns: 1fr; }
  .foot__panel .foot__links { justify-content: flex-start; }
}
.foot .foot__id .mark--foot { font-size: clamp(1.5rem, 2.4vw, 2.2rem); }
.foot__top > * { min-width: 0; }

/* v22b — le nom passe dans le panneau sombre : il sort d'un halo bleu flou et se fond dans la nuit vers le bas */
.foot__glow { padding-block: clamp(36px, 4.5vw, 64px); }
.foot__panel { margin-top: 0; overflow: hidden; isolation: isolate; padding-top: 0; }
.foot__bg { position: relative; z-index: -1; height: calc(min(14.6vw, 230px) * 0.92); margin: 0 calc(-1 * clamp(18px, 5vw, 88px)) clamp(8px, 2vw, 32px); pointer-events: none; }
.foot__halo { position: absolute; left: 50%; top: -30%; width: 78%; height: 120%; translate: -50% 0; border-radius: 50%; background: var(--accent); opacity: 0.38; filter: blur(clamp(48px, 7vw, 110px)); }
.foot__panel .foot__ghost { position: absolute; inset: 0; display: grid; place-items: start center; margin: 0; padding-top: 0.08em; overflow: hidden; color: color-mix(in srgb, var(--accent) 55%, #fff); mix-blend-mode: soft-light; opacity: 1; }
/* taste-skill-ignore : fondu du nom dans le panneau (masque, pas un remplissage) */
.foot__panel .foot__ghost { -webkit-mask-image: linear-gradient(180deg, #000 10%, rgb(0 0 0 / 0.55) 45%, transparent 92%); mask-image: linear-gradient(180deg, #000 10%, rgb(0 0 0 / 0.55) 45%, transparent 92%); } /* taste-skill-ignore */
.foot__bg { margin-top: clamp(28px, 4vw, 56px); margin-bottom: clamp(20px, 3vw, 44px); }
.foot__halo { width: 62%; top: -15%; height: 110%; opacity: 0.32; }
/* le grand nom en fond suffit : le logo du pied de page garde le glyphe seul */
.foot__id .mark--foot .mark__word { display: none; }
.foot__id .mark--foot svg { width: clamp(40px, 3.6vw, 56px); height: clamp(40px, 3.6vw, 56px); }
@media (max-width: 600px) { .foot__bg { margin-bottom: 28px; } }
/* le glyphe et la devise sur une même ligne, le filet dessous sur toute la largeur */
.foot__id { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; }
.foot__id .mark--foot { grid-column: 1; }
.foot__id .foot__what { grid-column: 2; padding: 0; border: 0; font-size: var(--step-body); color: var(--night-ink); }
.foot__id .foot__mail { grid-column: 1 / -1; width: 100%; margin-top: 10px; padding-top: 22px; border-top: 2px solid color-mix(in srgb, var(--night-ink) 18%, transparent); }
.foot__id .foot__call { grid-column: 1 / -1; }
.foot__id .mark--foot svg { width: 40px; height: 40px; }
.foot__id .mark--foot { transition: translate 320ms var(--ease-out); }
.foot__id .mark--foot:hover { translate: 0 -3px; }

/* v23 — Réalisations : le projecteur. À gauche les projets en onglets (avance seule, barre de
   progression), à droite une scène à la couleur du projet : trois visuels en éventail qui suivent
   le pointeur, puis la fiche (livré, statut, outils) et le lien vers l'étude de cas. */
.pj9 { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 2.4vw, 40px); padding: 0 var(--m); align-items: stretch; }
.pj9__list { display: grid; align-content: start; border-top: 3px solid var(--ink); }
.pj9__tab { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 2px; align-items: baseline; padding: clamp(18px, 2vw, 28px) 4px clamp(20px, 2.2vw, 30px); border: 0; border-bottom: 2px solid color-mix(in srgb, var(--ink) 14%, transparent); background: none; color: var(--muted); text-align: left; font: inherit; cursor: pointer; transition: color 240ms var(--ease-out); }
.pj9__n { grid-row: 1 / 3; align-self: start; padding-top: 0.5em; font-size: var(--step-small); font-variant-numeric: tabular-nums; }
.pj9__name { font: 800 clamp(1.8rem, 3.6vw, 3.4rem)/1 var(--font-display); letter-spacing: -0.03em; transition: translate 420ms var(--ease-out); }
.pj9__kind { grid-column: 2; font-size: var(--step-small); }
.pj9__tab:hover, .pj9__tab[aria-selected='true'] { color: var(--ink); }
.pj9__tab:hover .pj9__name, .pj9__tab[aria-selected='true'] .pj9__name { translate: 10px 0; }
.pj9__tab:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.pj9__bar { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; overflow: hidden; }
.pj9__bar i { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: 0 50%; scale: 0 1; }
.pj9__tab[aria-selected='true'] .pj9__bar i { scale: 1 1; }
.pj9[data-play] .pj9__tab[aria-selected='true'] .pj9__bar i { animation: pj9-bar 7000ms linear both; }
.pj9[data-hold] .pj9__tab[aria-selected='true'] .pj9__bar i { animation-play-state: paused; }
@keyframes pj9-bar { from { scale: 0 1; } to { scale: 1 1; } }

.pj9__stage { position: relative; display: grid; min-width: 0; }
.pj9__panel { grid-area: 1 / 1; display: grid; grid-template-rows: 1fr auto; min-height: clamp(540px, 46vw, 700px); overflow: hidden; border-radius: calc(var(--r-lg) + 10px); background: var(--bg); color: var(--fg); }
.js .pj9__panel { visibility: hidden; opacity: 0; transition: opacity 420ms var(--ease-out), visibility 0s 420ms; }
.js .pj9__panel.is-on { visibility: visible; opacity: 1; transition: opacity 420ms var(--ease-out); }
.pj9__fan { --rx: 0deg; --ry: 0deg; position: relative; display: grid; place-items: center; perspective: 1400px; padding: clamp(28px, 3.4vw, 56px) 0 0; }
.pj9__tile { grid-area: 1 / 1; width: clamp(160px, 16.5vw, 250px); aspect-ratio: var(--ratio); object-fit: cover; object-position: top; border-radius: clamp(16px, 1.6vw, 26px); background: color-mix(in srgb, var(--fg) 10%, var(--bg)); transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--pjx, 0%), var(--pjy, 0%)) rotate(var(--pjr, 0deg)) scale(var(--pjs, 1)); transition: transform 900ms var(--ease-out), opacity 600ms var(--ease-out); }
.pj9__tile:nth-child(1) { --pjx: -64%; --pjy: 7%; --pjr: -7deg; --pjs: 0.9; }
.pj9__tile:nth-child(2) { position: relative; z-index: 1; --pjs: 1.04; }
.pj9__tile:nth-child(3) { --pjx: 64%; --pjy: 7%; --pjr: 7deg; --pjs: 0.9; }
/* entrée : l'éventail se referme puis s'ouvre à chaque changement de projet */
.js .pj9__panel:not(.is-on) .pj9__tile { --pjx: 0%; --pjy: 18%; --pjr: 0deg; --pjs: 0.86; opacity: 0; }
.js .pj9__panel.is-on .pj9__tile:nth-child(1) { transition-delay: 80ms; }
.js .pj9__panel.is-on .pj9__tile:nth-child(3) { transition-delay: 160ms; }
.pj9__info { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 32px; align-items: end; padding: clamp(22px, 2.6vw, 40px); }
.pj9__title { grid-column: 1 / -1; font: 800 var(--step-lead)/1.1 var(--font-display); letter-spacing: -0.015em; }
.pj9__lead { grid-column: 1; max-width: 46ch; font-size: var(--step-body); }
.pj9__facts { grid-column: 1; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.pj9__facts div { padding: 7px 12px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 12%, transparent); font-size: var(--step-small); }
.pj9__facts dt { display: inline; opacity: 0.7; }
.pj9__facts dt::after { content: " · "; }
.pj9__facts dd { display: inline; margin: 0; font-weight: 600; }
.pj9__go { grid-column: 2; grid-row: 2 / 4; align-self: end; display: inline-flex; align-items: center; gap: 12px; padding: 14px 14px 14px 22px; border-radius: 999px; background: var(--hi); color: var(--bg); font-weight: 700; text-decoration: none; white-space: nowrap; transition: gap 320ms var(--ease-out); }
.pj9__go::after { content: ""; width: 30px; height: 30px; border-radius: 50%; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat; }
.pj9__go:hover { gap: 18px; }
.pj9__go:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }
/* sans script : les projets les uns sous les autres, sans onglets */
html:not(.js) .pj9 { grid-template-columns: 1fr; }
html:not(.js) .pj9__list { display: none; }
html:not(.js) .pj9__stage { gap: 20px; }
html:not(.js) .pj9__panel { grid-area: auto; }
@media (max-width: 900px) {
  .pj9 { grid-template-columns: 1fr; padding: 0; }
  .pj9__list { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--m) 4px; border: 0; scrollbar-width: none; }
  .pj9__tab { flex: none; display: block; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--surface); scroll-snap-align: start; }
  .pj9__tab[aria-selected='true'] { background: var(--ink); color: var(--bg); }
  .pj9__n, .pj9__kind, .pj9__bar { display: none; }
  .pj9__name { font-size: 1.15rem; translate: none !important; }
  .pj9__stage { padding: 0 var(--m); }
  .pj9__panel { min-height: 0; }
  .pj9__tile { width: clamp(110px, 30vw, 180px); }
  .pj9__info { grid-template-columns: 1fr; }
  .pj9__go { grid-column: 1; grid-row: auto; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .pj9__tile, .js .pj9__panel, .js .pj9__panel.is-on { transition: none; }
}
/* bouton : texte et rond en encre sur la couleur vive du projet (lisible sur les quatre) ; liste étirée à la hauteur de la scène */
.pj9__go { color: var(--ink); }
.pj9__go::after { background-color: var(--ink); }
@media (min-width: 901px) { .js .pj9__list { grid-auto-rows: 1fr; align-content: stretch; } .pj9__tab { align-content: start; } }

/* les visuels sont des iPhone détourés (cadre compris) : pas de recadrage, pas de fond */
.pj9__tile { height: auto; aspect-ratio: 520 / 1059; object-fit: contain; border-radius: 0; background: none; }

/* v23 — Projets sous accord de confidentialité : nos propres visuels floutés en fond, trois tuiles voilées, un cadenas */
.nda { position: relative; display: grid; justify-items: center; gap: 18px; margin: clamp(48px, 6vw, 96px) var(--m) 0; padding: clamp(56px, 7vw, 112px) clamp(20px, 5vw, 80px); overflow: hidden; isolation: isolate; text-align: center; border-radius: calc(var(--r-lg) + 10px); background: var(--surface); }
.nda__bg { position: absolute; inset: -12%; z-index: -1; display: flex; gap: 3%; align-items: center; justify-content: center; filter: blur(26px) saturate(1.2); opacity: 0.55; }
.nda__bg img { width: 13%; height: auto; flex: none; }
.nda__bg img:nth-child(even) { translate: 0 18%; }
.nda__t { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.3em; max-width: 20ch; font: 800 var(--step-head)/1.02 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; }
.nda__t svg { width: 0.8em; height: 0.8em; flex: none; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.nda__p { max-width: 52ch; font-size: var(--step-body); color: var(--ink); }
.nda__go { display: inline-flex; align-items: center; gap: 12px; margin-top: 6px; padding: 14px 14px 14px 22px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 700; text-decoration: none; transition: gap 320ms var(--ease-out), background-color 200ms var(--ease-out); }
.nda__go::after { content: ""; width: 30px; height: 30px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat; }
.nda__go:hover { gap: 18px; background: var(--accent); }
@media (max-width: 900px) { .nda__bg img { width: 26%; } }
.nda__bg { opacity: 0.7; }
.nda__bg img { width: 15%; border-radius: 18%; }
.nda__bg img:nth-child(4n+1) { background: #F5602E; }
.nda__bg img:nth-child(4n+2) { background: #15151A; }
.nda__bg img:nth-child(4n+3) { background: #4156F6; }
.nda__bg img:nth-child(4n) { background: #DCF23C; }
.nda__bg { opacity: 0.32; filter: blur(34px) saturate(1.1); }
.nda__bg img { width: 11%; }
.nda__bg { opacity: 0.45; filter: blur(30px) saturate(1.15); }

/* v23 — Héros : les trois cartes portent un vrai iPhone détouré qui dépasse du haut de la carte,
   flotte doucement et s'incline avec le pointeur (app.js : --hx, --hy sur .shots--fan) */
.shots--fan .stage { overflow: visible; aspect-ratio: 9 / 13; perspective: 1200px; }

@media (prefers-reduced-motion: no-preference) {

  @keyframes tel-float { from { margin-bottom: 0; } to { margin-bottom: 10px; } }
}

.shots--fan { padding-top: clamp(16px, 2vw, 32px); }

/* Variante du héros (aperçu) : texte et boutons à gauche, les trois iPhone à droite */

/* Notifications du héros, façon notification iOS de l'espace client : icône, appli, heure, titre, texte */
.ntf { width: min(19.5rem, 80vw); padding: 12px 14px 13px; border-radius: 22px; background: rgb(255 255 255 / 0.8); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); outline: 1px solid rgb(14 20 51 / 0.07); color: var(--ink); font-size: 0.875rem; line-height: 1.3; text-align: left; }
.ntf p { margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  .js .ntf { opacity: 0; translate: 0 -14px; scale: 0.96; }
  .js .ntf.is-on { opacity: 1; translate: 0 0; scale: 1; transition: opacity 500ms var(--ease-out), translate 700ms var(--ease-out), scale 700ms var(--ease-out); }

}
@media (max-width: 900px) { .ntf { display: none; } }

/* E — sans téléphones : une pile de notifications de l'espace client à droite */

/* F — sans téléphones : les cinq métiers en marches d'escalier, comme le glyphe */

@media (prefers-reduced-motion: no-preference) {

  @keyframes hx-step { from { scale: 1 0; } }
}

/* H — d'après Karam et Clickway, à notre façon : mot sélectionné comme dans un outil de design,
   accroche en deux tons, bandeau des cinq métiers, puis nos vrais sites en perspective */
.hx-sel { position: relative; display: inline-block; padding: 0 0.12em; margin: 0 0.04em; outline: 3px solid var(--accent); outline-offset: -0.02em; border-radius: 0.06em; background: color-mix(in srgb, var(--accent) 9%, transparent); }
.hx-sel i { position: absolute; width: 0.13em; height: 0.13em; min-width: 9px; min-height: 9px; background: #fff; outline: 3px solid var(--accent); }
.hx-sel i:nth-child(1) { left: 0; top: 0; translate: -50% -50%; }
.hx-sel i:nth-child(2) { right: 0; top: 0; translate: 50% -50%; }
.hx-sel i:nth-child(3) { left: 0; bottom: 0; translate: -50% 50%; }
.hx-sel i:nth-child(4) { right: 0; bottom: 0; translate: 50% 50%; }
.hero--h .hero__lead { color: var(--ink); }
.hx-mute { color: var(--muted); }

.hero--h .hero__in { margin-bottom: 0; }
.hx-desk { position: relative; height: clamp(220px, 26vw, 420px); margin-top: clamp(28px, 4vw, 56px); overflow: hidden; perspective: 1600px; }
.hx-win { position: absolute; top: 12%; width: clamp(300px, 40vw, 640px); margin: 0; border-radius: 14px; overflow: hidden; background: #fff; outline: 1px solid rgb(14 20 51 / 0.08); transform-origin: 50% 100%; }
.hx-win span { display: block; height: 22px; }
.hx-win img { display: block; width: 100%; height: auto; }
.hx-win--c { left: 50%; z-index: 2; translate: -50% 0; transform: rotateX(14deg); top: 4%; }
.hx-win--l { left: 2%; transform: rotateY(18deg) rotateX(12deg) rotateZ(-3deg); }
.hx-win--r { right: 2%; transform: rotateY(-18deg) rotateX(12deg) rotateZ(3deg); }
.hx-tel { position: absolute; z-index: 3; left: calc(50% + clamp(140px, 17vw, 270px)); top: 0; width: clamp(110px, 10vw, 170px); height: auto; rotate: 6deg; }
@media (prefers-reduced-motion: no-preference) {
  .js .hx-win, .js .hx-tel { animation: hx-rise 1100ms var(--ease-out) both; }
  .js .hx-win--c { animation-delay: 350ms; } .js .hx-win--l { animation-delay: 500ms; } .js .hx-win--r { animation-delay: 600ms; } .js .hx-tel { animation-delay: 800ms; }
  @keyframes hx-rise { from { opacity: 0; translate: 0 40%; } }
  .js .hx-win--c { animation-name: hx-rise-c; }
  @keyframes hx-rise-c { from { opacity: 0; translate: -50% 40%; } }
}
@media (max-width: 900px) {

  .hx-win--l, .hx-win--r { display: none; }
  .hx-win--c { width: 86vw; }
  .hx-tel { left: auto; right: 4vw; width: 26vw; }
  .hx-desk { height: 64vw; }
}
.hx-sel { outline: 0; border: 3px solid var(--accent); }
.hx-sel i:nth-child(1) { left: -1.5px; top: -1.5px; } .hx-sel i:nth-child(2) { right: -1.5px; top: -1.5px; }
.hx-sel i:nth-child(3) { left: -1.5px; bottom: -1.5px; } .hx-sel i:nth-child(4) { right: -1.5px; bottom: -1.5px; }
.hx-sel i { outline-width: 2px; }
/* barre de navigateur : trois pastilles en SVG (pas de dégradé) */
.hx-win span { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='8'%3E%3Ccircle cx='4' cy='4' r='3.5' fill='%23E0E3F0'/%3E%3Ccircle cx='18' cy='4' r='3.5' fill='%23E0E3F0'/%3E%3Ccircle cx='32' cy='4' r='3.5' fill='%23E0E3F0'/%3E%3C/svg%3E") 10px 50% / 44px 8px no-repeat; }

/* v24 — composants plus compacts : moins de hauteur, mêmes contenus */
.work { padding-block: clamp(64px, 7vw, 112px) clamp(56px, 6vw, 96px); }
.cmp, .who, .partner { padding-block: clamp(56px, 6.5vw, 104px); }
.pj9__panel { min-height: clamp(420px, 34vw, 540px); }
.pj9__tile { width: clamp(120px, 11.5vw, 185px); }
.pj9__fan { padding-top: clamp(22px, 2.4vw, 36px); }
.pj9__name { font-size: clamp(1.5rem, 2.6vw, 2.4rem); }
.pj9__tab { padding-block: clamp(14px, 1.4vw, 20px) clamp(16px, 1.6vw, 22px); }
.pj9__info { padding: clamp(18px, 2vw, 28px); gap: 10px 24px; }
.pj9__go { padding: 10px 10px 10px 18px; }
.nda { margin-top: clamp(32px, 4vw, 56px); padding: clamp(36px, 4.5vw, 64px) clamp(20px, 4vw, 64px); gap: 14px; }
.nda__t { font-size: clamp(1.6rem, 2.8vw, 2.6rem); }
.ring { margin-top: clamp(48px, 6vw, 88px); }
.ring .sw-ring-stage { --sw-w: clamp(240px, 36cqw, 520px); }
.team { padding-block: clamp(56px, 6vw, 96px); }
.team__dots { width: min(400px, 100%); }
.team__txt { margin-top: clamp(16px, 2vw, 28px); }
.hx-desk { height: clamp(200px, 22vw, 360px); }
/* contact plus compact : nom et email côte à côte, marges réduites */
.ca-form { margin-bottom: clamp(48px, 6vw, 88px); padding: clamp(22px, 3vw, 44px); }
.ca-form .form { grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.ca-form .form > :not(.field:nth-of-type(1)):not(.field:nth-of-type(2)) { grid-column: 1 / -1; }
.ca-form .field input, .ca-form .field textarea { padding: 11px 14px; }
.ca-form .field textarea { min-height: 72px; }
.ca-form__intro h3 { font-size: clamp(1.8rem, 3vw, 2.8rem); }
@media (max-width: 700px) { .ca-form .form { grid-template-columns: 1fr; } }

/* audit Impeccable : pastilles des fiches projets lisibles sur fond vif (contraste AA) */
.pj9__facts dt { opacity: 1; font-weight: 400; }
.pj9__facts div { background: color-mix(in srgb, var(--fg) 10%, transparent); }
.pj9__panel[id='pj9-p-pactapp'] .pj9__facts div { background: rgb(14 20 51 / 0.22); }

/* audit Impeccable, passe 2 : rythme vertical régulier entre sections, une seule famille de notifications */
.kit { padding-top: clamp(64px, 7vw, 112px); }
.team { padding-top: clamp(40px, 4vw, 64px); }
.eco-float { padding: 11px 16px 11px 11px; border-radius: 18px; background: rgb(255 255 255 / 0.86); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); outline: 1px solid rgb(14 20 51 / 0.07); }
.eco-float i { border-radius: 9px; width: 34px; height: 34px; }
.eco-float b { font-weight: 700; }
/* projecteur sans numéros : nom puis ligne descriptive */
.pj9__tab { grid-template-columns: 1fr; }
.pj9__kind { grid-column: 1; }
@media (max-width: 900px) { .pj9 { grid-template-columns: 1fr; } .pj9__tab { grid-template-columns: none; } .pj9__panel { min-height: 0; } }

/* Sous-pages, même thème que l'accueil */
/* haut de page : titre, phrase, puis le bouton juste dessous (plus de bouton isolé à droite) */
.ph { row-gap: 20px; padding-bottom: clamp(48px, 6vw, 88px); }
.ph p { grid-column: 1 / 9; color: var(--muted); }
.ph .btn { grid-column: 1 / -1; }
/* les vrais iPhone, détourés, sur la couleur du projet */
img.tel-pic { object-fit: contain; object-position: 50% 100%; padding: 9% 0 0; background: var(--rp, var(--surface)); }
.gal img.tel-pic { aspect-ratio: 4 / 5; }
.rp__img img.tel-pic { scale: 1; }
.ph__tels { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 1.6vw, 28px); padding: clamp(28px, 4vw, 56px) var(--m) 0; overflow: hidden; border-radius: calc(var(--r-lg) + 10px); background: var(--rp); }
.ph__tels img { width: clamp(110px, 15vw, 240px); height: auto; translate: 0 6%; }
.ph__tels img:nth-child(2) { width: clamp(126px, 17vw, 270px); translate: 0 0; }
.ph__tels img:nth-child(1) { rotate: -5deg; } .ph__tels img:nth-child(3) { rotate: 5deg; }
@media (prefers-reduced-motion: no-preference) {
  .js .ph__tels img { transition: translate 900ms var(--ease-out), opacity 700ms var(--ease-out); }
  .js .ph__tels:not(.is-in) img { opacity: 0; translate: 0 30%; }
  .js .ph__tels.is-in img:nth-child(1) { transition-delay: 90ms; } .js .ph__tels.is-in img:nth-child(3) { transition-delay: 180ms; }
}
.rp__img img.tel-pic, .rp__grid .rp__img img.tel-pic { object-fit: contain; object-position: 50% 100%; width: 100%; height: 100%; padding-top: 8%; }
@media (max-width: 900px) { .ph p, .ph h1 { grid-column: 1 / -1; } }
/* calendrier : jours fermés lisibles (contraste 4,8:1) */
.cal9-d.is-off { color: #6b7280; }