/*
 * Palette et rythme repris de src/theme/index.ts, le site doit ressembler a
 * l'app, sans dupliquer un design system pour deux pages.
 *
 * AUCUNE POLICE EXTERNE : une @import Google Fonts enverrait l'IP de chaque
 * visiteur a Google. Ecrire ca sous une politique de confidentialite serait
 * incoherent. Pile systeme uniquement.
 *
 * AUCUN BUILD : deux pages statiques n'ont pas besoin d'une toolchain. Ce
 * fichier est servi tel quel.
 */

:root {
  --bg: #111417;
  --card: #1c2126;
  --ink: #f2f4f6;
  --gray: #9aa3ad;
  --accent: #ff5a2d;
  --accent-soft: #3a241c;
  --line: #2a3138;
  --ok: #81c784;
  --ok-bg: #1d2e20;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 16px 64px;
}

header.site {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}

.logo {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
  text-decoration: none;
}

.tagline {
  color: var(--gray);
  font-size: 15px;
}

h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

h2 {
  font-size: 21px;
  font-weight: 700;
  margin: 40px 0 12px;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 24px 0 8px;
}

p,
li {
  color: var(--ink);
}

.lead {
  font-size: 19px;
  color: var(--gray);
  margin-bottom: 32px;
}

a {
  color: var(--accent);
}

ul {
  padding-left: 20px;
}

li {
  margin-bottom: 8px;
}

.card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 40%),
    var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  margin: 24px 0;
}

.card h3 {
  margin-top: 0;
}

.card p:last-child,
.card ul:last-child {
  margin-bottom: 0;
}

.badge {
  display: inline-block;
  background: var(--ok-bg);
  color: var(--ok);
  border-radius: 999px;
  padding: 2px 12px;
  font-size: 14px;
  font-weight: 700;
}

.badge-accent {
  background: var(--accent-soft);
  color: var(--accent);
}

/* `display: table` en largeur normale : un `display: block` permanent empechait
   les colonnes de s'aligner sur la colonne de texte de la page, et le tableau
   paraissait decale vers la droite. Le defilement horizontal n'a de sens que
   quand la place manque vraiment, d'ou la bascule sous 620 px. */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 15px;
}

@media (max-width: 620px) {
  table {
    display: block;
    overflow-x: auto;
  }
}

th,
td {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

/* Les bords du tableau s'alignent sur le texte courant : sans cela, la premiere
   colonne demarre 12 px plus a droite que les paragraphes voisins, et l'oeil le
   voit immediatement. */
th:first-child,
td:first-child {
  padding-left: 0;
  /* Le libelle et son badge tiennent sur une ligne : sans cela le badge
     retombe sous le mot et la ligne du tableau double de hauteur, ce qui se
     voyait surtout en anglais ou les libelles sont plus longs. */
  white-space: nowrap;
}

th:last-child,
td:last-child {
  padding-right: 0;
}

th {
  color: var(--gray);
  font-weight: 700;
  white-space: nowrap;
  border-bottom-color: #38414a;
}


.meta {
  color: var(--gray);
  font-size: 15px;
}

footer.site {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--gray);
  font-size: 15px;
}

footer.site a {
  margin-right: 16px;
}

@media (max-width: 480px) {
  body {
    font-size: 16px;
  }
  h1 {
    font-size: 26px;
  }
  .lead {
    font-size: 17px;
  }
}

/* Lien de langue : pousse a droite de l'en-tete. Le site est bilingue parce que
   le dossier OAuth est examine par quelqu'un qui ne lit pas forcement le
   francais, la version anglaise n'est pas un ornement, c'est un prerequis. */
.lang {
  margin-left: auto;
  font-size: 15px;
  text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────────────
   Landing : mise en avant. Reserve aux pages de PRESENTATION, les pages
   de confidentialite gardent le style sobre, un document juridique qui
   fait de l'effet est un document juridique qu'on ne croit pas.
   Toujours zero ressource externe : dégradés et formes en CSS pur.
   ───────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding: 8px 0 40px;
}

/* Halo d'accent : un radial-gradient, pas une image, rien a telecharger. */
.hero::before {
  content: "";
  position: absolute;
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
  width: 680px;
  /* 100 % et pas 140 % : au-dela, le halo depasse la page et provoque un
     defilement horizontal sur mobile, sans qu'aucun element visible ne
     paraisse fautif. Mesure au navigateur : 577 px de contenu pour 500 px
     de fenetre. */
  max-width: 100%;
  height: 380px;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 90, 45, 0.16),
    rgba(255, 90, 45, 0) 68%
  );
  pointer-events: none;
  z-index: -1;
}

.hero h1 {
  font-size: clamp(30px, 7vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 16px 0 18px;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.hero .lead {
  font-size: clamp(17px, 2.4vw, 20px);
  max-width: 34em;
  margin-bottom: 24px;
}

/* Bandeau de preuves : trois faits, pas trois slogans. */
.proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 8px;
  list-style: none;
}

.proof li {
  margin: 0;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--gray);
  font-size: 14px;
  white-space: nowrap;
}

.proof strong {
  color: var(--ink);
  font-weight: 700;
}

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

/* Carte de fonctionnalite. Le relief vient de trois details discrets plutot
   que d'une ombre portee : un degrade tres leger du haut vers le bas (la
   lumiere tombe d'en haut), un filet clair sur l'arete superieure, et un halo
   d'accent qui n'apparait qu'au survol. Sur un fond sombre, une ombre franche
   salit ; une arete eclairee suffit a decoller la carte. */
.feature {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 42%),
    var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

/* Arete superieure eclairee : 1 px, plus lumineux au centre. */
.feature::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.14) 30%,
    rgba(255, 255, 255, 0.14) 70%,
    transparent
  );
}

.feature:hover {
  transform: translateY(-2px);
  border-color: #38414a;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Le survol n'existe pas au doigt : l'etat de repos doit deja tenir seul.
   Et on respecte le reglage systeme de reduction des animations. */
@media (prefers-reduced-motion: reduce) {
  .feature {
    transition: none;
  }
  .feature:hover {
    transform: none;
  }
}

.feature .kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.feature h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.3;
}

.feature p {
  margin: 0;
  color: var(--gray);
  font-size: 16px;
}

.feature p em {
  color: var(--ink);
  font-style: normal;
}

/* Bloc de confiance : la sobriete EST le message, pas de dégradé ici. */
/* Bloc de confiance : meme famille, mais le filet d'accent a gauche et une
   teinte chaude tres diluee le distinguent des cartes de fonctionnalites. */
.trust {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  background:
    linear-gradient(100deg, rgba(255, 90, 45, 0.055), rgba(255, 90, 45, 0) 55%),
    var(--card);
  padding: 20px;
  margin: 28px 0;
}

.trust h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.trust p {
  margin: 0 0 10px;
  color: var(--gray);
}

.trust p:last-child {
  margin-bottom: 0;
}

.cta {
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 20px;
  margin: 36px 0 8px;
  background:
    radial-gradient(ellipse at top, rgba(255, 90, 45, 0.1), transparent 70%),
    var(--card);
}

.cta h2 {
  margin: 0 0 8px;
  font-size: 22px;
}

.cta p {
  margin: 0 0 16px;
  color: var(--gray);
}

.bouton {
  display: inline-block;
  background: var(--accent);
  color: #14100e;
  font-weight: 700;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 999px;
}

/* Icones des cartes : TRACES REPRIS TELS QUELS de src/components/Icone.tsx
   (famille Feather, viewBox 24, stroke 2, bouts arrondis). Copies et non
   importes, le site n'a pas de bundler, et un second jeu d'icones "presque
   pareil" serait pire qu'une duplication assumee. Si une icone change dans
   l'app, la reporter ici. */
.feature .head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.feature .ico-box {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  /* Degrade de la teinte d'accent sourde vers le fond de carte, plus un
     lisere interieur : la pastille parait creusee dans la carte, pas collee
     dessus. */
  background: linear-gradient(160deg, var(--accent-soft), rgba(58, 36, 28, 0.35));
  box-shadow: inset 0 0 0 1px rgba(255, 90, 45, 0.22);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.18s ease;
}

.feature:hover .ico-box {
  box-shadow: inset 0 0 0 1px rgba(255, 90, 45, 0.45);
}

.feature .ico {
  width: 20px;
  height: 20px;
}

.feature .head .kicker {
  margin-bottom: 0;
}

/* Avertissement legal. VOLONTAIREMENT DISCRET et separe du reste : sa place
   n'est pas dans un bloc d'arguments. Presente au milieu des atouts, "ne
   remplace pas un medecin" se lit comme une qualite du produit, ce qui est
   exactement l'inverse de sa fonction. Texte gris, petit, en fin de page,
   au-dessus du pied. */
.disclaimer {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--gray);
  font-size: 14px;
  line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────────────────
   Apercu de l'application. REPRODUCTION en HTML/CSS, pas une capture :
   1. le build Debug/simulateur est casse (djok#2), donc aucune capture
      propre n'est produisible aujourd'hui ;
   2. une image resterait floue sur ecran haute densite et pesera toujours
      plus qu'un peu de balisage ;
   3. le site s'interdit toute ressource externe, et une capture embarquee
      en base64 alourdirait le HTML de plusieurs centaines de kilo-octets.
   Les couleurs, les rayons et la structure des cartes viennent de
   src/theme/index.ts. Les valeurs affichees sont ILLUSTRATIVES.
   ───────────────────────────────────────────────────────────────────── */

.hero-grid {
  display: grid;
  gap: 32px;
  align-items: center;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
  }
}

.phone {
  justify-self: center;
  width: 264px;
  max-width: 100%;
  border: 8px solid #232a31;
  border-radius: 38px;
  background: var(--bg);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

/* Encoche : purement decorative. */
.phone .notch {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone .notch::after {
  content: "";
  width: 84px;
  height: 5px;
  border-radius: 999px;
  background: #232a31;
}

.phone .ecran {
  padding: 4px 12px 18px;
}

.phone .jour {
  color: var(--gray);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.phone .mini {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 45%),
    var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.phone .mini h4 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.phone .stats {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.phone .stat {
  flex: 1;
}

.phone .stat b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.phone .stat span {
  display: block;
  font-size: 9px;
  color: var(--gray);
  margin-top: 2px;
}

.phone .courbe {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 6px;
}

.legende-apercu {
  text-align: center;
  color: var(--gray);
  font-size: 13px;
  margin: 12px 0 0;
}

/* Apercu enrichi : icones dans les cartes, graphe avec aires et grille,
   barres d'intervalles. Les barres suivent la meme regle de hauteur que
   src/lib/profilSeance.ts (lineaire de 45 % de la puissance seuil a 115 %,
   bornee) et les couleurs de zone de src/theme/index.ts. */

.phone .mini-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.phone .mini-head svg {
  width: 13px;
  height: 13px;
  color: var(--accent);
  flex: 0 0 auto;
}

.phone .mini-head h4 {
  margin: 0;
}

.phone .mini-head .droite {
  margin-left: auto;
  font-size: 9px;
  color: var(--gray);
}

/* Fleche de tendance a cote d'une valeur, comme StatNuit. */
.phone .stat .val {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.phone .stat .fleche {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
}

/* Compteurs de macronutriments : la jauge est LA fonctionnalite, elle merite
   d'etre visible sur l'apercu. */
.phone .jauge {
  height: 4px;
  border-radius: 999px;
  background: var(--track);
  overflow: hidden;
  margin-top: 5px;
}

.phone .jauge i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.phone .barres {
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 40px;
  margin-top: 8px;
}

.phone .barres i {
  flex: 1;
  border-radius: 1px 1px 0 0;
  min-width: 0;
}