/*
  Mise en page propre aux pages de Perla Femina (10 novembre 2026), en plus de la mise en page commune
  (assets/site.css), qui reste celle de tout le site : on n'y ajoute rien, pour ne pas changer les pages des autres apps.
  Ici : la présentation de l'app (app.html). Les couleurs des boules et des thèmes sont celles de l'app
  (src/theme/themes.ts du projet Cycle-Menstru-App, thème Prune pour les boules) : à reprendre si elles y changent.
*/

/* Présentation */
.accroche { margin: 0.4rem 0 1.2rem; color: var(--or-clair); font-size: 1.1rem; }
.document h3 { font-size: 1.02rem; font-weight: 600; margin: 1.2rem 0 0.2rem; }

/* Captures d'écran (captures/<langue>/) : une bande qu'on fait défiler du doigt, une image à la fois sur téléphone. */
.captures {
  display: flex;
  gap: 0.9rem;
  margin: 1.5rem -1rem 0.5rem;
  padding: 0 1rem 0.8rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--trait) transparent;
}
.document .captures { padding-left: 1rem; }
.captures li { flex: 0 0 auto; scroll-snap-align: center; margin: 0; }
.document .captures li + li { margin-top: 0; }
.captures figure { margin: 0; }
.captures img {
  display: block;
  width: 13.5rem;
  height: auto;
  border-radius: 1.1rem;
  border: 1px solid var(--trait);
  background: var(--fond-icone);
}
.captures figcaption { margin-top: 0.4rem; max-width: 13.5rem; color: var(--texte-doux); font-size: 0.85rem; text-align: center; }

/* Modes et contenu de l'app : des cartes. Les modes l'un sous l'autre, le contenu en grille. */
.cartes, .modes { list-style: none; padding: 0; margin: 1rem 0 0; }
.document .cartes, .document .modes { padding-left: 0; }
.cartes li, .modes li {
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--trait);
  border-radius: 0.75rem;
  background: rgba(214, 178, 94, 0.04);
}
.document .modes li + li { margin-top: 0.6rem; }
.cartes strong, .modes strong { display: block; color: var(--texte); }
.cartes span, .modes span { display: block; color: var(--texte-doux); font-size: 0.95rem; line-height: 1.45; }
.modes em { display: block; color: var(--or); font-style: normal; font-size: 0.9rem; margin-bottom: 0.2rem; }

.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 0.6rem; }
.document .cartes li + li { margin-top: 0; }

/* Légende des boules, comme dans l'app (« boules de loto », thème Prune). */
.legende { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.55rem 1rem; }
.document .legende { padding-left: 0; }
.document .legende li + li { margin-top: 0; }
.legende li { display: flex; align-items: center; gap: 0.7rem; }
.boule {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background-image: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 55%);
}
.boule.regles { background-color: #7a2c4b; }
.boule.prevues { background: transparent; border: 2px dashed #c27586; }
.boule.ovulation { background-color: #e2b24e; }
.boule.elevee { background-color: #b88356; }
.boule.incertaine { background-color: #f3e7da; border: 0.3rem solid #b88356; }
.boule.faible { background-color: #e8dfd7; }

/* Niveaux de fiabilité : trois points, remplis selon le niveau, comme dans l'app. */
.fiabilite { list-style: none; padding: 0; margin: 0.8rem 0 0; }
.document .fiabilite { padding-left: 0; }
.fiabilite strong { display: block; }
.fiabilite .points { margin-right: 0.5rem; color: var(--or); letter-spacing: 0.12em; font-size: 1rem; }
.fiabilite span:not(.points) { display: block; color: var(--texte-doux); font-size: 0.95rem; line-height: 1.45; }

/* Thèmes : une pastille aux deux couleurs du thème (fond de l'écran, couleur des règles ou d'accent). */
.themes { list-style: none; padding: 0; margin: 0.8rem 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; }
.document .themes { padding-left: 0; }
.document .themes li + li { margin-top: 0; }
.themes li { display: flex; align-items: center; gap: 0.5rem; }
.themes span { color: var(--texte-doux); font-size: 0.9rem; }
.pastille { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--trait); }
.pastille.prune { background: linear-gradient(135deg, #f6f1ec 50%, #7a2c4b 50%); }
.pastille.sauge { background: linear-gradient(135deg, #eef1ec 50%, #9c4a3a 50%); }
.pastille.lilas { background: linear-gradient(135deg, #f3f0f6 50%, #6e3466 50%); }
.pastille.marine { background: linear-gradient(135deg, #f1f3f6 50%, #22355a 50%); }
.pastille.nuit { background: linear-gradient(135deg, #141318 50%, #e0c78f 50%); }

/* Avertissement : Perle n'est pas une méthode de contraception. */
.avertissement {
  margin: 2.2rem 0 0;
  padding: 1rem 1.1rem;
  border: 1.5px solid #c27586;
  border-radius: 1rem;
  background: rgba(194, 117, 134, 0.08);
}
.document .avertissement h2 { margin-top: 0; color: #f0b9c4; }
.avertissement p:last-child { margin-bottom: 0; }