/* ============================================================
   Singulr — page produit « Forge Git souveraine » (/forge.html)
   Surcouche additive par-dessus /home.css + /home-ext.css.
   Réutilise tous les tokens, animations et composants existants.
   N'introduit QUE les composants propres à la page produit :
     - sous-titre hero multi-lignes
     - grille « Ce que vous retrouvez »
     - comparatif GitHub vs Singulr
     - visualisation de migration
     - cartes garanties
     - FAQ (accordéon natif <details>)
   Aucun token redéfini : tout hérite de :root de home.css.
   ============================================================ */

/* ---------- hero produit ---------- */
.fhero-sub{font-weight:600;color:var(--ink);font-size:clamp(1.15rem,2.6vw,1.5rem);line-height:1.3;letter-spacing:-.01em}
.fhero-sub span{color:var(--accent)}
.fhero-lead{margin-top:1.1rem;max-width:40rem;color:var(--ink-2);font-size:1.02rem;line-height:1.6}

/* ============================================================
   CE QUE VOUS RETROUVEZ — grille de fonctionnalités
   ============================================================ */
.feats{padding:6rem 2rem}
.feats-inner{margin:0 auto;max-width:72rem}
.feats-grid{margin-top:3rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:680px){.feats-grid{grid-template-columns:repeat(4,1fr)}}
.feat{display:flex;flex-direction:column;gap:.9rem;padding:1.4rem;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);transition:border-color .3s,transform .4s var(--ease)}
.feat:hover{border-color:var(--line-2);transform:translateY(-3px)}
.feat-ico{display:flex;align-items:center;justify-content:center;width:2.7rem;height:2.7rem;border-radius:12px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--accent)}
.feat-label{font-size:.97rem;font-weight:600;color:var(--ink)}
.feats-note{margin:2.5rem auto 0;text-align:center;color:var(--ink-2);font-size:1.05rem}
.feats-note strong{color:var(--ink)}

/* ============================================================
   ENCART JURIDICTION — bandeau fort (aurora cohérente homepage)
   ============================================================ */
.jur{padding:2.5rem 2rem 0}
.jur-inner{position:relative;overflow:hidden;margin:0 auto;max-width:60rem;border-radius:calc(var(--radius) + 6px);border:1px solid var(--line-2);background:var(--surface);padding:clamp(2rem,5vw,3.5rem)}
.jur-title{position:relative;z-index:1;font-size:clamp(1.4rem,3.4vw,2.1rem);font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--ink);max-width:30ch}
.jur-title em{font-style:normal;color:var(--accent)}
.jur-text{position:relative;z-index:1;margin-top:1.25rem;max-width:46rem;color:var(--ink-2);font-size:1.05rem;line-height:1.7}
.jur-text strong{color:var(--ink);font-weight:600}

/* ============================================================
   GITHUB vs SINGULR — comparatif factuel à deux colonnes
   ============================================================ */
.cmp-op{margin-top:.9rem;font-size:.9rem;color:var(--ink-3)}
.cmp-op b{font-weight:600;color:var(--ink-2)}
.cmp-card--singulr .cmp-op b{color:var(--ink)}
.cmp{padding:6rem 2rem}
.cmp-inner{margin:0 auto;max-width:60rem}
.cmp-grid{margin-top:3rem;display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:720px){.cmp-grid{grid-template-columns:1fr 1fr}}
.cmp-card{border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);padding:2rem}
.cmp-card--singulr{border-color:var(--accent);background:var(--accent-tint)}
.cmp-name{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);display:flex;align-items:center;gap:.6rem}
.cmp-flag{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line-2);border-radius:7px;padding:.2rem .5rem}
.cmp-card--singulr .cmp-flag{color:var(--accent)}
.cmp-list{margin-top:1.5rem;display:flex;flex-direction:column;gap:.9rem}
.cmp-li{display:flex;align-items:flex-start;gap:.7rem;font-size:.97rem;color:var(--ink-2)}
.cmp-ico{flex:none;margin-top:.15rem}
.cmp-ico--no{color:var(--rouge)}
.cmp-ico--yes{color:var(--accent)}

/* ============================================================
   MIGRATION — flux GitHub → Singulr + bloc de commandes
   ============================================================ */
.migrate{padding:6rem 2rem}
.migrate-inner{margin:0 auto;max-width:56rem;text-align:center}
.migrate-flow{margin:3rem auto 0;display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
.migrate-node{display:inline-flex;align-items:center;gap:.55rem;padding:.75rem 1.25rem;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);font-weight:600;color:var(--ink-2)}
.migrate-node--singulr{border-color:var(--accent);color:var(--ink);background:var(--accent-tint)}
.migrate-node-dot{width:7px;height:7px;border-radius:999px;background:var(--ink-3);flex:none}
.migrate-node--singulr .migrate-node-dot{background:var(--accent);box-shadow:0 0 10px rgba(255,210,63,.7)}
.migrate-arrow{color:var(--accent);flex:none}
.migrate-code{margin:2.5rem auto 0;max-width:36rem;text-align:left;border-radius:var(--radius);border:1px solid var(--line);background:#0d0d10;padding:1.3rem 1.6rem;font-family:var(--mono);font-size:.9rem;line-height:1.95;color:var(--ink-2);overflow-x:auto}
.migrate-code .cmt{color:var(--ink-3)}
.migrate-code .tok{color:var(--accent)}
.migrate-note{margin:2.25rem auto 0;color:var(--ink-2);font-size:1.05rem}
.migrate-note strong{color:var(--ink)}

/* ============================================================
   GARANTIES — cartes courtes à coche
   ============================================================ */
.guar{padding:6rem 2rem}
.guar-inner{margin:0 auto;max-width:72rem}
.guar-grid{margin-top:3rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem}
.guar-card{display:flex;align-items:center;gap:.9rem;padding:1.25rem 1.4rem;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);transition:border-color .3s,transform .4s var(--ease)}
.guar-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.guar-check{display:flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;border-radius:999px;background:var(--accent-soft);color:var(--accent);flex:none}
.guar-label{font-weight:600;color:var(--ink);font-size:.97rem}

/* ============================================================
   POURQUOI MAINTENANT — carte d'initiatives souveraines européennes
   ============================================================ */
.now{padding:6rem 2rem}
.now-inner{margin:0 auto;max-width:64rem}
.now-text{margin-top:1.5rem;max-width:48rem;color:var(--ink-2);font-size:1.05rem;line-height:1.75}
.now-text strong{color:var(--ink);font-weight:600}
.now-map{margin-top:3rem;position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:1rem}
.now-node{position:relative;display:flex;flex-direction:column;gap:.55rem;padding:1.5rem;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);transition:border-color .3s,transform .4s var(--ease)}
.now-node:hover{border-color:var(--line-2);transform:translateY(-3px)}
.now-node--be{border-color:var(--accent);background:var(--accent-tint)}
.now-flag{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line-2);border-radius:7px;padding:.2rem .5rem;align-self:flex-start}
.now-node--be .now-flag{color:var(--accent);border-color:var(--accent)}
.now-domain{font-family:var(--mono);font-weight:600;color:var(--ink);font-size:1rem;letter-spacing:-.01em}
.now-country{color:var(--ink-2);font-size:.9rem}
.now-msg{margin:2.75rem auto 0;text-align:center;font-size:clamp(1.15rem,2.6vw,1.45rem);font-weight:600;letter-spacing:-.01em;line-height:1.35;color:var(--ink);max-width:36ch}
.now-msg em{font-style:normal;color:var(--accent)}

/* ============================================================
   CE QUI CHANGE RÉELLEMENT — deux colonnes (stable / souverain)
   ============================================================ */
.change{padding:6rem 2rem}
.change-inner{margin:0 auto;max-width:60rem}
.change-grid{margin-top:3rem;display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:720px){.change-grid{grid-template-columns:1fr 1fr}}
.change-col{border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);padding:2rem}
.change-col--shift{border-color:var(--accent);background:var(--accent-tint)}
.change-col-h{font-size:1.15rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.change-list{margin-top:1.5rem;display:flex;flex-direction:column;gap:.95rem}
.change-li{display:flex;align-items:center;gap:.7rem;font-size:1rem;color:var(--ink-2)}
.change-li-ico{flex:none}
.change-col--keep .change-li-ico{color:var(--ink-3)}
.change-col--shift .change-li-ico{color:var(--accent)}
.change-msg{margin:2.75rem auto 0;text-align:center;font-size:clamp(1.15rem,2.6vw,1.45rem);font-weight:600;letter-spacing:-.01em;line-height:1.45;color:var(--ink)}
.change-msg em{display:block;font-style:normal;color:var(--accent)}

/* ============================================================
   FAQ — accordéon natif accessible (<details>/<summary>)
   ============================================================ */
.faq{padding:6rem 2rem}
.faq-inner{margin:0 auto;max-width:48rem}
.faq-list{margin-top:2.5rem;display:flex;flex-direction:column;gap:.75rem}
.faq-item{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.faq-item[open]{border-color:var(--line-2)}
.faq-q{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.3rem 1.5rem;font-weight:600;color:var(--ink);font-size:1.02rem}
.faq-q::-webkit-details-marker{display:none}
.faq-q-ico{flex:none;color:var(--accent);transition:transform .3s var(--ease)}
.faq-item[open] .faq-q-ico{transform:rotate(45deg)}
.faq-a{padding:0 1.5rem 1.4rem;color:var(--ink-2);line-height:1.65}