/* ===========================================================
   articles.css : pages Actualité (articles.html) & Article (article.html)
   Thème neutre crème (pas de data-theme) : --bg crème, --fg ink, --accent bleu.
   Lié APRÈS styles.css. Ne modifie pas styles.css.
   =========================================================== */

/* ---------- Méta commune (catégorie · date) ---------- */
.art-meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  font-family:'Parkinsans',sans-serif;font-weight:500;
  font-size:12px;letter-spacing:.04em;
}
.art-cat{
  color:var(--accent);
  text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:600;
}
.art-meta time,
.art-readtime{opacity:.6}
.art-sep{opacity:.4}

/* =================================================================
   ARTICLES.HTML : liste
   ================================================================= */

/* ---------- Hero : copy (gauche) + article à la une en carte (droite) ---------- */
.art-hero{padding:clamp(56px,9vh,104px) 0 clamp(44px,6vh,76px)}
.art-hero-grid{
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(36px,5vw,72px);align-items:center;
}
.art-hero-copy{max-width:56ch}
.art-hero .s-title{margin-bottom:24px}
.art-hero-body{max-width:54ch}
.art-hero-body p + p{margin-top:14px}

/* ---------- Article à la une (carte verticale dans le hero) ---------- */
.art-feature-card{
  display:flex;flex-direction:column;color:inherit;
  background:color-mix(in srgb, var(--fg) 4%, var(--bg));
  border:1px solid color-mix(in srgb, var(--fg) 9%, transparent);
  border-radius:26px;overflow:hidden;
  box-shadow:0 36px 90px -55px rgba(10,20,50,.5);
  transition:transform .45s cubic-bezier(.2,.6,.2,1),box-shadow .45s ease;
}
.art-feature-card:hover{
  transform:translateY(-5px);
  box-shadow:0 50px 110px -50px rgba(10,20,50,.55);
}
.art-feature-media{
  position:relative;aspect-ratio:16/10;overflow:hidden;
}
.art-feature-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.art-feature-card:hover .art-feature-media img{transform:scale(1.05)}
.art-feature-flag{
  position:absolute;top:16px;left:16px;z-index:2;
  display:inline-flex;align-items:center;
  padding:7px 14px;border-radius:999px;
  background:var(--accent);color:#fff;
  font-family:'Parkinsans',sans-serif;font-weight:600;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 10px 24px -12px rgba(10,20,50,.5);
}
.art-feature-body{
  display:flex;flex-direction:column;flex:1;
  padding:clamp(24px,2.4vw,38px);
}
.art-feature-title{
  font-family:'Londrina Solid',serif;font-weight:400;
  font-size:clamp(26px,2.3vw,38px);line-height:1.07;letter-spacing:-.005em;
  margin:14px 0 14px;
}
.art-feature-excerpt{
  font-family:'Parkinsans',sans-serif;font-weight:300;
  font-size:clamp(15px,1.1vw,17px);line-height:1.62;
  margin:0;opacity:.88;
}
.art-feature-link{margin-top:24px;align-self:flex-start}

/* ---------- Barre de filtres par catégorie (style aligné sur la Galerie) ---------- */
.art-filters{
  display:flex;flex-wrap:wrap;gap:10px;
  margin:0 0 clamp(26px,3.5vh,38px);
}
.art-filter{
  font-family:'Parkinsans',sans-serif;font-weight:500;
  font-size:13px;letter-spacing:.06em;
  padding:10px 20px;border-radius:999px;
  color:var(--fg);cursor:pointer;
  border:1.5px solid color-mix(in srgb,var(--fg) 26%,transparent);
  background:transparent;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.art-filter:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--fg) 50%,transparent)}
.art-filter.is-active{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.art-card.is-hidden{display:none}

/* ---------- Grille d'articles ---------- */
.art-list{padding-top:clamp(30px,5vh,56px)}
.art-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,2.6vw,40px);
}
.art-card{
  position:relative;
  background:color-mix(in srgb, var(--fg) 4%, var(--bg));
  border:1px solid color-mix(in srgb, var(--fg) 9%, transparent);
  border-radius:22px;overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.6,.2,1),box-shadow .4s ease;
}
.art-card:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 70px -45px rgba(10,20,50,.4);
}
.art-card-link{display:flex;flex-direction:column;height:100%;color:inherit}
.art-card-media{position:relative;aspect-ratio:16/10;overflow:hidden}
.art-card-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.art-card:hover .art-card-media img{transform:scale(1.05)}
.art-card-body{
  display:flex;flex-direction:column;flex:1;
  padding:clamp(20px,1.8vw,26px);
}
.art-card-title{
  font-family:'Londrina Solid',serif;font-weight:400;
  font-size:clamp(20px,1.7vw,25px);line-height:1.12;letter-spacing:-.003em;
  margin:14px 0 12px;
}
.art-card-excerpt{
  font-family:'Parkinsans',sans-serif;font-weight:300;
  font-size:14.5px;line-height:1.6;opacity:.86;
  margin:0 0 18px;
}
.art-card-cta{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:7px;
  font-family:'Parkinsans',sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);position:relative;padding-bottom:4px;
}
.art-card-cta::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(.5);transform-origin:left;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.art-card:hover .art-card-cta::after{transform:scaleX(1)}

/* ---------- CTA intermédiaire (page Mariage) : sans carte, lavande animée au-dessus du bouton ---------- */
.art-cta-mariage{padding-top:clamp(30px,5vh,56px)}
.art-cta-text{max-width:760px;margin:0 auto;text-align:center}
.art-cta-text .s-title{max-width:none;margin-bottom:20px}
.art-cta-text .s-body{max-width:58ch;margin:0 auto}
.art-cta-illu{width:min(560px,86%);margin:clamp(26px,4vh,44px) auto clamp(4px,1.4vh,14px)}
.art-cta-illu .lavfield{
  width:100%;height:auto;display:block;
  transform-box:fill-box;transform-origin:50% 100%;
  animation:illuWind 4.8s ease-in-out infinite;
}
.art-cta-text .btn-line{margin-top:clamp(8px,1.8vh,16px)}
@media(prefers-reduced-motion:reduce){.art-cta-illu .lavfield{animation:none}}

/* =================================================================
   ARTICLE.HTML : gabarit détail
   ================================================================= */
.art-single-wrap{max-width:1260px;margin:0 auto}

/* ---------- En-tête d'article : grand hero 2 colonnes (texte gauche + image droite ~66vh) ---------- */
.art-single-head{padding:clamp(18px,3vh,34px) 0 clamp(40px,6vh,68px)}
.art-single-hero{
  display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(32px,4.5vw,64px);align-items:center;
}
.art-single-cover{
  margin:0;border-radius:24px;overflow:hidden;
  height:clamp(460px,74vh,860px);
  box-shadow:0 40px 100px -55px rgba(10,20,50,.55);
}
.art-single-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.art-single-cover:hover img{transform:scale(1.03)}
.art-back{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Parkinsans',sans-serif;font-weight:500;
  font-size:13px;letter-spacing:.02em;color:inherit;opacity:.72;
  margin-bottom:clamp(24px,3.5vh,40px);
  transition:opacity .25s,gap .3s;
}
.art-back:hover{opacity:1;gap:11px}
.art-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.art-single-meta{margin-bottom:20px}
.art-single-title{
  font-family:'Londrina Solid',serif;font-weight:400;
  font-size:clamp(30px,3.3vw,46px);line-height:1.05;letter-spacing:-.006em;
  margin:0 0 20px;
}
.art-single-lead{
  font-family:'Parkinsans',sans-serif;font-weight:300;
  font-size:clamp(17px,1.5vw,21px);line-height:1.55;
  max-width:54ch;margin:0;opacity:.92;
}

/* ---------- Corps éditorial : encadré dans un liseré léger, sous le hero ---------- */
.art-single-body{padding-bottom:clamp(48px,7vh,84px)}
.art-single-frame{
  border:1px solid color-mix(in srgb,var(--fg) 13%,transparent);
  border-radius:26px;
  padding:clamp(30px,4vw,64px) clamp(24px,4vw,60px);
  background:color-mix(in srgb,var(--fg) 2.5%,var(--bg));
}
.art-prose{
  font-family:'Parkinsans',sans-serif;font-weight:300;
  font-size:clamp(16.5px,1.2vw,18.5px);line-height:1.78;
  max-width:80ch;
}
.art-prose > p{margin:0 0 22px}
.art-prose h2{
  font-family:'Londrina Solid',serif;font-weight:400;
  font-size:clamp(24px,2.6vw,34px);line-height:1.12;letter-spacing:-.004em;
  margin:clamp(34px,4.5vh,52px) 0 16px;
}
.art-prose-list{
  list-style:none;margin:0 0 24px;padding:0;
  display:flex;flex-direction:column;gap:12px;
}
.art-prose-list li{position:relative;padding-left:24px}
.art-prose-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;border-radius:50%;background:var(--accent);
}

/* Citation */
.art-quote{
  margin:clamp(30px,4vh,46px) 0;padding:4px 0 4px 26px;
  border-left:3px solid var(--accent);
}
.art-quote p{
  font-family:'Londrina Solid',serif;font-weight:400;
  font-size:clamp(22px,2.4vw,30px);line-height:1.28;letter-spacing:-.004em;
  margin:0 0 14px;
}
.art-quote cite{
  font-family:'Parkinsans',sans-serif;font-style:normal;font-weight:600;
  font-size:13px;letter-spacing:.04em;opacity:.7;
}

/* Image intégrée dans le corps */
.art-inline-figure{
  margin:clamp(30px,4.5vh,52px) 0;
}
.art-inline-figure img{
  display:block;width:100%;height:auto;
  aspect-ratio:16/9;object-fit:cover;border-radius:20px;
  box-shadow:0 30px 80px -50px rgba(10,20,50,.45);
}
.art-inline-figure figcaption{
  margin-top:12px;font-family:'Parkinsans',sans-serif;font-weight:400;
  font-size:13px;line-height:1.5;opacity:.62;text-align:center;
}

/* Pied d'article : auteur + retour */
.art-foot{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;
  margin-top:clamp(36px,5vh,60px);padding-top:clamp(26px,3.5vh,40px);
  border-top:1px solid color-mix(in srgb, var(--fg) 12%, transparent);
}
.art-author{display:flex;align-items:center;gap:14px}
.art-author-mark{
  flex:0 0 46px;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent);color:var(--bg);
  font-family:'Londrina Solid',serif;font-size:22px;line-height:1;
}
.art-author-text{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.art-author-name{font-family:'Parkinsans',sans-serif;font-weight:600;font-size:15px}
.art-author-role{font-family:'Parkinsans',sans-serif;font-weight:400;font-size:13px;opacity:.6}
.art-foot-link{margin-top:0}

/* Articles liés */
.art-related .art-grid--related{grid-template-columns:repeat(3,1fr)}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media(max-width:980px){
  .art-grid,
  .art-related .art-grid--related{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .art-hero-grid,
  .art-single-hero{grid-template-columns:1fr;gap:clamp(24px,5vw,38px)}
  .art-hero-copy,
  .art-hero-body{max-width:62ch}
  .art-single-cover{height:auto;aspect-ratio:4/3}
}
@media(max-width:600px){
  .art-grid,
  .art-related .art-grid--related{grid-template-columns:1fr}
  .art-cover{padding:0 clamp(16px,5vw,24px)}
  .art-foot{flex-direction:column;align-items:flex-start}
}