/* ============================================================================
   One Design a Time — pages d'archives (pièces & contes)
   Reprend strictement les variables et le vocabulaire de style.css :
   fond blanc, encre #0a0a0a, angles carrés, Playfair en titre, Inter en texte.
   Aucune couleur nouvelle n'est introduite.
   ============================================================================ */

.ar{max-width:1180px;margin:0 auto;padding:0 var(--pad) 90px}
.ar--read{max-width:760px}

/* ---- fil d'Ariane ---- */
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:22px 0 0;font-size:.78rem;letter-spacing:.04em;color:var(--mut)}
.crumb a{color:var(--mut);text-decoration:none;border-bottom:1px solid transparent}
.crumb a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.crumb__sep{color:var(--line)}

/* ---- en-tête ---- */
.ar__head{padding:44px 0 34px;border-bottom:1px solid var(--line)}
.ar__kicker{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mut);margin:0 0 14px}
.ar__title{font-family:var(--serif);font-weight:500;line-height:1.08;margin:0;
  font-size:clamp(2rem,4.6vw,3.4rem)}
.ar__title--story{font-style:italic}
.ar__lede{margin:20px 0 0;max-width:62ch;color:var(--mut);font-size:1.02rem;line-height:1.65}

/* ---- bandeau de statut ---- */
.ar__status{display:inline-flex;align-items:center;gap:9px;margin:20px 0 0;padding:9px 15px;
  border:1.5px solid var(--ink);font-size:.82rem;font-weight:500}
.ar__status a{color:inherit}
.ar__status--live{background:var(--ink);color:#fff}
.ar__status--live a{color:#fff}
.ar__status--closed{border-color:var(--line-strong);color:var(--mut);border-style:dashed}

/* ---- galerie ----
   Même langage que la galerie de la home : grille serrée, gouttière de 2px,
   cellules carrées, léger zoom au survol. La photo principale occupe un carré
   double, pour la hiérarchie, sans faire exploser la hauteur de page. */
.ar__gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin:40px 0}
.ar__shot{margin:0;aspect-ratio:1/1;overflow:hidden;background:#f4f4f4}
.ar__shot--lead{grid-column:span 2;grid-row:span 2}
.ar__shot img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease}
.ar__shot:hover img{transform:scale(1.04)}
@media(max-width:860px){.ar__gallery{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.ar__gallery{grid-template-columns:repeat(2,1fr)}}

/* ---- blocs de contenu ---- */
.ar__block{padding:44px 0;border-top:1px solid var(--line)}
.ar__h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.6vw,2.1rem);
  margin:10px 0 22px;line-height:1.2}
.ar__prose{max-width:68ch;line-height:1.78;font-size:1.02rem}
.ar__prose p{margin:0 0 1.15em}
.ar__prose--story{max-width:none;font-size:1.08rem;line-height:1.85;padding:38px 0 10px}
.ar__prose--story p:first-of-type::first-letter{
  font-family:var(--serif);font-size:3.1em;float:left;line-height:.86;padding:.04em .1em 0 0}

/* extrait du conte sur la page pièce : dégradé de coupe, sans JavaScript */
.ar__prose--clamp{position:relative;max-height:340px;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 62%,transparent 100%);
          mask-image:linear-gradient(#000 62%,transparent 100%)}

.ar__epilogue{color:var(--mut)}

/* ---- maillage bas de page ---- */
.ar__near{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;
  padding:30px 0 0;border-top:1px solid var(--line);font-size:.88rem}
.ar__nearlink{text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
.ar__nearlink:hover{border-bottom-color:var(--ink)}
.ar__nearlink--mid{text-align:center;color:var(--mut)}
.ar__near>*:last-child{text-align:right}
@media(max-width:640px){.ar__near{grid-template-columns:1fr;text-align:left}
  .ar__near>*:last-child{text-align:left}}

/* ---- index des pièces ---- */
.ar__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px;padding:40px 0}
.ar__card a{text-decoration:none;color:inherit;display:block}
.ar__cardimg{aspect-ratio:4/5;overflow:hidden;background:#f5f5f5;margin-bottom:14px}
.ar__cardimg img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.ar__card a:hover .ar__cardimg img{transform:scale(1.03)}
.ar__cardref{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0 0 6px}
.ar__cardtitle{font-family:var(--serif);font-weight:500;font-size:1.32rem;margin:0 0 6px;line-height:1.25}
.ar__cardmeta{font-size:.86rem;color:var(--mut);margin:0}

/* ---- index des contes ---- */
.ar__list{padding:26px 0}
.ar__listitem{border-bottom:1px solid var(--line)}
.ar__listitem a{display:block;padding:26px 0;text-decoration:none;color:inherit}
.ar__listitem a:hover .ar__cardtitle{text-decoration:underline;text-underline-offset:4px}