/* ══════════════════════════════════════════════════════════════════
   Lux — Design system des pages produit.

   Décline `Lux Calendar/Specs/Design-System-macOS.md` pour le web, et
   reprend la mise en page de `Site Lux Calendar/index.html`, qui en est
   la première application.

   La règle de famille (Lux Vox/Specs/DA-et-Design-System.md §2.1) tient
   ici aussi : le châssis est dans les verts de la famille — boutons,
   bloc de confiance, filets — et **l'accent propre au produit ne se pose
   que sur ce qui le distingue** : le sourcil de section, la tuile
   d'icône, le halo de fond, la marque.

   Chaque page produit ne surcharge donc que `--accent` et `--accent-2`
   dans un `<style>` local. Rien d'autre. Si tu te retrouves à surcharger
   `--primaire` ou `--creme`, c'est que la page sort du système.

   La maison, elle, est noire et garde son CSS en propre dans
   `index.html` — voir le README.
   ══════════════════════════════════════════════════════════════════ */

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

:root {
  /* Surfaces */
  --creme:      #F7F5EF;
  --surface:    #FBFAF6;
  --surface-2:  #F1EEE4;
  --eleve:      #FFFFFF;

  /* Texte */
  --texte:      #1D1D1F;
  --texte-2:    #5B6B5E;
  /* Le tertiaire du design system Mac (#8B9389) vaut 3:1 sur le crème.
     C'est assez pour un repère dans une fenêtre qu'on regarde à 60 cm,
     pas pour du texte sur une page web. On le remonte un peu — et
     surtout, on cesse de lui confier ce qui doit être lu : voir les
     règles marquées « était --texte-3 » plus bas. */
  --texte-3:    #7C857E;

  /* Marque — les valeurs brutes du design system, inchangées */
  --trait:        #E4E0D4;
  --primaire:     #143025;
  --sur-primaire: #F7F5EF;
  --sage:         #8FAF93;
  --menthe:       #AFC6A4;
  --vert-foret:   #143025;

  /* Accent du produit. Valeur par défaut : la sauge de la famille.
     Chaque page le remplace par le sien. */
  --accent:   #6E8F73;
  --accent-2: #8FAF93;

  /* Le crème qui ne bascule jamais : posé sur le vert forêt, dans les
     deux thèmes. */
  --creme-fixe: #F7F5EF;

  --ombre-douce: 0 1px 2px rgba(20, 48, 37, .04), 0 12px 32px rgba(20, 48, 37, .06);
  --ombre-carte: 0 1px 2px rgba(20, 48, 37, .03), 0 20px 50px rgba(20, 48, 37, .07);

  --rayon:    16px;
  --rayon-lg: 24px;
  --capsule:  999px;

  --ui:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif: 'Playfair Display', 'New York', Georgia, 'Times New Roman', serif;
  --mono:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --marge: clamp(20px, 5vw, 40px);
  --large: 1120px;
}

/* Le thème est posé sur <html> par le script d'en-tête de chaque page :
   préférence enregistrée si elle existe, sinon celle du système. Un seul
   bloc sombre, une seule source de vérité. */
:root[data-theme="dark"] {
  --creme:     #131A16;
  --surface:   #1B241F;
  --surface-2: #222E27;
  --eleve:     #263329;

  --texte:   #F0EEE6;
  --texte-2: #A9B8AB;
  --texte-3: #75817A;

  --trait:        #2C3A32;
  --primaire:     #AFC6A4;
  --sur-primaire: #131A16;

  --ombre-douce: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .28);
  --ombre-carte: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 60px rgba(0, 0, 0, .38);
}

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

body {
  background: var(--creme);
  color: var(--texte);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── Code et touches ──
   `code` pour un nom de fichier ou d'extension, `kbd` pour un raccourci.
   Les deux existent dans le corps de texte comme dans les cartes, donc
   ils se définissent une fois, globalement. */
code {
  font-family: var(--mono);
  font-size: .88em;
  padding: 1px 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  /* `inherit` faisait descendre le nom de fichier au gris secondaire, et
     le voile teinté sous lui le ramenait à 4,4:1. Un nom de fichier est
     du contenu, pas un commentaire : il prend la couleur principale. */
  color: var(--texte);
}

kbd {
  font-family: var(--mono);
  font-size: .84em;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid var(--trait);
  background: color-mix(in srgb, var(--eleve) 60%, transparent);
  color: var(--texte);
  white-space: nowrap;
}

/* Sur le vert forêt, le fond teinté du code devient invisible : on
   reprend un voile clair, et la couleur du bloc. */
.confiance code {
  background: rgba(247, 245, 239, .13);
  color: var(--creme-fixe);
}

/* ── Fond ambiant ──
   Le halo prend l'accent du produit : c'est ce qui donne à la page sa
   température, sans qu'aucun élément de chrome ne change de couleur. */
.fond {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% 78%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, var(--creme) 0%, var(--surface-2) 45%, var(--creme) 100%);
}

.fond::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.032'/%3E%3C/svg%3E");
  opacity: .55;
  mix-blend-mode: multiply;
}

:root[data-theme="dark"] .fond::after { mix-blend-mode: screen; opacity: .35; }

/* Le rideau : chaque produit y dessine sa propre primitive répétée.
   Lux Calendar avait ses points ; Vox a ses barres dressées, Md ses
   barres couchées. Le SVG est rempli par le script de la page. */
.rideau {
  position: absolute;
  left: 0;
  right: 0;
  top: 62vh;
  height: 220px;
  width: 100%;
  /* Le fond est fixe : ce rideau reste à 62 % de la hauteur de fenêtre
     et défile donc derrière n'importe quel paragraphe. Des points ténus
     passaient inaperçus chez Lux Calendar ; des barres, non. À cette
     opacité il se devine et ne se lit pas — c'est tout ce qu'on lui
     demande. */
  opacity: .34;
}

/* ── Structure ── */
.enveloppe {
  width: 100%;
  max-width: var(--large);
  margin: 0 auto;
  padding-inline: var(--marge);
}

section { position: relative; }

/* ── En-tête ── */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: color-mix(in srgb, var(--creme) 72%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}

header.pose { border-bottom-color: var(--trait); }

.barre {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* ── Le fil d'Ariane ──
   Une page produit doit dire d'où elle vient et comment y retourner.
   Le lien du pied ne suffit pas : personne ne descend en bas d'une page
   pour remonter d'un cran. L'anneau de la maison est donc posé ici, et
   c'est le seul endroit du monde produit où il apparaît. */
.fil {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.maison {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--texte-2);
  transition: color .2s ease;
}

.maison:hover { color: var(--texte); }

.anneau { width: 19px; height: 19px; flex: none; }
.anneau svg { width: 100%; height: 100%; display: block; }

.maison-mot {
  font-size: 15px;
  white-space: nowrap;
}

.fil-sep {
  /* --trait est la couleur des filets : 1,2:1 sur le crème. Un séparateur
     qu'on ne voit pas ne sépare rien. Il est `aria-hidden`, donc purement
     décoratif, et --texte-3 lui suffit. */
  color: var(--texte-3);
  font-size: 17px;
  line-height: 1;
  user-select: none;
}

/* Sous 640 px, le nom de la maison tombe : l'anneau reste, et il reste
   cliquable — 19 px de glyphe dans une zone de 44, c'est la cible. */
@media (max-width: 640px) {
  .maison-mot { display: none; }
  .maison { padding-block: 12px; }
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--texte);
}

.signe { width: 22px; height: 22px; color: var(--accent); flex: none; }
.signe svg { width: 100%; height: 100%; display: block; }

.mot {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .005em;
  white-space: nowrap;
}

.liens { display: flex; align-items: center; gap: 30px; }

/* `:not(.bouton)` n'est pas cosmétique. Sans lui, `.liens a` (0,1,1)
   l'emporte sur `.bouton-primaire` (0,1,0) quel que soit l'ordre des
   règles, et le bouton de l'en-tête hérite de la couleur des liens :
   en thème sombre, du vert pâle sur du vert pâle. */
.liens a:not(.bouton) {
  color: var(--texte-2);
  text-decoration: none;
  font-size: 15px;
  transition: color .2s ease;
}

.liens a:not(.bouton):hover { color: var(--texte); }

@media (max-width: 860px) { .liens .discret { display: none; } }

/* Sur petit écran la barre doit tenir sur une ligne. */
@media (max-width: 430px) {
  .barre { gap: 12px; }
  .mot { font-size: 17px; }
  .bascule { width: 34px; height: 34px; }
  .bouton-compact { padding: 10px 16px; font-size: 14px; }
}

/* ── Boutons ── */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  padding: 15px 26px;
  border-radius: var(--capsule);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, background .2s ease;
}

.bouton svg { width: 17px; height: 17px; flex: none; }

.bouton-primaire {
  background: var(--primaire);
  color: var(--sur-primaire);
  box-shadow: 0 1px 2px rgba(20,48,37,.12), 0 10px 26px color-mix(in srgb, var(--primaire) 22%, transparent);
}

.bouton-primaire:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(20,48,37,.14), 0 16px 36px color-mix(in srgb, var(--primaire) 30%, transparent);
}

.bouton-secondaire {
  background: color-mix(in srgb, var(--eleve) 70%, transparent);
  color: var(--texte);
  border-color: var(--trait);
  box-shadow: var(--ombre-douce);
}

.bouton-secondaire:hover { transform: translateY(-2px); }

.bouton-compact { padding: 11px 20px; font-size: 15px; }

/* État « bientôt » : discret mais lisible, jamais un bouton cassé. */
.bouton[aria-disabled="true"] {
  background: transparent;
  color: var(--texte-3);
  border-color: var(--trait);
  box-shadow: none;
  cursor: default;
  transform: none;
}

.bouton[aria-disabled="true"] svg { opacity: .6; }

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

/* ── Bascule clair / sombre ── */
.bascule {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--trait);
  background: color-mix(in srgb, var(--eleve) 55%, transparent);
  color: var(--texte-2);
  cursor: pointer;
  flex: none;
  transition: color .2s ease, background .2s ease, transform .25s cubic-bezier(.22,1,.36,1);
}

.bascule:hover { color: var(--texte); transform: translateY(-1px); }
.bascule svg { width: 17px; height: 17px; }

/* Une seule icône à la fois : le soleil en sombre (« passer au clair »). */
.bascule .lune { display: block; }
.bascule .soleil { display: none; }
:root[data-theme="dark"] .bascule .lune { display: none; }
:root[data-theme="dark"] .bascule .soleil { display: block; }

/* ── Hero ── */
.hero {
  padding-top: clamp(56px, 9vw, 104px);
  padding-bottom: clamp(40px, 6vw, 72px);
  text-align: center;
}

.sourcil {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texte-2);   /* était --texte-3 : porte le numéro de version */
  padding: 8px 16px;
  border: 1px solid var(--trait);
  border-radius: var(--capsule);
  background: color-mix(in srgb, var(--eleve) 55%, transparent);
  margin-bottom: 34px;
}

.pastille {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* L'icône de l'app, en tête de page : c'est elle qui porte l'identité
   du produit, bien plus que l'accent. Deux fichiers, un par thème. */
.icone-app {
  width: clamp(96px, 14vw, 128px);
  height: auto;
  display: block;
  margin: 0 auto 30px;
  filter: drop-shadow(0 18px 40px rgba(20, 48, 37, .18));
}

:root[data-theme="dark"] .icone-app {
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .5));
}

.icone-app.sombre { display: none; }
:root[data-theme="dark"] .icone-app.sombre { display: block; }
:root[data-theme="dark"] .icone-app.clair { display: none; }

h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(42px, 7.4vw, 76px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 26px;
}

h1 .clair { color: var(--texte-3); }

.chapeau {
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.6;
  color: var(--texte-2);
  max-width: 33em;
  margin: 0 auto;
  text-wrap: pretty;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}

/* La ligne des prérequis est de la fine print : version système, poids,
   « aucun compte ». On la lit après avoir décidé, pas avant — elle est
   donc plus petite que le corps de texte.

   Petite, mais pas pâle : la couleur reste --texte-2. Réduire la taille
   ET la couleur cumulerait les deux handicaps, et c'est précisément
   cette ligne qui était repassée de --texte-3 à --texte-2 pendant la
   passe de contraste. Sous 24 px, le seuil AA de 4,5:1 ne dépend pas de
   la taille : rapetisser ne donne aucun droit à délaver. */
.exigences {
  margin-top: 20px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--texte-2);
  text-wrap: pretty;
}

/* Le « · » est posé par le CSS, à l'intérieur du groupe insécable qu'il
   précède. Écrit en dur dans le HTML il restait en fin de ligne quand le
   texte passait à la ligne — « macOS 27 ou plus récent · » puis rien. */
.exigences span { white-space: nowrap; }

.exigences span + span::before {
  content: '·';
  margin-inline: .45em;
  color: var(--texte-3);
}

/* ── Le lien vers le dépôt ──
   Le bouton télécharge maintenant le .dmg directement : on ne passe plus
   par GitHub en chemin, donc le code source ne se croise plus par
   accident. Une ligne sous les prérequis le garde à portée pour qui le
   cherche, sans le mettre en concurrence avec le bouton. */
.source {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--texte-2);
}

.source a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--trait);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}

.source a:hover {
  color: var(--texte);
  border-color: currentColor;
}

/* ── Sections ── */
.section { padding-block: clamp(72px, 11vw, 132px); }

.titre-section {
  text-align: center;
  max-width: 30em;
  margin: 0 auto clamp(44px, 6vw, 68px);
}

.kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4.6vw, 46px);
  line-height: 1.14;
  letter-spacing: -.015em;
  margin-bottom: 18px;
  text-wrap: balance;
}

.titre-section p {
  color: var(--texte-2);
  font-size: 17.5px;
  text-wrap: pretty;
}

/* ── Cartes ── */
/* Deux colonnes maximum : de l'air, et jamais de carte orpheline. */
.grille { display: grid; grid-template-columns: 1fr; gap: 20px; }

@media (min-width: 780px) {
  .grille { grid-template-columns: 1fr 1fr; gap: 24px; }
}

.carte {
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 30px 28px 32px;
  box-shadow: var(--ombre-douce);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}

.carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-carte); }

.tuile {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  margin-bottom: 22px;
}

.tuile svg { width: 22px; height: 22px; }

.carte h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.005em;
  margin-bottom: 10px;
}

.carte p {
  color: var(--texte-2);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* ── Garde-fous ── */
.promesses {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
}

@media (min-width: 780px) { .promesses { grid-template-columns: 1fr 1fr; } }

.promesse { background: var(--creme); padding: 32px 30px; }

.promesse .puce {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-bottom: 16px;
}

.promesse strong {
  display: block;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 7px;
  letter-spacing: -.005em;
}

.promesse span { color: var(--texte-2); font-size: 15.5px; line-height: 1.58; }

/* ── Bloc de confiance ──
   Vert forêt dans les deux thèmes : c'est le seul aplat de la page, et
   il appartient à la famille, pas au produit. */
.confiance {
  background: var(--vert-foret);
  border: 1px solid rgba(175, 198, 164, .14);
  border-radius: var(--rayon-lg);
  padding: clamp(44px, 6vw, 76px) clamp(28px, 5vw, 68px);
  color: var(--creme-fixe);
  position: relative;
  overflow: hidden;
  box-shadow: var(--ombre-carte);
}

.confiance::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 88% 6%, color-mix(in srgb, var(--accent-2) 22%, transparent) 0%, transparent 62%);
  pointer-events: none;
}

.confiance > * { position: relative; z-index: 1; }
.confiance .kicker { color: var(--accent-2); }
.confiance h2 { color: var(--creme-fixe); }

.confiance .intro {
  max-width: 34em;
  color: rgba(247, 245, 239, .74);
  font-size: 17.5px;
  margin-bottom: 42px;
  text-wrap: pretty;
}

.faits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px 44px;
  border-top: 1px solid rgba(247, 245, 239, .14);
  padding-top: 38px;
}

@media (min-width: 700px) { .faits { grid-template-columns: 1fr 1fr; gap: 36px 56px; } }

.fait strong {
  display: block;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--accent-2);
}

.fait span { font-size: 15.5px; line-height: 1.58; color: rgba(247, 245, 239, .68); }

/* ── Tableau « avant / après » ── */
.transforme {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: var(--ombre-douce);
}

.transforme caption {
  caption-side: bottom;
  padding-top: 16px;
  font-size: 14px;
  color: var(--texte-2);   /* était --texte-3 : la nuance sur « du coup »
                              est le point le plus important du tableau */
  text-align: left;
  text-wrap: pretty;
}

.transforme th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texte-2);   /* était --texte-3 : en-têtes de colonnes */
  padding: 16px 22px;
  border-bottom: 1px solid var(--trait);
}

.transforme td {
  padding: 16px 22px;
  font-size: 15.5px;
  line-height: 1.5;
  border-bottom: 1px solid var(--trait);
  vertical-align: top;
}

.transforme tr:last-child td { border-bottom: none; }
/* La colonne de gauche est la moitié du contenu du tableau, pas une
   légende. Elle reste plus pâle que le résultat, mais lisible. */
.transforme .dicte { color: var(--texte-2); }
.transforme .ecrit { color: var(--texte); font-weight: 500; }

@media (max-width: 560px) {
  .transforme th, .transforme td { padding: 13px 15px; font-size: 14.5px; }
}

/* ── Bloc de code / arborescence ── */
.arbre {
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--texte-2);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 24px 26px;
  overflow-x: auto;
  box-shadow: var(--ombre-douce);
}

.arbre b { color: var(--texte); font-weight: 600; }

/* ── Appel final ── */
.final { text-align: center; padding-block: clamp(84px, 12vw, 148px); }

.final h2 { font-size: clamp(36px, 5.4vw, 58px); }

/* Cibler « le <p> à cette place dans l'arbre » attrapait aussi la ligne
   de prérequis, qui est un <p> au même niveau : elle se voyait imposer
   18 px et `text-wrap: balance`. Une classe dit ce qu'on style, une
   position dit seulement où c'est posé — et ça change au premier ajout. */
.final .accroche {
  color: var(--texte-2);
  font-size: 18px;
  max-width: 28em;
  margin: 0 auto;
  text-wrap: balance;
}

.signe-final {
  width: 34px;
  height: 34px;
  color: var(--accent);
  margin: 0 auto 30px;
  opacity: .85;
}

.signe-final svg { width: 100%; height: 100%; display: block; }

/* ── Première ouverture ──
   L'app n'est pas notarisée : macOS bloque le premier lancement.
   Prévenir coûte trois lignes ; ne pas prévenir coûte l'installation. */
.premiere {
  margin: 44px auto 0;
  max-width: 620px;
  text-align: left;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  padding: 26px 28px;
}

.premiere > strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}

/* La section finale centre ses paragraphes ; l'encart, lui, est un bloc
   de lecture aligné à gauche. On reprend la main. */
.premiere > p {
  color: var(--texte-2);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 16px;
  max-width: none;
  text-align: left;
  text-wrap: pretty;
}

/* La phrase qui suit la marche à suivre : elle referme l'encart, donc pas
   de marge sous elle — le padding du bloc suffit. */
.premiere > p.apres {
  margin-bottom: 0;
}

.premiere code {
  font-family: var(--mono);
  font-size: .92em;
  padding: 1px 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

.premiere ol { counter-reset: etape; list-style: none; display: grid; gap: 10px; }

.premiere li {
  counter-increment: etape;
  position: relative;
  padding-left: 34px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--texte-2);
}

.premiere li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: -1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ── Pied ── */
footer { border-top: 1px solid var(--trait); padding-block: 44px 52px; }

.pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  font-size: 14.5px;
  color: var(--texte-2);   /* était --texte-3 : liens de navigation */
}

.pied nav { display: flex; flex-wrap: wrap; gap: 26px; }

.pied a { color: var(--texte-2); text-decoration: none; transition: color .2s ease; }
.pied a:hover { color: var(--texte); }

.signature { display: inline-flex; align-items: center; gap: 10px; }

.signature a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--trait);
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}

.signature a:hover { color: var(--texte); text-decoration-color: currentColor; }
.signature .signe { width: 15px; height: 15px; color: var(--texte-3); }

/* ── Apparitions ── */
.apparait {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}

.apparait.vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .apparait { opacity: 1; transform: none; }
}
