/* =======================================================
   Conseils — page sommaire et pages d'articles
   Complète style.css, ne le remplace pas.
   ======================================================= */

/* ---- Sommaire : filtres ---- */
.cs-filters{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;margin-bottom:2.6rem}
.cs-filter{font-family:var(--grotesk);font-size:.65rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;padding:.6em 1.4em;border-radius:50px;
  border:1px solid var(--line-light);background:none;color:var(--ink-soft);
  cursor:pointer;transition:var(--t)}
.cs-filter:hover{border-color:var(--cuivre);color:var(--ink)}
.cs-filter.active{background:var(--cuivre);border-color:var(--cuivre);color:var(--dark)}

/* ---- Sommaire : grille de cartes ---- */
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
@media(max-width:900px){.cs-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cs-grid{grid-template-columns:1fr}}
.cs-card{display:flex;flex-direction:column;background:rgba(255,255,255,.55);
  border:1px solid var(--bord);border-radius:14px;overflow:hidden;transition:var(--t)}
.cs-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px -20px rgba(26,23,20,.2)}
.cs-card.cs-hidden{display:none}
.cs-card-media{aspect-ratio:3/2;background:#ded7c9;overflow:hidden}
.cs-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.cs-card-body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.cs-cat{font-family:var(--grotesk);font-size:.58rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cuivre);margin-bottom:.5rem}
.cs-card h2{font-family:var(--serif);font-size:1.32rem;font-weight:500;line-height:1.24;
  color:var(--ink);margin-bottom:.5rem}
.cs-card p{font-family:var(--grotesk);font-size:.84rem;line-height:1.65;color:var(--ink-soft);
  margin-bottom:.9rem;flex:1}
.cs-card-meta{font-family:var(--grotesk);font-size:.68rem;color:#a89e90;letter-spacing:.04em}

/* ---- Article : fil d'Ariane ---- */
.cs-breadcrumb{font-family:var(--grotesk);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:#a89e90;margin-bottom:1.8rem;
  padding-bottom:1rem;border-bottom:1px solid rgba(29,26,22,.09)}
.cs-breadcrumb a{color:#a89e90;transition:var(--t)}
.cs-breadcrumb a:hover{color:var(--cuivre)}
.cs-breadcrumb span{color:var(--ink-soft)}

/* ---- Article : corps de texte ---- */
.cs-article{max-width:720px;margin:0 auto}
.cs-article > p{font-family:var(--grotesk);font-size:1rem;line-height:1.9;
  color:#4a443c;margin-bottom:1.5rem}
.cs-article > p:first-of-type{font-family:var(--serif);font-size:1.35rem;font-style:italic;
  line-height:1.6;color:var(--ink)}
.cs-article h2{font-family:var(--serif);font-size:1.85rem;font-weight:500;color:var(--ink);
  line-height:1.25;margin:2.8rem 0 1rem}
.cs-article h3{font-family:var(--grotesk);font-size:.95rem;font-weight:700;color:var(--ink);
  letter-spacing:.02em;margin:2rem 0 .7rem}
.cs-article strong{color:var(--ink);font-weight:700}
.cs-article em{font-style:italic}
.cs-article a{color:var(--cuivre);text-decoration:underline;text-underline-offset:3px}
.cs-article a:hover{color:var(--ink)}
.cs-article ul,.cs-article ol{margin:0 0 1.5rem 1.2rem}
.cs-article li{font-family:var(--grotesk);font-size:1rem;line-height:1.85;
  color:#4a443c;margin-bottom:.5rem;padding-left:.3rem}
.cs-article li::marker{color:var(--cuivre)}
.cs-article hr{border:none;border-top:1px solid rgba(29,26,22,.12);margin:2.6rem 0}

/* ---- Article : tableaux ---- */
.cs-article table{width:100%;border-collapse:collapse;margin:0 0 1.8rem;
  font-family:var(--grotesk);font-size:.88rem;
  background:rgba(255,255,255,.5);border:1px solid var(--bord);border-radius:12px;overflow:hidden}
.cs-article thead{background:rgba(176,141,87,.12)}
.cs-article th{font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#8a6e42;text-align:left;padding:.75rem .9rem}
.cs-article td{padding:.75rem .9rem;color:#4a443c;
  border-top:1px solid rgba(29,26,22,.08);vertical-align:top}
.cs-article tbody tr:first-child td{border-top:1px solid rgba(29,26,22,.12)}
@media(max-width:620px){
  .cs-article table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:.8rem}
  .cs-article th,.cs-article td{padding:.6rem .65rem;white-space:nowrap}
}

/* ---- Article : appel à l'action final ---- */
.cs-cta{background:var(--dark);border-radius:16px;padding:2.4rem 2rem;text-align:center;
  margin-top:3rem}
.cs-cta p{font-family:var(--serif);font-size:1.45rem;font-style:italic;color:var(--cream);
  line-height:1.5;max-width:460px;margin:0 auto 1.5rem}
@media(max-width:600px){.cs-cta{padding:1.8rem 1.2rem}.cs-cta p{font-size:1.2rem}}

/* ---- Article : sources ---- */
.cs-sources{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(29,26,22,.12)}
.cs-sources h2{font-family:var(--grotesk);font-size:.65rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 .8rem}
.cs-sources ul{margin-left:1.1rem}
.cs-sources li{font-size:.8rem;line-height:1.7;color:var(--ink-soft)}

/* ---- Bannière d'article ---- */
.cs-banner-meta{font-family:var(--grotesk);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(207,198,186,.55);margin-top:1.4rem}
.page-banner h1.cs-title{font-size:clamp(1.9rem,4.6vw,3.4rem);text-transform:none;
  max-width:860px;margin:0 auto;line-height:1.15}

/* ---- Autres articles ---- */
.cs-more{margin-top:3.5rem;padding-top:2rem;border-top:1px solid rgba(29,26,22,.12)}
.cs-more h2{font-family:var(--serif);font-size:1.6rem;font-weight:500;color:var(--ink);
  margin-bottom:1.4rem;text-align:center}

/* ---- Illustrations dans les articles ----
   Deux photos par article : la lecture d'un texte de mille mots sans
   respiration visuelle décourage, et Google mesure ce temps de lecture. */
.cs-article figure{margin:2.4rem 0}
.cs-article figure img{width:100%;height:auto;display:block;border-radius:14px}
.cs-article figcaption{font-family:var(--grotesk);font-size:.78rem;color:var(--ink-soft);
  margin-top:.7rem;text-align:center;font-style:italic}

/* ---- Vitrine de fin d'article ----
   Trois photos, une phrase, un bouton. Un lecteur qui arrive au bout
   d'un guide doit avoir quelque part où aller. */
.cs-showcase{margin-top:3rem;padding-top:2.2rem;border-top:1px solid rgba(29,26,22,.12);
  text-align:center}
.cs-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1.6rem;
  align-items:start}
.cs-gallery a{display:block;line-height:0;text-decoration:none;border:0}
/* hauteur fixe + object-fit : les photos sont recadrées, jamais étirées,
   quelles que soient leurs proportions d'origine */
.cs-gallery img{display:block;width:100%;height:300px;object-fit:cover;object-position:center;
  border-radius:12px;transition:var(--t)}
.cs-gallery a:hover img{transform:translateY(-4px);box-shadow:0 16px 40px -20px rgba(26,23,20,.3)}
.cs-showcase p{font-family:var(--serif);font-size:1.25rem;font-style:italic;line-height:1.6;
  color:var(--ink);max-width:560px;margin:0 auto 1.6rem}
/* Le bouton est un lien placé dans .cs-article, dont la règle colore les liens
   en cuivre — soit la couleur du fond du bouton. On la neutralise. */
.cs-showcase a.btn{text-decoration:none}
.cs-showcase a.btn--solid{color:var(--dark)}
.cs-showcase a.btn--solid:hover{color:var(--cream)}
@media(max-width:900px){
  .cs-gallery img{height:240px}
}
@media(max-width:600px){
  .cs-gallery{gap:.5rem}
  .cs-gallery img{height:150px;border-radius:8px}
  .cs-showcase p{font-size:1.1rem}
  .cs-showcase .btn{width:100%;text-align:center}
}