/* ============================================================
   NIVEAUX DE CTA · lot v145 du 01/10/2026
   Repris du bloc « NIVEAUX DE CTA » d'Easy to Change (30/09),
   aux couleurs de Clean (bleu sombre #18344B, rouge #C6102A,
   sable). Fichier a part : main.css est partage avec les pages
   anglaises, qui ne chargent pas cta.js.
   Formulaire leger (profil), prix en deux temps, rappel et
   catalogue en place, proposition apres un document, barre mobile.
   ============================================================ */

/* --- formulaires : profil « C'est pour : » --- */
.frm-profil__l { margin: 0 0 .45rem; font-size: .8rem; font-weight: 600; color: var(--color-ink); }
.frm-profil { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.frm-profil__b { font: inherit; font-size: .88rem; font-weight: 600; padding: .55em .95em; border-radius: var(--radius-pill, 999px); border: 1.5px solid var(--color-line); background: var(--color-bg, #fff); color: var(--color-ink); cursor: pointer; transition: background .15s, border-color .15s; text-align: left; }
.frm-profil__b:hover { border-color: var(--color-brand-dark); }
.frm-profil__b[aria-pressed="true"] { background: var(--color-brand-dark); border-color: var(--color-brand-dark); color: #fff; }
.frm-profil__b:focus-visible { outline: 2px solid var(--acc-deep, #C6102A); outline-offset: 2px; }
.frm-msg--profil { display: block; margin: -.5rem 0 .8rem; color: #8c1d18; font-size: .85rem; }
.frm--leger { display: grid; gap: .9rem; }
.frm--leger .frm-g { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.frm--leger .frm-profil, .frm--leger .frm-profil__l { margin-bottom: 0; }
.frm--leger .frm-msg--profil { margin: -.4rem 0 0; }
.frm-c select { width: 100%; padding: .66rem .8rem; border: 1px solid var(--color-line); border-radius: 10px; background: var(--color-bg, #fff); font: inherit; font-size: .95rem; color: var(--color-ink); }
.frm-c select:focus { outline: none; border-color: var(--acc-deep, #C6102A); box-shadow: 0 0 0 3px var(--acc-wash, #FDE8EA); }
.frm-mention { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--color-muted); }
.frm-mention a { color: var(--acc-deep, #C6102A); text-decoration: underline; }
.frm-optin { font-size: .78rem; }
.frm--leger .frm-fin { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.frm--leger .frm-pied { margin: 0; font-size: .8rem; color: var(--color-muted); }

/* interlocuteur en vignette (rappel sur les pages villes et regions) */
.frm-p--mini { display: flex; align-items: center; gap: .7rem; margin: 0; padding: 0; border: 0; background: none; }
.frm-p--mini .frm-p__phs { display: flex; }
.frm-p--mini .frm-p__ph, .frm-p--mini .frm-p__rond { width: 44px; height: 44px; }
.frm-p--mini .frm-p__n { margin: 0; font-weight: 700; font-size: .95rem; color: var(--color-ink); }
.frm-p--mini .frm-p__d { margin: 0; font-size: .82rem; color: var(--color-muted); }

/* confirmation legere */
.frm-ok--leger { padding: 1.2rem 1.25rem; border-radius: 14px; text-align: left; }
.frm-ok--leger a { color: #fff; text-decoration: underline; }
.frm-ok__q { margin: 1rem 0 .5rem; font-weight: 600; color: #fff; }
.frm-ok--leger .frm-ok__go { color: var(--color-brand-dark); background: #fff; text-decoration: none; }

/* prix en deux temps */
.frm-temps2 { display: grid; gap: 1rem; }
.frm-t2__ok { padding: 1.1rem 1.25rem; border-radius: 14px; background: linear-gradient(135deg, #12283f, #0b1828); color: #fff; }
.frm-t2__ok .frm-ok__t { font-size: 1.15rem; }
.frm-t2__t { margin: 0; font-weight: 700; color: var(--color-ink); }
.frm--t2 .frm-aide { margin: -.5rem 0 0; }
.frm-sols { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.frm-sols legend { font-size: .8rem; font-weight: 600; color: var(--color-ink); margin-bottom: .4rem; padding: 0; }
.frm-chip { position: relative; }
.frm-chip input { position: absolute; opacity: 0; inset: 0; }
.frm-chip span { display: inline-block; padding: .45em .85em; border: 1.5px solid var(--color-line); border-radius: 999px; font-size: .86rem; font-weight: 500; cursor: pointer; }
.frm-chip input:checked + span { background: var(--color-brand-dark); border-color: var(--color-brand-dark); color: #fff; }
.frm-chip input:focus-visible + span { outline: 2px solid var(--acc-deep, #C6102A); outline-offset: 2px; }

/* --- rappel et catalogue en place, sous le bouton --- */
.cta-rappel { margin: 1.2rem auto 0; max-width: 640px; text-align: left; background: #fff; color: var(--color-ink); border-radius: 14px; padding: 1.2rem 1.3rem; box-shadow: var(--shadow-lift, 0 8px 24px rgba(0,0,0,.12)); }
.page-service__hero .cta-rappel, .sector-hero .cta-rappel, .res-hero .cta-rappel { margin-left: 0; }
.blog-cta-inline .cta-rappel, .doc-cta .cta-rappel, .apres-doc .cta-rappel { box-shadow: none; border: 1px solid var(--color-line); margin-top: 1rem; }
.service-cta-final .cta-rappel { color: var(--color-ink); }
.cta-rappel .frm-c label, .cta-rappel .frm-profil__l { color: var(--color-ink); }

/* lien texte vers le niveau au-dessus : « Votre projet est défini ? Réservez une démo » */
.cta-niveau-lien { margin: .9rem 0 0; font-size: .92rem; }
.cta-niveau-lien a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.page-service__hero .cta-niveau-lien, .page-service__hero .cta-niveau-lien a,
.sector-hero--media .cta-niveau-lien, .sector-hero--media .cta-niveau-lien a,
.res-hero .cta-niveau-lien, .res-hero .cta-niveau-lien a { color: #fff; }
.service-cta-final .cta-niveau-lien { color: var(--sand-ink, #282520); }
.service-cta-final .cta-niveau-lien a { color: var(--sand-acc, #8E0C1E); }
.cta-final .cta-niveau-lien { text-align: center; }

/* --- proposition apres un document --- */
.apres-doc { position: relative; margin: .8rem 0 1rem; padding: .9rem 2.4rem .9rem 1.1rem; border-radius: 12px; background: var(--color-bg-soft, #F7F7F6); border: 1px solid var(--color-line); font-size: .92rem; text-align: left; }
.apres-doc__t { margin: 0 0 .3rem; font-weight: 600; color: var(--color-ink); }
.apres-doc__l { margin: 0; }
.apres-doc__l a { font-weight: 600; color: var(--acc-deep, #C6102A); text-decoration: underline; text-underline-offset: 3px; }
.apres-doc__x { position: absolute; top: .4rem; right: .5rem; border: 0; background: none; font-size: 1.3rem; line-height: 1; color: var(--color-muted); cursor: pointer; padding: .2rem .4rem; }

/* --- barre mobile --- */
.barre-cta { display: none; }
@media (max-width: 760px) {
  .barre-cta { display: block; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--color-line); transform: translateY(110%); transition: transform .25s ease-out; }
  .barre-cta.is-visible, .barre-cta.is-ouverte { transform: none; }
  .barre-cta > .btn { display: block; width: 100%; text-align: center; }
  .barre-cta.is-ouverte > .btn { display: none; }
  .barre-cta__panneau { max-height: 80vh; overflow: auto; }
  .barre-cta__tete { display: flex; justify-content: space-between; align-items: center; }
  .barre-cta__t { margin: 0; font-weight: 700; color: var(--color-ink); }
  .barre-cta__x { border: 0; background: none; font-size: 1.6rem; line-height: 1; padding: .2rem .5rem; color: var(--color-ink); cursor: pointer; }
  .barre-cta .cta-rappel { box-shadow: none; padding: .6rem 0 0; margin: 0; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .barre-cta { transition: none; } }