/* Feuille commune aux pages statiques (confidentialité, FAQ, tarifs…).
 *
 * Ces pages vivent hors de l'application React : elles doivent être lisibles
 * par les moteurs et s'afficher même si le bundle ne se charge pas. Elles ne
 * peuvent donc pas dépendre de `src/styles.css`, qui est empaqueté avec l'app.
 *
 * Extraite de confidentialite.html le 8 août 2026 : le style y était en ligne,
 * et le recopier sur chaque nouvelle page aurait garanti la divergence.
 * Les polices sont celles hébergées en propre (/fonts/fonts.css).
 */

:root {
  --ink: #3b2e52;
  --ink-soft: #6b5e82;
  --grape: #6e4fb0;
  /* En composantes, pour les fonds translucides : `rgba()` n'accepte pas une
     variable qui contient déjà un `#`. Sert de repli aux pages de type. */
  --grape-rgb: 110, 79, 176;
  --cream: #fff7ec;
  --lilac: #e9dbff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--ink);
  line-height: 1.65;
  background: linear-gradient(160deg, var(--cream) 0%, var(--lilac) 100%);
  background-attachment: fixed;
  padding: 40px 20px 80px;
}
main {
  max-width: 760px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.82);
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  border-radius: 26px;
  box-shadow: 0 24px 60px -24px rgba(78, 52, 120, 0.45);
  padding: 44px 38px;
}
h1, h2 { font-family: "Fredoka", sans-serif; font-weight: 600; line-height: 1.2; }
h1 { font-size: 1.9rem; margin-bottom: 6px; }
h2 { font-size: 1.22rem; margin: 34px 0 10px; color: var(--grape); }
h3 { font-size: 1rem; margin: 18px 0 6px; font-weight: 800; }
p, li { margin-bottom: 10px; }
ul { padding-left: 22px; }
.maj { color: var(--ink-soft); font-size: 0.86rem; margin-bottom: 26px; }
a { color: var(--grape); }
table { border-collapse: collapse; width: 100%; margin: 12px 0 18px; font-size: 0.92rem; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid rgba(110, 79, 176, 0.18); vertical-align: top; }
th { font-weight: 800; color: var(--grape); }
.box {
  background: rgba(110, 79, 176, 0.07);
  border-left: 4px solid var(--grape);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 16px 0;
}
.back { display: inline-block; margin-top: 30px; font-weight: 800; text-decoration: none; }
@media (max-width: 560px) {
  main { padding: 28px 20px; border-radius: 20px; }
  table, thead, tbody, th, td, tr { display: block; }
  th { display: none; }
  td { border: none; padding: 3px 0; }
  tr { border-bottom: 1px solid rgba(110, 79, 176, 0.18); padding: 10px 0; }
}
/* ---------- Navigation entre pages statiques ---------- */
.nav {
  max-width: 760px;
  margin: 0 auto 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
  font-size: 0.86rem;
  font-weight: 800;
}
/* ⚠️ LA BARRE ENTIÈRE ÉTAIT UNE RANGÉE DE CIBLES DE 23 px, SANS REMBOURRAGE.
   Mesuré sur les quatorze pages statiques : « Tarifs » faisait 37 × 23,
   « Guides » 45 × 23. C'est sous le minimum de 24 × 24 exigé par le critère
   WCAG 2.5.8, et très loin des 44 px confortables au pouce — or c'est le SEUL
   moyen de circuler entre ces pages, qui vivent hors de l'application. Rater de
   trois pixels, c'est ne rien atteindre du tout.

   ⚠️ LE REMBOURRAGE EST VERTICAL, ET NÉGATIF EN MARGE. Agrandir la cible sans
   compenser aurait écarté les liens les uns des autres et fait respirer une
   barre qui doit rester dense : la marge négative rend l'espace pris, la zone
   tactile reste. */
.nav a {
  color: var(--grape);
  text-decoration: none;
  display: inline-block;
  padding: 11px 4px;
  margin: -11px -4px;
}
.nav a:hover { text-decoration: underline; }
.nav .home { font-family: "Fredoka", sans-serif; font-weight: 600; margin-right: auto; }
/* ⚠️ OÙ SUIS-JE ? La barre affichait six liens identiques sur onze pages, celui
   de la page en cours compris : on cliquait dessus pour arriver là où l'on
   était déjà. C'est pourtant le seul moyen de circuler entre ces pages, qui
   vivent hors de l'application.
   Le repère est un APLAT sous le mot — jamais une couleur de texte, pour la
   raison mesurée plus bas : trois des quatre accents y seraient illisibles. */
.nav a.ici {
  color: var(--ink);
  /* ⚠️ L'aplat descend de 11 px avec le rembourrage : sans ce décalage, le
     repère « vous êtes ici » flotterait loin sous le mot qu'il souligne. */
  box-shadow: inset 0 -14px 0 -11px rgba(var(--type-accent-rgb, var(--grape-rgb)), 0.55);
}
.nav a.ici:hover { text-decoration: none; }
/* La SECTION qui contient la page — un guide, une page de type — n'est pas la
   page elle-même : le repère doit se voir sans mentir. Plus discret, et l'encre
   reste celle des autres liens. */
.nav a.ici.section {
  color: var(--grape);
  box-shadow: inset 0 -14px 0 -11px rgba(var(--type-accent-rgb, var(--grape-rgb)), 0.28);
}

/* ---------- Appel à l'action en pied de page ---------- */
.cta {
  display: block;
  max-width: 340px;
  margin: 30px auto 6px;
  padding: 15px 26px;
  border-radius: 100px;
  background: linear-gradient(120deg, var(--grape), #4f3785);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
}
.cta-sub { text-align: center; font-size: 0.82rem; color: var(--ink-soft); }

/* ---------- Identité de type sur les pages d'entrée ----------
   Ces deux pages portent toute l'acquisition des révélations qui ne sont pas un
   gender reveal, et elles sortaient du générateur habillées EXACTEMENT comme la
   politique de confidentialité. Le visiteur qui vient de voir « un lieu
   surprise » en terracotta sur l'accueil arrivait sur une page raisin.

   ⚠️ L'ACCENT IDENTIFIE, LE RAISIN AGIT — et ce n'est pas une préférence, c'est
   une mesure. Employés comme texte ou comme fond de bouton sous du blanc, les
   accents donnent : raisin 6,16:1, terracotta 3,00:1, or 2,42:1, vert 2,71:1.
   Trois sur quatre échouent au seuil WCAG de 4,5:1, l'or largement. Colorer un
   titre ou le bouton avec la couleur du type aurait donc rendu illisible ce
   qu'on cherchait justement à mettre en avant. L'accent ne va qu'aux APLATS —
   bandeau, filet, teinte de fond — où sa luminosité n'a pas à porter de texte.
   Un test recalcule ces ratios. */
.typed main {
  border-top: 6px solid var(--type-accent, var(--grape));
}
/* Le filet sous le titre : l'identité se voit avant la première phrase. */
.typed h1::after {
  content: "";
  display: block;
  width: 54px;
  height: 4px;
  margin-top: 14px;
  border-radius: 4px;
  background: var(--type-accent, var(--grape));
}
.typed .box {
  background: rgba(var(--type-accent-rgb, var(--grape-rgb)), 0.09);
  border-left-color: var(--type-accent, var(--grape));
}
/* Le bouton garde son dégradé raisin — c'est la couleur de l'ACTION, la même
   sur tout le site. Seule son ombre prend la teinte du type : un halo ne porte
   aucun texte, donc aucun contraste à tenir. */
.typed .cta {
  box-shadow: 0 18px 34px -22px rgba(var(--type-accent-rgb, var(--grape-rgb)), 1);
}

/* ---------------------------------------------- Modèles de message (outil)
   Les textes sont dans le HTML, pas produits par le script : c'est ce qui les
   rend indexables et utilisables sans JavaScript. Le style doit donc tenir
   debout tout seul, boutons masqués compris. */

.tpl-field { max-width: 420px; margin: 0 auto 2rem; }

.tpl-list { list-style: none; padding: 0; margin: 0 0 2rem; }

.tpl-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.1rem;
  margin-bottom: 0.8rem;
  border-radius: 14px;
  border: 1px solid rgba(110, 79, 176, 0.18);
  background: rgba(255, 255, 255, 0.55);
}

.tpl-text {
  flex: 1;
  margin: 0;
  /* Les modèles se lisent en diagonale pour être comparés : un interlignage
     serré aide plus ici qu'un texte courant. */
  line-height: 1.55;
}

.tpl-copy {
  flex: none;
  padding: 0.55rem 0.9rem;
  border-radius: 100px;
  border: 1.5px solid rgba(110, 79, 176, 0.3);
  background: #fff;
  color: #6e4fb0;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  /* 44 px de zone tactile, même règle que dans l'application. */
  min-height: 44px;
}
.tpl-copy:hover { background: rgba(110, 79, 176, 0.08); }

@media (max-width: 560px) {
  /* Sur mobile le bouton passe dessous : côte à côte, il ne resterait qu'une
     trentaine de caractères par ligne au texte. */
  .tpl-list li { flex-direction: column; align-items: stretch; gap: 0.7rem; }
}

/* ---------- L'anneau de focus (19 août 2026) ----------
 *
 * ⚠️ IL N'Y EN AVAIT AUCUN SUR CES QUATORZE PAGES. La règle avait été ajoutée la
 * veille dans `src/styles.css` — la feuille de l'APPLICATION. Celle-ci est une
 * autre feuille, et elle n'avait pas suivi : deuxième fois en deux jours que ce
 * produit corrige un défaut sur une surface et le laisse intact sur l'autre.
 * Les deux ont les mêmes utilisateurs.
 *
 * ⚠️ `:focus-visible`, PAS `:focus` : l'anneau doit apparaître au clavier et
 * rester invisible au clic, sinon chaque lien touché au pouce garde une bordure
 * dont personne ne comprend la cause. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--grape);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Sur l'aplat plein de l'appel à l'action, un anneau raisin disparaîtrait. */
.cta:focus-visible {
  outline-color: var(--white, #fff);
  outline-offset: -5px;
}

/* ---------- La marque, dans la barre (19 août 2026) ----------
 *
 * ⚠️ LA MARQUE SEULE, PAS LE LOGO ENTIER. L'ensemble porte le nom ET la
 * signature « MÊME À DISTANCE » : posé à côté du nom écrit juste après, il le
 * dirait deux fois, dans une barre dont tout l'enjeu est la densité.
 *
 * ⚠️ `alt=""` : la marque est décorative ici, le nom qui la suit est le vrai
 * libellé du lien. Un `alt` répéterait ce nom aux lecteurs d'écran — « Reveal
 * Ensemble Reveal Ensemble ». */
.nav .home {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav .home img {
  width: 22px;
  height: 22px;
  /* Le « R » est plus large que haut une fois recadré : `contain` l'empêche
     d'être rogné dans un carré. */
  object-fit: contain;
  flex: 0 0 auto;
}