/* Page de présentation de ChronoCoach — l'« URL marketing » d'App Store Connect.
 *
 * Se charge APRÈS pages.css, dont elle reprend les jetons de couleur, la barre
 * de langue et le pied de page. Ce qui suit n'existe que pour cette page.
 *
 * Rien n'est inventé ici, tout est déjà à l'écran dans l'app :
 * - l'afficheur du héros est celui du chrono : DSEG7 Modern Bold, l'indigo de
 *   la marque, et derrière lui le masque « 88:88.888 » à 10 % d'opacité —
 *   exactement ce que dessine CCChronoLabel (ghostAlpha = 0.10) ;
 * - les trois anneaux sont le logo de l'accueil (_makeBrandRingsLogoSize :
 *   diamètres 100 %, 66 %, 36 %, trait de 6 %) ;
 * - les filets de section reprennent la couleur de la carte de l'accueil qui
 *   mène à la fonction décrite : orange pour le chrono, indigo pour les
 *   sessions, menthe pour la performance ;
 * - les titres sont en Manrope, la police de l'interface.
 */

/* Les deux polices viennent du dépôt (Resources/Brand/Fonts), servies telles
 * quelles : licence SIL OFL 1.1, notice incluse dans chaque fichier. Pas de
 * sous-ensemble : la licence réserve le nom « DSEG » aux fichiers d'origine. */
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "DSEG7 Modern";
  src: url("fonts/DSEG7Modern-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: block;   /* jamais de chiffres de repli à la place des segments */
}

:root {
  --indigo: #5700f9;        /* indigoPrimary */
  --orange: #c92c00;        /* orangeEnergy */
  --mint: #009058;          /* mintPerformance */
  --warning: #ffa600;       /* warning */
  --chrono: var(--indigo);  /* la couleur de l'afficheur dans l'app */
  --band-top: #0f0f18;      /* fond sombre de l'app */
  --band-bottom: #1a1a28;   /* surface sombre de l'app */
  --on-band: #fafafc;
  --on-band-muted: #9a9ab0;
}
@media (prefers-color-scheme: dark) {
  :root {
    /* L'indigo plein se perd sur le fond sombre : l'indigo argent de la même
     * palette prend le relais pour l'afficheur. */
    --chrono: #b5a8e8;      /* indigoSilver */
    --band-top: #1a1a28;
    --band-bottom: #22222f; /* surfaceElevated */
  }
}

/* --- Pleine largeur ------------------------------------------------------- */

body.marketing { padding: 0 0 4rem; }
body.marketing main { max-width: none; margin: 0; }
body.marketing h2 { border-top: none; padding-top: 0; }

.marketing h1, .marketing h2 { font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 800; }

.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.5rem; }
.wrap-narrow { max-width: 42rem; margin: 0 auto; padding: 0 1.5rem; }

/* --- Héros ---------------------------------------------------------------- */

.hero {
  position: relative;
  /* `clip` et non `hidden` : une boîte en `hidden` reste défilable par
   * programme, et le navigateur la décale pour amener un élément qui prend le
   * focus dans son champ (le sélecteur de langue). `hidden` en repli. */
  overflow: hidden;
  overflow: clip;
  text-align: center;
  padding: 1rem 0 3.5rem;
}

/* Le logo, agrandi derrière le texte, « à peine là ». Décoratif : aria-hidden
 * côté HTML, et jamais porteur d'information. */
.hero-rings {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(150vw, 1100px);
  height: min(150vw, 1100px);
  transform: translate(-50%, -28%);
  opacity: .05;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) { .hero-rings { opacity: .08; } }

.hero-inner { position: relative; }

.logo { width: 72px; height: 72px; margin: 2rem 0 1rem; }

.eyebrow {
  margin: 0 0 1.5rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* L'afficheur : le temps et son masque, superposés dans la même cellule. */
.chrono {
  display: inline-grid;
  margin: 0 0 2rem;
  font-family: "DSEG7 Modern", ui-monospace, monospace;
  font-weight: 700;
  font-size: clamp(2.6rem, 11.5vw, 6.5rem);
  line-height: 1;
  color: var(--chrono);
  direction: ltr;
  white-space: nowrap;
}
.chrono span { grid-area: 1 / 1; }
.chrono .ghost { opacity: .10; }

.hero h1 {
  margin: 0 auto .9rem;
  max-width: 17em;
  font-size: clamp(1.9rem, 5.2vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.025em;
}

.hero-lede {
  margin: 0 auto;
  max-width: 34em;
  font-size: 1.1rem;
  color: var(--muted);
}
.hero-lede strong { color: var(--fg); font-weight: 600; }

.hero-meta {
  margin: 1.75rem 0 0;
  font-size: .85rem;
  color: var(--muted);
}

/* Le statut, à la place qu'occupera un jour le badge App Store. */
.status {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 1rem 0 0;
  padding: .4rem .9rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.status::before {
  content: "";
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--warning);
}

.hero .shot { margin-top: 2.75rem; }

/* --- Chiffres -------------------------------------------------------------
 * Quatre faits vérifiables, pas quatre superlatifs.
 */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 3rem auto 0;
  max-width: 44rem;
  border-top: 1px solid var(--rule);
  padding-top: 2rem;
}
.stats div { text-align: center; }
.stats b {
  display: block;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--accent);
}
.stats span { font-size: .8rem; color: var(--muted); }

/* --- Captures d'écran ----------------------------------------------------- */

.shot {
  display: block;
  width: 100%;
  max-width: 310px;
  height: auto;
  margin: 0 auto;
  border-radius: 2.1rem;
  border: 1px solid var(--rule);
  box-shadow: 0 18px 50px rgba(15, 15, 24, .14);
  background: var(--card);
}

.shot-pair {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  align-items: flex-start;
}
/* Chacune prend la moitié de la rangée moins la moitié de l'écart, plafonnée :
 * sans le calc(), deux images à max-width ne tiennent pas sur un téléphone. */
.shot-pair .shot { width: calc(50% - .625rem); max-width: 232px; min-width: 0; }

/* Une fenêtre du Mac : coins de fenêtre macOS, pas d'écran de téléphone. */
.shot-wide {
  display: block;
  width: 100%;
  max-width: 880px;
  height: auto;
  margin: 2.5rem auto 0;
  border-radius: 12px;
  border: 1px solid var(--rule);
  box-shadow: 0 18px 50px rgba(15, 15, 24, .14);
  background: var(--card);
}

/* --- Sections alternées --------------------------------------------------- */

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  /* `padding-block` et non `padding` : ces sections portent aussi .wrap, dont
   * le raccourci fixe la marge latérale ; un second raccourci la remettrait à
   * zéro et le texte toucherait le bord d'un téléphone. */
  padding-block: clamp(3.5rem, 8vw, 6rem);
  border-top: 1px solid var(--rule);
}
.feature.flip .feature-text { order: 2; }

.feature h2, .section h2 {
  margin: 0 0 .9rem;
  font-size: clamp(1.45rem, 3.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: -.022em;
}
.feature p, .section p { margin: 0 0 1rem; }
.feature p:last-child, .section p:last-child { margin-bottom: 0; }
.note { color: var(--muted); font-size: .95rem; }

.ramp { height: 6px; border-radius: 3px; margin: 0 0 1.5rem; width: 8rem; }
.ramp-orange { background: var(--orange); }
.ramp-indigo { background: var(--indigo); }
.ramp-mint { background: var(--mint); }

/* Une section pleine largeur, texte puis grande image (la fenêtre du Mac). */
.section {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  border-top: 1px solid var(--rule);
}
.section .section-text { max-width: 42rem; }

/* --- Bande sombre --------------------------------------------------------- */

.band {
  background: linear-gradient(180deg, var(--band-top), var(--band-bottom));
  color: var(--on-band);
  padding: clamp(3.5rem, 8vw, 5.5rem) 0;
  margin: 0;
}
.band h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.45rem, 3.4vw, 2rem);
  letter-spacing: -.022em;
}
.band p { color: var(--on-band-muted); }
.band p strong { color: var(--on-band); }
.band a { color: #b5a8e8; }
.band .aside {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .95rem;
}

/* --- Dernier mot ---------------------------------------------------------- */

.closing {
  padding-block: clamp(3rem, 7vw, 4.5rem) 0;
  text-align: center;
}
.closing p {
  margin: 0 auto;
  max-width: 34em;
  font-size: 1.05rem;
  color: var(--muted);
}

body.marketing footer {
  max-width: 62rem;
  margin: 3.5rem auto 0;
  padding: 1.5rem 1.5rem 0;
}

/* --- Barre de langue sur le héros ----------------------------------------- */

.hero .langbar { max-width: 62rem; padding: 1.25rem 1.5rem 0; }

/* --- Petits écrans --------------------------------------------------------
 * En dessous de deux colonnes, texte et image s'empilent, le titre toujours
 * en premier.
 */
@media (max-width: 820px) {
  .feature { grid-template-columns: 1fr; gap: 2rem; }
  .feature.flip .feature-text { order: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
}

@media (max-width: 400px) {
  .shot-pair { gap: .75rem; }
  .hero h1 { font-size: 1.75rem; }
  /* Sur deux lignes, une pilule s'étire mal : la pastille devient un cartouche. */
  .status { font-size: .78rem; border-radius: 14px; text-align: start; }
}

/* Une page de présentation n'a aucune raison de bouger pour quelqu'un qui a
 * demandé qu'elle ne bouge pas. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}