@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   Siret Numéro : formats complémentaires (guides, tutos, boutique vitrine, simulateur)
   Chaque gabarit a sa propre structure ; ils partagent le hero compact et les filets du thème.
   Variables et polices : celles de theme.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.screen-reader-text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* hero compact commun */
.sn-fx-coiffe h1 { max-width: 26ch; font-size: clamp(1.6rem, 3.4vw, 2.6rem); }
.sn-fx-coiffe-cote { font-family: var(--sn-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sn-lime); margin: 0 0 12px; }
.sn-fx-coiffe-desc { color: rgba(255,255,255,.78); max-width: 62ch; margin-top: 14px; line-height: 1.6; }
.sn-fx-coiffe-meta { font-family: var(--sn-mono); font-size: .7rem; color: rgba(255,255,255,.6); margin-top: 12px; }
.sn-fx-entete { display: flex; align-items: baseline; gap: 16px; margin: 0 0 22px; }
.sn-fx-entete h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.sn-fx-entete-note { font-family: var(--sn-mono); font-size: .68rem; color: var(--sn-ink2); text-transform: uppercase; letter-spacing: .1em; }

/* listes de liens et sous-titres réutilisés */
.sn-fx-sv-liste { margin: 0 0 1.2em; }
.sn-fx-sv-liste li { position: relative; padding-left: 1.3em; margin-bottom: .55em; }
.sn-fx-sv-liste li::before {
    content: ''; position: absolute; left: 0; top: .5em; width: 9px; height: 9px;
    width: 7px; height: 7px; border: 1.5px solid var(--sn-blue); border-radius: var(--sn-r-sm);
}
.sn-fx-sv-liste a { color: var(--sn-blue-dk); text-decoration: underline; text-underline-offset: 3px; }
.sn-fx-sv-liste a:hover { color: var(--sn-encre); }
.sn-fx-sv-sous { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sn-ink2); margin: 1.4em 0 .6em; font-family: var(--sn-mono); font-weight: 600; }
.sn-fx-plan-rayon { font-size: 1rem; text-transform: uppercase; margin: 18px 0 8px; font-family: var(--sn-display); }
.sn-fx-plan-rayon a:hover { color: var(--sn-blue); }

/* ── GUIDE : sommaire collant + colonne de lecture ───────────────────────── */
.sn-fx-gd { padding: clamp(34px, 5vw, 64px) 0 clamp(56px, 8vw, 96px); }
.sn-fx-gd-grille { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.sn-fx-gd-nav { position: sticky; top: calc(var(--sn-hh) + 26px); border-top: 6px solid var(--sn-blue); background: var(--sn-blanc); border-left: 2px solid var(--sn-encre); border-right: 2px solid var(--sn-encre); border-bottom: 2px solid var(--sn-encre); padding: 18px 20px 20px; }
.sn-fx-gd-nav ol { list-style: none; counter-reset: gdn; margin: 12px 0 0; }
.sn-fx-gd-nav li { counter-increment: gdn; margin-bottom: 9px; font-size: .9rem; line-height: 1.35; }
.sn-fx-gd-nav li a { display: grid; grid-template-columns: 26px 1fr; gap: 4px; color: var(--sn-encre); }
.sn-fx-gd-nav li a::before { content: counter(gdn, decimal-leading-zero); font-family: var(--sn-mono); font-size: .66rem; color: var(--sn-blue); padding-top: 3px; }
.sn-fx-gd-nav li a:hover { color: var(--sn-blue); text-decoration: underline; }
.sn-fx-gd-corps { max-width: 820px; min-width: 0; }
.sn-fx-gd-corps p { max-width: 68ch; }

.sn-fx-gd-bref { background: var(--sn-encre); color: var(--sn-blanc); padding: 24px 28px 18px; margin-bottom: 44px; border-left: 8px solid var(--sn-blue); }
.sn-fx-gd-bref h2 { color: #fff; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.sn-fx-gd-bref ul li { position: relative; padding-left: 1.4em; margin-bottom: .75em; color: rgba(242,244,242,.92); }
.sn-fx-gd-bref ul li::before { content: ''; position: absolute; left: 0; top: .72em; width: 10px; height: 2px; background: var(--sn-lime); }

.sn-fx-gd-sec { margin-bottom: 46px; scroll-margin-top: 24px; }
.sn-fx-gd-sec h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); text-transform: uppercase; margin-bottom: .7em; display: flex; align-items: baseline; gap: 14px; }
.sn-fx-gd-num { font-family: var(--sn-mono); font-size: .74rem; font-weight: 600; letter-spacing: .1em; color: var(--sn-blue); }
.sn-fx-gd-note { font-size: .88rem; color: var(--sn-ink2); max-width: 68ch; }

.sn-fx-gd-table-wrap { overflow-x: auto; border: 2px solid var(--sn-encre); background: var(--sn-blanc); }
.sn-fx-gd-table-wrap:focus-visible { outline: 3px solid var(--sn-blue); outline-offset: 3px; }
.sn-fx-gd-table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 520px; }
.sn-fx-gd-table caption { text-align: left; padding: 12px 14px; font-family: var(--sn-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sn-ink2); border-bottom: 1px solid var(--sn-ligne); }
.sn-fx-gd-table th, .sn-fx-gd-table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sn-ligne); border-right: 1px solid var(--sn-ligne); }
.sn-fx-gd-table th:last-child, .sn-fx-gd-table td:last-child { border-right: 0; }
.sn-fx-gd-table thead th { background: var(--sn-encre); color: var(--sn-blanc); font-family: var(--sn-display); font-weight: 600; text-transform: uppercase; font-size: .84rem; letter-spacing: .03em; border-right-color: rgba(242,244,242,.2); }
.sn-fx-gd-table thead a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sn-fx-gd-table tbody th { font-weight: 600; background: var(--sn-blanc); position: sticky; left: 0; }
.sn-fx-gd-table tbody tr:last-child th, .sn-fx-gd-table tbody tr:last-child td { border-bottom: 0; }

.sn-fx-gd-cas { display: grid; gap: 0; border: 2px solid var(--sn-encre); margin: 0; }
.sn-fx-gd-cas-ligne { display: grid; grid-template-columns: minmax(180px, 1fr) 1.6fr; gap: 0; border-bottom: 1px solid var(--sn-encre); }
.sn-fx-gd-cas-ligne:last-child { border-bottom: 0; }
.sn-fx-gd-cas dt { padding: 14px 18px; background: var(--sn-blue-lt); font-family: var(--sn-display); font-weight: 600; line-height: 1.25; }
.sn-fx-gd-cas dd { margin: 0; padding: 14px 18px; background: var(--sn-blanc); }
.sn-fx-gd-signature { font-family: var(--sn-mono); font-size: .72rem; letter-spacing: .08em; color: var(--sn-ink2); text-transform: uppercase; margin-top: 36px; border-top: 2px solid var(--sn-encre); padding-top: 16px; }

/* ── TUTO : étapes le long d'un filet ────────────────────────────────────── */
.sn-fx-tu { padding: 0 0 clamp(56px, 8vw, 96px); }
.sn-fx-tu-bandeau { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 clamp(30px, 4vw, 48px); border: 2px solid var(--sn-encre); border-top: 0; background: var(--sn-blanc); }
.sn-fx-tu-bandeau > div { padding: 16px 20px; border-right: 1px solid var(--sn-encre); }
.sn-fx-tu-bandeau > div:last-child { border-right: 0; }
.sn-fx-tu-bandeau dt { font-family: var(--sn-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sn-ink2); }
.sn-fx-tu-bandeau dd { margin: 4px 0 0; font-family: var(--sn-display); font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.sn-fx-tu-colonne { max-width: 760px; margin-inline: auto; }
.sn-fx-tu-materiel { border: 2px dashed var(--sn-encre); padding: 22px 26px 8px; margin-bottom: 40px; background: var(--sn-blanc); }
.sn-fx-tu-materiel h2 { font-size: 1.3rem; text-transform: uppercase; }
.sn-fx-tu-materiel .sn-fx-cote { margin: 4px 0 14px; }
.sn-fx-tu-materiel li { position: relative; padding-left: 1.5em; margin-bottom: .6em; }
.sn-fx-tu-materiel li::before { content: ''; position: absolute; left: 0; top: .35em; width: 13px; height: 13px; border: 2px solid var(--sn-blue); }
.sn-fx-tu-etapes { list-style: none; margin: 0 0 40px; padding: 0; }
.sn-fx-tu-etape { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; padding-bottom: 34px; }
.sn-fx-tu-etape::before { content: ''; position: absolute; left: 31px; top: 62px; bottom: 6px; width: 2px; background-image: linear-gradient(var(--sn-blue) 50%, transparent 50%); background-size: 2px 10px; }
.sn-fx-tu-etape:last-child::before { display: none; }
.sn-fx-tu-n { display: grid; place-items: center; width: 64px; height: 56px; background: var(--sn-encre); color: #fff; font-family: var(--sn-display); font-weight: 800; font-size: 1.5rem; }
.sn-fx-tu-etape-titre { font-size: clamp(1.15rem, 2.2vw, 1.45rem); text-transform: uppercase; margin: 8px 0 .5em; }
.sn-fx-tu-attention { margin: 14px 0 0; padding: 12px 16px; background: var(--sn-blue-lt); border-left: 5px solid var(--sn-blue); font-size: .95rem; }
.sn-fx-tu-controle { border: 2px solid var(--sn-encre); border-top: 8px solid var(--sn-blue); padding: 22px 26px 8px; margin-bottom: 40px; background: var(--sn-blanc); }
.sn-fx-tu-controle h2 { font-size: 1.3rem; text-transform: uppercase; margin-bottom: .6em; }
.sn-fx-tu-suite { margin-bottom: 36px; }
.sn-fx-tu-suite h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); text-transform: uppercase; margin-bottom: .6em; }

/* ── FICHE PRODUIT : carte d'identité ────────────────────────────────────── */
.sn-fx-pr { padding: clamp(34px, 5vw, 64px) 0; }
.sn-fx-pr-grille { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.sn-fx-pr-carte { border: 2px solid var(--sn-encre); background: var(--sn-blanc); position: sticky; top: calc(var(--sn-hh) + 26px); }
.sn-fx-pr-picto { display: grid; place-items: center; height: 210px; background: var(--sn-blue-lt); color: var(--sn-blue-dk); border-bottom: 2px solid var(--sn-encre); }
.sn-fx-pr-picto svg { width: 96px; height: 96px; }
.sn-fx-pr-stock { margin: 0; padding: 12px 18px; background: var(--sn-encre); color: #fff; font-family: var(--sn-mono); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sn-fx-pr-id { margin: 0; padding: 6px 18px 14px; }
.sn-fx-pr-id > div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--sn-ligne); font-size: .92rem; }
.sn-fx-pr-id > div:last-child { border-bottom: 0; }
.sn-fx-pr-id dt { font-family: var(--sn-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sn-ink2); padding-top: 3px; }
.sn-fx-pr-id dd { margin: 0; font-weight: 500; }
.sn-fx-pr-id a { text-decoration: underline; text-underline-offset: 3px; color: var(--sn-blue-dk); }
.sn-fx-pr-intro { font-size: 1.15rem; line-height: 1.55; max-width: 62ch; }
.sn-fx-pr-avis { padding: 14px 18px; border: 2px solid var(--sn-encre); border-left: 8px solid var(--sn-blue); background: var(--sn-blanc); font-size: .93rem; max-width: 62ch; }
.sn-fx-pr-bloc { margin-top: 38px; }
.sn-fx-pr-bloc h2 { font-size: clamp(1.25rem, 2.3vw, 1.6rem); text-transform: uppercase; margin-bottom: .7em; }
.sn-fx-pr-faits li { position: relative; padding: 11px 0 11px 1.6em; border-bottom: 1px solid var(--sn-ligne); max-width: 62ch; }
.sn-fx-pr-faits li::before { content: ''; position: absolute; left: 0; top: 1.15em; width: 10px; height: 10px; background: var(--sn-blue); }
.sn-fx-pr-vigilance .sn-fx-pr-faits li::before { background: transparent; border: 2px solid var(--sn-encre); }
.sn-fx-pr-voisins { padding: 0 0 clamp(56px, 8vw, 90px); }

/* ── BOUTIQUE : catalogue de fiches ──────────────────────────────────────── */
.sn-fx-bt { padding: clamp(34px, 5vw, 64px) 0 clamp(56px, 8vw, 96px); }
.sn-fx-bt-avis { padding: 14px 20px; border: 2px solid var(--sn-encre); border-left: 8px solid var(--sn-blue); background: var(--sn-blanc); max-width: 76ch; font-size: .95rem; margin-bottom: 28px; }
.sn-fx-bt-rayons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.sn-fx-bt-rayons a { padding: 8px 14px; border: 2px solid var(--sn-encre); font-family: var(--sn-display); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .02em; transition: background .2s, color .2s; }
.sn-fx-bt-rayons a:hover, .sn-fx-bt-rayons a[aria-current="page"] { background: var(--sn-encre); color: var(--sn-blanc); }
.sn-fx-bt-rayon-n { font-family: var(--sn-mono); font-size: .66rem; opacity: .75; margin-left: 4px; }
.sn-fx-bt-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--sn-encre); border-left: 2px solid var(--sn-encre); }
.sn-fx-bt-grille--serree { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; margin-top: 18px; }
.sn-fx-bt-grille--serree .sn-fx-bt-fiche { flex: 0 1 230px; min-width: 190px; }
.sn-fx-bt-fiche { border-right: 2px solid var(--sn-encre); border-bottom: 2px solid var(--sn-encre); background: var(--sn-blanc); }
.sn-fx-bt-lien { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 0 0 18px; transition: background .2s; }
.sn-fx-bt-lien:hover { background: var(--sn-blue-lt); }
.sn-fx-bt-picto { display: grid; place-items: center; height: 118px; margin-bottom: 14px; background: var(--sn-blanc); color: var(--sn-encre); border-bottom: 2px solid var(--sn-encre); }
.sn-fx-bt-lien:hover .sn-fx-bt-picto { color: var(--sn-blue-dk); }
.sn-fx-bt-marque, .sn-fx-bt-type, .sn-fx-bt-nom, .sn-fx-bt-stock { padding: 0 16px; }
.sn-fx-bt-marque { font-family: var(--sn-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sn-ink2); }
.sn-fx-bt-nom { font-size: 1.05rem; line-height: 1.2; }
.sn-fx-bt-type { font-size: .85rem; color: var(--sn-ink2); line-height: 1.4; flex: 1; }
.sn-fx-bt-stock { margin: 10px 16px 0; padding: 4px 9px; align-self: flex-start; border: 1.5px solid var(--sn-encre); font-family: var(--sn-mono); font-size: .6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

/* ── INDEX DES GUIDES : lignes numérotées ────────────────────────────────── */
.sn-fx-ix { padding: clamp(34px, 5vw, 64px) 0 clamp(56px, 8vw, 96px); }
.sn-fx-ix-liste { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--sn-encre); }
.sn-fx-ix-ligne { display: grid; grid-template-columns: 76px minmax(0, 1fr) 110px; gap: clamp(14px, 3vw, 34px); align-items: center; padding: 26px 0; border-bottom: 2px solid var(--sn-encre); }
.sn-fx-ix-num { font-family: var(--sn-display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--sn-blue); }
.sn-fx-ix-type { font-family: var(--sn-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sn-ink2); margin: 0 0 6px; }
.sn-fx-ix-titre { font-size: clamp(1.2rem, 2.4vw, 1.65rem); line-height: 1.15; margin-bottom: 8px; }
.sn-fx-ix-titre a { background-image: linear-gradient(var(--sn-blue), var(--sn-blue)); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .25s cubic-bezier(.2,.7,.2,1); }
.sn-fx-ix-titre a:hover { background-size: 100% 2px; }
.sn-fx-ix-accroche { margin: 0; color: var(--sn-ink2); max-width: 70ch; font-size: .96rem; }
.sn-fx-ix-compte { text-align: right; font-family: var(--sn-display); font-weight: 800; font-size: 2rem; line-height: 1; }
.sn-fx-ix-compte span { display: block; font-family: var(--sn-mono); font-weight: 600; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sn-ink2); margin-top: 4px; }

/* ── INDEX DES TUTOS : fiches à deux colonnes ────────────────────────────── */
.sn-fx-tx { padding: clamp(34px, 5vw, 64px) 0 clamp(56px, 8vw, 96px); }
.sn-fx-tx-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.sn-fx-tx-fiche { border: 2px solid var(--sn-encre); border-top: 8px solid var(--sn-blue); background: var(--sn-blanc); padding: 22px 24px 20px; display: flex; flex-direction: column; gap: 8px; transition: box-shadow .24s cubic-bezier(.2,.7,.2,1), transform .24s cubic-bezier(.2,.7,.2,1); }
.sn-fx-tx-fiche:hover { transform: translateY(-4px); box-shadow: 8px 8px 0 var(--sn-encre); }
.sn-fx-tx-niveau { margin: 0; font-family: var(--sn-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sn-blue-dk); }
.sn-fx-tx-titre { font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.15; }
.sn-fx-tx-titre a:hover { color: var(--sn-blue); }
.sn-fx-tx-accroche { margin: 0; color: var(--sn-ink2); font-size: .95rem; flex: 1; }
.sn-fx-tx-meta { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--sn-mono); font-size: .66rem; letter-spacing: .06em; color: var(--sn-ink2); border-top: 1px solid var(--sn-ligne); padding-top: 12px; }

/* ── SIMULATEUR ──────────────────────────────────────────────────────────── */
.sn-fx-sm { padding: clamp(34px, 5vw, 64px) 0; }
.sn-fx-sm-grille { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.sn-fx-sm-form, .sn-fx-sm-resultat { border: 2px solid var(--sn-encre); background: var(--sn-blanc); padding: 24px 26px 26px; }
.sn-fx-sm-resultat { border-top: 8px solid var(--sn-blue); }
.sn-fx-sm-titre { font-size: 1.2rem; text-transform: uppercase; margin-bottom: 18px; }
.sn-fx-sm-champ { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.sn-fx-sm-champ label { font-family: var(--sn-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sn-ink2); }
.sn-fx-sm-champ input, .sn-fx-sm-champ select { min-height: 46px; padding: 8px 12px; border: 2px solid var(--sn-encre); background: #fff; font: inherit; color: var(--sn-encre); border-radius: 0; }
.sn-fx-sm-champ input[readonly] { background: var(--sn-blanc); }
.sn-fx-sm-champ input:focus-visible, .sn-fx-sm-champ select:focus-visible { outline: 3px solid var(--sn-blue); outline-offset: 2px; }
.sn-fx-sm-erreur { color: #8A1C1C; font-weight: 600; margin: 0; }
.sn-fx-sm-chiffres { display: grid; gap: 0; margin: 0 0 22px; border: 2px solid var(--sn-encre); }
.sn-fx-sm-chiffres > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--sn-ligne); }
.sn-fx-sm-chiffres > div:last-child { border-bottom: 0; }
.sn-fx-sm-chiffres dt { font-family: var(--sn-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.sn-fx-sm-chiffres dd { margin: 0; font-family: var(--sn-display); font-weight: 800; font-size: 1.5rem; }
.sn-fx-sm-total { background: var(--sn-encre); color: #fff; }
.sn-fx-sm-total dd { font-size: 2rem; }
.sn-fx-sm-barre { position: relative; display: flex; height: 30px; border: 2px solid var(--sn-encre); background: #fff; }
.sn-fx-sm-barre-reac { background: var(--sn-blue-lt); border-right: 2px solid var(--sn-encre); }
.sn-fx-sm-barre-frein { background: var(--sn-blue); }
.sn-fx-sm-barre-obst { position: absolute; top: -8px; bottom: -8px; width: 4px; margin-left: -2px; background: var(--sn-encre); }
.sn-fx-sm-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font-family: var(--sn-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sn-ink2); }
.sn-fx-sm-legende span::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border: 2px solid var(--sn-encre); }
.sn-fx-sm-l-reac::before { background: var(--sn-blue-lt); }
.sn-fx-sm-l-frein::before { background: var(--sn-blue); }
.sn-fx-sm-l-obst::before { background: var(--sn-encre); }
.sn-fx-sm-impact { margin: 20px 0 0; padding: 14px 18px; border-left: 6px solid var(--sn-blue); background: var(--sn-blue-lt); font-weight: 500; }
.sn-fx-sm-ref, .sn-fx-sm-methode { padding: 0 0 clamp(34px, 5vw, 56px); }
.sn-fx-sm-colonne { max-width: 860px; }
.sn-fx-sm-colonne h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); text-transform: uppercase; margin: 1.6em 0 .6em; }
.sn-fx-sm-ref h2 { margin-top: 0; }
.sn-fx-sm [hidden], .sn-fx-sm-resultat [hidden] { display: none !important; }

/* ── Bloc « Pour aller plus loin » sous un article ───────────────────────── */
.sn-fx-suite { margin-top: 44px; padding: 22px 26px 12px; border: 2px solid var(--sn-encre); border-left: 8px solid var(--sn-blue); background: var(--sn-blanc); }
.sn-fx-suite-titre { font-size: 1.15rem; text-transform: uppercase; margin: 0 0 12px; }
.sn-fx-suite ul { list-style: none; margin: 0; padding: 0; }
.sn-fx-suite ul li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 12px; padding-left: 0; }
.sn-fx-suite-type { font-family: var(--sn-mono); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; background: var(--sn-encre); color: #fff; }
.sn-fx-suite a { color: var(--sn-blue-dk); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1080px) {
    .sn-fx-gd-grille, .sn-fx-pr-grille, .sn-fx-sm-grille { grid-template-columns: 1fr; }
    .sn-fx-gd-nav, .sn-fx-pr-carte { position: static; }
    .sn-fx-bt-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .sn-fx-bt-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sn-fx-gd-cas-ligne { grid-template-columns: 1fr; }
    .sn-fx-tu-bandeau { grid-template-columns: 1fr; }
    .sn-fx-tu-bandeau > div { border-right: 0; border-bottom: 1px solid var(--sn-encre); }
    .sn-fx-tu-bandeau > div:last-child { border-bottom: 0; }
    .sn-fx-tu-etape { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
    .sn-fx-tu-n { width: 48px; height: 44px; font-size: 1.2rem; }
    .sn-fx-tu-etape::before { left: 23px; top: 50px; }
    .sn-fx-ix-ligne { grid-template-columns: 52px minmax(0, 1fr); }
    .sn-fx-ix-num { font-size: 1.9rem; }
    .sn-fx-ix-compte { display: none; }
    .sn-fx-tx-grille { grid-template-columns: 1fr; }
    .sn-fx-pr-id > div { grid-template-columns: 80px 1fr; }
}
@media (max-width: 460px) {
    .sn-fx-bt-grille { grid-template-columns: 1fr; }
}

/* ── FICHE PRODUIT : page produit classique ──────────────────────────────── */
.sn-fx-fp { padding: 0 0 clamp(40px, 6vw, 72px); }
.sn-fx-fp-fil { display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 22px 0 26px; font-family: var(--sn-mono); font-size: .68rem; letter-spacing: .05em; color: var(--sn-ink2); }
.sn-fx-fp-fil a { color: var(--sn-ink2); text-decoration: underline; text-underline-offset: 3px; }
.sn-fx-fp-fil a:hover { color: var(--sn-blue); }
.sn-fx-fp-fil-cur { color: var(--sn-encre); }
.sn-fx-fp-haut { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(26px, 5vw, 64px); align-items: start; }
.sn-fx-fp-visuel { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; background: var(--sn-blanc); border: 2px solid var(--sn-encre); color: var(--sn-blue-dk); }
.sn-fx-fp-visuel > svg { width: 38%; height: 38%; }
.sn-fx-fp-badge { display: inline-block; padding: 5px 11px; background: var(--sn-encre); color: #fff; font-family: var(--sn-mono); font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.sn-fx-fp-badge--visuel { position: absolute; top: 16px; left: 16px; }
.sn-fx-fp-marque { margin: 0 0 6px; font-family: var(--sn-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sn-blue-dk); }
.sn-fx-fp-titre { font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.06; }
.sn-fx-fp-type { margin: 10px 0 0; color: var(--sn-ink2); font-size: 1.02rem; }
.sn-fx-fp-resume { margin: 20px 0 0; }
.sn-fx-fp-resume li { position: relative; padding: 0 0 0 1.4em; margin-bottom: .55em; max-width: 52ch; }
.sn-fx-fp-resume li::before { content: ''; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; background-image: conic-gradient(var(--sn-blue) 0 25%, transparent 0 50%, var(--sn-blue) 0 75%, transparent 0); background-size: 4.5px 4.5px; }
.sn-fx-fp-prix { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 24px 0 14px; padding: 16px 0; border-top: 2px solid var(--sn-encre); border-bottom: 1px solid var(--sn-ligne); }
.sn-fx-fp-prix-val { font-family: var(--sn-display); font-weight: 800; font-size: 1.5rem; color: var(--sn-ink2); }
.sn-fx-fp-achat { display: flex; gap: 10px; }
.sn-fx-fp-achat input { width: 76px; min-height: 52px; padding: 8px 10px; border: 2px solid var(--sn-ligne); background: var(--sn-blanc); font: inherit; text-align: center; color: var(--sn-ink2); border-radius: 0; }
.sn-fx-fp-cta { flex: 1; min-height: 52px; padding: 0 28px; border: 2px solid var(--sn-blue); background: var(--sn-blue); color: #fff; opacity: .5; font-family: var(--sn-display); font-weight: 700; font-size: 1.02rem; letter-spacing: .04em; text-transform: uppercase; cursor: not-allowed; border-radius: 0; }
.sn-fx-fp-dispo { margin: 10px 0 0; font-size: .92rem; color: var(--sn-ink2); }
.sn-fx-fp-meta { margin: 22px 0 0; display: grid; gap: 0; font-size: .9rem; }
.sn-fx-fp-meta > div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--sn-ligne); }
.sn-fx-fp-meta dt { font-family: var(--sn-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sn-ink2); padding-top: 3px; }
.sn-fx-fp-meta dd { margin: 0; }
.sn-fx-fp-meta a { color: var(--sn-blue-dk); text-decoration: underline; text-underline-offset: 3px; }
.sn-fx-fp-onglets { display: flex; flex-wrap: wrap; gap: 0; margin: clamp(34px, 5vw, 56px) 0 0; border-bottom: 2px solid var(--sn-encre); position: sticky; top: 0; background: var(--sn-surface); z-index: 5; }
.sn-fx-fp-onglets a { padding: 14px 20px; font-family: var(--sn-display); font-weight: 600; font-size: .92rem; text-transform: uppercase; letter-spacing: .03em; border: 2px solid transparent; border-bottom: 0; margin-bottom: -2px; }
.sn-fx-fp-onglets a:hover { background: var(--sn-blue-lt); }
.sn-fx-fp-corps { max-width: 860px; padding-top: 34px; }
.sn-fx-fp-section { margin-bottom: 44px; scroll-margin-top: 70px; }
.sn-fx-fp-section h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); text-transform: uppercase; margin-bottom: .7em; }
.sn-fx-fp-section h3 { font-size: 1.05rem; text-transform: uppercase; margin: 1.4em 0 .5em; }
.sn-fx-fp-table { width: 100%; border-collapse: collapse; border: 2px solid var(--sn-encre); background: var(--sn-blanc); }
.sn-fx-fp-table th, .sn-fx-fp-table td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--sn-ligne); }
.sn-fx-fp-table th { width: 34%; background: var(--sn-blanc); font-weight: 600; }
.sn-fx-fp-table tr:last-child th, .sn-fx-fp-table tr:last-child td { border-bottom: 0; }
@media (max-width: 1080px) {
    .sn-fx-fp-haut { grid-template-columns: 1fr; }
    .sn-fx-fp-visuel { aspect-ratio: 16 / 10; }
    .sn-fx-fp-visuel > svg { width: 22%; height: 22%; }
}
@media (max-width: 700px) {
    .sn-fx-fp-onglets { position: static; }
    .sn-fx-fp-onglets a { padding: 12px 14px; }
    .sn-fx-fp-meta > div { grid-template-columns: 90px 1fr; }
}

/* Éléments communs repris du thème (étiquette, état vide) */
.sn-fx-cote { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sn-ink2); font-weight: 700; margin: 0; }
.sn-fx-vide { padding: 40px 0; color: var(--sn-ink2); }
.sn-fx-sm-total dd { white-space: nowrap; font-size: clamp(1.3rem, 6vw, 1.8rem); }

/* En-tête : les entrées des formats ne tiennent pas sur une ligne entre la nav mobile et 1180 px.
   Elles restent dans le menu mobile, le pied de page, l'accueil et le plan du site. */
.sn-nav-format a { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1180px) { .sn-nav-format { display: none; } }