/* Pages d'apps, nouvelle version (spec279, vague 2) : premier écran sur la couleur de l'app, vraies captures de
   l'app, sections courtes au-dessus du détail des fonctionnalités. Chargée après clinique.css par
   src/lib/charte.mjs sur les pages qui ont un .ap-hero. Teinte de l'app : classe .ap-<app> sur chaque section
   (jetons --app-<app> / --app-<app>-ink de clinique.css ; écart à la spec237 §2.3 décidé le 12/11/2026). */

.ap-eleveur { --ap-tint: var(--app-eleveur); --ap-ink: var(--app-eleveur-ink); }
.ap-refuge { --ap-tint: var(--app-refuge); --ap-ink: var(--app-refuge-ink); }
.ap-pension { --ap-tint: var(--app-pension); --ap-ink: var(--app-pension-ink); }
.ap-animalier { --ap-tint: var(--app-animalier); --ap-ink: var(--app-animalier-ink); }
.ap-sante { --ap-tint: var(--app-sante); --ap-ink: var(--app-sante-ink); }
.ap-club { --ap-tint: var(--app-club); --ap-ink: var(--app-club-ink); }

.ap-wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--s-5); }
section.ap-section { padding: var(--s-9) 0; }
.ap-head { display: flex; flex-direction: column; gap: var(--s-3); max-width: 760px; margin-bottom: var(--s-7); }

/* ── Titres et textes ── */
.ap-hero .ap-h1, .ap-section .ap-h2, .ap-final .ap-h2, .ap-more .ap-h2 {
	margin: 0; font-family: var(--font-display); font-weight: 500; color: var(--c-ink); letter-spacing: -.02em;
}
.ap-section .ap-h2, .ap-more .ap-h2 { font-size: clamp(28px, 1.3rem + 1.3vw, 38px); line-height: 1.15; }
.ap-kicker {
	display: flex; align-items: center; gap: 12px; margin-bottom: var(--s-5);
	font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--ap-ink);
}
.ap-kicker img { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.ap-promise { display: block; font-size: clamp(38px, 1.6rem + 2.4vw, 56px); line-height: 1.05; }
.ap-accent { color: var(--ap-ink); }
.ap-promise .ap-accent { display: block; }
/* Page Club : promesse plus longue en allemand et en portugais, le bouton d'essai reste au-dessus de la ligne de flottaison. */
.ap-club .ap-promise { font-size: clamp(36px, 1.4rem + 2vw, 50px); }
.ap-eyebrow { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ap-ink); }
.ap-sub { margin: 0; font-size: 18px; line-height: 1.55; color: var(--c-ink-soft); text-wrap: pretty; }
.ap-h2 { text-wrap: balance; }
.ap-lead { margin: var(--s-5) 0 0; max-width: 34em; font-size: 20px; line-height: 1.55; color: var(--c-ink-soft); text-wrap: pretty; }
.ap-note { font-size: 16px; color: var(--c-ink-soft); }

/* ── Boutons ── */
.ap-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ap-actions--center { justify-content: center; }
a.ap-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px;
	border-radius: var(--r-pill); font-size: 18px; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center;
}
a.ap-btn .icon { font-size: 20px; }
a.ap-btn--primary { background: var(--c-accent); color: #fff; }
a.ap-btn--primary:hover { background: var(--c-accent-hover); color: #fff; }
a.ap-btn--ghost { background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line-strong); font-size: 17px; }
a.ap-btn--ghost:hover { background: var(--c-bg); }
a.ap-btn--block { width: 100%; }
a.ap-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--c-accent-ink); }
a.ap-link:hover { color: var(--c-deep); }

/* ── 1. Premier écran ── */
section.ap-hero { padding: var(--s-8) 0 var(--s-9); background: var(--ap-tint); }
.ap-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: var(--s-8); }
.ap-hero .ap-actions { margin-top: var(--s-6); }
.ap-checks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: var(--s-5) 0 0; padding: 0; list-style: none; font-size: 16px; color: var(--c-ink); }
.ap-checks li { display: flex; align-items: center; gap: 8px; }
.ap-checks .icon { color: var(--app-sante-ink); font-size: 18px; stroke-width: 2.6; }
.ap-rating { margin: var(--s-4) 0 0; font-size: 15px; }
.ap-rating a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--c-ink-soft); text-decoration: none; }
.ap-rating a:hover span:last-child { text-decoration: underline; }
.ap-stars { display: inline-flex; gap: 2px; color: var(--ap-ink); font-size: 18px; }

.ap-hero-visual { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.ap-stage { position: relative; width: 100%; max-width: 540px; height: 640px; }
.ap-phone {
	position: absolute; top: 0; left: 50%; width: 300px; margin-left: -150px; padding: 10px;
	border-radius: 48px; background: var(--c-ink); box-shadow: 0 28px 60px rgba(18, 64, 60, .22);
}
.ap-screen { position: relative; aspect-ratio: 560 / 1214; overflow: hidden; border-radius: 38px; background: #fff; }
.ap-screen picture { position: absolute; inset: 0; display: block; opacity: 0; animation: ap-slide 12s infinite; }
.ap-screen picture:nth-child(1) { opacity: 1; }
.ap-screen picture:nth-child(2) { animation-delay: -8s; }
.ap-screen picture:nth-child(3) { animation-delay: -4s; }
.ap-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
@keyframes ap-slide { 0%, 30% { opacity: 1; } 33.34%, 97% { opacity: 0; } 100% { opacity: 1; } }

.ap-float {
	position: absolute; display: flex; align-items: center; gap: 12px; box-sizing: border-box; padding: 14px 16px;
	border-radius: 18px; background: var(--c-surface); box-shadow: 0 14px 34px rgba(18, 64, 60, .16); line-height: 1.35;
}
.ap-float--1 { top: 130px; left: 0; width: 236px; }
.ap-float--2 { top: 228px; right: 0; width: 214px; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 18px; }
.ap-float--3 { top: 362px; left: 12px; width: 244px; }
.ap-float-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ap-tint); color: var(--ap-ink); font-size: 22px; }
.ap-float-ic--blue { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.ap-float-ic--red { background: var(--c-error-soft); color: var(--c-error); }
.ap-float-txt { display: flex; flex-direction: column; min-width: 0; }
.ap-float strong { font-size: 14px; font-weight: 700; color: var(--c-ink); }
.ap-float small { font-size: 13px; color: var(--c-ink-soft); }
.ap-float-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--c-ink-soft); }
.ap-float-label .icon { color: var(--app-sante-ink); font-size: 18px; }
.ap-float-big { font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.1; color: var(--app-sante-ink); }

.ap-caption { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 13px; color: var(--c-ink-soft); }
.ap-dots { display: flex; gap: 6px; }
.ap-dots i { width: 22px; height: 6px; border-radius: 3px; background: var(--c-ink); opacity: .25; animation: ap-dot 12s infinite; }
.ap-dots i:nth-child(1) { opacity: 1; }
.ap-dots i:nth-child(2) { animation-delay: -8s; }
.ap-dots i:nth-child(3) { animation-delay: -4s; }
@keyframes ap-dot { 0%, 30% { opacity: 1; } 33.34%, 97% { opacity: .25; } 100% { opacity: 1; } }

/* ── 2. Preuves : élevages qui utilisent l'app ── */
section.ap-proof { padding: var(--s-7) 0; background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.ap-proof-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); }
.ap-proof .ap-h2 { font-size: clamp(22px, 1rem + .8vw, 28px); }
.ap-breeders { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ap-breeders a {
	display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 18px 8px 8px; border: 1px solid var(--c-line);
	border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-ink); text-decoration: none;
}
.ap-breeders a:hover { border-color: var(--c-line-strong); background: var(--c-bg); }
.ap-initials {
	flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
	background: var(--ap-tint); color: var(--ap-ink); font-size: 14px; font-weight: 700;
}
.ap-breeder { display: flex; flex-direction: column; line-height: 1.3; }
.ap-breeder strong { font-size: 15px; }
.ap-breeder span { font-size: 13px; color: var(--c-accent-ink); }

/* ── 3. La journée en 4 écrans ── */
section.ap-day { background: var(--c-bg); }
.ap-moments { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); margin: 0; padding: 0; list-style: none; }
.ap-moments li { display: flex; flex-direction: column; gap: 14px; }
.ap-moments .ap-shot { margin: 0; width: 100%; max-width: 256px; }
.ap-moments .ap-shot img {
	display: block; width: 100%; height: auto; aspect-ratio: 600 / 1100; object-fit: cover; object-position: top;
	box-sizing: border-box; border: 8px solid var(--c-ink); border-radius: 34px; background: #fff;
}
.ap-moments .ap-moment-title { margin: 0; font-family: var(--font-body); font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--c-ink); letter-spacing: -.01em; }
.ap-moments p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--c-ink-soft); text-wrap: pretty; }
.ap-swipe { display: none; }

/* ── 4. Prêt en 2 minutes ── */
section.ap-ready { background: var(--c-surface); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.ap-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.ap-steps .ap-step { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 24px; background: var(--c-bg); }
.ap-step-n { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-ink); color: #fff; font-size: 17px; font-weight: 700; }
.ap-steps .ap-step-title { margin: 0; font-family: var(--font-body); font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--c-ink); letter-spacing: -.01em; }
.ap-steps .ap-step p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--c-ink-soft); }
.ap-mock { margin-top: auto; }
.ap-mock-form { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-surface); }
.ap-mock-form small { font-size: 12px; font-weight: 600; color: var(--c-ink-soft); }
.ap-mock-form span { padding: 9px 12px; border: 1px solid #c9d6d1; border-radius: 10px; font-size: 14px; color: var(--c-ink); }
.ap-mock-form b { margin-top: 4px; padding: 10px 12px; border-radius: var(--r-pill); background: var(--c-accent); color: #fff; font-size: 14px; font-weight: 600; text-align: center; }
.ap-mock-import { display: flex; align-items: center; gap: 8px; }
.ap-paper {
	flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid #eadcc4; border-radius: 6px;
	background: #fffaf0; box-shadow: 0 6px 14px rgba(18, 64, 60, .08); transform: rotate(-2deg);
	font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; font-size: 15px; line-height: 1.45; color: #2f3a56;
}
.ap-mock-import > .icon { flex: none; color: var(--ap-ink); font-size: 22px; }
.ap-cards { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); }
.ap-cards span { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 13px; line-height: 1.3; color: var(--c-ink-soft); }
.ap-cards strong { color: var(--c-ink); }
.ap-cards .icon { color: var(--app-sante-ink); font-size: 16px; }
.ap-cards--list { gap: 10px; padding: 14px 16px; border-radius: 16px; }
.ap-cards--list span { font-size: 14px; }
/* Dictée d'un client (page Animalier) : la phrase dite, en bulle. */
.ap-voice {
	flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: 16px 16px 16px 4px;
	background: var(--ap-tint); color: var(--ap-ink); font-size: 14px; font-style: italic; line-height: 1.45;
}
.ap-voice .icon { flex: none; margin-top: 1px; font-size: 18px; }
.ap-mock-voice { flex-direction: column; align-items: stretch; }
.ap-mock-voice > .ap-voice, .ap-mock-voice > .ap-cards { flex: none; }
.ap-mock-voice > .icon { align-self: center; transform: rotate(90deg); }
.ap-mock-families { display: flex; flex-direction: column; gap: 10px; }
.ap-family { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-surface); }
.ap-family .ap-float-ic { width: 40px; height: 40px; }
.ap-family .ap-float-txt { flex: 1 1 auto; }
.ap-family strong { font-size: 14px; color: var(--c-ink); }
.ap-family small { font-size: 13px; color: var(--c-ink-soft); }
.ap-pill { flex: none; padding: 4px 10px; border-radius: var(--r-pill); background: var(--app-sante); color: var(--app-sante-ink); font-size: 12px; font-weight: 700; }
.ap-pill--wait { background: var(--app-eleveur); color: var(--app-eleveur-ink); }
.ap-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: var(--s-7); }

/* ── 5. Ce que l'abonnement remplace ── */
section.ap-gain { background: var(--c-bg); }
.ap-gain-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: stretch; gap: var(--s-5); }
.ap-tools { margin: 0; padding: 8px 32px; border: 1px solid var(--c-line); border-radius: 24px; background: var(--c-surface); list-style: none; }
.ap-tools li { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.ap-tools li:last-child { border-bottom: 0; }
.ap-tool-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--c-bg); color: var(--c-nav); font-size: 22px; }
.ap-tool { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.35; }
.ap-tool strong { font-size: 17px; color: var(--c-ink); }
.ap-tool span { font-size: 15px; color: var(--c-ink-soft); }
.ap-tool-tag { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--app-sante-ink); }
.ap-plan { display: flex; flex-direction: column; gap: 14px; padding: 32px; border: 2px solid var(--c-accent); border-radius: 24px; background: var(--c-surface); }
.ap-plan-tag { align-self: flex-start; padding: 5px 14px; border-radius: var(--r-pill); background: var(--ap-tint); color: var(--ap-ink); font-size: 14px; font-weight: 700; }
.ap-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; }
.ap-price strong { font-family: var(--font-display); font-size: 56px; font-weight: 600; line-height: 1; color: var(--c-ink); }
.ap-price span { font-size: 18px; color: var(--c-ink-soft); }
.ap-price-alt { margin: 0; font-size: 15px; color: var(--c-ink-soft); }
.ap-plan-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 16px; color: var(--c-ink); }
.ap-plan-list li { display: flex; align-items: center; gap: 10px; }
.ap-plan-list .icon { color: var(--app-sante-ink); font-size: 18px; }
.ap-plan .ap-btn { margin-top: auto; }
.ap-plan .ap-link { justify-content: center; font-size: 15px; font-weight: 500; text-align: center; }

/* ── Avant le détail des fonctionnalités ── */
section.ap-more { padding: var(--s-9) 0 0; text-align: center; }
.ap-more .ap-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }

/* ── Dernier appel ── */
section.ap-final { padding: var(--s-9) 0; background: var(--ap-tint); border-top: 1px solid var(--c-line); text-align: center; }
.ap-final-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 860px; }
.ap-final-inner > img { width: 56px; height: 56px; border-radius: 14px; }
.ap-final .ap-h2 { font-size: clamp(30px, 1.4rem + 1.6vw, 44px); line-height: 1.12; }
.ap-final .ap-sub { font-size: 19px; color: var(--c-ink); }
.ap-final .ap-actions { margin-top: 8px; }

/* ── Tablette et téléphone ── */
@media (max-width: 1080px) {
	.ap-hero-grid { grid-template-columns: 1fr; gap: var(--s-7); }
	.ap-moments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ap-gain-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
	.ap-float { display: none; }
	.ap-stage { height: auto; max-width: 300px; }
	.ap-phone { position: relative; left: auto; margin: 0 auto; }
	.ap-steps { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.ap-wrap { padding: 0 16px; }
	section.ap-section { padding: var(--s-8) 0; }
	section.ap-hero { padding: var(--s-6) 0 var(--s-7); }
	.ap-kicker { margin-bottom: var(--s-4); font-size: 14px; }
	.ap-kicker img { width: 36px; height: 36px; border-radius: 10px; }
	.ap-promise { font-size: 36px; }
	.ap-lead { margin-top: var(--s-4); font-size: 18px; }
	.ap-hero .ap-actions { margin-top: var(--s-5); }
	a.ap-btn { width: 100%; }
	.ap-hero a.ap-btn--ghost { display: none; }
	.ap-checks { gap: 6px 16px; font-size: 15px; }
	.ap-stage { max-width: 260px; }
	.ap-phone { width: 260px; padding: 9px; border-radius: 42px; }
	.ap-screen { border-radius: 33px; }
	.ap-head { margin-bottom: var(--s-6); }
	.ap-breeders a { padding-right: 14px; }
	.ap-moments { display: flex; gap: 16px; margin: 0 -16px; padding: 0 16px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; -webkit-overflow-scrolling: touch; }
	.ap-moments li { flex: 0 0 72%; scroll-snap-align: start; }
	.ap-swipe { display: block; margin: var(--s-3) 0 0; font-size: 14px; color: var(--c-ink-soft); }
	.ap-steps .ap-step { padding: 22px; }
	.ap-tools { padding: 4px 18px; }
	.ap-tool-tag span { display: none; }
	.ap-plan { padding: 24px; }
	.ap-price strong { font-size: 48px; }
}
/* ── Accueil (spec279) : deux portes, les six apps, le carnet qui suit l'animal ──
   Charte « Clinique douce » sans couleur d'app en grand : fond clair, touches de couleur par app sur les cartes. */
.ap-home { --ap-tint: var(--c-accent-soft); --ap-ink: var(--c-accent-ink); }
section.ap-hero.ap-home { padding: var(--s-7) 0 var(--s-8); background: linear-gradient(180deg, var(--c-surface) 0%, var(--c-bg) 100%); border-bottom: 1px solid var(--c-line); }
.ap-home .ap-hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; gap: var(--s-7); }
.ap-home .ap-promise { font-size: clamp(34px, 1.2rem + 1.9vw, 46px); line-height: 1.08; text-wrap: balance; }

.ap-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: var(--s-6); }
.ap-door {
	display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px;
	border: 1px solid var(--c-line); border-radius: 24px; background: var(--c-surface); box-shadow: 0 10px 30px rgba(18, 64, 60, .06);
}
.ap-door > p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--c-ink-soft); }
.ap-door > p.ap-door-tag { padding: 4px 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 700; line-height: 1.4; }
.ap-door--owner .ap-door-tag { background: var(--app-sante); color: var(--app-sante-ink); }
.ap-door--pro .ap-door-tag { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.ap-home .ap-door-title { margin: 0; font-family: var(--font-body); font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--c-ink); }
.ap-door a.ap-btn { align-self: stretch; min-height: 52px; margin-top: auto; padding: 8px 18px; font-size: 17px; }
.ap-door a.ap-link { min-height: 40px; font-size: 15px; }
.ap-door-shot { display: none; }
.ap-door-checks { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--c-ink); }
.ap-door-checks li { display: flex; align-items: center; gap: 8px; }
.ap-door-checks .icon { flex: none; color: var(--app-sante-ink); font-size: 17px; stroke-width: 2.6; }
.ap-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.ap-chips a {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 6px; border: 1px solid var(--c-line);
	border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-ink); font-size: 15px; font-weight: 600; line-height: 1.25; text-decoration: none;
}
.ap-chips a:hover { border-color: var(--c-line-strong); background: var(--c-bg); color: var(--c-ink); }
.ap-chips img { flex: none; width: 30px; height: 30px; border-radius: 8px; }
.ap-door--pro a.ap-link { margin-top: auto; }

/* Deux téléphones : un pro (derrière) et Son Espace Santé (devant) */
.ap-duo { max-width: 520px; height: 690px; }
.ap-duo .ap-phone { margin-left: 0; }
.ap-duo .ap-phone--pro { left: 0; top: 0; width: 260px; padding: 9px; border-radius: 44px; }
.ap-duo .ap-phone--pro .ap-screen { border-radius: 35px; }
.ap-duo .ap-phone--owner { left: auto; right: 0; top: 96px; width: 280px; z-index: 1; }
.ap-duo .ap-phone--pro .ap-screen picture:nth-child(1) { animation-delay: -2s; }
.ap-duo .ap-phone--pro .ap-screen picture:nth-child(2) { animation-delay: -10s; }
.ap-duo .ap-phone--pro .ap-screen picture:nth-child(3) { animation-delay: -6s; }
.ap-duo .ap-float { z-index: 2; }
.ap-duo .ap-float--a { top: 22px; right: 0; width: 246px; }
.ap-duo .ap-float--b { bottom: 64px; left: 120px; width: 236px; }
.ap-float-ic--green { background: var(--app-sante); color: var(--app-sante-ink); }

/* Les six apps */
section.ap-apps { background: var(--c-bg); scroll-margin-top: 80px; }
.ap-apps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.ap-app {
	position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--c-line); border-radius: 24px;
	background: var(--c-surface); transition: box-shadow .2s ease, transform .2s ease;
}
.ap-app:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.ap-app-visual { position: relative; height: 200px; overflow: hidden; background: var(--ap-tint); }
.ap-mini { position: absolute; top: 26px; left: 50%; width: 196px; margin-left: -98px; padding: 7px 7px 0; border-radius: 30px 30px 0 0; background: var(--c-ink); }
.ap-mini img { display: block; width: 100%; height: auto; border-radius: 23px 23px 0 0; background: #fff; }
.ap-app-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; padding: 20px 24px 24px; }
.ap-app-body > p { margin: 0; }
.ap-app-for { font-size: 13px; font-weight: 700; letter-spacing: .06em; line-height: 1.4; text-transform: uppercase; color: var(--ap-ink); }
.ap-home .ap-app-name, .ap-apps .ap-app-name { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-body); font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.ap-app-name img { flex: none; width: 36px; height: 36px; border-radius: 10px; }
.ap-app-name a.ap-app-link { color: var(--c-ink); text-decoration: none; }
.ap-app-name a.ap-app-link::after { content: ''; position: absolute; inset: 0; border-radius: 24px; }
.ap-app-name a.ap-app-link:focus-visible { outline: none; }
.ap-app:focus-within { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.ap-app:hover .ap-app-link { text-decoration: underline; }
.ap-app-promise { font-family: var(--font-display); font-size: 21px; font-weight: 500; line-height: 1.25; color: var(--c-ink); text-wrap: pretty; }
.ap-app-tag { display: flex; align-items: center; gap: 8px; margin-top: auto !important; padding-top: 4px; font-size: 15px; color: var(--c-ink-soft); }
.ap-app-tag .icon { flex: none; color: var(--app-sante-ink); font-size: 18px; stroke-width: 2.6; }

/* Le carnet qui suit l'animal */
section.ap-network { background: var(--c-surface); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.ap-head--center { align-items: center; margin-right: auto; margin-left: auto; text-align: center; }
.ap-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: var(--s-4); }
.ap-flow-step { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.ap-flow-step .ap-shot { width: 100%; max-width: 230px; margin: 0 0 6px; }
.ap-flow-step .ap-shot img {
	display: block; width: 100%; height: auto; aspect-ratio: 600 / 1100; object-fit: cover; object-position: top;
	box-sizing: border-box; border: 8px solid var(--c-ink); border-radius: 34px; background: #fff;
}
.ap-flow-step .ap-flow-title { margin: 0; font-family: var(--font-body); font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--c-ink); }
.ap-flow-step > p { margin: 0; max-width: 30em; font-size: 16px; line-height: 1.55; color: var(--c-ink-soft); text-wrap: pretty; }
.ap-flow-step > p.ap-flow-badge { padding: 4px 12px; border-radius: var(--r-pill); background: var(--app-sante); color: var(--app-sante-ink); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.ap-flow-link { align-self: start; margin-top: 190px; }
.ap-flow-link .connector-pill {
	display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: var(--r-pill);
	background: var(--c-accent-soft); color: var(--c-accent-ink); box-shadow: none; font-size: 14px; font-weight: 700; white-space: nowrap;
}

/* Gratuit pour tous */
section.ap-free { background: var(--c-bg); }
.ap-free-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.ap-free-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--c-line); border-radius: 24px; background: var(--c-surface); }
.ap-free-card figure { position: relative; margin: 0; }
.ap-free-card figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.ap-free-credit { position: absolute; right: 8px; bottom: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, .9); font-size: 11px; line-height: 1.5; color: var(--c-ink); }
.ap-free-body { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 24px 22px; }
.ap-free-body > p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--c-ink-soft); }
.ap-free-body > p.ap-free-badge { padding: 4px 12px; border-radius: var(--r-pill); background: var(--c-accent-soft); color: var(--c-accent-ink); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.ap-free-body .ap-free-title { margin: 0; font-family: var(--font-body); font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--c-ink); }
.ap-free-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: auto; }

/* FAQ et archives repliables */
section.ap-faq { background: var(--c-surface); border-top: 1px solid var(--c-line); }
.ap-faq .ap-wrap { max-width: 880px; }
.ap-faq .ap-h2 { margin-bottom: var(--s-6); }
.ap-faq-list { display: flex; flex-direction: column; gap: 12px; }
.ap-faq-item { border: 1px solid var(--c-line); border-radius: 18px; background: var(--c-surface); }
.ap-faq-item summary, .ap-archives > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; }
.ap-faq-item summary { min-height: 56px; padding: 14px 20px; font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--c-ink); }
.ap-faq-item summary::-webkit-details-marker, .ap-archives > summary::-webkit-details-marker { display: none; }
.ap-faq-item summary::after, .ap-archives > summary::after { content: '+'; flex: none; font-size: 26px; font-weight: 400; line-height: 1; color: var(--c-accent-ink); }
.ap-faq-item[open] summary::after, .ap-archives[open] > summary::after { content: '\2212'; }
.ap-faq-item p { margin: 0; padding: 0 20px 18px; font-size: 16px; line-height: 1.6; color: var(--c-ink-soft); }
.ap-archives { max-width: 800px; margin: var(--s-7) auto 0; }
.ap-archives > summary { justify-content: center; min-height: 48px; }
.ap-archives > summary h3 { margin: 0; font-size: 20px; }
.ap-archives .newsletter-list { margin-top: var(--s-5); }

@media (max-width: 1080px) {
	.ap-home .ap-hero-grid { grid-template-columns: 1fr; }
	.ap-apps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ap-free-grid { grid-template-columns: 1fr; }
	.ap-free-card { flex-direction: row; }
	.ap-free-card figure { flex: 0 0 40%; }
	.ap-free-card figure img { height: 100%; aspect-ratio: auto; }
}
@media (max-width: 900px) {
	.ap-home .ap-hero-visual, .ap-door-checks { display: none; }
	.ap-door--owner { display: grid; grid-template-columns: minmax(0, 1fr) 84px; column-gap: 16px; row-gap: 10px; align-items: start; }
	.ap-door--owner > * { grid-column: 1; }
	.ap-door--owner > p.ap-door-tag { justify-self: start; }
	.ap-door--owner .ap-door-shot { display: block; grid-row: 1 / span 3; grid-column: 2; padding: 4px; border-radius: 16px; background: var(--c-ink); }
	.ap-door-shot img { display: block; width: 100%; height: auto; aspect-ratio: 76 / 132; object-fit: cover; object-position: top; border-radius: 12px; background: #fff; }
	.ap-door--owner a.ap-btn, .ap-door--owner a.ap-link { grid-column: 1 / -1; }
	.ap-door--owner a.ap-link { justify-self: start; }
	.ap-flow { display: flex; gap: 16px; margin: 0 -24px; padding: 0 24px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; -webkit-overflow-scrolling: touch; }
	.ap-flow-step { flex: 0 0 min(72%, 300px); scroll-snap-align: start; }
	.ap-flow-link { display: none; }
	.ap-network .ap-swipe { display: block; margin: var(--s-3) 0 0; font-size: 14px; color: var(--c-ink-soft); }
}
@media (max-width: 600px) {
	section.ap-hero.ap-home { padding: var(--s-5) 0 var(--s-7); }
	.ap-home .ap-promise { font-size: 34px; }
	.ap-doors { grid-template-columns: 1fr; gap: 12px; margin-top: var(--s-5); }
	.ap-door { padding: 18px; }
	.ap-home .ap-door-title { font-size: 21px; }
	.ap-door a.ap-btn { width: auto; }
	.ap-apps-grid { display: flex; gap: 14px; margin: 0 -16px; padding: 0 16px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; -webkit-overflow-scrolling: touch; }
	.ap-apps-grid > .ap-app { flex: 0 0 82%; scroll-snap-align: start; }
	.ap-app:hover { transform: none; }
	.ap-apps .ap-swipe { display: block; margin: var(--s-3) 0 0; font-size: 14px; color: var(--c-ink-soft); }
	.ap-flow { margin: 0 -16px; padding: 0 16px 8px; scroll-padding-inline: 16px; }
	.ap-flow-step { flex-basis: 76%; }
	.ap-free-card { flex-direction: column; }
	.ap-free-card figure { flex: none; }
	.ap-free-card figure img { height: auto; aspect-ratio: 16 / 10; }
	.ap-free-body { padding: 18px 20px 20px; }
	.ap-faq-item summary { padding: 12px 16px; font-size: 16px; }
	.ap-faq-item p { padding: 0 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.ap-screen picture, .ap-dots i { animation: none; }
}

/* ── Page pro (spec279) : arrivée des annonces Google Ads et Meta ──
   Charte de l'accueil (.ap-home, pas de couleur d'app en grand). Le métier se choisit dès le premier écran
   (.pro-choose : 4 tuiles aux couleurs douces des apps, classe suivie par le pixel Meta de la page) ; deux
   téléphones passent chacun d'une app à l'autre ; cartes des 4 apps avec leur prix et l'essai direct. */
.pro-choose-label { margin: var(--s-6) 0 var(--s-3); font-size: 14px; font-weight: 700; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; color: var(--c-ink-soft); }
.pro-choose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pro-choose a {
	position: relative; display: flex; align-items: center; gap: 14px; min-height: 80px; box-sizing: border-box; padding: 14px 16px;
	border: 1px solid transparent; border-radius: 20px; background: var(--ap-tint); color: var(--c-ink); text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pro-choose a:hover { transform: translateY(-2px); border-color: var(--ap-ink); box-shadow: var(--shadow-hover); color: var(--c-ink); }
.pro-choose a:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.pro-choose img { flex: none; width: 44px; height: 44px; }
.pro-choose-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 18px; font-weight: 700; line-height: 1.25; }
.pro-choose-txt small { font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--ap-ink); }
.pro-choose a > .icon { flex: none; font-size: 20px; color: var(--ap-ink); transition: transform .18s ease; }
.pro-choose a:hover > .icon { transform: translateX(3px); }
a.pro-choose-alt { margin-top: var(--s-3); }
.ap-pro .ap-checks { margin-top: var(--s-3); }

/* Deux captures par téléphone, en fondu ; le second téléphone change 2,5 s après le premier. */
.ap-screen--2 picture { animation-name: ap-slide2; animation-duration: 10s; }
.ap-screen--2 picture:nth-child(2) { animation-delay: -5s; }
.ap-duo .ap-phone--pro .ap-screen--2 picture:nth-child(1) { animation-delay: -2.5s; }
.ap-duo .ap-phone--pro .ap-screen--2 picture:nth-child(2) { animation-delay: -7.5s; }
@keyframes ap-slide2 { 0%, 46% { opacity: 1; } 50%, 96% { opacity: 0; } 100% { opacity: 1; } }

/* Bandeau d'actualité (facturation électronique) */
.pro-band { padding: 14px 0; background: var(--c-deep); color: #fff; }
.pro-band .ap-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 20px; text-align: center; }
.pro-band p { margin: 0; font-size: 16px; line-height: 1.5; color: #fff; }
.pro-band strong { color: #fff; }
.pro-band a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #fff; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.pro-band a:hover { color: #fff; }

/* Sections de la page : teinte de l'accueil (sur-titres, pastilles d'icônes) ; chaque carte d'app reprend la sienne. */
.ap-pro-apps, .pro-why, .pro-einvoice, .pro-site, .pro-guide { --ap-tint: var(--c-accent-soft); --ap-ink: var(--c-accent-ink); }

/* Les quatre apps */
.ap-pro-apps .ap-head { max-width: 860px; }
.ap-pro-apps .pricing-multi-activity { max-width: 860px; margin: var(--s-6) 0 0; padding: 14px 18px; border-radius: 16px; background: var(--c-accent-soft); color: var(--c-ink); font-size: 16px; line-height: 1.55; }
.pro-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.pro-app { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--c-line); border-radius: 24px; background: var(--c-surface); }
.pro-app .ap-app-visual { height: 180px; }
.pro-app-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 12px; padding: 20px 22px 18px; }
.pro-app-body > p { margin: 0; }
.ap-apps .pro-app .ap-app-name { font-size: 19px; }
.pro-app .ap-app-name a { color: var(--c-ink); text-decoration: none; }
.pro-app .ap-app-name a:hover { text-decoration: underline; }
.pro-app .ap-app-promise { font-size: 20px; }
.pro-app-list { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.45; color: var(--c-ink-soft); }
.pro-app-list li { display: flex; align-items: flex-start; gap: 8px; }
.pro-app-list .icon { flex: none; margin-top: 2px; color: var(--app-sante-ink); font-size: 17px; stroke-width: 2.6; }
.pro-app-body > p.pro-app-price { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--c-line); font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--c-ink); }
.pro-app a.ap-btn { min-height: 52px; padding: 8px 14px; gap: 8px; font-size: 15px; }
.pro-app a.ap-link { align-self: center; min-height: 40px; font-size: 15px; }

/* Prêt en 2 minutes : création directe par métier */
.pro-start { flex-direction: column; align-items: flex-start; gap: 12px; }
.pro-start > p { margin: 0; font-size: 17px; font-weight: 700; color: var(--c-ink); }

/* Ce que les quatre apps ont en commun */
section.pro-why { background: var(--c-bg); }
.pro-why .ap-head { max-width: 860px; }
.pro-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.pro-features li { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--c-line); border-radius: 24px; background: var(--c-surface); }
.pro-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--c-accent-soft); color: var(--c-accent-ink); font-size: 22px; }
.pro-why .pro-feature-title { margin: 0; font-family: var(--font-body); font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--c-ink); }
.pro-features p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--c-ink-soft); }

/* Facturation électronique */
section.pro-einvoice, section.pro-site, section.pro-guide { scroll-margin-top: 80px; }
section.pro-einvoice { background: var(--c-surface); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.pro-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: var(--s-7); }
.pro-split .ap-h2 { margin: var(--s-3) 0 var(--s-4); }
.pro-split .ap-sub + .ap-sub { margin-top: var(--s-4); }
.pro-fe-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px; border: 1px solid var(--c-line); border-radius: 24px; background: var(--c-bg); }
.pro-fe-card > p.pro-fe-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--c-ink); }
.pro-fe-links { display: flex; flex-direction: column; align-self: stretch; gap: 10px; }
.pro-fe-links a {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 10px 20px;
	border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-ink); font-size: 16px; font-weight: 600; line-height: 1.3; text-decoration: none;
}
.pro-fe-links a::after { content: '\2192'; flex: none; color: var(--c-accent-ink); }
.pro-fe-links a:hover { background: var(--c-accent-soft); color: var(--c-ink); }

/* Site internet et boutique */
section.pro-site { background: var(--c-bg); }
.pro-site-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-areas: "head shot" "more shot"; column-gap: var(--s-7); row-gap: var(--s-5); align-items: start; }
.pro-site-head { grid-area: head; display: flex; flex-direction: column; gap: var(--s-3); }
.pro-site-shot { grid-area: shot; align-self: center; margin: 0; }
.pro-site-shot a { display: block; }
.pro-site-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--c-line); border-radius: 18px; box-shadow: 0 18px 44px rgba(18, 64, 60, .14); }
.pro-site-shot figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--c-ink-soft); text-align: center; }
.pro-site-more { grid-area: more; display: flex; flex-direction: column; gap: var(--s-4); }
.pro-site-more p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--c-ink-soft); }
.pro-site-more strong { color: var(--c-ink); }
.pro-site-more a { color: var(--c-accent-ink); font-weight: 600; }

/* Guide d'utilisation */
section.pro-guide { background: var(--c-surface); border-top: 1px solid var(--c-line); }
.pro-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.pro-links a {
	display: flex; flex-direction: column; gap: 10px; height: 100%; box-sizing: border-box; padding: 24px; border: 1px solid var(--c-line);
	border-radius: 24px; background: var(--c-bg); color: var(--c-ink); text-decoration: none; transition: box-shadow .2s ease, transform .2s ease;
}
.pro-links a:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); color: var(--c-ink); }
.pro-link-title { font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.pro-link-text { font-size: 16px; line-height: 1.55; color: var(--c-ink-soft); }

/* Quatre colonnes : le libellé d'essai tient sur une ligne sans la flèche (« Kostenlosen Bereich anlegen », 196 px). */
@media (min-width: 1181px) {
	.pro-app-body { padding-right: 20px; padding-left: 20px; }
	.pro-app a.ap-btn { padding: 8px 12px; }
	.pro-app a.ap-btn .icon { display: none; }
}
@media (max-width: 1180px) {
	.pro-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
	.pro-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pro-split { grid-template-columns: 1fr; gap: var(--s-6); }
	.pro-site-grid { grid-template-columns: 1fr; grid-template-areas: "head" "shot" "more"; }
}
@media (max-width: 900px) {
	.pro-links { grid-template-columns: 1fr; gap: 12px; }
	.pro-links a, .pro-features li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; column-gap: 14px; row-gap: 4px; padding: 18px; }
	.pro-links .pro-ic, .pro-features .pro-ic { grid-row: span 2; }
}
@media (max-width: 600px) {
	.pro-choose-label { margin: var(--s-5) 0 var(--s-3); }
	.pro-choose { gap: 10px; }
	.pro-choose a { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; padding: 14px; border-radius: 18px; }
	.pro-choose img { width: 36px; height: 36px; }
	.pro-choose a > .icon { position: absolute; top: 14px; right: 14px; }
	.pro-choose-txt { font-size: 17px; }
	.pro-choose-txt small { font-size: 13px; }
	.pro-band p { font-size: 15px; }
	.pro-apps { display: flex; gap: 14px; margin: 0 -16px; padding: 0 16px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; -webkit-overflow-scrolling: touch; }
	.pro-apps > .pro-app { flex: 0 0 86%; scroll-snap-align: start; }
	.pro-app .ap-app-visual { height: 150px; }
	.pro-app-body { padding: 18px 18px 14px; }
	.pro-features { grid-template-columns: 1fr; gap: 12px; }
	.pro-why .ap-sub, .pro-einvoice .ap-sub { font-size: 16px; }
	.pro-fe-card { padding: 20px; }
}
/* Petits téléphones (360 px) : les deux rangées de tuiles restent dans le premier écran. */
@media (max-width: 380px) {
	.ap-pro .ap-promise { font-size: 31px; }
	.ap-pro .ap-lead { font-size: 16px; }
	.pro-choose-label { margin-top: var(--s-4); }
}
@media (prefers-reduced-motion: reduce) {
	.pro-choose a, .pro-choose a > .icon, .pro-links a { transition: none; }
	.pro-choose a:hover, .pro-links a:hover { transform: none; }
}