/* =====================================================
   Back in Stock — pages publiques (FAQ, guide, tarifs, mentions légales…)
   =====================================================

   POURQUOI CE FICHIER EXISTE. Ces pages partageaient app.css, la feuille de la SPA admin :
   2129 lignes de tokens, de cartes et de composants pensés pour l'application embarquée dans
   Shopify. Une page de documentation n'en utilisait qu'une poignée de règles et héritait de
   tout le reste — d'où des pages publiques qui avaient l'air d'écrans d'administration, et un
   couplage tel qu'un ajustement du design admin déplaçait la page des tarifs.

   Le langage visuel est celui de la page d'accueil (wwwroot/index.html) : même palette, même
   pile de polices système, même mode sombre. La page d'accueil, elle, garde son style EN LIGNE
   et ne charge pas ce fichier : elle doit répondre quand la base, le CDN et le bundle ne
   répondent plus, et un <link> de plus serait une ressource de plus pouvant manquer. Les deux
   palettes doivent donc être modifiées ENSEMBLE. */

/* ---------- Jetons ----------
   Déclarés en variables pour que le mode sombre soit un seul bloc en bas de fichier, au lieu
   d'une contre-règle par sélecteur. */
:root {
  --bg: #f7f7f7;
  --surface: #ffffff;
  --text: #1a1a1a;
  --muted: #616161;
  --border: #e0e0e0;
  --accent: #303030;
  --accent-text: #ffffff;
  --code-bg: #ececec;
  --note-bg: #faf5ff;
  --note-border: #e9d5ff;
  --quiet-bg: #f1f1f1;
  --success: #0b8a5b;
  --measure: 44rem;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* 1.6 plutôt que le 1.5 de la page d'accueil : celle-ci tient en quatre lignes, ces pages-ci
     sont de la prose longue (mentions légales, guide) qui se lit mieux plus aérée. */
  line-height: 1.6;
}

/* ---------- Gabarit ----------
   44rem ≈ 75 caractères par ligne. Les 900px précédents en faisaient une centaine, ce qui
   oblige l'œil à chercher le début de la ligne suivante. */
main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

/* ---------- En-tête et pied de page ----------
   Auparavant ces pages n'avaient aucune sortie : depuis faq.html, rien ne ramenait à l'accueil
   ni ne menait aux autres pages. */
.site-header {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.5rem 1.5rem 0;
}

.site-header a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.site-footer {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}

.site-footer a {
  display: inline-block;
  margin: 0 0.7rem 0.4rem 0;
  color: var(--muted);
}

/* ---------- Typographie ---------- */
h1 {
  margin: 0 0 1.5rem;
  font-size: 2rem;
  line-height: 1.25;
}

h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.35rem;
  line-height: 1.3;
}

h3 {
  margin: 2rem 0 0.5rem;
  font-size: 1.1rem;
  line-height: 1.35;
}

p {
  margin: 0 0 1rem;
}

ul,
ol {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}

li {
  margin-bottom: 0.4rem;
}

a {
  color: inherit;
}

a:focus-visible,
.btn:focus-visible,
input:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

em {
  color: var(--muted);
  font-style: italic;
}

code {
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
  background: var(--code-bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid var(--border);
}

/* ---------- Tableaux (tarifs, sous-traitants du DPA) ---------- */
table {
  width: 100%;
  margin: 0 0 1.5rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}

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

th {
  font-weight: 600;
}

/* Un tableau large ne doit pas faire défiler la PAGE latéralement sur mobile : c'est le
   tableau qui défile, dans son propre conteneur. */
.table-scroll {
  overflow-x: auto;
}

/* ---------- Composants ----------
   .btn et .card venaient d'app.css. En quittant cette feuille, ces pages perdaient leurs
   boutons : redéfinis ici, dans la palette publique. */
.btn {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: 0.5rem;
  background: var(--accent);
  color: var(--accent-text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  opacity: 0.85;
}

.card {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface);
}

/* Les marges hautes de h2/h3 servent à séparer des sections dans un texte qui coule ; en
   première position dans un encadré, elles ne séparent de rien et creusent un vide au-dessus du
   titre. Constaté à l'écran sur la page des tarifs. Idem pour la marge basse du dernier
   élément, qui doublait le padding de l'encadré. */
.card > :first-child {
  margin-top: 0;
}

.card > :last-child {
  margin-bottom: 0;
}

/* Une version dans le journal des changements. La classe existait dans le HTML mais n'était
   définie NULLE PART, pas même dans app.css : les versions ne se distinguaient que par la marge
   de leur titre. Un trait les sépare désormais, pour qu'on voie où finit une version et où
   commence la précédente. */
.release + .release {
  margin-top: 3rem;
  border-top: 1px solid var(--border);
}

/* Le titre suit immédiatement le trait : sa marge haute ferait double emploi. */
.release + .release h2 {
  margin-top: 2rem;
}

/* Bouton de retour affiché quand la page est ouverte DANS l'admin Shopify. Sa position est
   ici ; son display:none reste dans le HTML, parce que c'est le script de la page qui le
   révèle selon le contexte. */
.embedded-return {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 9999;
}

/* ---------- Champs (repli « ouvrir la boutique ») ---------- */
label {
  margin-right: 0.5rem;
  font-size: 0.85rem;
}

input {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
}

/* ---------- Classes de contenu ----------
   Elles remplacent les attributs style= que ces pages portaient une par une. Ce n'est pas
   qu'une question de propreté : plusieurs de ces styles en ligne appelaient var(--text-muted),
   une variable définie dans app.css. En quittant cette feuille, la couleur devenait tout
   simplement indéfinie — le texte « atténué » repassait en noir plein, sans que rien ne le
   signale. */
.center {
  text-align: center;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 0.875rem;
}

.lede {
  font-size: 1.125rem;
}

.price {
  margin: 0 0 0.5rem;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
}

/* Liste de fonctionnalités cochées (page des tarifs). Le display:flex était en ligne : il
   aligne le ✓ sur la PREMIÈRE ligne du texte, et non au centre du bloc, ce qui se voit dès
   qu'une entrée passe sur deux lignes. */
.feature-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 0.5rem 0;
}

.check {
  margin-right: 0.5rem;
  color: var(--success);
  font-weight: 700;
}

/* Encadré mis en avant, et encadré discret (« the fine print »). Teintes en jetons : les
   pastels d'origine étaient écrits en dur et devenaient illisibles en mode sombre. */
.card.note {
  border-color: var(--note-border);
  background: var(--note-bg);
}

.card.quiet {
  background: var(--quiet-bg);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --surface: #212121;
    --text: #e3e3e3;
    --muted: #a1a1a1;
    --border: #3a3a3a;
    --accent: #e3e3e3;
    --accent-text: #1a1a1a;
    --code-bg: #2b2b2b;
    --note-bg: #26203a;
    --note-border: #453a63;
    --quiet-bg: #232323;
    --success: #34d399;
  }
}

/* Page « Theme compatibility » — liste des thèmes couverts par les tests de placement. */
.theme-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .35rem 1rem;
}

.theme-list li {
  padding: .35rem 0;
  /* Jetons de la feuille, pas de couleurs en dur : `--border` et `--muted` sont redéfinis dans le
     bloc `prefers-color-scheme: dark` en bas de ce fichier, une valeur figée y serait invisible. */
  border-bottom: 1px solid var(--border);
}

.theme-version {
  color: var(--muted);
  font-size: .85em;
  margin-left: .35rem;
}