/* Outils gratuits : guide, FAQ, autres outils, et interfaces des outils (balises meta, ROI, JSON-LD). */

/* ---------- formulaires ---------- */
.tool-form label small,.tool-result label small{font-weight:400;opacity:.75}
.tool-form fieldset{border:0;margin:0;padding:0;min-width:0}
.tool-form select{width:100%}
.tool-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.tool-head .marker{margin:0}
.tool-switch{display:flex;flex-wrap:wrap;gap:6px}
.tool-switch button{font:inherit;font-size:14px;font-weight:600;padding:8px 14px;border:1px solid #6f6b86;border-radius:999px;background:transparent;color:inherit;cursor:pointer;min-height:40px}
.tool-switch button[aria-pressed="true"]{background:#f8f8fa;color:#1a192e;border-color:#f8f8fa}
.roi-modes{margin-bottom:22px}
.tool-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:16px}
.tool-actions a{color:inherit;text-decoration:underline;text-decoration-color:#e62e5a;text-underline-offset:4px;font-size:15px}
.tool-check{display:flex!important;align-items:center;gap:10px;font-size:15px;margin-top:14px;cursor:pointer}
.tool-check input{width:18px;height:18px;accent-color:#e62e5a}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- aperçu Google ---------- */
.serp-preview{background:#fff;color:#202124;border-radius:8px;padding:18px 20px;font-family:Arial,Helvetica,sans-serif;max-width:600px;box-shadow:0 1px 6px rgba(0,0,0,.25)}
.serp-preview[data-view="mobile"]{max-width:400px}
.serp-site{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.serp-site>span:last-child{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.serp-site b{font-weight:400;font-size:14px;color:#202124}
.serp-site small{font-size:12px;color:#4d5156;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serp-icon{width:26px;height:26px;border-radius:50%;background:#e6e1e8 radial-gradient(circle at 50% 50%,#e62e5a 0 5px,transparent 6px);flex:none}
.tool-result .serp-preview h2{font-family:Arial,Helvetica,sans-serif;font-size:20px;line-height:1.3;font-weight:400;color:#1a0dab;margin:0 0 4px;letter-spacing:0}
.tool-result .serp-preview p{font-size:14px;line-height:1.58;color:#4d5156!important;opacity:1;margin:0}
.meta-gauges{display:grid;gap:14px;margin:22px 0 8px}
.meta-gauges p{display:flex;justify-content:space-between;gap:10px;font-size:14px;margin:0 0 6px}
.gauge{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.gauge i{display:block;height:100%;width:0;background:#7fd1a3;transition:width .2s}
.gauge i[data-state="over"]{background:#ff8a65}.gauge i[data-state="short"]{background:#f2b84b}
.meta-checks{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.meta-checks li{position:relative;padding-left:28px;font-size:15px;line-height:1.5}
.meta-checks li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:#7fd1a3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%231a192e' stroke-width='2.4'/%3E%3C/svg%3E") center/14px no-repeat}
.meta-checks li[data-ok="false"]::before{background:#f2b84b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v6M10 14v1' fill='none' stroke='%231a192e' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat}

/* ---------- ROI ---------- */
.roi-value[data-sign="neg"]{color:#ff8a65}
.roi-figures{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 22px;margin:22px 0 0}
.roi-figures div{border-top:1px solid rgba(255,255,255,.18);padding-top:10px}
.roi-figures dt{font-size:13px;opacity:.75}
.roi-figures dd{margin:4px 0 0;font-size:20px;font-weight:600}
.roi-formula{margin-top:20px;font-size:14px;opacity:.85;font-variant-numeric:tabular-nums}

/* ---------- JSON-LD ---------- */
.schema-fields label{margin-top:14px}
.tool-result pre{white-space:pre-wrap;word-break:break-word;max-height:460px;overflow:auto;font-size:13px;line-height:1.55;background:#0f0f1c;border:1px solid #3d3b55;border-radius:6px;padding:16px;margin-top:16px}

/* ---------- guide, FAQ, autres outils ---------- */
/* Panneau de lecture : le décor 3D ne passe plus sous le texte. */
.tool-guide.tool-note,.tool-faq.tool-note,.tool-related.tool-note{margin-left:var(--gutter);padding:clamp(24px,3vw,44px);background:#1a192ef5;border:1px solid #57566b;border-radius:8px;color:#e9e8f0}
.tool-guide.tool-note{margin-top:70px}
.tool-guide h2:first-child{margin-top:0}
.tool-guide ol li,.tool-guide ul li{margin-bottom:10px}
.tool-faq.tool-note{margin-top:60px}
.tool-faq h2{margin:0 0 20px}
.tool-faq details{border-top:1px solid rgba(255,255,255,.18);padding:4px 0}
.tool-faq details:last-of-type{border-bottom:1px solid rgba(255,255,255,.18)}
.tool-faq summary{cursor:pointer;list-style:none;font-size:18px;font-weight:600;padding:16px 36px 16px 0;position:relative;line-height:1.4}
.tool-faq summary::-webkit-details-marker{display:none}
.tool-faq summary::after{content:"+";position:absolute;right:6px;top:12px;font-size:24px;color:#e62e5a;font-weight:400}
.tool-faq details[open] summary::after{content:"−"}
.tool-faq details p{margin:0 0 18px;font-size:16px;line-height:1.75;opacity:.9;max-width:68ch}
.tool-related.tool-note{margin-top:60px}
.tool-related div{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:14px}
.tool-related a{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid #57465c;border-radius:6px;background:#211e32;color:#f8f8fa;text-decoration:none;transition:border-color .2s,transform .2s}
.tool-related a:hover{border-color:#e62e5a;transform:translateY(-2px)}
.tool-related strong{font-size:17px}
.tool-related span{font-size:14px;opacity:.8;line-height:1.5}
@media(max-width:760px){.tool-guide.tool-note,.tool-faq.tool-note,.tool-related.tool-note{width:auto;margin-right:var(--gutter)}.tool-faq summary{font-size:16px}.serp-preview{padding:14px}.tool-result .serp-preview h2{font-size:18px}}