@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..600;1,9..144,400..600&family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400..600&display=swap');

/* ==========================================================================
   Le Journal — feuille de style
   ==========================================================================
   Couple typographique : Newsreader (corps, serif de lecture, variable) +
   Fraunces (affichage, serif de caractère, variable, axe optique "opsz").
   Même famille visuelle (serif contemporaine, empattements doux), mais
   Fraunces devient plus expressive aux grandes tailles — parfait pour les
   citations, moment de bravoure du site. `font-optical-sizing: auto` laisse
   le navigateur choisir le bon point de l'axe "opsz" selon la taille
   affichée, sans réglage manuel.

   Sommaire : 1. Réinitialisation · 2. Variables · 3. Base · 4. Accessibilité
   5. Enveloppe · 6. Entête · 7. Pied · 8. Accueil · 9. Entrée · 10. Prose
   11. Page simple · 12. Erreur (404) · 13. Éditeur · 14. Ruptures responsive
   ========================================================================== */

/* 1. Réinitialisation légère --------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }
img, picture { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }

/* 2. Variables ------------------------------------------------------------
   Palette clair par défaut : papier chaud, encre profonde. Thème sombre via
   `prefers-color-scheme` ET surcharges `data-theme` (la bascule manuelle de
   theme.js gagne toujours, dans les deux sens). */

:root {
  --police-corps: 'Newsreader', Georgia, 'Times New Roman', serif;
  --police-affichage: 'Fraunces', Georgia, 'Times New Roman', serif;

  --c-fond: #f7f3ea;
  --c-fond-releve: #efe8d8;
  --c-encre: #2a241d;
  --c-encre-douce: #5a5248;
  --c-bordure: #ddd3c0;
  --c-accent: #8a5a3b;
  --c-texte-sur-accent: #f7f3ea;
  --c-ombre: 38 30 20;

  --mesure: 38rem;
  --espace-page-inline: clamp(1.25rem, 4vw + 0.25rem, 3rem);
  --espace-1: 0.25rem;
  --espace-2: 0.5rem;
  --espace-3: 0.75rem;
  --espace-4: 1rem;
  --espace-5: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --espace-6: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  --espace-7: clamp(2.5rem, 1.75rem + 3vw, 4rem);
  --espace-8: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  /* Échelle typographique fluide */
  --taille-petite: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --taille-corps: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --taille-grande: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem);
  --taille-titre-carte: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --taille-titre-entree: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --taille-titre-couverture: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --taille-citation-carte: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --taille-citation-entree: clamp(1.85rem, 1.3rem + 3.2vw, 3.5rem);
  --interligne-corps: 1.7;
  --interligne-titre: 1.2;

  --rayon: 0.3rem;
  --ombre-carte: 0 1px 2px rgb(var(--c-ombre) / 0.05), 0 4px 10px rgb(var(--c-ombre) / 0.04);
  --duree: 200ms;
  --easing: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-fond: #171512;
    --c-fond-releve: #201c17;
    --c-encre: #ece6da;
    --c-encre-douce: #a8a096;
    --c-bordure: #37312a;
    --c-accent: #d99a6c;
    --c-texte-sur-accent: #171512;
    --c-ombre: 0 0 0;
  }
}

:root[data-theme='clair'] {
  --c-fond: #f7f3ea;
  --c-fond-releve: #efe8d8;
  --c-encre: #2a241d;
  --c-encre-douce: #5a5248;
  --c-bordure: #ddd3c0;
  --c-accent: #8a5a3b;
  --c-texte-sur-accent: #f7f3ea;
  --c-ombre: 38 30 20;
}

:root[data-theme='sombre'] {
  --c-fond: #171512;
  --c-fond-releve: #201c17;
  --c-encre: #ece6da;
  --c-encre-douce: #a8a096;
  --c-bordure: #37312a;
  --c-accent: #d99a6c;
  --c-texte-sur-accent: #171512;
  --c-ombre: 0 0 0;
}

/* 3. Base ------------------------------------------------------------------ */

html { color-scheme: light dark; }

body {
  background-color: var(--c-fond);
  color: var(--c-encre);
  font-family: var(--police-corps);
  font-optical-sizing: auto;
  font-size: var(--taille-corps);
  line-height: var(--interligne-corps);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color var(--duree) var(--easing), color var(--duree) var(--easing);
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: var(--police-affichage);
  font-weight: 600;
  line-height: var(--interligne-titre);
  text-wrap: balance;
}

a { color: var(--c-accent); }

/* Soulignement animé, discret, pour les liens de texte courant */
.pied__lien, .entete__lien, .retour a, .prose a, .apercu a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size var(--duree) var(--easing);
}
.pied__lien:hover, .pied__lien:focus-visible,
.entete__lien:hover, .entete__lien:focus-visible,
.retour a:hover, .retour a:focus-visible,
.prose a:hover, .prose a:focus-visible,
.apercu a:hover, .apercu a:focus-visible { background-size: 100% 1px; }

/* 4. Accessibilité ---------------------------------------------------------- */

.lien-evitement {
  position: absolute;
  top: -3rem;
  left: var(--espace-4);
  z-index: 100;
  padding: var(--espace-3) var(--espace-5);
  background-color: var(--c-accent);
  color: var(--c-texte-sur-accent);
  border-radius: var(--rayon);
  text-decoration: none;
  font-size: var(--taille-petite);
  letter-spacing: 0.02em;
  transition: top var(--duree) var(--easing);
}
.lien-evitement:focus { top: var(--espace-4); }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--rayon);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 5. Enveloppe — entête, contenu, pied -------------------------------------- */

.entete, .contenu, .pied {
  width: min(100% - 2 * var(--espace-page-inline), var(--mesure));
  margin-inline: auto;
}
.contenu { flex: 1; padding-block: var(--espace-7) var(--espace-8); }

/* 6. Entête ------------------------------------------------------------------ */

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-4);
  padding-block: var(--espace-5);
  flex-wrap: wrap;
}
.entete__marque {
  font-family: var(--police-affichage);
  font-weight: 600;
  font-size: var(--taille-grande);
  color: var(--c-encre);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color var(--duree) var(--easing);
}
.entete__marque:hover { color: var(--c-accent); }
.entete__nav { display: flex; align-items: center; gap: var(--espace-5); }
.entete__lien { color: var(--c-encre-douce); font-size: var(--taille-petite); letter-spacing: 0.02em; }
.entete__lien:hover, .entete__lien:focus-visible { color: var(--c-accent); }

/* Bascule de thème — dessinée en CSS pur (pas de police d'icônes). Le
   glyphe affiché indique le thème vers lequel on bascule. */
.bascule-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--c-bordure);
  background-color: transparent;
  color: var(--c-encre-douce);
  cursor: pointer;
  transition: border-color var(--duree) var(--easing), color var(--duree) var(--easing),
    transform var(--duree) var(--easing);
}
.bascule-theme:hover { border-color: var(--c-accent); color: var(--c-accent); transform: translateY(-1px); }
.bascule-theme::before { content: '\263E'; font-size: 1rem; line-height: 1; } /* ☾ vers le sombre, défaut clair */
@media (prefers-color-scheme: dark) {
  .bascule-theme::before { content: '\2600'; } /* ☀ vers le clair */
}
:root[data-theme='clair'] .bascule-theme::before { content: '\263E'; }
:root[data-theme='sombre'] .bascule-theme::before { content: '\2600'; }

/* 7. Pied de page -------------------------------------------------------------- */

.pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-4);
  flex-wrap: wrap;
  padding-block: var(--espace-6);
  border-top: 1px solid var(--c-bordure);
  color: var(--c-encre-douce);
  font-size: var(--taille-petite);
}
.pied__texte { margin: 0; }
.pied__lien { color: var(--c-encre-douce); }
.pied__lien:hover, .pied__lien:focus-visible { color: var(--c-accent); }

/* 8. Accueil — couverture, flux, cartes ----------------------------------------- */

.couverture { padding-block-end: var(--espace-7); text-align: center; }
.couverture__titre { font-size: var(--taille-titre-couverture); margin-block-end: var(--espace-3); }
.couverture__sous-titre { font-size: var(--taille-grande); color: var(--c-encre-douce); font-style: italic; }

.flux { display: flex; flex-direction: column; }
.flux__annee {
  padding-block: var(--espace-6) var(--espace-3);
  margin-block-start: var(--espace-4);
  border-top: 1px solid var(--c-bordure);
}
.flux__annee:first-child { border-top: none; margin-block-start: 0; }
.flux__annee h2 {
  font-family: var(--police-corps);
  font-size: var(--taille-petite);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-encre-douce);
}

.carte { border-top: 1px solid var(--c-bordure); transition: transform var(--duree) var(--easing); }
.flux > .carte:first-child,
.flux > .flux__annee:first-child + .carte { border-top: none; }
.carte:hover, .carte:focus-within { transform: translateY(-2px); }
.carte__lien { display: block; padding-block: var(--espace-6); text-decoration: none; color: inherit; }
.carte__meta {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  margin-block-start: var(--espace-3);
  color: var(--c-encre-douce);
  font-size: var(--taille-petite);
}
.carte__separateur { opacity: 0.6; }
.carte__date { color: var(--c-encre-douce); font-size: var(--taille-petite); }

/* Variation citation : le moment de bravoure, même sur l'accueil */
.carte[data-type='citation'] .carte__citation {
  font-family: var(--police-affichage);
  font-style: italic;
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: var(--taille-citation-carte);
  line-height: 1.4;
  color: var(--c-encre);
  overflow-wrap: anywhere;
}
.carte[data-type='citation'] .carte__attribution {
  margin-block-start: var(--espace-3);
  font-style: normal;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--c-accent);
  font-size: var(--taille-petite);
}

/* Variation note : plus proche de l'article de blog classique */
.carte[data-type='note'] .carte__titre { font-size: var(--taille-titre-carte); transition: color var(--duree) var(--easing); }
.carte[data-type='note']:hover .carte__titre,
.carte[data-type='note']:focus-within .carte__titre { color: var(--c-accent); }
.carte[data-type='note'] .carte__extrait { margin-block-start: var(--espace-2); color: var(--c-encre-douce); max-width: 34rem; }

.vide { padding-block: var(--espace-7); text-align: center; color: var(--c-encre-douce); font-style: italic; }

/* 9. Entrée — citation & note ----------------------------------------------------- */

.entree { padding-block-end: var(--espace-6); }
.entree--citation { text-align: center; padding-block: var(--espace-6) var(--espace-7); }
.entree--note { text-align: left; } /* symétrique explicite de --citation, lecture normale */
.citation {
  font-family: var(--police-affichage);
  font-style: italic;
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: var(--taille-citation-entree);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.citation__attribution {
  margin-block-start: var(--espace-5);
  font-style: normal;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--c-accent);
  font-size: var(--taille-grande);
}
.entree--citation .entree__meta { margin-block-start: var(--espace-6); justify-content: center; }

.entree__entete { margin-block-end: var(--espace-6); }
.entree__titre { font-size: var(--taille-titre-entree); margin-block-end: var(--espace-3); }
.entree__meta {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  color: var(--c-encre-douce);
  font-size: var(--taille-petite);
}
.entree__separateur { opacity: 0.6; }

/* Navigation entre entrées voisines */
.voisins {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espace-4);
  margin-block-start: var(--espace-7);
  padding-block-start: var(--espace-6);
  border-top: 1px solid var(--c-bordure);
}
.voisins__lien {
  display: flex;
  flex-direction: column;
  gap: var(--espace-1);
  text-decoration: none;
  color: var(--c-encre);
  padding: var(--espace-3);
  margin: calc(var(--espace-3) * -1);
  border-radius: var(--rayon);
  transition: background-color var(--duree) var(--easing);
}
.voisins__lien:hover, .voisins__lien:focus-visible { background-color: var(--c-fond-releve); }
.voisins__lien--precedent { text-align: left; align-items: flex-start; }
.voisins__lien--suivant { grid-column: 2; text-align: right; align-items: flex-end; }
.voisins__etiquette { font-size: var(--taille-petite); color: var(--c-encre-douce); text-transform: uppercase; letter-spacing: 0.06em; }
.voisins__titre { font-family: var(--police-affichage); font-size: var(--taille-grande); }
.retour { margin-block-start: var(--espace-5); text-align: center; }

/* 10. Prose — contenu Markdown rendu (partagé avec l'aperçu de l'éditeur) --------- */

.prose, .apercu { max-width: 34rem; margin-inline: auto; overflow-wrap: anywhere; }
.prose > * + *, .apercu > * + * { margin-block-start: var(--espace-5); }
.prose h2, .apercu h2 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); margin-block-start: var(--espace-7); }
.prose h3, .apercu h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); margin-block-start: var(--espace-6); }
.prose p, .apercu p { color: var(--c-encre); }
.prose ul, .prose ol, .apercu ul, .apercu ol { padding-inline-start: 1.25em; }
.prose ul, .apercu ul { list-style: disc; }
.prose ol, .apercu ol { list-style: decimal; }
.prose li + li, .apercu li + li { margin-block-start: var(--espace-2); }
.prose blockquote, .apercu blockquote {
  border-inline-start: 3px solid var(--c-accent);
  padding-inline-start: var(--espace-5);
  font-family: var(--police-affichage);
  font-style: italic;
  font-size: var(--taille-grande);
  color: var(--c-encre-douce);
}
.prose strong, .apercu strong { font-weight: 600; }
.prose em, .apercu em { font-style: italic; }
.prose hr, .apercu hr { border: none; border-top: 1px solid var(--c-bordure); width: 3rem; margin: var(--espace-7) auto; }
.prose code, .apercu code {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.9em;
  background-color: var(--c-fond-releve);
  padding: 0.15em 0.4em;
  border-radius: 0.25rem;
  overflow-wrap: anywhere;
}
.prose img, .apercu img { border-radius: var(--rayon); margin-inline: auto; }

/* 11. Page simple ------------------------------------------------------------------ */

.simple__titre { font-size: var(--taille-titre-entree); margin-block-end: var(--espace-6); text-align: center; }

/* 12. Page d'erreur (404) ----------------------------------------------------------- */

.page--erreur .contenu {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
}
.erreur__titre { font-size: var(--taille-titre-entree); margin-block-end: var(--espace-4); }
.erreur__texte { color: var(--c-encre-douce); margin-block-end: var(--espace-6); }

/* 13. Page éditeur — formulaire & aperçu ---------------------------------------------- */

.editeur__titre { font-size: var(--taille-titre-entree); margin-block-end: var(--espace-6); text-align: center; }
.editeur { display: flex; flex-direction: column; gap: var(--espace-5); }
.editeur label {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  font-size: var(--taille-petite);
  color: var(--c-encre-douce);
  letter-spacing: 0.02em;
}
.editeur input, .editeur select, .editeur textarea {
  background-color: var(--c-fond-releve);
  color: var(--c-encre);
  border: 1px solid var(--c-bordure);
  border-radius: var(--rayon);
  padding: var(--espace-3) var(--espace-4);
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  transition: border-color var(--duree) var(--easing);
}
.editeur input:focus-visible, .editeur select:focus-visible, .editeur textarea:focus-visible { border-color: var(--c-accent); }
.editeur textarea { min-height: 16rem; line-height: var(--interligne-corps); resize: vertical; }
.editeur > div, .editeur fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--espace-5);
  border: none;
  padding: 0;
  margin: 0;
}
.editeur button, #bouton-telecharger, #bouton-copier {
  align-self: flex-start;
  padding: var(--espace-3) var(--espace-6);
  border-radius: var(--rayon);
  border: 1px solid var(--c-accent);
  font-size: var(--taille-petite);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform var(--duree) var(--easing);
}
#bouton-telecharger { background-color: var(--c-accent); color: var(--c-texte-sur-accent); }
#bouton-copier { background-color: transparent; color: var(--c-accent); }
.editeur button:hover, #bouton-telecharger:hover, #bouton-copier:hover { transform: translateY(-1px); }

.apercu {
  margin-block-start: var(--espace-7);
  padding: var(--espace-6);
  background-color: var(--c-fond-releve);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
}

/* 14. Ruptures responsive — 375px = base ci-dessus (aucun débordement grâce
   à `min(100% - 2 * espace, mesure)`), puis 768px et 1280px. ------------------------ */

@media (min-width: 768px) {
  :root { --mesure: 40rem; }
  .entree--citation { padding-block: var(--espace-7) var(--espace-8); }
}

@media (min-width: 1280px) {
  :root { --mesure: 42rem; }

  .page--ecrire .contenu {
    width: min(100% - 2 * var(--espace-page-inline), 68rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--espace-7);
    align-items: start;
  }
  .page--ecrire .editeur__titre { grid-column: 1 / -1; text-align: left; }
  .page--ecrire .apercu { margin-block-start: 0; position: sticky; top: var(--espace-6); }
}