/* =============================================================================
   RHETRΛ — marbre et encre, porté sur le web.
   Les jetons viennent de design_handoff_agoge/README.md et de
   Packages/AgogeUI/Palette.swift. Aucune couleur en dur hors de ce bloc.
   ========================================================================== */

:root {
  --marbre:   #F2F1ED;
  --stele:    #FBFAF8;
  --encre:    #26282B;
  --bloc:     #1A1B1D;
  --bronze:   #A85B17;
  --bronze-c: #D89A5B;
  --gris1:    #6C6F72;
  --gris2:    #8A8D90;
  --gris3:    #9A9DA0;
  --terre:    #B04A3A;
  --filet:    rgba(0, 0, 0, .12);
  --filet-f:  rgba(0, 0, 0, .06);
  --sur-bloc: #F2F1ED;
  --sur-bloc-2: #9A9C9E;

  --serif: "Literata", Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --lapid: "Cardo", Georgia, serif;

  --marge: 22px;
  --large: 1180px;
}

@media (min-width: 900px) { :root { --marge: 48px; } }

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

section[id], div[id] { scroll-margin-top: 96px; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--marbre);
  color: var(--encre);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

::selection { background: var(--encre); color: var(--marbre); }

:focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 3px;
}

.saut {
  position: absolute; left: -9999px; top: 0;
  background: var(--bloc); color: var(--sur-bloc);
  padding: 12px 18px; z-index: 50;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.saut:focus { left: 12px; top: 12px; }

/* ---------------------------------------------------------------- structure */

.enveloppe { max-width: var(--large); margin: 0 auto; padding: 0 var(--marge); }
.etroit    { max-width: 68ch; }

/* Le méandre — la frise qui délimite. 14×12, trait 1.5px gris. */
.meandre {
  height: 5px; border: 0; margin: 0;
  border-top: 1.5px solid var(--encre);
  border-bottom: 1px solid var(--filet);
  background: none;
}

/* --------------------------------------------------------------- typographie */

h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; line-height: 1.14; margin: 0; }

.enonce {                       /* l'aphorisme — la voix du produit */
  font-size: clamp(2.05rem, 6.4vw, 3.55rem);
  line-height: 1.1;
  letter-spacing: -.022em;
  text-wrap: balance;
  margin: 0;
}
.titre-section {
  font-size: clamp(1.55rem, 3.6vw, 2.3rem);
  line-height: 1.16;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.sous-titre { font-size: 1.18rem; line-height: 1.35; font-weight: 600; }

p { margin: 0 0 1.05em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.etiquette {                    /* mono ALL-CAPS espacé — le label du système */
  font-family: var(--mono);
  font-size: .675rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gris2);
  margin: 0;
}
.etiquette--encre { color: var(--encre); }

.mesure { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.glose { color: var(--gris1); font-size: .945rem; line-height: 1.55; }

a { color: inherit; }

.lien-mono {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1.5px solid var(--encre);
  padding-bottom: 3px;
  transition: color .18s, border-color .18s;
}
.lien-mono:hover { color: var(--gris1); border-color: var(--gris1); }

/* ------------------------------------------------------------------ wordmark */

.marque { display: inline-flex; flex-direction: column; gap: 2px; text-decoration: none; }
.marque .grec {
  font-family: var(--serif);
  font-style: italic;
  font-size: .84rem;
  color: var(--gris2);
  letter-spacing: .02em;
}
.marque .mot {
  font-family: var(--lapid);
  font-weight: 700;
  font-size: 1.42rem;
  letter-spacing: .1em;
  line-height: 1;
}
.marque .mot .lambda { font-family: var(--lapid); }

/* -------------------------------------------------------------------- entête */

.entete {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--marbre) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--filet-f);
}
.entete .enveloppe {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding-top: 14px; padding-bottom: 14px;
}
.entete nav { display: flex; align-items: center; gap: 22px; }
.entete nav a {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .13em;
  text-transform: uppercase; text-decoration: none; color: var(--gris1);
  transition: color .18s;
}
.entete nav a:hover, .entete nav a[aria-current="page"] { color: var(--encre); }
@media (max-width: 720px) { .entete nav .cache-tel { display: none; } }

/* ----------------------------------------------------------------- boutons */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px;
  background: var(--bloc); color: var(--sur-bloc);
  border: 1.5px solid var(--bloc);
  font-family: var(--mono); font-size: .76rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.bouton:hover { background: var(--encre); border-color: var(--encre); }
.bouton:disabled { background: var(--gris3); border-color: var(--gris3); cursor: not-allowed; }
.bouton--creux { background: transparent; color: var(--encre); }
.bouton--creux:hover { background: var(--encre); color: var(--sur-bloc); }

/* --------------------------------------------------------- le registre (spine) */

.registre { width: 100%; border-collapse: collapse; }

.ligne {
  display: grid;
  grid-template-columns: 88px 1fr 132px;
  gap: 0 18px;
  align-items: baseline;
  padding: 17px 0 18px;
  border-top: 1px solid var(--filet);
}
.ligne:first-child { border-top: 0; }

.ligne .semaine {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--gris2);
  white-space: nowrap;
}
.ligne .fait { font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; }
.ligne .charge {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.06rem; font-weight: 600; text-align: right; white-space: nowrap;
}
.ligne .raison {
  grid-column: 2 / -1;
  color: var(--gris1); font-size: .94rem; line-height: 1.5;
  margin-top: 5px; max-width: 62ch;
}
.ligne .raison .fleche {
  font-family: var(--mono); font-weight: 600; color: var(--encre);
  margin-right: 7px;
}
.ligne--record .charge, .ligne--record .fleche { color: var(--bronze); }
.ligne--record .marque-record {
  display: inline-block; margin-left: 10px; vertical-align: 2px;
  font-family: var(--mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--marbre); background: var(--bronze); padding: 3px 7px;
}

@media (max-width: 620px) {
  .ligne { grid-template-columns: 1fr auto; gap: 0 14px; }
  .ligne .semaine { grid-column: 1 / -1; margin-bottom: 6px; }
  .ligne .raison { grid-column: 1 / -1; }
}

/* L'arrivée à l'encre : la ligne se pose, elle n'apparaît pas. */
@media (prefers-reduced-motion: no-preference) {
  .anime .pose { opacity: 0; transform: translateY(10px); filter: blur(6px); }
  .anime .pose.posee {
    opacity: 1; transform: none; filter: none;
    transition: opacity .62s cubic-bezier(.16,1,.3,1),
                transform .62s cubic-bezier(.16,1,.3,1),
                filter .62s cubic-bezier(.16,1,.3,1);
  }
}

/* ------------------------------------------------------------- annotations */

.annotation { padding: 74px 0 6px; }
.annotation__tete {
  display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center;
}
.annotation__tete .gravure { width: auto; max-width: clamp(78px, 13vw, 148px); max-height: 132px; opacity: .92; }
.annotation p { margin-top: 14px; }

.tableau { margin-top: 26px; border-top: 1.5px solid var(--encre); }
.tableau div {
  display: grid; grid-template-columns: 1fr auto; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--filet); align-items: baseline;
}
.tableau dt, .tableau .cle { font-weight: 600; font-size: 1.02rem; }
.tableau dd, .tableau .val {
  margin: 0; font-family: var(--mono); font-size: .74rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gris1);
  text-align: right;
}

/* --------------------------------------------------------------- bloc plein */

.bloc-plein {
  background: var(--bloc); color: var(--sur-bloc);
  padding: 58px 0 62px; margin-top: 78px;
}
.bloc-plein .etiquette { color: var(--sur-bloc-2); }
.bloc-plein .glose { color: var(--sur-bloc-2); }
.bloc-plein .bouton { background: var(--marbre); color: var(--bloc); border-color: var(--marbre); }
.bloc-plein .bouton:hover { background: var(--sur-bloc-2); border-color: var(--sur-bloc-2); }
.bloc-plein .champ { background: transparent; color: var(--sur-bloc); border-color: var(--sur-bloc-2); }
.bloc-plein .champ::placeholder { color: var(--sur-bloc-2); }
.bloc-plein a { color: var(--sur-bloc); }

/* ------------------------------------------------------------------ la liste */

.formulaire { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.champ {
  flex: 1 1 260px; min-height: 56px; padding: 0 16px;
  background: var(--stele); color: var(--encre);
  border: 1.5px solid var(--encre); border-radius: 0;
  font-family: var(--mono); font-size: .92rem;
}
.champ::placeholder { color: var(--gris2); }
.message { margin-top: 14px; min-height: 1.4em; }
.message--erreur { color: var(--terre); }

/* -------------------------------------------------------------------- pied */

.pied { padding: 46px 0 60px; border-top: 1px solid var(--filet); margin-top: 78px; }
.bloc-plein + .pied { margin-top: 0; border-top: 0; }
.pied__rangs { display: flex; flex-wrap: wrap; gap: 40px 60px; justify-content: space-between; }
.pied ul { list-style: none; margin: 12px 0 0; padding: 0; }
.pied li { margin: 7px 0; }
.pied li a { text-decoration: none; border-bottom: 1px solid var(--filet); }
.pied li a:hover { border-color: var(--encre); }
.pied__bas {
  margin-top: 42px; padding-top: 18px; border-top: 1px solid var(--filet);
  display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: space-between;
  align-items: baseline;
}

.langue { display: inline-flex; gap: 0; }
.langue a {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; text-decoration: none; color: var(--gris2);
  padding: 5px 9px; border: 1px solid var(--filet);
}
.langue a + a { border-left: 0; }
.langue a[aria-current="true"] { background: var(--bloc); color: var(--marbre); border-color: var(--bloc); }

/* ------------------------------------------------------------ pages de texte */

.texte { padding: 62px 0 24px; }
.texte h2 { font-size: 1.32rem; margin: 44px 0 10px; }
.texte h2:first-of-type { margin-top: 30px; }
.texte ul { padding-left: 1.15rem; max-width: 68ch; }
.texte li { margin: .38em 0; }
.texte code {
  font-family: var(--mono); font-size: .88em;
  background: rgba(0,0,0,.05); padding: 1px 5px;
}
.texte .sommaire {
  margin-top: 30px; padding: 20px 0 4px;
  border-top: 1.5px solid var(--encre); border-bottom: 1px solid var(--filet);
}
.texte .sommaire ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 26px;
}
.texte .sommaire a {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: var(--gris1);
}
.texte .sommaire a:hover { color: var(--encre); }

/* =============================================================================
   L'app à l'écran. La page de lancement montre le produit, en grand, tout de
   suite — le reste est commentaire.
   ========================================================================== */

.scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 42%);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(36px, 6vh, 74px) 0 clamp(30px, 5vh, 58px);
}
@media (max-width: 860px) {
  .scene { grid-template-columns: 1fr; gap: 34px; }
}

/* Le téléphone : un bloc d'encre derrière, l'écran posé dessus. Pas d'ombre
   portée — le noir est un bloc, jamais une ombre. */
.appareil { position: relative; justify-self: center; width: 100%; max-width: 340px; }
.appareil::before {
  content: "";
  position: absolute;
  left: 13%; right: -13%; top: 8%; bottom: 8%;
  background: var(--bloc);
}
.appareil img {
  position: relative;
  width: 100%;
  border: 1.5px solid var(--encre);
  background: var(--stele);
}
.appareil figcaption {
  position: relative;
  margin-top: 14px;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gris2);
}

/* Deux écrans côte à côte, en preuve. */
.ecrans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(22px, 4vw, 52px);
  align-items: start;
  margin-top: 34px;
}
.ecrans figure { margin: 0; }
.ecrans img { width: 100%; border: 1.5px solid var(--encre); background: var(--stele); }
.ecrans figcaption { margin-top: 12px; }
.ecrans .titre-ecran { font-weight: 600; font-size: 1.06rem; }

/* Bande d'encre pleine — le contraste que la page réclamait. */
.bande {
  background: var(--bloc); color: var(--sur-bloc);
  padding: clamp(46px, 7vh, 78px) 0;
  margin-top: clamp(56px, 8vh, 92px);
}
.bande .etiquette { color: var(--sur-bloc-2); }
.bande .glose { color: var(--sur-bloc-2); }
.bande .tableau { border-top-color: var(--sur-bloc); }
.bande .tableau div { border-bottom-color: rgba(255,255,255,.14); }
.bande .tableau .val { color: var(--sur-bloc-2); }
.bande .gravure { filter: invert(1) brightness(1.15) contrast(1.05); opacity: .8; }

/* Le chiffre qui porte la démonstration. */
.gain {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 22px; border-top: 1.5px solid var(--encre);
}
.gain b {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 5vw, 3rem); font-weight: 600; line-height: 1;
  color: var(--bronze);
}

/* =============================================================================
   L'inscription. Le titre occupe la largeur, l'app arrive dessous, et les
   preuves tiennent dans des champs pleins — encre, stèle, bronze.
   ========================================================================== */

/* La pilule : l'Ostrakon de l'app, porté en tête de page. */
.pilule {
  position: sticky; top: 12px; z-index: 30;
  width: max-content; max-width: calc(100% - 24px);
  margin: 12px auto 0;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px 6px;
  padding: 6px 8px;
  background: rgba(251, 250, 248, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--filet);
  border-radius: 999px;
}
.pilule .marque { padding: 0 12px 0 10px; }
.pilule .marque .mot { font-size: 1.16rem; }
.pilule .marque .grec { font-size: .7rem; }
.pilule a.onglet {
  display: inline-flex; align-items: center; height: 40px; padding: 0 14px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; text-decoration: none; color: var(--gris1);
  border-radius: 999px; transition: background .2s, color .2s;
}
.pilule a.onglet:hover { color: var(--encre); }
.pilule a.medaillon { background: var(--bloc); color: var(--marbre); }
.pilule a.medaillon:hover { color: var(--marbre); background: var(--encre); }
/* ⚠️ Spécificité : `.pilule a.onglet` (0,2,1) battait `.pilule .masque-tel`
   (0,2,0), et les onglets restaient affichés au téléphone. */
@media (max-width: 700px) { .pilule a.onglet.masque-tel { display: none; } }

/* Le titre gravé : capitales lapidaires, pleine largeur, serrées. */
.inscription {
  font-family: var(--serif);
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: -.03em;
  line-height: .92;
  font-size: clamp(2.2rem, 6.6vw, 5.4rem);
  margin: clamp(30px, 6vh, 62px) 0 0;
  text-wrap: balance;
}
.inscription .fin { display: block; }
.sous-inscription {
  text-align: center; margin: 22px auto 0; max-width: 54ch;
  font-size: clamp(1.02rem, 1.6vw, 1.22rem); color: var(--gris1);
}
.actions-centre {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; align-items: center; margin-top: 28px;
}

/* Le téléphone, au centre, à l'échelle de la promesse. */
.telephone { width: min(318px, 74vw); margin: clamp(26px, 4vh, 44px) auto 0; }
.telephone .cadre {
  background: var(--bloc);
  border-radius: 42px;
  padding: 11px;
}
/* L'écran. Repères mesurés sur la maquette (804×1806, soit 764 px de haut
   quand elle est posée à 340 de large) :
     18   fin de la bande d'annotation de planche
     78   ancien lockup ΛGOGÈ · 118 sa fin
     600  ligne « Développé militaire », coupée par la barre de repos
     752  bas de la pilule de navigation
   On ouvre la fenêtre de 18 à 752, on recouvre le lockup par la marque
   d'aujourd'hui, et on voile la ligne coupée. Rien d'autre n'est retouché. */
.telephone .ecran-cadre {
  position: relative; overflow: hidden; border-radius: 32px;
  aspect-ratio: 340 / 734; background: var(--marbre);
  container-type: inline-size;
}
.ecran-cadre img { position: absolute; left: 0; top: 0; width: 100%; transform: translateY(-2.36%); }
.ecran-cadre .rustine, .ecran-cadre .voile { position: absolute; background: var(--marbre); }
.ecran-cadre .rustine {
  left: 4%; top: 8.2%; width: 27%; height: 5.6%;
  display: flex; flex-direction: column; justify-content: center; gap: 1cqw;
}
.ecran-cadre .voile { left: 0; right: 0; top: 78.9%; height: 5%; }
.ecran-cadre .rustine .grec {
  font-family: var(--serif); font-style: italic; font-size: 3.3cqw;
  color: var(--gris1); line-height: 1;
}
.ecran-cadre .rustine .mot {
  font-family: var(--lapid); font-weight: 700; font-size: 6.1cqw;
  letter-spacing: .1em; line-height: 1; color: var(--encre);
}

.telephone figcaption {
  margin-top: 16px; text-align: center;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gris2);
}

/* Les tuiles : un champ plein, une preuve dedans, la légende dessous. */
.tuiles {
  display: grid; gap: clamp(20px, 2.6vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 30px;
}
.tuiles--duo { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.tuile { margin: 0; }
.tuile .champ-plein {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
  container-type: inline-size;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 26px 26px 0;
  background: var(--stele);
  border: 1px solid var(--filet);
}
.tuile--encre .champ-plein { background: var(--bloc); border-color: var(--bloc); }
.tuile--bronze .champ-plein { background: var(--bronze); border-color: var(--bronze); }
.tuile--haute .champ-plein { aspect-ratio: 5 / 4; }
.tuile .champ-plein .ecran {
  width: min(74%, 232px); height: 100%; aspect-ratio: auto;
  border-radius: 18px 18px 0 0;
  border: 1.5px solid var(--encre); border-bottom: 0; background: var(--marbre);
  align-self: flex-end;
}
.tuile .champ-plein .ecran .barre-app { padding: 9px 12px 8px; }
.tuile .champ-plein .ecran .barre-app .mot { font-size: .72rem; }
.tuile .champ-plein .ecran .barre-app .grec { font-size: .5rem; }
.tuile .champ-plein .ecran .vue img { transform: translateY(-34.5%); }
.tuile .champ-plein img.objet {
  width: auto; max-width: min(58%, 200px);
  max-height: 64%; align-self: center; margin-bottom: 26px;
  object-fit: contain;
}
.tuile--encre .champ-plein img.objet { filter: invert(1); opacity: .9; }
.tuile--bronze .champ-plein img.objet { filter: brightness(0) invert(1); opacity: .92; }
.tuile figcaption { margin-top: 16px; }
.tuile .intitule { font-size: 1.16rem; font-weight: 600; letter-spacing: -.01em; }
.tuile .glose { margin-top: 6px; }

/* Un panneau de stèle pour le registre. */
.panneau {
  background: var(--stele); border: 1px solid var(--filet);
  padding: clamp(22px, 3vw, 38px); margin-top: 30px;
}

.titre-large {
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  line-height: 1.06; letter-spacing: -.022em; text-wrap: balance;
  max-width: 18ch;
}

/* =============================================================================
   La démonstration. L'app n'est plus une capture : elle est rebâtie ici avec
   les mêmes jetons, et elle répond. Toucher une série la valide, la montre
   suit dans la seconde, le repos démarre. Rien à casser, rien à recadrer.
   ========================================================================== */

.demo {
  display: grid; gap: clamp(20px, 3.4vw, 46px);
  grid-template-columns: minmax(0, 340px) minmax(0, 216px);
  justify-content: center; align-items: center;
  margin: clamp(30px, 5vh, 54px) auto 0;
}
@media (max-width: 700px) {
  .demo { grid-template-columns: minmax(0, 300px); }
  .demo .appareil-montre { display: none; }
}
.demo figure { margin: 0; }
.demo figcaption {
  margin-top: 14px; text-align: center;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gris2);
}

/* ------------------------------------------------------------- le téléphone */

.tel-cadre { background: var(--bloc); border-radius: 40px; padding: 10px; }
.tel-ecran {
  background: var(--marbre); border-radius: 31px; overflow: hidden;
  padding: 10px 14px 8px; container-type: inline-size;
  display: flex; flex-direction: column; gap: 9px;
}
.tel-haut {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: .6rem; font-weight: 600;
}
.tel-haut .encoche { width: 32%; height: 15px; background: var(--bloc); border-radius: 999px; }
.tel-entete { display: flex; align-items: flex-end; justify-content: space-between; }
.tel-entete .grec { display: block; font-family: var(--serif); font-style: italic; font-size: .52rem; color: var(--gris2); }
.tel-entete .mot { font-family: var(--lapid); font-weight: 700; font-size: .88rem; letter-spacing: .1em; }
.tel-entete .droite { display: flex; align-items: center; gap: 7px; }
.tel-entete .chrono { font-size: .6rem; color: var(--gris1); }
.tel-entete .terminer {
  background: var(--bloc); color: var(--marbre);
  font-family: var(--mono); font-size: .5rem; letter-spacing: .1em; padding: 5px 7px;
}
.tel-label { font-size: .53rem; letter-spacing: .13em; }
.tel-titre {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 1.02rem; font-weight: 600; margin: 0;
}
.tel-titre .compte { font-size: .68rem; color: var(--gris1); }
.tel-raison { font-size: .66rem; line-height: 1.4; color: var(--gris1); margin: 0; min-height: 2.6em; }
.tel-raison .fleche { font-family: var(--mono); color: var(--encre); margin-right: 5px; }

.tel-steppers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stepper {
  display: flex; align-items: center; justify-content: space-between;
  border: 1.5px solid var(--encre); padding: 7px 9px; background: var(--stele);
}
.stepper button {
  border: 0; background: none; cursor: pointer; padding: 0 4px;
  font-family: var(--serif); font-size: .95rem; line-height: 1; color: var(--encre);
}
.stepper button:hover { color: var(--gris1); }
.stepper .valeur { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .78rem; }

.tel-series { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.tel-series li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border: 1.5px solid transparent;
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .72rem;
  color: var(--gris3); cursor: pointer; user-select: none;
  transition: background .22s cubic-bezier(.16,1,.3,1), color .22s, border-color .22s;
}
.tel-series li .num { color: inherit; opacity: .75; margin-right: 6px; }
.tel-series li[data-etat="attente"] { color: var(--gris3); }
.tel-series li[data-etat="active"] {
  border-color: var(--encre); background: var(--stele); color: var(--encre); font-weight: 600;
}
.tel-series li[data-etat="faite"] { background: var(--bloc); color: var(--marbre); font-weight: 600; }
.tel-series li .mention { font-size: .56rem; letter-spacing: .12em; }
.tel-series li[data-record="oui"] .mention { color: var(--bronze-c); }
.tel-series li:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }

.tel-repos {
  background: var(--bloc); color: var(--marbre);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px;
}
.tel-repos .etiquette { color: var(--sur-bloc-2); font-size: .5rem; }
.tel-repos .decompte { font-family: var(--mono); font-weight: 600; font-size: 1.24rem; line-height: 1; }
.tel-repos .boutons { display: flex; gap: 6px; }
.tel-repos button {
  font-family: var(--mono); font-size: .55rem; letter-spacing: .1em; cursor: pointer;
  padding: 6px 8px; border: 1px solid var(--sur-bloc-2); background: none; color: var(--marbre);
}
.tel-repos button.plein { background: var(--marbre); color: var(--bloc); border-color: var(--marbre); }

.tel-ostrakon {
  margin-top: 2px; display: flex; align-items: center; gap: 4px; justify-content: center;
  background: rgba(251,250,248,.9); border: 1px solid var(--filet);
  border-radius: 999px; padding: 4px 6px;
}
.tel-ostrakon span { font-family: var(--lapid); font-weight: 700; font-size: .72rem; color: var(--gris2); padding: 3px 6px; }
.tel-ostrakon .medaillon {
  background: var(--bloc); color: var(--marbre); border-radius: 999px;
  padding: 4px 9px; font-family: var(--mono); font-size: .48rem; letter-spacing: .1em;
}

/* ---------------------------------------------------------------- la montre */

.montre-cadre {
  background: var(--bloc); border-radius: 34px; padding: 9px;
  width: 100%; max-width: 200px; margin: 0 auto;
}
.montre-ecran {
  background: var(--bloc); border-radius: 26px; border: 1px solid #2E2F31;
  color: var(--marbre); padding: 16px 14px 14px; text-align: center;
  display: flex; flex-direction: column; gap: 4px; min-height: 196px;
  justify-content: center;
}
.montre-ecran .etiquette { color: var(--sur-bloc-2); font-size: .52rem; }
.montre-ecran .poids {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: 2.5rem; line-height: 1;
}
.montre-ecran .poids.bat { animation: bat .42s cubic-bezier(.16,1,.3,1); }
@keyframes bat { 0% { transform: scale(1) } 40% { transform: scale(1.09) } 100% { transform: scale(1) } }
.montre-ecran .bpm { margin-top: 8px; font-family: var(--mono); font-size: .62rem; color: var(--sur-bloc-2); }
.montre-ecran .repos { font-family: var(--mono); font-size: 1.5rem; font-weight: 600; }

/* --------------------------------------------------- le registre, jouable */

.semainier { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 26px; }
.semainier button {
  min-width: 62px; padding: 9px 10px; cursor: pointer;
  background: var(--stele); border: 1.5px solid var(--filet); color: var(--gris1);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  transition: background .2s, color .2s, border-color .2s;
}
.semainier button:hover { border-color: var(--encre); color: var(--encre); }
.semainier button[aria-pressed="true"] { background: var(--bloc); border-color: var(--bloc); color: var(--marbre); }
.semainier button[data-record="oui"][aria-pressed="true"] { background: var(--bronze); border-color: var(--bronze); }

.verdict {
  margin-top: 26px; border-top: 1.5px solid var(--encre); padding-top: 22px;
  display: grid; grid-template-columns: auto 1fr; gap: 8px 30px; align-items: baseline;
}
@media (max-width: 620px) { .verdict { grid-template-columns: 1fr; } }
.verdict .charge-geante {
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600;
  font-size: clamp(2.4rem, 7vw, 4.2rem); line-height: 1; letter-spacing: -.02em;
}
.verdict[data-record="oui"] .charge-geante { color: var(--bronze); }
.verdict .pourquoi { font-size: 1.04rem; line-height: 1.45; max-width: 46ch; }
.verdict .delta {
  grid-column: 1 / -1; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--gris2);
}

@media (max-width: 620px) {
  .tuile .champ-plein, .tuile--haute .champ-plein { aspect-ratio: 16 / 9; }
  .tuile .champ-plein img.objet { max-height: 74%; margin-bottom: 18px; }
  .inscription { font-size: clamp(2rem, 9vw, 3rem); }
  .verdict .charge-geante { font-size: clamp(2.2rem, 12vw, 3rem); }
}

/* La règle globale `p { max-width: 68ch }` décentrait le bouton de reprise :
   le paragraphe était étroit et calé à gauche, son centre ne tombait pas au
   centre de la page. */
.demo-rejouer { max-width: none; text-align: center; margin-top: 20px; }
.demo-rejouer button { background: none; border: 0; cursor: pointer; }