/* Econseil Outils — styles front.
   Réutilise les tokens du thème Econseil Expert s'ils existent, avec valeurs de repli. */
.eco-tool-page, .eco-archive, .eco-page-hero {
  --eco-navy:#0A1E38; --eco-ink:#0D1726; --eco-muted:#4A5568; --eco-paper:#F6F9FB;
  --eco-line:#E3E9F0; --eco-teal:#0B6E6B; --eco-teal-500:#14A8A2;
  --eco-radius:14px; --eco-radius-sm:9px;
  --eco-shadow:0 1px 2px rgba(10,30,56,.05),0 8px 24px rgba(10,30,56,.06);
}

.eco-container { width:100%; max-width:1180px; margin-inline:auto; padding-inline:clamp(1.2rem,4vw,2.5rem); }
.eco-container--narrow { max-width:860px; }

/* Fil d'Ariane */
.eco-breadcrumb ol { list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; padding:0; margin:0 0 1rem; font-size:.85rem; color:var(--eco-muted); }
.eco-breadcrumb li:not(:last-child)::after { content:"/"; margin-left:.4rem; color:#cbd5e1; }
.eco-breadcrumb a { color:var(--eco-teal); text-decoration:none; }

/* En-tête outil */
.eco-tool-page { padding-block:clamp(2rem,5vw,3.5rem); }
.eco-tool-head { margin-bottom:1.8rem; }
.eco-tool-head__tag { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:600; color:var(--eco-teal); text-decoration:none; padding:.3rem .7rem; background:rgba(20,168,162,.1); border-radius:999px; margin-bottom:.8rem; }
.eco-tool-head__tag svg { width:14px; height:14px; }
.eco-tool-head__title { font-weight:800; font-family:"Inter",system-ui,sans-serif; font-size:clamp(1.8rem,1.4rem+2vw,2.6rem); line-height:1.1; margin:0 0 .5rem; color:var(--eco-navy); }
.eco-tool-head__lead { font-size:1.15rem; color:var(--eco-muted); margin:0; }

/* Conteneur de l'outil interactif */
.eco-tool-container { background:#fff; border:1px solid var(--eco-line); border-radius:var(--eco-radius); padding:clamp(1.2rem,3vw,2rem); box-shadow:var(--eco-shadow); margin-bottom:2rem; }
.eco-tool-empty { text-align:center; color:var(--eco-muted); padding:2rem; }
.eco-btn { display:inline-block; background:var(--eco-teal); color:#fff; padding:.7rem 1.3rem; border-radius:var(--eco-radius-sm); text-decoration:none; font-weight:600; margin-top:.8rem; }

/* Contenu SEO */
.eco-tool-content { max-width:760px; line-height:1.7; color:var(--eco-ink); }
.eco-tool-content h2 { font-weight:800; font-family:"Inter",system-ui,sans-serif; font-size:1.6rem; margin:1.8rem 0 .6rem; color:var(--eco-navy); }
.eco-tool-content h3 { font-size:1.2rem; margin:1.3rem 0 .4rem; }

/* FAQ */
.eco-tool-faq { max-width:760px; margin-top:2.5rem; }
.eco-tool-faq h2 { font-family:"Inter",system-ui,sans-serif; color:var(--eco-navy); }
.eco-tool-faq details { border:1px solid var(--eco-line); border-radius:var(--eco-radius-sm); padding:.9rem 1.1rem; margin-bottom:.7rem; }
.eco-tool-faq summary { font-weight:600; cursor:pointer; }

/* Grilles & cartes */
.eco-grid { display:grid; gap:1rem; }
.eco-grid--cols-2 { grid-template-columns:repeat(2,1fr); }
.eco-grid--cols-3 { grid-template-columns:repeat(3,1fr); }
.eco-grid--cols-4 { grid-template-columns:repeat(4,1fr); }
.eco-card { display:flex; align-items:flex-start; gap:.9rem; text-decoration:none; background:#fff; border:1px solid var(--eco-line); border-radius:var(--eco-radius-sm); padding:1.1rem 1.2rem; color:var(--eco-ink); transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.eco-card:hover { border-color:var(--eco-teal-500); box-shadow:var(--eco-shadow); transform:translateY(-2px); }
.eco-card__icon { flex:0 0 auto; width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:rgba(20,168,162,.12); color:var(--eco-teal); }
.eco-card__icon svg { width:22px; height:22px; }
.eco-card__body { display:flex; flex-direction:column; gap:.2rem; }
.eco-card__title { color:var(--eco-navy); font-weight:600; }
.eco-card__desc { color:var(--eco-muted); font-size:.85rem; }

/* Hub */
.eco-page-hero { background:var(--eco-navy); color:#fff; padding-block:clamp(2.5rem,6vw,4rem); }
.eco-page-hero h1 { font-weight:800; font-family:"Inter",system-ui,sans-serif; font-size:clamp(2rem,1.6rem+2vw,3rem); margin:0 0 .5rem; color:#fff; }
.eco-page-hero__lead { color:#C6D3E2; font-size:1.15rem; max-width:46rem; margin:0; }
.eco-page-hero .eco-breadcrumb a, .eco-page-hero .eco-breadcrumb { color:#9FB2C8; }
.eco-archive { padding-block:clamp(2.5rem,5vw,4rem); }

/* Filtres */
.eco-filters { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.eco-filter { padding:.5rem 1rem; border:1px solid var(--eco-line); border-radius:999px; text-decoration:none; color:var(--eco-muted); font-weight:500; font-size:.9rem; }
.eco-filter.is-active, .eco-filter:hover { background:var(--eco-navy); color:#fff; border-color:var(--eco-navy); }

/* Liés + pagination */
.eco-related { margin-top:3rem; }
.eco-related__title { font-weight:800; font-family:"Inter",system-ui,sans-serif; font-size:1.5rem; color:var(--eco-navy); margin-bottom:1rem; }
.eco-pagination { display:flex; gap:.5rem; justify-content:center; margin-top:2.5rem; flex-wrap:wrap; }
.eco-pagination .page-numbers { display:inline-grid; place-items:center; min-width:42px; height:42px; padding:0 .6rem; border:1px solid var(--eco-line); border-radius:9px; text-decoration:none; color:var(--eco-navy); font-weight:600; }
.eco-pagination .current { background:var(--eco-navy); color:#fff; border-color:var(--eco-navy); }

@media (max-width:820px){ .eco-grid--cols-3,.eco-grid--cols-4 { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .eco-grid--cols-2,.eco-grid--cols-3,.eco-grid--cols-4 { grid-template-columns:1fr; } }