/* ==========================================================================
   MIVA'KAT — VITRINE (refonte, nouvelle identité)
   --------------------------------------------------------------------------
   Système des pages publiques : homepage, essai gratuit, confirmation,
   suivi, erreurs (via partials/public_head.php + errors/partial.php).
   main.min.css reste chargé (base utilitaire, animations d'entrée).
   L'administration (admin-theme.css), l'espace client (espace-client.css)
   et les catalogues marchands (catalog.css, identité commerçante) gardent
   leur feuille propre.

   Palette (tirée des logos /imgs) : navy identitaire #0b172a, bleu
   électrique #004fef (action), turquoise #01a6a1 (signal). Aucun or :
   l'ancienne identité est retirée de la vitrine.
   Typographies auto-hébergées : Space Grotesk (titres, nav, prix, boutons),
   Instrument Sans (texte courant).
   Mobile-first : base une colonne, compositions à 640px / 900px / 1024px.
   ========================================================================== */

:root {
  --mk-navy: #0b172a;
  --mk-navy-2: #13233b;
  --mk-ink: #16233a;
  --mk-electric: #004fef;
  --mk-electric-deep: #003ec4;
  --mk-electric-soft: #e3ebff;
  --mk-turquoise: #01a6a1;
  --mk-turquoise-deep: #015f59;
  --mk-turquoise-soft: #ddf3f2;
  --mk-turquoise-light: #5fd9d4;
  --mk-paper: #ffffff;
  --mk-paper-2: #f4f6f8;
  --mk-paper-warm: #f7f5ef;
  --mk-line: #e3e8ef;
  --mk-line-dark: rgba(255, 255, 255, 0.14);
  --mk-muted: #5a6b82;
  --mk-on-dark: #d7dde6;
  --mk-on-dark-muted: #aab4c3;
  --mk-radius: 10px;
  --mk-radius-lg: 22px;
  --mk-header-h: 68px;
  --mk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --mk-display: "Space Grotesk", "Instrument Sans", system-ui, sans-serif;
  --mk-body: "Instrument Sans", system-ui, sans-serif;
  --mk-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@font-face {
  /* Space Grotesk, licence SIL OFL 1.1 — fichier variable 300-700, latin. */
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk/space-grotesk-latin.woff2") format("woff2");
}

/* --- Base --- */
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--mk-paper);
  color: var(--mk-ink);
  font-family: var(--mk-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; letter-spacing: -0.03em; font-family: var(--mk-display); }
p { margin: 0; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
i, em { font-style: normal; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--mk-electric); color: #ffffff; }
:focus-visible { outline: 3px solid var(--mk-electric); outline-offset: 3px; border-radius: 3px; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 1300;
  padding: 11px 16px;
  border-radius: 8px;
  background: var(--mk-electric);
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.18s var(--mk-ease);
}
.skip-link:focus { transform: translateY(0); }

.wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.section {
  position: relative;
  padding-block: clamp(68px, 9vw, 116px);
  scroll-margin-top: calc(var(--mk-header-h) + 18px);
}
.section-head { max-width: 680px; margin-bottom: clamp(34px, 5vw, 58px); }

/* --- Titres --- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1rem;
  color: var(--mk-muted);
  font-family: var(--mk-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 22px; height: 4px; flex: none; background: var(--mk-electric); }
.section-title {
  color: var(--mk-navy);
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  font-weight: 700;
}
.section-lead { margin-top: 1rem; max-width: 58ch; color: var(--mk-muted); font-size: 1rem; line-height: 1.7; }
.section-title--light { color: #ffffff; }
.section-lead--light { color: var(--mk-on-dark); }
.eyebrow--gold { color: var(--mk-turquoise-light); }
.eyebrow--gold::before { background: var(--mk-turquoise-light); }
.section--paper { background: var(--mk-paper-warm); }

/* --- Boutons francs (ni pill, ni fantaisie) --- */
.btn {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--mk-radius);
  border: 1px solid transparent;
  font-family: var(--mk-display);
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--mk-ease), border-color 0.18s var(--mk-ease), color 0.18s var(--mk-ease), box-shadow 0.18s var(--mk-ease);
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn--gold {
  /* Primaire : l'ancienne classe or porte désormais le bleu électrique. */
  background-color: var(--mk-electric);
  border-color: var(--mk-electric);
  color: #ffffff;
  box-shadow: 0 4px 14px -3px rgba(0, 79, 239, 0.5);
}
.btn--gold:hover {
  background-color: var(--mk-electric-deep);
  border-color: var(--mk-electric-deep);
  box-shadow: 0 8px 22px -4px rgba(0, 79, 239, 0.55);
}
.btn--navy {
  background-color: var(--mk-navy);
  border-color: var(--mk-navy);
  color: #ffffff;
  box-shadow: 0 4px 14px -3px rgba(11, 23, 42, 0.4);
}
.btn--navy:hover { background-color: var(--mk-navy-2); border-color: var(--mk-navy-2); }
.btn--outline { border-color: #c3ccd8; background: transparent; color: var(--mk-navy); }
.btn--outline:hover { border-color: var(--mk-navy); background: var(--mk-paper); }
.btn--outline-light { border-color: rgba(255, 255, 255, 0.55); background: transparent; color: #ffffff; }
.btn--outline-light:hover { border-color: #ffffff; background: #ffffff; color: var(--mk-navy); }
.btn--sm { min-height: 44px; padding: 0.65rem 1.1rem; font-size: 0.86rem; }

/* --- En-tête : barre navy qui blanchit au scroll (système existant) --- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1100;
  height: var(--mk-header-h);
  background-color: rgba(11, 23, 42, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  transition: background-color 0.22s var(--mk-ease), border-color 0.22s var(--mk-ease), color 0.22s var(--mk-ease);
}
.site-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--mk-line);
  color: var(--mk-navy);
  box-shadow: 0 12px 30px -24px rgba(11, 23, 42, 0.45);
}
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { position: relative; display: grid; flex: none; text-decoration: none; }
/* Les deux logos se superposent : seul l'un est visible (opacité).
   Les classes correspondent au markup de partials/public_header.php
   (.brand-logo-stack > .brand-logo--light / .brand-logo--dark). */
.brand-logo-stack { display: grid; place-items: center; }
.brand-logo-stack .brand-logo { grid-area: 1 / 1; height: 30px; width: auto; transition: opacity 0.2s var(--mk-ease); }
.brand-logo-stack .brand-logo--dark { opacity: 0; }
.brand-logo-stack .brand-logo--light { opacity: 1; }
.site-header.is-scrolled .brand-logo--light,
[data-site-header].is-scrolled .brand-logo--light { opacity: 0; }
.site-header.is-scrolled .brand-logo--dark,
[data-site-header].is-scrolled .brand-logo--dark { opacity: 1; }
/* Menu mobile ouvert : le header reste navy, donc logo clair forcé
   même si la page a défilé (priorité sur .is-scrolled). */
body.menu-open .site-header,
body.menu-open .site-header.is-scrolled,
body.menu-open [data-site-header],
body.menu-open [data-site-header].is-scrolled { background-color: var(--mk-navy); border-bottom-color: transparent; color: #ffffff; box-shadow: none; }
body.menu-open .site-header .brand-logo--dark,
body.menu-open .site-header.is-scrolled .brand-logo--dark { opacity: 0; }
body.menu-open .site-header .brand-logo--light,
body.menu-open .site-header.is-scrolled .brand-logo--light { opacity: 1; }
body.menu-open .site-header .burger span,
body.menu-open .site-header.is-scrolled .burger span { background-color: #ffffff; }
body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.site-nav { display: none; }
/*
 * DOC01 — L'espace entre les entrées passe de 24 px à 20 px, et c'est mesuré.
 *
 * La navigation de la plateforme a perdu la place de la langue (R29) puis celle
 * d'« À propos » au profit du panier ; DOC01 y ajoute « Documentation ». Les
 * six entrées + la marque + la langue + la connexion + le bouton d'appel ne
 * tiennent plus dans la largeur disponible au moment où `.site-nav` apparaît.
 *
 * Mesuré dans un navigateur, sur la place réelle à 1024 px de fenêtre
 * (`.wrap` : 1024 − 2 × 40 px de gouttière = 944 px) :
 *
 *   gap 24 px -> le contenu demande 960 px, la barre déborde de 15 px.
 *   gap 20 px -> le contenu tient dans les 944 px, débordement mesuré 0.
 *
 * Ce n'est pas une réduction « pour faire joli » : c'est la seule largeur qui
 * déborde, et 4 px par intervalle suffisent. À 1280 px il reste 31 px de marge.
 *
 * L'autre correction possible — remonter le point de bascule de `.site-nav` de
 * 1024 px à plus haut — aurait été plus robuste, mais elle retirerait la
 * navigation sur une bande de tablettes alors qu'elle y tient. Elle redevient
 * le bon choix si une septième entrée arrive.
 */
.site-nav ul { display: flex; align-items: center; gap: 20px; }
.site-nav a {
  position: relative;
  display: block;
  padding: 10px 0;
  color: rgba(215, 221, 230, 0.8);
  font-family: var(--mk-display);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.18s var(--mk-ease);
}
.site-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 3px;
  background: var(--mk-turquoise);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s var(--mk-ease);
}
.site-nav a:hover, .site-nav a:focus-visible { color: #ffffff; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }
.site-header.is-scrolled .site-nav a { color: var(--mk-muted); }
.site-header.is-scrolled .site-nav a:hover, .site-header.is-scrolled .site-nav a:focus-visible { color: var(--mk-navy); }
.site-header__actions { display: flex; align-items: center; gap: 16px; }
.site-header .header-cta { background-color: var(--mk-electric); border-color: var(--mk-electric); color: #ffffff; }
.site-header .header-cta:hover { background-color: var(--mk-electric-deep); border-color: var(--mk-electric-deep); }
.site-header .header-cta:hover { background-color: var(--mk-electric-deep); border-color: var(--mk-electric-deep); }
.burger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.burger span { width: 22px; height: 2px; display: block; background: #ffffff; transition: transform 0.22s var(--mk-ease), opacity 0.18s var(--mk-ease); }
.site-header.is-scrolled .burger span { background-color: var(--mk-navy); }

/* --- Menu mobile : panneau navy, une ligne par destination --- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: calc(var(--mk-header-h) + 30px) 24px calc(28px + env(safe-area-inset-bottom));
  background: var(--mk-navy);
  color: #ffffff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.24s var(--mk-ease), transform 0.24s var(--mk-ease), visibility 0s linear 0.24s;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mobile-menu nav { width: 100%; max-width: 640px; margin-inline: auto; }
.mobile-menu li { border-bottom: 1px solid var(--mk-line-dark); }
.mobile-menu nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 2px;
  color: #ffffff;
  font-family: var(--mk-display);
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
}
.mobile-menu nav a span { color: var(--mk-turquoise-light); font-size: 1rem; }
.mobile-menu__foot { width: 100%; max-width: 640px; margin: auto auto 0; padding-top: 30px; }
.mobile-menu__foot .btn { width: 100%; }
.mobile-menu__foot p { margin-top: 12px; text-align: center; color: var(--mk-on-dark-muted); font-size: 0.78rem; }

/* --- Progression de lecture + CTA persistant + retour en haut --- */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1200;
  height: 3px;
  background: var(--mk-electric);
  transform: scaleX(0);
  transform-origin: left center;
}
.sticky-cta {
  position: fixed;
  right: 0.75rem;
  bottom: calc(0.75rem + env(safe-area-inset-bottom));
  left: 0.75rem;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(120%);
  transition: opacity 0.2s var(--mk-ease), transform 0.2s var(--mk-ease), visibility 0s linear 0.2s;
}
.sticky-cta.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sticky-cta__inner { display: flex; gap: 0.6rem; max-width: 560px; margin-inline: auto; }
.sticky-cta__inner .btn { flex: 1; min-height: 48px; }
.sticky-cta__demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  flex: none;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  background: #ffffff;
  color: var(--mk-navy);
  font-size: 1.2rem;
  text-decoration: none;
}
.to-top {
  position: fixed;
  right: 0.75rem;
  bottom: calc(4.5rem + env(safe-area-inset-bottom));
  z-index: 1000;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--mk-line);
  border-radius: 50%;
  background: #ffffff;
  color: var(--mk-navy);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s var(--mk-ease), transform 0.2s var(--mk-ease), visibility 0s linear 0.2s;
}
.to-top svg { width: 19px; height: 19px; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover { background: var(--mk-electric); border-color: var(--mk-electric); color: #ffffff; }

/* --- Pied de page --- */
.site-footer { background: var(--mk-navy); color: var(--mk-on-dark); padding: clamp(58px, 8vw, 86px) 0 0; }
.site-footer__grid { display: grid; gap: 36px 28px; }
.site-footer__brand img { width: 166px; height: auto; margin-bottom: 20px; }
.site-footer__brand p { max-width: 40ch; color: var(--mk-on-dark-muted); font-size: 0.9rem; line-height: 1.72; }
.site-footer h2 {
  margin-bottom: 15px;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.site-footer ul { display: grid; gap: 10px; }
.site-footer li a { color: var(--mk-on-dark); font-size: 0.88rem; text-decoration: none; transition: color 0.18s var(--mk-ease); }
.site-footer li a:hover, .site-footer li a:focus-visible { color: var(--mk-turquoise-light); }
.site-footer__bottom {
  margin-top: clamp(42px, 6vw, 62px);
  padding: 22px 0 calc(22px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--mk-line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
  color: var(--mk-on-dark-muted);
  font-size: 0.78rem;
}
.site-footer__bottom a { color: var(--mk-on-dark); text-decoration: none; }
.site-footer__bottom a:hover { color: var(--mk-turquoise-light); }
.site-footer__status { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--mk-turquoise-light) !important; font-size: 0.8rem !important; font-weight: 600; }
.site-footer__status span { width: 8px; height: 8px; border-radius: 50%; background: var(--mk-turquoise); }

/* --- Hero : fond papier froid, encre navy, preuve carte --- */
.home-hero { position: relative; overflow: hidden; background: var(--mk-paper-2); color: var(--mk-ink); }
.home-hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(11, 23, 42, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 23, 42, 0.05) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 78%, transparent 100%);
}
.home-hero__canvas { position: relative; padding-top: calc(var(--mk-header-h) + clamp(2.5rem, 7vw, 4.5rem)); padding-bottom: clamp(3rem, 7vw, 5rem); }
.home-hero__canvas::before { content: ""; position: absolute; top: 0; left: clamp(1.25rem, 4vw, 2.5rem); width: 5rem; height: 4px; background: var(--mk-electric); }
.home-hero__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 4.5rem); align-items: start; }
.home-hero__layout > * { min-width: 0; }
.hero-copy { min-width: 0; }
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: var(--mk-muted);
  font-family: var(--mk-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.25;
  text-transform: uppercase;
}
.hero-kicker__line { width: 1.75rem; height: 3px; flex: none; background: var(--mk-electric); }
.hero-title {
  max-width: 11ch;
  margin-top: 1.3rem;
  color: var(--mk-navy);
  font-size: clamp(2.5rem, 10.5vw, 4.4rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.hero-title > span { display: block; }
.hero-title__accent { color: var(--mk-electric); }
.hero-lead { max-width: 52ch; margin-top: 1.4rem; color: var(--mk-muted); font-size: 1rem; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 2rem; }
.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--mk-line);
  border-bottom: 1px solid var(--mk-line);
}
.hero-proof__item { min-width: 0; padding: 1rem 0.55rem 1.2rem; }
.hero-proof__item + .hero-proof__item { border-left: 1px solid var(--mk-line); }
.hero-proof dt { color: var(--mk-muted); font-size: 0.61rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; }
.hero-proof dd {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin: 0.32rem 0 0;
  color: var(--mk-navy);
  font-family: var(--mk-display);
  font-size: clamp(1.35rem, 5vw, 1.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.hero-proof dd small { font-size: 0.48em; letter-spacing: 0; }
.hero-proof__item--accent dd { color: var(--mk-electric); }

/* Carte d'adresse : relief Material, champ franc, bouton franc. */
.hero-carte {
  width: 100%;
  min-width: 0;
  max-width: 31rem;
  margin: 0 auto;
  padding: clamp(1.25rem, 3.5vw, 1.75rem);
  border: 1px solid var(--mk-line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(11, 23, 42, 0.07),
    0 16px 40px -20px rgba(11, 23, 42, 0.3);
}
.hero-carte__titre { color: var(--mk-navy); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.hero-carte__aide { margin-top: 0.3rem; color: var(--mk-muted); font-size: 0.85rem; line-height: 1.55; }
.hero-carte__label { display: block; margin: 1rem 0 0.4rem; color: var(--mk-muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.hero-carte__rangee { display: flex; gap: 0.5rem; align-items: stretch; }
.hero-carte__champ {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0.65rem 0.8rem;
  border: 1px solid #c3ccd8;
  border-radius: 8px;
  color: var(--mk-ink);
  background: var(--mk-paper-2);
  font-family: var(--mk-mono);
  font-size: 0.8rem;
}
.hero-carte__champ:focus-visible { border-color: var(--mk-electric); }
.hero-carte__bouton { flex: none; white-space: nowrap; }
.hero-carte .btn.est-copie { border-color: var(--mk-turquoise); color: #014e4b; background: var(--mk-turquoise-soft); }
.hero-carte__note { margin-top: 0.8rem; color: var(--mk-muted); font-size: 0.82rem; line-height: 1.55; }
.hero-carte__actions { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; align-items: center; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--mk-line); }
.hero-carte__ouvrir {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  color: var(--mk-electric-deep);
  font-size: 0.88rem;
  font-weight: 700;
}
.hero-carte__ouvrir:hover, .hero-carte__ouvrir:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.hero-carte__wa { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; color: var(--mk-muted); font-size: 0.85rem; font-weight: 600; }
.hero-carte__wa:hover, .hero-carte__wa:focus-visible { color: var(--mk-navy); }
.hero-carte__wa svg { width: 17px; height: 17px; }
@media (max-width: 30rem) {
  .hero-carte__rangee { flex-direction: column; }
}

/* --- Parcours : 3 cartes numérotées --- */
.presentation__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 42px; }
.flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: stretch; }
.flow__node {
  position: relative;
  min-width: 0;
  padding: 18px 16px 18px 66px;
  border: 1px solid var(--mk-line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(11, 23, 42, 0.06),
    0 10px 28px -18px rgba(11, 23, 42, 0.22);
}
.flow__num {
  position: absolute;
  top: 18px;
  left: 16px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--mk-turquoise-deep);
  background: var(--mk-turquoise-soft);
  font-family: var(--mk-display);
  font-size: 0.8rem;
  font-weight: 700;
}
.flow__node strong { display: block; color: var(--mk-navy); font-size: 0.88rem; }
.flow__node span:not(.flow__num) { display: block; margin-top: 5px; color: var(--mk-muted); font-size: 0.76rem; line-height: 1.45; }
.flow__node--brand { border-color: var(--mk-navy); background: var(--mk-navy); }
.flow__node--brand strong { color: #ffffff; }
.flow__node--brand span:not(.flow__num) { color: var(--mk-on-dark); }
.flow__node--brand .flow__num { color: var(--mk-turquoise-light); background: rgba(1, 166, 161, 0.2); }
.flow__arrow { display: grid; place-items: center; min-height: 24px; color: var(--mk-electric); font-size: 1.2rem; }

/* --- Possibilités : cartes à pastille --- */
.features { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 34px; }
.feature-card {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 1.6rem);
  border: 1px solid var(--mk-line);
  border-top: 3px solid var(--mk-electric);
  border-radius: 14px;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(11, 23, 42, 0.06),
    0 10px 28px -18px rgba(11, 23, 42, 0.22);
}
.feature-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--mk-turquoise-deep);
  background: var(--mk-turquoise-soft);
  font-family: var(--mk-display);
  font-size: 0.8rem;
  font-weight: 700;
}
.feature-card h3 { margin-top: 14px; color: var(--mk-navy); font-size: 1.02rem; }
.feature-card p { margin-top: 8px; color: var(--mk-muted); font-size: 0.84rem; line-height: 1.65; }

/* --- Exemple réel : gabarits, checklist, scène catalogue --- */
.template-strip { display: flex; gap: 8px; overflow-x: auto; margin-top: 28px; padding-bottom: 8px; scrollbar-width: none; }
.template-strip::-webkit-scrollbar { display: none; }
.template-chip { flex: 0 0 auto; min-width: 128px; padding: 12px 14px; border: 1px solid var(--mk-line); border-radius: 8px; background: #ffffff; }
.template-chip strong, .template-chip span { display: block; }
.template-chip strong { color: var(--mk-navy); font-size: 0.78rem; }
.template-chip span { margin-top: 4px; color: var(--mk-muted); font-family: var(--mk-mono); font-size: 0.65rem; }
.modeles-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: center; margin-top: 34px; }
.checklist { display: grid; gap: 11px; color: var(--mk-navy); font-family: var(--mk-display); font-size: 0.9rem; font-weight: 500; }
.checklist li { display: flex; align-items: center; gap: 10px; }
.checklist li::before { content: ""; width: 18px; height: 3px; flex: none; background: var(--mk-turquoise); }
/* R34 — La règle du mot de passe, en une ligne.
 *
 * La première version de R34 en faisait une liste verticale de six
 * lignes : c'était exact, et trop lourd. Sur un formulaire d'acquisition
 * public, lu sur un téléphone, six lignes devant un bouton d'envoi sont du
 * bruit — et le commerce est precisely le public qui lit sur telephone.
 *
 * La regle tient donc en **une phrase**, les termes separes par des points, avec
 * un chapeau commun et les formes courtes des items. Elle reste rendue depuis
 * `ClientPasswordService::regles()`, donc elle ne peut pas dire autre chose que
 * le serveur : c'est la longueur de la phrase qui a change, pas sa source.
 */
.form-field--regles { margin-top: 0.9rem; }
.form-field--regles .field-help { max-width: 68ch; line-height: 1.6; }
.hero-catalog {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius-lg);
  color: var(--mk-ink);
  background: #fcfbfa;
  box-shadow:
    0 1px 2px rgba(11, 23, 42, 0.07),
    0 24px 48px -24px rgba(11, 23, 42, 0.3);
}
.hero-catalog::before { content: ""; position: absolute; z-index: 3; top: 0; right: 0; left: 0; height: 3px; background: var(--mk-electric); }
.hero-catalog__bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; min-height: 4.25rem; padding: 0.75rem 0.9rem; border-bottom: 1px solid #e7e4db; }
.hero-catalog__mark {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: var(--mk-navy);
}
.hero-catalog__mark img { width: 1.5rem; height: 1.5rem; }
.hero-catalog__identity { min-width: 0; }
.hero-catalog__identity strong, .hero-catalog__identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-catalog__identity strong { font-size: 0.82rem; line-height: 1.2; }
.hero-catalog__identity small { margin-top: 0.1rem; color: var(--mk-muted); font-size: 0.62rem; }
.hero-catalog__status { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--mk-turquoise-deep); font-size: 0.66rem; font-weight: 700; white-space: nowrap; }
.hero-catalog__status i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: currentColor; }
.hero-catalog__tools { padding: 0.9rem 0.9rem 0; }
.hero-catalog__search { display: flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0 0.8rem; border: 1px solid #e7e4db; border-radius: 8px; color: var(--mk-muted); background: #ffffff; font-size: 0.76rem; }
.hero-catalog__search svg { width: 1rem; height: 1rem; flex: none; }
.hero-catalog__filters { display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.65rem 0 0.2rem; scrollbar-width: none; }
.hero-catalog__filters::-webkit-scrollbar { display: none; }
.hero-catalog__filters span { flex: none; padding: 0.34rem 0.62rem; border: 1px solid #e7e4db; border-radius: 8px; color: var(--mk-muted); background: #ffffff; font-size: 0.62rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.hero-catalog__filters .is-active { border-color: var(--mk-navy); color: #ffffff; background: var(--mk-navy); }
.hero-catalog__feature { margin: 0.9rem 0.9rem 0; overflow: hidden; border: 1px solid #e7e4db; border-radius: 12px; background: #f6f4ee; }
.hero-catalog__image { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #eceae4; }
.hero-catalog__image img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
.hero-catalog__image > span { position: absolute; bottom: 0; left: 0; max-width: 78%; padding: 0.42rem 0.6rem; color: #ffffff; background: var(--mk-navy); font-size: 0.6rem; font-weight: 700; line-height: 1.2; }
.hero-catalog__details { display: grid; gap: 0.9rem; padding: 1rem; }
.hero-catalog__details h2 { color: var(--mk-ink); font-size: 1.1rem; line-height: 1.15; }
.hero-catalog__details p { margin-top: 0.3rem; color: var(--mk-muted); font-size: 0.76rem; line-height: 1.5; }
.hero-catalog__price { display: flex; align-items: baseline; gap: 0.55rem; }
.hero-catalog__price strong { color: var(--mk-ink); font-family: var(--mk-display); font-size: 1rem; font-variant-numeric: tabular-nums; }
.hero-catalog__price del { color: var(--mk-muted); font-size: 0.72rem; }
.hero-catalog__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0.9rem 0.9rem 0; border-top: 1px solid #e7e4db; border-bottom: 1px solid #e7e4db; }
.hero-catalog__more li { display: grid; grid-template-columns: 2.9rem minmax(0, 1fr); align-items: center; gap: 0.55rem; min-width: 0; padding: 0.65rem 0; }
.hero-catalog__more li + li { padding-left: 0.65rem; border-left: 1px solid #e7e4db; }
.hero-catalog__thumb { display: block; overflow: hidden; width: 2.9rem; aspect-ratio: 1; border-radius: 6px; background: #eceae4; }
.hero-catalog__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hero-catalog__more strong, .hero-catalog__more small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-catalog__more strong { color: var(--mk-ink); font-size: 0.66rem; line-height: 1.25; }
.hero-catalog__more small { margin-top: 0.12rem; color: var(--mk-muted); font-size: 0.63rem; font-weight: 700; }
.hero-catalog__address { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; gap: 0.75rem; min-width: 0; margin-top: 0.9rem; padding: 0.85rem 0.9rem; color: #ffffff; background: var(--mk-navy); }
.hero-catalog__link-icon { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: 8px; color: #ffffff; background: var(--mk-electric); }
.hero-catalog__link-icon svg { width: 1.15rem; height: 1.15rem; }
.hero-catalog__address > span:last-child { min-width: 0; }
.hero-catalog__address small, .hero-catalog__address strong { display: block; }
.hero-catalog__address small { color: var(--mk-on-dark-muted); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; }
.hero-catalog__address strong { margin-top: 0.18rem; overflow: hidden; font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
.hero-catalog__empty { margin: 0.9rem; padding: 1.4rem 1rem; text-align: center; color: var(--mk-muted); font-size: 0.8rem; }
.hero-catalog__empty strong, .hero-catalog__empty span { display: block; }
.hero-catalog__empty strong { color: var(--mk-navy); font-size: 0.88rem; }
.hero-catalog__empty span { margin-top: 4px; }
.hero-catalog__placeholder { display: grid; place-items: center; color: var(--mk-muted); font-size: 0.7rem; }
.mini-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 16px; }
.mini-products > div { min-width: 0; padding: 9px; border: 1px solid var(--mk-line); border-radius: 8px; background: #ffffff; }
.mini-products img, .mini-products .hero-catalog__placeholder { width: 100%; aspect-ratio: 1; object-fit: cover; }
.mini-products strong, .mini-products span:not(.hero-catalog__placeholder) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-products strong { margin-top: 7px; color: var(--mk-navy); font-size: 0.7rem; }
.mini-products span:not(.hero-catalog__placeholder) { margin-top: 2px; color: var(--mk-muted); font-size: 0.66rem; }
.modeles-actions { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; margin-top: 1.4rem; }

/* --- Fonctionnement : étapes en cartes --- */
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 34px; }
.step {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px;
  border: 1px solid var(--mk-line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(11, 23, 42, 0.06),
    0 10px 28px -18px rgba(11, 23, 42, 0.22);
}
.step > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--mk-turquoise-deep);
  background: var(--mk-turquoise-soft);
  font-family: var(--mk-display);
  font-size: 0.78rem;
  font-weight: 700;
}
.step h3 { color: var(--mk-navy); font-size: 1rem; }
.step p { margin-top: 5px; color: var(--mk-muted); font-size: 0.82rem; line-height: 1.6; }

/* --- Offres : titre sur bandeau navy, cartes de prix sur fond blanc ---
   La section est scindée en deux bandes : le chapeau (eyebrow, titre, texte)
   porte le fond sombre identitaire ; le panneau tarifaire et ses notes
   restent sur le blanc pour garder les prix et les quotas parfaitement
   lisibles. Les prix ne se lisent pas sur un fond sombre sans perdre en
   contraste : le fond blanc est ici une contrainte de lecture, pas un décor. */
#offres { padding-block: 0; background-color: var(--mk-paper); }
.pricing-section__head {
  padding-block: clamp(68px, 9vw, 116px) clamp(2.25rem, 5vw, 3.25rem);
  background-color: var(--mk-navy);
  color: #ffffff;
}
.pricing-section__head .eyebrow { color: var(--mk-turquoise-light); }
.pricing-section__head .eyebrow::before { background-color: var(--mk-turquoise-light); }
.pricing-section__head .section-title { color: #ffffff; }
.pricing-section__head .section-lead { color: var(--mk-on-dark); }
.pricing-section__head .section-head { margin-bottom: 0; }
.pricing-section__plans {
  padding-block: clamp(2.5rem, 6vw, 3.5rem) clamp(68px, 9vw, 116px);
  background-color: var(--mk-paper);
}

/* Fiches techniques en relief sur le blanc. */
.pricing { display: grid; gap: clamp(0.7rem, 2vw, 1rem); margin-top: 0; color: var(--mk-ink); }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-block: clamp(1.9rem, 5.5vw, 2.4rem);
  padding-inline: clamp(1.25rem, 4.5vw, 2rem);
  border: 1px solid var(--mk-line);
  border-radius: 14px;
  background-color: #ffffff;
  box-shadow:
    0 1px 2px rgba(11, 23, 42, 0.06),
    0 10px 28px -18px rgba(11, 23, 42, 0.25);
}
.plan--intermediate { background-color: var(--mk-paper-2); }
.plan--entry::before, .plan--recommended::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline: -1px;
  height: 3px;
  border-start-start-radius: 14px;
  border-start-end-radius: 14px;
}
.plan--entry::before { background-color: var(--mk-navy); }
.plan--recommended::before { background-color: var(--mk-electric); }
.plan--recommended {
  border-color: #d5ddf2;
  box-shadow:
    0 2px 4px rgba(11, 23, 42, 0.08),
    0 22px 48px -20px rgba(0, 79, 239, 0.35);
}
.plan__tag { display: block; color: var(--mk-muted); font-family: var(--mk-display); font-size: 0.69rem; font-weight: 700; letter-spacing: 0.16em; line-height: 1.2; text-transform: uppercase; }
.plan--recommended .plan__tag { color: var(--mk-electric-deep); }
.plan__name { margin-top: 0.7rem; color: var(--mk-ink); font-size: clamp(1.35rem, 3.2vw, 1.55rem); font-weight: 700; letter-spacing: -0.02em; }
.plan__desc { margin-top: 0.6rem; max-width: 38ch; color: var(--mk-muted); font-size: 0.88rem; line-height: 1.62; }
.plan__price { margin-top: clamp(1.4rem, 4vw, 1.9rem); padding-top: clamp(1.15rem, 3vw, 1.5rem); border-top: 1px solid rgba(11, 23, 42, 0.08); }
.plan__amount { display: block; color: var(--mk-ink); font-family: var(--mk-display); font-size: clamp(1.8rem, 6vw, 2.3rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.plan__period { display: block; margin-top: 0.45rem; color: var(--mk-muted); font-size: 0.79rem; font-weight: 600; }
.plan__specs { margin: clamp(1.25rem, 3.5vw, 1.6rem) 0 0; }
.plan__points { margin: 1.15rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.plan__points li { position: relative; padding-left: 1.4rem; color: #4a5b72; font-size: .88rem; line-height: 1.5; }
.plan__points li::before { content: ""; position: absolute; left: 0; top: .52em; width: 9px; height: 9px; background: #01a6a1; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.plan--entry .plan__points li, .plan--recommended .plan__points li { color: #38496b; }
.plan__spec { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: 0.65rem; font-size: 0.85rem; }
.plan__spec + .plan__spec { border-top: 1px solid rgba(11, 23, 42, 0.08); }
.plan__spec dt { color: var(--mk-muted); }
.plan__spec dd { margin: 0; color: var(--mk-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.plan__action { display: flex; flex-direction: column; justify-content: flex-end; margin-top: auto; padding-top: clamp(1.6rem, 4vw, 2rem); }
.plan__action .btn { width: 100%; }
/* R32 — Le lien « Détails de l'offre » n'avait aucune règle dans le projet :
   il s'affichait donc comme du texte noir sous le bouton, et c'est le seul
   lien de la page d'accueil vers les pages de formule. Repris sur le modèle de
   `.hero-carte__ouvrir`, centré puisque `.plan__action` est une colonne. */
.plan__detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 0.3rem;
  color: var(--mk-electric-deep);
  font-size: 0.83rem;
  font-weight: 700;
}
.plan__detail:hover, .plan__detail:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.pricing-notes { display: grid; gap: 1.35rem; margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.pricing-note__title { display: flex; align-items: center; gap: 0.6rem; color: var(--mk-navy); font-family: var(--mk-display); font-size: 0.95rem; font-weight: 700; }
.pricing-note__icon { display: inline-flex; color: var(--mk-turquoise-deep); }
.pricing-note__icon svg { width: 18px; height: 18px; }
.pricing-note__text { margin-top: 0.4rem; max-width: 42ch; color: var(--mk-muted); font-size: 0.82rem; line-height: 1.65; }

/* --- FAQ : accordéons cartes --- */
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.faq-list { display: grid; gap: 9px; align-content: start; }
.faq-list .faq-item { margin: 0; }
details.faq-item { border: 1px solid var(--mk-line); background: #ffffff; border-radius: 14px; overflow: hidden; transition: border-color 0.18s ease, box-shadow 0.18s ease; }
details.faq-item[open] { border-color: var(--mk-navy); box-shadow: 0 8px 24px -10px rgba(11, 23, 42, 0.12); }
summary.faq-summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; font-size: 0.98rem; font-weight: 700; color: var(--mk-navy); cursor: pointer; }
summary.faq-summary::-webkit-details-marker { display: none; }
summary.faq-summary .faq-icon {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--mk-paper-2);
  display: grid;
  place-items: center;
  color: var(--mk-navy);
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
details.faq-item[open] summary.faq-summary .faq-icon { transform: rotate(45deg); background: var(--mk-electric); color: #ffffff; }
.faq-content { padding: 0 1.25rem 1.25rem; color: var(--mk-muted); font-size: 0.9rem; line-height: 1.65; }

/* --- CTA final : carte navy contenue --- */
.final-cta { background: transparent; }
.final-cta .wrap {
  border: 1px solid rgba(1, 166, 161, 0.35);
  border-radius: var(--mk-radius-lg);
  color: #ffffff;
  background: var(--mk-navy);
  padding-block: clamp(2.2rem, 6vw, 3.8rem);
}
.final-cta .eyebrow { color: var(--mk-turquoise-light); }
.final-cta .section-title { color: #ffffff; }
.final-cta .section-lead { color: var(--mk-on-dark); }

/* --- Fonds de sections (rythme papier) --- */
#presentation { background-color: var(--mk-paper-warm); }
#fonctionnalites { background-color: var(--mk-paper); }
#modeles { background-color: var(--mk-paper-2); }
#etapes { background-color: var(--mk-paper); }
/* #offres est défini dans son bloc plus haut : le chapeau porte le navy, les
   cartes reposent sur le blanc. Le filet de #faq marque la frontière avec la
   bande blanche des offres, sans quoi les deux sections fusionnent. */
#faq { background-color: var(--mk-paper); border-top: 1px solid var(--mk-line); }
#commencer { background-color: var(--mk-paper-2); }

/* --- Tablette --- */
@media (min-width: 640px) {
  .presentation__grid { gap: 56px; }
  .flow { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); align-items: center; }
  .flow__arrow { min-height: 0; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .modeles-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 42px; }
  .faq-layout { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 56px; }
  .site-footer__grid { grid-template-columns: 1.35fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
  .pricing-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 2rem; }
}

/* --- Desktop --- */
@media (min-width: 900px) {
  .home-hero__layout { grid-template-columns: minmax(0, 1.04fr) minmax(21rem, 0.96fr); gap: clamp(3.5rem, 5.5vw, 5.25rem); align-items: center; }
  .hero-carte { margin: 0; justify-self: end; }
  .presentation__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; }
  .features { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .step { display: block; min-height: 200px; padding: 22px; }
  .step > span { margin-bottom: 14px; }
  .pricing { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); align-items: stretch; }
  .plan { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: span 5; padding: clamp(2rem, 3vw, 2.6rem) clamp(1.5rem, 2.4vw, 2.25rem); }
  .plan__head { grid-row: 1; }
  .plan__desc { grid-row: 2; }
  .plan__price { grid-row: 3; }
  .plan__specs { grid-row: 4; }
  .plan__action { grid-row: 5; }
}
@media (min-width: 1024px) {
  :root { --mk-header-h: 76px; }
  .site-nav { display: block; }
  .header-cta { display: inline-flex; }
  .burger, .mobile-menu { display: none; }
  .brand-logo-stack .brand-logo { height: 34px; }
  .site-footer__grid { grid-template-columns: 1.5fr repeat(3, 1fr); }
  .site-footer__brand { grid-column: auto; }
  .hero-title { font-size: clamp(3.4rem, 5.2vw, 4.2rem); }
}

/* --- Parcours publics : essai gratuit, confirmation, suivi ---
   Mêmes classes que l'ancien app.css, nouvelle identité (zéro or). */
.request-page, .tracking-page, .success-page { overflow-x: hidden; }
.request-hero, .tracking-hero, .success-hero { position: relative; overflow: hidden; margin-top: var(--mk-header-h); background: var(--mk-navy); color: #ffffff; scroll-margin-top: calc(var(--mk-header-h) + 18px); }
.request-hero::after, .tracking-hero::after, .success-hero::after { content: ""; position: absolute; right: -12%; bottom: -58%; width: 62%; aspect-ratio: 1; border: 1px solid rgba(95, 217, 212, 0.28); transform: rotate(18deg); pointer-events: none; }
.request-hero__grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 44px 44px; }
.request-hero__inner, .tracking-hero .wrap, .success-hero__inner { position: relative; z-index: 1; padding-top: clamp(3.25rem, 9vw, 6.5rem); padding-bottom: clamp(3.5rem, 10vw, 7rem); }
.request-hero h1, .tracking-hero h1, .success-hero h1 { max-width: 16ch; margin-top: 1.1rem; color: #ffffff; font-family: var(--mk-display); font-size: clamp(2.25rem, 8vw, 4.6rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; }
.request-hero p:not(.eyebrow), .tracking-hero p:not(.eyebrow), .success-hero p:not(.eyebrow) { max-width: 60ch; margin-top: 1.2rem; color: var(--mk-on-dark); font-size: 1rem; line-height: 1.7; }
.request-hero__points { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 1.7rem; color: var(--mk-on-dark-muted); font-size: 0.8rem; }
.request-hero__points li { display: inline-flex; align-items: center; gap: 8px; }
.request-hero__points li::before { content: ""; width: 18px; height: 2px; background: var(--mk-turquoise); }
.request-main, .tracking-main, .success-next { background: var(--mk-paper-2); }
.request-grid, .tracking-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: clamp(28px, 6vw, 72px); padding-bottom: clamp(52px, 9vw, 112px); }
.request-card, .request-panel, .tracking-card, .tracking-timeline { min-width: 0; padding: clamp(20px, 4vw, 34px); border: 1px solid var(--mk-line); border-radius: var(--mk-radius-lg); background: #ffffff; }
.request-card__head h2 { margin-top: 7px; color: var(--mk-navy); font-size: clamp(1.45rem, 4vw, 2rem); }
.request-card__head > p:last-child { max-width: 58ch; margin-top: 9px; color: var(--mk-muted); font-size: 0.86rem; }
.request-card fieldset { min-width: 0; margin: 30px 0 0; padding: 0; border: 0; }
.request-card legend { width: 100%; margin-bottom: 16px; color: var(--mk-navy); font-size: 0.95rem; font-weight: 700; }
.request-card legend small { display: block; margin-top: 4px; color: var(--mk-muted); font-size: 0.76rem; font-weight: 500; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.form-field { display: grid; gap: 7px; min-width: 0; color: var(--mk-ink); font-size: 0.8rem; font-weight: 700; }
.form-field span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.form-field b { color: #b42318; }
.form-field em { color: var(--mk-muted); font-size: 0.72rem; font-style: normal; font-weight: 500; }
.form-field input, .form-field textarea, .form-field select { width: 100%; min-height: 48px; margin: 0; padding: 12px 13px; border: 1px solid #b9bdc5; border-radius: var(--mk-radius); outline: none; background: #ffffff; color: var(--mk-navy); font-size: 1rem; font-weight: 500; }
.form-field textarea { min-height: 116px; resize: vertical; line-height: 1.55; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--mk-electric); box-shadow: 0 0 0 3px rgba(0, 79, 239, 0.22); }
.file-drop { position: relative; display: grid; justify-items: center; gap: 5px; min-height: 126px; margin-top: 18px; padding: 24px 16px; border: 1px dashed #aeb3bb; border-radius: var(--mk-radius); background: #fafafa; color: var(--mk-navy); text-align: center; cursor: pointer; }
.file-drop:hover, .file-drop:focus-within { border-color: var(--mk-electric); box-shadow: 0 0 0 3px rgba(0, 79, 239, 0.18); }
.file-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-drop > span:not(.file-drop__list) { font-size: 0.88rem; font-weight: 700; }
.file-drop small { color: var(--mk-muted); font-size: 0.72rem; }
.file-drop__list { width: 100%; margin-top: 5px; color: var(--mk-muted); font-size: 0.72rem; }
.consent-box { display: grid; gap: 11px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--mk-line); }
.consent-box label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--mk-muted); font-size: 0.77rem; line-height: 1.55; cursor: pointer; }
.consent-box input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--mk-electric); }
.consent-box b { color: #b42318; }
.request-submit { width: 100%; margin-top: 25px; }
.request-card__note { margin-top: 10px; color: var(--mk-muted); font-size: 0.72rem; text-align: center; }
.form-errors { margin-top: 22px; padding: 14px 16px; border: 1px solid #efb5af; border-radius: var(--mk-radius); background: #fff0ee; color: #b42318; font-size: 0.82rem; }
.form-errors ul { margin-top: 7px; padding-left: 18px; list-style: disc; }

/* R32 — Deux composants que la vitrine n'avait pas.

   1. `.hero-secondary` : un lien secondaire **sur fond marine**, dans les
      en-têtes de page (`success-hero`, `request-hero`). Sa définition
      existait dans `app.css`, qui n'est pas chargé par `public_head.php` —
      le lien s'affichait donc en bleu de lien par défaut. Recopié ici en
      tokens `--mk-*`, donc sans le doré que D098 a retiré de la vitrine.
      Sur fond clair, il ne convient pas : c'est `.hero-carte__ouvrir` qui
      porte ce rôle, et il est déjà là.

   2. `.encart` : un encart d'information. `.espace-encart` existe, mais il
      appartient à `espace-client.css`, non chargée sur la vitrine : l'encart
      « Pro non commandable » de `/offres/pro` s'affichait en HTML nu. Celui-ci
      est né sur la vitrine et ne connaît que les tokens `--mk-*` — donc il ne
      peut pas être rompu par un réglage de l'espace privé. */
.hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 48px;
  padding: 0.75rem 0.15rem;
  color: var(--mk-on-dark);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(95, 217, 212, 0.6);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color 0.18s var(--mk-ease), text-decoration-color 0.18s var(--mk-ease);
}
.hero-secondary:hover, .hero-secondary:focus-visible { color: #ffffff; text-decoration-color: var(--mk-turquoise-light); }

.encart { display: grid; gap: 0.55rem; margin-top: 1.5rem; padding: 1.05rem 1.2rem; border: 1px solid var(--mk-line); border-left: 3px solid var(--mk-turquoise); border-radius: var(--mk-radius); background: var(--mk-paper-warm); }
.encart-titre { color: var(--mk-navy); font-family: var(--mk-display); font-size: 0.95rem; font-weight: 700; line-height: 1.35; }
.encart p { max-width: 62ch; color: var(--mk-muted); font-size: 0.88rem; line-height: 1.65; }
.encart .btn { margin-top: 0.35rem; justify-self: start; }
.encart--info { border-left-color: var(--mk-electric); background: var(--mk-electric-soft); }
.encart--alerte { border-color: #efb5af; border-left-color: #b42318; background: #fff0ee; }
.encart--alerte .encart-titre, .encart--alerte p { color: #b42318; }
.request-aside { min-width: 0; }
.request-panel h2 { color: var(--mk-navy); font-size: 1.12rem; }
.request-panel > p { margin-top: 9px; color: var(--mk-muted); font-size: 0.82rem; line-height: 1.6; }
.request-steps { display: grid; gap: 18px; margin-top: 22px; }
.request-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; }
.request-steps li > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mk-turquoise-soft); color: var(--mk-turquoise-deep); font-size: 0.68rem; font-weight: 800; }
.request-steps strong { display: block; color: var(--mk-navy); font-size: 0.84rem; }
.request-steps p { margin-top: 4px; color: var(--mk-muted); font-size: 0.76rem; line-height: 1.55; }
.request-limits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding-top: 17px; border-top: 1px solid var(--mk-line); }
.request-limits li { padding: 7px 9px; border: 1px solid var(--mk-line); border-radius: 999px; color: var(--mk-muted); font-size: 0.7rem; }
.request-limits strong { color: var(--mk-navy); }
.request-panel--dark { border-color: var(--mk-navy); background: var(--mk-navy); color: #ffffff; }
.request-panel--dark p { color: var(--mk-on-dark) !important; }
.tracking-timeline h2 { color: var(--mk-navy); font-size: 1.2rem; }
.tracking-timeline ol { display: grid; gap: 0; margin-top: 24px; }
.tracking-timeline li { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding-bottom: 28px; }
.tracking-timeline li:last-child { padding-bottom: 0; }
.tracking-timeline li:not(:last-child)::before { content: ""; position: absolute; top: 34px; bottom: 0; left: 16px; width: 1px; background: var(--mk-line); }
.tracking-marker { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--mk-line); border-radius: 50%; background: var(--mk-paper-2); color: var(--mk-muted); font-size: 0.78rem; font-weight: 800; }
.tracking-timeline li.is-done .tracking-marker { border-color: var(--mk-electric); background: var(--mk-electric); color: #ffffff; }
.tracking-marker svg { width: 17px; height: 17px; }
.tracking-timeline h3 { color: var(--mk-navy); font-size: 0.94rem; }
.tracking-timeline p { max-width: 55ch; margin-top: 5px; color: var(--mk-muted); font-size: 0.8rem; line-height: 1.6; }
.tracking-timeline .btn { margin-top: 13px; }
.tracking-aside { display: grid; align-content: start; gap: 16px; min-width: 0; }
.tracking-card h2 { color: var(--mk-navy); font-size: 1rem; }
.tracking-card dl { display: grid; gap: 12px; margin-top: 18px; }
.tracking-card dl > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding-top: 10px; border-top: 1px solid var(--mk-line); }
.tracking-card dt { color: var(--mk-muted); font-size: 0.72rem; }
.tracking-card dd { min-width: 0; margin: 0; color: var(--mk-navy); font-size: 0.8rem; font-weight: 650; overflow-wrap: anywhere; }
.tracking-count { margin-top: 18px; color: var(--mk-electric-deep); font-size: 0.78rem; font-weight: 700; }
.tracking-card--dark { border-color: var(--mk-navy); background: var(--mk-navy); }
.tracking-card--dark p { color: var(--mk-on-dark); font-size: 0.84rem; }
.tracking-card--dark a { display: inline-flex; margin-top: 14px; color: var(--mk-turquoise-light); font-size: 0.8rem; font-weight: 700; text-decoration: none; }
.success-hero__icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(95, 217, 212, 0.6); border-radius: 50%; color: var(--mk-turquoise-light); }
.success-hero__icon svg { width: 25px; height: 25px; }
.success-hero__delay { display: inline-flex; margin-top: 1.35rem; padding: 8px 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: var(--mk-on-dark); font-size: 0.75rem; }
.success-list { display: grid; gap: 0; max-width: 850px; margin-top: 34px; border-top: 1px solid var(--mk-line); }
.success-list li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--mk-line); }
.success-list li > span { color: var(--mk-electric); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; }
.success-list h3 { color: var(--mk-navy); font-size: 1rem; }
.success-list p { max-width: 58ch; margin-top: 5px; color: var(--mk-muted); font-size: 0.82rem; line-height: 1.6; }
@media (min-width: 640px) {
  .form-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-field--wide { grid-column: 1 / -1; }
  .success-list { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; gap: 16px; }
  .success-list li { display: block; padding: 20px; border: 1px solid var(--mk-line); border-radius: var(--mk-radius-lg); background: #ffffff; }
  .success-list li > span { display: block; margin-bottom: 16px; }
}
@media (min-width: 900px) {
  .request-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); align-items: start; gap: 32px; }
  .request-aside { position: sticky; top: 96px; }
  .tracking-layout { grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); align-items: start; gap: 32px; }
}

/* --- Mouvement réduit + impression --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header, .mobile-menu, .to-top, .sticky-cta, .site-footer { display: none !important; }
  body { background: #fff; color: #000; }
}

/* 18. Les aides et les sous-titres du formulaire d'essai.
   `.field-help` etait utilisee sans jamais etre definie : le texte d'aide
   heritait du gras du libelle, et se confondait avec lui. Le traitement repris
   est celui de `.form-field em`, deja choisi par la feuille pour un texte
   secondaire — meme couleur, meme taille, meme graisse. */
.field-help {
  color: var(--mk-muted); font-size: 0.72rem; font-weight: 500; line-height: 1.5;
}

/* L'intitule commun a plusieurs champs (nom et prenom). Meme traitement que les
   legendes de `fieldset` : majuscules, espacees, sur toute la largeur. */
.form-subtitle {
  display: grid; gap: 2px; margin: 4px 0 0; padding: 0 0 10px;
  border-bottom: 1px solid var(--mk-line);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--mk-navy);
}
.form-subtitle > small {
  font-size: 0.72rem; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--mk-muted);
}

/* 19. Les deux champs du code personnel.
   Compacts, chiffres a chasse fixe, et un bouton d'oeil qui ne change que le
   type du champ — aucune couleur propre, tout vient des variables de la
   feuille. */
@media (min-width: 640px) {
  /* Deux colonnes **fixes**, pas deux fractions : un code fait quatre a six
     caracteres, et une colonne qui s'etire donnerait l'impression d'une saisie
     longue. Sous 640 px, la grille de base (une colonne) s'applique — deux
     colonnes de 12 rem deborderaient d'un telephone de 320 px. */
  .form-grid--code { grid-template-columns: repeat(2, minmax(0, 12rem)); }
  .form-grid--code > .form-field--wide { grid-column: 1 / -1; }
}

.form-code__champ { position: relative; display: block; }

.form-code__input {
  padding-right: 46px !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.35em;
  text-align: center;
  font-weight: 600;
}

/* Le bouton est dans le flux — pas flottant, pas absolue sur le parent — donc
   il ne peut pas chevaucher le focus du champ. */
.form-code__oeil {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--mk-muted); cursor: pointer;
  transition: color .15s, background-color .15s;
}
.form-code__oeil:hover { color: var(--mk-navy); background: var(--mk-paper-2); }
.form-code__oeil:focus-visible { outline: 2px solid var(--mk-electric); outline-offset: 1px; }
.form-code__oeil[aria-pressed="true"] { color: var(--mk-electric); background: var(--mk-electric-soft); }
.form-code__oeil svg { width: 19px; height: 19px; }

/* /* 21. Le couple « indicatif + numéro » (HOTFIX-08).
 *
 * UNE seule case : la barre porte une bordure, l'indicatif est dedans, a gauche,
 * separe par un simple trait. Deux bordures Auraient voulu dire deux champs —
 * et l'utilisateur en aurait compte deux.
 *
 * `[hidden]` est ecrit explicitement partout : `.tel__choix` est en `display: flex`
 * et `.tel__groupe` en `display: block`, or l'attribut `hidden` n'agit que si rien
 * ne le remplace. Sans ces regles, le filtre ne filtrerait rien — sans message,
 * sans erreur.
 */

/*

/* /* 21. Le champ téléphone : indicatif et numéro dans la même case (HOTFIX-08).
 *
 * ── UNE seule case ─────────────────────────────────────────────────────────
 *
 * La barre porte une bordure, et **rien d'autre n'en porte** : ni le declencheur,
 * ni le numero. Une version anterieure posait un trait vertical entre le
 * declencheur et le numero — l'oeil lisait alors deux champs dans une boite, ce
 * que la demande exclut.
 *
 * ── Le drapeau et l'indicatif : un seul lien ────────────────────────────────
 *
 * Un seul `button`, donc un seul focus, un seul nom accessible, un seul clic. Le
 * drapeau et le code sont deux morceaux a l'interieur de ce controle. Deux
 * boutons seraient deux cases.
 *
 * ── Pourquoi presque tous les selecteurs sont prefixes ─────────────────────
 *
 * La vitrine a `.form-field input`, `.form-field select` et `.form-field span`,
 * toutes en specificite (0,1,1). Le composant est insere **dans** un
 * `div.form-field` : ses elements sont donc des descendants de ces selecteurs, et
 * perdent a specificite egale contre un `.tel__…` seul, en (0,1,0).
 *
 * Le prefixe `.tel` porte ces regles a (0,2,0), et rien dans le projet ne peut
 * plus leur passer devant. C'est ce prefixe qui a ete oublie trois fois — sur
 * `width`, puis sur `border`, puis sur `align-items` — et chaque fois le composant
 * s'est casse sans qu'aucune assertion ne le voie.
 *
 * Les selecteurs qui commencent par `.tel--` ne sont **pas** prefixes davantage :
 * `.tel--pret` et `.tel` sont sur le meme element, et un combinateur de descendant
 * exige deux elements distincts. La regle se trouve dans la phrase ci-dessus,
 * parce qu'elle s'est deja retournee contre elle-meme.
 *
 * ── `flex-wrap: nowrap`, declare explicitement ─────────────────────────────
 *
 * `.form-field span` impose `flex-wrap: wrap`. Herite de la, il pourrait faire passer le numero
 * passer a la ligne et la case mesurer deux hauteurs. On le neutralise donc.
 *
 * ── `[hidden]` partout ──────────────────────────────────────────────────────
 *
 * `.tel__choix` est en `display: flex`, et l'attribut `hidden` n'agit que si rien
 * ne le remplace. Sans ces regles, le filtre ne filtrerait rien — sans message,
 * sans erreur.
 */
.tel {
  position: relative;
  display: block;
}

.tel .tel__barre {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0;
  background: #ffffff;
  border: 1px solid #b9bdc5;
  border-radius: var(--mk-radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Le signe de focus suit l'element reellement manipule : une fois le script actif,
   c'est le numero qui recoit le focus, pas l'indicatif. */
.tel .tel__barre:focus-within {
  border-color: #004fef;
  box-shadow: 0 0 0 3px rgba(0, 79, 239, 0.22);
}

.tel--ouvert .tel__barre {
  border-color: #004fef;
  box-shadow: 0 0 0 3px rgba(0, 79, 239, 0.22);
}

/* ── Le drapeau et l'indicatif ────────────────────────────────────────────── */

.tel .tel__declencheur {
  display: none;
  align-self: stretch;
  align-items: center;
  gap: 0;
  flex: 0 0 auto;
  margin: 0;
  padding: 0 6px 0 12px;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--mk-navy);
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}

.tel--pret .tel__declencheur {
  display: flex;
}

.tel .tel__declencheur:hover {
  background: #f8fafc;
}

.tel .tel__declencheur:focus-visible {
  outline: 2px solid #004fef;
  outline-offset: -2px;
}

.tel .tel__drapeau {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 15px;
  /* Ratio 4/3, la forme des drapeaux de reference : 3/2 les ferait paraitre plus
     grands que le texte, et 1/1 les aplatit. */
  border-radius: 2px;
  object-fit: cover;
  background: #f1f5f9;
}

.tel .tel__drapeau--neutre {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  line-height: 1;
  color: var(--mk-muted);
  background: #f1f5f9;
}

.tel .tel__indicatif {
  padding-left: 6px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.tel .tel__caret {
  width: 13px;
  height: 13px;
  margin-left: 4px;
  opacity: 0.5;
}

/* ── Le numero : meme case, pas de bordure propre ──────────────────────────── */

.tel .tel__numero {
  flex: 1 1 9rem;
  min-width: 7rem;
  min-height: 48px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--mk-navy);
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  /* Chiffres a chasse fixe : un code se lit par colonne, et un « 1 » etroit suivi
     d'un « 0 » rond decale tout le regard. */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  -webkit-appearance: none;
  appearance: none;
}

.tel .tel__numero::placeholder {
  letter-spacing: normal;
}

.tel .tel__numero:focus {
  box-shadow: none;
}

.tel .tel__numero::-webkit-outer-spin-button,
.tel .tel__numero::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* ── Le select : la valeur du formulaire ──────────────────────────────────── */

.tel .tel__select {
  min-height: 48px;
  margin: 0;
  padding: 0 12px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--mk-navy);
  background: #ffffff;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Une fois le script actif, le select devient le simple porteur de la valeur :
   retire du regard mais pas du formulaire ni du parcours de lecture. Jamais
   `display: none`, qui le sortirait des deux. */
.tel--pret .tel__select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Le panneau ───────────────────────────────────────────────────────────── */

.tel .tel__panneau {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  width: max-content;
  min-width: 100%;
  max-width: min(24rem, 88vw);
  background: #ffffff;
  border: 1px solid #b9bdc5;
  border-radius: var(--mk-radius);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  overflow: hidden;
}

.tel .tel__panneau[hidden] {
  display: none;
}

/* Le panneau s'aligne sur le bord droit du champ quand la place manque a droite :
   c'est le meme comportement qu'un menu natif. */
.tel .tel__panneau--droite {
  left: auto;
  right: 0;
}

.tel .tel__recherche {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid #b9bdc5;
}

.tel .tel__loupe {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  opacity: 0.5;
}

.tel .tel__recherche-champ {
  flex: 1;
  min-width: 0;
  padding: 2px 0;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--mk-navy);
  background: transparent;
  border: 0;
  outline: none;
}

.tel .tel__liste {
  display: block;
  max-height: 16rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
}

.tel .tel__groupe {
  display: block;
}

.tel .tel__groupe[hidden] {
  display: none;
}

.tel .tel__region {
  display: block;
  padding: 8px 8px 3px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mk-muted);
}

.tel .tel__choix {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 0.9rem;
  text-align: left;
  color: var(--mk-navy);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.tel .tel__choix[hidden] {
  display: none;
}

.tel .tel__choix:hover,
.tel .tel__choix:focus-visible {
  background: #f1f5f9;
  outline: none;
}

.tel .tel__choix[aria-selected="true"] {
  background: #f1f5f9;
  font-weight: 700;
}

.tel .tel__choix-drapeau {
  flex: 0 0 auto;
  width: 20px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  background: #f1f5f9;
}

.tel .tel__choix-code {
  flex: 0 0 3.2rem;
  font-variant-numeric: tabular-nums;
  color: var(--mk-muted);
}

.tel .tel__choix-nom {
  flex: 1;
}

.tel .tel__rien {
  display: block;
  padding: 12px 10px;
  font-size: 0.85rem;
  color: var(--mk-muted);
}

.tel .tel__rien[hidden] {
  display: none;
}

/* ── L'erreur ─────────────────────────────────────────────────────────────── */

.tel .tel__erreur {
  display: block;
  margin-top: 5px;
  font-size: 0.78rem;
  color: #b42318;
}

.tel .tel__erreur[hidden] {
  display: none;
}

.tel--erreur .tel__barre {
  border-color: #b42318;
}

@media (max-width: 30rem) {
  /* Sur un telephone, le champ reste une seule case ; c'est le panneau qui prend
     la largeur de l'ecran. */
  .tel .tel__panneau {
    max-width: 92vw;
  }
}

/* ── EC14-B : la connexion du commerce ────────────────────────────────── */

/* Le lien est avant l'appel a l'essai, mais il ne doit pas lui voler sa place.
 *
 * Un second bouton plein dans l'en-tete ferait deux appels a l'action pour une
 * seule question, et la reponse a « creer mon catalogue » serait moins lue. Le
 * commerce est donc en texte, en petit, juste avant le bouton : il le cherche
 * s'il a deja un compte, et ne le voit pas sinon. */
.header-login {
    font-size: 0.8125rem;
    font-weight: 650;
    color: inherit;
    text-decoration: none;
    padding: 0.375rem 0.25rem;
    white-space: nowrap;
    border-radius: 8px;
}

.header-login:hover,
.header-login:focus-visible {
    text-decoration: underline;
}

/* Sur telephone, l'en-tete ne porte que la marque, la langue, le bouton et le
 * burger : le lien disparaitrait de toute façon. Il revient dans le tiroir. */
.mobile-menu__login {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 650;
    text-align: center;
    color: inherit;
    text-decoration: none;
}

.mobile-menu__login:hover,
.mobile-menu__login:focus-visible {
    text-decoration: underline;
}
/* --- Documentation publique (DOC01) ---

   Deux composants que la vitrine n'avait pas, et que la documentation a fait
   apparaître :

   1. `.fil-ariane` : où l'on se trouve. Il est rendu dans le héros marine des
      pages de section, donc il ne connaît que les tons clairs de ce fond-là ;
      le même composant sur fond clair serait un autre composant.

   2. `.sommaire` : la navigation entre les rubriques de la documentation. Il
      n'a pas de titre visible — le `<nav>` porte un `aria-label` —, parce
      qu'un titre « Documentation » sous un `<h1>` qui dit déjà « Documentation »
      ne ferait qu'une ligne de trop.

   Comme `.encart` (R32), ils ne connaissent que les jetons `--mk-*` : ils ne
   peuvent pas être rompus par un réglage de l'espace privé ni par une valeur
   posée en dur. */
.fil-ariane ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 1.15rem;
  padding: 0;
  list-style: none;
}
.fil-ariane li { display: inline-flex; align-items: center; gap: 6px; }
.fil-ariane li + li::before {
  content: "/";
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.78rem;
}
.fil-ariane a {
  color: var(--mk-on-dark-muted);
  font-family: var(--mk-display);
  font-size: 0.78rem;
  text-decoration: none;
  transition: color 0.18s var(--mk-ease);
}
.fil-ariane a:hover, .fil-ariane a:focus-visible {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.fil-ariane__ici { color: var(--mk-turquoise-light); font-family: var(--mk-display); font-size: 0.78rem; font-weight: 600; }

.sommaire { max-width: 46rem; }
.sommaire ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--mk-line);
}
.sommaire__lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--mk-line);
  color: var(--mk-navy);
  font-family: var(--mk-display);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.18s var(--mk-ease), padding-left 0.18s var(--mk-ease);
}
.sommaire__lien::after { content: "\2192"; color: var(--mk-muted); font-size: 0.85rem; }
.sommaire__lien:hover, .sommaire__lien:focus-visible { color: var(--mk-electric); padding-left: 10px; }
.sommaire__lien.est-courante { color: var(--mk-electric-deep); }
.sommaire__lien.est-courante::after { content: "\2713"; color: var(--mk-turquoise-deep); }
.sommaire__vide { color: var(--mk-muted); font-size: 0.88rem; }