/* Police Lexend, la même que dans l'appli : formes ouvertes, pensée pour le
   confort de lecture (profils TDAH / dys). Auto-hébergée : aucun appel externe. */
@font-face { font-family: "Lexend"; src: url("fonts/lexend-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("fonts/lexend-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("fonts/lexend-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }

/* Palette reprise de ui/theme/Color.kt : crème chaud, un seul vert d'action,
   un seul ambre de signal. */
:root {
  color-scheme: light dark;
  --bg: #F5F1E9;
  --bande: #EFEADE;
  --surface: #FFFFFF;
  --text: #2E2C28;
  --text-2: #6E6A62;
  --text-3: #918B80;
  --primary: #4C7B60;
  --primary-ink: #FFFFFF;
  --primary-soft: #DBE8DE;
  --primary-deep: #264B36;
  --accent-soft: #F6E9CD;
  --accent-ink: #6B4A15;
  --border: #E4DED1;
  --bezel: #33312C;
  --ombre-douce: 0 1px 3px rgba(46,44,40,.04), 0 8px 24px rgba(46,44,40,.06);
  --ombre-bouton: 0 2px 6px rgba(38,75,54,.18), 0 10px 28px rgba(38,75,54,.20);
  --ombre-phone: 0 2px 8px rgba(46,44,40,.10), 0 18px 44px rgba(46,44,40,.16);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171A;
    --bande: #1A1D20;
    --surface: #1F2327;
    --text: #ECEAE3;
    --text-2: #B4AEA3;
    --text-3: #8B857B;
    --primary: #8FC0A2;
    --primary-ink: #10231A;
    --primary-soft: #2C4739;
    --primary-deep: #C9E6D3;
    --accent-soft: #3E3115;
    --accent-ink: #F1DFB4;
    --border: #31363A;
    --bezel: #0B0D0F;
    --ombre-douce: 0 1px 3px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.32);
    --ombre-bouton: 0 2px 6px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.45);
    --ombre-phone: 0 2px 8px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.5);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Corps généreux et interlignage large : la page doit se lire sans effort,
     comme l'app qu'elle présente. */
  font-size: 17.5px;
  line-height: 1.72;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

/* Marges latérales uniquement. En raccourci (`padding: 0 24px`) cette règle
   écraserait le rythme vertical des sections qui portent aussi .wrap. */
.wrap { max-width: 940px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
section { padding-top: 76px; padding-bottom: 76px; }

/* Bandes alternées : c'est ce qui donne son rythme à la page. Pleine largeur,
   le contenu restant contenu par .wrap. */
.bande { background: var(--bande); }

h1, h2, h3 { line-height: 1.24; margin: 0 0 16px; letter-spacing: -.015em; }
h1 { font-size: 3rem; font-weight: 700; letter-spacing: -.03em; margin-bottom: 8px; }
h2 { font-size: 1.75rem; font-weight: 700; }
h3 { font-size: 1.3rem; font-weight: 700; }
p { margin: 0 0 18px; }
strong { font-weight: 600; color: var(--text); }

a { color: var(--primary-deep); text-underline-offset: 3px; }
@media (prefers-color-scheme: dark) { a { color: var(--primary); } }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; border-radius: 10px; }

/* Surtitre : repère de lecture avant chaque titre, tenu très discret. */
.oeil {
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 10px;
}

/* ══ Accueil ═══════════════════════════════════════════════════════════════ */
.hero { position: relative; text-align: center; padding: 88px 0 72px; overflow: hidden; }
/* Halo : une seule lueur très diffuse derrière le compagnon. Assez pour donner
   de la profondeur, jamais assez pour attirer l'œil. */
.hero-halo {
  position: absolute; top: -180px; left: 50%; transform: translateX(-50%);
  width: 760px; height: 620px; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(76,123,96,.16), rgba(76,123,96,0) 70%),
    radial-gradient(closest-side at 70% 45%, rgba(198,137,44,.12), rgba(198,137,44,0) 70%);
}
.hero-contenu { position: relative; width: 100%; }
.buddy { width: 156px; height: 156px; margin-bottom: 6px; }
.promesse {
  font-size: 1.45rem; font-weight: 600; color: var(--text);
  max-width: 21ch; margin: 0 auto 20px; line-height: 1.35;
}
.sous-promesse { color: var(--text-2); max-width: 46ch; margin: 0 auto 36px; }

/* Bouton principal */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  background: var(--primary); color: var(--primary-ink);
  font: inherit; font-weight: 600; font-size: 1.15rem;
  padding: 19px 38px; border-radius: 999px; text-decoration: none;
  box-shadow: var(--ombre-bouton);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn:hover { filter: brightness(1.05); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-icone { flex: 0 0 auto; }

/* Pastilles d'information : lisibles d'un coup d'œil, sans phrase à lire. */
.pastilles {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; margin: 24px 0 26px; padding: 0;
}
.pastilles li {
  font-size: .84rem; font-weight: 500; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border);
  padding: 7px 15px; border-radius: 999px;
}
.dl-note { font-size: .93rem; color: var(--text-2); max-width: 42ch; margin: 0 auto; }

/* ══ Blocs de texte ════════════════════════════════════════════════════════ */
.intro { max-width: 680px; }
.intro p, .texte-doux, .chapeau, .apres { color: var(--text-2); }
.intro p { font-size: 1.06rem; }
.chapeau { max-width: 62ch; margin-bottom: 34px; }
.texte-doux { max-width: 62ch; }

/* ══ Texte + capture, en alternance ════════════════════════════════════════ */
.duo-section { padding-top: 68px; padding-bottom: 68px; }
.duo {
  display: grid; grid-template-columns: 1fr 264px;
  gap: 64px; align-items: center;
}
.duo-inverse .duo-texte { order: 2; }
.duo-inverse .duo-image { order: 1; }
.duo-texte p { color: var(--text-2); margin-bottom: 14px; }
.duo-texte p:last-child { margin-bottom: 0; }
.note-douce {
  margin-top: 18px; padding: 14px 18px; border-radius: 14px;
  background: var(--primary-soft); color: var(--primary-deep);
  font-size: .95rem;
}

/* Cadre de téléphone en CSS : une capture posée nue fait maquette inachevée.
   Le bezel sombre fonctionne sur les deux thèmes, et l'encoche haut-parleur
   suffit à faire lire l'objet comme un téléphone. */
.duo-image { display: flex; justify-content: center; }
.phone {
  position: relative;
  padding: 11px;
  background: var(--bezel);
  border-radius: 40px;
  box-shadow: var(--ombre-phone);
  max-width: 264px; width: 100%;
}
.phone::before {
  content: ""; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 62px; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.22);
}
.phone img {
  width: 100%; height: auto; display: block; border-radius: 30px;
}

/* ══ Carte de téléchargement ═══════════════════════════════════════════════ */
.dl-carte {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 30px; padding: 52px 34px; text-align: center;
  box-shadow: var(--ombre-douce);
  max-width: 620px; margin: 0 auto;
}
.dl-icone { width: 80px; height: 80px; border-radius: 20px; margin-bottom: 18px; }
.dl-carte p { color: var(--text-2); max-width: 38ch; margin: 0 auto 30px; }
.dl-infos { margin: 18px 0 0; font-size: .9rem; color: var(--text-2); }

/* ══ Étapes d'installation ═════════════════════════════════════════════════ */
ol.etapes {
  list-style: none; counter-reset: e; margin: 0 0 30px; padding: 0;
  display: grid; gap: 16px;
}
ol.etapes > li {
  counter-increment: e; position: relative;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 22px; padding: 26px 28px 26px 78px;
  box-shadow: var(--ombre-douce);
}
ol.etapes > li::before {
  content: counter(e); position: absolute; left: 26px; top: 26px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--primary); color: var(--primary-ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .95rem;
}
ol.etapes h3 { font-size: 1.12rem; margin-bottom: 8px; }
ol.etapes p { margin: 0; color: var(--text-2); font-size: .98rem; }

/* ══ Conseil ═══════════════════════════════════════════════════════════════ */
.conseil {
  background: var(--accent-soft); color: var(--accent-ink);
  border-radius: 18px; padding: 20px 24px; max-width: 62ch;
  font-size: .97rem; margin-bottom: 0;
}
.conseil-titre { display: block; font-weight: 700; margin-bottom: 4px; }

/* ══ Retours ═══════════════════════════════════════════════════════════════ */
.retour {
  background: var(--primary-soft); border-radius: 30px;
  padding: 52px 34px; text-align: center; max-width: 620px; margin: 0 auto;
}
.retour h2 { color: var(--primary-deep); }
.retour p { color: var(--primary-deep); opacity: .92; max-width: 42ch; margin: 0 auto 28px; }
.btn-2 {
  display: inline-block; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 17px 32px; text-decoration: none; font-weight: 600;
  box-shadow: var(--ombre-douce);
  transition: transform .18s ease, border-color .18s ease;
}
.btn-2:hover { border-color: var(--primary); transform: translateY(-2px); }

/* ══ Pied de page ══════════════════════════════════════════════════════════ */
footer {
  border-top: 1px solid var(--border);
  padding: 40px 0 56px; font-size: .89rem; color: var(--text-2);
}
footer a { color: var(--text-2); }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 18px; }

/* ══ Barre de téléchargement mobile ════════════════════════════════════════ */
/* Masquée par défaut : sur grand écran le bouton du haut reste visible assez
   longtemps, une barre fixe n'y serait qu'un encombrement. */
.barre-mobile { display: none; }

/* ══ Mobile ════════════════════════════════════════════════════════════════ */
@media (max-width: 780px) {
  section { padding-top: 56px; padding-bottom: 56px; }
  .duo-section { padding-top: 52px; padding-bottom: 52px; }
  /* L'accueil occupe au moins la hauteur d'écran : la zone qui porte la barre
     de téléchargement commence donc sous la ligne de flottaison, et la barre ne
     peut pas dépasser au premier affichage. svh plutôt que vh pour tenir compte
     de la barre d'adresse mobile. */
  .hero {
    padding: 52px 0 48px;
    min-height: 100vh;
    min-height: 100svh;
    display: flex; align-items: center;
  }
  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.55rem; }
  h3 { font-size: 1.2rem; }
  .promesse { font-size: 1.25rem; }
  .buddy { width: 132px; height: 132px; }

  /* La capture passe sous le texte, centrée : en colonne étroite elle
     écraserait le texte à côté d'elle. */
  .duo { grid-template-columns: 1fr; gap: 34px; }
  .duo-inverse .duo-texte, .duo-inverse .duo-image { order: initial; }
  .phone { max-width: 232px; }

  .dl-carte, .retour { padding: 40px 24px; border-radius: 26px; }
  ol.etapes > li { padding: 22px 22px 22px 70px; }
  ol.etapes > li::before { left: 22px; top: 23px; }

  /* Barre persistante : le geste principal reste à portée du pouce, quel que
     soit l'endroit de la page. On réserve la hauteur correspondante en bas de
     document pour ne jamais masquer le pied de page. */
  .barre-mobile {
    /* En sticky plutôt qu'en fixed, et placée en dernier enfant d'une zone qui
       commence après l'accueil : elle ne peut donc pas se superposer au bouton
       du hero, et n'apparaît qu'une fois qu'on a commencé à lire. */
    display: block; position: sticky; bottom: 0; z-index: 10;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    /* Fond opaque d'abord : si color-mix n'est pas reconnu, la déclaration
       suivante est ignorée et la barre reste lisible au lieu d'être transparente. */
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
  }
  .btn-barre { width: 100%; font-size: 1.05rem; padding: 16px 24px; box-shadow: none; }
  .hero .btn { width: 100%; }
}

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