/* La page de présentation (`vues/presentation.ts`), servie sans session à la
   racine. Feuille propre à la page : elle ne charge ni `interface.css` ni la
   coque, seulement les jetons. Les cliquets de `echelles.test.ts` la
   comptent comme les autres : tailles par jeton, graisses 400 à 700, espacement
   sur la grille, aucune capitale, aucune couleur en dur.
   Les titres de la page se posent en `clamp()` : une taille fluide ne rentre
   pas dans l'échelle de sept crans, et l'accueil est le seul écran qui en
   demande une. */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--pile);
  font-size: var(--t-4);
  line-height: 1.6;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
a { color: var(--sur-douce); text-underline-offset: .2em; }
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-petit);
}
.cadre {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

/* En-tête : une barre tonale arrondie, comme la barre du haut de l'application */
.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0;
  padding: .5rem .6rem .5rem 1rem;
  border-radius: var(--r-pastille);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--trait);
}
.marque-page {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--t-5);
  color: var(--encre);
  text-decoration: none;
}
.marque-page img { width: 2rem; height: 2rem; }
.nom-marque { font-weight: 700; letter-spacing: -.01em; color: var(--encre); }
.entete nav {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: var(--t-3);
}
.ancres {
  display: flex;
  gap: .2rem;
  padding: .2rem;
  border-radius: var(--r-pastille);
  background: var(--surface-3);
}
.ancres a {
  padding: .5rem 1rem;
  border-radius: var(--r-pastille);
  color: var(--encre-2);
  font-weight: 600;
  text-decoration: none;
}
.ancres a:hover { background: var(--accent-fond); color: var(--encre); }

/* Boutons en pilule, comme dans l'application */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--h-saisie);
  padding: 0 1.4rem;
  border-radius: var(--r-pastille);
  border: 0;
  background: var(--accent);
  color: var(--sur-accent);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--d-pression) var(--courbe);
}
.bouton:active { transform: scale(.97); }
.bouton.tonal { background: var(--accent-fond); color: var(--sur-douce); }
/* Material 3 : l'élévation du bouton plein, la couche d'état (8 % au survol, 12 % au focus), l'anneau de 3 px. */
.bouton {
  --m3-e1: 0 1px 2px rgba(0, 0, 0, .14), 0 1px 3px 1px rgba(0, 0, 0, .07);
  position: relative; overflow: hidden; box-shadow: var(--m3-e1);
}
.bouton.tonal { box-shadow: none; }
.bouton::after {
  content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; pointer-events: none;
  transition: opacity var(--d-survol) var(--courbe);
}
.bouton:hover::after { opacity: .08; }
.bouton:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.bouton:focus-visible::after { opacity: .12; }

/* Îlots */
.ilot {
  background: var(--surface);
  border-radius: var(--r-ilot);
  padding: clamp(1.4rem, 4vw, 3rem);
  margin: 0 0 1rem;
}
.ilot.teinte { background: var(--surface-2); }
.ilot h2 {
  font-size: clamp(var(--t-6), 3.2vw, var(--t-7));
  line-height: 1.2;
  margin: 0 0 .6rem;
}
.ilot > .intro {
  color: var(--encre-2);
  max-width: 44rem;
  margin: 0 0 1.7rem;
}

/* Accroche */
.heros {
  display: grid;
  gap: 1.7rem;
  align-items: center;
  background: var(--lateral);
}
.heros h1 {
  font-size: clamp(var(--t-7), 6vw, 3.4rem);
  line-height: 1.1;
  margin: 0 0 1rem;
}
.heros .chapeau {
  font-size: var(--t-5);
  color: var(--encre-2);
  margin: 0 0 1.7rem;
  max-width: 34rem;
  text-align: justify;
  hyphens: auto;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
}
.mention-offre {
  margin: 1rem 0 0;
  font-size: var(--t-2);
  color: var(--encre-3);
}
@media (min-width: 56rem) {
  .heros { grid-template-columns: 1.15fr .85fr; }
}

/* Exemple de lecture du jour : la capture de la vraie carte, une par peau
   (`npm run presentation:exemple`). Le fond de l'encadré est celui sur lequel
   elle a été prise, pour que ses coins arrondis s'y fondent. */
.exemple {
  background: var(--surface);
  border-radius: var(--r-carte);
  padding: 1.4rem;
}
.exemple .etiquette {
  display: block;
  font-size: var(--t-2);
  font-weight: 600;
  color: var(--encre-3);
  margin: 0 0 .8rem;
}
.carte-exemple {
  display: block;
  width: 100%;
  max-width: 28rem;
  height: auto;
  margin: 0 auto;
}
.carte-exemple-sombre { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-peau]) .carte-exemple-clair { display: none; }
  :root:not([data-peau]) .carte-exemple-sombre { display: block; }
}
:root[data-peau="sombre"] .carte-exemple-clair { display: none; }
:root[data-peau="sombre"] .carte-exemple-sombre { display: block; }

/* La chaîne des unités, qui finit en minutes */
.chaine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chaine li {
  padding: .5rem 1rem;
  border-radius: var(--r-pastille);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--trait);
  font-weight: 600;
}
.chaine li + li::before { content: "\203A"; margin-right: 1rem; color: var(--encre-3); font-weight: 400; }
.chaine li.fort { background: var(--accent); color: var(--sur-accent); }
.chaine li.fort::before { color: var(--sur-accent); }

/* Des lignes à rond dans une carte, comme les listes de l'application */
.carte {
  background: var(--surface-2);
  border-radius: var(--r-carte);
  padding: .4rem 1.4rem;
  box-shadow: inset 0 0 0 1px var(--trait);
}
.ilot.teinte .carte { background: var(--surface); }
.lignes { display: grid; margin: 0; padding: 0; list-style: none; }
@media (min-width: 44rem) {
  .lignes.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.7rem; }
}
.ligne {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--trait);
}
.lignes > .ligne:last-child { border-bottom: 0; }
@media (min-width: 44rem) {
  .lignes.deux > .ligne:nth-last-child(2) { border-bottom: 0; }
}
.rond {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--r-pastille);
  background: var(--accent-fond);
  color: var(--sur-douce);
  font-weight: 700;
}
.corps { display: grid; gap: .2rem; min-width: 0; }
.titre { font-weight: 600; }
.detail { color: var(--encre-2); font-size: var(--t-3); }
.ilot > .intro.suite { margin: 1rem 0 0; }

/* Questions : des plis natifs, sans script */
details {
  background: var(--surface-2);
  border-radius: var(--r-tuile);
  margin: 0 0 .6rem;
}
summary {
  cursor: pointer;
  padding: 1rem 1.4rem;
  font-weight: 600;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; float: right; color: var(--sur-douce); font-weight: 700; }
details[open] summary::after { content: "\2212"; }
details > p { margin: 0; padding: 0 1.4rem 1.1rem; color: var(--encre-2); }
.ilot details + .actions { margin-top: 1.4rem; }
.en-bref { margin: 1.4rem 0 0; font-size: var(--t-3); color: var(--encre-3); }

/* Pied de page : la barre tonale de l'en-tête, en bas */
.pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.4rem;
  justify-content: space-between;
  margin: 1rem 0 3rem;
  padding: .8rem 1.4rem;
  border-radius: var(--r-pastille);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--trait);
  color: var(--encre-2);
  font-size: var(--t-3);
}
.pied nav { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.pied nav a { color: var(--encre-2); text-decoration: none; }
.pied nav a:hover { color: var(--encre); }

/* Petit écran : l'en-tête ne garde que la marque et la connexion */
@media (max-width: 43.99rem) {
  .ancres { display: none; }
  .actions .bouton { width: 100%; }
}