/* Outils interactifs du guide « Choisir une agence SEO internationale » (FR, EN, DE, NL) */
.ga-tool{position:relative;margin:var(--s6) 0;padding:clamp(1.25rem,3.4vw,2.2rem);border:1px solid var(--line-2);border-radius:var(--r-md);background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.012));max-width:none}
.ga-tool::before{content:"";position:absolute;left:clamp(1.25rem,3.4vw,2.2rem);right:clamp(1.25rem,3.4vw,2.2rem);top:-1px;height:2px;border-radius:2px;background:var(--grad)}
.ga-kicker{display:flex;align-items:center;gap:.6rem;margin:0 0 .4rem;font-family:var(--body);font-size:var(--t-label);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.ga-kicker::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--grad);box-shadow:0 0 12px rgba(246,195,91,.6)}
.prose .ga-tool h3{margin:0 0 var(--s2)}
.ga-intro{margin:0 0 var(--s4);color:var(--ink-2);max-width:var(--measure)}
.ga-mount{min-width:0}
.ga-tool:not(.ga-on) .ga-mount::after{content:attr(data-nojs);display:block;color:var(--muted);font-size:var(--t-small)}
.prose .ga-tool ul,.prose .ga-tool ol{padding-left:0;margin:0;max-width:none;list-style:none}
.prose .ga-tool li{margin:0;padding-left:0}
.prose .ga-tool li::before{content:none!important}
.ga-small{font-size:var(--t-small);color:var(--muted)}
.ga-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem var(--s3)}
.ga-flash{font-size:var(--t-small);color:var(--lagoon);min-height:1.4em}

/* Choix : pastilles (cases à cocher, boutons radio) */
.ga-q{border:0;margin:0 0 var(--s5);padding:0;min-width:0}
.ga-q legend{padding:0;margin:0 0 .7rem;font-weight:700;color:var(--ink);font-size:1.02rem;line-height:1.4}
.ga-q legend small{display:block;margin-top:.15rem;font-weight:500;font-size:var(--t-small);color:var(--muted)}
.ga-opts{display:flex;flex-wrap:wrap;gap:.55rem}
.ga-opt{position:relative;display:inline-flex;align-items:center;min-height:2.75rem;padding:.55rem 1.05rem;border:1px solid var(--line-2);border-radius:var(--pill);color:var(--ink-2);font-size:.95rem;line-height:1.3;cursor:pointer;transition:border-color .25s,background .25s,color .25s;-webkit-tap-highlight-color:transparent}
.ga-opt:hover{border-color:rgba(255,255,255,.4);color:var(--ink)}
.ga-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ga-opt.is-on{border-color:transparent;color:#fff;background:linear-gradient(#1a1240,#1a1240) padding-box,var(--grad) border-box;font-weight:600}
.ga-opt.is-focus{outline:2px solid var(--lagoon);outline-offset:3px}
.ga-progress{margin:var(--s2) 0 0;font-size:var(--t-small);color:var(--muted)}

/* Résultat du quiz */
.ga-result{margin-top:var(--s4);padding:clamp(1.1rem,3vw,1.8rem);border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--grad-soft)}
.ga-result[hidden]{display:none}
.ga-res-k{margin:0 0 .3rem;font-size:var(--t-label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sun)}
.ga-res-t{margin:0 0 var(--s3);font-family:var(--display);font-stretch:115%;font-weight:850;text-transform:uppercase;font-size:clamp(1.15rem,2.2vw,1.55rem);line-height:1.1;color:#fff;text-wrap:balance}
.ga-res-p{margin:0 0 var(--s3);color:var(--ink-2)}
.ga-res-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:var(--s4);margin:var(--s4) 0}
.ga-res-cols h4{margin:0 0 .5rem;font-family:var(--body);font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.prose .ga-tool .ga-list li{position:relative;padding-left:1.15rem;margin:.45rem 0;color:var(--ink-2)}
.prose .ga-tool .ga-list li::before{content:""!important;position:absolute;left:0;top:.62em;width:.45rem;height:.45rem;border-radius:50%;background:var(--sun)}
.prose .ga-tool .ga-list.is-no li::before{background:var(--rose)}
.prose .ga-tool .ga-list.is-yes li::before{background:var(--lagoon)}
.ga-notes{display:grid;gap:.6rem;margin:var(--s4) 0 0}
.ga-note{margin:0;padding:.8rem 1rem;border-radius:var(--r-sm);background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink-2);font-size:.97rem}
.ga-note b{color:#fff}
.ga-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.ga-cta p{margin:0;flex:1 1 18rem;color:var(--ink)}
.ga-link{background:none;border:0;padding:0;color:var(--muted);font:inherit;font-size:var(--t-small);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.ga-link:hover{color:#fff}

/* Comparateur */
.ga-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 var(--s4)}
.ga-tab{min-height:2.6rem;padding:.4rem 1rem;border:1px solid var(--line-2);border-radius:var(--pill);background:transparent;color:var(--ink-2);font:600 .9rem/1.2 var(--body);cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ga-tab[aria-selected="true"]{border-color:transparent;color:#fff;background:linear-gradient(#1a1240,#1a1240) padding-box,var(--grad) border-box}
.ga-tab .ga-tab-n{margin-left:.45rem;font-variant-numeric:tabular-nums;color:var(--sun)}
.ga-name{display:grid;gap:.35rem;margin:0 0 var(--s3);max-width:26rem;font-size:var(--t-small);color:var(--muted)}
.ga-input,.ga-text{width:100%;min-width:0;max-width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:.75rem 1rem;transition:border-color .3s,box-shadow .3s}
.ga-input:focus,.ga-text:focus{outline:none;border-color:var(--lagoon);box-shadow:0 0 0 4px rgba(95,211,238,.14)}
.ga-crit li{display:grid;grid-template-columns:minmax(0,1fr) minmax(15rem,17rem);gap:.6rem var(--s4);align-items:center;padding:.95rem 0;border-top:1px solid var(--line)}
.ga-crit li:first-child{border-top:0}
.ga-crit-t strong{display:block;color:#fff;font-size:1rem}
.ga-crit-t span{display:block;margin-top:.2rem;font-size:var(--t-small);color:var(--muted);line-height:1.5}
.ga-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:3px;border:1px solid var(--line-2);border-radius:var(--pill);margin:0;min-width:0}
.ga-seg label{position:relative;display:flex;align-items:center;justify-content:center;min-height:2.4rem;padding:.3rem .4rem;border-radius:var(--pill);font-size:.82rem;font-weight:600;color:var(--ink-2);text-align:center;line-height:1.15;cursor:pointer;transition:background .2s,color .2s}
.ga-seg label:hover{color:#fff;background:rgba(255,255,255,.06)}
.ga-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ga-seg label.is-on{background:var(--grad);color:#0b0720}
.ga-seg label.is-on[data-v="0"]{background:var(--rose);color:#fff}
.ga-seg label.is-focus{outline:2px solid var(--lagoon);outline-offset:2px}
.ga-scores{display:grid;gap:.75rem;margin:var(--s5) 0 var(--s3);padding:var(--s4);border-radius:var(--r-sm);background:rgba(255,255,255,.035);border:1px solid var(--line)}
.ga-score{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr) auto;gap:.8rem;align-items:center}
.ga-score-n{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ga-bar{height:.6rem;border-radius:var(--pill);background:rgba(255,255,255,.08);overflow:hidden}
.ga-bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--grad);transition:width .45s var(--ease)}
.ga-score-v{font-variant-numeric:tabular-nums;font-weight:700;color:#fff;min-width:3.6rem;text-align:right}
.ga-weak{grid-column:1 / -1;margin:-.35rem 0 0;font-size:var(--t-small);color:var(--muted)}

/* Vérificateur de proposition */
.ga-text{min-height:11rem;resize:vertical;line-height:1.55}
.ga-out{margin-top:var(--s4)}
.ga-out[hidden]{display:none}
.ga-group{margin:var(--s4) 0 0}
.ga-group h4{display:flex;align-items:center;gap:.5rem;margin:0 0 .6rem;font-family:var(--body);font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ga-group h4 b{display:inline-grid;place-items:center;min-width:1.6rem;height:1.6rem;padding:0 .4rem;border-radius:var(--pill);font-size:.75rem;letter-spacing:0;color:#0b0720;background:var(--sun)}
.ga-group.is-flag h4 b{background:var(--rose);color:#fff}
.ga-group.is-good h4 b{background:var(--lagoon)}
.ga-items{display:grid;gap:.6rem}
.prose .ga-tool .ga-items>li{padding:.9rem 1rem;border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(255,255,255,.035)}
.ga-group.is-flag .ga-items>li{border-left:3px solid var(--rose)}
.ga-group.is-good .ga-items>li{border-left:3px solid var(--lagoon)}
.ga-group.is-miss .ga-items>li{border-left:3px solid var(--sun)}
.ga-it-t{display:block;font-weight:700;color:#fff}
.ga-it-q{display:block;margin:.35rem 0;font-family:var(--serif);font-style:italic;font-size:1.08rem;color:var(--ink-2);overflow-wrap:anywhere}
.ga-it-q mark{background:rgba(232,87,122,.28);color:#fff;border-radius:3px;padding:0 .15em}
.ga-group.is-good .ga-it-q mark{background:rgba(95,211,238,.22)}
.ga-it-d{display:block;margin-top:.2rem;font-size:.95rem;color:var(--ink-2)}
.ga-it-a{display:block;margin-top:.35rem;font-size:.95rem;color:var(--ink)}
.ga-it-a::before{content:"→ ";color:var(--sun)}

/* Calendrier */
.ga-ctrl{display:grid;gap:var(--s3);margin:0 0 var(--s5)}
.ga-seg.is-wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr));border-radius:var(--r-sm)}
.ga-seg.is-wide label{border-radius:10px;min-height:2.9rem;font-size:.86rem;padding:.4rem .7rem}
.ga-toggles{display:flex;flex-wrap:wrap;gap:.55rem}
.ga-tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:var(--s5)}
.ga-track h4{margin:0 0 var(--s3);font-family:var(--body);font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ga-tl{position:relative;padding-left:1.7rem!important}
.ga-tl::before{content:"";position:absolute;left:.42rem;top:.5rem;bottom:.5rem;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--sun),var(--rose),var(--orchid),var(--iris),var(--lagoon))}
.prose .ga-tool .ga-tl>li{position:relative;margin:0 0 var(--s4)}
.prose .ga-tool .ga-tl>li:last-child{margin-bottom:0}
.prose .ga-tool .ga-tl>li::before{content:""!important;position:absolute;left:-1.6rem;top:.3rem;width:.85rem;height:.85rem;border-radius:50%;background:var(--bg);border:2px solid var(--sun);box-shadow:0 0 12px rgba(246,195,91,.45)}
.ga-tl-w{display:block;font-size:var(--t-label);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sun)}
.ga-tl-t{display:block;margin:.15rem 0 .2rem;font-weight:700;color:#fff}
.ga-tl-d{display:block;color:var(--ink-2);font-size:.97rem}
.ga-track.is-ads .ga-tl::before{background:linear-gradient(180deg,var(--lagoon),var(--iris))}
.prose .ga-tool .ga-track.is-ads .ga-tl>li::before{border-color:var(--lagoon);box-shadow:0 0 12px rgba(95,211,238,.45)}
.ga-track.is-ads .ga-tl-w{color:var(--lagoon)}

/* Questions à copier */
.ga-copybar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem var(--s3);margin:-.4rem 0 var(--s5)}

@media (max-width:700px){
  .ga-crit li{grid-template-columns:minmax(0,1fr)}
  .ga-score{grid-template-columns:minmax(0,1fr) auto}
  .ga-score .ga-bar{grid-column:1 / -1;grid-row:2}
  .ga-opt{font-size:.92rem;padding:.5rem .9rem}
}
@media (prefers-reduced-motion:reduce){.ga-bar i,.ga-opt,.ga-seg label{transition:none}}

/* Tableaux du guide : défilement dans le cadre sur grand écran, cartes empilées sur téléphone */
.ax-table{margin:2.2rem 0;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);padding:.4rem .8rem 1rem}
.ax-table table{min-width:640px}
@media (max-width:700px){
  .ax-table{overflow:visible;border:0;border-radius:0;padding:0}
  .ax-table table,.ax-table tr,.prose .ax-table td{display:block;min-width:0}
  .ax-table thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ax-table tbody{display:grid;gap:.8rem}
  .ax-table tr{padding:1rem 1.1rem;border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(255,255,255,.02)}
  .prose .ax-table td{padding:.5rem 0 0;border:0;overflow-wrap:break-word}
  .prose .ax-table td:first-child{padding:0 0 .1rem;font-size:1rem;font-weight:700;color:#fff}
  .ax-table td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;margin-bottom:.1rem;font-size:.75rem;font-weight:700;color:var(--muted)}
}
