/* fage-qv.ch · composants propres au site (au-dessus du design commun v7) — 14.11.2026
   Identité : sarcelle du soin, rouge croix en accent, or pour la réussite ; Bricolage Grotesque en titres.
   Signature : la barre de pondération du QV (IPA 30, BK 30, ABU 20, EN 20) et la grille des modules A–H. Mobile d'abord. */

@media (max-width:520px){.qz-header__account{display:none}}
@media (max-width:400px){.qz-header__price{display:none}.qz-header__go{padding-inline:12px}}

.fg-hero{background:
  radial-gradient(55% 70% at 92% 4%,color-mix(in srgb,var(--brand) 18%,transparent),transparent 70%),
  radial-gradient(40% 55% at 0% 100%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 72%),
  var(--paper)}
.fg-hero h1{max-width:16ch}
.fg-hero .qz-kicker i{background:#E0453F}

.fg-eyebrow{margin:0 0 10px;font:650 13px/1 var(--f-text);letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.fg-head{display:grid;gap:12px 48px;align-items:end;margin:0 0 26px}
@media (min-width:900px){.fg-head{grid-template-columns:1fr 1fr}}
.fg-head h2,.fg-head .qz-lede{margin:0}
.fg-more{margin:18px 0 0;font-size:15px}

/* Pondération du QV : une barre, quatre segments proportionnels */
.fg-weights{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.fg-weights{grid-template-columns:30fr 30fr 20fr 20fr;gap:8px}}
.fg-w{min-width:0;position:relative;padding:16px 18px 18px;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);overflow:hidden}
.fg-w::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--c)}
.fg-w b{display:block;font:780 1.9rem/1 var(--f-head);letter-spacing:-.03em;color:var(--c);font-variant-numeric:tabular-nums}
.fg-w span{display:block;margin:8px 0 4px;font:650 15px/1.3 var(--f-head);color:var(--ink);overflow-wrap:anywhere;hyphens:auto}
.fg-w em{display:block;font-style:normal;font-size:13.5px;line-height:1.45;color:var(--text2)}
.fg-w--ipa{--c:#E0453F}.fg-w--bk{--c:var(--brand);background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 8%,#fff),#fff 70%)}
.fg-w--abu{--c:#5C677D}.fg-w--en{--c:#A87B00}

/* Modules A–H */
.fg-mods{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.fg-mods{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1080px){.fg-mods{grid-template-columns:repeat(5,minmax(0,1fr))}}
.fg-mod{min-width:0;display:flex;gap:12px;align-items:center;padding:14px;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s}
.fg-mod:hover{border-color:var(--c);transform:translateY(-2px)}
.fg-mod b{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--c) 13%,#fff);color:var(--c);font:780 1.1rem/1 var(--f-head)}
.fg-mod span{font:600 14px/1.3 var(--f-text);overflow-wrap:anywhere;hyphens:auto}

.fg-ready{display:grid;gap:20px;align-content:start}
@media (min-width:700px){.fg-ready{grid-template-columns:auto 1fr}}
.fg-ready__ring{position:relative;width:112px;height:112px}
.fg-ready__ring .qz-ring{width:112px;height:112px}
.fg-ready__ring b{position:absolute;inset:0;display:grid;place-items:center;font:780 1.5rem/1 var(--f-head);color:#fff}

.fg-card{position:relative}
.fg-card__n{display:inline-block;margin:0 0 10px;font:780 13px/1 var(--f-head);letter-spacing:.06em;color:var(--brand)}

/* Méthode en 4 étapes */
.fg-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.fg-steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fg-steps li{padding:18px;border-radius:var(--r-l);background:#fff;border:1px solid var(--line)}
.fg-steps b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--brand);color:#fff;font:780 15px/1 var(--f-head)}
.fg-steps h3{margin:12px 0 6px;font-size:1.1rem}
.fg-steps p{margin:0;font-size:15px;color:var(--text2)}

/* Notenrechner */
.fg-calc{margin:16px 0;padding:18px;border-radius:var(--r-l);background:var(--paper);border:1px solid var(--line)}
.fg-calc__grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.fg-calc__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fg-calc label{display:block;font:600 13.5px/1.3 var(--f-text);color:var(--text2);margin:0 0 6px}
.fg-calc input[type=number]{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);font:700 1.1rem/1 var(--f-text);font-variant-numeric:tabular-nums;background:#fff}
.fg-calc__opt{display:flex;gap:8px;align-items:center;margin:12px 0 0;font-size:14px;color:var(--text2)}
.fg-calc__out{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin:16px 0 0;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.fg-calc__out b{font:780 2rem/1 var(--f-head);font-variant-numeric:tabular-nums;color:var(--ink)}
.fg-calc__verdict{font:650 15px/1.4 var(--f-text);padding:6px 12px;border-radius:999px}
.fg-calc__verdict.is-ok{background:#E7F6EC;color:#1E7A39}.fg-calc__verdict.is-ko{background:#FDECEC;color:#B42E28}
.fg-calc__why{flex-basis:100%;margin:0;font-size:14px;color:var(--text2)}
.fg-ready__ring .qz-ring::before{width:86px;height:86px}

@media (max-width:560px){
  .fg-mods{grid-template-columns:minmax(0,1fr);gap:8px}
  .fg-mod{padding:10px 12px}
  .fg-mod b{width:34px;height:34px;font-size:1rem;border-radius:10px}
  .fg-mod span{font-size:14.5px;hyphens:manual}
}
.fg-calc__grid>div{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}