/* article.css — mon-caviste.fr
   Feuille chargée UNIQUEMENT par les pages d'article générées par la pipeline
   (publish_daily.render_html), après /styles.css. Les overrides ci-dessous ne
   sont donc pas scopés : ils ne touchent jamais l'accueil ni les pages légales.

   Palette héritée de styles.css :
     --wine #722f37  --wine-dark #331419  --cream #f7f0df
     --ink  #36454f  --gold #c5a55a       --paper #fdfaf3
     --serif Playfair Display  --sans Lato
   Ne pas réintroduire --terra / --dark : ce sont des variables dedicawine,
   inexistantes ici (les déclarations qui les utilisent sont ignorées).
*/

/* ─────────────────────────────────────────────────────────────────────────────
   1. HEADER — override obligatoire
   styles.css pose .site-header{position:absolute;color:#fff} parce que sur
   l'accueil la barre flotte au-dessus du hero sombre. Une page d'article n'a
   pas de hero plein écran : sans override on obtient du blanc sur --paper
   (#fdfaf3), soit une barre illisible, et l'absolute recouvre le fil d'Ariane.
   ────────────────────────────────────────────────────────────────────────── */
.site-header{
  position:relative;
  background:var(--wine-dark);
  color:#fff;
}
.site-header .brand{color:#fff}
.site-header nav a{color:#fff}
/* Le menu déroulant mobile de styles.css est déjà en --wine-dark ; on le
   décale sous la barre relative au lieu du top:60px calculé pour l'absolute. */
@media(max-width:800px){
  .site-header nav{top:100%;right:20px}
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. CONTENEUR
   ────────────────────────────────────────────────────────────────────────── */
.article-container{
  max-width:780px;
  margin:0 auto;
  padding:48px clamp(20px,5vw,40px) 96px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. FIL D'ARIANE
   ────────────────────────────────────────────────────────────────────────── */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:34px;
  font-size:12px;
  letter-spacing:.04em;
  color:#7c8588;
}
.breadcrumb a{
  color:var(--wine);
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.breadcrumb a:hover{border-bottom-color:var(--wine)}
.breadcrumb span{color:#7c8588}

/* ─────────────────────────────────────────────────────────────────────────────
   4. EN-TÊTE D'ARTICLE
   ────────────────────────────────────────────────────────────────────────── */
.article-header{
  padding-bottom:34px;
  border-bottom:1px solid #e3ddcf;
  margin-bottom:38px;
}
.article-eyebrow{
  margin:0 0 14px;
  color:var(--wine);
  font-size:11px;
  font-weight:900;
  letter-spacing:.2em;
  text-transform:uppercase;
}
/* styles.css ne stylise que .hero h1 et .age-card h1 : un h1 nu tomberait en
   Lato taille navigateur. On rétablit le serif de marque. */
.article-header h1{
  margin:0;
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(33px,4.6vw,54px);
  line-height:1.08;
  letter-spacing:-.035em;
  color:var(--wine-dark);
}
.article-header h1 em{
  color:inherit;
  font-style:italic;
  font-weight:600;
}
.article-meta{
  margin:18px 0 0;
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#7c8588;
}
.article-intro{
  margin:24px 0 0;
  font-size:19px;
  line-height:1.62;
  color:#4a565e;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. IMAGES
   ────────────────────────────────────────────────────────────────────────── */
.article-hero-image,
.article-inline-image{
  margin:0 0 38px;
}
.article-inline-image{margin:44px 0}
.article-hero-image img,
.article-inline-image img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.article-hero-image img{aspect-ratio:16/9}
.article-inline-image img{aspect-ratio:3/2}
.article-inline-image figcaption,
.article-hero-image figcaption{
  margin-top:10px;
  font-size:12px;
  color:#7c8588;
}
/* Crédit Unsplash — obligatoire à chaque affichage selon les conditions de
   leur API. Discret mais lisible et cliquable : c'est la condition, pas une
   mention décorative qu'on pourrait masquer. */
.photo-credit{
  margin-top:8px;
  font-size:11px;
  letter-spacing:.02em;
  color:#8a9296;
}
.photo-credit a{
  color:#6d777c;
  text-decoration:underline;
  text-underline-offset:2px;
}
.photo-credit a:hover{color:var(--wine)}
/* Sur l'en-tête illustré d'un hub, le fond est sombre : le crédit doit rester
   lisible par-dessus. */
.hub-header--has-image .photo-credit{color:#c9bcb8}
.hub-header--has-image .photo-credit a{color:#e0d3cf}
.hub-header--has-image .photo-credit a:hover{color:#fff}

/* ─────────────────────────────────────────────────────────────────────────────
   6. CORPS DE L'ARTICLE
   styles.css applique `.hero h1,h2{...;line-height:1.04;margin:0}` — la partie
   `h2` du sélecteur est globale, donc tous les h2 d'article arrivent collés et
   sans taille propre (les tailles sont dans .section-heading h2/.regions h2,
   qui ne matchent pas ici). D'où l'override explicite ci-dessous.
   ────────────────────────────────────────────────────────────────────────── */
.article-body{
  font-size:17px;
  line-height:1.72;
  color:var(--ink);
}
.article-body h2{
  margin:52px 0 16px;
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(26px,3.1vw,36px);
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--wine-dark);
}
.article-body h2:first-child{margin-top:0}
.article-body h2 em{color:inherit;font-style:italic;font-weight:600}
.article-body h3{
  margin:34px 0 12px;
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(20px,2.2vw,24px);
  line-height:1.28;
  color:var(--wine);
}
.article-body p{margin:0 0 20px}
.article-body ul,
.article-body ol{margin:0 0 22px;padding-left:24px}
.article-body li{margin-bottom:9px}
.article-body li::marker{color:var(--wine)}
.article-body strong{color:var(--wine-dark);font-weight:700}
/* styles.css met a{color:inherit;text-decoration:none} pour la nav : dans un
   corps de texte un lien invisible n'est pas acceptable. */
.article-body a{
  color:var(--wine);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:opacity .2s;
}
.article-body a:hover{opacity:.7}
.article-body blockquote{
  margin:32px 0;
  padding:20px 26px;
  background:var(--cream);
  border-left:3px solid var(--gold);
  font-family:var(--serif);
  font-size:19px;
  font-style:italic;
  line-height:1.5;
  color:var(--wine-dark);
}
.article-body blockquote p:last-child{margin-bottom:0}

/* Tableaux — scroll horizontal plutôt que débordement de page */
.article-body table{
  width:100%;
  margin:0 0 26px;
  border-collapse:collapse;
  font-size:15px;
}
.article-body th,
.article-body td{
  padding:11px 14px;
  border:1px solid #e3ddcf;
  text-align:left;
  vertical-align:top;
}
.article-body th{
  background:var(--cream);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--wine);
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. FAQ
   ────────────────────────────────────────────────────────────────────────── */
.faq-section{
  margin-top:64px;
  padding-top:44px;
  border-top:1px solid #e3ddcf;
}
.faq-section h2{margin-top:0}
.faq-item{
  padding:22px 0;
  border-bottom:1px solid #ece6d9;
}
.faq-item:last-child{border-bottom:0}
.faq-q{
  margin:0 0 9px;
  font-family:var(--serif);
  font-weight:700;
  font-size:19px;
  line-height:1.3;
  color:var(--wine-dark);
}
.faq-a{
  margin:0;
  color:var(--ink);
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. BLOC AFFILIÉ
   Le style de base est inline dans link_builder.build_cta_block() (donc
   prioritaire) ; ici seulement ce qui n'y figure pas.
   ────────────────────────────────────────────────────────────────────────── */
.affiliate-cta a{text-decoration:none}
.affiliate-cta a:hover{opacity:.85}
.article-body a[rel~="sponsored"]{
  font-weight:700;
  text-decoration-color:var(--gold);
}

/* ─────────────────────────────────────────────────────────────────────────────
   8bis. HUBS DE SECTION
   Pages d'index générées par scripts/build_static_pages.py (/regions/, /guide/,
   ...). Elles réutilisent .article-container et l'en-tête d'article, d'où le
   `.hub` qui ne fait qu'élargir le conteneur : une grille de cartes respire mal
   dans les 780px prévus pour une colonne de texte.
   ────────────────────────────────────────────────────────────────────────── */
.article-container.hub{max-width:1060px}

.hub-header{
  padding-bottom:30px;
  border-bottom:1px solid #e3ddcf;
  margin-bottom:36px;
}
.hub-header h1{
  margin:0;
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(33px,4.6vw,54px);
  line-height:1.08;
  letter-spacing:-.035em;
  color:var(--wine-dark);
}
.hub-header .article-intro{margin-top:16px;font-size:18px}

/* En-tête illustré : le hero de l'article le plus récent de la section.
   L'image arrive en style inline (elle change par section), la classe porte
   le reste. Le dégradé n'est pas décoratif — c'est lui qui garantit le
   contraste du texte blanc quelle que soit la photo, claire ou sombre. */
/* La hauteur de l'en-tête était dictée par son seul texte : ~246px pour 1060px
   de large, soit un rapport de 4.3:1 face à des images en 16:9 (1.78:1).
   `cover` en rognait donc 59%, et jusqu'à 70% sur les images proches du carré.
   Le décalage `center 35%` ne changeait que la portion perdue, pas son volume.

   On impose maintenant le rapport du conteneur au lieu de le subir :
   aspect-ratio 5/2 (2.5:1) ramène la perte à 1 − 1.78/2.5 ≈ 29%, sans toucher
   aux images ni en générer de nouvelles. `center` redevient pertinent puisque
   la coupe est faible et symétrique.

   min-height sert de garde-fou : sur un écran étroit, 5/2 donnerait une bande
   trop basse pour le texte, et aspect-ratio cède devant le contenu. */
.hub-header--has-image{
  position:relative;
  background-size:cover;
  background-position:center;
  border-bottom:0;
  aspect-ratio:5/2;
  min-height:300px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;   /* texte ancré en bas, comme un vrai hero */
  padding:clamp(28px,4vw,44px) clamp(24px,4vw,44px);
  margin-bottom:40px;
  overflow:hidden;
}
.hub-header--has-image::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,rgba(29,10,13,.9) 0%,rgba(29,10,13,.72) 55%,rgba(29,10,13,.5) 100%);
}
.hub-header--has-image > *{position:relative}
.hub-header--has-image h1{color:#fff}
.hub-header--has-image .article-eyebrow{color:#e8c87c}
.hub-header--has-image .article-intro{color:#f0e6e2}

.hub-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:18px;
}
.hub-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #e3ddcf;
  border-radius:10px;
  overflow:hidden;              /* la vignette suit les coins arrondis */
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.hub-card:hover{
  border-color:var(--wine);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(54,69,79,.09);
}
/* Vignette : hauteur fixe pour que les cartes s'alignent quelle que soit la
   proportion de la photo d'origine ; aspect-ratio en secours si l'image
   n'est pas encore chargée, pour éviter le saut de mise en page. */
.hub-card img{
  display:block;
  width:100%;
  height:180px;
  aspect-ratio:5/3;
  object-fit:cover;
  background:var(--cream);
  transition:transform .35s;
}
.hub-card:hover img{transform:scale(1.03)}
/* Le corps porte le padding, plus la carte : sinon la vignette ne pourrait
   pas toucher les bords. */
.hub-card-body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:22px 22px 20px;
}
.hub-card h2{
  margin:0 0 10px;
  font-family:var(--serif);
  font-weight:700;
  font-size:20px;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--wine-dark);
}
.hub-card p{
  margin:0 0 18px;
  font-size:14px;
  line-height:1.6;
  color:#5c666d;
  flex:1;
}
.hub-more{
  font-size:11px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--wine);
}

.hub-empty{
  margin:0 0 14px;
  font-size:17px;
  line-height:1.65;
  color:#5c666d;
}
.hub-empty-cta a{
  color:var(--wine);
  font-weight:700;
  border-bottom:1px solid var(--wine);
}

@media(max-width:800px){
  .hub-grid{grid-template-columns:1fr}
  .hub-card-body{padding:20px 18px 18px}
  .hub-card img{height:200px}
  /* En étroit, 5/2 donnerait une bande de ~160px : trop basse pour un H1 et
     deux lignes de texte. On élargit le rapport, la perte reste modérée. */
  .hub-header--has-image{aspect-ratio:4/3;min-height:280px;padding:26px 22px}
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. FOOTER
   footer{grid-template-columns:1fr 1.8fr 1fr} vient de styles.css et convient.
   Seule la marge haute manque quand l'article est court.
   ────────────────────────────────────────────────────────────────────────── */
body > footer{margin-top:0}

/* ─────────────────────────────────────────────────────────────────────────────
   10. RESPONSIVE — points de rupture alignés sur styles.css
   ────────────────────────────────────────────────────────────────────────── */
@media(max-width:800px){
  .article-container{padding:32px 22px 72px}
  .article-intro{font-size:17px}
  .article-body{font-size:16px}
  .article-body h2{margin-top:42px}
  .faq-section{margin-top:48px;padding-top:34px}
}
@media(max-width:390px){
  .article-body table{display:block;overflow-x:auto}
  .affiliate-cta{padding:20px 18px}
}

/* Impression — on retire la barre de nav et les CTA affiliés */
@media print{
  .site-header,.affiliate-cta,.cookie-banner,.age-gate{display:none}
  .article-container{max-width:none;padding:0}
}