@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400&family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&family=UnifrakturMaguntia&family=Special+Elite&family=Anton&display=swap');

  body {
    margin: 0;
    padding: 0;
    background-color: #cdbf9f;
    font-family: 'Old Standard TT', Georgia, 'Times New Roman', serif;
    overflow-x: hidden;
  }

  .page {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 60px auto;
    padding: 24px 30px 40px 30px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  }

  /* Morceaux de scotch sur la feuille */
  .page::before,
  .page::after {
    content: "";
    position: absolute;
    top: -14px;
    width: 110px;
    height: 28px;
    background: rgba(240, 232, 205, 0.75);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }
  .page::before { left: -20px; transform: rotate(-35deg); }
  .page::after  { right: -20px; transform: rotate(35deg); }

  .bandeau {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #1a1a1a;
    padding-bottom: 8px;
    border-bottom: 1px solid #1a1a1a;
  }

  .title-wrap {
    text-align: center;
    margin: 26px 0 6px 0;
    padding-bottom: 18px;
    border-bottom: 4px solid #1a1a1a;
  }
  .title-img {
    max-width: 420px;
    width: 100%;
    height: auto;
  }

  @media screen and (max-width: 480px) {
    .page { padding: 18px 18px 30px 18px; margin: 40px 16px; }
    .title-img { max-width: 300px; }
    .bandeau { font-size: 9.5px; }
  }

  .subtitle {
    text-align: center;
    font-size: 13px;
    font-style: italic;
    color: #666666;
    margin: 0 0 34px 0;
  }

  ul.archives {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #ddd8cf;
  }

  ul.archives li {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #ddd8cf;
  }

  ul.archives li a.lire {
    flex: 1;
    display: block;
    padding: 16px 4px;
    font-size: 15px;
    color: #1a1a1a;
    text-decoration: none;
  }

  ul.archives li a.lire:hover {
    color: #8a1f1f;
  }

  /* Petit bouton de téléchargement, à droite */
  .telecharger,
  .reader-download {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #1a1a1a;
    border-radius: 50%;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 16px;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .telecharger:hover {
    background: #1a1a1a;
    color: #fbf8f1;
  }

  footer {
    text-align: center;
    font-size: 11px;
    color: #7a7a7a;
    margin-top: 40px;
  }
  footer a { color: #7a7a7a; }

  /* ===== Bloc d'inscription à la newsletter ===== */
  .inscription {
    margin-top: -30px;
    padding-top: 28px;
  }
  .inscription h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px;
    text-align: center;
    margin: 0 0 4px 0;
  }
  .inscription-intro {
    text-align: center;
    font-size: 13px;
    font-style: italic;
    color: #666666;
    margin: 0 0 22px 0;
  }
  .inscription-label {
    display: block;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .inscription-ligne {
    display: flex;
    gap: 8px;
  }
  .inscription-ligne input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    font: inherit;
    font-size: 16px; /* 16px minimum : évite le zoom automatique sur iPhone */
    border: 1px solid #1a1a1a;
    border-radius: 0;
    background: #ffffff;
  }
  .inscription-ligne button {
    flex: 0 0 auto;
    padding: 10px 16px;
    font: inherit;
    font-size: 14px;
    color: #ffffff;
    background: #1a1a1a;
    border: 1px solid #1a1a1a;
    border-radius: 0;
    cursor: pointer;
  }
  .inscription-ligne button:hover { background: #8a1f1f; border-color: #8a1f1f; }
  .inscription-ligne button:disabled { opacity: 0.5; cursor: default; }
  .inscription-consentement {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 14px 0;
    font-size: 13px;
    line-height: 1.45;
    cursor: pointer;
  }
  .inscription-consentement input {
    flex: 0 0 auto;
    margin-top: 3px;
    accent-color: #1a1a1a;
  }
  .inscription-rgpd {
    font-size: 11px;
    line-height: 1.5;
    color: #666666;
    margin: 0;
  }
  .inscription-rgpd a { color: #666666; }
  .inscription-merci,
  .inscription-erreur {
    margin: 14px 0 0 0;
    padding: 10px 12px;
    font-size: 13px;
    border-left: 3px solid #1a1a1a;
    background: #f4f1ea;
  }
  .inscription-erreur { border-left-color: #8a1f1f; background: #faeeee; }
  .inscription-erreur a { color: #8a1f1f; }
  .inscription-ligne[hidden],
  .inscription-consentement[hidden] { display: none; }

  .cache {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    border: 0;
  }
  @media screen and (max-width: 480px) {
    .inscription { margin-top: -20px; }
    .inscription-ligne { flex-direction: column; }
  }

  /* ===== Panneau lecteur en CSS pur (:target) ===== */
  .reader {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 14, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .reader:target {
    opacity: 1;
    visibility: visible;
  }

  /* La page derrière ne défile plus quand une lettre est ouverte
     (ordinateur seulement : sur téléphone la lettre s'ouvre en pleine page) */
  @media (hover: hover) and (pointer: fine) {
    html:has(.reader:target),
    body:has(.reader:target) {
      overflow: hidden;
    }
  }

  .reader-panel {
    width: min(560px, 84vw);
    height: 82vh;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    border-radius: 6px;
    /* C'est le panneau qui défile : sur iPhone, Safari agrandit
       l'iframe à la hauteur de la lettre au lieu de la faire défiler */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: scale(0.96);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .reader:target .reader-panel {
    transform: scale(1);
    opacity: 1;
  }

  .reader-panel iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  .reader-actions {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .reader:target .reader-actions {
    transform: scale(1);
    opacity: 1;
  }

  .reader-close,
  .reader-download {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #8a1f1f;
    text-decoration: none;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    font-size: 16px;
  }

  .reader-download { color: #1a1a1a; }

  .reader-close:hover {
    background: #8a1f1f;
    color: #fff;
  }
  .reader-download:hover {
    background: #1a1a1a;
    color: #fff;
  }

  /* Sur téléphone : lettre en plein écran, boutons en haut */
  @media screen and (max-width: 600px) {
    .reader {
      flex-direction: column;
      justify-content: flex-start;
      align-items: stretch;
      gap: 0;
    }
    .reader-actions {
      flex-direction: row;
      justify-content: space-between;
      align-self: stretch;
      margin: 0;
      padding: 10px 14px;
      padding-top: max(10px, env(safe-area-inset-top));
      background: #ffffff;
      border-bottom: 1px solid #1a1a1a;
      transform: none;
    }
    .reader-close,
    .reader-download {
      width: 36px;
      height: 36px;
      box-shadow: none;
      border: 1px solid currentColor;
    }
    .reader-panel {
      flex: 1;
      width: 100%;
      height: auto;
      min-height: 0;
      border-radius: 0;
      box-shadow: none;
      transform: none;
    }
  }

  /* ===== Fond : collage de coupures de journaux ===== */
  .collage {
    position: fixed;
    inset: -2%;
    z-index: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 1fr;
    grid-auto-flow: dense;
    gap: 0;
    background: #cdbf9f;
    pointer-events: none;
    user-select: none;
  }

  .w1 { grid-column: span 1; }
  .w2 { grid-column: span 2; }
  .w3 { grid-column: span 3; }
  .h1 { grid-row: span 1; }
  .h2 { grid-row: span 2; }
  .h3 { grid-row: span 3; }

  .coupure {
    position: relative;
    overflow: hidden;
    min-height: 0;
    padding: 12px 14px;
    color: #1d1a15;
    font-size: 10px;
    line-height: 1.35;
    text-align: justify;
    hyphens: auto;
    box-shadow: 0 3px 8px rgba(0,0,0,0.35);
    transform: rotate(var(--r, 0deg)) scale(1.14);
  }
  .coupure p { margin: 0 0 6px 0; }

  /* Papiers vieillis */
  .papier-beige { background: #e8dcc0; }
  .papier-jaune { background: #efe2bd; }
  .papier-sepia { background: #d9c49c; }
  .papier-gris  { background: #dcd9d1; }
  .papier-blanc { background: #f1ede3; }
  .papier-noir  { background: #161513; color: #f1ede3; }
  .papier-beige, .papier-jaune, .papier-sepia, .papier-gris, .papier-blanc {
    background-image:
      radial-gradient(ellipse at 15% 10%, rgba(255,255,255,0.35), transparent 55%),
      radial-gradient(ellipse at 85% 95%, rgba(110,80,30,0.22), transparent 60%);
  }

  /* Fausses photos en trame (noir et blanc) */
  .photo {
    background: #f1ede3;
    padding: 8px 8px 6px 8px;
    display: flex;
    flex-direction: column;
  }
  .photo-image {
    flex: 1;
    min-height: 0;
    background-color: #2a2824;
    background-image:
      radial-gradient(circle, rgba(241,237,227,0.55) 1px, transparent 1.4px),
      radial-gradient(ellipse at 50% 30%, rgba(241,237,227,0.45), transparent 55%),
      linear-gradient(170deg, #4a4740 0%, #1a1916 70%);
    background-size: 4px 4px, 100% 100%, 100% 100%;
  }
  .photo-claire .photo-image {
    background-color: #b9b3a5;
    background-image:
      radial-gradient(circle, rgba(26,25,22,0.5) 1px, transparent 1.4px),
      repeating-linear-gradient(0deg, transparent 0 18px, rgba(26,25,22,0.35) 18px 19px),
      repeating-linear-gradient(90deg, transparent 0 18px, rgba(26,25,22,0.35) 18px 19px);
    background-size: 4px 4px, auto, auto;
  }
  .legende {
    font-style: italic;
    font-size: 9px;
    margin: 5px 0 0 0 !important;
    text-align: left;
  }

  /* Bords déchirés */
  .dechire   { clip-path: polygon(0 2%, 8% 0, 20% 3%, 33% 0, 47% 2%, 60% 0, 74% 3%, 88% 0, 100% 2%, 98% 30%, 100% 60%, 97% 100%, 80% 97%, 62% 100%, 45% 98%, 28% 100%, 12% 97%, 0 100%, 2% 70%, 0 40%); }
  .dechire-2 { clip-path: polygon(3% 0, 100% 0, 97% 15%, 100% 32%, 96% 50%, 100% 68%, 97% 85%, 100% 100%, 0 100%, 3% 82%, 0 64%, 4% 46%, 0 28%, 3% 12%); }

  /* Colonnes de texte */
  .cols2, .cols3 {
    column-gap: 14px;
    column-rule: 1px solid rgba(0,0,0,0.35);
  }
  .cols2 { column-count: 2; }
  .cols3 { column-count: 3; }
  .papier-noir .cols2 { column-rule-color: rgba(255,255,255,0.4); }

  .lettrine > p:first-child::first-letter {
    float: left;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
    font-size: 34px;
    line-height: 0.85;
    padding: 2px 4px 0 0;
  }

  /* Titres */
  .rubrique {
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    padding: 2px 0;
    text-align: center;
  }
  .titre {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
    font-size: 30px;
    line-height: 1;
    margin: 6px 0 10px 0;
    text-align: center;
  }
  .titre-moyen {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.05;
    margin: 0 0 8px 0;
    text-align: left;
  }
  .titre-petit {
    font-family: 'Old Standard TT', Georgia, serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0 0 6px 0;
    padding-bottom: 4px;
    border-bottom: 2px solid currentColor;
    text-align: left;
  }
  .titre-geant {
    font-family: 'Anton', Impact, sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 0.95;
    text-transform: uppercase;
    margin: 4px 0 10px 0;
    text-align: left;
  }
  .bandeau-new {
    display: inline-block;
    font-family: 'Anton', Impact, sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    background: #f1ede3;
    color: #161513;
    padding: 2px 8px;
  }

  /* Titre du journal */
  .masthead {
    font-family: 'UnifrakturMaguntia', 'Old English Text MT', serif;
    font-size: 40px;
    line-height: 1.1;
    text-align: center;
    margin: 0 !important;
  }
  .sous-masthead {
    text-align: center;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-top: 3px double #1d1a15;
    padding-top: 4px;
  }

  /* Texte à la verticale */
  .vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    height: 100%;
  }
  .vertical .titre-petit {
    border-bottom: 0;
    border-left: 2px solid currentColor;
    padding: 0 0 0 4px;
  }

  /* Petites annonces / pubs */
  .pub { text-align: center; }
  .pub-titre {
    font-family: 'Anton', Impact, sans-serif;
    font-size: 28px;
    line-height: 1;
    text-transform: uppercase;
    margin: 8px 0 4px 0 !important;
  }
  .pub-sous {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    padding: 3px 0;
  }

  .machine {
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: 13px;
    text-align: left;
    display: flex;
    align-items: center;
  }

  .citation {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 13px;
    text-align: left;
  }
  .citation .signature {
    font-style: normal;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: right;
  }

  .tampon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tampon p {
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: 13px;
    color: #8a1f1f;
    border: 2px solid #8a1f1f;
    padding: 6px 10px;
    text-transform: uppercase;
    text-align: center;
    transform: rotate(-8deg);
  }

  /* Lettres découpées façon lettre anonyme */
  .rancon {
    background: #cdbf9f;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 3px;
    box-shadow: none;
  }
  .rancon span {
    display: inline-block;
    padding: 1px 4px;
    font-size: 18px;
    line-height: 1.1;
    background: #f1ede3;
    color: #161513;
    box-shadow: 0 1px 2px rgba(0,0,0,0.35);
  }
  .rancon span:nth-child(3n)   { font-family: 'Anton', Impact, sans-serif; background: #161513; color: #f1ede3; transform: rotate(-6deg); }
  .rancon span:nth-child(3n+1) { font-family: 'Playfair Display', Georgia, serif; font-weight: 900; transform: rotate(4deg); }
  .rancon span:nth-child(3n+2) { font-family: 'Special Elite', monospace; background: #e8dcc0; transform: rotate(-2deg); }
  .rancon span:nth-child(5n)   { font-family: 'UnifrakturMaguntia', serif; background: #d9c49c; }

  /* Tableau des éco-régions */
  .tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
  }
  .tableau th {
    text-align: left;
    font-size: 9px;
    text-transform: uppercase;
    border-bottom: 2px solid #1d1a15;
    padding: 3px 4px;
  }
  .tableau td {
    border-bottom: 1px solid rgba(0,0,0,0.25);
    padding: 3px 4px;
  }

  @media screen and (max-width: 700px) {
    .collage { grid-template-columns: repeat(3, 1fr); }
    .coupure { font-size: 8px; padding: 8px 10px; }
    .titre { font-size: 20px; }
    .titre-geant { font-size: 26px; }
    .titre-moyen { font-size: 15px; }
    .titre-petit { font-size: 11px; }
    .masthead { font-size: 26px; }
    .pub-titre { font-size: 18px; }
    .cols3 { column-count: 2; }
    .rancon span { font-size: 12px; }
  }

  /* ===== Page de confidentialité ===== */
  body:not(:has(.collage)) { background-color: #e8dfcc; }
  .bandeau a { color: inherit; text-decoration: none; }
  .texte-legal h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 28px;
    text-align: center;
    margin: 28px 0 6px 0;
  }
  .texte-legal h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 17px;
    margin: 26px 0 6px 0;
  }
  .texte-legal p,
  .texte-legal li {
    font-size: 14px;
    line-height: 1.6;
    color: #222222;
  }
  .texte-legal p { margin: 0 0 10px 0; }
  .texte-legal ul { margin: 0 0 10px 0; padding-left: 20px; }
  .texte-legal a { color: #8a1f1f; }
  .texte-legal footer a { color: #7a7a7a; }