/* KommIA : page À propos, chargée après site.css. Le texte d'origine est repris tel quel ; seul le design change :
   colonnes ouvertes séparées par des filets, grands numéros, frise de la feuille de route, aucun encadré. */
:root { --vnav-h: 52px; }
section[id] { scroll-margin-top: calc(var(--nav-h) + var(--vnav-h) + 8px); }
.kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--violet-ink); }
.kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #876AFF, #168EFF); box-shadow: 0 0 0 4px rgba(135, 106, 255, 0.14); }

/* ────── Haut de page : la mission au centre, puis une rangée de métiers comme des stories ────── */
.ahero { max-width: 1320px; margin: 0 auto; padding: clamp(48px, 7vw, 112px) var(--gutter) clamp(56px, 7vw, 104px); text-align: center; }
.ahero .kicker { animation: ab-up 800ms var(--ease-out) both 40ms; }
.ahero__title {
  max-width: 17ch; margin: 0 auto; font-size: clamp(2.6rem, 1.3rem + 4.6vw, 5.2rem); font-weight: 620; letter-spacing: -0.05em; line-height: 1; text-wrap: balance;
  animation: ab-up 900ms var(--ease-out) both 120ms;
}
.ahero__lead { margin: 26px auto 0; max-width: 44rem; font-size: 1.12rem; line-height: 1.65; color: var(--ink-70); text-wrap: pretty; animation: ab-up 900ms var(--ease-out) both 240ms; }
.ahero__lead strong { font-weight: 600; color: var(--ink); }
.people { list-style: none; margin: 48px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 28px; }
.people li { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: ab-up 800ms var(--ease-out) both; }
.people li:nth-child(1) { animation-delay: 360ms; }
.people li:nth-child(2) { animation-delay: 420ms; }
.people li:nth-child(3) { animation-delay: 480ms; }
.people li:nth-child(4) { animation-delay: 540ms; }
.people li:nth-child(5) { animation-delay: 600ms; }
.people li:nth-child(6) { animation-delay: 660ms; }
.people li:nth-child(7) { animation-delay: 720ms; }
/* L'anneau en dégradé des stories Instagram, autour de chaque portrait */
.people img { width: 76px; height: 76px; padding: 3px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, #168EFF, #876AFF, #5AD3FF); }
.people span { font-size: 13px; font-weight: 500; color: var(--ink-60); }
/* La dernière bulle, « Et bien d'autres » : composant commun .more-bubble (site.css), ici à la taille des portraits */
.people .people__plus { width: 76px; height: 76px; }

/* ────── Le constat : trois colonnes ouvertes, un filet qui s'efface entre elles ────── */
.constat { max-width: 1320px; margin: 0 auto; padding: var(--section-y) var(--gutter); }
.options { --og: clamp(36px, 4.6vw, 72px); list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--og); }
.option { position: relative; padding: 4px 0; }
.option + .option::before {
  content: ''; position: absolute; left: calc(var(--og) / -2); top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, rgba(14, 14, 20, 0), rgba(14, 14, 20, 0.09) 16%, rgba(14, 14, 20, 0.09) 84%, rgba(14, 14, 20, 0));
}
.option .st { margin: 0; }
.option h3 { margin-top: 16px; font-size: 1.12rem; font-weight: 620; letter-spacing: -0.02em; line-height: 1.3; text-wrap: balance; }
.option p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--ink-60); text-wrap: pretty; }
.option strong { font-weight: 600; color: var(--ink); }
/* La réponse en grand, l'écran des idées dans le téléphone à côté, sur l'aura violette des Fonctionnalités */
.answer { margin-top: clamp(56px, 6vw, 88px); display: grid; grid-template-columns: minmax(0, 30rem) auto; justify-content: center; align-items: center; gap: 32px clamp(56px, 8vw, 128px); }
.answer__title { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.1rem); font-weight: 620; letter-spacing: -0.045em; line-height: 1.05; text-wrap: balance; }
/* Trois coches violettes, en miroir des trois croix du dessus */
.answer__list { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--line); }
.answer__list li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1.12rem; line-height: 1.4; color: var(--ink-70); }
.answer__list .st { margin: 0; }
.answer__list strong { font-weight: 600; color: var(--ink); }
.answer__cta { margin-top: 28px; }
.answer__stage { position: relative; isolation: isolate; }
.answer__stage::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 230%; height: 90%; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; filter: blur(8px); opacity: 0.55;
  background:
    radial-gradient(closest-side at 30% 40%, rgba(135, 106, 255, 0.85), rgba(135, 106, 255, 0) 100%),
    radial-gradient(closest-side at 70% 60%, rgba(90, 211, 255, 0.6), rgba(90, 211, 255, 0) 100%);
}
.answer__stage .device { --device-w: clamp(210px, 17vw, 250px); transform: rotate(4deg); }
.answer__stage .device__screen > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* ────── Les convictions : la vitrine à défilement de Fonctionnalités (composant commun .gifts), titre centré ────── */
.convictions { max-width: 1180px; margin: 0 auto; padding: var(--section-y) var(--gutter); }
.convictions__head { max-width: 44rem; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.convictions__head .h2 { max-width: 20ch; margin: 0 auto; }
.convictions .gifts__stage { height: 440px; }
.gift__icon--num { font-size: 13px; font-weight: 650; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.convictions .gift__body strong { font-weight: 600; color: var(--ink); }
/* 1. La qualité : derrière, un panneau de réglages grisé et flou (mille options) ; devant, une fiche nette au filet en dégradé,
   trois étapes reliées par un fil qui se remplit et coche chaque étape à son passage, puis la pastille « Elle entre dans l'app » */
.gift-art--quality { place-items: center; }
.q-noise {
  position: absolute; top: 50%; left: 50%; width: 232px; padding: 16px 18px; border-radius: 20px; background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 1px rgba(14, 14, 20, 0.05); transform: translate(-84%, -53%) rotate(-4deg); filter: blur(0.8px); opacity: 0.7;
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 92%); mask-image: linear-gradient(180deg, #000 50%, transparent 92%);
}
.q-noise__head { font-size: 13px; font-weight: 600; color: var(--ink-60); text-decoration: line-through; text-decoration-color: rgba(214, 64, 64, 0.55); text-decoration-thickness: 1.5px; }
.q-noise ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 11px; }
.q-noise li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.q-noise__line { display: block; width: var(--w); height: 7px; border-radius: 4px; background: rgba(14, 14, 20, 0.11); }
.q-noise__toggle { position: relative; flex: none; width: 24px; height: 14px; border-radius: 999px; background: rgba(14, 14, 20, 0.13); }
.q-noise__toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.q-card {
  position: relative; width: 248px; padding: 18px 20px 20px; border: 1px solid transparent; border-radius: 20px; transform: translate(16%, 5%);
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(150deg, rgba(22, 142, 255, 0.45), rgba(135, 106, 255, 0.3) 45%, rgba(135, 106, 255, 0.06)) border-box;
  box-shadow: 0 1px 2px rgba(40, 28, 96, 0.05), 0 28px 56px -30px rgba(52, 36, 130, 0.5), 0 60px 80px -60px rgba(22, 142, 255, 0.35);
}
.q-card__label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--violet-ink); }
.q-card__steps { position: relative; list-style: none; margin: 10px 0 0; padding: 0; }
.q-card__steps::before, .q-card__steps::after { content: ''; position: absolute; left: 10px; top: 21px; bottom: 21px; width: 2px; border-radius: 2px; }
.q-card__steps::before { background: rgba(135, 106, 255, 0.14); }
.q-card__steps::after { background: linear-gradient(180deg, #168EFF, #876AFF); transform: scaleY(0); transform-origin: top; transition: transform 520ms linear 300ms; }
.q-card__steps li { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.q-check { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #F1EDFF; color: var(--violet); box-shadow: 0 0 0 4px #fff; transition: background-color 400ms var(--ease-out), color 400ms var(--ease-out); transition-delay: calc(300ms + var(--k) * 260ms); }
.q-check svg { width: 12px; height: 12px; opacity: 0; transform: scale(0.4); transition: opacity 300ms var(--ease-out), transform 500ms var(--ease-spring); transition-delay: calc(300ms + var(--k) * 260ms); }
.q-card__ok {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; padding: 5px 15px 5px 5px; border-radius: 999px;
  background: linear-gradient(135deg, #168EFF, #876AFF); color: #fff; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 12px 24px -14px rgba(89, 70, 220, 0.8);
  opacity: 0; transform: translateY(6px); transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out); transition-delay: 1150ms;
}
.q-card__icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; }
.q-card__icon img { width: 18px; height: 18px; }
.gift-art--quality.is-active .q-card__steps::after { transform: none; }
.gift-art--quality.is-active .q-check { background: linear-gradient(135deg, #168EFF, #876AFF); color: #fff; }
.gift-art--quality.is-active .q-check svg { opacity: 1; transform: none; }
.gift-art--quality.is-active .q-card__ok { opacity: 1; transform: none; }
/* 2. Le partage du travail : un anneau en dégradé rempli à 80 % */
.gift-art--split { align-content: center; gap: 22px; }
.split { position: relative; isolation: isolate; display: grid; place-content: center; justify-items: center; width: 230px; aspect-ratio: 1; text-align: center; }
.split::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: conic-gradient(from 0deg, #168EFF, #876AFF 80%, rgba(14, 14, 20, 0.08) 80% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
}
.split__num { font-size: 3rem; font-weight: 650; letter-spacing: -0.05em; line-height: 1; color: var(--ink); }
.split__label { margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--ink-60); }
.split__you { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(40, 28, 96, 0.06), 0 18px 36px -22px rgba(52, 36, 130, 0.4); font-size: 14.5px; color: var(--ink-70); }
.split__you span { font-weight: 650; color: var(--ink); }
/* 3. Construit avec : les logos des utilisateurs phares en anneaux de stories, puis un anneau pâle « Et bien d'autres » */
.testers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 20px; max-width: 440px; }
.testers li { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 124px; text-align: center; transform: translateY(10px); opacity: 0; transition: transform 600ms var(--ease-out), opacity 500ms var(--ease-out); transition-delay: calc(var(--k) * 70ms); }
.gift-art--testers.is-active .testers li { transform: none; opacity: 1; }
.tester__ring { display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 5px; padding: 2px; border-radius: 50%; background: linear-gradient(135deg, #168EFF, #876AFF, #5AD3FF); box-shadow: 0 16px 30px -20px rgba(52, 36, 130, 0.55); }
.tester__logo { display: block; width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; background: #fff; object-fit: cover; }
.tester--more .tester__ring { padding: 0; background: none; box-shadow: none; }
.tester--more .more-bubble { --more-ring: 2.5px; }
.tester__name { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.tester__sector { font-size: 12.5px; color: var(--ink-60); }

/* ────── La preuve de Gaby (composant commun .proof), seule entre deux sections ────── */
.aproof { max-width: 1320px; margin: 0 auto; padding: clamp(24px, 3vw, 40px) var(--gutter) 0; }
.aproof .proof { margin: 0; padding-top: 0; border-top: 0; }

/* ────── Confiance : un bandeau centré, trois logos en grand, une phrase sous chacun, filets entre les colonnes ────── */
.trust { max-width: 1320px; margin: 0 auto; padding: var(--section-y) var(--gutter); text-align: center; }
.trust__head .h2 { max-width: 20ch; margin: 0 auto; }
.trust__head .lead { margin: 16px auto 0; }
.partners { --pg: clamp(36px, 5vw, 80px); list-style: none; max-width: 1080px; margin: clamp(40px, 5vw, 64px) auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--pg); }
.partner { position: relative; display: flex; flex-direction: column; align-items: center; }
.partner + .partner::before {
  content: ''; position: absolute; left: calc(var(--pg) / -2); top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, rgba(14, 14, 20, 0), rgba(14, 14, 20, 0.09) 16%, rgba(14, 14, 20, 0.09) 84%, rgba(14, 14, 20, 0));
}
.partner__logo { display: flex; align-items: center; justify-content: center; height: 64px; }
.partner__logo img { height: 40px; width: auto; }
.partner__logo--cci img { height: 58px; }
.partner h3 { margin-top: 18px; font-size: 1.08rem; font-weight: 620; letter-spacing: -0.02em; line-height: 1.3; text-wrap: balance; }
.partner p { max-width: 19rem; margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--ink-60); text-wrap: pretty; }
.partner strong { font-weight: 600; color: var(--ink); }

/* ────── La feuille de route : une frise, l'étape en cours pleine, les suivantes en creux ────── */
.roadmap { max-width: 1320px; margin: 0 auto; padding: var(--section-y) var(--gutter); }
.road { position: relative; list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(32px, 4vw, 64px); }
.road::before {
  content: ''; position: absolute; left: 9px; right: 0; top: 9px; height: 1px;
  background: linear-gradient(90deg, rgba(135, 106, 255, 0.6), rgba(135, 106, 255, 0.2) 45%, rgba(14, 14, 20, 0.08));
}
.road__step { position: relative; padding-top: 38px; }
.road__dot { position: absolute; top: 0; left: 0; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px rgba(135, 106, 255, 0.45); }
.road__step.is-now .road__dot { background: linear-gradient(135deg, #168EFF, #876AFF); box-shadow: 0 0 0 5px rgba(135, 106, 255, 0.16); }
.road__phase { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-60); }
.road__step.is-now .road__phase { color: var(--violet-ink); }
.road__step h3 { margin-top: 8px; font-size: 1.2rem; font-weight: 620; letter-spacing: -0.02em; line-height: 1.3; }
.road__when { margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--ink-60); }
.road__step p:last-child { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--ink-60); text-wrap: pretty; }
.road__step strong { font-weight: 600; color: var(--ink); }
.roadmap__next { margin-top: 44px; font-size: 1.05rem; color: var(--ink-70); }
.roadmap__next a { color: var(--violet-ink); text-decoration: underline; text-decoration-color: rgba(91, 63, 224, 0.4); text-underline-offset: 4px; }
.roadmap__next a strong { font-weight: 600; color: inherit; }
.roadmap__next a:hover { text-decoration-color: currentColor; }

/* ────── L'équipe : le texte à gauche, les deux façons de nous joindre à droite ────── */
.team { position: relative; max-width: 1320px; margin: 0 auto; padding: var(--section-y) var(--gutter); }
.team .halo--violet { opacity: 0.5; }
.team__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 32px clamp(40px, 7vw, 120px); align-items: center; }
.team__text > p:not(.kicker) { margin-top: 18px; max-width: 34rem; font-size: 17px; line-height: 1.7; color: var(--ink-70); text-wrap: pretty; }
.team__text strong { font-weight: 600; color: var(--ink); }
.contact { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.contact li { border-bottom: 1px solid var(--line); }
.contact a { display: flex; align-items: center; gap: 16px; padding: 16px 4px; text-decoration: none; color: var(--ink); }
.contact__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(135, 106, 255, 0.12); color: var(--violet-ink); }
.contact__text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.contact__name { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.015em; transition: color 200ms var(--ease-out); }
.contact__desc { font-size: 14.5px; color: var(--ink-60); }
.contact__arrow {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(135, 106, 255, 0.12); color: var(--violet);
  transition: transform 300ms var(--ease-spring), background-color 300ms var(--ease-out), color 300ms var(--ease-out);
}
@media (hover: hover) {
  .contact a:hover .contact__name { color: var(--violet-ink); }
  .contact a:hover .contact__arrow { transform: translateX(3px); background: linear-gradient(135deg, #168EFF, #876AFF); color: #fff; }
}


/* ────── Tablette et téléphone ────── */
@media (max-width: 899px) {
  :root { --vnav-h: 48px; }
  .ahero { padding-top: 32px; }
  .people { gap: 16px 10px; max-width: 300px; margin-left: auto; margin-right: auto; }
  .people li { width: 84px; }
  .people li.people__more { width: auto; min-width: 84px; }
  .people img, .people .people__plus { width: 62px; height: 62px; }
  .people span { font-size: 12px; }
  .options { grid-template-columns: minmax(0, 1fr); }
  .option { padding: 22px 0; border-top: 1px solid var(--line); }
  .option:last-child { border-bottom: 1px solid var(--line); }
  .option + .option::before { display: none; }
  .answer { grid-template-columns: minmax(0, 1fr); justify-items: center; justify-content: stretch; text-align: center; }
  .answer__stage .device { --device-w: min(58vw, 220px); }
  .aproof .proof { text-align: left; }
  .convictions .gifts__stage { height: 250px; }
  .gift-art--quality { transform-origin: center; }
  .gift-art--quality.is-active { transform: scale(0.74); }
  .gift-art--quality.is-before { transform: translateY(-5%) scale(0.72); }
  .q-noise { transform: translate(-74%, -55%) rotate(-4deg); }
  .q-card { transform: translate(10%, 4%); }
  .split { width: 170px; }
  .split__num { font-size: 2.3rem; }
  .testers { gap: 14px 8px; max-width: 300px; }
  .testers li { width: 88px; gap: 3px; }
  .tester__ring { width: 58px; height: 58px; margin-bottom: 3px; }
  .tester__logo { border-width: 2px; }
  .tester__name { font-size: 12.5px; }
  .tester__sector { display: none; }
  .team__inner { grid-template-columns: minmax(0, 1fr); }
  .partners { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .partner + .partner { padding-top: 36px; border-top: 1px solid var(--line); }
  .partner + .partner::before { display: none; }
  .road { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-left: 36px; }
  .road::before { left: 9px; right: auto; top: 9px; bottom: 9px; width: 1px; height: auto; background: linear-gradient(180deg, rgba(135, 106, 255, 0.6), rgba(135, 106, 255, 0.2) 45%, rgba(14, 14, 20, 0.08)); }
  .road__step { padding-top: 0; }
  .road__dot { left: -36px; }
}
@media (prefers-reduced-motion: reduce) {
  .ahero .kicker, .ahero__title, .ahero__lead, .people li { animation: none; }
  .contact__arrow, .testers li, .q-check, .q-check svg, .q-card__ok, .q-card__steps::after { transition: none; }
  .testers li { opacity: 1; transform: none; }
}
@keyframes ab-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }