/* ============================================================ */
/* MOTS D'EAU — pages publiques (charte carnet qualite-eau)     */
/* Calé sur l'esthétique des fiches commune (Toulon)            */
/* ============================================================ */

/* Fond blanc comme le reste du site */
.mde-page{padding:36px 0 40px;background:var(--eau-bg)}

/* ---------- Fil d'Ariane ---------- */
.mde-breadcrumb{font-size:13px;color:var(--eau-muted);margin-bottom:26px;font-weight:700}
.mde-breadcrumb a{color:var(--eau-muted);text-decoration:none;transition:color .15s}
.mde-breadcrumb a:hover{color:var(--eau-cyan)}
.mde-breadcrumb span{margin:0 7px;color:var(--eau-line)}
.mde-breadcrumb > span:last-child{color:var(--eau-text-soft);margin:0}

/* ---------- Hero listing ---------- */
.mde-hero{margin-bottom:34px}
.mde-kicker{font-family:var(--eau-font-body);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:var(--eau-cyan);margin-bottom:14px}
.mde-hero h1{font-family:var(--eau-font-display);font-size:72px;font-weight:800;color:var(--eau-ink);letter-spacing:-.05em;line-height:.96;margin-bottom:20px}
.mde-hero h1 .accent{color:var(--eau-cyan)}
.mde-lead{font-size:19px;line-height:1.65;color:var(--eau-text-soft);max-width:680px;font-weight:500}
@media(max-width:1100px){.mde-hero h1{font-size:60px}}
@media(max-width:768px){.mde-hero h1{font-size:44px}.mde-lead{font-size:16px}}

/* ---------- Filtre catégories (chips façon .ville-chip) ---------- */
.mde-cats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.mde-cat{background:var(--eau-bg-soft);border:1px solid var(--eau-line);border-radius:999px;padding:10px 20px;font-weight:700;font-size:14.5px;color:var(--eau-ink);text-decoration:none;transition:all .15s}
.mde-cat:hover{background:var(--eau-ink);color:#fff;border-color:var(--eau-ink);transform:translateY(-2px)}
.mde-cat.is-active{background:var(--eau-ink);color:#fff;border-color:var(--eau-ink)}

/* ---------- Grille de cartes (façon .region-card, fond blanc cassé) ---------- */
.mde-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.mde-card{background:var(--eau-bg-soft);border:1px solid var(--eau-line);border-radius:22px;overflow:hidden;transition:all .15s}
.mde-card:hover{background:#fff;box-shadow:0 12px 28px rgba(21,59,74,.10);transform:translateY(-3px);border-color:var(--eau-cyan)}
.mde-card-link{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%}
.mde-card-img{aspect-ratio:3/2;overflow:hidden;background:var(--eau-cyan-bg)}
.mde-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.mde-card:hover .mde-card-img img{transform:scale(1.04)}
.mde-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.mde-card-cat{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.13em;color:var(--eau-cyan);margin-bottom:9px}
.mde-card-title{font-family:var(--eau-font-display);font-size:21px;font-weight:800;line-height:1.18;letter-spacing:-.02em;margin:0 0 9px;color:var(--eau-ink)}
.mde-card-chapo{font-size:14px;color:var(--eau-text-soft);line-height:1.55;margin:0 0 14px;flex:1}
.mde-card-meta{font-size:12.5px;color:var(--eau-muted);font-weight:600;margin-top:auto}

.mde-empty{background:var(--eau-bg-soft);border:1px dashed var(--eau-line);border-radius:20px;padding:48px 26px;text-align:center;color:var(--eau-text-soft);font-size:16px}

/* ---------- Pagination ---------- */
.mde-pagination{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:44px}
.mde-page{color:var(--eau-blue);text-decoration:none;font-weight:700;padding:10px 22px;border:2px solid var(--eau-blue);border-radius:999px;background:#fff;font-size:14px;transition:all .15s}
.mde-page:hover{background:var(--eau-blue);color:#fff}
.mde-page-info{font-size:14px;color:var(--eau-text-soft);font-weight:600}

/* ============================================================ */
/* ARTICLE                                                       */
/* ============================================================ */
.mde-article{max-width:1100px}
.mde-article-head{max-width:820px;margin-bottom:24px}
.mde-article-head .mde-card-cat{font-size:12px;margin-bottom:6px}
.mde-article-head h1{font-family:var(--eau-font-display);font-size:56px;font-weight:800;color:var(--eau-ink);letter-spacing:-.04em;line-height:1.02;margin:6px 0 16px}
@media(max-width:1100px){.mde-article-head h1{font-size:46px}}
@media(max-width:768px){.mde-article-head h1{font-size:34px}}
.mde-article-meta{font-size:14px;color:var(--eau-text-soft);font-weight:600;margin:0 0 18px}
.mde-chapo{font-size:22px;line-height:1.55;color:var(--eau-ink);font-weight:600}

/* Cover : plafonnée en hauteur, fond blanc, jamais géante */
.mde-cover{max-width:820px;margin:0 0 32px;border-radius:24px;overflow:hidden;box-shadow:0 16px 40px rgba(21,59,74,.12);background:var(--eau-bg-soft)}
.mde-cover img{width:100%;max-height:420px;object-fit:cover;display:block}

/* Sommaire — carte carnet crème */
.mde-toc{max-width:820px;background:var(--eau-carnet);border:1px solid var(--eau-line);border-radius:18px;padding:20px 26px;margin:0 0 34px}
.mde-toc-title{font-family:var(--eau-font-display);font-weight:800;margin:0 0 10px;font-size:15px;color:var(--eau-ink)}
.mde-toc ul{list-style:none;margin:0;padding:0}
.mde-toc li{margin:5px 0}
.mde-toc li a{color:var(--eau-blue);text-decoration:none;font-size:14.5px;font-weight:600;transition:color .15s}
.mde-toc li a:hover{color:var(--eau-cyan)}
.mde-toc-l3{padding-left:18px}
.mde-toc-l3 a{color:var(--eau-text-soft);font-weight:500}

/* Corps de l'article — fond blanc, tailles façon fiches */
.mde-content{max-width:760px;font-size:18.5px;line-height:1.82;color:var(--eau-text)}
.mde-content > h2{font-family:var(--eau-font-display);font-size:32px;font-weight:800;color:var(--eau-blue);letter-spacing:-.025em;line-height:1.12;margin:52px 0 18px;scroll-margin-top:90px;padding-left:16px;border-left:5px solid var(--eau-cyan)}
.mde-content > h3{font-family:var(--eau-font-display);font-size:24px;font-weight:800;color:var(--eau-ink);letter-spacing:-.015em;margin:36px 0 12px;scroll-margin-top:90px}
@media(max-width:768px){.mde-content{font-size:17.5px}.mde-content > h2{font-size:26px;padding-left:12px;border-left-width:4px}.mde-content > h3{font-size:21px}}
.mde-content p{margin:0 0 22px}
.mde-content > p:first-of-type::first-letter{float:left;font-family:var(--eau-font-display);font-size:64px;line-height:.82;font-weight:800;color:var(--eau-cyan);margin:6px 12px 0 0}
.mde-content strong{color:var(--eau-ink);font-weight:800;background:linear-gradient(transparent 62%, rgba(34,199,221,.28) 62%)}
.mde-content a{color:var(--eau-blue);font-weight:700;border-bottom:2px solid rgba(34,199,221,.5);text-decoration:none;transition:all .15s}
.mde-content a:hover{color:var(--eau-cyan);border-bottom-color:var(--eau-cyan)}
.mde-content ul,.mde-content ol{margin:0 0 18px;padding-left:24px}
.mde-content li{margin:8px 0}
.mde-content blockquote{border-left:4px solid var(--eau-cyan);margin:22px 0;padding:14px 22px;color:var(--eau-text-soft);background:var(--eau-bg-soft);border-radius:0 14px 14px 0;font-size:16px}
.mde-content blockquote p:last-child{margin:0}
.mde-content table{width:100%;border-collapse:separate;border-spacing:0;margin:26px 0;font-size:15px;border:1px solid var(--eau-line);border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(21,59,74,.05)}
.mde-content thead th{background:#DCEEDF;color:#1f4d2c;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.05em;text-align:left;padding:13px 16px;white-space:nowrap;border-bottom:2px solid #8FC79B}
.mde-content tbody td{padding:12px 16px;border-bottom:1px solid var(--eau-line);vertical-align:middle}
.mde-content tbody tr:last-child td{border-bottom:none}
.mde-content tbody tr:nth-child(even){background:rgba(99,153,34,.05)}
.mde-content tbody tr:hover{background:rgba(99,153,34,.10);transition:background .15s ease}
.mde-content tbody td:first-child{font-variant-numeric:tabular-nums}
.mde-content tbody td:last-child{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}

/* Image dans le corps — plafonnée elle aussi */
.article-img{max-width:820px;margin:32px 0;border-radius:20px;overflow:hidden;box-shadow:0 14px 34px rgba(21,59,74,.10);background:var(--eau-bg-soft)}
.article-img img{width:100%;max-height:480px;object-fit:cover;display:block}

/* Articles connexes */
.mde-connexes{max-width:1100px;margin-top:56px;padding-top:36px;border-top:1px solid var(--eau-line)}
.mde-connexes h2{font-family:var(--eau-font-display);font-size:30px;font-weight:800;color:var(--eau-blue);letter-spacing:-.02em;margin:0 0 24px}
.mde-connexes .mde-card-title{font-size:18px}

@media(max-width:768px){
    .mde-grid{grid-template-columns:1fr}
    .mde-chapo{font-size:17px}
    .mde-content{font-size:16px}
    .mde-content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:14px}
    .mde-content thead th,.mde-content tbody td{padding:9px 11px}
}

/* ---------- Gras dans les tableaux : sobre, sans surlignage cyan ---------- */
/* Le surlignage cyan du gras est réservé au texte courant ; dans les cellules */
/* il surchargeait chaque valeur. On garde le gras foncé, on retire le fond.    */
.mde-content table strong,
.mde-content table b{background:none;color:var(--eau-ink)}

/* ---------- Lien "Lire tous nos articles" (bloc derniers articles sur la home) ---------- */
.home-articles-all{text-align:center;margin:28px 0 0}
.home-articles-all a{display:inline-block;font-weight:700;font-size:15px;color:var(--eau-blue);text-decoration:none;border-bottom:2px solid rgba(34,199,221,.5);padding-bottom:2px;transition:all .15s}
.home-articles-all a:hover{color:var(--eau-cyan);border-bottom-color:var(--eau-cyan)}

/* ---------- Bloc de recherche inséré dans un article (shortcode [recherche]) ---------- */
/* Scopé .mde-recherche : n'affecte QUE les articles de blog, jamais le header/home. */
.mde-recherche{margin:34px 0;padding:22px 24px;background:var(--eau-bg-soft);border:1px solid var(--eau-line);border-left:3px solid var(--eau-cyan);border-radius:12px}
.mde-recherche-titre{margin:0 0 14px;font-family:var(--eau-font-display);font-size:19px;font-weight:600;color:var(--eau-ink);text-align:center}
.mde-recherche-txt{margin:12px 0 0;font-size:14px;color:var(--eau-text-soft);text-align:center}
/* Champ : pleine largeur, bordure fine, on neutralise l'aspect "pilule hero". */
.mde-recherche .eau-search{max-width:none;flex:none;width:100%}
.mde-recherche .eau-search-box{height:50px;border-radius:10px;border:1.5px solid var(--eau-line);background:#fff}
.mde-recherche .eau-search-box:focus-within{border-color:var(--eau-cyan);box-shadow:0 0 0 3px var(--eau-cyan-bg)}
.mde-recherche .eau-search-box svg{color:var(--eau-cyan)}
.mde-recherche .eau-search input{font-size:16px}