/* ==========================================================================
   Natural Fawaid · Campagne « L’Armielstice » · 11 novembre 2026
   /campagnes/armielstice/armielstice.css · préfixe am-

   Chargé après :
     ../_commun/brand.css     (charte : tokens --nf-*, polices, composants .nf-*)
     ../_commun/campagne.css  (gabarit commun cp-)

   La page est construite avec les composants communs. Ce fichier ajoute
   l’univers de l’affiche : tampons, papier d’archive, grain d’impression,
   légende façon carte ancienne, alvéoles. Les teintes propres à la campagne
   sont déclarées une seule fois ci-dessous (--am-*), tout le reste vient
   de la charte.
   ========================================================================== */

.am-page {
  --am-miel: #F1B363;                       /* soleil de miel de l’affiche */
  --am-grenat: #2A0508;                     /* ciel de l’affiche */
  --am-papier: var(--nf-creme-200);         /* papier d’archive */
  --am-feuille: var(--nf-creme-50);         /* feuille de lettre */
  --am-encre: var(--nf-encre-950);
  --am-encre-2: var(--nf-encre-700);
  --am-sceau: var(--nf-sceau-700);
  --am-filet: rgba(201, 160, 99, 0.32);
  --am-filet-fort: rgba(201, 160, 99, 0.6);
  --am-filet-encre: rgba(91, 74, 55, 0.28);

  /* Grain d’impression, très léger */
  --am-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* Alvéoles façon ruche de l’affiche : cellules pleines, parois claires */
  --am-alveoles: url("./img/alveoles-miel.svg");
}

/* ---------- iOS : zones sûres (encoche, barre d’accueil, paysage) ---------- */
.am-page .cp-wrap {
  padding-left: max(var(--nf-gutter), env(safe-area-inset-left));
  padding-right: max(var(--nf-gutter), env(safe-area-inset-right));
}
.am-page .cp-header {
  height: calc(var(--nf-header-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
}
.am-page .cp-footer { padding-bottom: calc(var(--nf-space-12) + env(safe-area-inset-bottom)); }

.am-center { margin-inline: auto; text-align: center; }

/* ---------- Grain d’impression (calque réutilisable) ---------- */
.am-grain { position: relative; isolation: isolate; }
.am-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background-image: var(--am-grain);
  background-size: 180px 180px;
  opacity: 0.14;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ==========================================================================
   1 · L’AFFICHE
   ========================================================================== */
.am-hero {
  background:
    radial-gradient(70% 50% at 50% 30%, rgba(241, 179, 99, 0.16), transparent 70%),
    var(--nf-glow-hero),
    var(--nf-color-bg);
}
.am-page .cp-hero__title { white-space: nowrap; }
.am-hero__sub { margin: var(--nf-space-4) 0 0; }

/* Cadre : double filet d’or, coins ornés, tampon */
.am-poster__frame {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.am-poster img {
  box-shadow:
    0 0 0 6px var(--nf-color-bg),
    0 0 0 7px var(--am-filet),
    0 0 80px -10px rgba(241, 179, 99, 0.3);
}
.am-poster figcaption { margin-top: var(--nf-space-5); }

.am-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 0 solid var(--nf-color-brand);
  pointer-events: none;
}
.am-corner::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--nf-color-brand);
  transform: rotate(45deg);
}
.am-corner--tl { top: -14px; left: -14px; border-top-width: 1px; border-left-width: 1px; }
.am-corner--tr { top: -14px; right: -14px; border-top-width: 1px; border-right-width: 1px; }
.am-corner--bl { bottom: -14px; left: -14px; border-bottom-width: 1px; border-left-width: 1px; }
.am-corner--br { bottom: -14px; right: -14px; border-bottom-width: 1px; border-right-width: 1px; }
.am-corner--tl::after { top: -4px; left: -4px; }
.am-corner--tr::after { top: -4px; right: -4px; }
.am-corner--bl::after { bottom: -4px; left: -4px; }
.am-corner--br::after { bottom: -4px; right: -4px; }

.am-stamp {
  position: absolute;
  top: -30px;
  right: -12px;
  width: 92px;
  height: 92px;
  color: var(--nf-color-brand-strong);
  transform: rotate(-12deg);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6));
  pointer-events: none;
}
.am-stamp svg { width: 100%; height: 100%; overflow: visible; }
.am-stamp__disc { fill: rgba(13, 10, 7, 0.88); stroke: currentColor; stroke-width: 1.2; }
.am-stamp__ring { fill: none; stroke: currentColor; stroke-width: 0.8; stroke-dasharray: 1.5 2.5; }
.am-stamp text {
  fill: currentColor;
  font-family: var(--nf-font-body);
  font-weight: 700;
  font-size: 9.2px;
  letter-spacing: 0.16em;
}
.am-stamp .am-stamp__big { font-family: var(--nf-font-display); font-weight: 400; font-size: 21px; letter-spacing: 0.02em; }
.am-stamp .am-stamp__small { font-size: 7.4px; letter-spacing: 0.22em; }

/* ==========================================================================
   2 · DE L’ARMISTICE À L’ARMIELSTICE · diptyque d’archives
   ========================================================================== */
.am-diptych { display: grid; gap: var(--nf-space-6); align-items: stretch; }

.am-folio {
  position: relative;
  padding: var(--nf-space-8) var(--nf-space-6);
  border: 1px solid var(--am-filet);
  border-radius: var(--nf-radius-md);
  overflow: hidden;
}
.am-folio__tag {
  display: inline-block;
  margin: 0 0 var(--nf-space-5);
  padding: 0.3rem 0.75rem;
  border: 1px solid currentColor;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.am-folio__word {
  margin: 0;
  font-family: var(--nf-font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 9.6vw, 3.1rem);
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.am-folio__date {
  display: flex;
  align-items: center;
  gap: var(--nf-space-3);
  margin: var(--nf-space-3) 0 var(--nf-space-6);
  font-family: var(--nf-font-display);
  font-size: 1.3rem;
}
.am-folio__date::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.35; }
.am-folio__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 var(--nf-space-6);
  padding: 0;
  list-style: none;
}
.am-folio__list li {
  padding: 0.25rem 0.7rem;
  border-radius: var(--nf-radius-full);
  font-size: var(--nf-text-caption);
  font-weight: 600;
  line-height: 1.4;
}
.am-folio__text { margin: 0; font-size: var(--nf-text-sm); }

/* Hier : la feuille d’archive */
.am-folio--hier {
  background: var(--am-papier);
  color: var(--am-encre);
  border-color: var(--nf-creme-200);
  box-shadow: inset 0 0 60px rgba(120, 80, 40, 0.28);
}
.am-folio--hier::after { opacity: 0.4; mix-blend-mode: multiply; }
.am-folio--hier .am-folio__tag,
.am-folio--hier .am-folio__date,
.am-folio--hier .am-folio__text { color: var(--am-encre-2); }
.am-folio--hier .am-folio__list li { background: rgba(91, 74, 55, 0.1); color: var(--am-encre); }

/* Aujourd’hui : la lumière du miel */
.am-folio--aujourdhui {
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 85% 0%, rgba(241, 179, 99, 0.2), transparent 65%),
    var(--nf-gradient-card);
  color: var(--nf-color-text);
  border-color: var(--am-filet-fort);
}
.am-folio--aujourdhui::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--am-alveoles);
  background-size: 30px 52px;
  opacity: 0.12;
  -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 55%);
  mask-image: linear-gradient(200deg, #000 0%, transparent 55%);
  pointer-events: none;
}
.am-folio--aujourdhui > * { position: relative; }
.am-folio--aujourdhui .am-folio__tag,
.am-folio--aujourdhui .am-folio__date,
.am-folio--aujourdhui .am-folio__word { color: var(--nf-color-brand-strong); }
.am-folio--aujourdhui .am-folio__list li { background: var(--nf-color-tint); border: 1px solid var(--nf-color-border); }
.am-folio--aujourdhui .am-folio__text { color: var(--nf-color-text-muted); }
.am-miel { color: var(--am-miel); }

/* Médaillon « 11 » */
.am-medal {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 92px;
  height: 104px;
  margin: calc(-1 * var(--nf-space-2)) auto;
  color: var(--nf-color-brand-strong);
}
.am-medal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.am-medal__outer { fill: var(--nf-color-bg-alt); stroke: currentColor; stroke-width: 1.2; }
.am-medal__inner { fill: none; stroke: currentColor; stroke-width: 0.7; opacity: 0.6; }
.am-medal__num {
  position: relative;
  margin: 0;
  font-family: var(--nf-font-display);
  font-size: 2.1rem;
  line-height: 1;
  text-align: center;
}
.am-medal__num small {
  display: block;
  margin-top: 2px;
  font-family: var(--nf-font-body);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

#armistice .cp-question { margin-top: var(--nf-space-12); }

/* ==========================================================================
   3 · NOTRE FRONT À NOUS · papier d’archive, lettre, tampon
   ========================================================================== */
.am-paper {
  background: var(--am-papier);
  box-shadow: inset 0 0 120px rgba(110, 70, 35, 0.3);
}
.am-paper.am-grain::after { opacity: 0.42; mix-blend-mode: multiply; }

.am-letter {
  position: relative;
  padding: var(--nf-space-8) var(--nf-space-6);
  background: var(--am-feuille);
  border: 1px solid var(--am-filet-encre);
  border-radius: var(--nf-radius-md);
  box-shadow: 0 24px 40px -28px rgba(60, 30, 10, 0.55);
  color: var(--am-encre-2);
}
.am-letter::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(91, 74, 55, 0.16);
  border-radius: var(--nf-radius-sm);
  pointer-events: none;
}
.am-letter > p:not(.am-tampon) { margin: 0 0 var(--nf-space-4); }
.am-letter__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  padding-bottom: var(--nf-space-3);
  border-bottom: 1px solid var(--am-filet-encre);
  margin-bottom: var(--nf-space-6) !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.am-letter .am-letter__lead {
  margin-bottom: var(--nf-space-5);
  font-family: var(--nf-font-display);
  font-size: clamp(1.45rem, 5.6vw, 1.85rem);
  line-height: 1.2;
  color: var(--am-encre);
}

.am-register {
  margin: var(--nf-space-6) 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--am-filet-encre);
}
.am-register li {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--am-filet-encre);
}
.am-register__num {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--am-sceau);
}
.am-register__word {
  font-family: var(--nf-font-display);
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--am-encre);
}

.am-tampon {
  position: absolute;
  top: -18px;
  right: 14px;
  z-index: 1;
  margin: 0;
  padding: 0.45rem 0.8rem 0.4rem;
  border: 2px solid var(--am-sceau);
  outline: 1px solid var(--am-sceau);
  outline-offset: 2px;
  background: var(--am-feuille);
  color: var(--am-sceau);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-5deg);
  opacity: 0.92;
}

.am-legend-note {
  margin: var(--nf-space-6) 0 0 !important;
  padding-top: var(--nf-space-4);
  border-top: 1px dashed rgba(91, 74, 55, 0.35);
  font-size: var(--nf-text-caption);
}
.am-legend-note strong { font-family: var(--nf-font-display); font-weight: 400; font-size: 1.1rem; color: var(--am-encre); }

/* ==========================================================================
   4 · NOTRE FRATRIE · légende façon carte d’état-major
   ========================================================================== */
.am-quote { margin: 0 auto var(--nf-space-12); max-width: 40rem; }

.am-legend {
  position: relative;
  max-width: 46rem;
  margin: 0 auto var(--nf-space-14);
  padding: var(--nf-space-6) var(--nf-space-5);
  border: 1px solid var(--am-filet);
  outline: 1px solid rgba(201, 160, 99, 0.14);
  outline-offset: 5px;
  border-radius: var(--nf-radius-md);
  background: rgba(13, 10, 7, 0.55);
}
.am-legend__title {
  margin: 0 0 var(--nf-space-4);
  text-align: center;
  font-family: var(--nf-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--nf-color-brand-text);
}
.am-legend dl { margin: 0; }
.am-legend__row {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--am-filet);
}
.am-legend dt {
  font-family: var(--nf-font-display);
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--nf-color-brand-strong);
}
.am-legend dd { margin: 0; color: var(--nf-color-text); }

.am-merci { margin-bottom: 0; }
.am-merci .am-merci__word {
  margin: 0 0 var(--nf-space-6);
  font-family: var(--nf-font-display);
  font-size: var(--nf-text-h1);
  line-height: var(--nf-leading-h1);
  color: var(--nf-color-brand-strong);
}

/* ==========================================================================
   5 · LE MIEL
   ========================================================================== */
#le-miel { overflow: hidden; isolation: isolate; }
#le-miel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--am-alveoles);
  background-size: 40px 69px;
  opacity: 0.07;
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 20%, #000 100%);
  pointer-events: none;
}
.am-timeline { margin: var(--nf-space-2) 0 var(--nf-space-8); }
.am-miel__actions { margin-top: 0; }

/* ==========================================================================
   6 · REMERCIEMENT FINAL · sobre, avec le sceau posé sur la ruche en miel
   ========================================================================== */
.am-dedication {
  margin: 0 auto var(--nf-space-10);
  padding: 0;
  list-style: none;
  font-family: var(--nf-font-display);
  font-size: clamp(1.2rem, 4.6vw, 1.55rem);
  line-height: 1.5;
  color: var(--nf-color-text-muted);
}

.am-final__title {
  display: block;
  margin: 0 auto;
  font-size: clamp(2.6rem, 11vw, 5.25rem);
  text-wrap: balance;
}

.am-sign {
  display: grid;
  justify-items: center;
  gap: var(--nf-space-2);
  margin-top: var(--nf-space-10);
}
.am-sign .nf-h3 { margin-top: var(--nf-space-2); }

/* La ruche en miel de l'affiche, le sceau au centre */
.am-egg {
  position: relative;
  width: 170px;
  aspect-ratio: 200 / 240;
}
.am-egg__hive {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 28px rgba(241, 179, 99, 0.35));
}
.am-egg__seal {
  position: absolute;
  left: 50%;
  top: 51%;
  width: 40%;
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
}

/* ==========================================================================
   ≥ 640px · tablette
   ========================================================================== */
@media (min-width: 640px) {
  .am-stamp { width: 112px; height: 112px; top: -40px; right: -38px; }
  .am-folio { padding: var(--nf-space-10) var(--nf-space-8); }
  .am-letter { padding: var(--nf-space-10); }
  .am-legend { padding: var(--nf-space-8) var(--nf-space-10); }
  .am-legend__row { grid-template-columns: 15rem 1fr; gap: var(--nf-space-6); align-items: baseline; }
}

/* ==========================================================================
   ≥ 960px · desktop
   ========================================================================== */
@media (min-width: 960px) {
  .am-page .cp-hero__title { font-size: clamp(3.4rem, 5.6vw, 4.6rem); }
  .am-poster__frame { margin-right: 0; }

  .am-diptych { grid-template-columns: 1fr auto 1fr; gap: 0; align-items: center; }
  .am-folio { height: 100%; }
  .am-medal { margin: 0 -14px; width: 100px; height: 114px; }
  .am-medal__num { font-size: 2.4rem; }

  .am-final__title { white-space: nowrap; }
  .am-egg { width: 200px; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .am-stamp, .am-tampon { transition: none; }
}

/* ---------- Export PDF ---------- */
.pdf-mode .am-grain::after,
.pdf-mode .am-folio--aujourdhui::before,
.pdf-mode #le-miel::before { display: none; }
.pdf-mode .am-poster img,
.pdf-mode .am-letter,
.pdf-mode .am-paper,
.pdf-mode .am-folio--hier { box-shadow: none; }
.pdf-mode .am-stamp,
.pdf-mode .am-egg__hive,
.pdf-mode .am-egg__seal { filter: none; }