/* assets/css/guide.css — onglet « Guide » (articles repris du blog Ovinbio).
   Se charge en plus de assets/css/style.css, uniquement sur guide.php et guide-*.php. */

/* ---------- En-tête de page ---------- */
.guide-hero h1{ max-width:900px; margin-top:8px; }
.guide-meta{ margin-top:14px; font-size:0.92rem; color:var(--slate); }
.breadcrumb span{ color:var(--slate-light); }

/* ---------- Mise en page : article + colonne latérale ---------- */
.guide-layout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px; align-items:start; }
@media (max-width:980px){ .guide-layout{ grid-template-columns:1fr; gap:40px; } }
.guide-figure{ margin:0 0 32px; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.guide-figure img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }

/* ---------- Sommaire ---------- */
.guide-toc{ background:var(--cloud); border:1px solid var(--line); border-radius:var(--r-md); padding:22px 26px; margin-bottom:36px; }
.guide-toc-title{ font-family:var(--font-display); font-weight:600; color:var(--navy-dark); margin:0 0 10px; }
.guide-toc ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; }
.guide-toc a{ color:var(--navy); }
.guide-toc a:hover{ text-decoration:underline; }

/* ---------- Texte de l'article ---------- */
.blog-article{ min-width:0; font-size:1.02rem; line-height:1.75; color:var(--ink); }
.blog-article h2{ margin-top:2.4rem; margin-bottom:.6rem; scroll-margin-top:96px; }
.blog-article h3{ margin-top:1.6rem; margin-bottom:.4rem; }
.blog-article p{ margin:0 0 1rem; }
.blog-article p.lead{ font-size:1.15rem; color:var(--slate); }
.blog-article a:not(.btn){ color:var(--navy-light); text-decoration:underline; text-underline-offset:2px; }
.blog-article a:not(.btn):hover{ color:var(--navy-dark); }
.blog-article .unordered-list,
.blog-article ul:not([class]){ list-style:disc; padding-left:1.3rem; margin:0 0 1.2rem; }
.blog-article ol{ list-style:decimal; padding-left:1.4rem; margin:0 0 1.2rem; }
.blog-article li{ margin-bottom:.4rem; }
.blog-article li::marker{ color:var(--orange); }
.blog-article img{ max-width:100%; height:auto; }

/* Tableaux : défilement horizontal sur mobile */
.blog-article .table-responsive{ overflow-x:auto; margin:0 0 1.4rem; -webkit-overflow-scrolling:touch; }
.blog-article table{ width:100%; border-collapse:collapse; font-size:.95rem; line-height:1.5; }
.blog-article th, .blog-article td{ border:1px solid var(--line); padding:10px 14px; text-align:left; vertical-align:top; }
.blog-article thead th{ background:var(--aqua-light); color:var(--navy-dark); font-family:var(--font-display); font-weight:600; }
.blog-article tbody tr:nth-child(even) td{ background:var(--cloud); }

/* ---------- Encadrés (à retenir, produit, Aquacollect, avertissement) ---------- */
.guide-callout{ margin:2rem 0; padding:24px 28px; border-radius:var(--r-md); background:var(--cloud); border:1px solid var(--line); }
.guide-callout p:last-child, .guide-callout ul:last-child{ margin-bottom:0; }
.guide-callout-title{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:var(--navy-dark); margin:0 0 10px; }
.guide-callout--key{ background:#fff; border-left:5px solid var(--orange); box-shadow:var(--shadow-sm); }
.guide-callout--product{ background:var(--aqua-light); border-color:transparent; }
.guide-callout--aq{ background:var(--navy); border-color:transparent; color:#C9DCE8; }
.guide-callout--aq .guide-callout-title{ color:#fff; }
.guide-callout-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.guide-callout--aq .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.45); }
.guide-note{ font-size:.85rem; color:var(--slate); }
.blog-article .alert{ margin:1.4rem 0; padding:16px 20px; border-radius:var(--r-md); background:#FFF4E6; border:1px solid #F7D3A8; color:#7A4A12; font-size:.95rem; }

/* Cartes du gabarit d'origine (simulateur, etc.) */
.blog-article .card{ padding:0; box-shadow:var(--shadow-md); transform:none !important; }
.blog-article .card-body{ padding:26px 28px; }
.blog-article .bg-soft-primary{ background:var(--aqua-light); box-shadow:none; }
.blog-article .shadow-lg{ box-shadow:var(--shadow-lg); }

/* Grille minimale pour les blocs de l'article « simulateur » */
.blog-article .row{ display:flex; flex-wrap:wrap; gap:16px; }
.blog-article .row > [class*="col-"]{ flex:1 1 100%; min-width:0; }
@media (min-width:700px){
  .blog-article .row > .col-md-6{ flex:1 1 calc(50% - 16px); }
  .blog-article .row > .col-md-4{ flex:1 1 calc(33.333% - 16px); }
  .blog-article .row > .col-md-3{ flex:1 1 calc(25% - 16px); }
}
.blog-article .row > .col-6{ flex:1 1 calc(50% - 16px); }
.blog-article .form-label{ display:block; font-weight:600; font-size:.92rem; color:var(--navy-dark); margin-bottom:6px; }
.blog-article .form-control, .blog-article .form-select{
  width:100%; padding:11px 14px; font:inherit; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:var(--r-sm, 10px);
}
.blog-article .form-control:focus, .blog-article .form-select:focus{ outline:2px solid var(--aqua); outline-offset:1px; border-color:var(--aqua); }
.blog-article .h3{ font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:var(--navy-dark); }
.blog-article .text-primary{ color:var(--orange-dark); }
.blog-article .text-center{ text-align:center; }
.blog-article .text-muted{ color:var(--slate); }
.blog-article .fs-13{ font-size:.82rem; }
.blog-article .fs-14{ font-size:.88rem; }
.blog-article .mb-0{ margin-bottom:0; }
.blog-article .mt-4{ margin-top:1.4rem; }

/* ---------- FAQ ---------- */
.guide-faq{ margin:1rem 0 2rem; }

/* ---------- Cartes d'articles (index du Guide + « À lire aussi ») ---------- */
.guide-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:26px; }
.guide-card{ display:flex; flex-direction:column; gap:8px; color:inherit; text-decoration:none !important; }
.guide-card img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--r-md); box-shadow:var(--shadow-sm); transition:transform var(--transition), box-shadow var(--transition); }
.guide-card:hover img{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.guide-card-title{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; line-height:1.35; color:var(--navy-dark); }
.guide-card-excerpt{ font-size:.9rem; line-height:1.55; color:var(--slate); }
.guide-related{ margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line); }
.guide-related h2{ margin-top:0; }

/* ---------- Colonne latérale ---------- */
.guide-aside{ position:sticky; top:96px; display:flex; flex-direction:column; gap:20px; }
@media (max-width:980px){ .guide-aside{ position:static; } }
.guide-aside-box{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:22px 22px 24px; box-shadow:var(--shadow-sm); }
.guide-aside-box ul{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:8px; font-size:.95rem; }
.guide-aside-box a:not(.btn){ color:var(--navy); }
.guide-aside-box a:not(.btn):hover{ text-decoration:underline; }
.guide-aside-title{ font-family:var(--font-display); font-weight:600; color:var(--navy-dark); margin:0 0 12px; }
.guide-aside-box--cta{ background:var(--navy); border-color:transparent; color:#C9DCE8; font-size:.95rem; }
.guide-aside-box--cta .guide-aside-title{ color:#fff; }
.guide-aside-box--cta p:not(.guide-aside-title){ margin:0 0 16px; }

/* ---------- Page d'index du Guide ---------- */
.guide-cats{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 40px; }
.guide-cats a{ padding:8px 16px; border-radius:999px; border:1.5px solid var(--line); background:#fff; color:var(--navy); font-size:.92rem; font-weight:500; text-decoration:none; transition:background var(--transition), border-color var(--transition); }
.guide-cats a:hover{ background:var(--aqua-light); border-color:var(--aqua); }
.guide-start{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; padding:26px 30px; border-radius:var(--r-lg); background:var(--aqua-light); margin-bottom:56px; }
.guide-start p{ margin:0; max-width:720px; }
.guide-start p strong{ font-family:var(--font-display); color:var(--navy-dark); }
.guide-cat{ margin-bottom:56px; scroll-margin-top:96px; }
.guide-cat > p{ max-width:760px; color:var(--slate); margin:8px 0 24px; }