/* Dernière section « La suite » : univers linear.app, couleurs Kit Com Propul AI. V9 : fond clair (le marine
   est réservé au bloc du milieu), grille de 44 px et colonnes de carrés comme le hero, pour fermer la page
   comme elle s'ouvre. Inter 600 pour l'énoncé, filets, orange en aplat seulement, aucune ombre. */
.fn { position: relative; isolation: isolate; color: var(--marine); padding-block: clamp(96px, 12vw, 168px); overflow-x: clip;
  background-color: var(--creme); }
.fn :focus-visible { outline: 2px solid var(--marine); outline-offset: 3px; }
.fn__centre { display: grid; justify-items: center; text-align: center; }
.fn__h2 { font: 600 clamp(2.3rem, 4.6vw, 4.25rem)/1.05 var(--sans); letter-spacing: -.04em; color: var(--marine); text-wrap: balance; }
.fn__h2 span { color: var(--second); }
.fn__h2--gauche { text-align: left; }
.fn__note { margin-top: 20px; font-size: .9rem; color: var(--second-clair); }
.fn-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.fn-carre { width: 9px; height: 9px; flex: none; background: var(--orange); }
.fn kbd { font: 500 .7rem/1 var(--mono); padding: 4px 6px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 4px; color: var(--second-clair); }

/* ---- 1. La palette de commande */
.fn-pal { width: min(620px, 100%); margin-top: clamp(40px, 5vw, 56px); text-align: left; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; background: var(--marine-clair); overflow: hidden; }
.fn-pal__champ { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid rgba(255, 255, 255, .1); color: var(--second-clair); font-size: 1.1rem; }
.fn-pal__saisie { color: var(--creme); }
.fn-pal__curseur { width: 2px; height: 1.2em; margin-left: -10px; background: var(--orange); animation: fn-curseur 1s steps(2) infinite; }
@keyframes fn-curseur { 50% { opacity: 0; } }
.fn-pal__kbd { margin-left: auto; }
.fn-pal__liste { padding: 8px; display: grid; gap: 2px; }
.fn-pal__liste a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 8px; text-decoration: none; color: var(--creme); font-weight: 500; transition: background-color var(--vite); }
.fn-pal__liste a.is-actif { background: rgba(255, 255, 255, .07); box-shadow: inset 2px 0 0 var(--orange); }
.fn-pal__ic { width: 8px; height: 8px; flex: none; border: 1px solid var(--second-clair); }
.fn-pal__ic--orange { background: var(--orange); border-color: var(--orange); }
.fn-pal__t { min-width: 0; }
.fn-pal__m { margin-left: auto; font: 500 .7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--second-clair); white-space: nowrap; }
.fn-pal__liste kbd { margin-left: 4px; }
.fn-pal__liste a:not(.is-actif) kbd { visibility: hidden; }
.fn-pal__pied { display: flex; gap: 20px; padding: 10px 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .78rem; color: var(--second-clair); }
.fn-pal__pied kbd { margin-right: 4px; }
.js .fn-pal:not(.is-vu) .fn-pal__liste li { opacity: 0; transform: translateY(4px); }
.fn-pal__liste li { transition: opacity 360ms var(--sortie), transform 360ms var(--sortie); }
.fn-pal__liste li:nth-child(2) { transition-delay: 90ms; } .fn-pal__liste li:nth-child(3) { transition-delay: 180ms; }
@media (max-width: 599px) { .fn-pal__m { display: none; } .fn-pal__pied { display: none; } }

/* ---- 2. Le rendez-vous */
.fn-rdv { display: grid; gap: 40px 72px; align-items: center; }
@media (min-width: 960px) { .fn-rdv { grid-template-columns: 1fr minmax(380px, 480px); } }
.fn-rdv__p { margin-top: 24px; max-width: 28em; font-size: 1.15rem; line-height: 1.5; color: #D5DCEC; }
.fn-rdv__lien { display: inline-block; margin-top: 20px; color: var(--creme); }
.fn-rdv__fen { background: var(--marine-clair); }
.fn-rdv__nom { font-weight: 600; color: var(--creme); }
.fn-rdv__etat { gap: 8px; font: 500 .7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--second-clair); }
.fn-rdv__etat i { width: 7px; height: 7px; background: var(--orange); }
.fn-rdv__lignes > div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 14px 20px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.fn-rdv__lignes dt { font: 500 .68rem/1.6 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--second-clair); }
.fn-rdv__lignes dd { color: var(--creme); }
.fn-rdv__offert { color: var(--orange) !important; font-weight: 600; }
.fn-rdv__bas { padding: 18px 20px; }
.fn-rdv__bas .pa-btn { width: 100%; }
.js .fn-rdv__fen:not(.is-vu) .fn-rdv__lignes > div { opacity: 0; transform: translateX(-6px); }
.fn-rdv__lignes > div { transition: opacity 360ms var(--sortie), transform 360ms var(--sortie); }
.fn-rdv__lignes > div:nth-child(2) { transition-delay: 70ms; } .fn-rdv__lignes > div:nth-child(3) { transition-delay: 140ms; }
.fn-rdv__lignes > div:nth-child(4) { transition-delay: 210ms; } .fn-rdv__lignes > div:nth-child(5) { transition-delay: 280ms; } .fn-rdv__lignes > div:nth-child(6) { transition-delay: 350ms; }
@media (max-width: 599px) { .fn-rdv__lignes > div { grid-template-columns: 1fr; gap: 4px; } }

/* ---- 3. Kap répond (même panneau que « Un Kap par métier ») */
.fn-kap { width: min(620px, 100%); margin-top: clamp(40px, 5vw, 56px); padding-bottom: 20px; text-align: left; background: var(--blanc); border: 1px solid var(--filet); border-radius: 10px; }
.fn-kap__tete { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.fn-kap__tete strong { font-weight: 600; font-size: .95rem; }
.fn-kap__modele { font: 500 .66rem/1 var(--mono); padding: 4px 6px; border: 1px solid var(--filet); border-radius: 4px; color: var(--second); }
.fn-kap__fen { margin-left: auto; display: inline-flex; gap: 10px; color: var(--second); pointer-events: none; }
.fn-kap__fen svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.fn-kap__demande { margin: 8px 16px 0 auto; width: fit-content; max-width: 80%; padding: 12px 14px; background: var(--creme); border: 1px solid var(--filet); border-radius: 10px; }
.fn-kap__etat { margin: 18px 16px 0; font-size: .86rem; color: var(--second); }
.fn-kap__etat em { font-style: normal; font-weight: 600; color: var(--marine); }
.fn-kap__etat em::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--orange); vertical-align: 1px; }
.fn-kap__rep { margin: 8px 16px 0; line-height: 1.55; color: var(--marine); }
.fn-kap__action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 16px 16px 0; padding: 14px 16px; border: 1px solid var(--filet); border-radius: 10px; background: var(--creme); }
.fn-kap__action-t { font: 500 .64rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--second); margin-bottom: 6px; }
.fn-kap__b { display: flex; gap: 8px; }
.fn-kap__b .pa-btn { min-height: 40px; padding-inline: 16px; font-size: .92rem; }
.js .fn-kap:not(.is-vu) .fn-kap__etat, .js .fn-kap:not(.is-vu) .fn-kap__rep, .js .fn-kap:not(.is-vu) .fn-kap__action { opacity: 0; transform: translateY(6px); }
.fn-kap__etat, .fn-kap__rep, .fn-kap__action { transition: opacity 480ms var(--sortie), transform 480ms var(--sortie); }
.fn-kap__rep { transition-delay: 500ms; } .fn-kap__action { transition-delay: 1100ms; }

@media (prefers-reduced-motion: reduce) {
  .fn-pal__curseur { animation: none; }
  .js .fn-pal:not(.is-vu) .fn-pal__liste li, .js .fn-rdv__fen:not(.is-vu) .fn-rdv__lignes > div,
  .js .fn-kap:not(.is-vu) .fn-kap__etat, .js .fn-kap:not(.is-vu) .fn-kap__rep, .js .fn-kap:not(.is-vu) .fn-kap__action { opacity: 1; transform: none; }
}

/* ---- V12 : la FAQ à gauche, « Une dernière question ? » à droite. La colonne de droite reste en haut de
   l'écran pendant qu'on lit les questions (grand écran). Sur téléphone : la FAQ, puis Kap. */
.fn__deux { display: grid; gap: 64px; align-items: start; }
@media (min-width: 768px) { .fn__deux { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); } .fn-cote { position: sticky; top: calc(var(--entete) + 40px); } }
.fn-cote .fn-kap { width: 100%; margin-top: 28px; }
.fn-faq__liste { margin-top: 28px; border-top: 1px solid var(--filet); }
.fn-faq details { border-bottom: 1px solid var(--filet); }
.fn-faq summary { position: relative; display: block; padding: 20px 44px 20px 0; cursor: pointer; list-style: none; font: 600 1.08rem/1.4 var(--sans); letter-spacing: -.01em; color: var(--marine); }
.fn-faq summary::-webkit-details-marker { display: none; }
/* Le signe : un plus fait de deux traits ; le trait vertical se couche à l'ouverture. */
.fn-faq summary::before, .fn-faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 1.5px; background: var(--marine); transition: transform 240ms var(--sortie); }
.fn-faq summary::after { transform: rotate(90deg); }
.fn-faq details[open] > summary::after { transform: rotate(0deg); }
.fn-faq summary:hover { color: var(--second); }
.fn-faq details p { max-width: 38em; padding: 0 44px 22px 0; color: var(--second); line-height: 1.6; }
.fn-faq details[open] p { animation: fn-faq-ouvre 280ms var(--sortie); }
@keyframes fn-faq-ouvre { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .fn-faq summary::before, .fn-faq summary::after { transition: none; } .fn-faq details[open] p { animation: none; } }
/* 15/10 : moitié-moitié avec la FAQ ; l'encadré Kap grandit avec sa colonne (marges, texte, boutons). */
.fn-cote .fn-kap { padding-bottom: 28px; }
.fn-cote .fn-kap__tete { padding: 18px 24px 12px; }
.fn-cote .fn-kap__tete strong { font-size: 1.05rem; }
.fn-cote .fn-kap__demande { margin: 12px 24px 0 auto; padding: 14px 18px; font-size: 1.1rem; }
.fn-cote .fn-kap__etat { margin: 26px 24px 0; font-size: .92rem; }
.fn-cote .fn-kap__rep { margin: 10px 24px 0; font-size: 1.15rem; line-height: 1.6; }
.fn-cote .fn-kap__action { margin: 24px 24px 0; padding: 18px 20px; }
.fn-cote .fn-kap__action p:not(.fn-kap__action-t) { font-size: 1.05rem; }
.fn-cote .fn-kap__b .pa-btn { min-height: 46px; padding-inline: 20px; font-size: 1rem; }
@media (max-width: 599px) { .fn-cote .fn-kap__tete, .fn-cote .fn-kap__etat, .fn-cote .fn-kap__rep, .fn-cote .fn-kap__action { margin-inline: 16px; } .fn-cote .fn-kap__tete { margin-inline: 0; padding-inline: 16px; } .fn-cote .fn-kap__demande { margin-right: 16px; } }
.fn-cote .fn-kap__b { flex-wrap: wrap; } .fn-cote .fn-kap__b .pa-btn { white-space: nowrap; }