/* Hallmark · shape: Narrative Workflow (redesign full) · genre: modern-minimal · theme: brand · redesign: full · job: sign up, the action in the nav, the hero, the plans and the close
 * paper: oklch(99.4% 0.003 300) · accent: oklch(46% 0.21 295) · display: Geist · body: Geist · hero: Stage (text on 5, the real dashboard on 7, bleeding right) · nav: edge-aligned · footer: mast · signature: the real « relances du jour » dashboard, ready to validate, on the first screen
 * axes: light/grotesk-sans/chromatic-violet · posture: quiet · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: S, the steps could belong to any inbox tool; each stage shows its own real screen and the proof table carries named results from published sources */
@import url("./tokens.css?v=20261027zb");
@import url("./base.css?v=20261027i");

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Variable.woff2") format("woff2-variations"), url("/assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}



/* ---------- Chrome ---------- */
/* Le nom Ficiel dans une phrase ou un titre : la tuile devant, à la hauteur des capitales, comme Claude ou Trustpilot. */
.ficiel-en-ligne, .claude-en-ligne { white-space: nowrap; }
.ficiel-en-ligne img { display: inline-block; width: 0.82em; height: 0.82em; border-radius: 0.2em; vertical-align: -0.08em; margin-right: 0.16em; }
/* Pastille d'un assistant tiers : le logo nu et le nom dans une même pastille blanche bordée, comme sur plugkit.co.
   inline-block, pour que la ligne de base de la pastille soit celle du nom, donc celle de la phrase. */
.logo-en-ligne { display: inline-block; white-space: nowrap; padding: 0.06em 0.42em 0.08em 0.34em; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: 0.45em; box-shadow: var(--shadow-chip); line-height: 1.25; }
.logo-tuile { display: inline-block; vertical-align: -0.12em; margin-right: 0.24em; line-height: 0; }
.logo-tuile svg { width: 0.95em; height: 0.95em; display: block; }
.logo-tuile--claude { color: var(--color-claude); }
.logo-tuile--openai { color: var(--color-ink); }
.claude-en-ligne svg { display: inline-block; width: 0.8em; height: 0.8em; color: var(--color-claude); vertical-align: -0.08em; margin-right: 0.14em; }

/* Signature de marque : l'icône (tuile) à gauche, le nom en Geist à droite. L'icône fait 1,6 fois la taille du nom,
   les deux sont centrés sur le même axe ; le nom est remonté de 0,06 em pour que ce soit le corps des lettres
   (et non leur boîte, qui inclut la place des jambages) qui tombe au milieu de l'icône. */
.marque { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--color-ink); text-decoration: none; flex-shrink: 0; }
.marque__icone { width: 1.6em; height: 1.6em; display: block; flex-shrink: 0; }
.marque__nom { display: block; transform: translateY(-0.06em); }
a.marque:hover { color: var(--color-ink); }
a.marque:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 6px; }
.marque--grande { font-size: var(--text-section); }

/* Fond plein (31/10/2026, Abraham) : à 92 % le sélecteur des tarifs restait lisible à travers le header. */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav__inner { display: flex; align-items: center; gap: var(--space-lg); min-height: 68px; }
.nav__links { display: flex; gap: var(--space-xl); margin-left: auto; list-style: none; padding: 0; margin-block: 0; }
.nav__links a { white-space: nowrap; text-decoration: none; color: var(--color-muted); font-size: var(--text-sm); transition: color var(--dur-micro) var(--ease-out); }
.nav__links a:hover { color: var(--color-ink); }
.nav .button { min-height: 44px; padding-inline: var(--space-md); font-size: var(--text-sm); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 52px; padding-inline: var(--space-lg);
  border-radius: var(--radius-control); border: 1px solid var(--color-accent);
  background: var(--color-accent); color: var(--color-accent-ink);
  font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.button:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.button[aria-disabled="true"], .button:disabled { opacity: 0.5; cursor: not-allowed; }
/* Flèche du bouton reprise de la landing d'origine (shared-styles.css, 28/09) : un carré blanc que la flèche
   traverse au survol et au focus seulement (boucle retirée le 27/10 : le carré vide ressemblait à un bug). */
.button--fleche { padding-right: var(--space-sm); gap: var(--space-sm); }
.button__icone { box-sizing: border-box; width: 1.71em; height: 1.71em; border-radius: 7px; background: var(--color-accent-ink); color: var(--color-accent); overflow: hidden; flex-shrink: 0; }
.button__icone path { transform-box: view-box; transform-origin: 12px 12px; transform: scale(0.555); stroke-width: 3.6; }
/* 28/10 (Abraham) : la flèche avance toute seule, en boucle ; le survol ne la touche plus, il fait passer un reflet
   violet clair sur le bouton (le fond reste violet uni, le reflet n'est qu'un passage). */
.button--fleche .button__icone path { animation: fleche-boucle 2.8s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
.button.button--fleche { background-image: linear-gradient(105deg, transparent 35%, rgba(214, 190, 255, 0.55) 50%, transparent 65%); background-size: 250% 100%; background-position: 140% 0; background-repeat: no-repeat; }
.button.button--fleche:hover, .button.button--fleche:focus-visible { animation: bouton-reflet 1100ms cubic-bezier(0.45, 0, 0.55, 1) 1; }
@keyframes fleche-boucle { 0%, 70% { transform: translateX(0) scale(0.555); } 82% { transform: translateX(18px) scale(0.555); } 82.01% { transform: translateX(-18px) scale(0.555); } 100% { transform: translateX(0) scale(0.555); } }
@keyframes bouton-reflet { from { background-position: 140% 0; } to { background-position: -40% 0; } }
@keyframes fleche-traverse { 0% { transform: translateX(0) scale(0.555); } 42% { transform: translateX(18px) scale(0.555); } 42.01% { transform: translateX(-18px) scale(0.555); } 100% { transform: translateX(0) scale(0.555); } }
@media (prefers-reduced-motion: reduce) { .button__icone path { animation: none; } .button--fleche:hover, .button--fleche:focus-visible { animation: none; } }
.link { color: var(--color-accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.link:hover { color: var(--color-accent-deep); }
.link:active { color: var(--color-ink); }

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-3xl) var(--space-lg); overflow-x: clip; overflow-y: visible; } /* ⚠️ jamais clip en hauteur : l'ombre du tableau était coupée net au bas du hero (une barre, 27/10) */
.hero__grid { min-block-size: min(calc(100svh - 68px - var(--space-3xl) - var(--space-lg)), 640px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.hero__text { display: grid; gap: var(--space-lg); justify-items: start; }
.hero h1 { max-width: none; font-size: clamp(2.5rem, 3.4vw + 0.4rem, 3.5rem); }
@media (min-width: 60rem) { .titre__ligne { white-space: nowrap; } }
/* Titre repris de app.ficiel.io/start (PromesseAnimee, ecran-entree.tsx) : même horloge de 3,4 s.
   « L'argent » respire en violet, « réveille » fait un pop avec ses sept éclats au moment où l'autre est au plus bas. */
.titre__ligne { display: block; }
.titre__argent { color: var(--color-accent); animation: respire 3.4s ease-in-out 1; }
.titre__reveil { position: relative; display: inline-block; animation: pop 3.4s ease-out 1; }
.titre__rayons { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.titre__rayons span { position: absolute; display: block; width: 2px; height: 8px; border-radius: var(--radius-pill); background: var(--color-accent); opacity: 0; animation: jaillit 3.4s ease-out 1 both; }
@keyframes respire { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes pop { 0%, 44% { transform: scale(1); } 52% { transform: scale(1.045); } 62%, 100% { transform: scale(1); } }
@keyframes jaillit {
  0%, 44% { opacity: 0; transform: rotate(var(--angle)) translateY(-0.55em) scaleY(0.4); }
  53% { opacity: 0.9; transform: rotate(var(--angle)) translateY(-1em) scaleY(1); }
  66%, 100% { opacity: 0; transform: rotate(var(--angle)) translateY(-1.35em) scaleY(0.5); }
}
@media (prefers-reduced-motion: reduce) { .titre__argent, .titre__reveil, .titre__rayons span { animation: none; } }
.hero .lead { color: var(--color-ink-2); max-width: 30ch; }
.hero__terms { font-size: var(--text-sm); color: var(--color-muted); margin-top: calc(var(--space-xs) * -1); line-height: 1.55; }
.hero__terms strong { font-weight: 500; color: var(--color-ink-2); }
.canaux { display: flex; gap: var(--space-xs); }
.canal { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-card); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }
.canal svg { width: 24px; height: 24px; }
.canal--li { color: var(--color-linkedin); }
.clients { display: inline-flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-xs); padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xs); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); box-shadow: var(--shadow-chip); }
.clients__faces { display: inline-flex; flex-shrink: 0; }
.clients__faces img { width: 30px; height: 30px; border-radius: var(--radius-pill); border: 2px solid var(--color-paper); object-fit: cover; }
.clients__faces img + img { margin-left: calc(var(--space-sm) * -1); }
.clients__text { font-size: var(--text-sm); color: var(--color-ink-2); font-weight: 400; }
.hero__figure { margin: 0; width: 100%; justify-self: start; }
.hero__figure img, .shot img { border-radius: var(--radius-card); box-shadow: var(--shadow-figure); background: var(--color-paper); }
 /* Hero centré (27/10, façon sweepit.ai / plugkit.co) : le texte au centre, l'écrin en grand dessous. */
.hero__grid { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; text-align: center; min-block-size: 0 !important; gap: var(--space-lg) !important; }
.hero { padding-bottom: var(--space-2xl) !important; }
.hero__text { justify-items: center; }
.hero .lead { margin-inline: auto; max-width: 40ch; }
.hero .canaux { justify-content: center; }
.hero__figure { width: min(1080px, 100%) !important; justify-self: center !important; }
/* Écrin du tableau de bord du hero, façon sweepit.ai : la capture posée sur un fond violet doux, inclinée en
   perspective puis redressée au défilement (animation liée au défilement là où le navigateur la connaît, sinon droite). */
.hero__figure { perspective: 1600px; }
.hero__ecrin { display: block; transform-origin: center bottom; }
.hero__ecrin img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); box-shadow: 0 48px 96px -28px rgb(52 18 120 / 0.38), 0 22px 44px -22px rgb(20 10 40 / 0.30), 0 2px 6px rgb(40 20 80 / 0.10); }
@supports (animation-timeline: scroll()) {
  .hero__ecrin { animation: ecrin-redresse linear both; animation-timeline: scroll(root); animation-range: 0px 420px; }
}
@keyframes ecrin-redresse { from { transform: rotateX(16deg) rotateY(-8deg) scale(0.94); } to { transform: rotateX(0deg) rotateY(0deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero__ecrin { animation: none; transform: none; } }
/* Inclinaison 3D inversée au survol (27/10, Abraham) : posée sur l'IMAGE, pas sur l'écrin,
   pour s'ajouter au redressement au défilement (qui anime l'écrin) sans l'écraser.
   Le point sous le curseur vient vers soi, le côté opposé recule. Plafond : 7 degrés. */
.hero__ecrin { transform-style: preserve-3d; }
.hero__ecrin img { transform: perspective(1400px) rotateX(var(--incl-x, 0deg)) rotateY(var(--incl-y, 0deg)); transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.hero__ecrin.is-suivi img { transition: transform 140ms ease-out; }
@media (prefers-reduced-motion: reduce) { .hero__ecrin img { transform: none; transition: none; } }
.caption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- Sections ---------- */
.section { padding-block: var(--section-gap) 0; }
.section--serre { padding-block-start: var(--space-lg); }
.head--centre { margin-inline: auto; text-align: center; justify-items: center; }
.claude { max-width: 860px; margin-inline: auto; }
.section--l { padding-block-start: var(--section-gap-l); }
.head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); max-width: 760px; }
.head .lead { color: var(--color-muted); }

/* Fondu du fond du hero vers la page, comme plugkit.co : le fond s'efface sur le dernier tiers. */
.hero { position: relative; }
.hero__fondu { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--color-paper) 92%); }
.hero .fond-aurora__contenu { z-index: 2; }

/* Bandeau des clients : plus petit que celui de la prod, un peu plus rapide (une rangée, 36 s la boucle), fondu sur les bords. */
.bande { padding-block: var(--space-lg) var(--space-xl); }
.bande__titre { font-size: var(--text-xl); font-weight: 600; text-align: center; max-width: none; margin-bottom: var(--space-lg); }
.bande__cadre { position: relative; overflow: hidden; padding-block: var(--space-md); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%); }
.bande__piste { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-md); width: max-content; animation: bande-defile 48s linear infinite; }
.bande__client { display: inline-flex; align-items: center; gap: var(--space-sm); white-space: nowrap; padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); }
.bande__ids { display: grid; line-height: 1.2; }
.bande__pseudo { display: inline-flex; align-items: center; gap: var(--space-2xs); font-weight: 600; color: var(--color-ink); font-size: var(--text-sm); }
.bande__nom { font-style: italic; font-size: var(--text-xs); color: var(--color-muted); }
.bande__badge { width: 15px; height: 15px; color: var(--color-instagram-badge); flex-shrink: 0; }
.bande__ig { width: 20px; height: 20px; margin-left: var(--space-sm); flex-shrink: 0; }
.bande__client img { width: 40px; height: 40px; border-radius: var(--radius-pill); object-fit: cover; }
@keyframes bande-defile { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--space-md) / 2)); } }
@media (prefers-reduced-motion: reduce) { .bande__piste { animation: none; flex-wrap: wrap; justify-content: center; width: auto; row-gap: var(--space-md); } .bande__client[aria-hidden="true"] { display: none; } }

.trustpilot { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-ink); font-weight: 600; text-decoration: none; line-height: 1; }
.trustpilot svg { display: block; }
.trustpilot svg { color: var(--color-star); }
.trustpilot:hover { color: var(--color-star); }

/* Preuve : une citation en statement, puis les résultats publiés en tableau */
.quote { margin: 0; display: grid; gap: var(--space-md); max-width: 1000px; }
.quote p { font-family: var(--font-display); font-size: var(--text-section); font-weight: 600; line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.quote footer { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-muted); font-size: var(--text-md); }
.quote footer img { width: 44px; height: 44px; border-radius: var(--radius-pill); object-fit: cover; }
.results { width: 100%; border-collapse: collapse; margin-top: var(--space-2xl); }
.results th { text-align: left; font-weight: 400; font-size: var(--text-sm); color: var(--color-muted); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.results td { padding: var(--space-md) var(--space-md) var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: middle; }
.results td:first-child { font-weight: 600; }
.results .who { display: flex; align-items: center; gap: var(--space-sm); }
.results .who img { width: 36px; height: 36px; border-radius: var(--radius-pill); object-fit: cover; }
.results .role { color: var(--color-muted); font-weight: 400; font-size: var(--text-sm); }
.results .figure { font-variant-numeric: tabular-nums; font-size: var(--text-title); font-weight: 600; letter-spacing: -0.02em; color: var(--color-ink); }

.stars { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.stars svg { width: 96px; height: 18px; color: var(--color-star); }

.avis { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin: 0 auto var(--space-3xl); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-figure); display: grid; gap: var(--space-lg); }
.avis__tete { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.avis__etoiles { width: 96px; height: 18px; color: var(--color-star); }
.avis__note { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); line-height: 1; }
.avis__fenetre { overflow: hidden; }
.avis__liste { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; transition: transform 700ms var(--ease-in-out); }
.avis__item { flex: 0 0 100%; min-width: 0; display: grid; gap: var(--space-lg); align-content: space-between; padding-right: var(--space-xs); }
.avis__resultat { font-size: var(--text-2xl); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; max-width: none; }
.avis__citation { margin: 0; }
.avis__citation p { font-size: var(--text-2xl); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; max-width: none; }
.avis__qui { display: flex; align-items: center; gap: var(--space-sm); }
.avis__qui img { width: 48px; height: 48px; border-radius: var(--radius-pill); object-fit: cover; }
.avis__qui > span { display: grid; }
.avis__nom { display: inline-flex; align-items: center; gap: var(--space-2xs); font-weight: 600; }
.avis__badge { width: 16px; height: 16px; color: var(--color-accent); }
.avis__points { display: flex; gap: var(--space-xs); justify-content: center; }
.avis__point { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--color-rule); transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.avis__point.is-active { background: var(--color-accent); transform: scale(1.25); }
.videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl); }
.video { display: grid; gap: var(--space-lg); align-content: start; }
.video__lecteur { position: relative; }
.video video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--radius-card); background: var(--color-ink); box-shadow: var(--shadow-figure); }
.video__play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; display: grid; place-items: center; border: 0; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 8px 24px rgb(60 20 140 / 0.35); cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out); }
.video__play svg { width: 30px; height: 30px; margin-left: 4px; }
.video__play:hover { background: var(--color-accent-deep); transform: scale(1.06); }
.video__play:active { transform: scale(0.97); }
.video__play:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.video__lecteur.is-lu .video__play { display: none; }
.video__body { display: grid; gap: var(--space-md); align-content: start; }
.video__figure { font-size: var(--text-title); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.video__quote { margin: 0; }
.video__quote p { font-size: var(--text-lead); line-height: 1.35; color: var(--color-ink-2); }
.who { display: flex; align-items: center; gap: var(--space-sm); font-weight: 600; }
.who__badge { display: inline-block; width: 15px; height: 15px; margin-left: 4px; vertical-align: -2px; color: var(--color-instagram-badge); }
.who img { width: 36px; height: 36px; border-radius: var(--radius-pill); object-fit: cover; }
.role { color: var(--color-muted); font-weight: 400; font-size: var(--text-sm); }
.transcript summary { cursor: pointer; font-size: var(--text-sm); color: var(--color-accent); font-weight: 600; }
.transcript summary:hover { color: var(--color-accent-deep); }
.transcript summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.transcript p { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-xs); }

/* Étapes : le moniteur collant de la landing d'origine, l'écran change au passage de chaque étape */
.etapes { display: flex; flex-direction: column; gap: var(--space-2xl); }
.etapes__textes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xl); }
.etapes__visuel { display: none; }
.etape { position: relative; display: flex; flex-direction: column; gap: var(--space-sm); }
.etape__milieu { position: absolute; top: 50%; left: 0; width: 1px; height: 1px; pointer-events: none; }
.etape__num { font-size: var(--text-title); font-weight: 600; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.etape h3 { font-size: var(--text-2xl); }
.etape p { color: var(--color-muted); font-size: var(--text-lg); }
.etape__visuel { margin-top: var(--space-md); }
.ecran-panneau { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-card); background-color: var(--color-paper-2); background-image: radial-gradient(var(--color-rule) 1.1px, transparent 1.2px); background-size: 18px 18px; padding: var(--space-xl); }
.ecran { margin: 0; width: 100%; flex: 0 0 auto; display: flex; flex-direction: column; }
.ecran__cadre { position: relative; aspect-ratio: 1600 / 845; border: 4px solid var(--color-screen); border-radius: 8px; background: var(--color-screen); overflow: hidden; box-shadow: var(--shadow-figure); }
.ecran__capture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.ecran__capture--colonne { width: 68%; object-position: center; }
.ecran__pied { width: 100%; }
.ecran__pied::before, .ecran__pied::after { content: ""; display: block; margin-inline: auto; }
.ecran__pied::before { width: 22%; height: 84px; background: linear-gradient(180deg, var(--color-stand-1) 0%, var(--color-stand-2) 100%); }
.ecran__pied::after { width: 40%; height: 12px; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, var(--color-stand-2) 0%, var(--color-stand-3) 100%); }
@media (min-width: 900px) {
  .etapes { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-2xl); align-items: start; }
  .etapes__visuel { display: block; position: sticky; top: calc(68px + var(--space-lg)); }
  .etape__visuel { display: none; }
  .etape { min-height: 62vh; justify-content: center; }
  .etapes__visuel .ecran__capture { opacity: 0; transition: opacity 300ms var(--ease-out); }
  .etapes__visuel .ecran__capture.is-active { opacity: 1; }
}

/* Claude : split, texte sur 7, l'écran réel sur 5 */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; background: var(--color-paper-3); border-radius: var(--radius-card); padding: var(--space-3xl); }
.split__text { display: grid; gap: var(--space-lg); justify-items: start; }
.split__text .lead { color: var(--color-ink-2); }
.split__figure { margin: 0; justify-self: center; max-width: 340px; }
.split__figure img { border-radius: var(--radius-card); box-shadow: var(--shadow-figure); }

/* Tarifs : switcher + tableau */
.switch { display: inline-flex; padding: var(--space-2xs); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-2); margin-bottom: var(--space-xl); }
.switch button { white-space: nowrap; border: 0; background: transparent; color: var(--color-muted); padding: var(--space-xs) var(--space-md); min-height: 44px; border-radius: var(--radius-pill); cursor: pointer; font-weight: 400; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.switch button:hover { color: var(--color-ink); }
.switch button:active { transform: translateY(1px); }
.switch button[aria-checked="true"] { background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-chip); }
.switch button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.switch small { color: var(--color-accent); font-size: var(--text-xs); margin-left: var(--space-2xs); }
.plans { width: 100%; border-collapse: collapse; table-layout: fixed; }
.plans th, .plans td { text-align: left; padding: var(--space-md) var(--space-lg) var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
.plans thead th { border-bottom-color: var(--color-ink); padding-bottom: var(--space-lg); }
.plans thead th:first-child, .plans tbody th { width: 30%; font-weight: 400; font-size: var(--text-sm); color: var(--color-muted); }
.plan__name { display: block; font-size: var(--text-title); font-weight: 600; letter-spacing: -0.02em; color: var(--color-ink); }
.plan__for { display: block; font-size: var(--text-sm); color: var(--color-muted); font-weight: 400; margin-top: var(--space-2xs); }
.price { white-space: nowrap; display: block; font-size: var(--text-3xl); font-weight: 600; letter-spacing: -0.03em; color: var(--color-ink); margin-top: var(--space-md); font-variant-numeric: tabular-nums; }
.price small { font-size: var(--text-md); font-weight: 400; color: var(--color-muted); letter-spacing: 0; }
.price__note { display: block; font-size: var(--text-sm); color: var(--color-muted); font-weight: 400; margin-top: var(--space-2xs); }
.plans .button { margin-top: var(--space-lg); min-height: 48px; }
.plans .button--ghost { background: var(--color-paper); color: var(--color-accent); }
.plan__badge { display: inline-block; margin-left: var(--space-2xs); padding: 3px 10px; border-radius: 999px; background: var(--accent-tint); color: var(--color-accent); font-size: var(--text-xs, 0.75rem); font-weight: 600; letter-spacing: 0; vertical-align: middle; white-space: nowrap; }
.plans .button--ghost:hover { background: var(--color-paper-3); color: var(--color-accent-deep); }
.custom { margin-top: var(--space-xl); color: var(--color-muted); }
.limits { margin-top: var(--space-lg); font-size: var(--text-md); font-weight: 500; color: var(--color-ink-2); max-width: 80ch; }
[data-interval="monthly"] .is-yearly, [data-interval="yearly"] .is-monthly { display: none; }

/* FAQ : lignes repliées */
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq details:first-child { border-top: var(--rule-hair) solid var(--color-rule); }
.faq summary { cursor: pointer; list-style: none; padding: var(--space-lg) 0; font-size: var(--text-title); font-weight: 600; letter-spacing: -0.01em; display: flex; justify-content: space-between; gap: var(--space-md); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--color-accent); font-weight: 400; transition: transform var(--dur-short) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--color-accent); }
.faq summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.faq details p { padding-bottom: var(--space-lg); color: var(--color-ink-2); }

/* Clôture : bande */
.close { margin-top: var(--section-gap); background: var(--color-ink); color: var(--color-paper); padding-block: var(--section-gap-s); }
.close__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; }
.close h2 { color: var(--color-paper); }
.close .lead { color: color-mix(in oklab, var(--color-paper) 72%, var(--color-ink)); margin-top: var(--space-md); }
.close__action { display: grid; gap: var(--space-sm); justify-items: start; }
.close__action p { font-size: var(--text-sm); color: color-mix(in oklab, var(--color-paper) 64%, var(--color-ink)); }

/* Pied : mast */
.footer { padding-block: var(--space-3xl) var(--space-2xl); }
.footer__canon { margin-top: var(--space-lg); max-width: 60ch; color: var(--color-muted); }
.footer__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.footer__cols ul p, .footer__cols div > p { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-sm); }
.footer__cols p { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-sm); }
.footer__cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-xs); }
.footer__cols a { text-decoration: none; font-size: var(--text-sm); }

.langue { display: inline-flex; padding: var(--space-3xs); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper-2); }
.langue a { padding: var(--space-2xs) var(--space-sm); border-radius: 8px; text-decoration: none; font-size: var(--text-sm); color: var(--color-muted); font-weight: 600; }
.langue a[aria-current] { background: var(--color-paper); color: var(--color-accent); box-shadow: var(--shadow-chip); }
.langue a:hover { color: var(--color-ink); }
.langue a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.footer__legal { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); flex-wrap: wrap;  margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- Petits écrans ---------- */
@media (max-width: 80rem) {
  .nav__links { gap: var(--space-md); }
}
@media (max-width: 60rem) {
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav__links { display: none; }
  .nav .button { margin-left: auto; }
  .hero__grid, .split, .close__inner, .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-block: var(--space-2xl) var(--space-xl); }
  .hero__grid { min-block-size: 0; }
  .hero__grid { gap: var(--space-xl); }
  .hero__figure { width: 100%; }
  .avis { padding: var(--space-lg); }
  .avis__citation p, .avis__resultat { font-size: var(--text-xl); }
  .split { padding: var(--space-xl) var(--space-lg); gap: var(--space-xl); }
  .results thead { display: none; }
  .results tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
  .results td { display: block; border: 0; padding: 0; }
  .plans thead tr, .plans tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .plans thead th:first-child { display: none; }
  .plans tbody th { grid-column: 1 / -1; width: auto; border: 0; padding: var(--space-sm) 0 0; }
  .plans th, .plans td { padding-right: 0; }
  .plans tbody td { border: 0; padding-block: var(--space-2xs) var(--space-sm); }
  .plans thead th { border: 0; }
  .plans thead tr { border-bottom-color: var(--color-ink); padding-top: var(--space-md); }
  /* Sur téléphone la pastille passe AU-DESSUS du nom : sous le nom, elle décalait la colonne Intégral (27/10). */
  .plans thead th { position: relative; }
  .plan__badge { position: absolute; left: 0; top: -12px; margin-left: 0; }
  .plans .price:not(.is-yearly):not(.is-monthly) { white-space: normal; }
}
@media (max-width: 40rem) {
  .nav .button { padding-inline: var(--space-sm); }
  .clients__faces img:nth-child(n+6) { display: none; }
  .footer__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .plans thead tr, .plans tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .price { font-size: var(--text-xl); }
  .plans .button { padding-inline: var(--space-sm); width: 100%; }
  .switch small { display: none; }
}

/* ---------- Finition du 27/10 ---------- */
.plans thead .button { white-space: nowrap; max-width: 100%; }
@media (max-width: 75rem) {
  /* Colonnes de tarifs étroites sur ordinateur : le libellé passe sur deux lignes au lieu de toucher le voisin */
  .plans thead .button { white-space: normal; text-align: center; justify-content: center; line-height: 1.2; width: 100%; }
  .plans thead .button .button__icone { display: none; }
}
@media (max-width: 47.99rem) {
  /* Trois colonnes étroites : le libellé passe sur deux lignes, centré, sans la flèche */
  .plans thead .button { white-space: normal; text-align: center; justify-content: center; line-height: 1.2; min-height: 48px; padding: var(--space-xs); font-size: var(--text-xs); width: 100%; }
  .plans thead .button .button__icone { display: none; }
}
@media (max-width: 47.99rem) {
  /* Header : logo seul, le bouton arrive quand celui du hero est sorti de l'écran */
  .nav .button { display: none; }
  .nav.is-cta .button { display: inline-flex; white-space: nowrap; padding-inline: var(--space-sm); font-size: var(--text-xs); min-height: 40px; }
  .nav.is-cta .button .button__icone { display: none; }
  /* Vidéos : carrousel horizontal, la suivante dépasse */
  .videos { display: flex; grid-template-columns: none; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-md); margin-inline: calc(var(--space-md) * -1); padding-inline: var(--space-md); scrollbar-width: none; }
  .videos::-webkit-scrollbar { display: none; }
  .video { flex: 0 0 82%; scroll-snap-align: start; }
  /* Étapes : la capture seule, recadrée sur la zone utile, sans écran ni pied */
  .etape__visuel .ecran-panneau { background: none; padding: 0; }
  .etape__visuel .ecran__pied { display: none; }
  .etape__visuel .ecran__cadre { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); aspect-ratio: var(--crop-ratio); }
  .etape__visuel .ecran__capture { inset: auto; left: 0; top: 0; width: calc(100% / var(--crop-w)); height: auto; max-width: none; transform: translate(calc(var(--crop-x) * -100%), calc(var(--crop-y) * -100%)); }
  .etape--1 { --crop-w: 0.35; --crop-x: 0.5; --crop-y: 0.13; --crop-ratio: 560 / 608; }
  .etape--2 { --crop-w: 0.30; --crop-x: 0; --crop-y: 0.02; --crop-ratio: 480 / 507; }
  .etape--3 { --crop-w: 0.39; --crop-x: 0.08; --crop-y: 0.50; --crop-ratio: 624 / 414; }
}
@media (prefers-reduced-motion: reduce) { .nav .button, .video__play { transition: none; } }
.stats { padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.stats[hidden], .stats__cellule[hidden] { display: none; }
.stats__titre { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); margin: 0 auto var(--space-md); max-width: none; }
.stats__pastille { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--color-success, #16a34a); }
.stats__ligne { display: flex; justify-content: center; gap: var(--space-3xl); margin: 0; flex-wrap: wrap; row-gap: var(--space-md); }
.stats__cellule { display: grid; justify-items: center; gap: var(--space-2xs); }
.stats__cellule dt { order: 2; font-size: var(--text-sm); color: var(--color-muted); }
.stats__cellule dd { order: 1; margin: 0; font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--color-ink); }
@media (max-width: 47.99rem) { .stats__ligne { gap: var(--space-lg); } .stats__cellule dd { font-size: var(--text-xl); } }

/* Survol des liens du header et du pied de page (27/10, Abraham) : une pastille violette
   transparente à la taille du texte, et le texte qui roule vers le bas. */
.nav__links a, .footer__cols li a { position: relative; display: inline-block; }
.nav__links a::before, .footer__cols li a::before { content: ""; position: absolute; inset: -3px -7px; border-radius: 7px; background: color-mix(in oklab, var(--color-accent) 12%, transparent); opacity: 0; transform: scale(0.92); transition: opacity var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); pointer-events: none; }
.nav__links a:hover::before, .footer__cols li a:hover::before, .nav__links a:focus-visible::before, .footer__cols li a:focus-visible::before { opacity: 1; transform: scale(1); }
.roule { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.roule > span, .roule::after { display: block; transition: transform 320ms cubic-bezier(0.65, 0, 0.35, 1); }
.roule::after { content: attr(data-texte); position: absolute; left: 0; right: 0; top: 0; transform: translateY(-100%); }
a:hover > .roule > span, a:focus-visible > .roule > span { transform: translateY(100%); }
a:hover > .roule::after, a:focus-visible > .roule::after { transform: translateY(0); }
.nav__links a:hover, .footer__cols li a:hover { color: var(--color-accent); }
@media (prefers-reduced-motion: reduce) { .roule > span, .roule::after { transition: none; } a:hover > .roule > span, a:focus-visible > .roule > span { transform: none; } .roule::after { display: none; } }

/* ---------- Menu des écrans étroits (27/10) ---------- */
.nav__menu { display: none; width: 44px; height: 44px; margin-left: auto; border: var(--rule-hair) solid var(--color-rule); border-radius: 10px; background: var(--color-paper); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.nav__menu span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--color-ink); transition: transform var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out); }
.nav.is-ouvert .nav__menu span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.is-ouvert .nav__menu span:nth-child(2) { opacity: 0; }
.nav.is-ouvert .nav__menu span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav__menu:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 60rem) {
  .nav__menu { display: inline-flex; }
  .nav .button { margin-left: 0; }
  .nav__inner { flex-wrap: nowrap; padding-block: 12px; min-height: 0; column-gap: var(--space-sm); }
  .nav.is-ouvert .nav__inner { flex-wrap: wrap; align-content: flex-start; }
  .nav.is-ouvert .nav__links { display: grid; order: 3; width: 100%; gap: var(--space-xs); padding-block: var(--space-sm) var(--space-md); margin: 0; }
  .nav.is-ouvert .nav__links a { font-size: var(--text-md); padding-block: var(--space-xs); }
}

/* ---------- Vidéos : jamais géantes en fenêtre étroite (27/10) ---------- */
@media (max-width: 47.99rem) { .video { flex: 0 0 min(82%, 320px); } }
@media (min-width: 48rem) and (max-width: 60rem) { .videos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); } }

/* ---------- Performance (27/10) ----------
   Mesuré : 11 images par seconde avec tous les effets, 60 sans. On allège sans changer le rendu. */
.bande__piste { will-change: transform; }
.fond-aurora::after { filter: none; }
.section, .close, .footer, .stats { content-visibility: auto; contain-intrinsic-size: auto 800px; }
/* La carte Claude touche le bas de sa section : content-visibility y coupait son ombre net (une ligne, 27/10). */
.section--ombre { content-visibility: visible; }

/* Aperçu animé des témoignages (27/10) : image WebP posée sur la vignette, visible pendant son tour seulement. */
.video__apercu { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-card); opacity: 0; transition: opacity 300ms var(--ease-out); pointer-events: none; }
.video__lecteur.is-apercu .video__apercu { opacity: 1; }
.video__lecteur.is-lu .video__apercu { display: none; }
.video__play { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .video__apercu { display: none; } }

/* Bouton WhatsApp du header (28/10, Abraham, sur le modèle de Sweep It) : une tuile blanche au logo vert, à côté du bouton
   principal, qui ouvre WhatsApp avec un message prérempli vers Abraham. */
.nav__whatsapp { display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper); box-shadow: var(--shadow-chip); transition: border-color var(--dur-micro) var(--ease-out); }
.nav__whatsapp:hover { border-color: #25D366; }
.nav__whatsapp:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.nav__whatsapp svg { display: block; }
@media (max-width: 60rem) {
  .nav__whatsapp { margin-left: auto; }
  .nav__whatsapp ~ .nav__menu, .nav__menu { margin-left: 0; }
}
@media (max-width: 60rem) { .nav__inner > .nav__whatsapp { order: 1; } .nav__inner > .nav__menu { order: 2; } .nav__inner > .button { order: 3; } .nav.is-ouvert .nav__links { order: 4; } }
/* Téléphone étroit, bouton principal affiché : logo, WhatsApp, menu et bouton ne tiennent pas avec le mot « ficiel ».
   Le logo seul reste ; les tuiles ne rétrécissent jamais (sinon le menu s'écrase et le bouton passe à la ligne). */
.nav__whatsapp, .nav__menu { flex-shrink: 0; }
@media (max-width: 26.25rem) { .nav.is-cta .marque__nom { display: none; } }

/* Prix fondateur (30/10/2026) : UNE pastille à côté du sélecteur Mensuel / Annuel, hors des cartes
   (retour d'Abraham : dans les cartes, elle désalignait les colonnes). */
/* Collé sous le header pendant la lecture des trois colonnes (31/10/2026, Abraham) :
   69px = hauteur du header, liseré compris, mesurée à 1280 et 390 px. */
.tarifs__haut { position: sticky; top: 69px; z-index: var(--z-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-bottom: var(--space-xl); padding-block: var(--space-sm); background: var(--color-paper); }
.tarifs__haut .switch { margin-bottom: 0; }
.plan__fondateur { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 6px 11px; border-radius: 999px; background: var(--accent-tint); color: var(--color-accent); font-size: var(--text-sm, 0.875rem); font-weight: 600; line-height: 1.3; }
.plan__fondateur-icone { flex: 0 0 auto; width: 15px; height: 15px; }

/* Grille du 02/11/2026 : sous le nom de l'Intégral, ce qu'il ajoute à l'Essentiel. */
.plan__plus { display: block; margin: 10px 0 0; font-size: 12px; line-height: 1.35; font-weight: 500; color: var(--color-ink-2, currentColor); opacity: 0.8; }
@media (max-width: 600px) { .plan__plus { display: none; } }