/* Direction A, V4 : design system Propul AI (branche du Kit Com). Crème, marine, orange en aplat
   seulement, filets, grille 44 px, colonnes de carrés du site en ligne sur les bords du hero (canvas,
   demo.js). Source Serif 700 pour le H1, les chiffres et les énoncés ; Inter pour tout ; JetBrains Mono
   pour les labels « § 02 · ». Cartes rayon 10, boutons rayon 6, aucune ombre. V9 : plus d'alternance, un
   seul bloc marine d'un seul tenant (Process, Un Kap par métier, Une IA installée ; nuit.css), le reste clair,
   tenu par deux rails verticaux et des nœuds carrés aux jonctions (fin de ce fichier).
   Une seule gouttière pour toute la page : .pa-wrap. Aucune marge de navigateur. */

html, body { margin: 0; padding: 0; }
body { min-height: 100dvh; }
.pa {
  --creme: #FAF7F6; --marine: #10224E; --marine-2: #0B1838; --second: #4F6089;
  /* Panneaux sur marine et texte secondaire sur marine (contraste 6,4:1 sur marine, 5,5:1 sur marine clair). */
  --marine-clair: #182C5E; --second-clair: #9AA6C7;
  --orange: #FF9047; --orange-2: #F27F33; --filet: #E9E2DE; --grille: #F1EAE7; --blanc: #FFFFFF;
  --verre: rgba(255, 255, 255, .06); --verre-filet: rgba(255, 255, 255, .14); --verre-texte: rgba(250, 247, 246, .82);
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --sortie: cubic-bezier(.23, 1, .32, 1);
  --vite: 160ms;
  --entete: 64px;
  background: var(--creme); color: var(--marine);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
.pa *, .pa *::before, .pa *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
:where(.pa) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table) { margin: 0; padding: 0; }
:where(.pa) :where(ul, ol) { list-style: none; }
:where(.pa) :where(a) { color: inherit; }
:where(.pa) :where(button) { font: inherit; color: inherit; }
:where(.pa) :where(img) { display: block; max-width: 100%; height: auto; }
.pa h1 { font: 700 clamp(2.4rem, 2.6vw + 1.2rem, 3.6rem)/1.04 var(--serif); letter-spacing: -.025em; text-wrap: balance; }
.pa h2 { font: 600 clamp(1.7rem, 1.4vw + 1rem, 2.4rem)/1.15 var(--sans); letter-spacing: -.02em; text-wrap: balance; }
.pa h3 { font: 600 1.125rem/1.3 var(--sans); letter-spacing: -.01em; text-wrap: balance; }
.pa p, .pa li, .pa td { text-wrap: pretty; }
.pa :focus-visible { outline: 2px solid var(--marine); outline-offset: 3px; }
.pa-marine :focus-visible { outline-color: var(--orange); }

/* La gouttière unique : 24 px de chaque côté, 16 px sous 600 px. */
.pa-wrap { width: min(1240px, 100% - 48px); margin-inline: auto; }
@media (max-width: 599px) { .pa-wrap { width: calc(100% - 32px); } }
.pa-skip { position: absolute; left: -999px; top: 0; background: var(--blanc); padding: 8px 12px; z-index: 30; }
.pa-skip:focus { left: 12px; top: 12px; }
.pa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pa-label { font: 500 .72rem/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--second); }
.pa-marine .pa-label { color: var(--orange); }
.pa-tete .pa-label { margin-bottom: 14px; }
.pa-tete > p:not(.pa-label) { margin-top: 16px; color: var(--second); max-width: 38em; }
.pa-marine .pa-tete > p:not(.pa-label) { color: #C9D2E6; }
.pa-tete--large { max-width: 760px; margin-bottom: 28px; }
.pa-sec { padding-block: clamp(48px, 5.5vw, 80px); }
.pa-sec--filet { border-top: 1px solid var(--filet); }
.pa-deux { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) { .pa-deux { grid-template-columns: 5fr 7fr; gap: 64px; } }
.pa-note { margin-top: 20px; color: var(--second); font-size: .95rem; max-width: 40em; }

/* Boutons : orange aplat avec texte marine ; secondaire à filet marine. Rayon 6. */
.pa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 6px; border: 1px solid transparent; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; color: var(--marine); transition: background-color var(--vite) var(--sortie), border-color var(--vite), transform var(--vite) var(--sortie); }
.pa-btn--orange { background: var(--orange); }
.pa-btn--orange:hover { background: var(--orange-2); }
.pa-btn--orange:active { transform: translateY(1px); }
.pa-btn--trait { border-color: var(--marine); background: transparent; }
.pa-btn--trait:hover { background: var(--blanc); }
.pa-lien { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pa-lien:hover { text-decoration-thickness: 2px; }
.pa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.pa-actions--col { flex-direction: column; align-items: flex-start; margin-top: 24px; }
.pa-etiq { display: inline-block; font: 600 .78rem/1 var(--sans); padding: 7px 10px; border-radius: 6px; border: 1px solid var(--marine); }
.pa-etiq--orange { background: var(--orange); border-color: var(--orange); }
/* ---- En-tête et pied de page : entete.css (V12). */

/* ---- Ligne d'outils qui défile, de droite à gauche. Deux copies de la piste ; chaque élément porte sa
   marge, pour qu'une période fasse exactement la moitié. Pause au survol et au focus ; statique et
   défilable au doigt en mouvement réduit. */
.pa-defile { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pa-defile__piste { display: flex; width: max-content; animation: pa-defile 40s linear infinite; will-change: transform; }
.pa-defile:hover .pa-defile__piste, .pa-defile:focus-within .pa-defile__piste { animation-play-state: paused; }
.pa-defile__piste li { flex: none; display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; padding: 7px 12px 7px 8px; background: var(--creme); color: var(--marine); border: 1px solid var(--filet); border-radius: 6px; font-size: .84rem; font-weight: 500; white-space: nowrap; }
.pa-defile__piste img { width: 22px; height: 22px; object-fit: contain; }
.pa-marine .pa-defile__piste li { background: var(--blanc); border-color: var(--blanc); }
.pa-defile__plus { background: transparent !important; border-color: var(--filet) !important; color: var(--second) !important; }
.pa-marine .pa-defile__plus { border-color: var(--verre-filet) !important; color: #C9D2E6 !important; }
.pa-defile--petit { margin-top: 28px; }
.pa-defile--petit .pa-defile__piste li { padding: 5px 10px 5px 7px; font-size: .74rem; margin-right: 8px; background: var(--blanc); }
.pa-defile--petit .pa-defile__piste img { width: 18px; height: 18px; }
@keyframes pa-defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .pa-defile { -webkit-mask-image: none; mask-image: none; overflow-x: auto; scrollbar-width: thin; }
  .pa-defile__piste { animation: none; }
  .pa-defile__piste li[aria-hidden] { display: none; }
}

/* ================= 1. Hero, V6 : mise en page Linear ================= */
/* Le titre en haut, la ligne d'appui à gauche et l'appel à droite, puis l'application Kap en pleine
   largeur. La fenêtre tient dans un écran : la conversation défile dedans, jamais la page. */
.pa-hero { position: relative; isolation: isolate; padding-block: clamp(56px, 11vh, 128px) 56px; overflow: hidden;
  background-image: linear-gradient(var(--grille) 1px, transparent 1px), linear-gradient(90deg, var(--grille) 1px, transparent 1px);
  background-size: 44px 44px; background-position: center top; }
/* Les colonnes de carrés du site (canvas posé par demo.js), et le fondu du bas. */
.pa-bords { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.pa-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 72px; z-index: -1; background: linear-gradient(transparent, var(--creme)); pointer-events: none; }
.pa-hero h1 { font-size: clamp(2.6rem, 5.4vw, 5.25rem); line-height: 1.02; letter-spacing: -.035em; max-width: 12ch; }
.pa-hero__bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: clamp(20px, 3vh, 32px); }
.pa-hero__ligne { font: 400 1.15rem/1.4 var(--sans); color: var(--second); }
.pa-hero__bas .pa-actions { gap: 12px 28px; }
.pa-hero__bas .pa-btn { min-height: 44px; }
/* V12 : la phrase qui dit ce qu'est Kap, sur trois lignes au plus ; l'unique bouton, et sa promesse en dessous. */
.pa-hero__bas { align-items: flex-end; }
.pa-hero__ligne { max-width: 36em; text-wrap: pretty; }
.pa-hero__cta { flex-direction: column; align-items: flex-end; gap: 8px; }
.pa-hero__aide { font-size: .88rem; color: var(--second); }
@media (max-width: 1023px) { .pa-hero__cta { align-items: flex-start; } }
.pa-defile--petit { margin-top: 32px; }
@media (max-width: 599px) {
  .pa-hero { padding-block: 40px; }
  .pa-hero__bas { flex-direction: column; align-items: flex-start; }
  .pa-hero__ligne { font-size: 1.05rem; }
  .pa-defile--petit { margin-top: 24px; }
}

/* La fenêtre Kap : un cadre à filet (le boîtier de Linear, sans ombre portée), puis l'application. */
.kd { margin-top: clamp(36px, 6vh, 64px); }
.kd__fenetre { position: relative; display: flex; flex-direction: column; height: clamp(540px, calc(100dvh - var(--entete) - 40px), 880px); min-width: 0; border: 1px solid var(--filet); border-radius: 12px; background: var(--blanc); overflow: hidden;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, .6), 0 0 0 8px var(--filet); }
@media (max-width: 599px) { .kd__fenetre { height: clamp(520px, calc(100dvh - var(--entete) - 28px), 760px); box-shadow: none; } }
.kd__app { display: grid; grid-template-columns: 236px minmax(0, 1fr); flex: 1; min-height: 0; }
.kd__app > * { min-width: 0; min-height: 0; }
.kd__ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* Barre latérale : l'espace de la PME. */
.kd__side { display: flex; flex-direction: column; background: var(--creme); border-right: 1px solid var(--filet); padding: 12px 10px; overflow-y: auto; scrollbar-width: none; }
.kd__ws { display: flex; align-items: center; gap: 8px; padding: 4px 8px 14px; }
.kd__logo { display: grid; grid-template-columns: repeat(2, 7px); gap: 2px; flex: none; }
.kd__logo i { width: 7px; height: 7px; background: var(--marine); }
.kd__logo i:first-child { background: var(--orange); }
.kd__logo i:last-child { background: var(--second); }
.kd__nom { font-weight: 700; font-size: .98rem; }
.kd__ws-pme { font-size: .82rem; color: var(--second); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd__ws-chev { width: 14px; height: 14px; color: var(--second); }
.kd__menu { display: grid; gap: 1px; }
.kd__menu li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; font-size: .86rem; font-weight: 500; color: var(--marine); }
.kd__menu li .kd__ico { color: var(--second); }
.kd__menu li.is-actif { background: var(--blanc); border-color: var(--filet); }
.kd__menu li.is-actif .kd__ico { color: var(--marine); }
.kd__menu b { margin-left: auto; font: 500 .62rem/1 var(--mono); padding: 3px 6px; border-radius: 4px; background: var(--orange); }
.kd__carre { width: 10px; height: 10px; margin-inline: 3px; flex: none; background: var(--c); }
.kd__side-t { display: flex; align-items: center; gap: 4px; padding: 18px 8px 6px; font: 500 .6rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--second); }
.kd__side-t .kd__ico { width: 12px; height: 12px; }

/* Les conversations : les trois cas, seule partie active du menu. */
.kd__cas { display: grid; gap: 2px; }
.kd__cas [role="tab"] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 7px 8px 7px 10px; border: 1px solid transparent; background: transparent; border-radius: 6px; cursor: pointer; text-align: left; transition: border-color var(--vite), background-color var(--vite); }
.kd__cas-sect { font: 500 .58rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--second); }
.kd__cas-nom { font-weight: 600; font-size: .86rem; line-height: 1.3; }
.kd__cas [role="tab"]:hover { background: rgba(16, 34, 78, .04); }
.kd__cas [aria-selected="true"], .kd__cas [aria-selected="true"]:hover { background: var(--blanc); border-color: var(--filet); box-shadow: inset 2px 0 0 var(--orange); }

/* Colonne principale : barre du fil (titre, badge, rejouer), puis la conversation et les documents. */
.kd__main { display: flex; flex-direction: column; }
.kd__barre { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; border-bottom: 1px solid var(--filet); flex: none; }
.kd .kd__titre { display: flex; align-items: baseline; gap: 10px; min-width: 0; white-space: nowrap; }
.kd__titre-sect { font: 500 .6rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--second); }
.kd__titre-nom { font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; }
.kd__badge { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 500 .66rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--marine); padding: 7px 10px; background: var(--creme); border: 1px solid var(--filet); border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kd__badge-pt { width: 7px; height: 7px; background: var(--orange); flex: none; }
.kd__rejouer { flex: none; border: 0; background: none; font: 600 .8rem/1 var(--sans); cursor: pointer; padding: 6px 4px; text-decoration: underline; text-underline-offset: 3px; }

.kd__corps { display: grid; grid-template-columns: minmax(0, 1fr) 264px; flex: 1; min-height: 0; }
.kd__corps > * { min-width: 0; min-height: 0; }

/* Documents : panneau de droite, défile pour lui-même, ne fait jamais grandir la fenêtre. */
.kd__tiroir { background: var(--creme); border-left: 1px solid var(--filet); padding: 16px 12px; overflow-y: auto; }
.kd__tiroir-t { font: 500 .62rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--second); margin-bottom: 12px; }
.kd__fichiers { display: grid; gap: 6px; }
.kd__fichier { display: flex; align-items: center; gap: 8px; padding: 9px 10px; background: var(--blanc); border: 1px solid var(--filet); border-radius: 6px; font-size: .8rem; line-height: 1.3; transition: border-color var(--vite), opacity var(--vite); }
.kd__fichier.is-lu { border-color: var(--marine); }
.kd__fichier.is-lu::after { content: ""; width: 7px; height: 7px; background: var(--orange); margin-left: 6px; flex: none; }
.kd__fichier.is-dormant { opacity: .5; }
.kd__type { flex: none; font: 500 .58rem/1 var(--mono); letter-spacing: .08em; padding: 4px 5px; border: 1px solid var(--filet); border-radius: 4px; color: var(--second); background: var(--blanc); }
.kd__fichier .kd__type { margin-left: auto; }
.kd__outil { width: 18px; height: 18px; flex: none; object-fit: contain; }
.kd__vol { position: absolute; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 9px 10px; background: var(--blanc); border: 1px solid var(--marine); border-radius: 6px; font-size: .8rem; line-height: 1.3; pointer-events: none; transition: transform 520ms var(--sortie), opacity 520ms; will-change: transform; }

/* Sous 1100 px : les documents passent en bande au-dessus de la conversation. */
@media (max-width: 1099px) {
  .kd__corps { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .kd__tiroir { order: -1; border-left: 0; border-bottom: 1px solid var(--filet); padding: 8px 12px; overflow: hidden; }
  .kd__tiroir-t { display: none; }
  .kd__fichiers { display: flex; overflow-x: auto; scrollbar-width: none; }
  .kd__fichiers::-webkit-scrollbar { display: none; }
  .kd__fichier { flex: 0 0 auto; max-width: 240px; padding: 6px 8px; }
  .kd__fichier .kd__type { display: none; }
  .kd__fnom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kd .kd__titre { display: none; }
  .kd__badge { margin-left: 0; }
  .kd__rejouer { margin-left: auto; }
}
/* Sous 860 px : la barre latérale se réduit aux conversations, en onglets horizontaux. */
@media (max-width: 859px) {
  .kd__app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .kd__side { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--filet); padding: 8px 10px; overflow: visible; }
  .kd__ws, .kd__menu, .kd__side-t { display: none; }
  .kd__cas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .kd__cas::-webkit-scrollbar { display: none; }
  .kd__cas [role="tab"] { flex: 0 0 auto; width: auto; padding: 6px 10px; border-color: var(--filet); background: var(--blanc); }
  .kd__cas [aria-selected="true"], .kd__cas [aria-selected="true"]:hover { background: var(--marine); border-color: var(--marine); box-shadow: none; }
  .kd__cas [aria-selected="true"] .kd__cas-sect { color: var(--orange); }
  .kd__cas [aria-selected="true"] .kd__cas-nom { color: var(--creme); }
  .kd__barre { min-height: 0; padding: 8px 12px; }
}
@media (max-width: 599px) { .kd__badge { display: block; flex: 1; font-size: .58rem; letter-spacing: .04em; line-height: 1.2; white-space: normal; overflow: visible; text-overflow: clip; } .kd__badge-pt { display: inline-block; vertical-align: middle; margin-right: 6px; } }

/* Zone de conversation : défilement interne, barre fine, bouton pour redescendre. */
.kd__zone { position: relative; min-height: 0; display: flex; }
.kd__conv { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--filet) transparent; padding: 24px max(22px, calc((100% - 760px) / 2)) 28px; display: grid; gap: 18px; align-content: start; }
.kd__conv::-webkit-scrollbar { width: 6px; }
.kd__conv::-webkit-scrollbar-thumb { background: var(--filet); border-radius: 3px; }
@media (max-width: 599px) { .kd__conv { padding: 14px 14px 18px; gap: 14px; } }
.kd__descendre { position: absolute; right: 16px; bottom: 14px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--marine); border-radius: 6px; background: var(--blanc); color: var(--marine); cursor: pointer; transition: background-color var(--vite), transform var(--vite) var(--sortie); }
.kd__descendre svg { width: 18px; height: 18px; }
.kd__descendre:hover { background: var(--creme); }
.kd__descendre[hidden] { display: none; }

.kd__qui { display: block; font: 500 .6rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--second); margin-bottom: 6px; }
.kd__msg--vous { justify-self: end; max-width: min(520px, 100%); }
.kd__msg--vous .kd__qui { text-align: right; }
.kd__msg--vous p { background: var(--creme); border: 1px solid var(--filet); border-radius: 10px; padding: 12px 16px; font-size: .95rem; line-height: 1.5; }
.kd__msg--vous p::after { content: ""; display: inline-block; width: 2px; height: 1em; background: var(--marine); vertical-align: -2px; margin-left: 2px; opacity: 0; }
.kd__msg--vous.is-tape p::after { opacity: 1; animation: kd-curseur 1s steps(2) infinite; }
@keyframes kd-curseur { to { opacity: 0; } }
.kd__msg--kap { max-width: 680px; }
.kd__msg--kap .kd__qui::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--orange); margin-right: 8px; }
.kd__rep { font-size: .95rem; line-height: 1.55; display: grid; gap: 12px; }
.kd__ref { font: 500 .58rem/1 var(--mono); color: var(--marine); border: 1px solid var(--filet); border-radius: 4px; padding: 2px 4px; margin-left: 4px; vertical-align: 2px; background: var(--blanc); cursor: pointer; }
button.kd__ref:hover, button.kd__ref[aria-expanded="true"] { border-color: var(--marine); background: var(--creme); }

/* Trace de réflexion */
.kd__reflexion { display: grid; gap: 7px; padding: 12px 14px; border-left: 2px solid var(--filet); font: 500 .74rem/1.5 var(--mono); color: var(--second); }
.kd__reflexion > li, .kd__actions li { display: grid; grid-template-columns: 14px 1fr; column-gap: 10px; align-items: start; transition: color var(--vite); }
.kd__coche { width: 14px; height: 14px; margin-top: 3px; border: 1px solid var(--filet); background: var(--blanc); position: relative; transition: background-color var(--vite), border-color var(--vite); }
.kd__coche::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 7px; border: solid var(--marine); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform var(--vite) var(--sortie); }
[data-etat="encours"] .kd__coche { border-color: var(--marine); animation: kd-pulse 1s infinite; }
[data-etat="encours"] { color: var(--marine); }
[data-etat="fait"] .kd__coche { background: var(--orange); border-color: var(--orange); }
[data-etat="fait"] .kd__coche::after { transform: rotate(45deg) scale(1); }
[data-etat="fait"] { color: var(--marine); }
[data-etat="attente"] { opacity: .45; }
@keyframes kd-pulse { 50% { background: var(--creme); } }
.kd__trouves { grid-column: 2; display: grid; gap: 4px; margin-top: 6px; }
.kd__trouves li { display: flex; align-items: center; gap: 8px; color: var(--marine); font-family: var(--sans); font-weight: 500; font-size: .8rem; }
.kd__trouves li .kd__outil { width: 16px; height: 16px; }
.kd__trouves li.is-attente { visibility: hidden; }

/* Tableau, clauses, étapes, citation */
.kd__tab { width: 100%; border-collapse: collapse; font-size: .88rem; }
.kd__tab caption { text-align: left; font-weight: 600; padding-bottom: 6px; }
.kd__tab th { font: 500 .6rem/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--second); text-align: left; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--marine); }
.kd__tab td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--filet); vertical-align: top; }
.kd__tab th:not(:first-child), .kd__tab td:not(:first-child) { text-align: right; white-space: nowrap; }
.kd__tab tfoot td { border-bottom: 0; border-top: 1px solid var(--marine); font-weight: 600; padding-top: 9px; }
.kd__tab tbody tr.is-nouvelle { animation: kd-ligne 360ms var(--sortie); }
@keyframes kd-ligne { from { opacity: 0; transform: translateX(-6px); } }
@media (max-width: 480px) { .kd__tab th:nth-child(3), .kd__tab td:nth-child(3) { display: none; } }
.kd__clauses { display: grid; gap: 8px; }
.kd__clauses > div { display: grid; grid-template-columns: 88px 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--filet); }
.kd__clauses dt { font: 500 .6rem/1.7 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--second); }
.kd__etapes { display: grid; gap: 8px; counter-reset: e; }
.kd__etapes li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; counter-increment: e; }
.kd__etapes li::before { content: counter(e); font: 500 .68rem/1.8 var(--mono); border: 1px solid var(--filet); border-radius: 4px; height: 22px; width: 22px; text-align: center; }
.kd__cit { padding: 12px 16px; background: var(--creme); border-left: 2px solid var(--orange); border-radius: 0 6px 6px 0; font-family: var(--serif); font-size: 1.02rem; line-height: 1.5; }
.kd__cit cite { display: block; margin-top: 8px; font: 500 .62rem/1.4 var(--mono); font-style: normal; letter-spacing: .08em; color: var(--second); }

/* Sources */
.kd__sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--filet); }
.kd__sources-t { font: 500 .6rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--second); margin-right: 4px; }
.kd__puce { display: inline-flex; align-items: center; gap: 8px; padding: 5px 9px 5px 5px; border: 1px solid var(--filet); border-radius: 6px; background: var(--blanc); font-size: .76rem; font-weight: 500; cursor: pointer; transition: border-color var(--vite), background-color var(--vite); }
.kd__puce b { font: 500 .58rem/1 var(--mono); border: 1px solid var(--filet); border-radius: 4px; padding: 3px 4px; }
.kd__puce:hover, .kd__puce[aria-expanded="true"] { border-color: var(--marine); background: var(--creme); }
.kd__pop { flex: 1 0 100%; width: 100%; margin-top: 4px; padding: 12px 14px; border: 1px solid var(--marine); border-radius: 6px; background: var(--blanc); animation: kd-ligne 220ms var(--sortie); }
.kd__pop header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; font: 500 .64rem/1.3 var(--mono); letter-spacing: .06em; color: var(--second); }
.kd__pop header button { border: 0; background: none; font: 600 .72rem/1 var(--sans); cursor: pointer; padding: 4px; text-decoration: underline; }
.kd__pop p { font-size: .88rem; line-height: 1.5; }
.kd__pop mark { background: #FFE2CC; color: inherit; padding: 1px 0; }

/* Actions et validation */
.kd__actions { padding: 12px 14px; border: 1px solid var(--filet); border-radius: 10px; display: grid; gap: 7px; max-width: 680px; }
.kd__actions-t { font: 500 .6rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--second); }
.kd__actions li { font-size: .88rem; font-weight: 500; }
.kd__valid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--creme); border: 1px solid var(--filet); border-radius: 10px; max-width: 680px; }
.kd__valid-t { font-weight: 600; }
.kd__valid > div > p:not(.kd__valid-t) { font-size: .85rem; color: var(--second); }
.kd__valid-b { display: flex; gap: 8px; }
.kd__valid .pa-btn { min-height: 38px; padding-inline: 16px; font-size: .9rem; }
.kd__valid--ok { background: var(--marine); border-color: var(--marine); color: var(--creme); }
.kd__valid--ok .kd__valid-t { display: flex; align-items: center; gap: 10px; }
.kd__valid--ok .kd__coche { background: var(--orange); border-color: var(--orange); margin: 0; }
.kd__valid--ok .kd__coche::after { transform: rotate(45deg) scale(1); }
.kd__valid--ok > div > p:not(.kd__valid-t) { color: #C9D2E6; }
.kd__edit { width: 100%; min-height: 200px; padding: 12px; border: 1px solid var(--marine); border-radius: 6px; font: 400 .9rem/1.5 var(--sans); color: var(--marine); resize: vertical; background: var(--blanc); }
.kd__mention { flex: none; padding: 8px 16px; border-top: 1px solid var(--filet); font-size: .74rem; color: var(--second); }
.kd__note { font: 500 .68rem/1.4 var(--mono); color: var(--second); padding: 6px 16px; border-bottom: 1px solid var(--filet); }

/* ---- 2. Le constat : 67 % en très grand sur aplat orange, texte marine. */
.pa-chiffre { background: var(--orange); border-radius: 10px; padding: 32px 36px 24px; }
.pa-chiffre__n { font: 700 clamp(5rem, 9vw, 8.5rem)/.95 var(--serif); letter-spacing: -.04em; }
.pa-chiffre__t { margin-top: 16px; font-size: 1.1rem; line-height: 1.5; max-width: 30em; }

/* ---- 3. Votre assistant : marine. */
.pa-marine { background: var(--marine); color: var(--creme); }
.pa-marine h2, .pa-marine h3 { color: var(--creme); }
.pa-assist { display: grid; gap: 32px; }
@media (min-width: 900px) { .pa-assist { grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; } }
.pa-table { width: 100%; border-collapse: collapse; }
.pa-table th { font: 500 .68rem/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; text-align: left; padding: 0 16px 12px 0; color: var(--second); border-bottom: 1px solid var(--filet); }
.pa-table td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--filet); vertical-align: top; }
.pa-table--marine th { color: var(--orange); border-color: #2A3B68; }
.pa-table--marine td { border-color: #2A3B68; }
.pa-table--marine td:first-child { font-weight: 600; width: 44%; }
.pa-assist__cote { display: grid; gap: 24px; align-content: start; }
.pa-encart { border: 1px solid #2A3B68; border-radius: 10px; padding: 20px 22px; }
.pa-encart .pa-label { margin-bottom: 10px; }
.pa-assist__phrase { font: 700 clamp(1.4rem, 1.6vw, 1.9rem)/1.3 var(--serif); letter-spacing: -.015em; max-width: 18em; }

/* ================= 4. Comment Kap travaille : la scène, en marine ================= */
.pa-process { padding-block: 0; }
.pa-process__pin { height: calc(100vh - var(--entete)); height: calc(100dvh - var(--entete)); min-height: 600px; display: flex; align-items: center; padding-block: 28px; }
.pa-process__g { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 22px; height: 100%; min-height: 0; }
.pa-process__tete { position: relative; }
.pa-process__num { position: absolute; right: 0; top: 0; font: 500 .78rem/1 var(--mono); letter-spacing: .2em; color: var(--orange); }
.pa-process__phrases { position: relative; margin-top: 16px; min-height: 2.2em; font: 700 clamp(1.7rem, 2.6vw, 2.9rem)/1.1 var(--serif); letter-spacing: -.025em; color: var(--creme); max-width: 24em; }
.pa-process__phrases span { position: absolute; left: 0; top: 0; }
html:not(.js) .pa-process__phrases span:not(:last-child), .is-calme .pa-process__phrases span:not(:last-child) { display: none; }
html:not(.js) .pa-process__phrases span:last-child, .is-calme .pa-process__phrases span:last-child { position: static; }
html:not(.js) .pa-process__num, .is-calme .pa-process__num { display: none; }

.pa-scene { position: relative; isolation: isolate; display: grid; grid-template-columns: 196px minmax(0, 1fr) 216px; gap: 28px; align-items: center; padding: 44px 24px 24px; min-height: 0; border: 1px solid var(--verre-filet); border-radius: 12px; background: rgba(255, 255, 255, .025); }
.pa-scene__lueur { position: absolute; left: 50%; top: 50%; width: 620px; height: 480px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 144, 71, .13), rgba(255, 144, 71, 0)); pointer-events: none; z-index: 0; }
.pa-scene > div > .pa-label { margin-bottom: 10px; }
.pa-scene__outils ul { display: grid; gap: 6px; }
.pa-scene__outils li { display: flex; align-items: center; gap: 8px; height: var(--ph, 36px); padding: 0 10px; background: var(--verre); border: 1px solid var(--verre-filet); border-radius: 6px; color: var(--verre-texte); font-size: .72rem; font-weight: 500; min-width: 0; transform: translateX(var(--dx, 0px)); will-change: transform; }
.pa-scene__outils li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-scene__outils img { width: 20px; height: 20px; flex: none; object-fit: contain; }
@media (max-height: 820px) and (min-width: 900px) { .pa-scene__outils li { --ph: 32px; font-size: .68rem; } .pa-scene__outils ul { gap: 5px; } .pa-scene__outils img { width: 18px; height: 18px; } }
@media (max-height: 720px) and (min-width: 900px) { .pa-scene__outils li { --ph: 28px; } .pa-scene__outils ul { gap: 4px; } }

/* Le serveur : un cadre sur marine profond. État final écrit en CSS ; process.js pose l'état initial. */
.pa-scene__serveur { position: relative; background: var(--marine-2); color: var(--creme); border-radius: 10px; border: 1px solid var(--orange); overflow: hidden; }
/* Sur grand écran, le cadre du serveur reste étroit au centre : les fils vers les outils et vers les cockpits s'allongent. */
@media (min-width: 900px) { .pa-scene__serveur { justify-self: center; width: min(100%, 380px); } }
/* Dedans : le titre puis la mémoire et la page OCR, centrés. Rien d'autre. */
.pa-scene__corps { padding: 24px 18px 26px; display: grid; gap: 18px; justify-items: center; }
.pa-scene__serveur-t { color: var(--orange); margin: 0; text-align: center; }
.pa-scene__ligne1 { display: flex; justify-content: center; gap: 22px; align-items: flex-start; }
.pa-scene__grille { display: grid; grid-template-columns: repeat(16, 8px); grid-auto-rows: 8px; gap: 4px; }
.pa-scene__grille i { width: 8px; height: 8px; background: var(--orange); }
.pa-scene__grille i.c { background: var(--creme); }
.pa-scene__grille i.b { background: rgba(255, 255, 255, .22); }
.pa-scene__grille:empty { width: 188px; height: 116px; background-image: linear-gradient(to bottom, transparent 8px, var(--marine-2) 8px), linear-gradient(to right, var(--orange) 8px, transparent 8px); background-size: 12px 12px; }
.pa-scene__page { position: relative; width: 88px; height: 116px; background: var(--creme); border-radius: 4px; padding: 10px 9px; }
.pa-scene__lignes { display: grid; gap: 6px; }
.pa-scene__lignes span { display: flex; gap: 3px; }
.pa-scene__lignes i { width: 5px; height: 5px; background: var(--marine); }
.pa-scene__lignes:empty { height: 100%; background: repeating-linear-gradient(to bottom, var(--marine) 0 5px, transparent 5px 11px); }
.pa-scene__ocr { position: absolute; right: 7px; bottom: 6px; font: 500 .56rem/1 var(--mono); letter-spacing: .2em; color: var(--marine); background: var(--orange); padding: 3px 5px; border-radius: 3px; }

/* Les cockpits : trois cartes de verre avec une mini-interface. */
.pa-scene__cockpits ul { display: grid; gap: 10px; }
.pa-scene__cockpits li { display: grid; gap: 6px; padding: 10px 12px 11px; background: var(--verre); border: 1px solid var(--orange); border-radius: 8px; }
.pa-scene__ck-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pa-scene__ck-tete .pa-label { font-size: .58rem; letter-spacing: .16em; }
.pa-scene__ck-tete i { width: 6px; height: 6px; background: var(--orange); }
.pa-scene__cockpits strong { font-size: .88rem; color: var(--creme); }
.pa-scene__ck-ligne { display: grid; gap: 4px; }
.pa-scene__ck-ligne i { display: block; height: 4px; border-radius: 1px; background: rgba(255, 255, 255, .18); }
.pa-scene__ck-ligne i:last-child { width: 64%; }
.pa-scene__bouton { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; padding: 5px 9px; border: 1px solid var(--verre-filet); border-radius: 6px; font-size: .72rem; font-weight: 600; color: var(--verre-texte); justify-self: start; }
.pa-scene__valider { background: var(--orange); border-color: var(--orange); color: var(--marine); }
.pa-scene__coche { width: 9px; height: 9px; border: 1px solid var(--marine); background: var(--marine); display: inline-block; }

/* Ordre de profondeur : chemins derrière les blocs, pixels et lien de source devant, curseur tout en haut. */
.pa-scene__outils, .pa-scene__serveur, .pa-scene__cockpits { position: relative; z-index: 1; }
.pa-scene__fils { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.pa-scene__pixels { z-index: 2; }
.pa-scene__retour { z-index: 1; }
.pa-scene__curseur { z-index: 3; }
.pa-scene__fils path, .pa-scene__fils line { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1.25; }
.pa-scene__fils .is-retour, .pa-scene__fils .is-lien { stroke: var(--orange); stroke-width: 1.5; }
.pa-scene__pixels { position: absolute; inset: 0; pointer-events: none; }
.pa-scene__pixels i { position: absolute; left: 0; top: 0; width: 6px; height: 6px; background: var(--orange); opacity: 0; will-change: transform; }
.pa-scene__pixels i.c { background: var(--creme); }
.pa-scene__pixels i.b { background: rgba(255, 255, 255, .5); }
.pa-scene__pixels i.g { width: 10px; height: 10px; }
.pa-scene__retour { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); margin: 0; color: var(--orange); white-space: nowrap; font-size: .62rem; }
.pa-scene__curseur { position: absolute; left: 0; top: 0; width: 22px; height: 22px; opacity: 0; pointer-events: none; }

/* Les six temps en liste numérotée : sans JavaScript, en mouvement réduit et sur mobile. */
.pa-process__liste { display: none; margin-top: 18px; gap: 8px; counter-reset: p; max-width: 42em; }
.pa-process__liste li { counter-increment: p; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: baseline; font: 400 .95rem/1.5 var(--sans); color: #E6EAF4; }
.pa-process__liste li::before { content: counter(p, decimal-leading-zero); font: 500 .72rem/1.6 var(--mono); letter-spacing: .1em; color: var(--orange); }
html:not(.js) .pa-process__liste, .is-calme .pa-process__liste, .pa-process__liste.is-pleine { display: grid; }
html:not(.js) .pa-process__pin, .is-calme .pa-process__pin { height: auto; padding-block: 64px; }
html:not(.js) .pa-process__phrases, .is-calme .pa-process__phrases { min-height: 0; }

@media (max-width: 899px) {
  .pa-process__pin { height: auto; min-height: 0; padding-block: 56px; }
  .pa-process__g { display: grid; grid-template-rows: none; gap: 24px; height: auto; }
  .pa-process__num { position: static; margin-top: 18px; }
  .pa-process__phrases { min-height: 3.2em; font-size: clamp(1.4rem, 5.6vw, 1.9rem); }
  .pa-process__liste { margin-top: 24px; }
  .pa-scene { grid-template-columns: 1fr; gap: 24px; padding: 18px 16px 24px; }
  .pa-scene__lueur { width: 90%; height: 60%; }
  .pa-scene__outils ul { grid-template-columns: repeat(3, 1fr); }
  .pa-scene__outils li { transform: none; --ph: 34px; padding: 0 8px; }
  .pa-scene__ligne1 { flex-wrap: wrap; }
  .pa-scene__retour { left: 16px; right: 16px; top: auto; bottom: 8px; transform: none; white-space: normal; text-align: center; }
}
@media (max-width: 599px) {
  .pa-scene__outils ul { grid-template-columns: repeat(2, 1fr); }
  .pa-scene__grille { grid-template-columns: repeat(16, 6px); grid-auto-rows: 6px; gap: 3px; }
  .pa-scene__grille i { width: 6px; height: 6px; }
  .pa-scene__grille:empty { width: 141px; height: 87px; background-size: 9px 9px; background-image: linear-gradient(to bottom, transparent 6px, var(--marine-2) 6px), linear-gradient(to right, var(--orange) 6px, transparent 6px); }
  .pa-scene__page { width: 70px; height: 87px; padding: 8px 7px; }
  .pa-scene__lignes { gap: 4px; }
  .pa-scene__lignes i { width: 4px; height: 4px; }
  .pa-scene__lignes:empty { background: repeating-linear-gradient(to bottom, var(--marine) 0 4px, transparent 4px 8px); }
}

/* ---- 5. Trois étages */
.pa-etages { display: grid; gap: 8px; }
.pa-etage { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; padding: 20px 22px; border-radius: 10px; }
.pa-etage h3 { margin-bottom: 4px; }
.pa-etage p { font-size: .95rem; }
.pa-etage--3 { background: var(--creme); border: 1px solid var(--marine); margin-inline: 48px 0; }
.pa-etage--2 { background: var(--orange); margin-inline: 24px 0; }
.pa-etage--2 .pa-label { color: var(--marine); }
.pa-etage--1 { background: var(--marine); color: var(--creme); }
.pa-etage--1 h3 { color: var(--creme); }
.pa-etage--1 .pa-label { color: var(--orange); }
.pa-etages__fond { margin-top: 8px; padding: 12px 0; border-top: 1px solid var(--marine); border-bottom: 1px solid var(--marine); text-align: center; color: var(--marine); }
@media (max-width: 599px) { .pa-etage--3, .pa-etage--2 { margin-inline: 0; } .pa-etage { grid-template-columns: 40px 1fr; padding: 16px; } }

/* ---- 6. Pourquoi Propul AI : l'énoncé en très grand, la pile de cartes, l'abonnement, ceux qui croient en nous. */
.pa-pq { display: grid; gap: 40px; }
@media (min-width: 900px) { .pa-pq { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; } }
.pa-pq__h2 { font: 700 clamp(2.4rem, 4vw, 4rem)/1.04 var(--serif); letter-spacing: -.03em; margin-top: 18px; }
.pa-pq__note { margin-top: 22px; font-size: 1.125rem; line-height: 1.55; color: var(--second); max-width: 26em; }
.pa-pq__pile { display: grid; gap: 10px; }
.pa-pq__pile li { display: grid; grid-template-columns: 1.1fr 1.7fr .8fr; gap: 16px; padding: 16px 20px; border: 1px solid var(--filet); border-radius: 10px; background: var(--blanc); font-size: .95rem; }
.pa-pq__pile li .pa-label { display: block; font-size: .58rem; letter-spacing: .16em; margin-bottom: 6px; }
.pa-pq__nom { font-weight: 600; }
.pa-pq__ou { color: var(--second); }
.pa-pq__pile li.is-propul { background: var(--marine); color: var(--creme); border-color: var(--orange); padding: 26px 22px; margin-top: 8px; align-items: center; }
.pa-pq__pile li.is-propul .pa-pq__nom { font: 700 1.6rem/1.1 var(--serif); letter-spacing: -.02em; }
.pa-pq__pile li.is-propul .pa-pq__ou { color: #E6EAF4; }
.pa-pq__pile li.is-propul .pa-label { color: var(--orange); }
.pa-pq__pile li.is-propul .pa-pq__qui > span:last-child { color: var(--orange); font-weight: 600; }
@media (max-width: 599px) { .pa-pq__pile li { grid-template-columns: 1fr; gap: 10px; } }
.pa-tablewrap { overflow-x: auto; }
.pa-abo { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--filet); }
.pa-abo h3 { font-size: 1.4rem; margin-bottom: 20px; }
.pa-abo__t { min-width: 520px; }
.pa-abo__t th:last-child { color: var(--marine); }
.pa-abo__t td:first-child { color: var(--second); width: 44%; }
.pa-abo__t td:last-child { font-weight: 600; }
.pa-abo__phrase { margin-top: 28px; font: 700 clamp(1.3rem, 1.2vw + .9rem, 1.8rem)/1.3 var(--serif); letter-spacing: -.01em; max-width: 24em; }
.pa-abo .pa-note { margin-top: 12px; }
.pa-croient { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--filet); }
.pa-croient__g { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 14px; }
.pa-croient__logo { height: 56px; width: auto; padding: 6px 12px; background: #fff; border: 1px solid var(--filet); border-radius: 10px; }
.pa-croient__g p { font-size: .95rem; color: var(--second); }
.pa-croient__g strong { color: var(--marine); }

/* ---- 7. Escalier des quatre étapes */
.pa-escalier { display: grid; gap: 16px; }
@media (min-width: 900px) {
  .pa-escalier { grid-template-columns: repeat(4, 1fr); align-items: end; }
  .pa-escalier li:nth-child(2) { margin-bottom: 32px; }
  .pa-escalier li:nth-child(3) { margin-bottom: 64px; }
  .pa-escalier li:nth-child(4) { margin-bottom: 96px; }
}
.pa-escalier li { border: 1px solid var(--filet); border-radius: 10px; background: var(--blanc); padding: 20px; display: grid; gap: 10px; align-content: start; }
.pa-escalier li > .pa-label { margin-bottom: 4px; }
.pa-escalier .pa-etiq { justify-self: start; }
.pa-escalier p { color: var(--second); font-size: .95rem; }
.pa-escalier li:first-child { border-color: var(--marine); }

/* ---- 8. Équipe */
.pa-equipe { display: grid; gap: 24px; }
@media (min-width: 600px) { .pa-equipe { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .pa-equipe { grid-template-columns: repeat(4, 1fr); } }
.pa-equipe img { border-radius: 10px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; margin-bottom: 14px; background: var(--filet); border: 1px solid var(--filet); }
.pa-equipe p { color: var(--second); font-size: .95rem; }
/* V14 : « Ils croient en nous », sous l'équipe, sur fond clair. Le logo (noir sur blanc) se fond dans la crème. */
.pa-croient { display: grid; gap: 16px 32px; align-items: center; margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--filet); }
@media (min-width: 900px) { .pa-croient { grid-template-columns: 5fr 7fr; } }
.pa-croient__t { color: var(--second); font-size: 1rem; }
.pa-croient__bsc { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.pa-croient__bsc img { height: 56px; width: auto; mix-blend-mode: multiply; }
.pa-croient__bsc p { display: grid; gap: 2px; font-size: .95rem; color: var(--second); }
.pa-croient__bsc strong { color: var(--marine); font-weight: 600; }

/* ---- 9. La suite : appel final centré, comme la fin de linear.app. Marine profond, une phrase sur deux
   lignes, deux boutons. */
.pa-fin { background: var(--marine-2); color: var(--creme); padding-block: clamp(96px, 14vw, 180px); text-align: center; }
.pa-fin h2 { font: 700 clamp(2.4rem, 4.6vw, 4.5rem)/1.05 var(--serif); letter-spacing: -.03em; color: var(--creme); }
.pa-fin__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(28px, 3vw, 40px); }
.pa-btn--verre { background: var(--verre); border-color: var(--verre-filet); color: var(--creme); }
.pa-btn--verre:hover { background: rgba(255, 255, 255, .1); }
.pa-fin :focus-visible { outline-color: var(--orange); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pa *, .pa *::before, .pa *::after { animation: none !important; transition: none !important; }
}

/* ================= V9 · Le fond clair ================= */
/* Deux rails verticaux (filet 1 px) au bord du contenu, sur toute la partie claire de la page, comme un plan.
   Aux jonctions des sections, un nœud carré à chaque rail, posé sur le filet horizontal. */
main > .pa-sec, main > .fn { --rail: max(24px, calc(50% - 620px)); position: relative; }
@media (max-width: 599px) { main > .pa-sec, main > .fn { --rail: 16px; } }
main > .pa-sec { background-image: linear-gradient(var(--filet), var(--filet)), linear-gradient(var(--filet), var(--filet));
  background-size: 1px 100%; background-repeat: no-repeat; background-position: var(--rail) 0, calc(100% - var(--rail)) 0; }
main > .pa-sec--filet::before, main > .pa-sec--filet::after, main > .fn::before, main > .fn::after {
  content: ""; position: absolute; z-index: 1; top: -4px; width: 7px; height: 7px; background: var(--creme); border: 1px solid var(--second); pointer-events: none; }
main > .pa-sec--filet::before, main > .fn::before { left: calc(var(--rail) - 3px); }
main > .pa-sec--filet::after, main > .fn::after { right: calc(var(--rail) - 3px); }
/* La dernière section : rails, fondu du haut, puis la grille de 44 px du hero. */
main > .fn { border-top: 1px solid var(--filet);
  background-image: linear-gradient(var(--filet), var(--filet)), linear-gradient(var(--filet), var(--filet)),
    linear-gradient(var(--creme), rgba(250, 247, 246, 0) 180px),
    linear-gradient(var(--grille) 1px, transparent 1px), linear-gradient(90deg, var(--grille) 1px, transparent 1px);
  background-size: 1px 100%, 1px 100%, 100% 100%, 44px 44px, 44px 44px; background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-position: var(--rail) 0, calc(100% - var(--rail)) 0, 0 0, center top, center top; }
/* « Votre assistant » passe en clair : l'énoncé reste en serif, le tableau prend les filets crème. */
#assistant .pa-table td:first-child { font-weight: 600; width: 44%; }