/* calame.be — feuille unique (31/10/2026). Couleurs et polices de l'app : papier crème, encre,
   or ; Cormorant Garamond et Italiana, servies d'ici (aucune police chargée chez un tiers). */
@font-face { font-family: "Cormorant"; src: url("/fonts/cormorant-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("/fonts/cormorant-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("/fonts/cormorant-italique-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("/fonts/cormorant-italique-500.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Italiana"; src: url("/fonts/italiana.woff2") format("woff2"); font-display: swap; }

:root {
  --papier: #f8f4ee;
  --encre: #1f1e1b;
  --encre-douce: #57524a;
  --or: #bfa063;
  --or-texte: #846628;      /* or assez sombre pour se lire sur le papier (5:1) */
  --filet: #e2d6bf;
  --serif: "Cormorant", "Cormorant Garamond", Garamond, Georgia, serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--encre);
  font: 500 1.2rem/1.6 var(--serif); font-feature-settings: "onum", "kern", "liga";
  min-height: 100vh; display: flex; flex-direction: column;
}
main, .haut, .bas { width: 100%; max-width: 38rem; margin: 0 auto; padding: 0 1.4rem; }
main { flex: 1; }
a { color: var(--or-texte); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--encre); }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

/* En-tête : la plume et le nom, rien d'autre */
.haut { padding-top: 1.6rem; padding-bottom: 3.2rem; }
.marque { display: inline-flex; align-items: center; gap: .55rem; color: var(--encre); text-decoration: none;
  font: 600 .82rem/1 var(--serif); letter-spacing: .32em; text-transform: uppercase; }
.marque img { width: 28px; height: 28px; border-radius: 6px; }

/* La date, au-dessus de la pensée du jour */
.jour { margin: 0 0 1.4rem; font: italic 500 1.05rem/1.3 var(--serif); color: var(--or-texte); }
.jour::first-letter { text-transform: uppercase; }

/* Une pensée */
.pensee { margin: 0 0 3rem; }
.texte { position: relative; margin: 0; font: italic 500 clamp(1.55rem, 1.15rem + 1.9vw, 2.15rem)/1.42 var(--serif);
  text-wrap: pretty; hyphens: manual; }
.texte p { margin: 0 0 .9em; }
.texte p:last-child { margin-bottom: 0; }
/* Guillemet ouvrant suspendu dans la marge, à hauteur de la première ligne */
.texte::before { content: "\201C"; position: absolute; left: -.42em; top: -.08em; font: 500 1.5em/1 var(--serif);
  font-style: normal; color: var(--or); opacity: .7; pointer-events: none; }
.signature { margin: 1.6rem 0 0; display: flex; flex-direction: column; gap: .15rem; }
.signature::before { content: ""; width: 2.4rem; height: 1px; background: var(--or); margin-bottom: .8rem; }
.nom { font: 600 .95rem/1.3 var(--serif); letter-spacing: .16em; text-transform: uppercase; }
.signature cite { font: italic 400 1.02rem/1.4 var(--serif); color: var(--encre-douce); }

/* Présentation de l'auteur, dépliée à la demande */
.fiche { margin-top: 1.6rem; }
.fiche summary { display: inline-block; cursor: pointer; list-style: none; color: var(--or-texte);
  font: italic 500 1.05rem/1.4 var(--serif); border-bottom: 1px solid var(--filet); }
.fiche summary::-webkit-details-marker { display: none; }
.fiche summary::after { content: " \2192"; font-style: normal; }
.fiche[open] summary::after { content: " \2193"; }
.fiche[open] summary { margin-bottom: 1rem; }
.fiche p { margin: 0 0 .8em; font-size: 1.12rem; line-height: 1.55; color: var(--encre); }
.fiche .dates { font: 600 .85rem/1.3 var(--serif); letter-spacing: .1em; color: var(--encre-douce); margin-bottom: .6rem; }

/* L'application : un paragraphe, deux liens */
.appli { border-top: 1px solid var(--filet); padding-top: 1.6rem; margin-bottom: 3rem; }
.appli.ouverture { border-top: 0; padding-top: 0; margin-bottom: 4rem; }
.appli.ouverture p { color: var(--encre); }
.appli p { margin: 0 0 1.2rem; font-size: 1.12rem; line-height: 1.55; color: var(--encre-douce); }
.appli h1 { font: 400 clamp(2rem, 1.4rem + 2.6vw, 2.8rem)/1.1 "Italiana", var(--serif); margin: 0 0 1rem; color: var(--encre); }
.stores { display: flex; flex-wrap: wrap; gap: .8rem 2.4rem; margin: 0 !important; }
.store { display: inline-flex; flex-direction: column; color: var(--encre); text-decoration: none;
  font: 600 1.25rem/1.15 var(--serif); padding-bottom: .3rem; border-bottom: 1px solid var(--or); }
.store span { font: italic 400 .92rem/1.2 var(--serif); color: var(--encre-douce); }
.store:hover { border-bottom-color: var(--encre); }

.absente { font: italic 500 1.4rem/1.45 var(--serif); color: var(--encre-douce); }

/* Pied */
.bas { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; padding-top: 1.2rem; padding-bottom: 2rem;
  font: 500 .9rem/1.4 var(--serif); }
.bas a { color: var(--encre-douce); text-decoration: none; }
.bas a:hover { color: var(--encre); text-decoration: underline; }

@media (min-width: 720px) {
  .haut { padding-top: 2.4rem; padding-bottom: 5rem; }
  .texte::before { left: -.62em; top: -.12em; font-size: 2em; }
}
@media print { .haut, .appli, .bas, .fiche summary { display: none; } .fiche { display: block; } }