/* ============================================================
   DN Exposer LLC, addition.css
   Outils interactifs places dans .article-body.
   A charger APRES article.css : plusieurs regles neutralisent
   la mise en forme par descendance de .article-body (listes,
   paragraphes) a l'interieur des outils.

   Aucune couleur, police ou rayon nouveau : tout passe par les
   variables deja definies dans main.css. Seule exception, le
   statut "Review" reprend l'ambre du .preview-banner.
   ============================================================ */


/* ══════════════════════════════════════════════════════════════
   1. CADRE COMMUN
   ══════════════════════════════════════════════════════════════ */

.article-body .dnx-tool{
  margin:44px 0;padding:32px 34px;
  background:var(--white);
  border:1px solid var(--border);border-top:3px solid var(--rose);
  border-radius:var(--r-xl);box-shadow:var(--sh-sm);
  font-family:var(--f-body);
}

/* L'outil reste masque tant que addition.js ne l'a pas active :
   sans script, aucun formulaire inerte n'apparait dans l'article. */
.article-body .dnx-tool[hidden]{display:none}

/* Le titre n'est pas un h3 : un h3 entrerait dans le sommaire. */
.article-body .dnx-tool__title{
  margin:0 0 8px;
  font-family:var(--f-display);font-weight:400;
  font-size:1.4rem;line-height:1.25;color:var(--slate);
}
.article-body .dnx-tool__lede{
  margin:0 0 24px;
  font-size:.92rem;line-height:1.7;color:var(--muted);
}
.article-body .dnx-tool__note{
  margin:24px 0 0;padding-top:16px;
  border-top:1px solid var(--border);
  font-size:.8rem;line-height:1.65;color:var(--light);
}

/* Listes internes : on garde la puce rose du site, en plus serre. */
.article-body .dnx-tool ul{margin:0;gap:6px}
.article-body .dnx-tool li{
  padding-left:20px;
  font-size:.88rem;line-height:1.65;color:var(--muted);
}
.article-body .dnx-tool ul > li::before{top:9px;left:3px;width:6px;height:6px}


/* ══════════════════════════════════════════════════════════════
   2. CHAMPS ET BOUTONS
   ══════════════════════════════════════════════════════════════ */

.article-body .dnx-tool__label{
  display:block;margin-bottom:8px;
  font-size:.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);
}
.article-body .dnx-tool__textarea{
  display:block;width:100%;min-height:160px;
  padding:14px 16px;
  font-family:var(--f-body);font-size:.95rem;line-height:1.6;color:var(--text);
  background:var(--cream);
  border:1px solid var(--border);border-radius:var(--r-md);
  resize:vertical;
  transition:border-color var(--tr),background var(--tr);
}
.article-body .dnx-tool__textarea::placeholder{color:var(--light)}
.article-body .dnx-tool__textarea:focus{outline:none;border-color:var(--teal);background:var(--white)}

.article-body .dnx-tool__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

.article-body .dnx-btn{
  padding:11px 22px;
  font-family:var(--f-body);font-size:.84rem;font-weight:600;line-height:1.2;
  border:1.5px solid transparent;border-radius:var(--r-pill);
  cursor:pointer;
  transition:background var(--tr),color var(--tr),border-color var(--tr);
}
.article-body .dnx-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.article-body .dnx-btn--primary{background:var(--rose);color:#fff}
.article-body .dnx-btn--primary:hover{background:var(--slate)}
.article-body .dnx-btn--ghost{background:var(--cream-mid);color:var(--slate)}
.article-body .dnx-btn--ghost:hover{background:var(--white);border-color:var(--border)}


/* ══════════════════════════════════════════════════════════════
   3. OUTIL 1 : FILTRE DE NOMS
   ══════════════════════════════════════════════════════════════ */

.article-body .dnx-tool__output:empty{display:none}

.article-body .dnx-count{
  margin:28px 0 12px;
  font-size:.88rem;font-weight:600;color:var(--slate);
}
.article-body .dnx-empty{margin:20px 0 0;font-size:.88rem;font-style:italic;color:var(--muted)}

.article-body .dnx-cand-list{display:flex;flex-direction:column;gap:10px}

.article-body .dnx-cand{
  padding:16px 18px;
  background:var(--cream);
  border:1px solid var(--border);border-radius:var(--r-md);
}
.article-body .dnx-cand--drop{background:var(--white)}

.article-body .dnx-cand__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:10px;
}
.article-body .dnx-cand__name{font-weight:600;color:var(--slate);word-break:break-all}

/* Statuts : meme gabarit que .article-badge. */
.article-body .dnx-chip{
  display:inline-block;flex-shrink:0;padding:4px 12px;
  font-size:.62rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  border-radius:var(--r-pill);white-space:nowrap;
}
.article-body .dnx-chip--pass{color:var(--teal);background:var(--teal-light)}
.article-body .dnx-chip--review{color:#7A4A00;background:#FFF8E6}
.article-body .dnx-chip--drop{color:var(--rose);background:var(--rose-light)}

.article-body .dnx-cand__checks{
  display:flex;flex-direction:column;gap:8px;
  margin-top:12px;padding-top:12px;
  border-top:1px solid var(--border);
}
.article-body .dnx-check{
  display:flex;align-items:flex-start;gap:10px;
  font-size:.88rem;line-height:1.5;color:var(--text);
  cursor:pointer;
}
.article-body .dnx-check input{
  flex-shrink:0;width:16px;height:16px;margin:3px 0 0;
  accent-color:var(--rose);cursor:pointer;
}
.article-body .dnx-cand__note{margin:10px 0 0;font-size:.82rem;font-style:italic;color:var(--light)}

/* Liste retenue : meme filet que le blockquote du site. */
.article-body .dnx-panel{
  margin:18px 0 0;padding:16px 20px;
  background:var(--rose-light);
  border-left:4px solid var(--rose);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:.9rem;line-height:1.7;color:var(--slate);
}


/* ══════════════════════════════════════════════════════════════
   4. OUTIL 2 : MARQUE OU VILLE
   ══════════════════════════════════════════════════════════════ */

.article-body .dnx-q{margin:0 0 22px;padding:0;border:0;min-width:0}
.article-body .dnx-q legend{
  padding:0;margin-bottom:10px;
  font-size:.95rem;font-weight:600;line-height:1.45;color:var(--slate);
}

.article-body .dnx-opts{display:flex;flex-wrap:wrap;gap:8px}
.article-body .dnx-opt{position:relative;cursor:pointer}
.article-body .dnx-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.article-body .dnx-opt span{
  display:inline-block;padding:9px 18px;
  font-size:.86rem;line-height:1.3;color:var(--muted);
  background:var(--cream);
  border:1.5px solid var(--border);border-radius:var(--r-pill);
  transition:background var(--tr),color var(--tr),border-color var(--tr);
}
.article-body .dnx-opt:hover span{border-color:var(--rose);color:var(--slate)}
.article-body .dnx-opt input:checked + span{background:var(--rose);border-color:var(--rose);color:#fff}
.article-body .dnx-opt input:focus-visible + span{outline:2px solid var(--teal);outline-offset:2px}

.article-body .dnx-result{
  margin-top:8px;padding:22px 24px;
  background:var(--cream);
  border-left:4px solid var(--rose);
  border-radius:0 var(--r-md) var(--r-md) 0;
}
.article-body .dnx-result__waiting{margin:0;font-size:.9rem;font-style:italic;color:var(--muted)}
.article-body .dnx-result__verdict{
  margin:0 0 10px;
  font-family:var(--f-display);font-weight:400;
  font-size:1.18rem;line-height:1.35;color:var(--slate);
}
.article-body .dnx-result__reason{margin:0 0 16px;font-size:.92rem;line-height:1.7;color:var(--text)}
.article-body .dnx-result__sub{
  margin:0 0 8px;
  font-size:.66rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);
}
.article-body .dnx-result__limits{
  margin:16px 0 0;padding-top:14px;
  border-top:1px solid var(--border);
  font-size:.82rem;line-height:1.65;color:var(--muted);
}


/* ══════════════════════════════════════════════════════════════
   5. RESPONSIVE ET MOUVEMENT
   ══════════════════════════════════════════════════════════════ */

@media(max-width:768px){
  .article-body .dnx-tool{margin:36px 0;padding:24px 20px}
  .article-body .dnx-tool__title{font-size:1.2rem}
  .article-body .dnx-result{padding:18px 18px}
  .article-body .dnx-cand{padding:14px 16px}
}

@media(prefers-reduced-motion:reduce){
  .article-body .dnx-tool *{transition:none !important}
}