/* ============================================================
   CONSEILS PATIENTS — Centre Dentaire Walili
   Style partagé pour les articles conseils (format hybride)
============================================================ */

.conseil-page { background:#f4f7f9; min-height:100vh; }

/* HERO */
.conseil-hero {
    background: linear-gradient(135deg, var(--primary) 0%, var(--dark) 100%);
    color:#fff;
    padding: 120px 20px 50px;
    text-align:center;
}
.conseil-hero .breadcrumb {
    font-size:.78rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:.8rem;
}
.conseil-hero .breadcrumb a { color:var(--accent); text-decoration:none; }
.conseil-hero .breadcrumb a:hover { color:#fff; }
.conseil-hero h1 {
    font-family:var(--font-heading);
    font-size:clamp(1.5rem, 3.5vw, 2.2rem);
    color:#fff;
    line-height:1.3;
    margin:0 auto .5rem;
    max-width:760px;
}
.conseil-hero .sub {
    color:rgba(255,255,255,.78);
    font-size:.92rem;
    margin:0;
}

/* CONTAINER */
.conseil-wrap { max-width:780px; margin:-30px auto 3rem; padding:0 16px; }

/* WHATSAPP CARD — visible en haut, screenshotable */
.wa-card {
    background:#fff;
    border-radius:14px;
    padding:1.8rem 1.6rem;
    box-shadow:0 14px 40px rgba(57,64,92,.12);
    margin-bottom:2rem;
    border-top:4px solid var(--accent);
    position:relative;
}
.wa-card.share-only {
    border-top:none;
    background:transparent;
    box-shadow:none;
    padding:0.5rem 0 1.5rem;
    margin:0 0 1.5rem;
}
.wa-card.share-only .share-row {
    margin-top:0;
}
.wa-card .badge {
    display:inline-block;
    background:var(--accent);
    color:#fff;
    padding:4px 12px;
    border-radius:30px;
    font-size:.7rem;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin-bottom:1rem;
}
.wa-card h2 {
    font-family:var(--font-heading);
    color:var(--primary);
    font-size:1.15rem;
    margin:0 0 .8rem;
    line-height:1.4;
}
.wa-card ul.key-points {
    list-style:none;
    padding:0;
    margin:0 0 1.2rem;
}
.wa-card ul.key-points li {
    padding:.55rem 0 .55rem 1.8rem;
    position:relative;
    font-size:.95rem;
    line-height:1.55;
    color:var(--text);
    border-bottom:1px solid #eef2f5;
}
.wa-card ul.key-points li:last-child { border-bottom:none; }
.wa-card ul.key-points li::before {
    content:"✓";
    position:absolute;
    left:0;
    top:.55rem;
    width:20px; height:20px;
    background:#22c55e;
    color:#fff;
    font-size:.7rem;
    font-weight:700;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.wa-card .share-row {
    display:flex;
    gap:.6rem;
    flex-wrap:wrap;
    margin-top:1rem;
    padding-top:1rem;
    border-top:1px solid #eef2f5;
}
.wa-card .share-btn {
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.6rem 1.1rem;
    border-radius:6px;
    font-size:.82rem;
    font-weight:600;
    text-decoration:none;
    transition:.2s;
    border:none;
    cursor:pointer;
}
.wa-card .share-btn.wa { background:#25d366; color:#fff; }
.wa-card .share-btn.wa:hover { background:#1ebe5a; }
.wa-card .share-btn.copy { background:#eef2f5; color:var(--primary); }
.wa-card .share-btn.copy:hover { background:#dce4eb; }
.wa-card .share-btn.print { background:#f4f7f9; color:var(--secondary); border:1px solid #dce4eb; }
.wa-card .share-btn.print:hover { background:#eef2f5; }

/* PHOTO */
.conseil-photo {
    width:100%;
    border-radius:10px;
    margin:1.5rem 0;
    box-shadow:0 6px 20px rgba(57,64,92,.10);
    background:#eef2f5;
    aspect-ratio: 4/3;
    object-fit:cover;
    display:block;
}
.conseil-photo-placeholder {
    width:100%;
    aspect-ratio:4/3;
    background:linear-gradient(135deg,#eef2f5 0%,#dce4eb 100%);
    border:2px dashed #b6c0cb;
    border-radius:10px;
    margin:1.5rem 0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#8a92a0;
    font-size:.85rem;
    font-style:italic;
    text-align:center;
    padding:1.5rem;
}

/* SECTION BLOCKS */
.cseil-section {
    background:#fff;
    border-radius:12px;
    padding:1.6rem 1.5rem;
    margin-bottom:1.2rem;
    box-shadow:0 4px 16px rgba(57,64,92,.06);
}
.cseil-section h2 {
    font-family:var(--font-heading);
    font-size:1.1rem;
    color:var(--primary);
    margin:0 0 .9rem;
    display:flex;
    align-items:center;
    gap:.6rem;
    padding-bottom:.6rem;
    border-bottom:2px solid #eef2f5;
}
.cseil-section h2 .ic {
    width:30px; height:30px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.85rem;
    color:#fff;
    flex-shrink:0;
}
.cseil-section.do h2 .ic { background:#22c55e; }
.cseil-section.dont h2 .ic { background:#ef4444; }
.cseil-section.time h2 .ic { background:#3b82f6; }
.cseil-section.call h2 .ic { background:#f59e0b; }
.cseil-section ul { list-style:none; padding:0; margin:0; }
.cseil-section ul li {
    padding:.5rem 0 .5rem 1.6rem;
    position:relative;
    font-size:.92rem;
    line-height:1.65;
    color:var(--text);
    border-bottom:1px dashed #eef2f5;
}
.cseil-section ul li:last-child { border-bottom:none; }
.cseil-section.do ul li::before { content:"✓"; position:absolute; left:0; color:#22c55e; font-weight:700; }
.cseil-section.dont ul li::before { content:"✕"; position:absolute; left:0; color:#ef4444; font-weight:700; }
.cseil-section.time ul li::before { content:"●"; position:absolute; left:.3rem; color:#3b82f6; }
.cseil-section.call ul li::before { content:"☎"; position:absolute; left:0; color:#f59e0b; }
.cseil-section p { font-size:.92rem; line-height:1.7; color:var(--text); margin:0 0 .8rem; }
.cseil-section p:last-child { margin-bottom:0; }
.cseil-section strong { color:var(--primary); }

/* CTA bottom */
.conseil-cta {
    background:linear-gradient(135deg,var(--primary) 0%,#2a3050 100%);
    color:#fff;
    border-radius:12px;
    padding:1.6rem 1.5rem;
    text-align:center;
    margin-top:1.5rem;
}
.conseil-cta h3 {
    font-family:var(--font-heading);
    color:#fff;
    font-size:1.05rem;
    margin:0 0 .4rem;
}
.conseil-cta p {
    color:rgba(255,255,255,.85);
    font-size:.88rem;
    margin:0 0 1rem;
}
.conseil-cta .cta-btns {
    display:flex;
    gap:.6rem;
    flex-wrap:wrap;
    justify-content:center;
}
.conseil-cta .cta-btn {
    padding:.7rem 1.3rem;
    border-radius:6px;
    font-weight:600;
    text-decoration:none;
    font-size:.85rem;
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    transition:.2s;
}
.conseil-cta .cta-btn.tel { background:#fff; color:var(--primary); }
.conseil-cta .cta-btn.tel:hover { background:var(--accent); color:#fff; }
.conseil-cta .cta-btn.wa { background:#25d366; color:#fff; }
.conseil-cta .cta-btn.wa:hover { background:#1ebe5a; }

/* RELATED */
.conseil-related { margin-top:2rem; }
.conseil-related h3 {
    font-family:var(--font-heading);
    color:var(--primary);
    font-size:1rem;
    text-align:center;
    margin:0 0 1rem;
}
.conseil-related-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:.8rem;
}
.conseil-related-grid a {
    background:#fff;
    padding:.9rem 1rem;
    border-radius:8px;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:.6rem;
    color:var(--primary);
    font-size:.85rem;
    font-weight:600;
    border:1px solid rgba(94,111,131,.15);
    transition:.2s;
}
.conseil-related-grid a:hover { border-color:var(--accent); transform:translateY(-2px); }
.conseil-related-grid i { color:var(--accent); }

/* ============================================================
   IMPRESSION — version papier propre
============================================================ */
@media print {
    .navbar, .footer, .whatsapp-btn, .conseil-cta, .conseil-related, .wa-card .share-row { display:none !important; }
    .conseil-page { background:#fff; }
    .conseil-hero {
        background:#fff !important;
        color:#000 !important;
        padding:20px 0;
    }
    .conseil-hero h1 { color:#000 !important; }
    .conseil-hero .breadcrumb, .conseil-hero .sub { color:#444 !important; }
    .conseil-hero .breadcrumb a { color:#444 !important; }
    .wa-card, .cseil-section { box-shadow:none; border:1px solid #ddd; page-break-inside:avoid; }
    .conseil-photo-placeholder { display:none; }
    a { text-decoration:underline; color:#000; }
    body { font-size:11pt; }
}

/* ============================================================
   CATALOGUE — page index /conseils/
============================================================ */
.conseils-catalog-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:1rem;
    margin-top:2rem;
}
.conseils-cat {
    background:#fff;
    border-radius:10px;
    padding:1.3rem 1.2rem;
    border:1px solid rgba(94,111,131,.12);
    text-decoration:none;
    display:block;
    transition:.25s;
    position:relative;
}
.conseils-cat:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:0 12px 30px rgba(57,64,92,.10); }
.conseils-cat .ic-circle {
    width:42px; height:42px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--primary),var(--accent));
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:1.05rem;
    margin-bottom:.8rem;
}
.conseils-cat h3 {
    font-family:var(--font-heading);
    color:var(--primary);
    font-size:1rem;
    margin:0 0 .4rem;
    line-height:1.35;
}
.conseils-cat p {
    color:var(--secondary);
    font-size:.84rem;
    line-height:1.55;
    margin:0;
}
.conseils-cat .tag {
    position:absolute;
    top:1rem; right:1rem;
    background:#eef2f5;
    color:var(--secondary);
    font-size:.65rem;
    padding:2px 8px;
    border-radius:30px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.5px;
}
.conseils-cat.coming-soon { opacity:.6; pointer-events:none; }
.conseils-cat.coming-soon .tag { background:#f59e0b; color:#fff; }
.conseils-cat-section { margin-bottom:2.5rem; }
.conseils-cat-section-title {
    font-family:var(--font-heading);
    color:var(--primary);
    font-size:1.15rem;
    margin:0 0 .5rem;
    padding-bottom:.6rem;
    border-bottom:2px solid var(--accent);
    display:inline-block;
}

/* ============================================================
   SECTION INFOGRAPHIE WHATSAPP — partageable (Option C hybride)
============================================================ */
.cseil-share-card {
  background: linear-gradient(135deg, #1f6b4a 0%, #25d366 100%);
  color: #fff;
  border-radius: 14px;
  padding: 1.8rem 1.6rem;
  margin: 2rem 0;
  box-shadow: 0 14px 40px rgba(37, 211, 102, 0.18);
}
.cseil-share-card .badge-wa {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255,255,255,.18);
  color: #fff;
  padding: 4px 12px;
  border-radius: 30px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.cseil-share-card h2 {
  font-family: var(--font-heading);
  color: #fff;
  font-size: 1.2rem;
  margin: 0 0 .5rem;
  line-height: 1.4;
}
.cseil-share-card .sub {
  color: rgba(255,255,255,.88);
  font-size: .92rem;
  line-height: 1.6;
  margin: 0 0 1.3rem;
}
.cseil-infographic {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.2rem;
}
.cseil-infographic img {
  width: 100%;
  height: auto;
  display: block;
}
.cseil-infographic-placeholder {
  background: rgba(255,255,255,.92);
  color: #1f6b4a;
  padding: 3rem 1.5rem;
  text-align: center;
  font-size: .88rem;
  border: 2px dashed rgba(31,107,74,.3);
  border-radius: 8px;
}
.cseil-infographic-placeholder i {
  font-size: 2rem;
  display: block;
  margin-bottom: .6rem;
  color: rgba(31,107,74,.55);
}
.cseil-infographic-placeholder strong { color: #1f6b4a; }
.cseil-share-buttons {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}
.cseil-share-buttons a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.3rem;
  border-radius: 8px;
  font-size: .87rem;
  font-weight: 600;
  text-decoration: none;
  transition: .2s;
}
.cseil-share-buttons .btn-dl {
  background: #fff;
  color: #1f6b4a;
}
.cseil-share-buttons .btn-dl:hover {
  background: #f4f7f9;
  transform: translateY(-2px);
}
.cseil-share-buttons .btn-share-wa {
  background: rgba(0,0,0,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
}
.cseil-share-buttons .btn-share-wa:hover {
  background: rgba(0,0,0,.3);
}
.cseil-share-card .hint {
  margin-top: .9rem;
  font-size: .76rem;
  color: rgba(255,255,255,.7);
  font-style: italic;
}
@media (max-width: 480px) {
  .cseil-share-buttons { flex-direction: column; }
  .cseil-share-buttons a { justify-content: center; width: 100%; }
}

/* Cacher la section infographie à l'impression */
@media print {
  .cseil-share-card { display: none !important; }
}