/* =====================================================================
   PRÉMICES · Preview — Gabarit d'article de blog "Ouverture"
   Chargé PAR-DESSUS newhome/styles.css (chrome nav + footer identiques).
   Ne redéfinit pas les tokens : réutilise --creme, --sig, --gold,
   --f-title (Playfair), --f-body (Manrope), --f-detail (EB Garamond),
   --pad, --ease. Ne touche RIEN de la home Ouverture (classes préfixées .pa-).
   ===================================================================== */

/* ---------- barre de progression ultra fine ---------- */
.pa-progress{
  position:fixed;top:0;left:0;right:0;height:2px;
  background:transparent;z-index:9998;pointer-events:none;
}
.pa-progress__bar{
  height:100%;width:0;
  background:linear-gradient(90deg, var(--gold-ink) 0%, var(--gold) 60%, var(--sig) 100%);
  box-shadow:0 0 6px rgba(184,147,90,.35);
  transition:width .12s linear;
}

/* =====================================================================
   HERO — image à la une full-bleed, voile bas, titre Playfair
   ===================================================================== */
.pa-hero{
  position:relative;
  height:clamp(58vh, 68vh, 720px);
  min-height:520px;
  width:100%;
  overflow:hidden;
  background:var(--text);
  margin-top:0;
}
.pa-hero__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 40%;
  filter:saturate(1.02) contrast(1.02);
}
.pa-hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      rgba(10,9,8,0) 0%,
      rgba(10,9,8,0) 42%,
      rgba(10,9,8,.28) 62%,
      rgba(10,9,8,.72) 88%,
      rgba(10,9,8,.92) 100%);
  pointer-events:none;
}
.pa-hero__grain{
  position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pa-hero__content{
  position:absolute;left:0;right:0;bottom:0;
  padding:0 var(--pad) clamp(2rem,5vw,4.5rem);
  color:var(--creme);
  max-width:1240px;margin:0 auto;
}
.pa-hero__cat{
  display:inline-block;
  font-family:var(--f-body);
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.2rem;
  padding-left:0;
  position:relative;
}
.pa-hero__cat::before{
  content:'';display:inline-block;
  width:28px;height:1px;background:var(--gold-ink);
  vertical-align:middle;margin-right:.9rem;
}
.pa-hero__title{
  font-family:var(--f-title);
  font-weight:500;
  font-size:clamp(2.1rem, 5.4vw, 4.4rem);
  line-height:1.05;
  letter-spacing:-.008em;
  color:var(--creme);
  max-width:22ch;
  margin:0 0 1.6rem;
}
.pa-hero__title em{
  font-style:italic;font-weight:400;color:var(--gold);
}
.pa-hero__meta{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.8rem 1.2rem;
  font-family:var(--f-body);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(246,241,233,.78);
}
.pa-hero__meta i{
  display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--gold-ink);opacity:.9;
}
.pa-hero__rule{
  display:block;width:60px;height:1px;background:var(--gold);
  margin-top:1.6rem;
}

/* =====================================================================
   CORPS DE L'ARTICLE — colonne de lecture ~68ch, EB Garamond généreux
   ===================================================================== */
.pa-body{
  background:var(--bg);
  padding:clamp(3.5rem,7vw,6.5rem) var(--pad);
}
.pa-article{
  max-width:68ch;
  margin:0 auto;
  font-family:var(--f-detail);
  font-size:clamp(1.14rem, 1.02rem + .35vw, 1.24rem);
  line-height:1.78;
  color:var(--text);
  letter-spacing:.005em;
}

/* Paragraphes */
.pa-article p{
  margin:0 0 1.35em;
}
.pa-article p:last-child{margin-bottom:0}

/* Lettrine sur le premier paragraphe */
.pa-article > p:first-of-type::first-letter{
  font-family:var(--f-title);
  font-weight:400;
  font-style:italic;
  color:var(--sig);
  float:left;
  font-size:5em;
  line-height:.82;
  padding:.02em .18em 0 0;
  margin-top:.03em;
}

/* Intertitres */
.pa-article h2{
  font-family:var(--f-title);
  font-weight:500;
  font-size:clamp(1.85rem, 1.4rem + 1.4vw, 2.6rem);
  line-height:1.12;
  letter-spacing:-.005em;
  color:var(--text);
  margin:2.6em 0 .9em;
  position:relative;
  padding-top:1.1em;
}
.pa-article h2::before{
  content:'';position:absolute;top:0;left:0;
  width:44px;height:1px;background:var(--gold-ink);
}
.pa-article h2 em, .pa-article h3 em{
  font-style:italic;font-weight:400;color:var(--sig);
}

.pa-article h3{
  font-family:var(--f-title);
  font-weight:500;
  font-style:italic;
  font-size:clamp(1.35rem, 1.1rem + .8vw, 1.72rem);
  line-height:1.25;
  color:var(--sig);
  margin:2.1em 0 .65em;
}

.pa-article h4{
  font-family:var(--f-body);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold-ink);
  margin:2em 0 .8em;
}

/* Liens dans le corps */
.pa-article a{
  color:var(--sig);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
  text-decoration-color:rgba(143,23,17,.42);
  transition:text-decoration-color .3s var(--ease), color .3s var(--ease);
}
.pa-article a:hover{
  text-decoration-color:var(--sig);
}

/* Gras / italique */
.pa-article strong{font-weight:600;color:var(--text)}
.pa-article em{font-style:italic}

/* Listes stylées (puces or) */
.pa-article ul, .pa-article ol{
  margin:0 0 1.6em;
  padding-left:0;
  list-style:none;
}
.pa-article ul li, .pa-article ol li{
  position:relative;
  padding-left:1.9em;
  margin-bottom:.7em;
}
.pa-article ul li::before{
  content:'';
  position:absolute;
  left:.35em;top:.72em;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 1px var(--gold-ink);
}
.pa-article ol{counter-reset:pa-li}
.pa-article ol li{counter-increment:pa-li}
.pa-article ol li::before{
  content:counter(pa-li,decimal-leading-zero);
  position:absolute;left:0;top:.05em;
  font-family:var(--f-title);
  font-weight:500;font-style:italic;
  color:var(--sig);
  font-size:1.05em;
  line-height:1;
}

/* Citations en exergue */
.pa-article blockquote{
  margin:2.4em -1em;
  padding:1.6em 2em 1.7em;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-family:var(--f-title);
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.24rem, 1.05rem + .6vw, 1.55rem);
  line-height:1.42;
  color:var(--sig);
  text-align:center;
  position:relative;
}
.pa-article blockquote::before{
  content:'"';
  display:block;
  font-family:var(--f-title);font-style:italic;font-weight:400;
  font-size:3.2rem;line-height:.4;
  color:var(--gold);
  margin-bottom:.35em;
  opacity:.9;
}
.pa-article blockquote p{margin:0 0 .5em}
.pa-article blockquote p:last-child{margin-bottom:0}
.pa-article blockquote strong{color:var(--sig);font-weight:500}
.pa-article blockquote em{
  display:block;margin-top:.9em;
  font-family:var(--f-body);
  font-size:.72rem;font-style:normal;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-soft);
}

/* Images dans le contenu */
.pa-article img{
  display:block;
  max-width:100%;height:auto;
  margin:2.2em auto;
  border-radius:0;
  box-shadow:0 8px 26px rgba(10,9,8,.08);
}
.pa-article figure{margin:2.2em 0}
.pa-article figure img{margin:0 auto}
.pa-article figcaption{
  margin-top:.9em;
  font-family:var(--f-body);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--text-soft);
  text-align:center;
}

/* Tableaux */
.pa-article table{
  width:100%;
  border-collapse:collapse;
  margin:2em 0;
  font-family:var(--f-body);
  font-size:.92rem;
  line-height:1.55;
}
.pa-article table thead th{
  font-family:var(--f-title);
  font-weight:500;font-style:italic;
  color:var(--sig);
  text-align:left;
  padding:.9em .9em;
  border-bottom:2px solid var(--gold-ink);
  font-size:1rem;
}
.pa-article table tbody td{
  padding:.85em .9em;
  border-bottom:1px solid var(--line);
  color:var(--text);
  vertical-align:top;
}
.pa-article table tbody tr:hover td{
  background:rgba(235,207,149,.08);
}

/* Séparateur horizontal (hr) */
.pa-article hr{
  border:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-ink), transparent);
  margin:2.6em auto;
  max-width:120px;
}

/* Petit texte / notes */
.pa-article small{
  display:inline-block;
  font-family:var(--f-body);
  font-size:.82rem;
  color:var(--text-soft);
}

/* =====================================================================
   BLOC SIGNATURE PRÉMICES
   ===================================================================== */
.pa-signoff{
  max-width:68ch;
  margin:clamp(3rem,5vw,4.5rem) auto 0;
  padding-top:2rem;
  border-top:1px solid var(--line);
  text-align:center;
  font-family:var(--f-title);
  font-style:italic;
  font-size:1.1rem;
  color:var(--text-soft);
}
.pa-signoff a{
  color:var(--sig);
  text-decoration:none;
  border-bottom:1px solid var(--gold-ink);
  padding-bottom:2px;
  transition:border-color .3s var(--ease);
}
.pa-signoff a:hover{border-color:var(--sig)}

/* =====================================================================
   À LIRE ENSUITE
   ===================================================================== */
.pa-next{
  background:var(--bg-2);
  padding:clamp(3rem,6vw,5.5rem) var(--pad);
  margin-top:clamp(3rem,6vw,5.5rem);
}
.pa-next__inner{
  max-width:1180px;margin:0 auto;
}
.pa-next__head{
  text-align:center;margin-bottom:2.6rem;
}
.pa-next__eyebrow{
  display:inline-block;
  font-family:var(--f-body);
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold-ink);
  margin-bottom:1rem;
}
.pa-next__title{
  font-family:var(--f-title);
  font-weight:500;
  font-size:clamp(1.9rem, 4vw, 2.8rem);
  line-height:1.1;
  color:var(--text);
}
.pa-next__title em{font-style:italic;font-weight:400;color:var(--sig)}
.pa-next__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.6rem;
}
.pa-next__card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:0;
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.pa-next__card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(10,9,8,.09);
  border-color:var(--gold-ink);
}
.pa-next__card a{color:inherit;display:flex;flex-direction:column;flex:1}
.pa-next__media{
  aspect-ratio:16/10;
  background:var(--bg-2);
  overflow:hidden;position:relative;
}
.pa-next__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease);
}
.pa-next__card:hover .pa-next__media img{transform:scale(1.04)}
.pa-next__media--fallback{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg, var(--bg-2) 0%, var(--card) 100%);
}
.pa-next__media--fallback::after{
  content:'';
  width:44px;height:1px;background:var(--gold-ink);opacity:.7;
}
.pa-next__body{
  padding:1.4rem 1.3rem 1.6rem;
  display:flex;flex-direction:column;gap:.6rem;flex:1;
}
.pa-next__cat{
  font-family:var(--f-body);
  font-size:.68rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-ink);
}
.pa-next__t{
  font-family:var(--f-title);
  font-weight:500;
  font-size:1.1rem;line-height:1.28;
  color:var(--text);
}
.pa-next__t em{font-style:italic;color:var(--sig)}
.pa-next__read{
  margin-top:auto;
  font-family:var(--f-body);
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sig);
  display:inline-flex;align-items:center;gap:.5em;
}
.pa-next__read::after{content:'→';transition:transform .5s var(--ease)}
.pa-next__card:hover .pa-next__read::after{transform:translateX(4px)}

/* =====================================================================
   CTA FINAL
   ===================================================================== */
.pa-cta{
  background:var(--text);
  color:var(--creme);
  padding:clamp(3rem,6vw,4.8rem) var(--pad);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.pa-cta::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 100%, rgba(235,207,149,.09), transparent 60%);
  pointer-events:none;
}
.pa-cta__inner{
  position:relative;z-index:1;
  max-width:640px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:1.6rem;
}
.pa-cta__title{
  font-family:var(--f-title);
  font-weight:500;
  font-size:clamp(1.8rem, 3.6vw, 2.6rem);
  line-height:1.15;
  color:var(--creme);
}
.pa-cta__title em{font-style:italic;font-weight:400;color:var(--gold)}
.pa-cta__lead{
  font-family:var(--f-detail);
  font-size:1.05rem;line-height:1.65;
  color:rgba(246,241,233,.78);
  max-width:44ch;
}
.pa-cta__rule{
  width:44px;height:1px;background:var(--gold);
  margin:.2rem 0 .4rem;
}

/* =====================================================================
   MOBILE — rythme et confort
   ===================================================================== */
@media (max-width: 900px){
  .pa-hero{height:clamp(58vh, 62vh, 620px);min-height:460px}
  .pa-hero__title{font-size:clamp(1.9rem, 8vw, 2.8rem);max-width:20ch}
  .pa-hero__meta{font-size:.7rem;gap:.6rem .9rem}
  .pa-hero__meta i{width:3px;height:3px}
  .pa-body{padding:clamp(2.6rem,7vw,4rem) var(--pad)}
  .pa-article{font-size:1.06rem;line-height:1.72}
  .pa-article > p:first-of-type::first-letter{font-size:4em;padding:.02em .14em 0 0}
  .pa-article h2{font-size:clamp(1.55rem, 6.4vw, 2rem);margin-top:2.2em}
  .pa-article h3{font-size:clamp(1.2rem, 5vw, 1.4rem)}
  .pa-article blockquote{margin:2em -.4em;padding:1.4em 1.2em 1.5em;font-size:1.18rem}
  .pa-article table{font-size:.86rem}
  .pa-article table thead th,
  .pa-article table tbody td{padding:.7em .55em}
  .pa-next__grid{grid-template-columns:1fr;gap:1.2rem}
  .pa-next__title{font-size:clamp(1.6rem, 6vw, 2.1rem)}
  .pa-cta__title{font-size:clamp(1.55rem, 6vw, 2.1rem)}
}

/* offset pour la nav fixe */
.pa-hero{margin-top:0}
main.pa-main{padding-top:0}

/* préservations : la .btn--sig existe déjà dans styles.css, on l'utilise telle quelle */

/* =====================================================================
   FALLBACK : article SANS image à la une (typographique)
   Ajouté en prod (2026-07-16) : fond dégradé encre → charbon subtil,
   voile inversé pour laisser respirer le titre en haut.
   ===================================================================== */
.pa-hero--noimg{
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(184,147,90,.10) 0%, rgba(10,9,8,0) 60%),
    linear-gradient(180deg, #14110d 0%, #0a0908 100%);
}
.pa-hero--noimg .pa-hero__veil{
  background:
    linear-gradient(180deg,
      rgba(10,9,8,.55) 0%,
      rgba(10,9,8,.20) 40%,
      rgba(10,9,8,.55) 100%);
}
.pa-hero--noimg .pa-hero__content{
  bottom:auto;top:50%;transform:translateY(-40%);
}
@media (max-width:640px){
  .pa-hero--noimg .pa-hero__content{transform:translateY(-30%);}
}