/* ============================================================
   REFONTE VISUELLE — Pages Conseils & Guide d'incubation
   Lignée Faverolles

   Ce fichier vient COMPLÉTER assets/css/style.css : il ne
   redéfinit aucune couleur. Toutes les teintes réutilisent
   exclusivement les variables déjà définies dans style.css
   (--cream, --cream-2, --cream-3, --terracotta, --terracotta-d,
   --brun, --brun-2, --vert, --vert-d, --line, --shadow, --serif,
   --sans) ou leurs équivalents rgba() déjà employés ailleurs
   dans la feuille d'origine.

   À charger APRÈS style.css :
   <link rel="stylesheet" href="assets/css/guide-refonte.css">
   ============================================================ */

/* ---------- Fil d'Ariane ---------- */
.crumbs{
  max-width:860px;margin:22px auto 0;padding:0 40px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--brun-2);
}
.crumbs a{color:var(--brun-2);transition:color .2s}
.crumbs a:hover{color:var(--terracotta-d)}
.crumbs .sep{color:rgba(59,35,20,.3)}
.crumbs [aria-current]{color:var(--terracotta-d)}
@media(max-width:680px){.crumbs{padding:0 20px;margin-top:16px}}

/* ---------- Couverture : accents ---------- */
.cover__stat{
  background:rgba(253,249,243,.08);
  border:1px solid rgba(253,249,243,.16);
  border-radius:100px;
  padding:7px 16px 6px;
}
.cover__stat b{margin-bottom:2px}

/* ---------- Signature auteur ---------- */
.byline{
  font-family:var(--sans);font-size:.92rem;color:var(--brun-2);
  text-align:center;
}
.byline strong{color:var(--brun)}

/* ---------- Sommaire (TOC) : cartes + badges ronds ---------- */
.toc{background:transparent;border:none;box-shadow:none;padding:0}
.toc__title{margin-bottom:16px}
.toc ol{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.toc li a{
  background:var(--cream-2);border:1px solid var(--line);border-radius:8px;
  padding:14px 16px;margin:0;transition:.25s cubic-bezier(.2,.7,.3,1);
}
.toc li a:hover{border-color:var(--terracotta);transform:translateX(4px);box-shadow:var(--shadow-sm)}
.toc li a .toc__n{
  width:26px;height:26px;min-width:26px;border-radius:50%;
  background:rgba(196,124,82,.14);
  display:inline-flex;align-items:center;justify-content:center;
}
@media(max-width:680px){.toc ol{grid-template-columns:1fr}}

/* ---------- Sections numérotées : mini ligne de temps ---------- */
.section{position:relative}
.section:has(.section__num)::before{
  content:"";position:absolute;left:20px;top:56px;bottom:8px;width:1.5px;
  background:repeating-linear-gradient(to bottom,rgba(196,124,82,.35) 0 6px,transparent 6px 12px);
}
.section__num{
  background:linear-gradient(155deg,var(--terracotta),var(--terracotta-d));
  box-shadow:0 6px 16px -6px rgba(196,124,82,.6);
}

/* ---------- Alertes : badge icône rond ---------- */
.alert{border-radius:8px;border-left-width:4px;gap:16px}
.alert__icon{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:17px;margin-top:0;
  background:rgba(196,124,82,.16);
}
.alert--info .alert__icon{background:rgba(74,94,58,.16)}
.alert--danger .alert__icon{background:rgba(192,57,43,.12)}

/* ---------- Étapes numérotées : ligne de connexion ---------- */
.steps li{position:relative}
.steps li:not(:last-child)::after{
  content:"";position:absolute;left:13px;top:30px;bottom:-16px;width:2px;
  background:rgba(196,124,82,.25);
}
.steps__dot{
  position:relative;z-index:1;color:#fff;
  background:linear-gradient(155deg,var(--terracotta),var(--terracotta-d));
  box-shadow:0 4px 10px -4px rgba(196,124,82,.6);
}

/* ---------- Checklist : coche pleine ---------- */
.checklist li{border-radius:10px;transition:.25s cubic-bezier(.2,.7,.3,1)}
.checklist li:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--terracotta)}
.checklist li::before{
  content:"✓";width:22px;height:22px;border:none;border-radius:50%;
  background:var(--vert);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;line-height:1;
}

/* ---------- Cartes de données : relief + accent dégradé ---------- */
.data-card{transition:.25s cubic-bezier(.2,.7,.3,1)}
.data-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.data-card::after{background:linear-gradient(90deg,var(--terracotta),var(--terracotta-d))}

/* ---------- Tableau calendrier : survol ---------- */
.calendar tbody tr{transition:background .2s}
.calendar tbody tr:hover{background:rgba(196,124,82,.06)}

/* ---------- Image d'en-tête d'article ---------- */
.article-hero{border-radius:12px;overflow:hidden}

/* ---------- Badge superposé sur l'image d'en-tête (zone transparente) ---------- */
.article-hero--badged{position:relative}
.article-hero__badge{
  position:absolute;left:5%;top:50%;transform:translateY(-50%);
  max-width:230px;pointer-events:none;
}
.article-hero__badge-eyebrow{
  display:block;font-family:var(--sans);font-size:.68rem;letter-spacing:.28em;
  text-transform:uppercase;font-weight:700;color:var(--terracotta-d);margin-bottom:10px;
}
.article-hero__badge-title{
  font-family:var(--serif);font-size:1.55rem;font-weight:600;line-height:1.18;
  color:var(--brun);margin:0;
}
@media (max-width:640px){.article-hero__badge{display:none}}

/* ---------- « À lire aussi » : grille de cartes ---------- */
.related{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;list-style:none;padding:0;margin:22px 0 0}
.related-card{
  display:flex;align-items:center;gap:14px;
  background:var(--cream-2);border:1px solid var(--line);border-radius:8px;
  padding:16px 18px;transition:.25s cubic-bezier(.2,.7,.3,1);
}
.related-card:hover{border-color:var(--terracotta);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.related-card__ic{
  flex:none;width:40px;height:40px;border-radius:50%;
  background:rgba(196,124,82,.14);color:var(--terracotta-d);
  display:flex;align-items:center;justify-content:center;
}
.related-card__ic svg{width:19px;height:19px}
.related-card b{display:block;font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--brun);line-height:1.3}
.related-card .arrow{margin-left:auto;flex:none;width:16px;height:16px;color:var(--terracotta-d);transition:transform .25s}
.related-card:hover .arrow{transform:translateX(4px)}
@media(max-width:680px){.related{grid-template-columns:1fr}}

/* ---------- Page conseils (index) : articles en cartes ---------- */
.article-card{
  display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:center;
  background:var(--cream-2);border:1px solid var(--line);border-radius:12px;
  padding:24px;margin-bottom:26px;transition:.3s cubic-bezier(.2,.7,.3,1);
}
.article-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-4px);border-color:var(--terracotta)}
.article-card .article-hero{margin:0;aspect-ratio:4/3}
.article-card .article-hero img{width:100%;height:100%;object-fit:cover}
.article-card .section__head{border:none;padding-bottom:0;margin-bottom:10px}
.article-card .section__head::before{display:none}
@media(max-width:760px){
  .article-card{grid-template-columns:1fr;padding:18px}
}

/* ---------- Page conseils (index) : grille 3 colonnes ---------- */
.page--wide{max-width:1180px}
.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:26px}
.articles-grid .article-card{grid-template-columns:1fr;margin-bottom:0}
.articles-grid .article-card .article-hero{aspect-ratio:16/10}
@media(max-width:1020px){.articles-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.articles-grid{grid-template-columns:1fr}}

/* ---------- Bouton retour en haut ---------- */
.to-top{
  position:fixed;right:24px;bottom:24px;width:48px;height:48px;border-radius:50%;
  background:var(--brun);color:var(--cream-2);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:.3s cubic-bezier(.2,.7,.3,1);z-index:80;
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--terracotta)}

/* ---------- Pied de guide : accent décoratif ---------- */
.guide-footer{position:relative;overflow:hidden}
.guide-footer::before{
  content:"";position:absolute;right:-50px;top:-50px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(196,124,82,.25),transparent 70%);
}
.guide-footer > *{position:relative;z-index:1}

/* ---------- Mini-module produit (CTA panier dans les articles) ---------- */
.promo-product{
  display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:center;
  background:var(--cream-2);border:1px solid var(--line);border-radius:12px;padding:22px;
}
.promo-product__media{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:4/3}
.promo-product__media img{width:100%;height:100%;object-fit:cover;display:block}
.promo-product__badge{
  position:absolute;top:10px;left:10px;z-index:1;background:var(--terracotta-d);color:#fff;
  font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 10px;border-radius:100px;
}
.promo-product__kicker{margin:0 0 6px;font-family:var(--sans);font-size:.78rem;font-weight:700;color:var(--terracotta-d);text-transform:uppercase;letter-spacing:.03em}
.promo-product__body h3{margin:0 0 8px;font-family:var(--serif);font-size:1.35rem;color:var(--brun)}
.promo-product__desc{margin:0 0 18px;color:var(--brun-2);line-height:1.5}
.promo-product__row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.promo-product__price{font-family:var(--sans);font-weight:800;font-size:1.3rem;color:var(--brun)}
.promo-product__price small{font-weight:500;font-size:.72rem;color:var(--brun-2)}
@media(max-width:600px){
  .promo-product{grid-template-columns:1fr;padding:18px}
  .promo-product__media{aspect-ratio:16/10}
}

/* ---------- Petits mobiles : ajustements fins (guide + articles Conseils) ---------- */
@media(max-width:480px){
  .toolbar{padding:0 16px;min-height:60px;gap:10px}
  .toolbar__brand{font-size:1.05rem;gap:8px}
  .toolbar__brand .mark{width:28px;height:28px}
  .toolbar__brand small{font-size:.5rem;letter-spacing:.2em}
  .toolbar__back{font-size:0;gap:0}
  .toolbar__back svg{width:18px;height:18px}
  .cover{padding:20px 18px;margin-bottom:22px}
  .cover__meta{gap:14px}
  .cover__stat{padding:7px 12px 6px}
  .cover__stat b{font-size:1.25rem}
  .data-card b{font-size:1.7rem}
  .promo-product__row{gap:14px}
  .promo-product__price{font-size:1.15rem}
  .related-card{padding:14px}
  .related-card b{font-size:.95rem}
  .to-top{right:16px;bottom:16px;width:42px;height:42px}
}

/* ---------- Impression : masquer les ajouts non pertinents ---------- */
@media print{
  .to-top,.crumbs{display:none !important}
}