/* outils.css : /outils/, calculateur de prix, générateur de nom, nom de domaine disponible, mentions légales, signature e-mail, QR code et test de site */

.sec-tool { padding-top: var(--s-8); }
.tool-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.tool-card { padding: var(--s-4); }
.tool-card .btn { align-self: flex-start; }

/* Calculateur */
.calc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.opt-group { display: flex; flex-direction: column; gap: var(--s-1h); }
.opt-group-title { font-family: var(--f-title); font-weight: 600; font-size: var(--fs-20); margin-top: var(--s-3); }
.opt-group-title:first-child { margin-top: 0; }
.opt { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 64px; padding: var(--s-1h) var(--s-2); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-bg); text-align: left; font-size: var(--fs-16); color: var(--c-ink); cursor: pointer; }
.opt:hover { border-color: var(--c-ia); }
.opt[aria-pressed="true"] { border: 2px solid var(--c-ia); background: var(--c-bg-ia); }
.opt-box { width: 24px; height: 24px; flex: none; border-radius: var(--r-sm); border: 2px solid var(--c-ink-3); display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.opt-radio .opt-box { border-radius: 50%; }
.opt[aria-pressed="true"] .opt-box { background: var(--c-ia); border-color: var(--c-ia); color: var(--c-on-dark); }
.opt-txt { flex: 1; display: flex; flex-direction: column; }
.opt-txt small { color: var(--c-ink-3); font-size: var(--fs-14); }
.opt-price { font-weight: 700; white-space: nowrap; }
.opt-static { cursor: default; }
.opt-static:hover { border-color: var(--c-line); }
.opt-pack { background: var(--c-bg-ia); border-color: var(--c-ia-line); }
.opt-pack .opt-box { background: var(--c-ia); border-color: var(--c-ia); color: var(--c-on-dark); }
.stepper { display: inline-flex; align-items: center; gap: var(--s-1); }
.stepper button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-line); background: var(--c-bg); font-size: var(--fs-20); font-weight: 700; color: var(--c-ink); cursor: pointer; }
.stepper output { min-width: 32px; text-align: center; font-weight: 700; }
.calc-premium { font-size: var(--fs-14); color: var(--c-ink-3); }
.billing-period { align-self: flex-start; }
.calc-grid [hidden] { display: none; }
.summary { background: var(--c-ink); color: var(--c-on-dark); border-radius: var(--r-xl); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.summary-title { font-family: var(--f-title); font-weight: 600; font-size: var(--fs-20); }
.summary .billing { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); align-self: flex-start; }
.summary .billing button { color: var(--c-on-dark-2); }
.summary .billing button[aria-pressed="true"] { background: var(--c-bg); color: var(--c-ink); }
.sum-lines { display: flex; flex-direction: column; gap: var(--s-1); }
.sum-row { display: flex; justify-content: space-between; gap: var(--s-2); color: var(--c-on-dark-2); font-size: var(--fs-14); }
.sum-total { display: flex; flex-direction: column; gap: var(--s-05); padding-top: var(--s-2); border-top: 1px solid rgba(255, 255, 255, 0.16); }
.sum-total small { color: var(--c-on-dark-2); font-size: var(--fs-14); }
.sum-total strong { font-family: var(--f-title); font-weight: 600; font-size: var(--fs-40); line-height: 1; letter-spacing: -0.02em; }
.summary .cta-note { color: var(--c-on-dark-2); justify-content: center; }
.calc-foot { text-align: center; color: var(--c-ink-2); }

/* Générateur */
.gen-form { max-width: 960px; margin: 0 auto; }
.gen-form .billing { align-self: flex-start; }
.field .lbl { font-weight: 700; font-size: var(--fs-14); }
.gen-results { max-width: 960px; margin: var(--s-6) auto 0; }
.gen-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); margin-top: var(--s-3); }
.gen-list li { display: flex; flex-direction: column; gap: var(--s-05); padding: var(--s-3); }
.gen-name { font-family: var(--f-title); font-weight: 600; font-size: var(--fs-20); }
.gen-domain { font-size: var(--fs-14); color: var(--c-ink-3); }
.gen-empty { color: var(--c-ink-3); }
.gen-note { margin-top: var(--s-2); font-size: var(--fs-14); color: var(--c-ink-3); }
.gen-free { display: inline-flex; align-items: center; gap: var(--s-05); font-weight: 700; color: var(--c-ia-strong); }
.gen-free .ic { color: var(--c-ia); }

/* Nom de domaine disponible */
#form-domaine .billing { align-self: flex-start; }
.dom-panel { display: flex; flex-direction: column; gap: var(--s-2); }
#form-domaine [hidden], .gen-results [hidden] { display: none; }
.dom-hint, .dom-opt { font-size: var(--fs-14); color: var(--c-ink-3); font-weight: 400; }
.dom-list { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-3); }
.dom-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-2); padding: var(--s-2) var(--s-3); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.dom-name { font-family: var(--f-title); font-weight: 600; font-size: var(--fs-18); overflow-wrap: anywhere; }
.dom-state { display: inline-flex; align-items: center; gap: var(--s-05); font-size: var(--fs-14); font-weight: 700; color: var(--c-ink-3); }
.dom-libre { border-color: var(--c-ia-line); background: var(--c-bg-ia); }
.dom-libre .dom-state { color: var(--c-ia-strong); }
.dom-libre .dom-state .ic { color: var(--c-ia); }
.dom-pris .dom-name { color: var(--c-ink-3); }
.dom-var-t { margin-top: var(--s-4); font-family: var(--f-title); font-weight: 600; font-size: var(--fs-18); }
.dom-var-t + .dom-list { margin-top: var(--s-2); }

.sec-tool [hidden] { display: none; }
/* Choix à 3 ou 4 boutons : passent à la ligne sur petit écran */
.sec-tool .billing { flex-wrap: wrap; border-radius: var(--r-md); }
.sec-tool .billing button { flex: 1 1 auto; padding: 0 var(--s-2); border-radius: var(--r-sm); }

/* Résultats à copier (mentions légales, signature, QR code) */
.out-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.out-actions { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.out-box { padding: var(--s-3); margin-top: var(--s-2); }
.out-todo { margin-top: var(--s-1); font-size: var(--fs-14); color: var(--c-agence-text); }
.prose-out { display: flex; flex-direction: column; gap: var(--s-1); }
.prose-out h3 { font-family: var(--f-title); font-weight: 600; font-size: var(--fs-20); }
.prose-out h4 { font-family: var(--f-title); font-weight: 600; font-size: var(--fs-16); margin-top: var(--s-2); }
.prose-out h5 { font-weight: 700; font-size: var(--fs-14); margin-top: var(--s-1); color: var(--c-ink); }
.pc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1h); }
.ml-next { margin-top: var(--s-2); flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); background: var(--c-bg-ia); border-color: var(--c-ia-line); }
.ml-next p { flex: 1 1 280px; color: var(--c-ink-2); }
.prose-out ul { display: flex; flex-direction: column; gap: var(--s-05); }
.prose-out li, .prose-out p { color: var(--c-ink-2); overflow-wrap: anywhere; }
.ml-case { padding: var(--s-2); border: 1px solid var(--c-line); border-radius: var(--r-md); font-size: var(--fs-16); }
.ml-case strong { color: var(--c-ink); }
.ml-case span { font-size: var(--fs-14); }
.ml-sub { display: flex; flex-direction: column; gap: var(--s-2); padding-left: var(--s-2); border-left: 3px solid var(--c-ia-line); }
.ml-credit { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--c-line); font-size: var(--fs-14); }
.ml-todo { background: var(--c-agence-soft); color: var(--c-ink); border-radius: var(--r-sm); padding: 0 var(--s-05); }
.sig-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.sig-side { display: flex; flex-direction: column; gap: var(--s-2); }
.sig-side .out-box { margin-top: 0; }
.sig-preview { overflow-x: auto; background: var(--c-bg); }
.sig-help { display: flex; flex-direction: column; gap: var(--s-05); font-size: var(--fs-14); color: var(--c-ink-2); }
.sig-color input { width: 64px; height: 48px; padding: 0; border: 1px solid var(--c-ink-3); border-radius: var(--r-sm); background: var(--c-bg); cursor: pointer; }
.qr-box { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); }
.qr-box canvas { width: 100%; max-width: 320px; height: auto; image-rendering: pixelated; }
.qr-dest { font-size: var(--fs-14); color: var(--c-ink-3); overflow-wrap: anywhere; text-align: center; }

/* Test de site : messages (analyse en cours, erreur, site bloqué, limite atteinte) */
.ts-msg { display: flex; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-3); color: var(--c-ink-2); }
.ts-msg-attente, .ts-msg-erreur, .ts-msg-bloque, .ts-msg-limite { padding: var(--s-2) var(--s-3); border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-bg); }
.ts-msg-attente { align-items: center; }
.ts-msg-erreur { background: var(--c-error-bg); border-color: var(--c-error); }
.ts-msg-bloque, .ts-msg-limite { background: var(--c-agence-bg); border-color: var(--c-agence); }
.ts-msg-erreur .ts-ic { background: var(--c-bg); color: var(--c-error); }
.ts-msg-bloque .ts-ic, .ts-msg-limite .ts-ic { background: var(--c-agence-soft); color: var(--c-agence-text); }
.ts-msg-txt { flex: 1; min-width: 0; }
.ts-msg-t { font-family: var(--f-title); font-weight: 600; font-size: var(--fs-18); color: var(--c-ink); }
.ts-msg-erreur .ts-msg-t { color: var(--c-error); }
.ts-spin { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 3px solid var(--c-ia-soft); border-top-color: var(--c-ia); animation: ts-spin .8s linear infinite; }
@keyframes ts-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ts-spin { animation: none; border-color: var(--c-ia); } }

/* Test de site : rapport */
.ts-report { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-3); }
.ts-head { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3); }
.ts-gauge { --c: var(--c-ia); width: 128px; height: 128px; flex: none; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(closest-side, var(--c-bg) 78%, transparent 79%), conic-gradient(var(--c) calc(var(--p) * 1%), var(--c-line) 0); }
.ts-gauge.ts-moyen { --c: var(--c-agence); }
.ts-gauge.ts-faible { --c: var(--c-error); }
.ts-gauge strong { font-family: var(--f-title); font-weight: 600; font-size: var(--fs-40); line-height: 1; }
.ts-gauge small { font-size: var(--fs-14); color: var(--c-ink-3); }
.ts-head-txt { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-05); }
.ts-verdict { font-family: var(--f-title); font-weight: 600; font-size: var(--fs-20); }
.ts-url { font-weight: 700; color: var(--c-ia-strong); overflow-wrap: anywhere; }
.ts-meta { font-size: var(--fs-14); color: var(--c-ink-3); }
.ts-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
.ts-chip { font-size: var(--fs-14); font-weight: 700; padding: var(--s-05) var(--s-1h); border-radius: var(--r-pill); }
.ts-chip.ts-ok { background: var(--c-ia-soft); color: var(--c-ia-strong); }
.ts-chip.ts-moyen { background: var(--c-agence-soft); color: var(--c-agence-text); }
.ts-chip.ts-non { background: var(--c-error-bg); color: var(--c-error); }
.ts-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.ts-k { font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-3); margin-bottom: var(--s-1h); }
.ts-serp, .ts-cats, .ts-prio { padding: var(--s-3); gap: 0; }
.ts-serp-url { font-size: var(--fs-14); color: var(--c-ink-2); overflow-wrap: anywhere; }
.ts-serp-t { font-size: var(--fs-20); color: var(--c-ia-strong); line-height: 1.3; margin: var(--s-05) 0; overflow-wrap: anywhere; }
.ts-serp-d { font-size: var(--fs-14); color: var(--c-ink-2); }
.ts-vide { color: var(--c-ink-3); font-style: italic; }
.ts-cats ul { display: flex; flex-direction: column; gap: var(--s-1h); }
.ts-bar { --c: var(--c-ia); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-05) var(--s-2); font-size: var(--fs-14); }
.ts-bar.ts-moyen { --c: var(--c-agence); }
.ts-bar.ts-faible { --c: var(--c-error); }
.ts-bar a { font-weight: 700; color: var(--c-ink); text-decoration: none; }
.ts-bar a:hover { text-decoration: underline; }
.ts-bar-n { font-weight: 700; color: var(--c-ink-2); }
.ts-bar-track { grid-column: 1 / -1; height: 8px; border-radius: var(--r-pill); background: var(--c-line); overflow: hidden; }
.ts-bar-fill { display: block; height: 100%; background: var(--c); border-radius: var(--r-pill); }
.ts-prio { border-left: 4px solid var(--c-error); }
.ts-prio ol { display: flex; flex-direction: column; gap: var(--s-1h); margin-top: var(--s-2); padding-left: var(--s-3); list-style: decimal; }
.ts-prio li { color: var(--c-ink-2); }
.ts-prio li strong { display: block; color: var(--c-ink); }
.ts-cat { display: flex; flex-direction: column; gap: var(--s-1h); scroll-margin-top: var(--s-12); }
.ts-cat-t { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1); font-family: var(--f-title); font-weight: 600; font-size: var(--fs-20); margin-top: var(--s-2); }
.ts-cat-t span { font-family: var(--f-text); font-weight: 500; font-size: var(--fs-14); color: var(--c-ink-3); }
.ts-list { display: flex; flex-direction: column; gap: var(--s-1); }
.ts-row { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-2); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.ts-ic { width: 32px; height: 32px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.ts-ok .ts-ic { background: var(--c-ia-soft); color: var(--c-ia); }
.ts-moyen .ts-ic { background: var(--c-agence-soft); color: var(--c-agence-text); }
.ts-non .ts-ic { background: var(--c-error-bg); color: var(--c-error); }
.ts-txt { flex: 1; min-width: 0; }
.ts-t { font-weight: 700; }
.ts-d { font-size: var(--fs-14); color: var(--c-ink-2); overflow-wrap: anywhere; }
.ts-fix { margin-top: var(--s-1); font-size: var(--fs-14); }
.ts-fix summary { cursor: pointer; font-weight: 700; color: var(--c-ia-strong); }
.ts-outil { font-weight: 700; }
.ts-fix p { margin-top: var(--s-05); padding: var(--s-1) var(--s-1h); background: var(--c-bg-alt); border-radius: var(--r-sm); color: var(--c-ink-2); }
.ts-etat { font-size: var(--fs-14); font-weight: 700; white-space: nowrap; color: var(--c-ink-3); }
.ts-non .ts-etat { color: var(--c-error); }
.ts-moyen .ts-etat { color: var(--c-agence-text); }
#ts-report + .gen-note { margin-top: var(--s-4); }

@media (min-width: 641px) {
  .sec-tool { padding-top: var(--s-10); }
  .tool-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gen-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1101px) {
  .calc-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
  .summary { position: sticky; top: var(--s-12); }
  .tool-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sig-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ts-cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .sig-side { position: sticky; top: var(--s-12); }
  .gen-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Encart de fin des outils : le site qui va avec (texte, atouts, bouton) et 3 liens en cartes */
.next { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) var(--s-3); border-radius: var(--r-xl); background: var(--c-bg); border: 1px solid var(--c-line); }
.next-main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.next-main .h2 { margin: 0; }
.next-pts { display: flex; flex-direction: column; gap: var(--s-1); }
.next-pts li { display: flex; align-items: center; gap: var(--s-1); color: var(--c-ink-2); }
.next-pts .ic { flex: none; color: var(--c-agence-text); }
.next-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); margin-top: var(--s-1); }
.next-cta .cta-note { margin: 0; }
.next-links { display: flex; flex-direction: column; gap: var(--s-1h); align-self: center; }
.next-link { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2); border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-bg-alt); color: var(--c-ink); text-decoration: none; transition: border-color .2s, background-color .2s; }
.next-link:hover { border-color: var(--c-ia); background: var(--c-bg-ia); }
.next-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: var(--r-sm); background: var(--c-ia-soft); color: var(--c-ia); }
.next-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.next-txt b { font-family: var(--f-title); font-weight: 600; }
.next-txt em { font-style: normal; font-size: var(--fs-14); color: var(--c-ink-3); }
.next-arw { flex: none; color: var(--c-ia); transition: transform .2s; }
.next-link:hover .next-arw { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .next-link, .next-arw { transition: none; } .next-link:hover .next-arw { transform: none; } }
@media (min-width: 1101px) {
  .next { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-6); padding: var(--s-6); }
}