/* Guide Résine — mise en forme des articles */
.gro-article { --gro-blue: #1d4e89; --gro-teal: #11998e; --gro-soft: #eef6fb; --gro-sand: #fff7e8; --gro-rose: #fdeeee; --gro-line: #d9e3ec; }
.gro-article h2 { margin-top: 2.2em; }
.gro-article h3 { margin-top: 1.6em; }
.gro-article figure.gro-img { margin: 1.6em 0; }
.gro-article figure.gro-img img { width: 100%; height: auto; border-radius: 14px; display: block; }
.gro-article figure.gro-pin { max-width: 480px; margin-left: auto; margin-right: auto; }
.gro-article figure.gro-img figcaption { text-align: center; font-size: .85em; opacity: .75; margin-top: .5em; }

.gro-box { border-radius: 14px; padding: 1.1em 1.3em; margin: 1.6em 0; border: 1px solid var(--gro-line); background: var(--gro-soft); }
.gro-box > :first-child { margin-top: 0; }
.gro-box > :last-child { margin-bottom: 0; }
.gro-box .gro-box-title { display: block; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .8em; color: var(--gro-blue); margin-bottom: .5em; }
.gro-box.gro-tip { background: var(--gro-sand); border-color: #f1dcb0; }
.gro-box.gro-tip .gro-box-title { color: #a86b00; }
.gro-box.gro-warn { background: var(--gro-rose); border-color: #f3c6c6; }
.gro-box.gro-warn .gro-box-title { color: #b3261e; }
.gro-box.gro-verdict { background: linear-gradient(135deg, #e6f7f4, #eef6fb); border-color: #bfe6df; }
.gro-box.gro-verdict .gro-box-title { color: var(--gro-teal); }

.gro-toc ol { margin: 0; padding-left: 1.3em; }
.gro-toc li { margin: .25em 0; }

.gro-table-wrap { overflow-x: auto; margin: 1.6em 0; border-radius: 14px; border: 1px solid var(--gro-line); }
.gro-table { width: 100%; border-collapse: collapse; font-size: .95em; margin: 0; }
.gro-table th { background: var(--gro-blue); color: #fff; text-align: left; padding: .7em .9em; }
.gro-table td { padding: .65em .9em; border-top: 1px solid var(--gro-line); vertical-align: top; }
.gro-table tr:nth-child(even) td { background: #f8fbfd; }

.gro-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 1.6em 0; }
.gro-pick { border: 1px solid var(--gro-line); border-radius: 14px; padding: 1em 1.1em; background: #fff; }
.gro-pick .gro-badge { display: inline-block; background: var(--gro-teal); color: #fff; font-size: .72em; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: .25em .7em; border-radius: 999px; margin-bottom: .5em; }
.gro-pick strong { display: block; margin-bottom: .3em; }
.gro-pick p { margin: 0; font-size: .92em; }

.gro-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 1.4em 0; }
.gro-proscons > div { border-radius: 12px; padding: .9em 1.1em; }
.gro-proscons .gro-pros { background: #e9f7ef; }
.gro-proscons .gro-cons { background: #fdeeee; }
.gro-proscons ul { margin: .3em 0 0; padding-left: 1.2em; }
@media (max-width: 640px) { .gro-proscons { grid-template-columns: 1fr; } }

.gro-faq details { border: 1px solid var(--gro-line); border-radius: 12px; padding: .8em 1.1em; margin: .7em 0; background: #fff; }
.gro-faq summary { font-weight: 700; cursor: pointer; }
.gro-faq details[open] summary { margin-bottom: .5em; }

.gro-related { border-left: 4px solid var(--gro-teal); padding: .6em 1em; background: #f4fbfa; border-radius: 0 10px 10px 0; margin: 1.6em 0; }
.gro-disclosure { font-size: .85em; opacity: .8; font-style: italic; }