/* LES COULEURS ET LA POLICE DE L'APP (29/09, `src/lib/theme.ts`) -- la page du 27/08 portait
     une palette crème / ardoise / rouille que l'app a quittée. Les NOMS de variables sont gardés
     pour ne pas réécrire toute la feuille ; seules les VALEURS suivent l'app. */
  @font-face { font-family: "Inter"; font-weight: 300; src: url("fonts/Inter_300Light.ttf") format("truetype"); font-display: swap; }
  @font-face { font-family: "Inter"; font-weight: 400; src: url("fonts/Inter_400Regular.ttf") format("truetype"); font-display: swap; }
  @font-face { font-family: "Inter"; font-weight: 600; src: url("fonts/Inter_600SemiBold.ttf") format("truetype"); font-display: swap; }

  :root {
    --creme: #FFFFFF;                     /* COLORS.background */
    --creme-carte: #E3F8FF;               /* COLORS.actionTint -- les cartes bleues de l'accueil */
    --ardoise: #2C2A28;                   /* COLORS.ink -- titres */
    --ardoise-clair: #807C78;             /* COLORS.muted */
    --rouille: #006291;                   /* COLORS.action -- ce qui se touche, les accents */
    --ocre: #C68C2F;                      /* le fond de l'icône */
    --encre: #2C2A28;                     /* COLORS.ink */
    --encre-doux: #807C78;                /* COLORS.muted */
    --trait: rgba(128, 124, 120, 0.35);   /* COLORS.hairline */
  }

  * { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    background: var(--creme);
    color: var(--encre);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.65;
  }

  .page {
    max-width: 44rem;
    margin: 0 auto;
    padding: 4rem 1.5rem 6rem;
  }

  header { margin-bottom: 3rem; }

  .marque {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ocre);
    font-weight: 600;
    margin: 0 0 0.75rem;
  }

  h1 {
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    line-height: 1.15;
    margin: 0 0 0.75rem;
    color: var(--ardoise);
    font-weight: 600;
  }

  .date {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 0.9rem;
    color: var(--encre-doux);
    margin: 0;
  }

  .chapeau {
    background: var(--creme-carte);
    border-left: 3px solid var(--rouille);
    padding: 1.4rem 1.6rem;
    margin: 2.5rem 0 3rem;
    border-radius: 0 6px 6px 0;
  }

  .chapeau p { margin: 0 0 0.9rem; }
  .chapeau p:last-child { margin-bottom: 0; }

  .precision {
    background: #F7F7F7;
    border: 1px solid #ECECEC;
    border-left: 3px solid var(--ardoise);
    padding: 1.4rem 1.6rem;
    margin: 2rem 0;
    border-radius: 6px;
  }

  .precision p { margin: 0 0 0.9rem; }
  .precision p:last-child { margin-bottom: 0; }

  .precision .titre {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ardoise);
    font-weight: 600;
  }

  h2 {
    font-size: 1.35rem;
    color: var(--ardoise);
    margin: 3rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--trait);
    font-weight: 600;
  }

  h3 {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rouille);
    margin: 1.8rem 0 0.5rem;
    font-weight: 600;
  }

  p { margin: 0 0 1.1rem; }

  ul { margin: 0 0 1.3rem; padding-left: 1.3rem; }
  li { margin-bottom: 0.5rem; }

  strong { color: var(--ardoise); font-weight: 600; }

  a { color: var(--rouille); text-decoration-color: var(--rouille); text-underline-offset: 2px; }
  a:hover { color: var(--rouille); }

  .note {
    font-size: 0.95rem;
    color: var(--encre-doux);
    font-style: italic;
  }

  footer {
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--trait);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 0.9rem;
    color: var(--encre-doux);
  }

  /* LA VITRINE (29/09) -- au-dessus de la politique, jamais à sa place : la Play Console pointe
     sur la racine du site comme adresse de la politique de confidentialité. */
  .vitrine {
    text-align: center;
    padding-bottom: 3rem;
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--trait);
  }
  /* L'ACCROCHE EST LE TITRE (Janne, 29/09 : « la phrase la plus drôle, c'est celle qu'on voit le moins »). */
  .vitrine h1 { font-size: clamp(1.6rem, 5.2vw, 2.3rem); line-height: 1.25; margin: 0 0 1rem; color: var(--encre); }
  .vitrine .reponse { font-size: clamp(1.3rem, 4vw, 1.7rem); font-weight: 600; color: var(--rouille); margin: 0 0 1.4rem; }
  .vitrine .courte { margin: 0 auto 1.8rem; max-width: 32rem; }
  .badge img { height: 64px; width: auto; }
  .captures {
    display: flex;
    gap: 0.9rem;
    justify-content: center;
    margin: 2.2rem 0 1.4rem;
  }
  .captures img {
    width: 30%;
    max-width: 190px;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--trait);
  }
  .vitrine .promesse {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 0.9rem;
    color: var(--encre-doux);
    margin: 0 0 0.6rem;
  }
  .vitrine .vers-politique {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 0.9rem;
    margin: 0;
  }
  .vitrine { border-bottom: none; margin-bottom: 1rem; }
  .blocs { margin-bottom: 4rem; padding-bottom: 3rem; border-bottom: 1px solid var(--trait); }
  .bloc { margin: 0 0 3rem; }
  .bloc-titre {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rouille);
    border-bottom: none;
    margin: 0 0 0.6rem;
    padding: 0;
  }
  .bloc p { margin: 0; }
  .avec-image { display: flex; gap: 1.8rem; align-items: center; }
  .avec-image.inverse { flex-direction: row-reverse; }
  .avec-image img { width: 38%; max-width: 220px; height: auto; border-radius: 14px; border: 1px solid var(--trait); flex-shrink: 0; }
  .bloc.fin { text-align: center; margin-bottom: 0; }
  .bloc.fin .vers-politique { margin-top: 1rem; }
  @media (max-width: 560px) {
    .avec-image, .avec-image.inverse { flex-direction: column; text-align: left; }
    .avec-image img { width: 62%; max-width: 240px; }
  }
  .titre-politique { font-size: clamp(1.6rem, 4.5vw, 2.1rem); border-bottom: none; margin-top: 0; padding-bottom: 0; }

  @media (max-width: 480px) {
    body { font-size: 17px; }
    .page { padding: 2.5rem 1.25rem 4rem; }
    .captures { gap: 0.5rem; }
    .captures img { width: 31%; border-radius: 10px; }
  }

  /* 29/09 -- l'icône en tête de l'accueil, et le pied de page des deux pages. */
  .vitrine .icone { border-radius: 16px; margin: 0 0 1rem; }
  .pied { text-align: center; }
  .pied a { color: var(--encre-doux); }

  /* LA POLITIQUE, EN TAILLE DE PAGE LÉGALE (Janne, 29/09 : « écrite si grosse ») -- seule cette
     page porte `.legal` ; l'accueil garde sa taille de lecture. */
  .legal { font-size: 15px; line-height: 1.6; padding-top: 2.5rem; }
  .legal h1 { font-size: 1.6rem; margin-bottom: 0.4rem; }
  .legal h2 { font-size: 1.05rem; margin: 2rem 0 0.6rem; padding-bottom: 0.35rem; }
  .legal .chapeau { padding: 1rem 1.2rem; margin: 1.5rem 0 2rem; }
  .legal li { margin-bottom: 0.35rem; }
  .legal p { margin-bottom: 0.8rem; }
  @media (max-width: 480px) { .legal { font-size: 15px; } }

  /* L'EN-TÊTE AÉRÉ (Janne, 29/09 : « c'est pas trop serré entre le logo/hippokai et les
     paragraphes ? ») -- mesuré avant : 12 px entre HIPPOKAÏ et le titre, 16 entre le titre et la
     réponse, pour 76 plus bas. Rythme régulier maintenant. */
  .vitrine .icone { margin-bottom: 1.1rem; }
  .vitrine .marque { margin-bottom: 1.8rem; }
  .vitrine h1 { margin-bottom: 1.4rem; }
  .vitrine .reponse { margin-bottom: 1.8rem; }
  .vitrine .courte { margin-bottom: 2.2rem; }

  /* ALIGNEMENT COHÉRENT SUR TÉLÉPHONE (29/09) -- avant : image centrée au-dessus d'un titre et
     d'un texte collés à gauche, sous un haut de page centré. Tout le bloc se centre ; le texte
     reste d'une largeur de lecture confortable. */
  @media (max-width: 560px) {
    .bloc, .avec-image, .avec-image.inverse { text-align: center; align-items: center; }
    .bloc p { max-width: 30rem; margin: 0 auto; font-size: 16px; }
    .avec-image img { margin-bottom: 0.4rem; }
  }

  /* GRAND ÉCRAN (29/09) -- la description tenait sur une ligne et demie, « l'as oublié. » seul ;
     et les blocs SANS image, alignés à gauche, cassaient l'axe centré du haut de page. Les blocs
     avec image gardent leur mise en page côte à côte. */
  .vitrine .courte { max-width: 38rem; }
  .bloc:not(.avec-image) { text-align: center; }
  .bloc:not(.avec-image) p { max-width: 36rem; margin-left: auto; margin-right: auto; }