/* MacroSmart — site vitrine.
   Tokens repris de l'identité de l'app phare (MACROSMART.APP/frontend/index.html).
   Sombre par défaut, clair via prefers-color-scheme. Aucun hex en dur hors de :root. */

:root {
  color-scheme: dark light;

  --c-bg: #0A0E17;
  --c-surface: #131A29;
  --c-surface-raised: #1B2436;
  --c-line: #26314A;

  --c-blue: #4C86FF;
  --c-blue-soft: rgba(76, 134, 255, 0.12);
  --c-green: #3ED8A0;
  --c-amber: #F0B429;
  --c-violet: #9B8CFF;

  --c-text: #F4F6FB;
  --c-text-mid: #A6B0C3;
  --c-text-low: #7E8AA6;

  --c-cta-text: #FFFFFF;

  --radius: 16px;
  --radius-pill: 999px;
  --content-width: 1080px;
}

@media (prefers-color-scheme: light) {
  :root {
    --c-bg: #EEF1F6;
    --c-surface: #FFFFFF;
    --c-surface-raised: #FFFFFF;
    --c-line: #D9DFEA;

    --c-blue: #2563EB;
    --c-blue-soft: rgba(37, 99, 235, 0.10);
    --c-green: #0E9F6E;

    --c-text: #101828;
    --c-text-mid: #45536B;
    --c-text-low: #66738C;
  }
}

/* Polices « dépliées » (desubroutinize) : dans les fichiers d'origine, le « é »
   gras traçait son accent puis appelait le sous-programme du « e ». Le compte de
   stems du hintmask différait alors entre l'appelant et le sous-programme, et
   l'interpréteur CFF des navigateurs s'y désynchronisait : le corps de la lettre
   disparaissait, seul l'accent restait. Voir marque/LISEZMOI.md avant de
   remplacer ces fichiers par ceux de l'app, qui portent encore le défaut. */
@font-face {
  font-family: "Glacial Indifference";
  src: url("../fonts/GlacialIndifference-Regular.woff2") format("woff2"),
       url("../fonts/GlacialIndifference-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Glacial Indifference";
  src: url("../fonts/GlacialIndifference-Bold.woff2") format("woff2"),
       url("../fonts/GlacialIndifference-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Compense le header sticky lors de la navigation par ancres. */
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: "Glacial Indifference", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c-blue); }

.contenu {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Header ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
}

.entete-int {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
}

.entete-logo img { height: 30px; width: auto; display: block; }

.entete-nav {
  display: none;
  gap: 26px;
}
.entete-nav a {
  color: var(--c-text-mid);
  text-decoration: none;
  font-size: 15px;
}
.entete-nav a:hover { color: var(--c-text); }

@media (min-width: 720px) {
  .entete-nav { display: flex; }
}

/* ---------- Boutons ---------- */

.bouton {
  display: inline-block;
  background: var(--c-blue);
  color: var(--c-cta-text);
  text-decoration: none;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  transition: filter 0.15s ease;
}
.bouton:hover { filter: brightness(1.1); }
.bouton--petit { padding: 9px 18px; font-size: 14px; }
.bouton--grand { padding: 15px 30px; font-size: 17px; }

/* ---------- Hero ---------- */

.hero {
  padding: 88px 0 72px;
  text-align: center;
}

.hero-badge {
  display: inline-block;
  background: var(--c-blue-soft);
  color: var(--c-blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 22px;
}

.hero h1 {
  font-size: clamp(32px, 6vw, 52px);
  line-height: 1.15;
  margin: 0 0 18px;
}

.hero-accent { color: var(--c-blue); }

.hero-sous-titre {
  max-width: 640px;
  margin: 0 auto 32px;
  color: var(--c-text-mid);
  font-size: clamp(16px, 2.5vw, 19px);
}

.hero-invitation {
  margin-top: 18px;
  font-size: 14px;
  color: var(--c-text-low);
}
.hero-invitation a { color: var(--c-text-mid); }

/* ---------- Points clés du hero ---------- */

.hero-points {
  list-style: none;
  margin: 38px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}
.hero-points li {
  font-size: 13px;
  color: var(--c-text-mid);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  padding: 7px 15px;
  background: var(--c-surface);
}

/* ---------- Étapes numérotées ---------- */

.etapes {
  list-style: none;
  counter-reset: etape;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.etape {
  position: relative;
  background: var(--c-surface-raised);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 30px 26px 26px;
}
.etape h3 { margin: 0 0 10px; font-size: 19px; }
.etape p  { margin: 0; color: var(--c-text-mid); font-size: 15px; }

.etape-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--c-blue-soft);
  color: var(--c-blue);
  font-weight: 700;
  font-size: 17px;
}

/* ---------- Présentation des écrans ---------- */

.ecran {
  display: grid;
  gap: 34px;
  align-items: center;
  padding: 44px 0;
  border-top: 1px solid var(--c-line);
}
.ecran:first-of-type { border-top: none; padding-top: 8px; }

@media (min-width: 880px) {
  .ecran { grid-template-columns: 1fr minmax(0, 300px); gap: 60px; }
  /* Une image tantôt à droite, tantôt à gauche : c'est ce qui empêche la
     succession de blocs de devenir une liste monotone. */
  .ecran--inverse .ecran-texte  { order: 2; }
  .ecran--inverse .ecran-image  { order: 1; }
  .ecran--inverse { grid-template-columns: minmax(0, 300px) 1fr; }
}

.ecran-etiquette {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-blue);
  background: var(--c-blue-soft);
  border-radius: var(--radius-pill);
  padding: 5px 13px;
  margin-bottom: 16px;
}

.ecran-texte h3 { margin: 0 0 12px; font-size: clamp(22px, 3.4vw, 28px); line-height: 1.25; }
.ecran-texte > p { margin: 0 0 20px; color: var(--c-text-mid); }

.ecran-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ecran-liste li {
  position: relative;
  padding-left: 26px;
  color: var(--c-text-mid);
  font-size: 15px;
}
.ecran-liste li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-green);
}
.ecran-liste strong { color: var(--c-text); font-weight: 700; }

.ecran-image { display: flex; justify-content: center; }

/* Cadre de téléphone : les captures sont sombres en dur, le cadre les assume
   comme un écran plutôt que de les laisser flotter sur une page claire. */
.telephone {
  width: min(280px, 78vw);
  border: 7px solid #1B2436;
  border-radius: 34px;
  overflow: hidden;
  background: #0A0E17;
  box-shadow: 0 26px 60px -26px rgba(10, 14, 23, 0.7);
}
.telephone img { display: block; width: 100%; height: auto; }

/* ---------- Exemples d'utilisation ---------- */

.exemples {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.exemple {
  background: var(--c-surface-raised);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 22px 22px 24px;
}

.exemple-contexte {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-low);
  margin-bottom: 16px;
}

.exemple-vous, .exemple-coach {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  padding: 12px 16px;
  border-radius: var(--radius);
}
.exemple-vous {
  background: var(--c-blue);
  color: var(--c-cta-text);
  border-bottom-right-radius: 5px;
  margin-left: 22px;
}
.exemple-coach {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  color: var(--c-text-mid);
  border-bottom-left-radius: 5px;
  margin: 10px 22px 0 0;
}

.exemples-note {
  margin: 30px auto 0;
  max-width: 620px;
  text-align: center;
  font-size: 13px;
  color: var(--c-text-low);
}

/* ---------- Questions fréquentes ---------- */

.faq { max-width: 760px; margin: 0 auto; }

.faq details {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface-raised);
  margin-bottom: 12px;
  overflow: hidden;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 54px 18px 22px;
  font-weight: 700;
  font-size: 16px;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }

/* Chevron en CSS pur : la page n'embarque aucun JavaScript. */
.faq summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--c-blue);
  border-bottom: 2px solid var(--c-blue);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.18s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }

.faq details p {
  margin: 0;
  padding: 0 22px 20px;
  color: var(--c-text-mid);
  font-size: 15px;
}

/* ---------- Film de présentation ---------- */

.film { padding-top: 24px; }

/* Le film est sombre en dur (il prolonge le thème par défaut de l'app). Le
   cadre lui donne un contour net en thème clair, où il ne peut pas se fondre
   dans la page. */
.film-cadre {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #0A0E17;
  box-shadow: 0 24px 60px -24px rgba(10, 14, 23, 0.65);
}

.film-cadre video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Halo discret derrière le cadre, dans l'accent de la marque. */
.film-cadre::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(76, 134, 255, 0.14);
}

/* ---------- Sections ---------- */

.section { padding: 72px 0; }
.section--carte {
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

.section-titre {
  text-align: center;
  font-size: clamp(26px, 4.5vw, 36px);
  line-height: 1.2;
  margin: 0 0 14px;
}

.section-intro {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 48px;
  color: var(--c-text-mid);
}

/* ---------- Cartes de fonctionnalités ---------- */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.carte {
  background: var(--c-surface-raised);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 26px;
}

.carte-icone {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--c-blue-soft);
  color: var(--c-blue);
  margin-bottom: 16px;
}
.carte-icone svg { width: 24px; height: 24px; }
.carte-icone--vert   { background: rgba(62, 216, 160, 0.12); color: var(--c-green); }
.carte-icone--ambre  { background: rgba(240, 180, 41, 0.12);  color: var(--c-amber); }
.carte-icone--violet { background: rgba(155, 140, 255, 0.12); color: var(--c-violet); }

.carte h3 { margin: 0 0 8px; font-size: 18px; }
.carte p  { margin: 0; color: var(--c-text-mid); font-size: 15px; }

/* ---------- Bande MacroCoach ---------- */

.coach {
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 860px) {
  .coach { grid-template-columns: 1fr 1fr; }
}

.coach-texte h2 { text-align: left; margin-bottom: 14px; }
.coach-texte p  { color: var(--c-text-mid); margin: 0 0 14px; }

.chat {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bulle {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.5;
}
.bulle--moi {
  align-self: flex-end;
  background: var(--c-blue);
  color: var(--c-cta-text);
  border-bottom-right-radius: 6px;
}
.bulle--coach {
  align-self: flex-start;
  background: var(--c-surface-raised);
  border: 1px solid var(--c-line);
  border-bottom-left-radius: 6px;
}
.bulle--coach strong { color: var(--c-green); }

/* ---------- Confiance ---------- */

.confiance-note {
  text-align: center;
  margin-top: 34px;
  font-size: 14px;
  color: var(--c-text-low);
}

/* ---------- La suite ---------- */

.suite-encart {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  background: var(--c-surface-raised);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 44px 30px;
}
.suite-encart p { color: var(--c-text-mid); margin: 0; }
.suite-encart p + p { margin-top: 12px; }

/* ---------- CTA final ---------- */

.final {
  text-align: center;
  padding: 84px 0;
}
.final h2 { margin-bottom: 14px; }
.final p  { color: var(--c-text-mid); margin: 0 0 30px; }

/* ---------- Pied de page ---------- */

.pied {
  border-top: 1px solid var(--c-line);
  padding: 36px 0 44px;
  font-size: 14px;
  color: var(--c-text-low);
}
.pied-lignes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}
.pied a { color: var(--c-text-mid); }
.pied-avertissement { max-width: 640px; margin: 0 auto; }

/* ---------- Page mentions légales ---------- */

.page-simple { padding: 56px 0 80px; max-width: 760px; margin: 0 auto; }
.page-simple h1 { font-size: clamp(28px, 5vw, 36px); margin: 0 0 30px; }
.page-simple h2 { font-size: 20px; margin: 34px 0 10px; }
.page-simple p, .page-simple li { color: var(--c-text-mid); }