/* ============================================================
   RDV Entretien — Zone MARKETING, direction « Chaleureux et vivant »
   Pages : index.html (landing), cgv / mentions-legales /
   confidentialite (légales), login / register / verify-email (auth).
   Chargé APRÈS /style.css (tokens + composants communs).
   Voir docs/DESIGN.md.

   Principes de la zone :
   - deux températures, comme une pompe à chaleur : bleu clim pour agir
     (l'outil), mandarine pour « à vous de jouer », menthe pour « fait »,
     corail pour le retard ; l'encre marine pour les textes ;
   - une seule audace : le panneau bleu clim du héros (la clim murale qui
     souffle, le soleil dans le coin, le vrai tableau de bord et le rappel
     reçu par le client, qui déborde du cadre). Le reste est calme, aéré,
     aligné à gauche, avec des mises en page qui changent d'une section à
     l'autre (jamais une grille de cartes identiques) ;
   - de grands titres en Instrument Sans 650, serrés ; le corps reste
     simple et lisible ;
   - formes rondes : 12 px les boutons, 16-20 px les cartes, 28-36 px les
     grands panneaux ;
   - aucun libellé en capitales, aucun !important.
   ============================================================ */

/* ------------------------------------------------------------
   0. Jetons de la zone (--mk-*)
   Chaque --mk-* lit le jeton commun de style.css (direction « Chaleureux »)
   et garde en repli la valeur de la maquette validée (jetons.css) : la
   zone reste juste même si une page charge un socle plus ancien. Seuls
   les jetons propres à la landing (illustrations, panneaux, échelle des
   grands titres) ont une valeur ici.
   ------------------------------------------------------------ */
:root {
  /* Marque */
  --mk-clim: var(--clim, #1463ff);                 /* bleu clim : actions (texte blanc 4,9:1) */
  --mk-on-clim: var(--on-primary, #ffffff);
  --mk-mandarine: var(--mandarine, #ff7a1a);       /* « à vous de jouer » : points, soleil, jamais du texte */
  --mk-menthe: var(--menthe, #14a86b);             /* fait (traits décoratifs) */
  --mk-corail: var(--corail, #f0484e);             /* retard (liseré) */
  --mk-check: var(--success, #0e9160);             /* coches : icône ≥ 3:1 */

  /* Surfaces */
  --mk-bg: var(--bg, #f2f5fb);                     /* ciel très pâle */
  --mk-surface: var(--surface, #ffffff);
  --mk-surface-2: var(--surface-muted, #f7f9fd);
  --mk-surface-hover: var(--surface-hover, #eef2f9);
  --mk-elevated: var(--bg-elevated, #ffffff);

  /* Textes (encre marine, jamais de noir) */
  --mk-text: var(--text, #0e1b2e);
  --mk-text-muted: var(--text-muted, #46546b);
  --mk-text-subtle: var(--text-subtle, #5f6c82);

  /* Bordures */
  --mk-border: var(--border, #e3e9f3);
  --mk-border-strong: var(--border-strong, #cfd8e6);
  --mk-border-hover: var(--border-hover, #b6c2d6);

  /* Teintes douces et textes colorés (AA sur leur teinte) */
  --mk-primary-soft: var(--primary-soft, #e8f0ff);
  --mk-primary-soft-2: var(--primary-soft-2, #d4e2ff);
  --mk-primary-text: var(--primary-text, #0f4fd1);
  --mk-todo-soft: var(--todo-soft, #fff0e3);
  --mk-todo-border: var(--todo-border, #ffd6b5);
  --mk-todo-text: var(--todo-text, #a94a05);
  --mk-success-soft: var(--success-soft, #e2f6ec);
  --mk-success-text: var(--success-text, #0b6644);
  --mk-danger-soft: var(--danger-soft, #ffeced);
  --mk-danger-border: var(--danger-border, #ffc9cc);
  --mk-danger-text: var(--danger-text, #b3242b);

  /* Propres à la landing : panneaux et illustrations */
  --mk-warm-panel: #fff0e3;      /* panneau pêche (extrait « alerte ») */
  --mk-sun-core: #ff9447;        /* cœur du soleil */
  --mk-unit: #ffffff;            /* carrosserie de la clim murale */
  --mk-unit-flap: rgb(20 99 255 / 0.22);
  --mk-air: rgb(255 255 255 / 0.55);
  --mk-cta-bg: #0e1b2e;          /* dernier appel : panneau encre */
  --mk-cta-text: #ffffff;
  --mk-cta-muted: #b0bdd0;       /* 9:1 sur l'encre */

  /* Ombres teintées marine, jamais grises */
  --mk-shadow-1: var(--shadow-sm, 0 1px 2px rgb(11 37 68 / 0.06));
  --mk-shadow-2: var(--shadow, 0 2px 4px rgb(11 37 68 / 0.04), 0 10px 24px -8px rgb(11 37 68 / 0.14));
  --mk-shadow-3: var(--shadow-xl, 0 4px 12px rgb(11 37 68 / 0.06), 0 28px 56px -18px rgb(11 37 68 / 0.32));
  --mk-shadow-stage: 0 30px 60px -24px rgb(5 20 60 / 0.6), 0 2px 6px rgb(5 20 60 / 0.12);
  --mk-shadow-press: var(--shadow-action, 0 6px 16px -6px rgb(20 99 255 / 0.55));  /* bleu « posé » */

  /* Rayons (boutons 12 px, cartes 20 px, grands panneaux 28-36 px) */
  --mk-r-btn: var(--radius-btn, 12px);
  --mk-r-md: 16px;
  --mk-r-lg: var(--radius-card, 20px);
  --mk-r-xl: 28px;
  --mk-r-2xl: 36px;

  /* Typo : Instrument Sans seule ; 650 pour les grands titres */
  --mk-w-strong: var(--weight-strong, 650);
  --mk-display: clamp(44px, 3.4vw + 17px, 80px);
  --mk-h2: clamp(32px, 1.9vw + 18px, 50px);
  --mk-h3: clamp(22px, 0.7vw + 15px, 28px);
  --mk-lead: clamp(17px, 0.28vw + 15px, 20px);
  --mk-track-display: -0.038em;
  --mk-track-title: -0.028em;

  /* Rythme */
  --mk-gutter: 32px;
  --mk-section: clamp(80px, 6vw + 30px, 136px);
  --mk-ease-out: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Sombre « nuit bleue » : le bleu clim ne change pas, la marque garde son caractère.
   Les alias ci-dessus suivent d'eux-mêmes le thème ; seuls les replis changent. */
[data-theme='dark'] {
  --mk-mandarine: var(--mandarine, #ff8a3d);
  --mk-menthe: var(--menthe, #34cf8b);
  --mk-corail: var(--corail, #ff6b70);
  --mk-check: var(--success, #34cf8b);

  --mk-bg: var(--bg, #0b1220);
  --mk-surface: var(--surface, #131d2e);
  --mk-surface-2: var(--surface-muted, #172336);
  --mk-surface-hover: var(--surface-hover, #1b2a40);
  --mk-elevated: var(--bg-elevated, #18243a);

  --mk-text: var(--text, #edf2f9);
  --mk-text-muted: var(--text-muted, #b0bdd0);
  --mk-text-subtle: var(--text-subtle, #8fa0b8);

  --mk-border: var(--border, #22314a);
  --mk-border-strong: var(--border-strong, #31435f);
  --mk-border-hover: var(--border-hover, #42577a);

  --mk-primary-soft: var(--primary-soft, rgb(20 99 255 / 0.18));
  --mk-primary-soft-2: var(--primary-soft-2, rgb(20 99 255 / 0.3));
  --mk-primary-text: var(--primary-text, #92b8ff);
  --mk-todo-soft: var(--todo-soft, rgb(255 138 61 / 0.14));
  --mk-todo-border: var(--todo-border, rgb(255 138 61 / 0.34));
  --mk-todo-text: var(--todo-text, #ffb784);
  --mk-success-soft: var(--success-soft, rgb(52 207 139 / 0.14));
  --mk-success-text: var(--success-text, #82e2b5);
  --mk-danger-soft: var(--danger-soft, rgb(255 107 112 / 0.14));
  --mk-danger-border: var(--danger-border, rgb(255 107 112 / 0.34));
  --mk-danger-text: var(--danger-text, #ffa7aa);

  /* Panneau « alerte » : la surface de la nuit, avec un liseré mandarine léger
     (.mk-stage-warm) ; un aplat mandarine translucide virait au brun */
  --mk-warm-panel: var(--mk-surface-2);
  --mk-sun-core: #ffa366;
  --mk-unit: #eaf0fb;
  --mk-unit-flap: rgb(20 99 255 / 0.28);
  --mk-air: rgb(255 255 255 / 0.45);
  --mk-cta-bg: #16233a;

  --mk-shadow-1: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.4));
  --mk-shadow-2: var(--shadow, 0 2px 6px rgb(0 0 0 / 0.35), 0 12px 28px -10px rgb(0 0 0 / 0.5));
  --mk-shadow-3: var(--shadow-xl, 0 4px 12px rgb(0 0 0 / 0.4), 0 30px 60px -20px rgb(0 0 0 / 0.7));
  --mk-shadow-stage: 0 30px 60px -22px rgb(0 0 0 / 0.65), 0 2px 6px rgb(0 0 0 / 0.3);
}

/* Fond de la zone, et du document assorti (rebond du défilement) */
.landing,
.legal-shell { background: var(--mk-bg); color: var(--mk-text); }
body:has(> .landing),
body:has(> .legal-shell) { background: var(--mk-bg); }

/* ------------------------------------------------------------
   1. Base commune aux pages marketing
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.mk-container {
  width: 100%;
  max-width: calc(1180px + 2 * var(--mk-gutter));
  margin-inline: auto;
  padding-inline: var(--mk-gutter);
}

.mk-section { padding-block: var(--mk-section); }
/* Ancres de la nav : la barre du haut est collante (72 px) */
section[id] { scroll-margin-top: 96px; }

.mk-header { margin-bottom: 56px; max-width: 680px; }
.mk-h2 {
  font-size: var(--mk-h2);
  font-weight: var(--mk-w-strong);
  line-height: 1.04;
  letter-spacing: var(--mk-track-title);
  color: var(--mk-text);
  text-wrap: balance;
}
.mk-sub {
  margin-top: 20px;
  font-size: var(--mk-lead);
  line-height: 1.55;
  color: var(--mk-text-muted);
  max-width: 44ch;
}

/* Lien texte dans un paragraphe */
.mk-link {
  color: var(--link);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-fast);
}
.mk-link:hover { text-decoration-color: currentColor; }

/* Pages de connexion : icône + nom, en plus grand que dans la barre latérale */
.auth-brand .brand-logo { width: 44px; height: 44px; }
.auth-brand .brand-name { font-size: var(--text-xl); }
.auth-brand .brand-lockup { height: 52px; }

/* Boutons du socle (couleurs et ombre « posée » : style.css), à l'échelle de
   la landing : plus hauts, flèche qui avance au survol. */
.landing .btn-sm { height: 40px; padding: 0 14px; font-size: 14.5px; border-radius: var(--mk-r-btn); }
.landing .btn-lg { height: 56px; padding: 0 24px; gap: 10px; font-size: 17px; border-radius: 14px; }
.landing .btn-lg .icon-md { width: 18px; height: 18px; transition: transform var(--dur-base) var(--mk-ease-out); }
.landing .btn-icon { border-radius: var(--mk-r-btn); }
@media (hover: hover) {
  .landing .btn-primary:hover .icon-md { transform: translateX(3px); }
}

/* ------------------------------------------------------------
   2. Landing — structure et barre du haut
   ------------------------------------------------------------ */
.landing {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.landing-main { flex: 1; }

/* Barre collante, fond ciel translucide ; filet et ombre douce dès que
   l'on quitte le haut (classe posée par le script de la page). */
.landing-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--mk-bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid transparent;
  padding-top: env(safe-area-inset-top);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.landing-topbar.is-scrolled {
  border-bottom-color: var(--mk-border);
  box-shadow: 0 10px 30px -22px rgb(11 37 68 / 0.45);
}
.landing-topbar-inner {
  height: 72px;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.landing-topbar .brand,
.landing-footer .brand { font-size: 17px; font-weight: var(--mk-w-strong); letter-spacing: -0.02em; }
.landing-topbar .brand-lockup { height: 42px; }
.landing-footer .brand-lockup { height: 38px; }
.landing-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: auto;
}
.landing-nav-link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--mk-text-muted);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.landing-nav-link:hover { color: var(--mk-text); background: var(--mk-surface-hover); }
.landing-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
.landing-actions .btn-icon { width: 40px; height: 40px; }
.landing-actions .btn-ghost { color: var(--mk-text); }

/* ------------------------------------------------------------
   3. Landing — héros
   ------------------------------------------------------------ */
.hero { padding-block: clamp(12px, 2.2vw, 36px) clamp(72px, 6vw + 16px, 120px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.hero-copy { min-width: 0; }

/* Trois lignes serrées : « Ne perdez / plus jamais / un entretien. »
   Largeur 94 % (police variable) : un rien plus condensé que les autres titres. */
.hero-title {
  font-size: var(--mk-display);
  font-weight: var(--mk-w-strong);
  font-stretch: 94%;
  line-height: 0.98;
  letter-spacing: var(--mk-track-display);
  color: var(--mk-text);
  max-width: 12ch;
  text-wrap: balance;
}
.hero-lead {
  margin-top: 28px;
  font-size: var(--mk-lead);
  line-height: 1.55;
  color: var(--mk-text-muted);
  max-width: 32em;
}
.hero-lead strong { color: var(--mk-text); font-weight: var(--weight-semibold); }
/* Le prix : une ligne à part, plus courte, en encre */
.hero-lead.hero-price { margin-top: 18px; font-size: 17px; }
.hero-price strong { font-weight: var(--mk-w-strong); }
.hero-source { color: var(--mk-text-subtle); }

.hero-actions {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
/* Conditions et offre de lancement : du texte, pas une pastille */
.hero-fineprint {
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--mk-text-subtle);
  max-width: 52ch;
  text-wrap: balance;
}
.hero-fineprint strong { display: block; color: var(--mk-text-muted); font-weight: var(--weight-semibold); }
/* Le dernier « · » ne finit jamais seul une ligne : l'offre de lancement a sa ligne */
.hero-fineprint-sep { display: none; }

/* ---- Aperçu produit, sur le panneau bleu clim ----
   Le panneau (.preview-stage) porte la clim murale et son souffle (SVG en
   haut à gauche) et le soleil (deux disques CSS dans le coin haut droit).
   La fenêtre du tableau de bord est dans le flux, décalée vers la droite
   pour laisser l'air passer. La carte « rappel » est sous le panneau et
   remonte dessus : elle ne mord que sur la marge basse du panneau, jamais
   sur une ligne de la liste, et déborde à gauche du cadre. */
.preview {
  --stage-pad-left: clamp(104px, 10vw, 150px);
  position: relative;
  min-width: 0;
}
.preview-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 124px 28px 84px var(--stage-pad-left);
  border-radius: var(--mk-r-2xl);
  background: var(--mk-clim);
}
.preview-stage::before,
.preview-stage::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.preview-stage::before { width: 312px; height: 312px; top: -170px; right: -142px; background: var(--mk-mandarine); }
.preview-stage::after { width: 212px; height: 212px; top: -120px; right: -92px; background: var(--mk-sun-core); }
.preview-art {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 250px;
  height: auto;
  overflow: visible;
}
.art-unit { fill: var(--mk-unit); }
.art-unit-flap { fill: none; stroke: var(--mk-unit-flap); stroke-width: 5; stroke-linecap: round; }
.art-unit-led { fill: var(--mk-menthe); }
.art-air {
  fill: none;
  stroke: var(--mk-air);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 260;
  animation: mk-blow 1400ms var(--mk-ease-out) 350ms backwards;
}
.art-air-2 { opacity: 0.75; animation-delay: 470ms; }
.art-air-3 { opacity: 0.55; animation-delay: 590ms; }
@keyframes mk-blow { from { stroke-dashoffset: 260; opacity: 0; } to { stroke-dashoffset: 0; } }

.preview-window {
  position: relative;
  background: var(--mk-surface);
  border-radius: var(--mk-r-lg);
  box-shadow: var(--mk-shadow-stage);
  overflow: hidden;
}
.preview-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 var(--space-4);
  background: var(--mk-surface-2);
  border-bottom: 1px solid var(--mk-border);
}
/* Adresse de l'appli, dans une barre d'adresse arrondie */
.preview-url {
  padding: 3px 14px;
  border-radius: var(--radius-full);
  background: var(--mk-surface);
  box-shadow: inset 0 0 0 1px var(--mk-border);
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--mk-text-subtle);
}
.preview-body { padding: 18px 18px 20px; }
.preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 14px;
}
.preview-head-text { min-width: 0; }
.preview-title { font-size: 18px; font-weight: var(--mk-w-strong); line-height: 1.2; letter-spacing: -0.02em; }
.preview-sub {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--mk-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.preview-sub .dot-divider { margin: 0 6px; }
/* Image du bouton principal de l'appli (non interactif : l'aperçu est aria-hidden) */
.preview-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--mk-clim);
  color: var(--mk-on-clim);
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  box-shadow: 0 4px 10px -4px rgb(20 99 255 / 0.55);
}
.preview-cta .icon-sm { width: 13px; height: 13px; }
/* Téléphone : le bouton garde son libellé, la salutation passe sur deux
   lignes nettes (« Bonjour Jean » / « lundi 27 avril »), sans point. */
@media (min-width: 380px) and (max-width: 640px) {
  .preview-sub { white-space: normal; }
  .preview-sub-part { display: block; }
  .preview-sub .dot-divider { display: none; }
}
/* Très petits écrans : icône seule, pour garder la salutation entière */
@media (max-width: 379px) {
  .preview-cta { width: 32px; padding: 0; justify-content: center; }
  .preview-cta-label { display: none; }
}

/* Chiffres du jour : quatre tuiles arrondies, le chiffre d'abord (comme dans
   l'appli), chacune dans sa température : à traiter (mandarine), en retard
   (corail), cette semaine (neutre), emails envoyés (bleu, l'outil a travaillé). */
.preview-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.preview-kpi {
  min-width: 0;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 2px;
  padding: 10px 11px 9px;
  border-radius: 14px;
  background: var(--mk-surface-2);
  box-shadow: inset 0 0 0 1px var(--mk-border);
}
.preview-kpi-label {
  display: block;
  font-size: 11.5px;
  font-weight: var(--weight-medium);
  line-height: 1.25;
  color: var(--mk-text-muted);
  overflow-wrap: anywhere;
}
.preview-kpi-value {
  display: block;
  font-size: 24px;
  font-weight: var(--weight-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--mk-text);
  font-variant-numeric: tabular-nums;
}
.preview-kpi.is-todo { background: var(--mk-todo-soft); box-shadow: inset 0 0 0 1px var(--mk-todo-border); }
.preview-kpi.is-todo .preview-kpi-value { color: var(--mk-todo-text); }
/* Retard > 0 : en corail, comme sur le vrai tableau de bord */
.preview-kpi.is-alert { background: var(--mk-danger-soft); box-shadow: inset 0 0 0 1px var(--mk-danger-border); }
.preview-kpi.is-alert .preview-kpi-value { color: var(--mk-danger-text); }
.preview-kpi.is-sent { background: var(--mk-primary-soft); box-shadow: inset 0 0 0 1px var(--mk-primary-soft-2); }
.preview-kpi.is-sent .preview-kpi-value { color: var(--mk-primary-text); }

.preview-list-title {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: var(--mk-w-strong);
  letter-spacing: -0.01em;
}
.preview-list {
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--mk-border);
  overflow: hidden;
}
/* Même lecture que .rdv-row : [échéance + délai] [nom / note] [statut] */
.preview-row {
  position: relative;
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-3);
  padding: 10px 12px 10px 14px;
}
.preview-row + .preview-row { border-top: 1px solid var(--mk-border); }
/* Retard : liseré corail à gauche */
.preview-row.is-late::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--mk-corail);
}
/* La ligne dont parle le rappel : se teinte quand la carte arrive */
.preview-row.is-current {
  background: var(--mk-primary-soft);
  animation: mk-row-glow 900ms var(--mk-ease-out) 1300ms backwards;
}
@keyframes mk-row-glow { from { background-color: transparent; } }
.preview-when { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.preview-date {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--mk-text);
  white-space: nowrap;
}
.preview-row .due { font-size: 11.5px; }
.preview-row-body { min-width: 0; }
.preview-row-name {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.preview-row-sub {
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--mk-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.preview-row .status { font-size: 12px; }
.preview-row .status-dot { width: 8px; height: 8px; }

/* Carte « rappel envoyé » : ce que reçoit le client, depuis l'adresse de
   l'artisan. Arrive un instant après le tableau de bord. */
.preview-email {
  position: relative;
  z-index: 2;
  width: min(344px, 74%);
  margin: -64px 0 0 -44px;
  padding: 18px 18px 16px;
  background: var(--mk-elevated);
  border-radius: var(--mk-r-lg);
  box-shadow: var(--mk-shadow-3), inset 0 0 0 1px var(--mk-border);
  animation: mk-rise 700ms var(--mk-ease-out) 700ms backwards;
}
@keyframes mk-rise { from { opacity: 0; transform: translateY(18px); } }
.preview-email-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--mk-text);
}
.preview-email-icon {
  width: 34px;
  height: 34px;
  padding: 8px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--mk-todo-soft);
  color: var(--mk-todo-text);
}
.preview-email-meta {
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-3);
  row-gap: 3px;
  font-size: 12.5px;
  line-height: 1.5;
}
.preview-email-meta dt { color: var(--mk-text-subtle); }
.preview-email-meta dd { margin: 0; color: var(--mk-text); font-weight: var(--weight-medium); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-email-text {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--mk-border-strong);
  font-size: 13px;
  line-height: 1.55;
  color: var(--mk-text-muted);
}

/* ------------------------------------------------------------
   4. Landing — l'essentiel en chiffres (préfixe mk- : .fact appartient à la fiche client)
   Un bandeau blanc arrondi sous le héros ; le chiffre d'affaires, premier
   argument, prend plus de place que les deux autres.
   ------------------------------------------------------------ */
.mk-facts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr));
  padding: 10px;
  border-radius: var(--mk-r-xl);
  background: var(--mk-surface);
  box-shadow: var(--mk-shadow-1), inset 0 0 0 1px var(--mk-border);
}
.mk-fact { padding: 26px 28px 24px; min-width: 0; }
.mk-fact + .mk-fact { border-left: 1px solid var(--mk-border); }
.mk-fact-value {
  font-size: clamp(34px, 1.4vw + 20px, 46px);
  font-weight: var(--mk-w-strong);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--mk-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mk-fact:first-child .mk-fact-value { font-size: clamp(40px, 2.2vw + 20px, 60px); }
.mk-fact-caption {
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--mk-text-muted);
  max-width: 30ch;
}

/* ------------------------------------------------------------
   5. Landing — comment ça marche (étapes en boucle) + deux fonctions
   ------------------------------------------------------------ */
/* Titre à gauche (collant), étapes à droite */
.how-top {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.how-top .how-header { position: sticky; top: 112px; margin-bottom: 0; }

/* Les numéros sont reliés par un filet bleu (l'aller) ; un filet menthe en
   pointillés, à gauche, remonte de la dernière étape à la première (le
   cycle recommence l'année suivante) et rentre dans le 1 par une pointe. */
.steps {
  --step-num: 60px;
  --loop-w: 30px;
  --steps-gap: 48px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--steps-gap);
  padding-left: var(--loop-w);
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: var(--step-num) minmax(0, 1fr);
  column-gap: 24px;
  min-width: 0;
}
.step:not(:last-child)::before {
  content: '';
  position: absolute;
  top: calc(var(--step-num) + 8px);
  bottom: calc(-1 * var(--steps-gap) + 8px);
  left: calc(var(--step-num) / 2 - 1px);
  width: 2px;
  border-radius: 2px;
  background: var(--mk-primary-soft-2);
}
/* Boucle de retour : trois segments en pointillés, arrondis aux extrémités */
.step::after {
  content: '';
  position: absolute;
  left: calc(-1 * var(--loop-w) + 6px);
  width: calc(var(--loop-w) - 12px);
  border-left: 2px dashed var(--mk-menthe);
  pointer-events: none;
}
.step:first-child::after {
  top: calc(var(--step-num) / 2 - 1px);
  bottom: calc(-1 * var(--steps-gap));
  border-top: 2px dashed var(--mk-menthe);
  border-top-left-radius: 16px;
}
.step:not(:first-child):not(:last-child)::after { top: 0; bottom: calc(-1 * var(--steps-gap)); }
.step:last-child::after {
  top: 0;
  height: calc(var(--step-num) / 2 + 1px);
  border-bottom: 2px dashed var(--mk-menthe);
  border-bottom-left-radius: 16px;
}
.step-num {
  position: relative;
  width: var(--step-num);
  height: var(--step-num);
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Bleu doux, sans ombre : un numéro n'est pas un bouton (carré arrondi ~30 %, la
     même forme que les numéros de la mise en route et des paramètres) */
  background: var(--mk-primary-soft);
  color: var(--mk-primary-text);
  font-size: 26px;
  font-weight: var(--mk-w-strong);
  letter-spacing: -0.02em;
}
/* Pointe de la boucle, qui rentre dans le 1 */
.step:first-child .step-num::before {
  content: '';
  position: absolute;
  left: -13px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: 2px solid var(--mk-menthe);
  border-right: 2px solid var(--mk-menthe);
  transform: rotate(45deg);
}
.step-body { min-width: 0; padding-top: 6px; }
.step-title {
  font-size: clamp(19px, 0.5vw + 15px, 23px);
  font-weight: var(--mk-w-strong);
  line-height: 1.25;
  letter-spacing: -0.018em;
}
.step-desc {
  margin-top: 8px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--mk-text-muted);
  max-width: 50ch;
}

/* Deux fonctions en rangées alternées : le texte d'un côté, un extrait du
   produit de l'autre, posé sur un panneau teinté dont il déborde. Extraits
   aria-hidden : le texte à côté dit la même chose. */
.mk-features {
  margin-top: clamp(96px, 8vw, 144px);
  display: flex;
  flex-direction: column;
  gap: clamp(88px, 8vw, 136px);
}
.mk-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.mk-feature-copy { min-width: 0; max-width: 460px; }
/* Une rangée sur deux, l'extrait passe à gauche */
.mk-feature:nth-child(even) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.mk-feature:nth-child(even) .mk-feature-copy { order: 2; }
.mk-feature-title {
  font-size: var(--mk-h3);
  font-weight: var(--mk-w-strong);
  line-height: 1.12;
  letter-spacing: -0.024em;
}
.mk-feature-desc {
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--mk-text-muted);
}

/* Panneau teinté : pêche pour l'alerte (en sombre : surface + liseré mandarine), bleu
   pâle pour l'agenda */
.mk-stage {
  position: relative;
  min-width: 0;
  border-radius: var(--mk-r-xl);
  padding: 0 clamp(20px, 4vw, 56px) clamp(28px, 4vw, 52px);
}
.mk-stage-warm { background: var(--mk-warm-panel); margin-top: 48px; }
[data-theme='dark'] .mk-stage-warm { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mk-mandarine) 28%, transparent); }
.mk-stage-cool { background: var(--mk-primary-soft); padding-top: clamp(28px, 4vw, 52px); }

.mk-shot {
  position: relative;
  width: 100%;
  max-width: 460px;
  min-width: 0;
  padding: 22px;
  background: var(--mk-surface);
  border-radius: var(--mk-r-lg);
  box-shadow: var(--mk-shadow-3), inset 0 0 0 1px var(--mk-border);
}
/* L'email d'alerte dépasse du haut de son panneau */
.mk-stage-warm .mk-shot { margin: -48px auto 0; }
.mk-shot-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--mk-text);
}
.mk-shot-icon { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; color: var(--mk-todo-text); }
.mk-shot-meta,
.mk-shot-facts {
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  font-size: 14px;
  line-height: 1.45;
}
.mk-shot-meta dt,
.mk-shot-facts dt { color: var(--mk-text-subtle); }
.mk-shot-meta dd,
.mk-shot-facts dd { margin: 0; min-width: 0; color: var(--mk-text); }
.mk-shot-facts dd { font-variant-numeric: tabular-nums; font-weight: var(--weight-medium); }
.mk-shot-meta { padding-bottom: 16px; border-bottom: 1px solid var(--mk-border); }
/* Encadré de l'email d'alerte : même ton « retard » que dans l'email réel */
.mk-alert {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--mk-danger-soft);
  box-shadow: inset 0 0 0 1px var(--mk-danger-border);
}
.mk-alert-kind { font-size: 13px; font-weight: var(--weight-semibold); color: var(--mk-danger-text); }
.mk-alert-name {
  margin-top: 2px;
  font-size: 20px;
  font-weight: var(--mk-w-strong);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--mk-text);
}
.mk-shot-text {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mk-text-muted);
}

/* Extrait « agenda » en deux cartes : en haut à gauche le menu « ⋯ » d'un RDV
   (le vrai est un .menu du socle), en bas à droite, par-dessus, l'événement
   qu'il crée, journée entière comme dans Google Agenda. */
.mk-shot.mk-shot-menu { max-width: 340px; padding: 8px; }
.mk-shot-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--mk-text);
  white-space: nowrap;
}
.mk-shot-item .icon-sm { width: 16px; height: 16px; color: var(--mk-text-subtle); }
.mk-shot-item.is-active { background: var(--mk-primary-soft); color: var(--mk-primary-text); }
.mk-shot-item.is-active .icon-sm { color: var(--mk-primary-text); }
.mk-shot-item .mk-shot-ext { margin-left: auto; }
.mk-shot-divider { height: 1px; margin: 4px 8px; background: var(--mk-border); }
/* Décalée en bas à droite ; ne recouvre que la marge basse du menu */
.mk-shot.mk-shot-cal {
  z-index: 1;
  max-width: 380px;
  margin: -12px 0 0 auto;
  padding: 16px 18px 18px;
}
.mk-event-day { display: flex; align-items: center; font-size: 13px; color: var(--mk-text-muted); }
.mk-event {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--mk-primary-soft);
  box-shadow: inset 3px 0 0 var(--mk-clim);
}
.mk-event-title {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--mk-primary-text);
}
.mk-event-detail { margin-top: 2px; font-size: 13px; color: var(--mk-text-muted); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   6. Landing — avant / après
   « Sans » : du papier, simple filet ; les tracas sont rayés d'un trait
   corail discret, comme on raye une ligne sur un carnet de chantier.
   « Avec » : l'outil, une carte posée et légèrement surélevée, coches
   menthe nues (comme au tarif), sans pastille.
   ------------------------------------------------------------ */
.mk-section-flush { padding-top: 0; }
.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.compare-col { padding: clamp(28px, 3vw, 44px); min-width: 0; border-radius: var(--mk-r-xl); }
.compare-before {
  margin-top: 28px;
  border: 1px solid var(--mk-border-strong);
}
.compare-after {
  background: var(--mk-surface);
  box-shadow: var(--mk-shadow-2), inset 0 0 0 1px var(--mk-border);
}
.compare-title { font-size: 22px; font-weight: var(--mk-w-strong); letter-spacing: -0.018em; }
.compare-before .compare-title { color: var(--mk-text-muted); }
.compare-list {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--mk-text);
}
.compare-before .compare-list li {
  color: var(--mk-text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: color-mix(in srgb, var(--mk-corail) 55%, transparent);
}
.compare-icon {
  width: 24px;
  height: 24px;
  margin-top: 1px;
  padding: 5px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  display: inline-flex;
}
.compare-icon svg { stroke-width: 2.4; }
.compare-before .compare-icon { display: none; }
.compare-after .compare-icon { width: 18px; height: 18px; margin-top: 4px; padding: 0; background: none; color: var(--mk-check); }

/* ------------------------------------------------------------
   7. Landing — pourquoi j'ai créé l'app (bande blanche)
   La dernière phrase de la lettre devient un titre : c'est la thèse.
   ------------------------------------------------------------ */
.founder { background: var(--mk-surface); }
.founder-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.founder-sign {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.founder-avatar {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mk-todo-soft);
  color: var(--mk-todo-text);
  font-size: 18px;
  font-weight: var(--mk-w-strong);
  letter-spacing: 0.01em;
}
.founder-name { font-size: 16px; font-weight: var(--weight-semibold); color: var(--mk-text); }
.founder-role { margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--mk-text-subtle); }
.founder-quote {
  margin: 0;
  font-size: clamp(17px, 0.3vw + 15px, 20px);
  line-height: 1.7;
  color: var(--mk-text);
  max-width: 60ch;
}
.founder-quote p + p { margin-top: 20px; }
.founder-quote strong { font-weight: var(--weight-semibold); }
.founder-quote .founder-punch {
  position: relative;
  margin-top: 40px;
  padding-top: 32px;
  font-size: clamp(24px, 1.1vw + 14px, 32px);
  line-height: 1.18;
  letter-spacing: -0.024em;
  text-wrap: balance;
}
.founder-punch::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 4px;
  border-radius: 4px;
  background: var(--mk-mandarine);
}
.founder-quote .founder-punch strong { font-weight: var(--mk-w-strong); }

/* ------------------------------------------------------------
   8. Landing — crédibilité : une fiche technique (comme la plaque
   signalétique d'une clim), une ligne par engagement, pas de cartes.
   ------------------------------------------------------------ */
.trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 4px clamp(20px, 3vw, 44px);
  border-radius: var(--mk-r-xl);
  background: var(--mk-surface);
  box-shadow: var(--mk-shadow-1), inset 0 0 0 1px var(--mk-border);
}
.trust-item {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 40px;
  align-items: start;
  min-width: 0;
  padding: 26px 0;
}
.trust-item + .trust-item { border-top: 1px solid var(--mk-border); }
.trust-item-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.trust-item-icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--mk-text-subtle); }   /* gris : le bleu reste à l'action */
.trust-item-title {
  font-size: clamp(19px, 0.45vw + 15px, 22px);
  font-weight: var(--mk-w-strong);
  line-height: 1.3;
  letter-spacing: -0.018em;
}
.trust-item-desc {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--mk-text-muted);
  max-width: 58ch;
}

/* ------------------------------------------------------------
   9. Landing — tarif (texte à gauche, carte à droite)
   Une carte blanche nette : l'offre, un simple filet, puis le prix.
   ------------------------------------------------------------ */
.pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.pricing-card {
  position: relative;
  overflow: hidden;
  padding: 36px;
  background: var(--mk-surface);
  border-radius: var(--mk-r-xl);
  box-shadow: var(--mk-shadow-3), inset 0 0 0 1px var(--mk-border);
}
.pricing-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}
.pricing-plan-name { font-size: 17px; font-weight: var(--mk-w-strong); letter-spacing: -0.01em; color: var(--mk-text); }
.pricing-ribbon {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  background: var(--mk-todo-soft);
  box-shadow: inset 0 0 0 1px var(--mk-todo-border);
  color: var(--mk-todo-text);
  font-size: 13.5px;
  font-weight: var(--weight-semibold);
  line-height: 1.35;
}
.pricing-amount {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--mk-border);   /* filet d'un bord à l'autre de la carte */
  margin-inline: -36px;
  padding-inline: 36px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.pricing-currency + .pricing-period { margin-left: 6px; }
.pricing-value {
  font-size: clamp(80px, 4vw + 40px, 104px);
  font-weight: var(--mk-w-strong);
  line-height: 0.9;
  letter-spacing: -0.055em;
  color: var(--mk-text);
}
.pricing-currency { font-size: 40px; font-weight: var(--mk-w-strong); letter-spacing: -0.02em; color: var(--mk-text); }
.pricing-period { font-size: 17px; color: var(--mk-text-muted); }
.pricing-tax { margin-top: 12px; font-size: 14.5px; color: var(--mk-text-subtle); }
.pricing-features {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--mk-text);
}
/* Coche (tracé Lucide « check ») teintée par le jeton, via un masque */
.pricing-features li::before {
  content: '';
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex-shrink: 0;
  background-color: var(--mk-check);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pricing-cta { margin-top: 28px; width: 100%; }
.pricing-reassure {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--mk-text-muted);
}

/* ------------------------------------------------------------
   10. Landing — FAQ (colonne de titre collante + liste à filets)
   ------------------------------------------------------------ */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.faq-aside { position: sticky; top: 112px; }
.faq-contact {
  margin-top: 20px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--mk-text-muted);
  max-width: 34ch;
}
.faq-list { border-top: 1px solid var(--mk-border-strong); }
.faq-item { border-bottom: 1px solid var(--mk-border-strong); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: 22px 2px;
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: clamp(17px, 0.3vw + 15px, 19px);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--mk-text);
  transition: color var(--transition-fast);
}
.faq-item summary::-webkit-details-marker { display: none; }
/* « + » dans une pastille ronde, qui pivote en « × » et passe au bleu à l'ouverture */
.faq-item summary::after {
  content: '';
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--mk-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6c82' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 18px;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px var(--mk-border-strong);
  transition: transform var(--dur-base) var(--mk-ease-out), background-color var(--transition-fast), box-shadow var(--transition-fast);
}
[data-theme='dark'] .faq-item summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0bdd0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E");
}
.faq-item summary:hover { color: var(--mk-primary-text); }
.faq-item summary:hover::after { box-shadow: inset 0 0 0 1px var(--mk-border-hover); }
.faq-item[open] summary::after,
[data-theme='dark'] .faq-item[open] summary::after {
  transform: rotate(45deg);
  background-color: var(--mk-clim);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E");
  box-shadow: none;
}
.faq-item p {
  padding: 0 var(--space-12) 26px 2px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--mk-text-muted);
  max-width: 64ch;
}
.faq-item p strong { color: var(--mk-text); font-weight: var(--weight-semibold); }
.faq-item[open] p { animation: enter-down var(--dur-base) var(--ease-out) backwards; }

/* ------------------------------------------------------------
   11. Landing — dernier appel à l'action
   Panneau encre, soleil mandarine dans le coin : il répond au panneau
   bleu du héros et ferme la page au chaud.
   ------------------------------------------------------------ */
.final-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-10);
  padding: clamp(40px, 5vw, 80px) clamp(24px, 5vw, 72px);
  background: var(--mk-cta-bg);
  border-radius: var(--mk-r-2xl);
}
[data-theme='dark'] .final-cta { box-shadow: inset 0 0 0 1px var(--mk-border); }
.final-cta::before,
.final-cta::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.final-cta::before { width: 360px; height: 360px; top: -196px; right: -148px; background: var(--mk-mandarine); }
.final-cta::after { width: 244px; height: 244px; top: -138px; right: -90px; background: var(--mk-sun-core); }
.final-cta-copy { min-width: 0; }
.final-cta-title {
  font-size: clamp(32px, 2.1vw + 16px, 54px);
  font-weight: var(--mk-w-strong);
  line-height: 1.04;
  letter-spacing: -0.032em;
  color: var(--mk-cta-text);
  max-width: 19ch;
}
.final-cta-sub {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--mk-cta-muted);
  max-width: 46ch;
}
.final-cta .btn { flex-shrink: 0; }

/* ------------------------------------------------------------
   12. Landing — pied de page
   ------------------------------------------------------------ */
.landing-footer {
  padding: 80px 0 calc(var(--space-8) + env(safe-area-inset-bottom));
  background: var(--mk-surface);
  border-top: 1px solid var(--mk-border);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.3fr 1.2fr;
  gap: var(--space-10);
}
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
}
.footer-col-title {
  margin-bottom: var(--space-1);
  font-size: 14px;
  font-weight: var(--mk-w-strong);
  letter-spacing: -0.005em;
  color: var(--mk-text);
}
.footer-link {
  font-size: 15px;
  color: var(--mk-text-muted);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.footer-link:hover { color: var(--mk-text); text-decoration-color: currentColor; }
.footer-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--mk-text-muted);
  overflow-wrap: anywhere;
}
.footer-text strong { color: var(--mk-text); font-weight: var(--weight-semibold); }
.footer-tagline {
  margin-top: var(--space-3);
  font-size: 15px;
  line-height: 1.55;
  color: var(--mk-text-muted);
  max-width: 30ch;
}
.footer-bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--mk-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  font-size: 14px;
  color: var(--mk-text-subtle);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.footer-legal .footer-link { font-size: 14px; }

/* ------------------------------------------------------------
   13. Bouton « Retour en haut » (id + classe .visible lus par le script)
   ------------------------------------------------------------ */
.back-to-top {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: var(--z-floating);
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 14px;
  background: var(--mk-elevated);
  color: var(--mk-text-muted);
  box-shadow: var(--mk-shadow-2), inset 0 0 0 1px var(--mk-border);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
              color var(--transition-fast), box-shadow var(--transition-fast),
              visibility 0s linear var(--dur-base);
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.back-to-top:hover { color: var(--mk-text); box-shadow: var(--mk-shadow-2), inset 0 0 0 1px var(--mk-border-hover); }
.back-to-top:active { transform: scale(0.95); }

/* ------------------------------------------------------------
   14. Pages d'authentification (login / register / verify-email)
   ------------------------------------------------------------ */
.auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(var(--space-10), env(safe-area-inset-top)) var(--space-5) max(var(--space-10), env(safe-area-inset-bottom));
  background: var(--bg);
}
.auth-card-wrap {
  width: 100%;
  max-width: 400px;
  animation: enter-up var(--dur-slow) var(--ease-out) backwards;
}
.auth-brand {
  display: flex;
  justify-content: center;
  width: fit-content;
  margin: 0 auto var(--space-8);
  border-radius: var(--radius);
}
.auth-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}
/* Petit soleil mandarine dans le coin (celui du dernier appel de l'accueil) : la marque
   sans gêner la lecture ; il reste au-dessus du titre, loin des champs */
.auth-card::before,
.auth-card::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.auth-card::before { width: 112px; height: 112px; top: -64px; right: -52px; background: var(--mk-mandarine); }
.auth-card::after { width: 72px; height: 72px; top: -42px; right: -30px; background: var(--mk-sun-core); }
/* Page « Ne plus recevoir ces rappels » : elle s'adresse au client de l'artisan, pas à
   l'artisan ; elle reste neutre, sans le soleil de la marque */
.auth-card.auth-status::before,
.auth-card.auth-status::after { display: none; }
.auth-title {
  padding-right: 48px;   /* jamais sous le soleil */
  font-size: 28px;
  font-weight: var(--weight-strong);
  font-stretch: var(--stretch-title);
  line-height: 1.15;
  letter-spacing: -0.024em;
}
.auth-subtitle {
  margin-top: 6px;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.auth-form {
  margin-top: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.auth-form .field { gap: var(--space-2); }
/* Champs de 44 px. :where() garde la spécificité du socle (0,1,0) : le
   48 px à droite de .input-affix > .input (œil du mot de passe) l'emporte,
   et le 16 px mobile du socle (anti-zoom iOS) aussi, d'où la taille 15 px
   réservée aux écrans larges. */
:where(.auth-form) .input { height: 44px; padding-inline: 14px; }
/* Liste « Ville » (inscription) : même hauteur ; le 36 px à droite du socle
   (chevron) est gardé, seul le bord gauche s'aligne sur les champs. */
:where(.auth-form) .select { height: 44px; padding-left: 14px; }
@media (min-width: 769px) {
  :where(.auth-form) .input,
  :where(.auth-form) .select { font-size: var(--text-md); }
}
.auth-form .field-error { animation: enter-down var(--dur-fast) var(--ease-out) backwards; }
.auth-form .banner { font-size: var(--text-md); }
.auth-submit { margin-top: var(--space-1); }

/* Règles du mot de passe, cochées en direct (inscription) */
.pw-rules {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-subtle);
}
.pw-rules li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--transition-fast);
}
.pw-rule-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-hover);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.pw-rule-icon > span {
  position: absolute;
  inset: 1px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.pw-rule-icon svg { display: block; stroke-width: 3; }
.pw-rules li.is-met { color: var(--success-text); }
.pw-rules li.is-met .pw-rule-icon { background: var(--success-solid); border-color: var(--success-solid); }
/* Coche posée sur --success-solid : --on-solid, jamais un blanc en dur */
.pw-rules li.is-met .pw-rule-icon > span { opacity: 1; transform: none; color: var(--on-solid); }
.was-submitted .pw-rules li:not(.is-met) { color: var(--danger-text); }
.was-submitted .pw-rules li:not(.is-met) .pw-rule-icon { border-color: var(--danger); }

.auth-legal-note {
  font-size: var(--text-sm);
  line-height: 1.55;
  text-align: center;
  color: var(--text-muted);
}
.auth-legal-note a,
.auth-footer-links a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 3px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.auth-legal-note a:hover,
.auth-footer-links a:hover { color: var(--text); text-decoration-color: currentColor; }
/* Icône « nouvel onglet » après le libellé d'un lien target=_blank
   (convention du socle), dans une phrase : auth et pages légales */
.auth-legal-note a > .icon-sm,
.legal-card a > .icon-sm { width: 12px; height: 12px; margin-left: 3px; vertical-align: -1px; }

.auth-switch {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--text-base);
  color: var(--text-muted);
}
.auth-footer-links {
  margin-top: var(--space-8);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-subtle);
}

/* États de verify-email */
.auth-status { text-align: center; }
.auth-status .auth-title { padding-right: 0; }   /* titre centré, sous l'icône : loin du soleil */
.auth-status-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-5);
  padding: 13px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface-muted);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-status-icon > span:not(.spinner) { display: block; width: 100%; height: 100%; }
.auth-status-icon .spinner { width: 18px; height: 18px; color: var(--accent); }
.auth-status-icon.is-success { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.auth-status-icon.is-danger { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }
.auth-status-icon.is-info { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent); }
.auth-status-text {
  margin-top: var(--space-2);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}
.auth-status-actions { margin-top: var(--space-6); }
.auth-status-hint { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-subtle); }

/* ------------------------------------------------------------
   15. Pages légales (CGV, confidentialité, mentions)
   Même famille que la landing : fond ciel, carte blanche très arrondie,
   titres 650.
   ------------------------------------------------------------ */
.legal-shell {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 var(--space-5) var(--space-20);
}
/* Mesure de lecture : ~550 px de texte en 16 px, soit ~75 caractères par ligne */
.legal-header,
.legal-wrap { max-width: 720px; margin-inline: auto; }
.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: max(var(--space-6), env(safe-area-inset-top)) 0 var(--space-6);
}
.legal-brand { border-radius: var(--radius-sm); font-weight: var(--mk-w-strong); letter-spacing: -0.02em; }
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--mk-text-muted);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}
.legal-back:hover { color: var(--mk-text); }

.legal-card {
  padding: var(--space-12) var(--space-16) var(--space-10);
  border: 0;
  border-radius: var(--mk-r-xl);
  box-shadow: var(--mk-shadow-1), inset 0 0 0 1px var(--mk-border);
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--mk-text);
}
.legal-card h1 {
  font-size: clamp(30px, 1.2vw + 20px, 40px);
  font-weight: var(--mk-w-strong);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.legal-card .legal-meta {
  margin-top: var(--space-3);
  font-size: var(--text-base);
  color: var(--mk-text-subtle);
}
.legal-card .legal-meta + * { margin-top: var(--space-8); }
.legal-card h2 {
  margin-top: var(--space-12);
  font-size: 22px;
  font-weight: var(--mk-w-strong);
  line-height: 1.25;
  letter-spacing: -0.015em;
  scroll-margin-top: var(--space-6);
}
.legal-card h3 {
  margin-top: var(--space-7);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}
.legal-card p { margin-top: var(--space-3); }
.legal-card h2 + p,
.legal-card h3 + p,
.legal-card h2 + ul { margin-top: var(--space-2); }
.legal-card ul {
  margin-top: var(--space-3);
  padding-left: 1.25em;
  list-style: disc;
}
.legal-card li { margin-top: 6px; }
.legal-card li::marker { color: var(--mk-text-subtle); }
.legal-card strong { font-weight: var(--weight-semibold); }
.legal-card code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--mk-surface-2);
  font-size: 0.9em;
}
.legal-card a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  transition: text-decoration-color var(--transition-fast);
}
.legal-card a:hover { text-decoration-color: currentColor; }

/* Sommaire */
.legal-toc {
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--mk-r-md);
  background: var(--mk-surface-2);
  box-shadow: inset 0 0 0 1px var(--mk-border);
}
.legal-toc ol {
  columns: 2;
  column-gap: var(--space-8);
  padding-left: 1.5em;
  list-style: decimal;
  font-size: var(--text-base);
  line-height: 1.5;
}
.legal-toc li { margin: 0; padding: 3px 0; break-inside: avoid; }
.legal-toc li::marker { color: var(--mk-text-subtle); font-variant-numeric: tabular-nums; }
.legal-card .legal-toc a {
  color: var(--mk-text-muted);
  text-decoration-color: transparent;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.legal-card .legal-toc a:hover { color: var(--mk-text); text-decoration-color: currentColor; }

/* Tableaux : défilement horizontal si besoin (mobile) */
.legal-table {
  margin-top: var(--space-4);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-r-md);
  overflow-x: auto;
}
.legal-table table { font-size: var(--text-base); line-height: 1.5; }
.legal-table td { vertical-align: top; }
.legal-table + p { margin-top: var(--space-5); }
.legal-table tr:first-child th { border-top: 0; }

.legal-contact {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--mk-border);
  font-size: var(--text-base);
  color: var(--mk-text-muted);
}
.legal-card .legal-contact { margin-top: var(--space-12); }

.legal-nav {
  margin-top: var(--space-6);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-base);
}
.legal-nav a {
  color: var(--mk-text-muted);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 3px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.legal-nav a:hover { color: var(--mk-text); text-decoration-color: currentColor; }

/* ------------------------------------------------------------
   16. Responsive
   ------------------------------------------------------------ */
/* Héros sur une colonne sous 1080 px : le panneau garde sa largeur utile
   (fenêtre ≥ 420 px), le texte sa mesure ; le panneau se cale à droite,
   en décalé sous le texte calé à gauche. */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
  .hero-copy { max-width: 640px; }
  .preview { width: 100%; max-width: 660px; justify-self: end; --stage-pad-left: 150px; }
  /* La carte « rappel » passe à droite, toujours sous la liste */
  .preview-email { margin: -64px 20px 0 auto; }
}

/* Menu du haut de 961 à 1023 px : ses 4 liens restent sur une ligne */
@media (max-width: 1023px) {
  .landing-nav-link { padding: 0 10px; }
}

@media (max-width: 960px) {
  .landing-nav { display: none; }

  .how-top,
  .founder-grid,
  .pricing-grid,
  .faq-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .how-top .how-header,
  .faq-aside { position: static; }
  .pricing-card { max-width: 480px; }

  /* Fonctions : texte puis extrait, dans l'ordre du HTML */
  .mk-feature,
  .mk-feature:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .mk-feature-copy { max-width: 620px; }
  .mk-feature:nth-child(even) .mk-feature-copy { order: 0; }
  .mk-stage { max-width: 620px; }

  .trust-item { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .trust-item-desc { padding-left: 36px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
}

@media (max-width: 820px) {
  .compare { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .compare-before { margin-top: 0; }

  .final-cta { flex-direction: column; align-items: flex-start; }
}

/* Écrans tactiles (≤ 768 px) : cibles de 44 px.
   - En-tête : boutons de 40 px visibles, comme les boutons icône de l'app ; le
     socle porte la zone de toucher à 44 px (::after centré de .btn-sm,
     .btn-icon et .brand, style.css « cibles tactiles »). Libellés sur une
     ligne : le socle autorise le retour à la ligne des .btn sous 480 px.
   - Liens isolés (pied de page, sommaire et liens des pages légales, pied de
     l'auth) : 44 px de haut réels, car ils s'empilent (une zone invisible
     déborderait sur le voisin) ; la densité est reprise sur les marges. */
@media (max-width: 768px) {
  .landing-actions .btn {
    height: 40px;
    min-height: 40px;
    padding: 0 12px;
    white-space: nowrap;
  }
  .landing-actions .btn-icon { width: 40px; height: 40px; }

  .footer-link,
  .legal-back,
  .legal-nav a,
  .auth-footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Colonnes du pied de page : les liens de 44 px font l'espacement */
  .footer-col { gap: 0; }
  .footer-col-title { margin-bottom: var(--space-2); }
  .footer-text { margin-top: var(--space-1); }
  /* Liens courts (« CGV », « FAQ ») : 44 px de large au minimum. Rangées
     centrées : le libellé est centré dans sa zone. Rangée alignée à gauche
     (pied de la landing) : 8 px de retrait de chaque côté, écart et marge
     réduits d'autant pour garder l'alignement et les espacements. */
  .footer-col .footer-link { min-width: 44px; }
  .legal-nav a,
  .auth-footer-links a { min-width: 44px; justify-content: center; }
  .footer-legal .footer-link { padding-inline: var(--space-2); }
  .footer-legal { margin-inline: calc(-1 * var(--space-2)); gap: 0 var(--space-2); }
  .legal-brand,
  .auth-brand { display: flex; align-items: center; min-height: 44px; }
  .legal-header { padding-block: max(var(--space-4), env(safe-area-inset-top)) var(--space-4); }
  .legal-toc li { padding: 0; }
  .legal-card .legal-toc a { display: flex; align-items: center; min-height: 44px; }
  .legal-nav { margin-top: var(--space-3); row-gap: 0; }
  .auth-footer-links { margin-top: var(--space-5); row-gap: 0; }
}

/* Téléphone */
@media (max-width: 640px) {
  :root { --mk-gutter: 16px; }
  .mk-container {
    padding-left: max(var(--mk-gutter), env(safe-area-inset-left));
    padding-right: max(var(--mk-gutter), env(safe-area-inset-right));
  }
  .mk-header { margin-bottom: 36px; }
  .mk-sub { margin-top: 14px; font-size: 17px; }

  /* En-tête serré : logo | thème | Connexion | Créer un compte tiennent sur
     une ligne dès 360 px. « Connexion », sans fond, peut avoir un retrait
     plus court. */
  .landing-topbar-inner { height: 60px; gap: var(--space-2); }
  .landing-actions { gap: var(--space-1); }
  .landing-actions .btn { padding-inline: 12px; }
  .landing-actions .btn-ghost { padding-inline: 8px; }

  .hero { padding-block: 12px 64px; }
  .hero-title { line-height: 1; }
  .hero-lead { margin-top: 20px; font-size: 17px; }
  .hero-lead.hero-price { margin-top: 14px; font-size: 16px; }
  .hero-actions { margin-top: 28px; flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .hero-fineprint { margin-top: 16px; font-size: 14px; }

  /* Panneau : la clim et son souffle au-dessus de la fenêtre, qui prend
     toute la largeur ; la carte « rappel » remonte sur le bas, décalée à droite */
  .hero-grid { gap: var(--space-12); }
  .preview { --stage-pad-left: 12px; }
  .preview-stage { padding: 148px 12px 76px; border-radius: var(--mk-r-xl); }
  .preview-stage::before { width: 236px; height: 236px; top: -128px; right: -104px; }
  .preview-stage::after { width: 156px; height: 156px; top: -88px; right: -64px; }
  .preview-art { width: 210px; }
  .preview-window { border-radius: 18px; }
  .preview-body { padding: 14px 14px 16px; }
  .preview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-kpi-value { font-size: 22px; }
  /* Ligne sur 2 niveaux : [échéance] [nom] / [échéance] [statut] ; la note
     est la seule information qu'on laisse tomber faute de place. */
  .preview-row { grid-template-columns: 5.25rem minmax(0, 1fr); row-gap: 3px; }
  .preview-when { grid-row: span 2; }
  .preview-row-sub { display: none; }
  .preview-row .status { grid-column: 2; }
  .preview-email { width: calc(100% - 36px); margin: -56px 10px 0 auto; }

  .mk-facts-grid { grid-template-columns: minmax(0, 1fr); padding: 6px 18px; border-radius: var(--mk-r-lg); }
  .mk-fact,
  .mk-fact + .mk-fact {
    padding: 18px 0;
    border-left: 0;
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
  }
  .mk-fact + .mk-fact { border-top: 1px solid var(--mk-border); }
  .mk-fact-value,
  .mk-fact:first-child .mk-fact-value { font-size: 30px; min-width: 124px; }
  .mk-fact-caption { margin-top: 0; font-size: 15px; }

  .steps { --step-num: 48px; --loop-w: 24px; --steps-gap: 36px; }
  .step { column-gap: 16px; }
  .step-num { border-radius: 15px; font-size: 22px; }
  .step:first-child .step-num::before { left: -11px; }
  .step-body { padding-top: 2px; }
  .step-desc { font-size: 16px; }

  .mk-feature-desc { font-size: 17px; }
  .mk-stage { padding-inline: 14px; padding-bottom: 20px; border-radius: var(--mk-r-lg); }
  .mk-stage-warm { margin-top: 28px; }
  .mk-stage-warm .mk-shot { margin-top: -28px; }
  .mk-stage-cool { padding-top: 20px; }
  .mk-shot { padding: 18px; }
  .mk-shot.mk-shot-menu { padding: 6px; max-width: 88%; }
  .mk-shot.mk-shot-cal { max-width: 88%; margin-top: -8px; padding: 14px 16px 16px; }
  .mk-shot-item { white-space: normal; }

  .compare-col { border-radius: var(--mk-r-lg); }
  .compare-list li { font-size: 16px; }

  .founder-quote .founder-punch { margin-top: 32px; padding-top: 26px; }

  .trust-item { padding: 22px 0; }
  .trust-item-desc { padding-left: 0; font-size: 16px; }

  .pricing-card { padding: 26px 22px; }
  .pricing-amount { margin-inline: -22px; padding-inline: 22px; }
  .pricing-features li { font-size: 16px; }

  .faq-item summary { padding-block: 18px; gap: var(--space-4); }
  .faq-item summary::after { width: 32px; height: 32px; background-size: 16px; }
  .faq-item p { padding-right: var(--space-2); font-size: 16px; }

  .final-cta { padding: 44px 20px 24px; border-radius: var(--mk-r-xl); }
  .final-cta::before { width: 180px; height: 180px; top: -110px; right: -80px; }
  .final-cta::after { width: 120px; height: 120px; top: -76px; right: -46px; }
  .final-cta .btn { width: 100%; padding-inline: 16px; font-size: 16px; white-space: nowrap; }
  .final-cta-sub { font-size: 16.5px; }

  .landing-footer { padding-top: var(--space-12); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-5); }
  .footer-col:first-child,
  .footer-col:last-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; margin-top: var(--space-10); }

  .back-to-top {
    right: calc(16px + env(safe-area-inset-right));
    bottom: calc(16px + env(safe-area-inset-bottom));
  }

  /* Pages légales : lecture pleine largeur, sans cadre */
  .legal-shell { padding: 0 0 var(--space-12); background: var(--mk-surface); }
  .legal-header { padding: max(var(--space-2), env(safe-area-inset-top)) var(--space-4) var(--space-2); border-bottom: 1px solid var(--mk-border); }
  .legal-card { padding: var(--space-6) var(--space-4) var(--space-8); border: 0; border-radius: 0; box-shadow: none; }
  .legal-card h1 { font-size: 28px; line-height: 1.12; }
  .legal-card h2 { margin-top: var(--space-10); font-size: 19px; }
  .legal-toc { padding: var(--space-2) var(--space-5); }
  .legal-toc ol { columns: 1; }
  .legal-nav { padding-inline: var(--space-4); }
}

/* Sous 360 px, pas la place pour trois actions dans l'en-tête : le bouton de
   thème s'efface (le thème suit alors celui du téléphone), « Connexion » et
   « Créer un compte » restent. */
@media (max-width: 359px) {
  .landing-actions .btn-icon { display: none; }
}

/* Auth sur mobile : le formulaire occupe l'écran, sans cadre */
@media (max-width: 480px) {
  .auth-shell {
    align-items: flex-start;
    padding: max(var(--space-8), env(safe-area-inset-top)) max(var(--space-5), env(safe-area-inset-left)) max(var(--space-8), env(safe-area-inset-bottom));
    background: var(--surface);
  }
  .auth-brand { margin-bottom: var(--space-8); }
  .auth-brand .brand-logo { width: 40px; height: 40px; }
  .auth-brand .brand-lockup { height: 44px; }
  .auth-card { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; overflow: visible; }
  /* Sans cadre, le soleil passe dans le coin haut de l'écran (il défile avec la page) */
  .auth-card::before,
  .auth-card::after { display: none; }
  .auth-shell { position: relative; isolation: isolate; overflow: hidden; }
  .auth-shell::before,
  .auth-shell::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
  }
  .auth-shell:has(> .auth-card-wrap > .auth-card.auth-status)::before,
  .auth-shell:has(> .auth-card-wrap > .auth-card.auth-status)::after { display: none; }
  .auth-shell::before { width: 112px; height: 112px; top: -60px; right: -48px; background: var(--mk-mandarine); }
  .auth-shell::after { width: 72px; height: 72px; top: -38px; right: -26px; background: var(--mk-sun-core); }
  .auth-title { padding-right: 0; }
  .auth-form { margin-top: var(--space-6); }
  .auth-status .auth-status-icon { margin-top: var(--space-4); }
}

/* Le nom « RDV Entretien » s'affiche dès qu'il tient à côté des actions (thème,
   Connexion, Créer un compte : 280 px ; icône et nom : 147 px ; soit 467 px d'écran).
   En dessous, la marque garde son icône et le nom est masqué visuellement (il reste le
   nom accessible du lien) : « Connexion » et « Créer un compte » passent avant. */
@media (max-width: 466px) {
  /* Petit écran : seule l'icône ronde du logo (partie gauche de l'image, sans le « R ») */
  .landing-topbar-inner .brand-lockup { width: 34px; height: 36px; object-fit: cover; object-position: 0 50%; }
  .landing-topbar-inner .brand-name {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* ------------------------------------------------------------
   Accueil (index.html, body.page-accueil) : police Figtree, grand titre en
   deux couleurs, à la manière de Facebook (choix du fondateur, 29/09/2026).
   Police libre (SIL OFL, public/fonts/OFL-Figtree.txt), hébergée chez nous
   comme Instrument Sans : aucun appel à Google. Les autres pages (appli,
   connexion, pages légales) gardent Instrument Sans.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Figtree Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('/fonts/figtree-latin.woff2?v=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('/fonts/figtree-latin-ext.woff2?v=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
.page-accueil {
  --font-sans: 'Figtree Variable', 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Figtree n'a pas d'axe de largeur : titres pleins, graisse franche */
  --mk-w-strong: 750;
  --weight-strong: 750;
  --stretch-title: 100%;
}
.page-accueil .hero-title {
  font-weight: 800;
  font-stretch: normal;
  letter-spacing: -0.03em;
}
/* Deuxième couleur du grand titre : le bleu clim de la marque */
.hero-title-accent { color: var(--mk-clim); }