/* Styles des pages secondaires — /ma-commande, /merci, /404, les pages légales,
 * le journal, /questions, /le-rituel, /la-marque.
 *
 * Ils vivent ici et non dans un bloc <style> de chaque page parce que le site
 * est servi avec UN SEUL fichier CSS : les styles d'une page finissaient dans
 * la feuille téléchargée par tous les visiteurs de l'accueil, qui ne les
 * utilise jamais. Le budget de specs/07 les comptait, à juste titre.
 *
 * Ces pages chargent donc une requête de plus — une requête que l'accueil, la
 * page la plus visitée, ne fait pas.
 */
/* ma-commande.astro */
.suivi__chapeau {
    margin-block: var(--e-4) var(--e-6);
    max-inline-size: var(--mesure);
    color: var(--encre-2);
  }

  .suivi__form {
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
    align-items: flex-start;
    max-inline-size: 30rem;
  }

  .suivi__retour {
    margin: 0;
    min-block-size: 1.4em;
    color: var(--erreur);
    font-size: var(--t-petit);
  }

  .suivi__resultat {
    margin-block-start: var(--e-6);
    padding: var(--e-5);
    max-inline-size: 30rem;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
  }

  .suivi__resultat > div {
    display: flex;
    justify-content: space-between;
    gap: var(--e-4);
    padding-block: var(--e-2);
  }

  .suivi__resultat dt {
    color: var(--encre-3);
    font-size: var(--t-petit);
  }

  .suivi__resultat dd {
    margin: 0;
    font-weight: 600;
  }

  .suivi__aide {
    margin-block-start: var(--e-7);
    color: var(--encre-3);
    font-size: var(--t-petit);
  }

/* merci.astro */
.merci__etat {
    margin-block: var(--e-4) var(--e-6);
    font-size: var(--t-h3);
    font-family: var(--titrage);
  }

  .merci__recap {
    margin-block-end: var(--e-6);
    padding: var(--e-5);
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
  }

  .merci__recap > div {
    display: flex;
    justify-content: space-between;
    gap: var(--e-4);
    padding-block: var(--e-2);
  }

  .merci__recap dt {
    color: var(--encre-3);
    font-size: var(--t-petit);
  }

  .merci__recap dd {
    margin: 0;
    font-weight: 600;
  }

  .merci__suite {
    margin-block-start: var(--e-4);
    color: var(--encre-2);
  }

/* 404.astro */
.err__texte {
    margin-block: var(--e-4) var(--e-6);
    color: var(--encre-2);
  }

  .err__liens {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-5);
    margin: 0;
    padding: 0;
  }

  .err__liens a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }

/* paiement-annule.astro */
.annule__texte {
    margin-block: var(--e-4) var(--e-6);
    color: var(--encre-2);
  }

/* legal/[page].astro */
.legal__maj {
    margin-block: var(--e-3) var(--e-7);
    color: var(--encre-3);
    font-size: var(--t-petit);
  }

  .legal__bloc + .legal__bloc {
    margin-block-start: var(--e-7);
  }

  .legal__bloc h2 {
    font-size: var(--t-h3);
  }

  .legal__bloc p {
    margin-block-start: var(--e-3);
    color: var(--encre-2);
  }

  .legal__autres {
    margin-block-start: var(--e-9);
    padding-block-start: var(--e-5);
    border-block-start: 1px solid var(--trait);
  }

  .legal__autres h2 {
    font-family: var(--texte);
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--encre-3);
  }

  .legal__autres ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-5);
    margin: 0;
    padding: 0;
  }

  .legal__autres li a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    font-size: var(--t-petit);
  }

/* journal/index.astro */
.journal__chapeau { margin-block: var(--e-4) var(--e-7); color: var(--encre-2); }
  .journal__liste { margin: 0; padding: 0; }
  .journal__liste li + li { margin-block-start: var(--e-7); padding-block-start: var(--e-7); border-block-start: 1px solid var(--trait); }
  .journal__liste h2 { font-size: var(--t-h3); }
  .journal__liste h2 a { color: var(--encre); text-decoration: none; }
  .journal__liste h2 a:hover { color: var(--accent); }
  .journal__date { margin-block: var(--e-2); color: var(--encre-3); font-size: var(--t-petit); }
  .journal__extrait { color: var(--encre-2); }
  .journal__flux { margin-block-start: var(--e-8); font-size: var(--t-petit); }

/* journal/[slug].astro */
.art { max-inline-size: var(--mesure); }
  .art__date { margin-block: var(--e-3) var(--e-7); color: var(--encre-3); font-size: var(--t-petit); }

  .art__corps :global(h2) {
    margin-block: var(--e-8) var(--e-3);
    font-size: var(--t-h3);
  }
  .art__corps :global(p) { margin-block-end: var(--e-4); color: var(--encre-2); }
  .art__corps :global(ul) { margin-block-end: var(--e-4); padding-inline-start: 1.1em; color: var(--encre-2); }
  .art__corps :global(li) { margin-block-end: var(--e-2); }
  .art__corps :global(li)::marker { color: var(--accent); }
  .art__corps :global(strong) { color: var(--encre); }

  .art__retour { margin-block-start: var(--e-8); }

/* questions.astro */
.questions__chapeau {
    margin-block: var(--e-4) var(--e-6);
    color: var(--encre-2);
  }

  .questions__liste {
    max-inline-size: 46rem;
    border-block-start: 1px solid var(--trait);
  }

/* le-rituel.astro */
.rituel-page__chapeau {
    margin-block: var(--e-4) var(--e-7);
    max-inline-size: var(--mesure);
    color: var(--encre-2);
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  }

  .rituel-page__etapes {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .rituel-page__etapes li + li {
    margin-block-start: var(--e-6);
  }

  .rituel-page__etapes h2 {
    font-size: var(--t-h3);
  }

  .rituel-page__etapes p {
    margin-block-start: var(--e-2);
    color: var(--encre-2);
  }

/* la-marque.astro */
.page-marque {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(var(--e-5), 4vw, var(--e-8));
    align-items: start;
  }

  @media (max-width: 52rem) {
    .page-marque {
      grid-template-columns: 1fr;
    }
  }

  .marque__texte > * + * {
    margin-block-start: var(--e-4);
  }

  .marque__signature {
    margin-block-start: var(--e-6);
    color: var(--accent);
    font-family: var(--titrage);
    font-style: italic;
    font-size: var(--t-h3);
  }