/* tools.css — styles partagés des outils d'atelier (DA terracotta/sauge/crème).
   Réutilise les tokens :root du styles.css du front (--primary, --ink, --cream…). */
.tool-page{background:var(--cream);color:var(--ink)}
.tool-hero{padding:64px 0 34px;background:linear-gradient(108deg,#f6f1e7 0%,#f1eadb 55%,#f5e9df 100%)}
.tool-hero .container{width:min(880px,calc(100% - 40px))}
.tool-eyebrow{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin:0 0 14px;display:flex;align-items:center;gap:8px;color:var(--primary)}
.tool-eyebrow span{width:22px;height:2px;background:var(--primary);display:inline-block}
.tool-hero h1{font:700 clamp(32px,4.4vw,52px)/1.05 var(--serif);letter-spacing:-.03em;margin:0;color:var(--ink)}
.tool-hero p.lead{font-size:17px;max-width:600px;margin:18px 0 0;color:var(--text-secondary,#5A5248)}
.tool-wrap{padding:36px 0 70px}
.tool-wrap .container{width:min(880px,calc(100% - 40px))}
.tool-panel{background:var(--surface,#fff);border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:0 16px 40px rgba(43,38,32,.07)}
.tool-panel+.tool-panel{margin-top:24px}
.tool-panel h2{font:700 24px/1.15 var(--serif);margin:0 0 6px;letter-spacing:-.02em}
.tool-panel h3{font:700 18px/1.2 var(--serif);margin:22px 0 8px}
.tool-panel p{font-size:15px;line-height:1.6;color:var(--text-secondary,#5A5248);margin:0 0 12px}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.tool-field{display:flex;flex-direction:column;gap:6px}
.tool-field label{font-size:13px;font-weight:700;color:var(--ink)}
.tool-field small{font-weight:400;color:var(--text-muted,#857C6F);font-size:12px}
.tool-field input,.tool-field select{border:1px solid var(--line);border-radius:10px;padding:12px 13px;font:600 16px var(--sans);color:var(--ink);background:#fff;width:100%}
.tool-field input:focus,.tool-field select:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary)}
.tool-actions{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}
.btn-tool{border:0;border-radius:999px;padding:13px 22px;font:700 15px var(--sans);display:inline-flex;gap:8px;align-items:center;cursor:pointer;background:var(--primary);color:#fff;transition:.2s transform,.2s background}
.btn-tool:hover{transform:translateY(-2px);background:var(--primary-hover,#B45C39)}
.btn-tool.ghost{background:transparent;color:var(--primary);border:1.5px solid var(--primary)}
.btn-tool.ghost:hover{background:var(--callout-bg,#F5E9DF)}
.tool-out{margin-top:22px;background:var(--callout-bg,#F5E9DF);border:1px solid var(--callout-border,#E4C9B5);border-radius:14px;padding:18px 20px}
.tool-out .big{font:700 30px/1 var(--serif);color:var(--callout-text,#8A4A2C);display:block}
.tool-out .sub{font-size:13px;color:var(--text-secondary,#5A5248);margin-top:6px;display:block}
.tool-out table{width:100%;border-collapse:collapse;margin-top:6px;font-size:14px}
.tool-out td{padding:5px 0;border-bottom:1px solid var(--callout-border,#E4C9B5)}
.tool-out td:last-child{text-align:right;font-weight:700;color:var(--ink)}
.tool-note{font-size:13px;color:var(--text-muted,#857C6F);margin-top:14px}
.tool-note strong{color:var(--ink)}
ul.tool-list{margin:6px 0 0;padding-left:18px}
ul.tool-list li{font-size:15px;line-height:1.6;color:var(--text-secondary,#5A5248);margin:4px 0}
.tools-cross{margin-top:40px;border-top:1px solid var(--line);padding-top:24px}
.tools-cross h3{font:700 14px var(--sans);text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px;color:var(--text-muted,#857C6F)}
.tools-cross-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.tools-cross-grid a{display:block;padding:13px 15px;border:1px solid var(--line);border-radius:12px;font-size:14px;font-weight:600;color:var(--ink);background:#fff;transition:.2s}
.tools-cross-grid a:hover{border-color:var(--primary);color:var(--primary)}
.tools-cross-grid a.cur{background:var(--callout-bg,#F5E9DF);border-color:var(--callout-border,#E4C9B5);color:var(--callout-text,#8A4A2C)}
/* grille point de croix */
.xstitch-grid{display:inline-grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:10px;overflow:auto;max-width:100%}
.xstitch-grid i{width:16px;height:16px;background:#fff;display:block}
.xstitch-grid i.on{background:var(--primary)}
/* quiz */
.quiz-q{margin-bottom:22px}
.quiz-q p.q{font:700 17px/1.3 var(--serif);margin:0 0 10px;color:var(--ink)}
.quiz-opts{display:grid;gap:8px}
.quiz-opts label{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--line);border-radius:11px;cursor:pointer;font-size:15px;background:#fff;transition:.15s}
.quiz-opts label:hover{border-color:var(--primary)}
.quiz-opts input{accent-color:var(--primary);width:17px;height:17px}
@media print{.site-header,.site-footer,.tools-cross,.tool-actions,.btn-tool{display:none!important}.tool-panel{box-shadow:none;border:1px solid #ccc}}
@media(max-width:640px){.tool-grid{grid-template-columns:1fr}}