:root {
  --ink: var(--asc-gray-900);
  --muted: var(--asc-gray-500);
  --line: var(--asc-border);
  --blue: var(--asc-action);
  --blue-dark: var(--asc-action-hover);
  --pale: var(--asc-bg-subtle);
  --white: var(--asc-bg)
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto
  }
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.5
}

a {
  text-decoration: none;
  color: inherit
}

/* La règle ci-dessus rend un lien de prose invisible (même couleur que le
   texte) partout où il n'a pas sa propre classe de style — cas des pages
   légales, seules pages du site à n'avoir que des liens non classés dans
   leur contenu. Scopé à .asc-container (uniquement les pages légales) et non
   à `main a` : une règle sur tout <main> gagne quand même sur .button pour
   text-decoration, même si .button a une spécificité globale plus haute —
   .button ne déclare pas cette propriété, donc ne la dispute pas dans la
   cascade, et le soulignement se retrouvait sur tous les boutons du site. */
.asc-container a {
  color: var(--asc-text-link);
  text-underline-offset: 2px
}

.asc-container a:hover {
  color: var(--asc-text-link-hover);
  text-decoration: underline
}

.wrap {
  width: min(var(--asc-container), calc(100% - 2 * var(--asc-gutter)));
  margin: auto
}

/* Animation d'apparition unique du site (opacité + translation 16px, 420ms).
   Les classes sont posées par main.js via IntersectionObserver ; sans ces
   règles elles n'avaient aucun effet visuel. */
.asc-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .42s ease, transform .42s ease
}

.asc-reveal.is-visible {
  opacity: 1;
  transform: none
}

@media (prefers-reduced-motion: reduce) {
  .asc-reveal {
    opacity: 1;
    transform: none;
    transition: none
  }
}

/* Captures d'écran des blocs .feat : entrée latérale depuis leur propre
   côté (à droite pour .feat, à gauche pour .feat.rev où l'image est inversée). */
.feat-reveal {
  opacity: 0;
  transition: opacity .42s ease, transform .42s ease
}

.feat .feat-reveal {
  transform: translateX(48px)
}

.feat.rev .feat-reveal {
  transform: translateX(-48px)
}

.feat-reveal.is-visible {
  opacity: 1;
  transform: none
}

/* Sous 900px, .feat passe à une colonne : l'entrée latérale ne veut plus rien
   dire, et surtout ses 48px de décalage dépassent la largeur de la fenêtre
   tant que le bloc n'est pas apparu — ce qui faisait apparaître une barre de
   défilement horizontale (410px de contenu pour 376px de fenêtre, mesuré).
   On repasse donc à la translation verticale de l'animation commune. */
@media(max-width:900px) {

  .feat .feat-reveal,
  .feat.rev .feat-reveal {
    transform: translateY(16px)
  }
}

@media (prefers-reduced-motion: reduce) {
  .feat-reveal {
    opacity: 1;
    transform: none;
    transition: none
  }
}

/* Barre de navigation collante.
   Le conteneur est pleine largeur et porte le fond ; .nav reste un .wrap
   centré à l'intérieur. Sans ce conteneur, coller .nav directement ferait
   flotter un bandeau de 1160px avec le contenu visible dans les gouttières.
   Le menu mobile est dans le conteneur : ouvert, il doit suivre l'en-tête. */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 70;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--asc-duration-base) var(--asc-ease), box-shadow var(--asc-duration-base) var(--asc-ease)
}

/* Posée par main.js dès que la page a quitté le haut : c'est l'ombre qui
   détache la barre du contenu qui passe dessous, pas une bordure permanente. */
.nav-bar.is-stuck {
  border-bottom-color: var(--asc-gray-100);
  box-shadow: 0 6px 24px rgba(12, 23, 38, .06)
}

/* Le conteneur fournit désormais le bord bas ; garder celui du menu ouvert
   ferait un double filet de 2px une fois la barre décollée. */
.nav-bar .mobile-menu {
  border-bottom: 0
}

.nav-bar.is-menu-open {
  border-bottom-color: var(--asc-gray-100)
}

/* Menu long sur petit écran : il défile dans la barre plutôt que de pousser
   ses derniers liens hors de la fenêtre, la barre étant collée en haut. */
.nav-bar .mobile-menu.open {
  max-height: calc(100vh - var(--asc-header-h));
  max-height: calc(100dvh - var(--asc-header-h));
  overflow-y: auto;
  overscroll-behavior: contain
}

@media (prefers-reduced-motion: reduce) {
  .nav-bar {
    transition: none
  }
}

/* Les ancres (#faq, #demo, #migration…) atterrissaient sous la barre :
   scroll-margin décale la cible de la hauteur d'en-tête plus une marge. */
main[id],
main [id] {
  scroll-margin-top: calc(var(--asc-header-h) + 16px)
}

/* Sous 520px, « Demander une démo » se retrouvait comprimé à 165px et cassé
   sur trois lignes, soit un bouton de 66px dans une barre de 76px. On le tient
   sur une ligne : libellé plus compact, flèche retirée, hauteur tactile de
   44px préservée. */
@media(max-width:520px) {
  .nav .button {
    flex: none;
    padding-inline: 13px;
    font-size: 13px;
    white-space: nowrap
  }

  .nav .button span {
    display: none
  }
}

.nav {
  height: var(--asc-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.7px
}

.mark {
  height: 31px;
  width: 31px;
  border-radius: var(--asc-radius-md);
  background: var(--blue);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 20px;
  box-shadow: inset 0 0 0 5px var(--asc-blue-500)
}

/* Remplace le style="" inline répété à l'identique sur les 7 pages. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px
}

.navlinks {
  display: flex;
  align-items: center;
  gap: 28px;
  color: var(--asc-text-secondary);
  font-size: 14px;
  font-weight: 600
}

.navlinks a:hover {
  color: var(--blue)
}

.nav-dropdown {
  position: relative
}

.nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer
}

.nav-dropdown__trigger:hover {
  color: var(--blue)
}

.nav-dropdown__caret {
  width: 9px;
  height: 9px;
  flex: none;
  transition: transform var(--asc-duration-base) var(--asc-ease)
}

.nav-dropdown.is-open .nav-dropdown__caret {
  transform: rotate(180deg)
}

.nav-dropdown__menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 14px;
  padding: 6px;
  min-width: 168px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--asc-radius-lg);
  box-shadow: var(--asc-shadow-lg);
  z-index: 50
}

.nav-dropdown.is-open .nav-dropdown__menu {
  display: flex
}

.nav-dropdown__menu a {
  padding: 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: var(--asc-radius-md);
  font-size: var(--asc-text-base);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap
}

.nav-dropdown__menu a:hover {
  background: var(--asc-blue-50);
  color: var(--blue)
}

/* Intertitres du menu « Pour qui ? » : les ascensoristes sont les clients,
   les syndics leurs prescripteurs. Sans ce groupement, la liste laisserait
   croire qu'un syndic peut souscrire un abonnement. */
.nav-dropdown__label {
  padding: 10px 12px 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted)
}

.nav-dropdown__label ~ .nav-dropdown__label {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--asc-border)
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blue);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 var(--asc-radius-md) 0;
  font-size: 14px;
  font-weight: 700;
  z-index: 200
}

.skip-link:focus {
  left: 0
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--asc-radius-sm)
}

.menu-btn {
  display: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--asc-radius-md);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
  flex: none
}

.mobile-menu {
  display: none;
  flex-direction: column;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 4px 20px 12px
}

.mobile-menu a {
  padding: 13px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--asc-border)
}

.mobile-menu.open {
  display: flex
}

.mobile-menu-label {
  padding: 13px 0 2px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted)
}

.mobile-menu-sublabel {
  padding: 10px 0 2px 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted)
}

.mobile-menu-sublink {
  padding: 12px 0 12px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--asc-border)
}

@media(min-width:801px) {
  .mobile-menu.open {
    display: none
  }
}

.button {
  background: var(--blue);
  color: white;
  border: 0;
  border-radius: var(--asc-radius-md);
  padding: 12px 18px;
  min-height: 44px;
  font: inherit;
  font-size: var(--asc-text-base);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background-color var(--asc-duration-base) var(--asc-ease), transform var(--asc-duration-base) var(--asc-ease), color var(--asc-duration-base) var(--asc-ease)
}

.button:hover {
  background: var(--blue-dark);
  color: white;
  transform: translateY(-1px)
}

.button:active {
  background: var(--asc-action-active);
  transform: translateY(0)
}

.button[disabled],
.button[aria-disabled="true"] {
  background: var(--asc-gray-200);
  color: var(--asc-gray-500);
  cursor: not-allowed;
  transform: none
}

.button.ghost {
  background: var(--asc-blue-50);
  color: var(--blue)
}

.button.ghost:hover {
  color: var(--blue-dark)
}

.button.ghost:active {
  background: var(--asc-blue-100)
}

.button.light {
  background: white;
  color: var(--blue)
}

.button.light:hover {
  color: var(--blue-dark)
}

.button.light:active {
  background: var(--asc-blue-50)
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none
  }
}

.hero {
  overflow: hidden;
  background: linear-gradient(114deg, #f7fbff 0%, #f5f8ff 54%, #e8f3ff 100%);
  border-top: 1px solid var(--asc-border);
  padding: 28px 0 76px
}

.hero-grid {
  min-height: 600px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px
}

.hero h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.055em;
  margin: 19px 0 21px;
  max-width: 680px
}

.hero h1 em {
  font-style: normal;
  color: var(--blue)
}

.lead {
  font-size: var(--asc-text-lg);
  color: var(--asc-text-secondary);
  max-width: 555px;
  margin: 0 0 28px
}

.hero-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap
}

.subnote {
  font-size: var(--asc-text-sm);
  color: var(--asc-text-muted);
  margin: 13px 0 0
}

.subnote:before {
  content: "✓";
  font-weight: 900;
  color: var(--asc-teal-700);
  margin-right: 6px
}

.app-wrap {
  position: relative
}

.orb {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: #d1e1ff;
  right: -180px;
  top: -100px;
  filter: blur(1px)
}

.app {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  margin-left: auto;
  background: #fff;
  border: 1px solid var(--asc-border);
  border-radius: var(--asc-radius-xl);
  box-shadow: var(--asc-shadow-lg);
  overflow: hidden;
  transform: rotate(1.5deg)
}

.app img {
  display: block;
  width: 100%;
  height: auto
}

.hero-chip {
  position: absolute;
  z-index: 2;
  top: -20px;
  right: 6%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--asc-border);
  border-radius: var(--asc-radius-lg);
  padding: 12px 16px;
  box-shadow: var(--asc-shadow-lg);
  transform: rotate(-2deg)
}

.hero-chip .ic {
  color: var(--asc-teal-700);
  background: var(--asc-teal-50);
  border-radius: 50%;
  padding: 5px;
  width: 26px;
  height: 26px;
  flex: none
}

.hero-chip b {
  display: block;
  font-size: var(--asc-text-overline);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink)
}

.hero-chip span {
  display: block;
  font-size: var(--asc-text-xs);
  color: var(--muted)
}

.hero-phone {
  position: absolute;
  z-index: 2;
  left: -32px;
  bottom: -25px;
  width: 150px
}

.hero-phone img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 40px rgba(12, 23, 38, .4))
}

.section {
  padding: var(--asc-section-y) 0
}

.center {
  text-align: center
}

.kicker {
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: var(--asc-text-overline);
  font-weight: 800
}

.section h2 {
  font-size: var(--asc-text-display);
  letter-spacing: -.05em;
  line-height: 1.08;
  margin: 11px auto 14px;
  max-width: 720px
}

.section-intro {
  color: var(--asc-text-secondary);
  font-size: var(--asc-text-lg);
  max-width: 610px;
  margin: 0 auto
}

.checks {
  padding: 0;
  margin: 0;
  list-style: none
}

.checks li {
  padding: 9px 0;
  border-bottom: 1px solid var(--asc-border);
  font-size: var(--asc-text-base);
  font-weight: 600
}

.checks li:before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  margin-right: 9px;
  height: 19px;
  width: 19px;
  background: var(--asc-teal-50);
  color: var(--asc-teal-700);
  border-radius: var(--asc-radius-full);
  font-size: var(--asc-text-xs)
}

.ic {
  width: 16px;
  height: 16px;
  flex: none
}

.feats {
  margin-top: 54px
}

.feat {
  display: grid;
  grid-template-columns: 1fr 1.06fr;
  gap: clamp(34px, 4.6vw, 74px);
  align-items: center;
  padding: 54px 0
}

.feat+.feat {
  border-top: 1px solid var(--line)
}

.feat>* {
  min-width: 0
}

/* La colonne média garde toujours la piste 1.06fr (la plus large), qu'elle
   soit affichée à gauche ou à droite : un grid-column explicite ne dépend
   pas de l'ordre du DOM, contrairement à `order` (qui pilotait aussi le
   placement automatique et faisait donc alterner .feat-media entre la piste
   1fr et la piste 1.06fr d'un bloc à l'autre — la colonne image changeait de
   largeur une ligne sur deux).
   grid-row: 1 est INDISPENSABLE sur les deux enfants, pas seulement
   grid-column : le placement automatique parcourt la grille dans l'ordre du
   DOM sans jamais revenir en arrière. Sur .feat.rev, .feat-copy (premier dans
   le DOM) était placé en colonne 2, puis .feat-media réclamait la colonne 1 —
   déjà dépassée par le curseur — et se retrouvait donc poussé sur une
   deuxième ligne de grille, sous le texte, avec un vide de la hauteur du
   gap à côté. Fixer la ligne des deux supprime tout auto-placement. */
.feat-copy {
  grid-column: 1;
  grid-row: 1
}

.feat-media {
  grid-column: 2;
  grid-row: 1
}

.feat.rev {
  grid-template-columns: 1.06fr 1fr
}

.feat.rev .feat-copy {
  grid-column: 2
}

.feat.rev .feat-media {
  grid-column: 1
}

.feat-step {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--asc-text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--asc-text-muted);
  margin-bottom: 13px
}

.feat-step:after {
  content: "";
  height: 1px;
  width: 54px;
  background: var(--line)
}

.feat-copy h3 {
  font-size: var(--asc-text-h1);
  line-height: 1.13;
  letter-spacing: -.04em;
  margin: 0 0 13px
}

.feat-copy>p {
  color: var(--muted);
  margin: 0 0 20px;
  max-width: 46ch
}

.feat-copy .checks strong {
  font-weight: 800;
  color: var(--ink)
}

.feat-out {
  margin-top: 21px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 13px 15px;
  border-radius: var(--asc-radius-md);
  background: var(--asc-blue-50);
  border: 1px solid var(--asc-blue-100);
  font-size: var(--asc-text-sm);
  font-weight: 600;
  color: var(--asc-blue-800)
}

.feat-out .ic {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  color: var(--blue)
}

.mock {
  background: #fff;
  border: 1px solid var(--asc-border);
  border-radius: var(--asc-radius-xl);
  box-shadow: var(--asc-shadow-lg);
  overflow: hidden
}

.mock img {
  display: block;
  width: 100%;
  height: auto
}

.faq {
  max-width: 760px;
  margin: 52px auto 0;
  border-top: 1px solid var(--line)
}

.faq details {
  border-bottom: 1px solid var(--line)
}

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 40px 22px 2px;
  position: relative;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  transition: color var(--asc-duration-fast) var(--asc-ease)
}

.faq summary::-webkit-details-marker {
  display: none
}

.faq summary:hover {
  color: var(--blue)
}

.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 23px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--asc-gray-400);
  border-bottom: 2px solid var(--asc-gray-400);
  transform: rotate(45deg);
  transition: transform var(--asc-duration-base) var(--asc-ease), border-color var(--asc-duration-fast) var(--asc-ease)
}

.faq details[open] summary {
  color: var(--blue)
}

.faq details[open] summary::after {
  transform: rotate(-135deg);
  border-color: var(--blue)
}

.faq .ans {
  margin: 0;
  padding: 0 40px 22px 2px;
  color: var(--muted);
  font-size: var(--asc-text-base)
}

.mini-cta {
  margin-top: 54px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: var(--asc-text-base);
  color: var(--muted)
}

.mini-cta a {
  color: var(--blue);
  font-weight: 700
}

.mini-cta a:hover {
  text-decoration: underline
}

.mig {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  padding: var(--asc-section-y) 0
}

.mig::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 78%)
}

.mig>.wrap {
  position: relative;
  z-index: 1
}

.mig .kicker {
  color: var(--asc-action-on-dark)
}

.mig h2 {
  color: var(--asc-text-on-dark);
  font-size: var(--asc-text-display);
  letter-spacing: -.05em;
  line-height: 1.08;
  margin: 11px auto 14px;
  max-width: 640px
}

.mig .section-intro {
  max-width: 560px;
  color: var(--asc-text-secondary-on-dark)
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 50px
}

.step {
  padding: 26px;
  border-radius: var(--asc-radius-lg);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--asc-border-on-dark)
}

.step-n {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--asc-radius-md);
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 15px
}

/* <h3>, pas <h4> : la section n'a qu'un <h2> avant, passer à h4 sautait un
   niveau de titre (corrigé en même temps dans le HTML). */
.step h3 {
  font-size: var(--asc-text-h4);
  font-weight: 800;
  color: var(--asc-text-on-dark);
  margin: 0 0 7px;
  letter-spacing: -.01em
}

.step p {
  font-size: var(--asc-text-base);
  color: var(--asc-text-secondary-on-dark);
  margin: 0;
  line-height: 1.55
}

.mig-pills {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  text-align: center
}

.mig-pills .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--asc-radius-full);
  background: rgba(255, 255, 255, .08);
  color: var(--asc-text-on-dark);
  font-size: var(--asc-text-xs);
  font-weight: 700
}

.mig-pills .pill svg {
  width: 13px;
  height: 13px
}

/* flex-basis:100% fait passer la note sur sa propre ligne, sous la rangée de
   pastilles : elle a sa propre taille de texte (16px) et se lisait comme une
   pastille ratée quand elle partageait la ligne avec des pastilles à 12,5px. */
.mig-note {
  flex-basis: 100%;
  margin-top: 2px;
  font-size: var(--asc-text-base);
  color: var(--asc-text-secondary-on-dark)
}

.mig-cta {
  margin-top: 36px;
  text-align: center;
  font-size: var(--asc-text-base);
  color: var(--asc-text-secondary-on-dark)
}

.mig-cta a {
  color: var(--asc-action-on-dark);
  font-weight: 700;
  border-bottom: 1px solid rgba(147, 181, 248, .4)
}

.demo {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  padding: var(--asc-section-y) 0
}

.demo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 78%)
}

.demo::after {
  content: "";
  position: absolute;
  inset: auto 0 -60% 30%;
  height: 520px;
  background: radial-gradient(closest-side, #1956d833, transparent 70%);
  pointer-events: none
}

.demo>.wrap {
  position: relative;
  z-index: 1
}

.demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: clamp(36px, 5vw, 64px);
  align-items: center
}

.demo .kicker {
  color: var(--asc-action-on-dark)
}

.demo h2 {
  color: var(--asc-text-on-dark);
  font-size: var(--asc-text-display);
  letter-spacing: -.05em;
  line-height: 1.08;
  margin: 11px 0 16px
}

.demo-lead {
  color: var(--asc-text-secondary-on-dark);
  font-size: var(--asc-text-lg);
  max-width: 44ch;
  margin: 0 0 24px
}

.demo-checks {
  list-style: none;
  padding: 0;
  margin: 0 0 26px
}

.demo-checks li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: var(--asc-text-base);
  color: var(--asc-text-secondary-on-dark)
}

.demo-checks .ic {
  width: 17px;
  height: 17px;
  color: var(--asc-action-on-dark);
  flex: none
}

.dform {
  position: relative;
  background: #fff;
  border-radius: var(--asc-radius-xl);
  padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--asc-shadow-lg);
  color: var(--ink)
}

.dform h3 {
  font-size: var(--asc-text-h3);
  margin: 0 0 4px;
  letter-spacing: -.02em
}

.dform .hint {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 4px
}

.dform .hint-tarifs {
  margin-bottom: 20px
}

.dform .hint-tarifs a {
  display: inline-flex;
  align-items: center;
  gap: 4px
}

.dform .hint-tarifs a span {
  transition: transform var(--asc-duration-fast) var(--asc-ease)
}

.dform .hint-tarifs a:hover span {
  transform: translateX(2px)
}

.dfield {
  margin-bottom: 13px
}

.dfield label {
  display: block;
  font-size: var(--asc-text-sm);
  font-weight: 700;
  color: var(--asc-text-secondary);
  margin-bottom: 6px
}

.dfield .asc-required {
  color: var(--asc-danger-600)
}

.dfield input,
.dfield select,
.dfield textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px 13px;
  border-radius: var(--asc-radius-md);
  border: 1px solid var(--asc-border-strong);
  background: var(--pale);
  font: inherit;
  font-size: var(--asc-text-base);
  color: var(--ink);
  transition: border-color var(--asc-duration-fast) var(--asc-ease), box-shadow var(--asc-duration-fast) var(--asc-ease), background-color var(--asc-duration-fast) var(--asc-ease)
}

.dfield input:focus,
.dfield select:focus,
.dfield textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: #fff;
  box-shadow: var(--asc-shadow-focus)
}

.dfield input[aria-invalid="true"],
.dfield select[aria-invalid="true"],
.dfield textarea[aria-invalid="true"] {
  border-color: var(--asc-danger-600)
}

.dfield .asc-error {
  display: block;
  margin-top: 6px;
  font-size: var(--asc-text-sm);
  color: var(--asc-danger-700);
  font-weight: 600
}

.dfield textarea {
  resize: vertical;
  min-height: 76px;
  font-family: inherit
}

.dfield-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px
}

@media(max-width:520px) {
  .dfield-row {
    grid-template-columns: 1fr
  }
}

.dform .legal {
  font-size: var(--asc-text-xs);
  color: var(--asc-text-secondary);
  margin-top: 13px;
  text-align: center;
  line-height: 1.5
}

/* visibility, pas display : un role="status" doit exister dans l'arbre
   d'accessibilité avant sa mise à jour pour être annoncé de façon fiable.
   position:absolute retire l'élément du flux tant qu'il est masqué, pour ne
   pas laisser un espace vide dans le formulaire. */
.dform-ok {
  position: absolute;
  visibility: hidden;
  text-align: center;
  padding: 32px 6px
}

.dform-ok svg {
  width: 44px;
  height: 44px;
  color: var(--asc-success-600);
  margin: 0 auto 14px
}

.dform-ok-text {
  color: var(--muted);
  margin-top: 8px
}

.dform.is-sent .dform-body {
  display: none
}

.dform.is-sent .dform-ok {
  position: static;
  visibility: visible
}

.button.block {
  width: 100%
}

.grid-bg {
  background: var(--pale)
}

.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  margin-top: 50px
}

/* Palier tablette : sans lui, la grille passait directement de 3 colonnes à
   1 (voir plus bas, @media 640px), avec des cartes de 700px+ de large.
   Pas de borne basse ici : la règle mobile plus bas dans le fichier vient
   après dans le fichier et l'emporte en dessous de 640px (cf. le piège
   d'ordre de cascade déjà documenté sur .audiences). */
@media(max-width:960px) {
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

.feature {
  border: 1px solid var(--asc-border);
  border-radius: var(--asc-radius-lg);
  background: white;
  padding: 25px;
  text-align: left
}

.icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--asc-radius-md);
  background: var(--asc-blue-50);
  color: var(--blue);
  font-size: 20px
}

.feature h3 {
  font-size: var(--asc-text-h4);
  letter-spacing: -.025em;
  margin: 18px 0 8px
}

.feature p {
  font-size: var(--asc-text-base);
  color: var(--muted);
  margin: 0
}

/* Pages légales : les titres du corps de texte (mentions-legales.html,
   confidentialite.html) héritent de la règle globale h1-h4 des jetons
   (margin-top:0) faute d'une classe plus spécifique. Sur un document long,
   l'absence de marge haute distincte de celle des paragraphes (16px) rendait
   la structure illisible. */
.asc-container h2 {
  margin-top: var(--asc-space-7)
}

.asc-container h3 {
  margin-top: var(--asc-space-6)
}

/* Encre commune aux autres sections sombres (.mig, .demo) : la section
   utilisait auparavant une famille de bleu marine à part (#0e2b60 et
   dérivés), hors palette et incohérente d'une section sombre à l'autre. */
.band {
  background: var(--asc-bg-inverse);
  color: var(--asc-text-on-dark);
  padding: var(--asc-section-y) 0
}

.band .kicker {
  color: var(--asc-action-on-dark)
}

.band-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center
}

.band h2 {
  color: var(--asc-text-on-dark);
  font-size: var(--asc-text-display);
  line-height: 1.08;
  letter-spacing: -.05em;
  margin: 12px 0
}

.band p {
  color: var(--asc-text-secondary-on-dark);
  max-width: 500px
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--asc-radius-lg);
  overflow: hidden
}

.stat {
  padding: 25px;
  background: var(--asc-bg-inverse)
}

.stat strong {
  font-size: 34px;
  letter-spacing: -.06em;
  display: block;
  color: var(--asc-text-on-dark)
}

.stat span {
  font-size: var(--asc-text-sm);
  color: var(--asc-text-secondary-on-dark)
}

.footer {
  padding: 64px 0 0;
  color: var(--asc-text-muted);
  font-size: var(--asc-text-sm);
  border-top: 1px solid var(--line)
}

.footer .brand {
  color: var(--ink)
}

.footer .mark {
  transform: scale(.78);
  transform-origin: left
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 44px
}

.footer-brand p {
  margin: 14px 0 0;
  max-width: 32ch;
  line-height: 1.6
}

.footer-brand p a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px
}

.footer-brand p a:hover {
  color: var(--blue)
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 18px
}

/* 44px minimum tactile via ::before centré : la pastille visuelle (34px)
   reste inchangée, seule la zone de clic s'agrandit — même technique que
   .switch:before sur la page tarifs. */
.footer-social a {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--asc-radius-md);
  background: var(--asc-blue-50);
  color: var(--blue);
  transition: background-color var(--asc-duration-fast) var(--asc-ease), color var(--asc-duration-fast) var(--asc-ease)
}

.footer-social a:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%)
}

.footer-social a:hover {
  background: var(--blue);
  color: #fff
}

@media (prefers-reduced-motion: reduce) {
  .footer-social a {
    transition: none
  }
}

.footer-col .kicker {
  font-size: var(--asc-text-overline);
  margin-bottom: 15px
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 11px
}

.footer-links a {
  color: var(--muted)
}

.footer-links a:hover {
  color: var(--blue);
  text-decoration: underline
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  font-size: var(--asc-text-xs)
}

.footer-legal a {
  color: var(--asc-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px
}

.footer-legal a:hover {
  color: var(--blue)
}

@media(max-width:800px) {
  .navlinks {
    display: none
  }

  .menu-btn {
    display: inline-flex
  }

  .hero-grid,
  .band-inner,
  .demo-grid {
    grid-template-columns: 1fr;
    gap: 45px
  }

  .hero-phone {
    left: -16px
  }

  .orb {
    display: none
  }

  .hero-grid {
    min-height: 0
  }

  .hero {
    padding: 34px 0 60px
  }

  .app {
    margin: auto
  }

  .section {
    padding: var(--asc-section-y-mobile) 0
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px
  }
}

/* Palier mobile de .steps et .features : 2 colonnes en tablette (règles
   ci-dessus), 1 colonne en dessous de 640px. Positionné après le bloc
   @media 800px pour gagner le conflit de cascade sous 640px (cf. .audiences
   dans ascend_css_source_order_gotcha). */
@media(max-width:640px) {
  .steps,
  .features {
    grid-template-columns: 1fr
  }
}

@media(max-width:410px) {
  .hero-actions .button {
    width: 100%
  }

  .hero-phone {
    left: -14px;
    bottom: -40px;
    transform: scale(.74);
    transform-origin: bottom left
  }

  .hero-chip {
    right: 2%;
    padding: 8px 10px
  }

  .hero-chip span {
    display: none
  }
}

@media(max-width:900px) {
  .feat,
  .feat.rev {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 44px 0
  }

  /* grid-row remis à auto en même temps que grid-column : en une seule
     colonne, garder grid-row:1 empilerait les deux enfants sur la même
     ligne, donc superposés l'un sur l'autre. */
  .feat-copy,
  .feat-media,
  .feat.rev .feat-copy,
  .feat.rev .feat-media {
    grid-column: auto;
    grid-row: auto
  }

  .feats {
    margin-top: 38px
  }
}

/* Section « Pour qui ? » (MKTASC-16 / 17) */
.audiences {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 54px
}

.audience {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--asc-radius-lg);
  background: var(--white)
}

.audience h3 {
  font-size: var(--asc-text-h3);
  letter-spacing: -.02em;
  line-height: 1.25;
  margin: 0 0 12px
}

.audience>p {
  color: var(--muted);
  margin: 0 0 20px;
  max-width: 46ch
}

.audience-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 18px;
  padding: 10px 0;
  font-size: var(--asc-text-base);
  font-weight: 700;
  color: var(--blue)
}

.audience-link:hover {
  text-decoration: underline
}

.audience-link span {
  display: inline-block;
  transition: transform var(--asc-duration-fast) var(--asc-ease)
}

.audience-link:hover span {
  transform: translateX(2px)
}

/* Section syndics prescripteurs (MKTASC-18) */
.syndic-ctas {
  margin-top: 21px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px
}

.syndic-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 0;
  font-size: var(--asc-text-base);
  font-weight: 700;
  color: var(--blue)
}

.syndic-link:hover {
  text-decoration: underline
}

.syndic-link span {
  display: inline-block;
  transition: transform var(--asc-duration-fast) var(--asc-ease)
}

.syndic-link:hover span {
  transform: translateX(2px)
}

@media(max-width:800px) {
  .audiences {
    grid-template-columns: 1fr
  }
}

/* ==========================================================================
   PAGE TARIFS — MKTASC-2 / 25 / 26 / 27 / 28 / 29 / 30
   Ce bloc doit rester EN FIN DE FICHIER : plusieurs règles neutralisent
   volontairement .section h2 et .checks li par ordre d'apparition.
   ========================================================================== */

/* Navigation : de la place pour un 5e lien.
   Les .navlinks ne disparaissent qu'à 800px ; avec « Tarifs » le header
   déborderait de .wrap entre 801 et 900px. */
@media(max-width:980px) {
  .navlinks {
    gap: 18px
  }
}

.navlinks a[aria-current="page"],
.mobile-menu a[aria-current="page"],
.footer-links a[aria-current="page"] {
  color: var(--blue)
}

/* En-tête de page annexe */
.page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(114deg, #f7fbff 0%, #f5f8ff 54%, #e8f3ff 100%);
  border-top: 1px solid var(--asc-border);
  padding: var(--asc-space-8) 0 var(--asc-space-7);
  text-align: center
}

.page-hero .orb {
  z-index: 0
}

.page-hero .orb--a {
  width: 420px;
  height: 420px;
  right: -140px;
  top: -160px
}

.page-hero .orb--b {
  width: 320px;
  height: 320px;
  left: -120px;
  bottom: -180px;
  top: auto;
  right: auto;
  background: var(--asc-blue-100)
}

.page-hero .wrap {
  position: relative;
  z-index: 1
}

/* 22ch : le titre casse sur la virgule et tient en 2 lignes au lieu de 3.
   Chaque ligne gagnée remonte la grille de tarifs d'autant. */
.page-hero h1 {
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.06;
  letter-spacing: -.05em;
  margin: 12px auto 16px;
  max-width: 22ch
}

.page-hero .section-intro {
  margin-inline: auto
}

/* Grille tarifaire (MKTASC-26) */
.pricing {
  padding: var(--asc-space-8) 0 var(--asc-section-y)
}

.pricing-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0 0 24px
}

.segmented {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border-radius: var(--asc-radius-full);
  background: var(--asc-bg-subtle);
  border: 1px solid var(--asc-border);
  gap: 2px
}

/* Positionné/dimensionné en JS (main.js) à partir du bouton actif : les deux
   libellés n'ont pas la même largeur, donc pas de calcul possible en CSS pur. */
.segmented__thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: var(--asc-radius-full);
  background: var(--asc-blue-600);
  transition: transform var(--asc-duration-base) var(--asc-ease), width var(--asc-duration-base) var(--asc-ease)
}

.segmented__btn {
  position: relative;
  z-index: 1;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--asc-radius-full);
  background: transparent;
  color: var(--muted);
  font-size: var(--asc-text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: color var(--asc-duration-base) var(--asc-ease)
}

.segmented__btn.is-active {
  color: var(--white)
}

.segmented__btn:focus-visible {
  outline: 2px solid var(--asc-border-focus);
  outline-offset: 2px
}

@media (prefers-reduced-motion: reduce) {
  .segmented__thumb {
    transition: none
  }
}

/* Bandeau unique de l'offre de lancement, au-dessus de la grille : remplace
   le badge répété sur les 3 cartes, redondant dès lors qu'il dit la même
   chose trois fois de suite. */
.launch-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0 0 32px;
  padding: 20px 28px;
  border-radius: var(--asc-radius-lg);
  background: linear-gradient(135deg, var(--asc-blue-600), var(--asc-blue-700));
  box-shadow: var(--asc-shadow-lg);
  text-align: center
}

.launch-banner__badge {
  flex: none;
  padding: 8px 14px;
  border-radius: var(--asc-radius-full);
  background: var(--white);
  color: var(--asc-blue-700);
  font-size: var(--asc-text-overline);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1
}

.launch-banner__text {
  margin: 0;
  font-size: var(--asc-text-lg);
  color: var(--white)
}

.launch-banner__text b {
  font-weight: 800
}

.period-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px
}

.period-switch__label {
  padding: 12px 4px;
  font-size: var(--asc-text-sm);
  font-weight: 700;
  color: var(--muted);
  cursor: pointer
}

.period-switch__label.is-active {
  color: var(--ink)
}

.period-switch__badge {
  display: inline-block;
  margin-left: 2px;
  padding: 2px 8px;
  border-radius: var(--asc-radius-full);
  background: var(--asc-teal-50);
  color: var(--asc-teal-800);
  font-size: var(--asc-text-overline);
  font-weight: 800
}

.switch {
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--asc-radius-full);
  background: var(--asc-border-strong);
  cursor: pointer
}

.switch:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%)
}

.switch[aria-checked="true"] {
  background: var(--asc-blue-600)
}

.switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--asc-shadow-sm);
  transition: left var(--asc-duration-base) var(--asc-ease)
}

.switch[aria-checked="true"] .switch__thumb {
  left: 21px
}

.switch:focus-visible {
  outline: 2px solid var(--asc-border-focus);
  outline-offset: 2px
}

@media (prefers-reduced-motion: reduce) {
  .switch__thumb {
    transition: none
  }
}

/* minmax(0,1fr), pas 1fr seul : sinon une carte dont le contenu ne peut pas
   rétrécir (texte long, valeur non tronquée) élargit sa colonne au-delà des
   deux autres, et les lignes de contenu ne s'alignent plus entre cartes. */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch
}

.price-card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  border: 1px solid var(--asc-border);
  border-radius: var(--asc-radius-lg);
  background: var(--white);
  box-shadow: var(--asc-shadow-sm)
}

/* Mise en avant purement visuelle : aucun libellé « recommandé »,
   qui serait une affirmation non arbitrée. Retirer la classe dans le
   HTML suffit à revenir à trois cartes strictement identiques.
   Fond bleu 50, conformément à la règle de mise en avant du guide de
   style (auparavant une bordure + une ombre propres à ce composant, hors
   règle). Le panneau prix interne repasse en blanc pour rester lisible,
   même logique figure/fond que la carte Entreprise. */
.price-card--featured {
  border-color: var(--asc-blue-200);
  background: var(--asc-blue-50);
  box-shadow: var(--asc-shadow-md)
}

.price-card--featured .price-panel {
  background: var(--asc-bg)
}

/* Carte Entreprise : même structure, fond distinct pour signaler que le prix
   n'est pas le même genre d'information (à discuter, pas à cliquer). */
.price-card--quote {
  background: var(--asc-bg-subtle)
}

/* Le fond de la carte Entreprise est déjà teinté : on inverse le panneau
   en blanc pour qu'il reste visible, même logique figure/fond que les deux
   autres cartes. */
.price-card--quote .price-panel {
  background: var(--asc-bg)
}

.price-card .price-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.2;
  margin: 0 0 5px;
  max-width: none
}

/* min-height réserve la place de 2 lignes : sans ça, une description qui
   tient sur 1 ligne sur une carte et 2 sur une autre décale le panneau
   prix (fond teinté, donc très visible) d'une carte à l'autre. */
.price-desc {
  margin: 0 0 24px;
  min-height: 48px;
  font-size: var(--asc-text-base);
  line-height: 1.5;
  color: var(--asc-text-secondary)
}

/* Le bloc prix a son propre panneau à fond teinté : c'est ce qui l'isole
   du reste de la carte désormais, plus besoin d'un filet interne. */
.price-panel {
  padding: 20px;
  border-radius: var(--asc-radius-lg);
  background: var(--asc-bg-subtle)
}

.price-was {
  margin: 0 0 10px;
  font-size: var(--asc-text-sm);
  color: var(--asc-text-muted)
}

.price-was s {
  font-weight: 600;
  text-decoration-thickness: 1.5px
}

.price-amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 0 10px;
  transition: opacity .2s ease, filter .2s ease
}

/* Micro-transition au switch Mensuel/Annuel (main.js) : un remplacement de
   texte franc est illisible sur un changement de plusieurs chiffres à la
   fois. Scopée au seul montant, pas au reste du panneau (prix barré,
   condition), qui basculent instantanément. */
.price-amount--fading {
  opacity: 0;
  filter: blur(4px)
}

.price-value {
  font-size: clamp(40px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--ink)
}

.price-value--text {
  font-size: clamp(26px, 2.6vw, 31px);
  letter-spacing: -.035em
}

/* nowrap : l'unité doit rester sur la ligne de base du montant, jamais
   repasser dessous — c'est ce qui cassait la hiérarchie du bloc. */
.price-unit {
  font-size: var(--asc-text-sm);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap
}

.price-cond {
  margin: 0;
  font-size: var(--asc-text-sm);
  color: var(--asc-text-muted);
  line-height: 1.45
}

/* Capacités du plan : deux repères concrets (techniciens, ascenseurs) sous
   le prix, en pictogramme + texte plutôt qu'une seule phrase dense — on les
   distingue au coup d'œil sans les lire mot à mot. */
.price-caps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 20px 0
}

.price-cap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--asc-text-sm);
  color: var(--asc-text-secondary)
}

.price-cap__icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--asc-gray-400)
}

/* margin-top:auto → le pied de carte et le bouton se collent en bas,
   les 3 CTA restent alignés quelle que soit la longueur de .price-cond. */
.price-foot {
  margin: auto 0 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: var(--asc-text-xs);
  font-weight: 600;
  color: var(--muted)
}

/* margin-top:auto sur le CTA (et non plus sur la liste qui le suivait)
   colle désormais le bouton et le lien en bas de carte, alignés entre
   les 3 colonnes quelle que soit la longueur de .price-desc. */
.price-card>.button {
  margin-top: auto
}

/* Même liste sur les 3 cartes (MKTASC-26), déjà présente en entier dans
   le tableau comparatif #inclus juste en dessous : plutôt qu'un doublon
   qui invite à chercher des différences inexistantes, un lien vers ce
   tableau. */
.price-features-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 14px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: var(--asc-text-sm);
  font-weight: 700;
  color: var(--blue)
}

.price-features-link:hover {
  text-decoration: underline
}

.pricing-note {
  margin: 34px auto 0
}

.pricing .mini-cta {
  margin-top: 40px
}

/* Bloc « toutes les fonctionnalités » (MKTASC-26) */
.included {
  position: relative;
  overflow: hidden;
  padding: 88px 0
}

.included .orb {
  z-index: 0
}

.included .orb--a {
  width: 380px;
  height: 380px;
  left: -160px;
  top: -140px;
  right: auto
}

.included .orb--b {
  width: 300px;
  height: 300px;
  right: -140px;
  bottom: -160px;
  left: auto;
  top: auto;
  background: var(--asc-blue-100)
}

.included .wrap {
  position: relative;
  z-index: 1
}

.compare-wrap {
  position: relative;
  max-width: 900px;
  margin: 44px auto 0;
  overflow-x: auto;
  border: 1px solid var(--asc-border);
  border-radius: var(--asc-radius-xl);
  background: var(--white)
}

/* Dégradé de bord : signale qu'il reste du contenu à faire défiler quand le
   tableau déborde (mobile). Recouvre le coin arrondi du conteneur. */
.compare-wrap:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 28px;
  border-radius: 0 var(--asc-radius-xl) var(--asc-radius-xl) 0;
  background: linear-gradient(to right, transparent, var(--white));
  pointer-events: none
}

.compare {
  width: 100%;
  border-collapse: collapse
}

.compare th,
.compare td {
  padding: 13px 18px;
  text-align: center;
  font-size: var(--asc-text-sm);
  white-space: nowrap
}

.compare thead th {
  border-bottom: 1px solid var(--asc-border);
  font-size: var(--asc-text-overline);
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted)
}

.compare-feature-head {
  text-align: left
}

.compare tbody th {
  text-align: left;
  font-weight: 700;
  color: var(--ink);
  white-space: normal
}

.compare tbody tr+tr th,
.compare tbody tr+tr td {
  border-top: 1px solid var(--asc-border)
}

.compare-check {
  display: inline-grid;
  place-items: center;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: var(--asc-teal-50);
  color: var(--asc-teal-700);
  font-size: 12px;
  font-weight: 800
}

.included-note {
  max-width: 68ch;
  margin: 30px auto 0;
  text-align: center;
  font-size: var(--asc-text-sm);
  color: var(--muted)
}

/* Pack mise en route (MKTASC-25 : « sur devis », sans prix) */
.addon {
  padding: var(--asc-section-y) 0
}

.addon-card {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 320px);
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--asc-border);
  border-radius: var(--asc-radius-xl);
  background: var(--white);
  box-shadow: var(--asc-shadow-sm)
}

.addon-card h2 {
  font-size: var(--asc-text-h1);
  letter-spacing: -.03em;
  line-height: 1.15;
  margin: 9px 0 13px;
  max-width: none
}

.addon-copy p {
  color: var(--muted);
  margin: 0 0 13px;
  max-width: 54ch
}

.addon-links {
  margin: 18px 0 0
}

.addon-links a {
  color: var(--blue);
  font-weight: 700
}

.addon-links a:hover {
  text-decoration: underline
}

.addon-price {
  padding: 26px 22px;
  border-radius: var(--asc-radius-lg);
  background: var(--pale);
  text-align: center
}

.addon-price .price-value {
  display: block;
  margin-bottom: 7px
}

.addon-price .price-cond {
  margin: 0 0 18px
}

/* FAQ tarifaire et bloc de fin */
.pricing-faq {
  padding: var(--asc-section-y) 0
}

.pricing-end {
  padding: var(--asc-section-y) 0
}

.pricing-end-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 26px 0 0
}

/* Responsive (MKTASC-30).
   Palier intermédiaire à 2 colonnes : il n'en existait aucun,
   .features passait directement de 3 à 1 colonne à 800px. */
@media(max-width:1000px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .pricing-grid>.price-card:nth-child(3) {
    grid-column: 1 / -1
  }

  .addon-card {
    grid-template-columns: 1fr
  }

  .addon-price {
    max-width: 420px;
    margin: 0 auto
  }
}

@media(max-width:800px) {
  .page-hero {
    padding: 46px 0 42px
  }

  .pricing {
    padding: 52px 0 64px
  }

  .included,
  .addon,
  .pricing-faq,
  .pricing-end {
    padding: 64px 0
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .pricing-grid>.price-card:nth-child(3) {
    grid-column: auto
  }

  .compare th,
  .compare td {
    padding: 11px 14px;
    font-size: var(--asc-text-xs)
  }
}

@media(max-width:410px) {
  .price-card {
    padding: 22px 18px 20px
  }

  .price-value {
    font-size: 34px
  }

  .price-value--text {
    font-size: 26px
  }
}

/* CTA pleine largeur sous 520px : avant, seul .pricing-end-actions avait
   cette règle (à 410px) — .persona-actions ne l'avait pas, ce qui donnait
   deux traitements de bouton différents sur la même page persona (boutons
   à largeur naturelle en haut de page, pleine largeur en bas). */
@media(max-width:520px) {
  .pricing-end-actions .button,
  .persona-actions .button {
    width: 100%
  }
}

/* INDISPENSABLE pour MKTASC-28 : la règle globale a{color:inherit;
   text-decoration:none} rendrait invisibles les liens ajoutés dans la
   réponse de FAQ et sous le titre du formulaire de démonstration. */
.faq .ans a,
.dform .hint a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px
}

.faq .ans a:hover,
.dform .hint a:hover {
  color: var(--blue-dark)
}

/* Bandeau cookies (consentement mesure d'audience) */
.cookie-banner {
  position: fixed;
  z-index: 60;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--white);
  border-top: 1px solid var(--asc-border);
  box-shadow: 0 -8px 30px rgba(12, 23, 38, .08);
  padding: 18px 0
}

.cookie-banner[hidden] {
  display: none
}

.cookie-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap
}

.cookie-banner-inner p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  max-width: 640px
}

.cookie-banner-inner a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px
}

.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex: none
}

.cookie-banner-actions .button {
  min-height: 44px;
  padding-inline: 20px
}

@media(max-width:520px) {
  .cookie-banner-inner {
    flex-direction: column;
    align-items: stretch
  }

  .cookie-banner-actions {
    justify-content: stretch
  }

  .cookie-banner-actions .button {
    flex: 1
  }
}

/* ==========================================================================
   PAGES « POUR QUI ? » — independant.html / pme.html / syndics.html
   Bloc volontairement placé APRÈS le bloc PAGE TARIFS : toutes les règles
   ci-dessous portent un préfixe propre (.persona-, .pain-, .day-, .proof-,
   .role-, .cross-) ou un modificateur, et ne redéfinissent aucun sélecteur
   partagé — l'ordre relatif avec les blocs précédents est donc sans effet.
   Chaque surcharge responsive est écrite juste après la règle qu'elle
   surcharge, jamais regroupée dans un @media plus haut dans le fichier.
   ========================================================================== */

/* --- Apparition en cascade -----------------------------------------------
   Reprend l'unique animation du site (.asc-reveal : opacité + 16px, 420ms) et
   se contente de décaler le départ des enfants. Trois éléments au maximum,
   80ms d'écart : au-delà, l'œil attend le dernier au lieu de lire. */
.js-stagger.is-visible>*:nth-child(1) {
  transition-delay: 0ms
}

.js-stagger.is-visible>*:nth-child(2) {
  transition-delay: 80ms
}

.js-stagger.is-visible>*:nth-child(3) {
  transition-delay: 160ms
}

.js-stagger>* {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .42s var(--asc-ease), transform .42s var(--asc-ease)
}

.js-stagger.is-visible>* {
  opacity: 1;
  transform: none
}

@media (prefers-reduced-motion: reduce) {
  .js-stagger>* {
    opacity: 1;
    transform: none;
    transition: none
  }

  .js-stagger.is-visible>*:nth-child(n) {
    transition-delay: 0ms
  }
}

/* --- En-tête de page persona ---------------------------------------------
   Variante à 2 colonnes de .page-hero : le titre seul au centre ne donnait
   aucune matière à regarder avant le premier scroll. */
.page-hero--persona {
  padding: var(--asc-space-8) 0 var(--asc-space-7);
  text-align: left
}

/* Variante avec photo en fond, sur la page Indépendant.
   Source 1080x463 (fournie) : pas de quoi couvrir net un très grand écran
   en pleine largeur, d'où l'usage en fond de section (recadré, jamais vu à
   pleine résolution) plutôt qu'en image nette au premier plan.

   Dégradé bleu nuit (bleu 950 → encre), et non plus un voile blanc : le
   texte passe donc en blanc sur fond sombre, avec les jetons *-on-dark
   prévus pour ça. Le dégradé reste diagonal — quasi opaque sous la colonne
   de texte à gauche, dégressif vers la droite pour laisser la photo
   respirer sans jamais la montrer à pleine luminosité. */
.page-hero--photo {
  --persona-photo: url("../img/mecanicien-ascenseur-hero.webp");
  background-image:
    linear-gradient(100deg, rgba(15, 32, 80, .97) 0%, rgba(15, 32, 80, .92) 38%, rgba(15, 32, 80, .66) 68%, rgba(12, 23, 38, .48) 100%),
    var(--persona-photo);
  background-size: cover, cover;
  background-position: center, center 32%;
  background-repeat: no-repeat, no-repeat;
  border-top-color: transparent
}

/* Variante PME : même traitement dégradé, photo d'équipe. */
.page-hero--photo-pme {
  --persona-photo: url("../img/equipe.webp")
}

/* Variante Syndics : même traitement dégradé, façade haussmannienne. */
.page-hero--photo-syndics {
  --persona-photo: url("../img/copropriete.webp")
}

/* Les orbes (fond bleu pâle) sont pensés pour le dégradé uni du hero par
   défaut : sur une photo, ils flotteraient dessus comme des taches. */
.page-hero--photo .orb {
  display: none
}

/* Textes inversés. Les deux classes sont combinées (spécificité 0,3,0) pour
   passer devant `.page-hero--persona .section-intro`, qui porte la couleur
   sur fond clair et qui est déclarée PLUS BAS dans le fichier — à
   spécificité égale elle l'emporterait (cf. ascend_css_source_order_gotcha). */
.page-hero--photo h1 {
  color: var(--asc-text-on-dark)
}

.page-hero--photo.page-hero--persona .section-intro {
  color: var(--asc-text-secondary-on-dark)
}

.page-hero--photo .kicker {
  color: var(--asc-action-on-dark)
}

/* Le bouton fantôme (fond bleu 50) formerait une pastille blanche sur
   l'encre : il s'inverse en contour clair, comme le prévoient les jetons
   pour `.asc-btn--secondary` sur fond sombre. */
.page-hero--photo .button.ghost {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .32);
  color: var(--asc-text-on-dark)
}

.page-hero--photo .button.ghost:hover {
  background: rgba(255, 255, 255, .2);
  border-color: rgba(255, 255, 255, .45);
  color: var(--asc-text-on-dark)
}

/* Sans capture téléphone en second plan (retirée : la photo de fond suffisait,
   les deux ensemble faisaient doublon), .persona-hero n'a plus qu'une colonne
   de texte — la seconde colonne à 440px du gabarit par défaut laissait un
   vide. Le texte est plafonné en largeur pour que la photo reste visible sur
   la partie droite de la section, pas recouverte jusqu'au bord. */
.page-hero--photo .persona-hero {
  grid-template-columns: minmax(0, 1fr)
}

.page-hero--photo .persona-hero > div {
  max-width: 640px
}

/* Sous 900px, .persona-hero repasse en une colonne (texte, puis photo/mock) :
   le dégradé diagonal pensé pour 2 colonnes traversait alors le texte, moitié
   lisible moitié posée sur la photo brute. En une colonne, le texte occupe
   toute la largeur : le dégradé doit être vertical, opaque sur toute la
   largeur derrière le texte, dégressif seulement vers le bas. */
@media(max-width:900px) {
  .page-hero--photo {
    background-image:
      linear-gradient(180deg, rgba(15, 32, 80, .96) 0%, rgba(15, 32, 80, .93) 62%, rgba(15, 32, 80, .78) 82%, rgba(12, 23, 38, .6) 100%),
      var(--persona-photo);
    background-position: center, center 25%
  }
}

/* min-height ici, sur le conteneur, pas sur .persona-hero-media : la variante
   photo (Indépendant) n'a plus de colonne média du tout (grid-template-
   columns repassé à 1 colonne, cf. .page-hero--photo .persona-hero plus bas),
   donc rien ne contraignait sa hauteur — les trois heros persona n'avaient
   plus la hauteur commune voulue. */
.persona-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
  min-height: 440px
}

.page-hero--persona h1 {
  margin: 14px 0 16px;
  max-width: 17ch
}

.page-hero--persona .section-intro {
  margin-inline: 0;
  max-width: 52ch;
  font-size: var(--asc-text-lg);
  color: var(--asc-text-secondary)
}

.persona-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 0
}

.persona-actions .button {
  min-height: 44px
}

/* La hauteur commune aux trois pages persona est portée par .persona-hero
   (voir plus haut) : contraindre la largeur ne suffisait pas, les captures
   n'ont pas le même ratio (0,51 pour le portrait mobile, 1,72 pour le
   tableau de bord), donc à largeur égale le hero d'une page faisait le
   double de celui d'une autre. */
.persona-hero-media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%
}

/* Enveloppe qui épouse exactement l'image : c'est elle qui sert de repère à
   .persona-chip. Ancrer l'étiquette sur .persona-hero-media la laisserait
   flotter loin sous une capture paysage, qui ne remplit pas la boîte. */
.persona-hero-shot {
  position: relative;
  width: 100%
}

.persona-hero-media .mock {
  transform: rotate(1.2deg)
}

.persona-hero-media .mock img {
  display: block;
  width: 100%;
  height: auto
}

/* Étiquette flottante posée sur la capture : rappelle en un mot ce que
   l'écran montre, sans légende à lire sous l'image. */
.persona-chip {
  position: absolute;
  z-index: 2;
  left: -14px;
  bottom: -18px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 74%;
  padding: 12px 15px;
  border: 1px solid var(--asc-border);
  border-radius: var(--asc-radius-lg);
  background: #fff;
  box-shadow: var(--asc-shadow-lg);
  transform: rotate(-1.6deg)
}

.persona-chip .ic {
  width: 26px;
  height: 26px;
  padding: 5px;
  border-radius: 50%;
  background: var(--asc-teal-50);
  color: var(--asc-teal-700)
}

.persona-chip b {
  display: block;
  font-size: var(--asc-text-xs);
  font-weight: 800;
  color: var(--ink)
}

.persona-chip span {
  display: block;
  font-size: var(--asc-text-xs);
  color: var(--muted)
}

/* Le visuel mobile arrive déjà détouré, avec son propre châssis de téléphone
   (fond alpha vérifié). L'habiller de .mock ajouterait une carte blanche tout
   autour, soit un cadre dans un cadre. On neutralise donc la carte et on garde
   une ombre portée qui épouse la silhouette, comme .hero-phone sur l'accueil. */
/* Hauteur en absolu, pas en %, : le parent n'a qu'un min-height, contre lequel
   un pourcentage ne se résout pas — l'image repartait à sa taille naturelle
   (1223px de haut) et le hero triplait. */
.persona-hero-media--phone .persona-hero-shot {
  width: auto;
  height: 440px
}

.persona-hero-media--phone .mock {
  height: 100%;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  transform: none
}

.persona-hero-media--phone .mock img {
  width: auto;
  height: 100%;
  filter: drop-shadow(0 24px 44px rgba(12, 23, 38, .28))
}

/* L'enveloppe fait ici la largeur du téléphone (~220px) : en pourcentage
   l'étiquette deviendrait illisible, d'où une largeur en absolu. */
.persona-hero-media--phone .persona-chip {
  left: -52px;
  max-width: 262px
}

@media(max-width:900px) {
  .persona-hero {
    grid-template-columns: 1fr;
    gap: 40px;
    min-height: 0
  }

  .page-hero--persona h1 {
    max-width: none
  }

  .persona-hero-media {
    max-width: 460px;
    margin-inline: auto;
    width: 100%;
    min-height: 360px;
    height: auto
  }

  .persona-chip {
    left: 0
  }

  .persona-hero-media--phone .persona-hero-shot {
    height: 360px
  }

  .persona-hero-media--phone .persona-chip {
    left: -24px
  }
}

/* --- « Ce qui coince » ----------------------------------------------------
   Le problème avant la solution : trois situations que le lecteur reconnaît,
   chacune suivie de ce qui change. */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 52px
}

/* Palier tablette : sans lui, 3 colonnes passaient directement à 1 à 900px,
   avec des cartes de 713px de large mesurées à 768px. */
@media(max-width:900px) {
  .pain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:640px) {
  .pain-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 38px
  }
}

/* .pain n'est pas cliquable (aucun lien à l'intérieur) : pas de survol qui
   suggère le contraire — cf. .cross-link, qui lui EST un <a> et garde le
   sien. */
.pain {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--asc-radius-lg);
  background: var(--white)
}

/* Bleu, comme .icon (cartes fonctionnalités de l'accueil) : le teal n'est
   pas confirmé comme couleur de pictogramme de carte (arbitrage encore
   ouvert avec David, cf. mémoire projet) — en attendant, le guide prévoit
   explicitement ce repli, qui a aussi l'avantage de rendre .icon et
   .pain__icon cohérents entre eux au lieu de l'un bleu et l'autre teal. */
.pain__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  padding: 9px;
  border-radius: var(--asc-radius-md);
  background: var(--asc-blue-50);
  color: var(--blue)
}

.pain__icon svg {
  width: 100%;
  height: 100%
}

.pain h3 {
  font-size: var(--asc-text-h4);
  letter-spacing: -.025em;
  line-height: 1.25;
  margin: 0 0 9px
}

.pain p {
  margin: 0;
  font-size: var(--asc-text-base);
  line-height: 1.55;
  color: var(--muted)
}

/* Filet + libellé « Avec Ascend » : la réponse est rattachée visuellement au
   problème plutôt que reléguée dans une section séparée. Le libellé est un
   élément du HTML (.pain__fix-label), pas du contenu généré en CSS : un
   contenu généré par :before n'existe pas dans le DOM, n'est pas fiable en
   restitution vocale et disparaît d'un copier-coller. */
.pain__fix {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line)
}

.pain__fix-label {
  display: block;
  margin: 0 0 7px;
  font-size: var(--asc-text-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue)
}

.pain__fix p {
  color: var(--ink);
  font-weight: 600
}

@media(max-width:900px) {
  .pain__fix {
    margin-top: 0
  }
}

/* --- Journée type ---------------------------------------------------------
   Rail vertical à trois moments. C'est le bloc qui porte le récit : le
   lecteur se situe dans sa propre journée avant de lire une fonctionnalité. */
.day-rail {
  position: relative;
  max-width: 880px;
  margin: 52px auto 0;
  padding-left: 0
}

.day-step {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 0 28px;
  padding: 0 0 34px
}

.day-step:last-child {
  padding-bottom: 0
}

/* Le trait relie les pastilles entre elles : il part du bas de la pastille
   et s'arrête au step suivant, d'où le :not(:last-child). */
.day-step:not(:last-child):before {
  content: "";
  position: absolute;
  left: 124px;
  top: 30px;
  bottom: 4px;
  width: 2px;
  background: linear-gradient(to bottom, var(--asc-blue-200), var(--asc-gray-100))
}

.day-time {
  padding-top: 3px;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--asc-text-secondary)
}

.day-body {
  position: relative;
  padding-left: 34px
}

.day-body:before {
  content: "";
  position: absolute;
  left: -5px;
  top: 6px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--blue);
  border-radius: 50%;
  background: var(--white)
}

.day-body h3 {
  font-size: 19px;
  letter-spacing: -.03em;
  line-height: 1.25;
  margin: 0 0 12px
}

.day-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px
}

.day-cell {
  padding: 15px 17px;
  border-radius: var(--asc-radius-lg);
  font-size: var(--asc-text-base);
  line-height: 1.5
}

.day-cell b {
  display: block;
  margin-bottom: 5px;
  font-size: var(--asc-text-overline);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase
}

.day-cell--before {
  background: var(--asc-gray-50);
  border: 1px solid var(--line);
  color: var(--muted)
}

.day-cell--before b {
  color: var(--asc-text-muted)
}

.day-cell--after {
  background: var(--asc-blue-50);
  border: 1px solid var(--asc-blue-100);
  color: var(--asc-blue-800);
  font-weight: 600
}

.day-cell--after b {
  color: var(--blue)
}

@media(max-width:760px) {
  .day-rail {
    margin-top: 38px
  }

  .day-step {
    grid-template-columns: 1fr;
    gap: 0;
    padding-bottom: 28px
  }

  .day-step:not(:last-child):before {
    display: none
  }

  .day-time {
    text-align: left;
    margin-bottom: 4px
  }

  .day-body {
    padding-left: 0
  }

  .day-body:before {
    display: none
  }

  .day-compare {
    grid-template-columns: 1fr
  }
}

/* --- Repères du secteur ---------------------------------------------------
   Chiffres de contexte, pas de performance produit : ils situent le métier.
   Volontairement statiques — le guide de style exclut les compteurs animés. */
.proof-band {
  padding: 60px 0;
  background: var(--ink);
  color: var(--asc-text-on-dark)
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--asc-radius-xl);
  overflow: hidden
}

/* Palier tablette, comme .pain-grid ci-dessus. */
@media(max-width:900px) {
  .proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:640px) {
  .proof-grid {
    grid-template-columns: 1fr
  }
}

.proof {
  padding: 28px 26px;
  background: var(--ink)
}

.proof strong {
  display: block;
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1.05;
  color: #fff;
  font-variant-numeric: tabular-nums
}

.proof span {
  display: block;
  margin-top: 9px;
  font-size: var(--asc-text-base);
  line-height: 1.5;
  color: var(--asc-text-secondary-on-dark)
}

.proof-source {
  margin: 22px 0 0;
  text-align: center;
  font-size: var(--asc-text-sm);
  color: var(--asc-gray-400)
}

.proof-source a {
  color: var(--asc-action-on-dark);
  text-decoration: underline;
  text-underline-offset: 2px
}

/* Même composant, réutilisé hors de .proof-band (fond clair) sur la page
   Syndics : les couleurs pensées pour l'encre n'y sont pas assez contrastées. */
.proof-source--on-light {
  color: var(--asc-text-muted)
}

.proof-source--on-light a {
  color: var(--blue)
}

@media(max-width:800px) {
  .proof-band {
    padding: 48px 0
  }

  .proof {
    padding: 22px 24px
  }
}

/* --- Rôles (PME) ----------------------------------------------------------
   Une PME n'a pas un lecteur mais trois. Chacun doit trouver sa ligne. */
.role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 52px
}

/* Palier tablette, comme .pain-grid ci-dessus. */
@media(max-width:900px) {
  .role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:640px) {
  .role-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 38px
  }
}

.role {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--asc-radius-lg);
  background: var(--white)
}

.role__tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 11px;
  border-radius: var(--asc-radius-full);
  background: var(--asc-blue-50);
  font-size: var(--asc-text-overline);
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--asc-blue-800)
}

.role h3 {
  font-size: var(--asc-text-h4);
  letter-spacing: -.025em;
  line-height: 1.25;
  margin: 0 0 10px
}

.role p {
  margin: 0 0 14px;
  font-size: var(--asc-text-base);
  line-height: 1.55;
  color: var(--muted)
}

.role ul {
  margin: 0;
  padding: 0;
  list-style: none
}

.role li {
  display: flex;
  gap: 9px;
  padding: 6px 0;
  font-size: var(--asc-text-base);
  line-height: 1.45
}

.role li .ic {
  width: 16px;
  height: 16px;
  margin-top: 4px;
  color: var(--asc-teal-700)
}

/* --- Séquence d'envois au syndic ------------------------------------------
   Reconstitué en HTML plutôt qu'en captures d'écran d'une boîte mail : net à
   toutes les tailles, aucune donnée client à anonymiser, aucune image à
   charger. Assumé comme schéma, pas comme copie d'écran — d'où les
   destinataires en clair (« votre entreprise ») et la note en fin de bloc. */
.mailflow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 52px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: mail
}

.mail {
  display: flex;
  gap: 16px;
  align-items: stretch
}

.mail__step {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: 20px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums
}

/* display:flex column : la carte peut être plus haute que son contenu une
   fois étirée par la grille (.mailflow) — margin-top:auto sur .mail__attach
   pin la pièce jointe en bas plutôt que de laisser un vide irrégulier sur
   les cartes qui n'en ont pas. Pas de survol : .mail__card n'est pas
   cliquable (aucun lien à l'intérieur). */
.mail__card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--asc-radius-lg);
  background: var(--white)
}

.mail__head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: var(--asc-text-sm)
}

.mail__from {
  font-weight: 700;
  color: var(--asc-text-secondary)
}

.mail__when {
  color: var(--asc-text-muted)
}

.mail__subject {
  margin: 0 0 8px;
  font-size: var(--asc-text-h4);
  letter-spacing: -.025em;
  line-height: 1.3
}

.mail__body {
  margin: 0;
  font-size: var(--asc-text-base);
  line-height: 1.55;
  color: var(--muted)
}

/* Pièce jointe : le nom de fichier est le seul élément en monospace de la
   carte, c'est ce qui le fait lire comme un fichier et non comme du texte. */
.mail__attach {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 7px;
  margin: auto 0 0;
  padding: 7px 12px;
  border-radius: var(--asc-radius-md);
  background: var(--asc-blue-50);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--asc-text-xs);
  font-weight: 600;
  color: var(--asc-blue-800)
}

.mail__attach .ic {
  width: 15px;
  height: 15px;
  color: var(--blue)
}

.mailflow-note {
  max-width: 62ch;
  margin: 28px auto 0;
  text-align: center;
  font-size: var(--asc-text-sm);
  color: var(--muted)
}

@media(max-width:900px) {
  .mailflow {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 38px
  }

  .mail {
    gap: 12px
  }
}

/* --- Emplacement portrait / citation --------------------------------------
   Prévu pour une vraie photo d'ascensoriste et une vraie citation. Sans
   photo, le bloc reste correct : la citation tient seule. */
.persona-quote {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: clamp(22px, 3vw, 34px);
  align-items: center;
  max-width: 840px;
  margin: 0 auto;
  padding: clamp(26px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--asc-radius-xl);
  background: var(--white);
  box-shadow: var(--asc-shadow-sm)
}

.persona-quote--noportrait {
  grid-template-columns: minmax(0, 1fr);
  text-align: center
}

.persona-quote__portrait {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--asc-bg-subtle)
}

.persona-quote blockquote {
  margin: 0;
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.4;
  color: var(--ink)
}

.persona-quote figcaption {
  margin-top: 14px;
  font-size: var(--asc-text-sm);
  color: var(--muted)
}

@media(max-width:640px) {
  .persona-quote {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
    justify-items: center
  }
}

/* --- Encart photo ---------------------------------------------------------
   Les photos disponibles font 600x400 : affichées à 300px de large, elles
   restent nettes sur écran à densité double. D'où l'encart plutôt qu'un
   bandeau pleine largeur, où elles seraient molles.
   Le texte à côté est une phrase de positionnement, pas un témoignage :
   aucune personne n'est nommée, la photo n'illustre pas un client. */
.persona-figure {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
  max-width: 860px;
  margin: 52px auto 0;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--asc-radius-xl);
  background: var(--white)
}

.persona-figure img {
  display: block;
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: var(--asc-radius-lg);
  background: var(--asc-bg-subtle)
}

.persona-figure p {
  margin: 0;
  font-size: clamp(18px, 1.9vw, 21px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.45;
  color: var(--ink)
}

.persona-figure figcaption {
  margin-top: 12px;
  font-size: var(--asc-text-sm);
  line-height: 1.5;
  color: var(--muted)
}

@media(max-width:760px) {
  .persona-figure {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    margin-top: 38px
  }

  .persona-figure img {
    width: 100%;
    max-width: 300px
  }
}

/* --- Passerelles entre pages ---------------------------------------------
   Une page persona qui ne correspond pas au lecteur ne doit pas être une
   impasse : trois sorties explicites plutôt qu'un retour arrière. */
.cross-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 44px
}

/* Palier tablette, comme .pain-grid plus haut. */
@media(max-width:900px) {
  .cross-links {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:640px) {
  .cross-links {
    grid-template-columns: 1fr;
    margin-top: 32px
  }
}

.cross-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--asc-radius-lg);
  background: var(--white);
  text-align: left;
  transition: border-color var(--asc-duration-base) var(--asc-ease), box-shadow var(--asc-duration-base) var(--asc-ease), transform var(--asc-duration-base) var(--asc-ease)
}

.cross-link:hover {
  border-color: var(--asc-blue-200);
  box-shadow: var(--asc-shadow-md);
  transform: translateY(-2px)
}

.cross-link b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--asc-text-base);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--blue)
}

.cross-link b span {
  display: inline-block;
  transition: transform var(--asc-duration-fast) var(--asc-ease)
}

.cross-link:hover b span {
  transform: translateX(3px)
}

.cross-link em {
  font-style: normal;
  font-size: var(--asc-text-sm);
  line-height: 1.5;
  color: var(--muted)
}

/* --- Barre d'action persistante (mobile) ----------------------------------
   Sur téléphone, le bouton du header sort de l'écran dès le premier scroll et
   le CTA suivant est à plusieurs sections de là. La barre n'apparaît qu'une
   fois l'en-tête dépassé, et jamais en même temps que le bandeau cookies —
   les deux occupent le même bas d'écran (voir main.js). */
.sticky-cta {
  position: fixed;
  z-index: 55;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  /* Ombre vers le haut (barre fixée en bas d'écran) : ne peut pas réutiliser
     un jeton d'ombre (tous vers le bas), même alpha que --asc-shadow-md
     pour rester dans la même famille. */
  box-shadow: 0 -8px 30px rgba(12, 23, 38, .08);
  transform: translateY(100%);
  transition: transform .3s var(--asc-ease)
}

.sticky-cta.is-visible {
  transform: none
}

/* Un seul libellé, sur une ligne (le sous-titre a été retiré du HTML) :
   objectif ≤64px de haut au total, contre 101px avec le sous-titre sur 3
   lignes mesuré sur iPhone SE. */
.sticky-cta__text {
  min-width: 0;
  font-size: var(--asc-text-sm);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.sticky-cta .button {
  flex: none;
  min-height: 44px
}

@media(max-width:800px) {
  .sticky-cta {
    display: flex
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta {
    transition: none
  }
}

/* --- Ajustements de section sur les pages persona ------------------------- */
.persona-section {
  padding: var(--asc-section-y) 0
}

.persona-section .section-intro {
  margin-top: 4px
}

.persona-faq .faq {
  margin-top: 44px
}

@media(max-width:800px) {
  .persona-section {
    padding: var(--asc-section-y-mobile) 0
  }

  .page-hero--persona {
    padding: var(--asc-space-6) 0 var(--asc-space-7)
  }
}

/* ==========================================================================
   PAGE GUIDE — guide.html (MKTASC-50)
   Placé en toute fin de fichier, après le bloc PAGES « POUR QUI ? », pour la
   même raison que lui : tous les sélecteurs ci-dessous portent le préfixe
   .guide- et ne redéfinissent aucun sélecteur partagé, donc l'ordre relatif
   avec les blocs précédents est sans effet. Seule exception volontaire,
   .guide-chapter h2, qui neutralise le centrage de .section h2 — d'où
   l'importance de rester APRÈS le bloc PAGE TARIFS.
   Chaque surcharge responsive est écrite juste après la règle qu'elle
   surcharge, jamais regroupée dans un @media plus haut dans le fichier.

   Les ancres de chapitre n'ont pas besoin de scroll-margin ici : la règle
   générique `main [id]` en haut du fichier les couvre déjà.
   ========================================================================== */

/* --- Colonne de lecture ---------------------------------------------------
   Un guide se lit en continu, pas en diagonale comme une page marketing :
   la mesure est plus étroite que .wrap, et le contenu est aligné à gauche. */
.guide-toc-section,
.guide-section,
.guide-sources-section {
  padding: var(--asc-space-8) 0
}

.guide-footnote {
  padding: 0 0 var(--asc-space-8)
}

.guide-toc,
.guide-chapter,
.guide-sources-section .asc-container {
  max-width: 760px;
  margin-inline: auto
}

@media(max-width:800px) {

  .guide-toc-section,
  .guide-section,
  .guide-sources-section {
    padding: var(--asc-space-6) 0
  }

  .guide-footnote {
    padding: 0 0 var(--asc-space-6)
  }
}

/* --- Sommaire ancré -------------------------------------------------------
   Ne liste que des chapitres écrits. Pas d'item grisé, pas de « à venir » :
   un sommaire qui annonce plus qu'il ne contient rend le vide plus visible
   qu'un blog abandonné. Une seule colonne, quel que soit le nombre d'items —
   à deux colonnes, trois entrées se lisent comme une grille bancale. */
.guide-toc {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--asc-radius-xl);
  background: var(--white);
  box-shadow: var(--asc-shadow-sm)
}

.guide-toc__title {
  margin: 0 0 18px;
  font-size: var(--asc-text-h2);
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--ink)
}

.guide-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  counter-reset: none
}

.guide-toc__list a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  /* 44px de cible tactile : 16px de texte à 1.5 + 2×10px de padding. */
  padding: 10px 12px;
  margin-inline: -12px;
  border-radius: var(--asc-radius-md);
  font-size: var(--asc-text-base);
  line-height: 1.5;
  color: var(--asc-text-secondary);
  transition: background var(--asc-duration-fast) var(--asc-ease), color var(--asc-duration-fast) var(--asc-ease)
}

.guide-toc__list a:hover {
  background: var(--asc-blue-50);
  color: var(--ink)
}

.guide-toc__num {
  flex: none;
  min-width: 26px;
  /* 16px comme le libellé : le numéro est un item de sommaire, pas une
     annotation — le plancher du guide de style s'y applique. */
  font-size: var(--asc-text-base);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--blue)
}

.guide-toc__label {
  min-width: 0
}

/* Le repère de fin de page n'est pas un chapitre numéroté : il est détaché
   de la liste ordonnée pour que la numérotation reste celle du plan. */
.guide-toc__aside {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: var(--asc-text-base)
}

.guide-toc__aside a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--blue)
}

.guide-toc__aside a span {
  display: inline-block;
  transition: transform var(--asc-duration-fast) var(--asc-ease)
}

.guide-toc__aside a:hover span {
  transform: translateX(3px)
}

/* --- Chapitre -------------------------------------------------------------
   Trame en trois temps : ce que le texte impose, ce que ça change pour vous,
   ce que vous répondez au syndic. Le troisième temps est le différenciateur —
   il est traité comme les deux autres, sans mise en avant particulière, pour
   que le chapitre se lise comme une référence et non comme un argumentaire. */
.guide-chapter {
  padding-top: clamp(34px, 4vw, 52px)
}

.guide-chapter+.guide-chapter {
  margin-top: clamp(34px, 4vw, 52px);
  border-top: 1px solid var(--line)
}

.guide-chapter__num {
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: var(--asc-text-overline);
  font-weight: 800
}

/* Neutralise le centrage et la mesure de .section h2 : dans une colonne de
   lecture, un titre centré à 720px casse l'alignement du corps de texte. */
.guide-chapter h2 {
  margin: 10px 0 0;
  max-width: none;
  font-size: var(--asc-text-h1);
  letter-spacing: -.035em;
  line-height: 1.15;
  text-align: left;
  color: var(--ink)
}

.guide-step {
  margin-top: 26px
}

.guide-step h3 {
  margin: 0 0 8px;
  font-size: var(--asc-text-h4);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink)
}

.guide-step p {
  margin: 0;
  font-size: var(--asc-text-base);
  line-height: 1.65;
  color: var(--asc-text-secondary)
}

/* Lien vers le satellite, quand le chapitre en a un. Reprend la carte
   .cross-link telle quelle, seul l'espacement change. */
.guide-chapter__more {
  margin-top: 28px
}

/* --- Encart de repères ----------------------------------------------------
   Les chiffres de secteur ne suivent pas la trame en trois temps : il n'y a
   rien à répondre à un syndic sur un chiffre de parc. D'où l'encart, hors
   numérotation. Chiffres statiques : le guide de style exclut les compteurs
   animés. */
.guide-chapter--aside {
  margin-top: clamp(34px, 4vw, 52px);
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--asc-radius-xl);
  background: var(--asc-bg-subtle)
}

.guide-chapter--aside>p {
  margin: 12px 0 0;
  font-size: var(--asc-text-base);
  line-height: 1.65;
  color: var(--asc-text-secondary)
}

.guide-figures {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px
}

.guide-figures li {
  padding-left: 18px;
  position: relative;
  font-size: var(--asc-text-base);
  line-height: 1.6;
  color: var(--asc-text-secondary)
}

.guide-figures li:before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue)
}

.guide-figures b {
  color: var(--ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums
}

/* --- Sources --------------------------------------------------------------
   Bloc unique consolidé en fin de page plutôt qu'une note par chapitre :
   les mêmes deux textes servent les trois chapitres. */
.guide-sources__title {
  margin: 0 0 10px;
  font-size: var(--asc-text-h2);
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--ink)
}

.guide-sources-section .asc-note {
  font-size: var(--asc-text-base);
  line-height: 1.7
}