/* Outils EC · site vitrine (refonte 2026)
   Source des valeurs : Refonte SaaS 2026/handoff-claude-design (tokens v2 du 25/09/2026).
   Le bleu (--accent) sert UNIQUEMENT : bouton principal (1 par écran), liens, navigation active, focus, éclats,
   et le fond des scènes d'exemple des blocs de fonctionnalités (.feature .stage).
   Polices (choix de Patrick, 27/09/2026) : Inter pour tout le texte ; Nunito 900, la police du « Outils » du logo,
   en touche seulement (fins de titres, chiffres d'étapes, annotations). Jamais en texte courant, boutons, tableaux. */


:root {
  --ink: #0A0F1A;
  --g25: #FAFBFD; --g50: #F5F7FA; --g100: #F3F4F6; --g200: #E5E7EB; --g300: #D1D5DB;
  --g400: #9CA3AF; --g500: #6B7280; --g600: #4B5563; --g800: #1F2937;
  --line-soft: #F0F1F4;
  /* Pêche, complémentaire du bleu : #FFD8B8 en accent, version très claire pour les fonds de section. */
  --peach: #FFD8B8; --peach-soft: #FFF4EA; --peach-line: #FBE2CC;
  /* Bleu nuit des sections sombres (sécurité, appels à l'action) : garde le sérieux du noir, s'accorde au pêche. */
  --nuit: #0B1D45; --nuit-card: #13285A; --nuit-line: #1F3670;
  --accent: #0066FF; --accent-hover: #0052CC; --accent-subtle: #E6F0FF;
  --ok-bg: #D1FAE5; --ok-fg: #047857; --ok-dot: #10B981;
  --warn-bg: #FFF1E6; --warn-fg: #C2410C;
  --danger-bg: #FFEBEC; --danger-fg: #C2272D;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-accent: "Nunito", "Inter", sans-serif;
  --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px;
  --sh-card: 0 1px 2px rgba(10,15,26,.04);
  --sh-float: 0 24px 60px -24px rgba(10,15,26,.22);
  --sh-modal: 0 32px 80px -24px rgba(10,15,26,.35);
  --wrap: 1312px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--accent); border-radius: var(--r-sm); }
h1, h2 { margin: 0; font-weight: 700; text-wrap: balance; }
h3 { margin: 0; font-weight: 700; } /* pas de balance : un titre de carte remplit sa ligne avant de passer à la suivante */
p { margin: 0; text-wrap: pretty; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Mise en page */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 900px; margin: 0 auto; padding: 0 32px; }
.section { padding-block: 104px; }
.section-sm { padding-block: 80px; }
.subtle { background: var(--peach-soft); border-top: 1px solid var(--peach-line); }
.subtle-both { background: var(--peach-soft); border-top: 1px solid var(--peach-line); border-bottom: 1px solid var(--peach-line); }
.stack { display: flex; flex-direction: column; }
.gap-10 { gap: 10px; } .gap-14 { gap: 14px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; } .gap-28 { gap: 28px; } .gap-48 { gap: 48px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 300px), 100%), 1fr)); gap: var(--gap, 20px); }
/* 6 ou 9 cartes : 3 colonnes au plus, pour ne jamais laisser une dernière rangée à moitié vide (4 + 2). */
.grid:has(> :nth-child(6):last-child), .grid:has(> :nth-child(9):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(max(var(--min, 300px), 30%), 100%), 1fr)); }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 460px), 100%), 1fr)); gap: var(--gap, 56px); align-items: var(--align, center); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
@media (max-width: 640px) { .wrap, .wrap-narrow { padding: 0 16px; } .section { padding-block: 72px; } .section-sm { padding-block: 56px; } }

/* Titres */
.display { font-size: clamp(40px, 4.6vw, 60px); line-height: 1.08; letter-spacing: -0.02em; }
.h1-page { font-size: clamp(36px, 4vw, 52px); line-height: 1.1; letter-spacing: -0.02em; }
.h2 { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -0.02em; max-width: 1040px; }
.h2-sm { font-size: clamp(28px, 3vw, 38px); line-height: 1.15; letter-spacing: -0.02em; }
.h3 { font-size: 23px; letter-spacing: -0.01em; }
.accent-font { font-family: var(--font-accent); font-weight: 900; letter-spacing: -0.01em; }
.lead { font-size: 18px; line-height: 1.6; color: var(--g600); max-width: 960px; } /* règle Patrick : une phrase courte ne se coupe pas s'il reste de la place */
.muted { color: var(--g600); }
.small { font-size: 15px; }
.note { font-size: 14px; color: var(--g500); }
.on-dark { color: #fff; }

/* Boutons (texte qui nomme l'objet, jamais d'info au seul survol) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.3em; height: 44px; padding: 0 16px; border-radius: var(--r-md); font: 600 15px/1 var(--font); white-space: nowrap; cursor: pointer; border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s; }
.btn-lg { height: 52px; padding: 0 24px; font-size: 17px; }
.btn-md { height: 48px; padding: 0 20px; font-size: 16px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--g800); color: #fff; }
.btn-outline { background: #fff; color: var(--ink); border-color: var(--g200); }
.btn-outline:hover { border-color: var(--ink); color: var(--ink); }
.btn-ghost-light { color: #fff; border-color: #fff; }
.btn-ghost-light:hover { color: #fff; background: rgba(255,255,255,.08); }
.btn-block { width: 100%; }

/* Pastilles */
.eyebrow { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--g100); font-size: 14px; font-weight: 600; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.pill { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid var(--g200); border-radius: 999px; font-size: 14px; font-weight: 500; background: var(--g25); color: var(--ink); }
a.pill:hover { border-color: var(--accent); color: var(--accent); }
.status { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-ok { background: var(--ok-bg); color: var(--ok-fg); }
.checks { display: flex; gap: 24px; flex-wrap: wrap; font-size: 16px; font-weight: 500; color: var(--g600); }
.check { display: flex; align-items: flex-start; gap: 10px; }
.check svg { flex: none; margin-top: 3px; }

/* Cartes */
.card { background: #fff; border: 1px solid var(--g200); border-radius: var(--r-lg); padding: clamp(22px, 2.2vw, 32px); display: flex; flex-direction: column; gap: 16px; }
.card p { font-size: 16px; color: var(--g600); }
.card-row { flex-direction: row; align-items: flex-start; gap: 18px; padding: 24px; }
.icon-tile { width: 48px; height: 48px; flex: none; border-radius: var(--r-md); background: var(--g100); display: flex; align-items: center; justify-content: center; }
.icon-tile.sm { width: 44px; height: 44px; }
.panel { border: 1px solid var(--g200); border-radius: var(--r-xl); background: #fff; box-shadow: var(--sh-float); overflow: hidden; }
.panel-head { padding: 16px 20px; background: var(--g25); border-bottom: 1px solid var(--g200); display: flex; align-items: center; gap: 10px; }
.panel-row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line-soft); font-size: 15px; font-variant-numeric: tabular-nums; }

/* Étapes */
.step { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 2px solid var(--ink); }
.step-n { font-family: var(--font-accent); font-size: 44px; line-height: 1; font-weight: 900; }
.step p { font-size: 16px; color: var(--g600); }
.step-inline { display: flex; gap: 16px; align-items: flex-start; }
.step-inline .step-n { font-size: 32px; width: 28px; flex: none; }

/* Sources */
.sources { display: flex; align-items: center; gap: 16px 40px; padding-top: 32px; border-top: 1px solid var(--g200); flex-wrap: wrap; }
.sources b { font-size: 17px; color: var(--g600); }
/* Logos des sources : tous dans une boîte identique (140 × 36), centrés, sans déformation */
.sources .logos { display: grid; grid-template-columns: repeat(auto-fill, 150px); align-items: center; gap: 20px 8px; flex: 1; }
.sources .logos img { width: 140px; height: 36px; object-fit: contain; display: block; }
.sources .logos > img, .sources .logos .editeur-beta { justify-self: center; }
.sources + .sources { border-top: none; padding-top: 20px; }
.sources > .note { flex: 0 0 215px; } /* libellés de même largeur : les deux rangées de logos s'alignent */
.sources .editeur-beta { display: flex; align-items: center; gap: 6px; }
.sources .editeur-beta .beta { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: var(--accent-subtle); padding: 1px 6px; border-radius: 999px; }

/* Tarifs */
.tiers { display: flex; flex-direction: column; gap: 10px; font-size: 16px; color: var(--g600); }
.tier { display: flex; justify-content: space-between; max-width: 400px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
.tier b { color: var(--ink); }
.sim { border: 1px solid var(--g200); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 26px; box-shadow: 0 24px 60px -24px rgba(10,15,26,.18); }
.sim-n { font-size: 48px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.sim-price { display: flex; align-items: baseline; gap: 10px; padding-top: 22px; border-top: 1px solid var(--g200); flex-wrap: wrap; }
.sim-price strong { font-size: 56px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.sim input[type=range] { width: 100%; height: 32px; accent-color: var(--accent); }
.seg { display: inline-flex; padding: 4px; background: var(--g50); border-radius: var(--r-md); gap: 4px; }
.seg button { all: unset; cursor: pointer; height: 44px; padding: 0 16px; display: flex; align-items: center; border-radius: 9px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 2px rgba(10,15,26,.08); }

/* Bandeau d'appel final */
.cta-dark { background: var(--nuit); border-radius: var(--r-xl); padding: clamp(48px, 6vw, 72px) clamp(24px, 4vw, 48px); display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; color: #fff; }
.cta-dark.inline { flex-direction: row; text-align: left; flex-wrap: wrap; padding: 56px 40px; }
.cta-dark h2 { color: #fff; }

/* Fil d'Ariane */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; font-size: 14px; color: var(--g600); }
.crumbs a { color: var(--g600); }
.crumbs [aria-current] { color: var(--ink); }

/* FAQ en accordéon natif */
.faq { border-top: 1px solid var(--g200); }
.faq details { border-bottom: 1px solid var(--g200); }
.faq summary { list-style: none; cursor: pointer; min-height: 64px; display: flex; align-items: center; gap: 16px; font-size: 17px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; font-size: 22px; width: 24px; text-align: center; }
.faq details[open] summary::after { content: "−"; }
.faq .faq-a { margin: 0 0 20px; font-size: 16px; color: var(--g600); }
.faq .faq-a p + p { margin-top: 10px; }

/* Contenu long (pages éditoriales, légales, guides) */
.prose { font-size: 17px; line-height: 1.7; color: var(--g800); }
.prose h2 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); margin: 48px 0 16px; }
.prose h3 { font-size: 20px; color: var(--ink); margin: 32px 0 10px; }
.prose p, .prose ul, .prose ol, .prose table { margin: 0 0 16px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--g200); vertical-align: top; }
.prose th { background: var(--g25); font-weight: 600; }
.table-scroll { overflow-x: auto; }

/* En-tête */
.site-header { position: relative; z-index: 30; }
.site-header .bar { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; min-height: 80px; display: flex; align-items: center; gap: clamp(16px, 2.5vw, 40px); }
.site-header .logo { display: flex; flex: none; }
.site-header .logo img { height: 36px; display: block; }
.site-nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); font-size: 16px; font-weight: 500; flex: 1; min-width: 0; white-space: nowrap; }
.site-nav > a, .site-nav summary { color: var(--ink); min-height: 44px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.site-nav > a:hover, .site-nav summary:hover { color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--accent); }
.site-nav details { position: relative; }
.site-nav summary { list-style: none; }
.site-nav summary::-webkit-details-marker { display: none; }
.menu { position: absolute; top: 48px; left: -12px; width: 300px; background: #fff; border: 1px solid var(--g200); border-radius: var(--r-lg); padding: 8px; box-shadow: 0 24px 60px -24px rgba(10,15,26,.25); display: flex; flex-direction: column; white-space: normal; }
.menu a { padding: 10px 12px; border-radius: var(--r-sm); display: flex; flex-direction: column; color: var(--ink); font-size: 16px; }
.menu a:hover { background: var(--g50); color: var(--ink); }
.menu a small { font-size: 14px; color: var(--g600); font-weight: 400; }
.menu-more { display: none; }
.menu-more .menu { width: 260px; left: 0; }
.header-actions { display: flex; gap: 12px; flex: none; }
@media (max-width: 1180px) { .nav-opt { display: none !important; } .menu-more { display: block; } }
@media (max-width: 760px) { .nav-main { display: none !important; } .site-header .bar { padding: 0 16px; } }
@media (max-width: 480px) { .site-header .bar { gap: 12px; } .site-header .logo img { height: 30px; } .cta-long { display: none; } .header-actions .btn { padding: 0 14px; } }

/* Halo d'accueil (un seul, en haut de l'accueil) */
.halo { position: relative; overflow: hidden; }
.halo::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 820px; background: radial-gradient(ellipse 60% 70% at 78% 0%, rgba(0,102,255,.06), rgba(0,102,255,.02) 45%, rgba(255,255,255,0) 75%); pointer-events: none; }
.halo > * { position: relative; }

/* Assistant de l'accueil */
.assistant-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.annot { position: absolute; top: -58px; left: -8px; display: flex; align-items: flex-start; gap: 4px; pointer-events: none; }
.annot span { font-family: var(--font-accent); font-size: 22px; font-weight: 800; transform: rotate(-4deg); white-space: nowrap; }
.annot svg { margin-top: 8px; }
.assistant { width: min(570px, 100%); height: 480px; background: #fff; border: 1px solid var(--g200); border-radius: var(--r-xl); box-shadow: var(--sh-float), 0 2px 6px rgba(10,15,26,.04); display: flex; flex-direction: column; overflow: hidden; }
.as-head { height: 52px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 20px; border-bottom: 1px solid var(--g200); font-size: 14px; font-weight: 600; color: var(--g600); }
.as-body { flex: 1; min-height: 0; padding: 28px 28px 8px; display: flex; flex-direction: column; }
.as-welcome { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.as-welcome .t { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.as-sugg { display: flex; flex-wrap: wrap; gap: 8px; }
.as-sugg span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--g200); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--g600); background: var(--g25); }
.as-convo { display: flex; flex-direction: column; gap: 18px; }
.as-q { align-self: flex-end; max-width: 420px; background: var(--ink); color: #fff; padding: 14px 18px; border-radius: 18px 18px 4px 18px; font-size: 15px; font-weight: 500; line-height: 1.5; }
.as-bot { display: flex; gap: 12px; align-items: flex-start; }
.as-bot img { width: 32px; height: 32px; flex: none; }
.as-searching { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--g25); border: 1px solid var(--g200); border-radius: 4px 18px 18px 18px; font-size: 14px; font-weight: 600; color: var(--g600); }
.as-dots { display: flex; gap: 4px; }
.as-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .3; animation: asdot 1.1s infinite; }
.as-dots i:nth-child(2) { animation-delay: .37s; } .as-dots i:nth-child(3) { animation-delay: .74s; }
@keyframes asdot { 0%, 66%, 100% { opacity: .3; } 33% { opacity: 1; } }
.as-answer { flex: 1; background: var(--g25); border: 1px solid var(--g200); border-radius: 4px 18px 18px 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.as-answer .ok { font-family: var(--font-accent); font-size: 25px; font-weight: 800; line-height: 1.1; }
.as-answer .a { font-size: 15px; line-height: 1.55; color: var(--g600); }
.as-result { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--g200); border-radius: 14px; padding: 12px 14px; }
.as-result .tick { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--ok-bg); display: flex; align-items: center; justify-content: center; }
.as-result b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.as-result small { font-size: 14px; color: var(--g500); }
.as-result > div { flex: 1 1 160px; min-width: 0; }
.as-input { padding: 12px 20px 20px; flex: none; }
.as-input > div { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 8px 8px 18px; border: 1px solid var(--g200); border-radius: var(--r-lg); }
.as-typed { flex: 1; min-width: 0; font-size: 15px; line-height: 1.45; }
.as-typed .ph { color: var(--g500); }
.as-caret { display: inline-block; width: 2px; height: 18px; vertical-align: -3px; margin-left: 1px; background: var(--accent); animation: caret .76s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.as-send { width: 40px; height: 40px; flex: none; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: var(--g300); transition: background .2s; }
.as-send.on { background: var(--accent); }
.as-progress { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; width: min(570px, 100%); }
.as-progress button { height: 32px; padding: 0 13px; border: 1px solid var(--g200); border-radius: 999px; background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: var(--g600); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.as-progress button:hover { border-color: var(--accent); color: var(--accent); }
.as-progress button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 640px) { .annot { display: none; } .assistant { height: auto; min-height: 540px; } .as-body { padding: 20px 16px 8px; } .as-bot { gap: 8px; } .as-bot img { width: 24px; height: 24px; } .as-answer { padding: 16px; } .as-result { flex-wrap: wrap; } .as-result .status { margin-left: 44px; } }

/* Pied de page */
.site-footer { border-top: 1px solid var(--peach-line); background: var(--peach-soft); }
.site-footer .cols { max-width: var(--wrap); margin: 0 auto; padding: 56px 32px 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 40px; }
.site-footer .col { display: flex; flex-direction: column; gap: 4px; }
.site-footer .col b { font-size: 15px; margin-bottom: 6px; }
.site-footer .col a { font-size: 15px; color: var(--g600); min-height: 32px; display: flex; align-items: center; }
.site-footer .col a:hover { color: var(--accent); }
.site-footer .brand img { height: 28px; }
.site-footer .brand span { font-size: 15px; color: var(--g600); }
.site-footer .copy { max-width: var(--wrap); margin: 0 auto; padding: 20px 32px 32px; border-top: 1px solid var(--g200); font-size: 14px; color: var(--g500); display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.site-footer .copy a { color: var(--g500); }

/* Bandeau cookies : refuser et accepter strictement identiques */
/* Bandeau cookies compact en bas de l'écran : il ne masque plus les boutons du hero (24/10/2026) */
.cookies { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 40; width: min(1080px, calc(100vw - 32px)); padding: 14px 18px; border-radius: var(--r-lg, 16px); background: #fff; border: 1px solid var(--g200); box-shadow: var(--sh-modal); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 18px; }
.cookies[hidden] { display: none; }
.cookies .ck-icon { grid-row: span 2; width: 40px; height: 40px; transform: rotate(12deg); }
.cookies .ck-t { grid-column: 2; font-family: var(--font-accent); font-size: 18px; line-height: 1.2; font-weight: 900; }
.cookies p { grid-column: 2; font-size: 14px; line-height: 1.45; color: var(--g600); margin: 0; }
.cookies .ck-btns { grid-column: 3; grid-row: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cookies .ck-btns button { all: unset; cursor: pointer; height: 42px; padding: 0 16px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); border: 1.5px solid var(--ink); font-size: 15px; font-weight: 600; white-space: nowrap; }
.cookies .ck-btns button:hover { background: var(--g50); }
.cookies .ck-btns button:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--accent); }
.cookies > a { grid-column: 3; grid-row: 2; justify-self: center; font-size: 13px; }
@media (max-width: 760px) {
  .cookies { bottom: 10px; width: calc(100vw - 20px); padding: 12px 14px; grid-template-columns: 1fr; gap: 6px; }
  .cookies .ck-icon { display: none; }
  .cookies .ck-t { font-size: 16px; }
  .cookies .ck-t, .cookies p, .cookies .ck-btns, .cookies > a { grid-column: 1; grid-row: auto; }
  .cookies p { font-size: 13px; }
  .cookies .ck-btns { margin-top: 4px; }
  .cookies .ck-btns button { height: 40px; font-size: 14px; }
}

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

/* Phrases insécables (demande de Patrick, 27/09/2026) : une phrase ne se coupe pas en deux si la largeur suffit ;
   sinon le retour à la ligne se fait après le point. Le script de génération entoure chaque phrase des paragraphes
   courts d'un <span class="s">. Sur petit écran, texte normal. */
@media (min-width: 760px) { .s { display: inline-block; } }

/* Tarifs et Sécurité */
.gap-32 { gap: 32px; }
.halo-center::before { height: 520px; background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(0,102,255,.05), rgba(0,102,255,.015) 45%, rgba(255,255,255,0) 75%); }
.seg-lg { border-radius: 14px; margin-top: 8px; }
.seg-lg button { height: 48px; padding: 0 20px; font-size: 16px; border-radius: 11px; color: var(--g600); }
.seg-lg button[aria-selected="true"] { background: #fff; box-shadow: 0 1px 2px rgba(10,15,26,.08); color: var(--ink); }
.tier-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; }
.tier-tiles button { all: unset; box-sizing: border-box; cursor: pointer; text-align: left; border-radius: var(--r-md); padding: 10px 12px; background: var(--g25); border: 1px solid var(--g200); }
.tier-tiles button:hover { border-color: var(--g400, #94A3B8); }
.tier-tiles button:focus-visible { outline: 2px solid #0066FF; outline-offset: 2px; }
.tier-tiles button.on { background: #fff; border-color: var(--ink); }
.tier-tiles span { display: block; font-size: 14px; font-weight: 500; color: var(--g600); }
.tier-tiles b { font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.info-box { font-size: 15px; line-height: 1.6; color: var(--g600); background: var(--g25); border: 1px solid var(--g200); border-radius: 14px; padding: 16px 18px; }
.price-line { display: flex; align-items: baseline; gap: 6px; }
.price-line strong { font-size: 36px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price-line span { font-size: 15px; color: var(--g600); }
.table-card { border: 1px solid var(--g200); border-radius: var(--r-lg); overflow-x: auto; background: #fff; }
.compare { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 16px; }
.compare th, .compare td { text-align: left; padding: 16px 22px; border-bottom: 1px solid var(--line-soft); }
.compare thead th { font-size: 15px; font-weight: 600; border-bottom-color: var(--g200); }
.compare tbody th { font-weight: 500; width: 40%; }
.compare td { color: var(--g600); }
.compare tr:last-child > * { border-bottom: 0; }
.vault-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--g200); border-radius: 14px; }
.vault-row b { display: block; font-size: 16px; }
.vault-row small { font-size: 14px; color: var(--g600); }

/* Touches de bleu (demande de Patrick, 27/09/2026 : « trop strict, tout est noir »).
   Le bleu du logo sur les fins de titres, chiffres d'étapes, icônes, coches et filets. Le texte courant reste bleu nuit. */
.accent-font { color: var(--accent); }
.cta-dark .accent-font { color: #4D94FF; }   /* sur fond sombre, #0066FF manque de contraste */
.step-n { color: var(--accent); }
.step { border-top-color: var(--accent); }
.icon-tile { background: var(--accent-subtle); }
.icon-tile svg { stroke: var(--accent); }
.check svg { stroke: var(--accent); }
.as-welcome .accent-font { color: var(--accent); }
.site-footer .col b { color: var(--ink); }

/* ── DA site v2 (handoff Claude Design du 27/09/2026), en Inter + Nunito ── */
.u-blue { background: linear-gradient(transparent 62%, var(--peach) 62%, var(--peach) 92%, transparent 92%); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 4px; text-underline-offset: 9px; text-decoration-skip-ink: none; }
.cta-dark .u-blue, .dark .u-blue { text-decoration-color: var(--peach); background: none; }
.kicker { font-size: 15px; font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: 10px; }
.kicker .n { font-family: var(--font-accent); font-weight: 900; font-size: 20px; }
.btn-primary { box-shadow: 0 10px 24px -10px rgba(0,102,255,.6); }
.glow { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at center, rgba(255,216,184,.75), rgba(255,216,184,0) 62%); }
.rel { position: relative; overflow: hidden; }
.rel > .wrap, .rel > section, .rel > .inner { position: relative; }

/* Maquette de l'espace cabinet */
.mock-wrap { position: relative; flex: 1 1 560px; min-width: 0; max-width: 760px; }
.mock-annot { position: absolute; left: -8px; top: -44px; display: flex; align-items: flex-end; gap: 6px; z-index: 2; pointer-events: none; }
.mock-annot span { font-family: var(--font-accent); font-weight: 900; font-size: 22px; color: var(--accent); transform: rotate(-4deg); }
.mock { border: 1px solid var(--g200); border-radius: 20px; background: #fff; box-shadow: 0 40px 80px -32px rgba(10,15,26,.28), 0 2px 6px rgba(10,15,26,.04); overflow: hidden; }
.mock-bar { height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-bottom: 1px solid var(--g200); background: var(--g25); }
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--g200); }
.mock-bar span { flex: 1; text-align: center; font-size: 14px; color: var(--g500); }
.mock-body { display: flex; min-height: 420px; }
.mock-nav { width: 150px; flex: none; background: var(--g50); padding: 16px 10px; display: flex; flex-direction: column; gap: 4px; }
.mock-nav img { height: 20px; width: auto; align-self: flex-start; margin: 0 6px 12px; }
.mock-nav span { height: 32px; padding: 0 10px; border-radius: 8px; display: flex; align-items: center; font-size: 14px; font-weight: 500; color: var(--g600); }
.mock-nav span.on { background: #fff; color: var(--accent); font-weight: 600; }
.mock-main { flex: 1; min-width: 0; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.mock-main .hello { font-size: 19px; font-weight: 700; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kpis > div { border: 1px solid var(--g200); border-radius: var(--r-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.kpis small { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--g600); }
.kpis b { font-size: 24px; font-variant-numeric: tabular-nums; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.d-r { background: #EF4444; } .d-o { background: #F59E0B; } .d-g { background: #10B981; } .d-b { background: var(--accent); }
.mlist { border: 1px solid var(--g200); border-radius: var(--r-md); overflow: hidden; }
.mlist > div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.mlist > div:last-child { border-bottom: 0; }
.mlist .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mlist .who b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlist .who span { color: var(--g600); }
.tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.t-r { background: #FFEBEC; color: #C2272D; } .t-o { background: #FFF1E6; color: #C2410C; } .t-g { background: #D1FAE5; color: #047857; } .t-b { background: #E6F0FF; color: #0052CC; }
.progress { border: 1px solid var(--g200); border-radius: var(--r-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.progress .bar { height: 6px; border-radius: 999px; background: var(--g200); overflow: hidden; }
.progress .bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.toast { position: absolute; right: -12px; bottom: -22px; background: #fff; border: 1px solid var(--g200); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; box-shadow: 0 20px 40px -20px rgba(10,15,26,.3); }
.toast .ok { width: 32px; height: 32px; border-radius: 10px; background: var(--ok-bg); display: flex; align-items: center; justify-content: center; flex: none; }
.toast b { display: block; font-size: 14px; } .toast small { font-size: 14px; color: var(--g600); }
@media (max-width: 640px) { .mock-nav { display: none; } .mock-annot { display: none; } .toast { right: 8px; bottom: -28px; } .kpis b { font-size: 20px; } }

/* Bande de chiffres */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; padding-block: 40px; }
.stats > div { display: flex; flex-direction: column; gap: 6px; }
.stats b { font-size: 44px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.stats i { width: 28px; height: 4px; border-radius: 999px; background: var(--accent); }
.stats span { font-size: 16px; color: var(--g600); }

/* Blocs alternés texte / carte d'interface */
.feature { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.feature.rev { flex-direction: row-reverse; }
.feature .txt { flex: 1 1 420px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.feature .txt h2 { font-size: clamp(30px, 3vw, 40px); line-height: 1.12; letter-spacing: -0.02em; }
.feature .txt p { font-size: 18px; color: var(--g600); }
.feature .stage { flex: 1 1 440px; min-width: 0; border-radius: 24px; padding: clamp(20px, 3vw, 40px);
  /* Scène bleue derrière les cartes d'exemple (demande de Patrick, 27/09/2026) : dégradé de l'accent,
     halo clair en haut à gauche, carte blanche posée dessus avec une ombre plus marquée. */
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(135deg, #0052CC 0%, var(--accent) 45%, #4D94FF 100%); }
.feature .stage .ui-card { box-shadow: 0 30px 60px -20px rgba(0,30,90,.45), 0 2px 6px rgba(0,30,90,.12); }
.ui-card { background: #fff; border: 1px solid var(--g200); border-radius: var(--r-lg); box-shadow: 0 24px 48px -28px rgba(10,15,26,.25); overflow: hidden; }
.ui-card .head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--g200); }
.ui-card .head b { flex: 1; font-size: 16px; font-weight: 600; }
.ui-card .line { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); font-size: 15px; font-variant-numeric: tabular-nums; }
.ui-card .line:last-child { border-bottom: 0; }
.ui-card .line .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ui-card .line .who b { font-weight: 600; }
.ui-card .line .who span { font-size: 14px; color: var(--g600); }
.ui-card .line > span:last-child { font-weight: 500; white-space: nowrap; }
.pill-lg { height: 36px; padding: 0 14px; font-size: 15px; background: #fff; }

/* Étapes en tuiles */
.step-card { background: #fff; border: 1px solid var(--g200); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.step-card .num { width: 52px; height: 52px; border-radius: 16px; background: var(--accent-subtle); display: flex; align-items: center; justify-content: center; font-family: var(--font-accent); font-weight: 900; font-size: 28px; color: var(--accent); }
.step-card h3 { font-size: 21px; }
.step-card p { font-size: 16px; color: var(--g600); }

/* Section sécurité bleu nuit */
.dark { background: var(--nuit); color: #fff; }
.dark h2 { color: #fff; }
.dark .lead { color: #D1D5DB; }
.dark .glow { background: radial-gradient(circle, rgba(77,148,255,.22), rgba(77,148,255,0) 65%); }
.dark-card { background: var(--nuit-card); border: 1px solid var(--nuit-line); border-radius: var(--r-lg); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.dark-card b { font-size: 17px; font-weight: 600; color: #F3F4F6; }
.dark-card span { font-size: 15px; line-height: 1.55; color: #D1D5DB; }
.dark a.more { color: #4D94FF; font-weight: 600; min-height: 44px; display: flex; align-items: center; }

/* Encart prix et appel final */
.from-card { border: 1px solid var(--g200); border-radius: 24px; padding: 40px; display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; }
.from-card strong { font-size: 48px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.cta-light { position: relative; overflow: hidden; border: 1px solid var(--g200); border-radius: 24px; padding: 72px 40px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; background: #fff; }
.cta-light .glow { left: 50%; top: -320px; transform: translateX(-50%); width: 900px; height: 560px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,102,255,.12), rgba(0,102,255,0) 65%); }
.cta-light > *:not(.glow) { position: relative; }
@media (max-width: 640px) { .from-card, .cta-light { padding: 28px 20px; } }

/* Témoignages : vrais avis publiés via le webhook n8n (mêmes données que l'ancien site) */
.review { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.review-av { flex: 0 0 120px; height: 120px; border-radius: 50%; background: var(--accent-subtle); color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-accent); font-weight: 900; font-size: 40px; overflow: hidden; }
.review-av img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 16px; }
.review-stars { color: #F59E0B; font-size: 20px; letter-spacing: 3px; }
.review blockquote { margin: 0; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; text-wrap: pretty; transition: opacity .3s; }
.review blockquote::before, .review blockquote::after { color: var(--accent); font-family: var(--font-accent); font-weight: 900; }
.review blockquote::before { content: "« "; } .review blockquote::after { content: " »"; }
.review figcaption b { color: var(--ink); font-weight: 600; }
.review-dots { display: flex; gap: 8px; }
.review-dots button { all: unset; cursor: pointer; width: 8px; height: 8px; border-radius: 999px; background: var(--g300); transition: width .25s; }
.review-dots button[aria-current="true"] { width: 26px; background: var(--accent); }
.review-dots button:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--accent); }
@media (max-width: 640px) { .review-av { flex-basis: 80px; height: 80px; font-size: 28px; } }

/* DA v2 appliquée à toutes les pages : soulignement bleu sous les fins de titres, étapes en tuiles bleu pâle */
h1 .accent-font, h2 .accent-font { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 4px; text-underline-offset: 9px; text-decoration-skip-ink: none; }
.dark h2 .accent-font, .cta-dark h2 .accent-font { text-decoration-color: var(--peach); }
.step { border-top: 0; padding-top: 0; }
.step .step-n { width: 48px; height: 48px; flex: none; border-radius: 14px; background: var(--accent-subtle); display: flex; align-items: center; justify-content: center; font-size: 26px; }

/* Logos : même poids visuel (surface dessinée identique, mesurée le 27/09/2026 ; à recalculer si un logo change) */
.sources img[src="/assets/sources/impots-gouv.svg"] { width: 141px; height: 36px; }
.sources img[src="/assets/sources/urssaf.svg"] { width: 126px; height: 33px; }
.sources img[src="/assets/sources/inpi.png"] { width: 133px; height: 34px; }
.sources img[src="/assets/sources/bodacc.svg"] { width: 147px; height: 38px; }
.sources img[src="/assets/sources/datagouv.svg"] { width: 121px; height: 31px; }
.sources img[src="/assets/sources/chorus-pro.png"] { width: 134px; height: 34px; }
.sources img[src="/assets/editeurs/pennylane.svg"] { width: 124px; height: 32px; }
.sources img[src="/assets/editeurs/myunisoft.svg"] { width: 114px; height: 29px; }
.sources img[src="/assets/editeurs/acd.png"] { width: 126px; height: 32px; }
.sources img[src="/assets/editeurs/fulll.svg"] { width: 133px; height: 34px; }

/* Accueil · cartes « douleur » : croix rouge discrète */
.card.pain svg { color: var(--danger-fg); background: var(--danger-bg); border-radius: 999px; padding: 6px; width: 32px; height: 32px; box-sizing: border-box; }
/* Sections de l'accueil atteintes par le menu : le titre ne passe pas sous l'en-tête fixe */
#probleme, #fonctionnalites, #securite, #integrations, #tarif, #temoignages, #faq { scroll-margin-top: 80px; }

/* Témoignages : cartes côte à côte, défilement horizontal (souris, doigt, flèches) */
.rv-score { font-size: 15px; color: var(--g600); } .rv-score .stars { color: #F59E0B; letter-spacing: 2px; } .rv-score b { color: var(--ink); }
.rv-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
.rv-track::-webkit-scrollbar { display: none; }
.rv-card { scroll-snap-align: start; margin: 0; background: #fff; border: 1px solid var(--g200); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.rv-stars { color: #F59E0B; letter-spacing: 2px; }
.rv-card blockquote { margin: 0; flex: 1; font-size: 16px; line-height: 1.55; color: var(--g800); }
.rv-card blockquote::before { content: "« "; color: var(--accent); font-weight: 700; } .rv-card blockquote::after { content: " »"; color: var(--accent); font-weight: 700; }
.rv-card figcaption { display: flex; gap: 12px; align-items: center; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.rv-av { flex: 0 0 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #0052CC, var(--accent)); color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rv-av img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 6px; }
.rv-card figcaption b { display: block; color: var(--ink); font-weight: 600; font-size: 15px; }
.rv-card figcaption small { display: block; color: var(--g500); font-size: 13px; }
@media (max-width: 1000px) { .rv-track { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 640px) { .rv-track { grid-auto-columns: 85%; } }

/* Accueil : alternance des fonds pour rythmer le défilement (blanc / gris / bleu pâle / sombre) */
.bg-soft { background: var(--peach-soft); border-top: 1px solid var(--peach-line); border-bottom: 1px solid var(--peach-line); }
.bg-blue { background: linear-gradient(180deg, #F2F7FF 0%, #E9F2FF 100%); border-top: 1px solid #D6E6FF; border-bottom: 1px solid #D6E6FF; }
.bg-soft .card, .bg-blue .card { background: #fff; }
#tarif > .wrap { padding-bottom: 96px; }

/* Titre de l'accueil : « Tout votre portefeuille, » sur une ligne, « trié pour vous. » sur la suivante */
.hero-h1 { font-size: clamp(34px, 3.8vw, 56px); }
.hero-h1 .nw { white-space: nowrap; }
/* Mot-clé dans le H1, affiché comme l'ancienne étiquette (24/10/2026) */
.hero-h1 .h1-kw { display: flex; width: max-content; max-width: 100%; margin-bottom: 26px; font-family: var(--font-body, inherit); font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0; color: var(--ink); height: auto; min-height: 34px; padding-block: 6px; }
@media (max-width: 480px) { .hero-h1 .nw { white-space: normal; } }

/* Accueil : bandeau de transition douleur → solution */
.pain-answer { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding: 28px 36px; border-radius: var(--r-xl); color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, #0052CC 0%, var(--accent) 55%, #4D94FF 100%);
  box-shadow: 0 24px 48px -24px rgba(0,60,180,.55); }
.pain-answer p { margin: 0; font-size: clamp(22px, 2.3vw, 30px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.pain-answer strong { font-family: var(--font-accent); font-weight: 900; }
.pain-answer a { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 999px; background: #fff; color: var(--accent); font-weight: 700; font-size: 15px; text-decoration: none; }
.pain-answer a:hover { background: #F2F7FF; }
#solution { scroll-margin-top: 72px; }

/* Titre à garder sur une seule ligne quand l'écran le permet */
.h2-one { max-width: none; }
@media (min-width: 1200px) { .h2-one { white-space: nowrap; font-size: clamp(32px, 3vw, 42px); } }

/* Section solution : badges flottants autour de l'écran (en plus de « Avis de CFE classés ») */
.toast.t-tl { right: auto; bottom: auto; left: -28px; top: 268px; }
.toast.t-ml { right: auto; top: auto; left: -28px; bottom: -26px; }
.toast.t-tr { bottom: auto; right: -36px; top: -14px; }
@media (max-width: 1100px) { .toast.t-tl, .toast.t-ml, .toast.t-tr { display: none; } }

/* Accueil : trois étapes reliées par des flèches, détails en pastilles, encart onboarding */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.steps .step-card { position: relative; }
.steps .step-card:not(:last-child)::after { content: "→"; position: absolute; right: -32px; top: 40px; font-size: 24px; font-weight: 700; color: var(--accent); }
.step-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.step-chip { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--g50); border: 1px solid var(--g200); color: var(--g600); }
.step-chip.r { background: var(--danger-bg); border-color: transparent; color: var(--danger-fg); }
.step-chip.o { background: var(--warn-bg); border-color: transparent; color: var(--warn-fg); }
.step-chip.g { background: var(--ok-bg); border-color: transparent; color: var(--ok-fg); }
.onboard { display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; padding: 20px 24px; background: #fff; border: 1px solid var(--g200); border-radius: var(--r-lg); }
.onboard p { flex: 1 1 360px; margin: 0; font-size: 17px; color: var(--g600); } .onboard b { color: var(--ink); }
.onboard-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-subtle); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; gap: 16px; } .steps .step-card::after { display: none; } }

/* Accueil · sécurité détaillée */
.sec-card { display: flex; flex-direction: column; gap: 8px; }
.sec-card span { color: #CBD5E1; font-size: 14.5px; line-height: 1.5; }
.sec-card em { margin-top: auto; padding-top: 8px; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #93C5FD; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sec-rgpd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 18px 22px; border: 1px solid var(--nuit-line); border-radius: var(--r-lg); background: rgba(255,255,255,.03); }
.sec-rgpd b { color: #fff; font-size: 16px; } .sec-rgpd span { flex: 1 1 520px; color: #CBD5E1; font-size: 15px; line-height: 1.5; }

/* Apparition au défilement (site.js) */
.sr { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: var(--sr-delai, 0ms); }
.sr.sr-on { opacity: 1; transform: none; }
.steps > .sr { transform: translateY(32px) scale(.97); }
.steps > .sr.sr-on { transform: none; }
.step-logo { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--g200); border-radius: 10px; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.step-logo img { width: 24px; height: 24px; object-fit: contain; }
.step-chips.tight { gap: 5px; flex-wrap: nowrap; } .step-chips.tight .step-chip { padding: 4px 8px; font-size: 12px; }
@media (max-width: 1100px) { .step-chips.tight { flex-wrap: wrap; } }
.pills-1l { flex-wrap: nowrap; } .pills-1l .pill { white-space: nowrap; }
@media (max-width: 1220px) { .pills-1l { flex-wrap: wrap; } }
.sec-badges { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--nuit-line); border-radius: var(--r-lg); background: rgba(255,255,255,.03); }
.sec-badge { padding: 20px 18px; display: flex; flex-direction: column; gap: 4px; border-left: 1px solid var(--nuit-line); }
.sec-badge:first-child { border-left: 0; }
.sec-badge b { color: #fff; font-size: 18px; font-weight: 800; white-space: nowrap; }
.sec-badge span { color: #94A3B8; font-size: 13.5px; line-height: 1.4; }
@media (max-width: 1000px) { .sec-badges { grid-template-columns: minmax(0,1fr); } .sec-badge { border-left: 0; border-top: 1px solid var(--nuit-line); padding: 14px 18px; } .sec-badge:first-child { border-top: 0; } .sec-badge b { white-space: normal; } }

/* Accueil · intégrations : carte à pointillés, favicons reliées au logo (inspiré de la maquette « integration card ») */
.int-wrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 56px; align-items: center; }
.int-card { position: relative; container-type: inline-size; aspect-ratio: 600/420; border: 1px solid var(--g200, #E5E7EB); border-radius: 24px; overflow: hidden; background: #F6F8FB; }
.int-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(15,23,42,.18) 1px, transparent 1px) 0 0/32px 32px; }
.int-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(246,248,251,.85) 5%, transparent 35%, transparent 65%, rgba(246,248,251,.85) 95%); }
.int-card svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.int-line { fill: none; stroke: #DCE3EC; stroke-width: 1.2; }
.int-flow { fill: none; stroke: url(#intGrad); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 22 100; animation: intFlow 3.2s linear infinite; }
@keyframes intFlow { from { stroke-dashoffset: 22; } to { stroke-dashoffset: -100; } }
.int-core { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%,-50%); padding: 1.4cqw; background: #fff; border: 1px solid var(--g200, #E5E7EB); border-radius: 3.6cqw; box-shadow: 0 16px 40px rgba(15,23,42,.12); }
.int-core > div { padding: 1.8cqw 2.4cqw; border: 1px solid var(--g200, #E5E7EB); border-radius: 2.6cqw; }
.int-core img { display: block; height: 5cqw; width: auto; }
.int-core::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(0,102,255,.14); animation: intPulse 3s ease-in-out infinite; }
@keyframes intPulse { 0%,100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.15); opacity: 0; } }
.int-node { position: absolute; z-index: 2; transform: translate(-50%,-50%); width: 9cqw; height: 9cqw; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--g200, #E5E7EB); border-radius: 2.4cqw; box-shadow: 0 1px 3px rgba(15,23,42,.08); }
.int-node img { width: 55%; height: 55%; object-fit: contain; }
.int-node.beta::after { content: "Bêta"; position: absolute; right: -1.2cqw; top: -1.2cqw; font-size: max(9px, 1.6cqw); font-weight: 800; color: #fff; background: #0066FF; padding: .2cqw .9cqw; border-radius: 999px; }
.int-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--g600, #4B5563); font-size: 15px; }
.int-list b { color: var(--g800, #1F2937); }
@media (prefers-reduced-motion: reduce) { .int-flow, .int-core::after { animation: none; } }
@media (max-width: 960px) { .int-wrap { grid-template-columns: minmax(0,1fr); gap: 28px; } }
.price-how b { display: block; color: var(--g800, #1F2937); margin-bottom: 6px; }
.price-how ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.price-how li { position: relative; padding-left: 16px; }
.price-how li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: #0066FF; }
.price-how strong { color: var(--g800, #1F2937); }
/* Bascule mensuel / annuel du simulateur : plus visible */
.seg-bill { background: #fff; border: 1.5px solid var(--g200, #E5E7EB); border-radius: 999px; padding: 4px; }
.seg-bill button { border-radius: 999px; color: var(--g600, #4B5563); gap: 8px; transition: background .2s, color .2s; }
.seg-bill button:hover { color: var(--ink, #0A0F1A); }
.seg-bill button[aria-pressed="true"] { background: #0066FF; color: #fff; box-shadow: 0 4px 12px rgba(0,102,255,.3); }
.seg-deal { font-size: 11.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: #DCFCE7; color: #15803D; }
.seg-bill button[aria-pressed="true"] .seg-deal { background: #fff; color: #0066FF; }
/* Tranches du simulateur : la tranche atteinte ressort en bleu, la dernière rangée est pleine */
.tier-tiles { grid-template-columns: repeat(6, minmax(0,1fr)); }
.tier-tiles button { grid-column: span 2; transition: background .25s, border-color .25s, box-shadow .25s, transform .25s; }
.tier-tiles button:nth-child(4), .tier-tiles button:nth-child(5) { grid-column: span 3; }
.tier-tiles button.on { background: linear-gradient(135deg, #0066FF, #3B8BFF); border-color: transparent; box-shadow: 0 8px 20px rgba(0,102,255,.28); transform: translateY(-2px); }
.tier-tiles button.on span { color: rgba(255,255,255,.85); }
.tier-tiles button.on b { color: #fff; }
@media (max-width: 480px) { .tier-tiles button, .tier-tiles button:nth-child(n) { grid-column: span 3; } .tier-tiles button:nth-child(5) { grid-column: span 6; } }
/* Pied des avis : même hauteur partout (nom sur 1 ligne, fonction et cabinet sur 2 lignes réservées) */
.rv-card figcaption > span:last-child { min-width: 0; }
.rv-card figcaption b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-card figcaption small { line-height: 18px; height: 36px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* FAQ : questions en cartes, réponses en phrase courte + liste */
.faq details { border: 1px solid var(--g200, #E5E7EB); border-bottom: 1px solid var(--g200, #E5E7EB); border-radius: 16px; background: #fff; padding: 0 22px; margin-bottom: 10px; transition: box-shadow .2s, border-color .2s; }
.faq details:hover { border-color: #BFD5FF; }
.faq details[open] { box-shadow: 0 10px 30px rgba(0,102,255,.08); border-color: #BFD5FF; }
.faq summary::after { width: 30px; height: 30px; line-height: 28px; border-radius: 50%; background: #EAF2FF; color: #0066FF; font-size: 20px; flex-shrink: 0; }
.faq details[open] summary::after { background: #0066FF; color: #fff; }
.faq .faq-a { margin: 0 0 20px; line-height: 1.6; }
.faq-lead { margin: 0 0 12px; color: var(--g800, #1F2937); }
.faq-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.faq-list li { position: relative; padding-left: 28px; font-size: 15.5px; }
.faq-list li::before { content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%; background: #EAF2FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat; }
.faq-list b { color: var(--g800, #1F2937); font-weight: 600; }
/* Pied de page compact */
.site-footer .cols { grid-template-columns: 1.1fr 0.9fr 1.6fr 1.4fr; gap: 32px; padding: 44px 32px 28px; }
.site-footer .col-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.site-footer .col a { min-height: 28px; font-size: 14.5px; }
.site-footer .copy { padding: 16px 32px 22px; align-items: center; }
.site-footer .legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.site-footer .social { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 8px; color: #0A66C2; background: #fff; border: 1px solid var(--g200); }
.site-footer .social:hover { background: #0A66C2; color: #fff; border-color: #0A66C2; }
@media (max-width: 960px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer .cols { grid-template-columns: 1fr; } }
.site-footer .copy a.social { color: #0A66C2; } .site-footer .copy a.social:hover { color: #fff; }
@media (max-width: 560px) { .site-footer .cols { grid-template-columns: 1fr; gap: 22px; padding: 32px 20px 20px; } .site-footer .brand span { display: none; } .site-footer .col a { min-height: 32px; } }
@media (max-width: 560px) { .site-footer .col:not(.wide):not(.brand) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; } .site-footer .col:not(.wide):not(.brand) b { grid-column: 1 / -1; } }
/* Tranche sélectionnée seule, en grand */
.tier-tiles.is-focus { display: block; }
.tier-tiles .tier-focus { position: relative; overflow: hidden; display: grid; gap: 4px; padding: 20px 22px; border-radius: 18px; border: 0; color: #fff; grid-column: auto; background: linear-gradient(135deg, #0052CC 0%, #0066FF 55%, #4D94FF 100%); box-shadow: 0 14px 34px rgba(0,102,255,.30); animation: tfIn .35s cubic-bezier(.2,.7,.2,1); }
.tier-tiles .tier-focus::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.12); }
.tier-tiles .tf-k { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: rgba(255,255,255,.85); }
.tier-tiles .tf-p { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 44px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tier-tiles .tf-p small { font-size: 15px; font-weight: 600; letter-spacing: 0; color: rgba(255,255,255,.85); }
.tier-tiles .tf-avg { font-size: 14px; color: rgba(255,255,255,.9); } .tier-tiles .tf-avg b { color: #fff; }
.tier-tiles .tf-all { all: unset; cursor: pointer; justify-self: start; margin-top: 6px; font-size: 13px; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 3px; position: relative; z-index: 1; }
@keyframes tfIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tier-tiles .tier-focus { animation: none; } }
.tier-tiles .tf-p { color: #fff; } .tier-tiles .tf-avg, .tier-tiles .tf-k { display: block; }
/* Tarifs : « Ce qui est inclus » en carte, même hauteur que le simulateur */
.incl-card { background: #fff; border: 1px solid var(--g200, #E5E7EB); border-radius: 24px; padding: 32px 36px; box-shadow: 0 10px 30px rgba(15,23,42,.05); }
.incl-card .price-how { margin-top: auto; } /* colonnes de même hauteur : « Comment choisir » en bas de la carte */
/* Accueil : sections plus rapprochées */
body.home .section { padding-block: 72px; } body.home .section-sm { padding-block: 56px; }
@media (max-width: 640px) { body.home .section { padding-block: 52px; } body.home .section-sm { padding-block: 40px; } }
/* Règle Patrick : un texte prend toute la largeur disponible, jamais bridé par un max-width
   (y compris les max-width posés en ligne sur certaines pages). */
.h2, .h1-page, .lead, .tool-head .h1-page, .tool-head .lead, p.lead[style] { max-width: none !important; }
.site-nav details.nav-opt .menu { min-width: 340px; } .site-nav details.nav-opt .menu small { white-space: nowrap; }
/* Se connecter : icône clé ; sur mobile, bouton carré sans texte */
.btn-login { gap: 8px; } .btn-login .login-ico { display: none; }
@media (max-width: 760px) { .btn-login { width: 44px; padding: 0; justify-content: center; } .btn-login .login-txt { display: none; } .btn-login .login-ico { display: block; width: 22px; height: 22px; } }
/* Avis sur mobile : une carte à la fois, points de pagination */
.rv-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.rv-dots button[hidden] { display: none; }
.rv-dots button { all: unset; cursor: pointer; width: 8px; height: 8px; border-radius: 999px; background: var(--g200, #E5E7EB); transition: width .2s, background .2s; }
.rv-dots button.on { width: 22px; background: #0066FF; }
@media (max-width: 640px) { .rv-track { grid-auto-columns: 100%; } }
/* Accueil : aperçu du tableau des échéances (une ligne par dossier, une colonne par mois) */
.ech-grid { display: grid; grid-template-columns: minmax(0,1.25fr) repeat(3, minmax(0,1fr)); border-top: 1px solid var(--line-soft); font-size: 13px; }
.ech-grid > div { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 4px; justify-content: center; min-width: 0; }
.ech-grid .eh { font-size: 12px; font-weight: 700; color: var(--g600); background: var(--g25); }
.ech-grid .en { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec { display: flex; justify-content: space-between; gap: 6px; padding: 3px 7px; border-radius: 7px; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ec b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.ec.ok { background: #D1FAE5; color: #047857; } .ec.late { background: #FFEBEC; color: #C2272D; } .ec.todo { background: #F3F4F6; color: #374151; }
.ec i { font-style: normal; }
@media (max-width: 560px) { .ec i { display: none; } .ech-grid { font-size: 12px; } .ech-grid > div { padding: 7px 6px; } }

/* Barre promo (promo-bar.js, reprise du site en ligne) : couleurs et police du nouveau site */
.promo-bar { background: var(--accent) !important; font-family: var(--font) !important; box-shadow: none !important; }
.promo-bar-copy { color: var(--accent) !important; }
.sim .tier-tiles:not(.is-focus) { grid-template-columns: repeat(2, 1fr); } /* 4 formules : 2 × 2 plutôt que 3 + 1 */
.incl-it > span { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.5; color: var(--g600); } .incl-it b { font-size: 17px; color: var(--ink); } /* inclus : titre + fait concret */
.sim .tier-tiles:not(.is-focus) > button, .sim .tier-tiles:not(.is-focus) > button:nth-child(n) { grid-column: auto; } /* chaque formule sur une colonne (les span venaient des 5 tranches SaaS) */
.incl-card { display: flex; flex-direction: column; } .sim [data-choose] { margin-top: auto; } /* formules : les deux blocs finissent à la même ligne */

/* ── Barre de navigation : fixe au défilement, liens en pastille, démo mise en avant ── */
.site-header { position: sticky; top: 0; background: #fff; border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.site-header.is-scrolled { border-bottom-color: var(--g200); box-shadow: 0 8px 24px -18px rgba(10,15,26,.35); }
body.has-promo .site-header { top: 40px; }
.site-header .bar { min-height: 72px; }
.site-nav { gap: 4px; }
/* Liens : le surlignage pêche des titres (u-blue) apparaît au survol et reste sous la section en cours */
.site-nav > a, .site-nav summary { position: relative; padding: 0 12px; border-radius: 10px; transition: color .15s; }
.site-nav > a::after, .site-nav summary::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 9px; height: 9px; border-radius: 3px; background: var(--peach); transform: scaleX(0); transform-origin: left center; transition: transform .28s cubic-bezier(.2,.8,.2,1); z-index: -1; }
.site-nav > a:hover, .site-nav summary:hover, .site-nav details[open] > summary { color: var(--ink); background: none; }
.site-nav > a:hover::after, .site-nav summary:hover::after, .site-nav details[open] > summary::after { transform: scaleX(1); }
.site-nav a[aria-current="page"], .site-nav a.is-here { color: var(--ink); background: none; }
.site-nav a[aria-current="page"]::after, .site-nav a.is-here::after { transform: scaleX(1); background: var(--peach); box-shadow: inset 0 -3px 0 var(--accent); }
.site-nav { isolation: isolate; }
.site-nav .chev { transition: transform .2s; } .site-nav details[open] .chev { transform: rotate(180deg); }
.btn-demo { background: #fff; color: var(--accent); border: 1.5px solid var(--accent); gap: 8px; }
.btn-demo:hover { background: var(--accent-subtle); color: var(--accent-hover); border-color: var(--accent-hover); }
.btn-trial { min-width: 88px; }
@media (max-width: 1180px) { .demo-txt { display: none; } .header-actions .btn-demo { width: 44px; padding: 0; } }
@media (max-width: 760px) { .header-actions .btn-demo { display: inline-flex !important; } }
@media (prefers-reduced-motion: reduce) { .site-header, .site-nav .chev { transition: none; } }
.menu a.menu-demo { color: var(--accent); background: var(--accent-subtle); font-weight: 600; margin-bottom: 4px; } .menu a.menu-demo:hover { color: var(--accent-hover); }
@media (max-width: 480px) { .header-actions .btn-demo { display: none !important; } } /* téléphone : la démo est en tête du menu */
@media (max-width: 760px) { .menu-more .menu { position: fixed; top: 64px; left: 16px; right: 16px; width: auto; } } /* téléphone : menu pleine largeur sous la barre */

/* « Ressources » discret, à gauche des boutons (le menu s'ouvre aligné à droite) */
.header-actions { align-items: center; }
.nav-res { position: relative; margin-right: 4px; }
.nav-res summary { list-style: none; display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px; font-size: 15px; font-weight: 500; color: var(--g600); cursor: pointer; border-radius: 10px; transition: color .15s; }
.nav-res summary::-webkit-details-marker { display: none; }
.nav-res summary:hover, .nav-res[open] summary { color: var(--ink); }
.nav-res .chev { transition: transform .2s; } .nav-res[open] .chev { transform: rotate(180deg); }
.nav-res .menu { left: auto; right: 0; top: 50px; min-width: 340px; z-index: 40; }
.nav-res .menu small { white-space: nowrap; }
/* Prix par dossier dans le simulateur de formules : surligneur pêche du site (24/10/2026) */
.hl-dossier { background: linear-gradient(transparent 55%, var(--peach) 55%); box-shadow: inset 0 -2px 0 var(--accent); color: var(--ink); font-weight: 700; padding: 0 2px; }