/* =========================================================
   MANIFESTATIONS 2012 — CSS "PUNCHY PRO"
   - palette cohérente via variables
   - cartes plus premium + liseré signature
   - boutons/archives plus nets
   - masonry adaptatif (hauteur selon contenu)
   ========================================================= */

:root{
  --m12-ink:#121212;
  --m12-muted:#3b3b3b;
  --m12-soft:#f4f4f4;
  --m12-paper:#ffffff;

  --m12-green:#0f6b5f;
  --m12-green-2:#1aa07f;
  --m12-yellow:#ffeb73;
  --m12-yellow-2:#ffd94a;
  --m12-accent:#ea5f1c; /* rappel tomate */

  --m12-border: rgba(0,0,0,.22);
  --m12-border-strong: rgba(0,0,0,.34);

  --m12-shadow: 0 12px 26px rgba(0,0,0,.14);
  --m12-shadow-hover: 0 18px 42px rgba(0,0,0,.20);

  --m12-radius: 18px;
  --m12-radius-in: 14px;
}

/* Wrapper */
.m12w{
  max-width: 1140px;
  margin: 0 auto;
  padding: 22px 14px 28px;
}

/* Titre */
.m12title{
  text-align: center;
  margin: 0 0 16px 0;
}
.m12title h3{
  margin:0;
  font-size: 26px;
  line-height: 1.12;
  color: var(--m12-green);
  letter-spacing: .2px;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.m12title p{
  margin: 8px 0 0 0;
  font-size: 14px;
  color: var(--m12-muted);
  opacity: .9;
}

/* Masonry : vignettes ajustables */
.m12masonry{
  column-count: 3;
  column-gap: 18px;
}

/* Responsive */
@media (max-width: 1060px){
  .m12masonry{ column-count: 2; }
}
@media (max-width: 700px){
  .m12masonry{ column-count: 1; }
  .m12w{ padding: 16px 10px 22px; }
  .m12title h3{ font-size: 22px; }
}

/* Carte */
.m12card{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;

  display:block;
  margin: 0 0 18px 0;
  background: linear-gradient(180deg, var(--m12-paper) 0%, #fbfbfb 100%);
  border: 2px solid var(--m12-border);
  border-radius: var(--m12-radius);
  overflow:hidden;
  box-shadow: var(--m12-shadow);
  position: relative;
  transform: translateZ(0);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* Liseré signature (punch sans faire “kermesse”) */
.m12card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 4px;
  background: linear-gradient(180deg, var(--m12-accent), var(--m12-yellow-2));
  opacity: .95;
}

.m12card:hover{
  transform: translateY(-3px);
  border-color: var(--m12-border-strong);
  box-shadow: var(--m12-shadow-hover);
}

/* Zone image */
.m12img{
  display:block;
  padding: 12px;
  background:
    radial-gradient(1200px 200px at 30% 0%, rgba(255,235,115,.35), rgba(255,255,255,0)),
    linear-gradient(135deg, #f2f2f2 0%, #e9e9e9 100%);
  border-bottom: 2px solid rgba(0,0,0,.10);
}

/* Image : pas de rognage, limite hauteur, look premium */
.m12img img{
  width:100%;
  height:auto;
  display:block;
  border-radius: var(--m12-radius-in);
  border: 2px solid rgba(0,0,0,.20);
  background: #fff;
  object-fit: contain;
  max-height: 310px;
  box-shadow: 0 10px 20px rgba(0,0,0,.14);
}

/* Contenu */
.m12content{
  padding: 14px 14px 16px;
  color: var(--m12-ink);
}
.m12content h4{
  margin: 0;
  font-size: 16.5px;
  line-height: 1.25;
  color: var(--m12-ink);
}
.m12meta{
  margin: 8px 0 10px 0;
  font-size: 13px;
  color: var(--m12-muted);
  opacity: .88;
}
.m12content p{
  margin: 0 0 10px 0;
  line-height: 1.62;
  color: #1e1e1e;
}

/* Liens : pastilles plus “clean” */
.m12links{
  display:flex;
  flex-wrap:wrap;
  gap: 9px;
  margin-top: 8px;
}
.m12links a{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding: 8px 11px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.18);
  background: #fff;
  color: #111;
  text-decoration: none;
  font-size: 12.8px;
  line-height: 1;
  font-weight: 800;

  box-shadow: 0 8px 14px rgba(0,0,0,.10);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}

/* Hover plus “tomodori” */
.m12links a:hover{
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.30);
  background: linear-gradient(180deg, #ffffff 0%, #f4fff9 100%);
  box-shadow: 0 12px 22px rgba(0,0,0,.16);
}

/* Focus clavier */
.m12links a:focus-visible,
.m12forum:focus-visible,
.m12arch a:focus-visible{
  outline: 3px solid rgba(26,160,127,.45);
  outline-offset: 2px;
}

/* Footer archives */
.m12foot{
  margin-top: 18px;
  background:
    radial-gradient(1000px 220px at 50% 0%, rgba(26,160,127,.12), rgba(255,255,255,0)),
    linear-gradient(180deg, #ffffff 0%, #f2f2f2 100%);
  border: 2px solid var(--m12-border);
  border-radius: var(--m12-radius);
  padding: 16px 14px;
  box-shadow: 0 16px 34px rgba(0,0,0,.16);
}

/* CTA forum : plus “bouton” */
.m12forum{
  display:inline-block;
  padding: 11px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--m12-yellow) 0%, var(--m12-yellow-2) 100%);
  border: 2px solid rgba(0,0,0,.30);
  color: #111;
  text-decoration:none;
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: 0 10px 20px rgba(0,0,0,.14);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.m12forum:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(0,0,0,.18);
  filter: saturate(1.05);
}

/* Archives en chips */
.m12arch{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  justify-content:center;
}
.m12arch a{
  display:inline-flex;
  align-items:center;

  padding: 9px 12px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.18);
  background: #fff;
  color: #111;
  text-decoration:none;
  font-weight: 850;
  font-size: 13px;

  box-shadow: 0 8px 16px rgba(0,0,0,.10);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}
.m12arch a:hover{
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.30);
  background: linear-gradient(180deg, #ffffff 0%, #f1fff7 100%);
  box-shadow: 0 12px 22px rgba(0,0,0,.16);
}

/* Date */
.m12upd{
  margin-top: 10px;
  font-size: 12px;
  color: #111;
  opacity: .70;
  text-align:right;
  font-style: italic;
}

/* Animations : réduction si demandé */
@media (prefers-reduced-motion: reduce){
  .m12card, .m12links a, .m12forum, .m12arch a{
    transition:none;
  }
}