/* AMIS RECHERCHÉS — styles.css
   Look : mur d'avis de disparition municipal. Panneau sombre, affiches en papier kraft vieilli,
   punaisées/scotchées, tampons rouges, machine à écrire. FR. WCAG-AA, responsive, reduced-motion. */

:root{
  --board:#20261f;          /* panneau (vert-gris sombre) */
  --board-2:#171c16;
  --paper:#efe4c8;          /* affiche kraft clair */
  --paper-2:#e6d8b6;
  --paper-edge:#cdbb90;
  --ink:#1c1712;            /* encre quasi noire */
  --ink-soft:#4a4031;
  --red:#c0302a;            /* tampon DISPARU / officiel */
  --red-deep:#8f221d;
  --green:#2f7d54;          /* RETROUVÉ */
  --blue:#2d4a7a;           /* note Pelos */
  --plum:#7a2d5a;           /* note Rita */
  --gold:#b8892f;
  --maxw:1160px;
  --r:3px;
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(1200px 500px at 50% -80px, rgba(255,255,255,.04), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 2px, transparent 2px 46px),
    linear-gradient(var(--board), var(--board-2));
  background-attachment: fixed;
  line-height:1.5;
}
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px }
em{ font-style:italic }

/* ---------- bandeau défilant ---------- */
.tape{ overflow:hidden; background:var(--red); border-bottom:3px solid var(--ink);
  color:#f4ecd8; font-family:"Special Elite",monospace; letter-spacing:.14em; font-size:13px }
.tape__track{ display:inline-flex; gap:26px; white-space:nowrap; padding:7px 0; animation:slide 26s linear infinite }
.tape__track span{ opacity:.95 }
@keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- header ---------- */
.hd{ border-bottom:1px solid rgba(255,255,255,.08) }
.hd__in{ max-width:var(--maxw); margin:0 auto; padding:16px 20px; display:flex; align-items:center;
  justify-content:space-between; gap:16px; flex-wrap:wrap }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:#f1e8d2 }
.brand__seal{ width:42px; height:42px; display:grid; place-items:center; background:var(--red);
  color:#f4ecd8; font-family:"Anton",sans-serif; font-size:26px; border:2px solid #f4ecd8; border-radius:2px;
  box-shadow:0 2px 0 rgba(0,0,0,.4); transform:rotate(-4deg) }
.brand__txt{ font-family:"Anton",sans-serif; font-size:20px; line-height:.92; letter-spacing:.02em }
.hd__meta{ font-family:"Special Elite",monospace; font-size:12px; color:#b9b09a; letter-spacing:.08em }

/* ---------- hero ---------- */
.hero{ padding:54px 0 30px }
.hero__in{ max-width:820px }
.kick{ font-family:"Special Elite",monospace; text-transform:uppercase; letter-spacing:.18em;
  font-size:12.5px; color:var(--red); background:rgba(192,48,42,.12); display:inline-block;
  padding:5px 10px; border:1px solid rgba(192,48,42,.45); border-radius:2px }
.hero h1{ font-family:"Anton",sans-serif; font-weight:400; color:#f4ecd6; letter-spacing:.01em;
  font-size:clamp(34px,6vw,64px); line-height:.98; margin:16px 0 14px; text-transform:uppercase }
.hero__q{ color:var(--red); }
.hero__lede{ color:#ded4bc; font-size:clamp(15px,1.9vw,18px); max-width:62ch }
.hero__lede em{ color:#f4ecd6; font-style:normal; border-bottom:2px solid var(--red) }
.hero__note{ margin-top:18px; font-family:"Special Elite",monospace; color:#b9b09a; font-size:14px;
  border-left:3px solid var(--gold); padding-left:12px }

/* ---------- mur (grille d'affiches) ---------- */
.mur-sec{ padding:14px 0 40px }
.mur{ display:grid; gap:34px 26px; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); align-items:start }

.card{ position:relative; display:block; cursor:pointer; border:none; background:none; padding:0;
  transition:transform .18s ease; will-change:transform }
.card__carton{ width:100%; height:auto; display:block; border-radius:2px;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.5)) }
.card__hint{ position:absolute; left:0; right:0; bottom:12px; text-align:center; opacity:0;
  font-family:"Special Elite",monospace; font-size:12px; letter-spacing:.08em; color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.9); transition:opacity .18s ease; pointer-events:none }
.card:nth-child(3n)   { transform:rotate(.6deg) }
.card:nth-child(3n+1) { transform:rotate(-.7deg) }
.card:hover,.card:focus-visible{ transform:rotate(0) translateY(-8px); outline:none; z-index:2 }
.card:hover .card__hint,.card:focus-visible .card__hint{ opacity:1 }
.card:focus-visible .card__carton{ filter:drop-shadow(0 0 0 3px var(--gold)) drop-shadow(0 14px 24px rgba(0,0,0,.5)) }

/* .card__img* + .stamp* ci-dessous restent utilisés par la modale (avis agrandi) */
.card__img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(.32) contrast(1.02) }
.card__img--missing{ display:grid; place-items:center; gap:8px; color:#8a7c5b;
  background:repeating-linear-gradient(45deg,#d9cba6 0 12px,#d2c39b 12px 24px) }
.card__img--missing svg{ width:46%; fill:none; stroke:#8a7c5b; stroke-width:5; opacity:.7 }
.card__missing-lbl{ font-family:"Special Elite",monospace; font-size:12px; letter-spacing:.12em }
.card__img--bande{ display:grid; place-items:center; background:var(--ink); color:var(--red) }
.card__img--bande span{ font-family:"Anton",sans-serif; font-size:90px; opacity:.85 }

/* tampons */
.stamp{ position:absolute; bottom:12px; right:-6px; z-index:3; font-family:"Anton",sans-serif;
  font-size:21px; letter-spacing:.06em; padding:5px 12px; border:3px solid currentColor; border-radius:3px;
  transform:rotate(-11deg); opacity:.82; text-transform:uppercase; background:rgba(239,228,200,.14);
  box-shadow:inset 0 0 0 1px currentColor }
.stamp--missing{ color:var(--red-deep) }
.stamp--found{ color:var(--green); bottom:auto; top:38px; right:10px; font-size:24px }
.stamp--soft{ color:#6a5c3f; font-size:15px; border-width:2px }
.stamp--fic{ color:var(--gold); font-size:16px }
.stamp--open{ color:var(--red); }

/* carte cachée LA BANDE (le reveal) */
.card--cache{ grid-column:1/-1; max-width:430px; margin:16px auto 0 }
.card--cache .bande{ background:var(--ink); border:3px solid var(--red); border-radius:4px; aspect-ratio:3/4;
  display:grid; place-content:center; gap:8px; text-align:center; padding:24px;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.5)) }
.card--cache .bande__q{ font-family:"Anton",sans-serif; font-size:96px; color:var(--red); line-height:.85 }
.card--cache .bande__name{ font-family:"Anton",sans-serif; color:#f4ecd6; margin:0; font-size:34px; letter-spacing:.02em }
.card--cache .bande__hint{ font-family:"Special Elite",monospace; font-size:12px; color:#b9b09a; letter-spacing:.08em }

/* archives */
.mur__more{ text-align:center; margin-top:40px }
.archbtn{ font-family:"Special Elite",monospace; letter-spacing:.1em; font-size:14px; color:#e7ddc4;
  background:transparent; border:1px dashed rgba(231,221,196,.5); padding:12px 22px; border-radius:3px;
  cursor:pointer; transition:.18s }
.archbtn:hover{ background:rgba(231,221,196,.08); border-color:#e7ddc4 }

/* ---------- footer ---------- */
.ft{ border-top:1px solid rgba(255,255,255,.08); padding:44px 0 60px; margin-top:20px }
.ft__manifesto{ max-width:70ch; margin:0 auto; text-align:center; color:#ece2c8;
  font-size:clamp(17px,2.4vw,22px); line-height:1.45 }
.ft__ps{ max-width:60ch; margin:18px auto 0; text-align:center; font-family:"Special Elite",monospace;
  color:var(--red); font-size:14px }
.ft__disc{ max-width:64ch; margin:26px auto 0; text-align:center; color:#948a72; font-size:12.5px }

/* ---------- modal (avis agrandi) ---------- */
.noscroll{ overflow:hidden }
.modal{ position:fixed; inset:0; z-index:50; display:none; align-items:flex-start; justify-content:center;
  background:rgba(10,12,9,.8); backdrop-filter:blur(3px); padding:30px 16px; overflow:auto }
.modal.open{ display:flex }
.modal__box{ position:relative; width:100%; max-width:720px; background:linear-gradient(160deg,var(--paper),var(--paper-2));
  border:1px solid var(--paper-edge); border-radius:4px; padding:22px; margin:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.6); animation:pop .22s ease }
@keyframes pop{ from{transform:translateY(14px) scale(.98); opacity:0} to{transform:none; opacity:1} }
.modal__x{ position:absolute; top:8px; right:10px; width:38px; height:38px; border:none; background:transparent;
  font-size:30px; line-height:1; color:var(--ink); cursor:pointer; border-radius:50% }
.modal__x:hover{ background:rgba(0,0,0,.08) }

.avis__head{ display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:center;
  border-bottom:3px double var(--ink); padding-bottom:14px; position:relative }
.avis__banner{ position:absolute; top:-6px; left:0; right:0; text-align:center; color:var(--red-deep);
  font-family:"Special Elite",monospace; font-size:12px; letter-spacing:.24em }
.avis__portrait{ position:relative; margin-top:14px; border:1px solid var(--paper-edge); background:#d9cba6;
  aspect-ratio:4/5; overflow:hidden }
.avis__portrait .stamp{ font-size:15px; bottom:6px }
.avis__portrait .stamp--found{ top:10px }
.avis__alias{ font-family:"Special Elite",monospace; font-size:13px; color:var(--ink-soft); margin-top:14px }
.avis__name{ font-family:"Anton",sans-serif; font-weight:400; text-transform:uppercase; color:var(--ink);
  font-size:clamp(30px,6vw,52px); line-height:.9; margin:2px 0 0 }

.avis__fields{ margin:16px 0 }
.f{ display:grid; grid-template-columns:200px 1fr; gap:10px; padding:10px 0; border-bottom:1px dotted var(--paper-edge) }
.f__k{ font-family:"Special Elite",monospace; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--red-deep) }
.f__v{ font-size:15px; color:var(--ink) }
.avis__recit{ background:rgba(120,90,40,.08); border:1px solid var(--paper-edge); border-radius:3px; padding:14px 16px }
.avis__recit-k{ font-family:"Special Elite",monospace; font-size:12px; letter-spacing:.08em; color:var(--ink-soft);
  text-transform:uppercase; margin-bottom:6px }
.avis__recit p{ margin:0; font-size:15.5px; line-height:1.62 }
.avis--sincere .avis__recit{ background:rgba(47,125,84,.09); border-color:rgba(47,125,84,.35) }
.avis__co{ margin:0 0 14px; float:right; width:150px; }
.avis__co img{ width:100%; border:1px solid var(--paper-edge); background:#d9cba6; filter:grayscale(.32) contrast(1.02);
  box-shadow:0 4px 10px rgba(0,0,0,.25); transform:rotate(2deg) }
.avis__co figcaption{ font-family:"Special Elite",monospace; font-size:11px; color:var(--ink-soft); margin-top:6px;
  text-align:center; line-height:1.3 }
@media (max-width:620px){ .avis__co{ float:none; width:140px; margin:0 auto 14px } }
.avis--sincere .f__k{ color:#3d6b4f }

/* notes de marge (easter-egg Pelos↔Rita) */
.marges{ margin-top:16px; display:flex; flex-direction:column; gap:8px }
.marge{ font-family:"Special Elite",monospace; font-size:14px; padding:8px 12px; border-radius:2px;
  max-width:92%; position:relative }
.marge--pelos{ align-self:flex-start; color:#fff; background:var(--blue); transform:rotate(-1.2deg) }
.marge--rita{ align-self:flex-end; color:#fff; background:var(--plum); transform:rotate(1.2deg) }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease }
.reveal.in{ opacity:1; transform:none }
.card.reveal{ transition:opacity .5s ease, transform .5s ease, box-shadow .18s ease }
/* la rotation "punaisée" ne s'applique qu'une fois révélé */
.card.reveal:not(.in){ transform:translateY(16px) !important }

/* ---------- responsive ---------- */
@media (max-width:620px){
  .avis__head{ grid-template-columns:1fr; text-align:center }
  .avis__portrait{ max-width:200px; margin:14px auto 0 }
  .f{ grid-template-columns:1fr; gap:2px }
  .hd__meta{ display:none }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .tape__track{ animation:none }
  .reveal{ opacity:1; transform:none; transition:none }
  .card,.card:nth-child(3n),.card:nth-child(3n+1),.card:nth-child(4n){ transform:none }
  .card:hover,.card:focus-visible{ transform:translateY(-3px) }
  .modal__box{ animation:none }
}