/* SIOBuilder — Module « système de sections » (v2, 2026-09-26 : titre « Une section, c’est une bande de ta page », tutoiement).
   Tout est préfixé .sm- : aucun effet sur le reste de la landing.
   Réutilise les tokens de style.css / landing.css (--cream, --forest, --green, --lime, --line, --body-muted, --sans)
   avec des valeurs de repli pour fonctionner hors de la landing. Polices : Instrument, ClaimCondensed, Editorial (déjà chargées). */
.sm{--sm-cream:var(--cream,#f7f4ee);--sm-forest:var(--forest,#183f30);--sm-green:var(--green,#244132);--sm-lime:var(--lime,#d2f909);--sm-muted:var(--body-muted,#596357);--sm-ink:var(--ink,#1f2320);--sm-sans:var(--sans,Instrument,Arial,sans-serif);--sm-condensed:ClaimCondensed,Arial,sans-serif;--sm-serif:Editorial,Georgia,serif;--sm-link:#0077b6;
  position:relative;margin:0 0 30px;padding:0 0 46px;border-bottom:1px solid #bcc8b0;color:var(--sm-ink);font-family:var(--sm-sans);scroll-margin-top:100px}
.sm [hidden]{display:none!important}
.sm-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* En-tête */
.sm-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:48px;align-items:end;margin:0 0 30px}
.sm .sm-kicker{font:500 10px/1.4 var(--sm-sans);letter-spacing:1.5px;margin:0 0 16px;color:var(--sm-forest)}
.sm .sm-title{font:700 clamp(34px,3.7vw,54px)/1.04 var(--sm-condensed);letter-spacing:-.02em;margin:0;text-wrap:balance}
.sm-title em{font:italic 400 1.08em var(--sm-serif);letter-spacing:-.02em;color:#34694b}
.sm .sm-lead{font-size:15px;line-height:1.6;color:var(--sm-muted);margin:0 0 12px;max-width:440px}
.sm-skip{display:inline-flex;gap:8px;align-items:center;font-size:13px;color:var(--sm-forest);text-decoration:underline;text-underline-offset:5px}
.sm-skip:hover{text-decoration-thickness:2px}

/* Étapes numérotées (jeton carré, comme .credit-definition) */
.sm .sm-step-label{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:0;font:600 13px/1.3 var(--sm-sans);color:var(--sm-forest)}
.sm-step-label>span{display:grid;place-items:center;width:24px;height:24px;border:1px solid #8c9b80;font:700 15px/1 var(--sm-condensed);flex:none}
.sm-presets,.sm-period{border:0;margin:0;padding:0;min-width:0}
.sm-presets{margin-bottom:22px}

/* Puces de projet (radios natifs) */
.sm-chips{display:flex;flex-wrap:wrap;gap:10px}
.sm-chip{position:relative;cursor:pointer}
.sm-chip input,.sm-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sm-chip>span{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:58px;padding:10px 18px;border:1px solid #b9c5ad;border-radius:10px;background:var(--sm-cream);transition:background-color 140ms,border-color 140ms,color 140ms}
.sm-chip b{font-weight:600;font-size:14px;line-height:1.2}
.sm-chip small{font-size:11px;line-height:1.2;color:var(--sm-muted)}
.sm-chip:hover>span{border-color:#6f8a5e;background:#fffdf8}
.sm-chip input:checked+span{background:var(--sm-forest);border-color:var(--sm-forest);color:#fff}
.sm-chip input:checked+span small{color:#d6e4c3}
.sm-chip input:focus-visible+span,.sm-seg input:focus-visible+span{outline:3px solid #6a8f50;outline-offset:3px}

/* Corps : page découpée | rythme + résultat */
.sm-body{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:28px;align-items:start}
.sm-visual{background:#f0f1e9;border:1px solid #d8decc;border-radius:4px;padding:20px 20px 16px}
.sm-custom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;margin:0 0 16px;padding:0 0 16px;border-bottom:1px solid #dde2d3}

/* Cadre de page façon éditeur */
.sm-page{position:relative;background:var(--sm-cream);border:1px solid #d2d6c5;box-shadow:0 18px 25px -22px #163b2380}
.sm-toolbar{display:flex;align-items:center;gap:8px;min-height:36px;padding:6px 12px;background:#fff;border-bottom:1px solid #dee2e0;font-size:11px;line-height:1.3;color:#5f666c}
.sm-toolbar img{width:18px;height:18px;flex:none}
.sm-toolbar i{font-style:normal;color:#aab2b6;margin:0 7px}
.sm-toolbar b{font-weight:600;color:var(--sm-link)}
.sm-secs{list-style:none;margin:0;padding:18px 14px 12px;display:grid;gap:13px}

/* Une section = un bouton bascule */
.sm-sec{position:relative;width:100%;display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:46px;padding:10px 12px 8px;text-align:left;background:#fbfaf5;border:1.5px solid #416e50;border-radius:2px;color:var(--sm-ink);font:inherit;transition:background-color 160ms,border-color 160ms,color 160ms}
button.sm-sec{cursor:pointer}
button.sm-sec:hover{background:#fff;border-color:var(--sm-forest)}
.sm .sm-sec:focus-visible{outline:3px solid #6a8f50;outline-offset:3px}
.sm-sec-tag{position:absolute;top:-8px;left:8px;padding:3px 6px;background:var(--sm-green);color:#fff;font:500 9px/1 var(--sm-sans);letter-spacing:.2px;white-space:nowrap}
.sm-sec-name{font-weight:500;font-size:14px;line-height:1.25;min-width:0}
.sm-sec-off{display:none;font-size:11px;font-weight:400;color:#5f685a;margin-top:2px}
.sm-sec-cost{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--sm-forest);white-space:nowrap}
.sm-token{display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid #8c9b80;background:var(--sm-cream);color:var(--sm-forest);font:700 13px/1 var(--sm-condensed);flex:none}
.sm-sec[aria-pressed="false"]{background:transparent;border-style:dashed;border-color:#9ca893;color:#5f685a}
.sm-sec[aria-pressed="false"] .sm-sec-tag{background:#66705f}
.sm-sec[aria-pressed="false"] .sm-sec-off{display:block}
.sm-sec[aria-pressed="false"] .sm-sec-art{opacity:.4}
.sm-sec[aria-pressed="false"] .sm-token{border-style:dashed;color:#5f685a}
.sm-sec[aria-pressed="false"] .sm-sec-cost{color:#5f685a}

/* Mini-maquettes filaires (reprennent .wire-row) */
.sm-sec-art{display:grid;gap:3px;width:62px;height:26px}
.sm-sec-art i{display:block;background:#e3e8d9;border:1px solid #c7d2ba;min-height:0}
.sm-sec-art[data-art="hero"]{grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr}
.sm-sec-art[data-art="hero"] i:nth-child(1){background:#cdd8c0}.sm-sec-art[data-art="hero"] i:nth-child(3){grid-column:2;grid-row:1/3}
.sm-sec-art[data-art="cols"]{grid-template-columns:repeat(3,1fr)}
.sm-sec-art[data-art="media"]{grid-template-columns:1fr 1.3fr;grid-template-rows:1fr 1fr}
.sm-sec-art[data-art="media"] i:nth-child(1){grid-row:1/3;background:#d4ddc8}
.sm-sec-art[data-art="lines"]{grid-template-rows:repeat(3,1fr);gap:4px}
.sm-sec-art[data-art="lines"] i{border:0;background:#cfd9c3}.sm-sec-art[data-art="lines"] i:nth-child(2){width:84%}.sm-sec-art[data-art="lines"] i:nth-child(3){width:66%}
.sm-sec-art[data-art="quote"]{grid-template-columns:1fr 1fr}
.sm-sec-art[data-art="quote"] i{border-radius:8px 8px 8px 2px}.sm-sec-art[data-art="quote"] i:nth-child(3){display:none}
.sm-sec-art[data-art="cta"]{grid-template-rows:1fr 1fr;justify-items:center;align-items:center}
.sm-sec-art[data-art="cta"] i:nth-child(1){width:78%;height:5px;border:0;background:#cfd9c3}
.sm-sec-art[data-art="cta"] i:nth-child(2){width:46%;height:10px;border:0;border-radius:3px;background:#35543b}.sm-sec-art[data-art="cta"] i:nth-child(3){display:none}
.sm-sec-art[data-art="form"]{grid-template-columns:1fr;grid-template-rows:5px 1fr;align-items:stretch}
.sm-sec-art[data-art="form"] i:nth-child(1){width:70%;border:0;background:#cfd9c3}
.sm-sec-art[data-art="form"] i:nth-child(2){background:#fff;margin-right:34%}
.sm-sec-art[data-art="form"] i:nth-child(3){grid-row:2;justify-self:end;width:30%;border:0;border-radius:2px;background:#35543b}
.sm-sec-art[data-art="price"]{grid-template-columns:1fr 1.4fr 1fr}
.sm-sec-art[data-art="price"] i:nth-child(2){background:#fff;border-color:#86a070;box-shadow:inset 0 5px 0 #cdd8c0}

/* Tunnel : 4 mini-pages côte à côte */
.sm-pages[data-mode="tunnel"]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}
.sm-pages[data-mode="tunnel"] .sm-page:not(:last-child)::after{content:"→";position:absolute;top:8px;right:-13px;font-size:12px;color:#5e6f53}
.sm-pages[data-mode="tunnel"] .sm-toolbar{flex-wrap:wrap;gap:2px 6px;padding:6px 8px;font-size:10px}
.sm-pages[data-mode="tunnel"] .sm-toolbar img{width:14px;height:14px}
.sm-pages[data-mode="tunnel"] .sm-toolbar i{display:none}
.sm-pages[data-mode="tunnel"] .sm-toolbar>span{display:grid}
.sm-pages[data-mode="tunnel"] .sm-secs{padding:14px 7px 9px;gap:12px}
.sm-pages[data-mode="tunnel"] .sm-sec{grid-template-columns:minmax(0,1fr) auto;gap:6px;min-height:38px;padding:9px 7px 6px}
.sm-pages[data-mode="tunnel"] .sm-sec-art,.sm-pages[data-mode="tunnel"] .sm-cost-word{display:none}
.sm-pages[data-mode="tunnel"] .sm-sec-name{font-size:11.5px;overflow-wrap:anywhere}
.sm-pages[data-mode="tunnel"] .sm-sec-tag{font-size:8px;left:5px}
.sm-pages[data-mode="tunnel"] .sm-token{width:18px;height:18px;font-size:12px}
.sm-more{text-align:center;font-size:12px;color:var(--sm-muted);padding:8px;border:1.5px dashed #9ca893}

/* Total du cadre */
.sm-canvas-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-top:14px;padding:11px 14px;background:var(--sm-forest);color:#fff;border-radius:3px;font-size:13px}
.sm-canvas-foot strong{font:700 24px/1 var(--sm-condensed);color:var(--sm-lime);letter-spacing:-.01em}
.sm .sm-hint{font-size:12px;line-height:1.5;color:var(--sm-muted);margin:10px 2px 0}

/* Rythme */
.sm-panel{display:grid;gap:18px;min-width:0}
.sm-rhythm,.sm-result{background:var(--sm-cream);border:1px solid #cbd2c1;border-radius:4px;padding:20px 22px}
.sm-field{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px}
.sm-rhythm .sm-field:not(:last-child){margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #dde2d3}
.sm-period{display:block}
.sm-field-label{font-size:14px;font-weight:500;line-height:1.4;padding:0}
.sm-period .sm-field-label{display:block;margin-bottom:10px}
.sm-stepper{display:inline-flex;align-items:stretch;border:1px solid #b9c5ad;border-radius:10px;overflow:hidden;background:#fff}
.sm-step{width:44px;min-height:44px;font-size:21px;line-height:1;color:var(--sm-forest)}
.sm-step:hover{background:#eef1e6}
.sm-stepper input{width:58px;border:0;border-inline:1px solid #dde2d3;background:transparent;text-align:center;font:700 22px/1 var(--sm-condensed);color:var(--sm-ink);-moz-appearance:textfield;appearance:textfield}
.sm-stepper input::-webkit-inner-spin-button,.sm-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.sm .sm-stepper :focus-visible{outline:3px solid #6a8f50;outline-offset:-3px}
.sm-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border:1px solid #b9c5ad;border-radius:26px;background:#fff}
.sm-seg label{position:relative;cursor:pointer}
.sm-seg span{display:flex;align-items:center;justify-content:center;min-height:40px;padding:6px 10px;border-radius:22px;font-size:13px;line-height:1.2;text-align:center;transition:background-color 140ms,color 140ms}
.sm-seg label:hover span{background:#eef1e6}
.sm-seg input:checked+span{background:var(--sm-forest);color:#fff}

/* Résultat */
.sm-equation{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 14px;margin:2px 0 14px}
.sm-term{display:grid;justify-items:start}
.sm-term b{position:relative;z-index:0;font:700 clamp(40px,3.8vw,54px)/.95 var(--sm-condensed);letter-spacing:-.02em}
.sm-term small{max-width:13ch;margin-top:5px;font-size:12px;line-height:1.3;color:var(--sm-muted)}
.sm-op{font:italic 400 34px/1.2 var(--sm-serif);color:#7f8f74;padding-top:4px}
.sm-total b{color:var(--sm-forest)}
.sm-total b::after{content:"";position:absolute;left:-4px;right:-4px;bottom:3px;height:13px;background:var(--sm-lime);transform:rotate(-1.2deg);z-index:-1}
.sm .sm-average{font-size:13px;line-height:1.5;color:var(--sm-forest);background:#e7eadf;border-left:2px solid #8da478;padding:8px 12px;margin:0 0 14px}
.sm-meter-wrap{margin:0 0 18px}
.sm .sm-meter-caption{font-size:12px;line-height:1.45;color:var(--sm-muted);margin:0 0 8px}
.sm-meter{display:flex;height:12px;background:#e3e8d9;border:1px solid #c7d2ba;border-radius:2px;overflow:hidden}
.sm-meter>span{display:block;height:100%;transition:width 320ms ease-out}
.sm-m-inc{background:var(--sm-forest)}
.sm-m-top{background:repeating-linear-gradient(135deg,var(--sm-lime) 0 5px,#b6d80a 5px 9px)}
.sm-legend{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;margin:8px 0 0;padding:0;font-size:12px;color:#44513f}
.sm-legend i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.sm-k-inc{background:var(--sm-forest)}.sm-k-top{background:var(--sm-lime);border:1px solid #93b10a}.sm-k-spare{background:#e3e8d9;border:1px solid #b5c2a6}
.sm-offers{display:grid;gap:12px}
.sm-offer{position:relative;padding:16px 18px;border:1px solid #cbd2c1;border-radius:4px;background:#fbfaf6}
.sm-offer-start{background:transparent;border-style:dashed;border-color:#9fae93}
.sm-offer-rec{border:2px solid var(--sm-forest);background:#e0e8cf;padding:18px}
.sm-handles i{position:absolute;width:8px;height:8px;border:1px solid var(--sm-forest);background:var(--sm-cream)}
.sm-handles i:nth-child(1){left:-5px;top:-5px}.sm-handles i:nth-child(2){right:-5px;top:-5px}.sm-handles i:nth-child(3){right:-5px;bottom:-5px}.sm-handles i:nth-child(4){left:-5px;bottom:-5px}
.sm .sm-offer-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 6px;font:500 10px/1.4 var(--sm-sans);letter-spacing:1.2px;text-transform:uppercase;color:#44513f}
.sm-badge{padding:3px 9px;border-radius:20px;background:var(--sm-forest);color:#fff;letter-spacing:.3px;text-transform:none;font-size:10px}
.sm .sm-offer-title{font:700 28px/1.05 var(--sm-condensed);letter-spacing:-.01em;margin:0 0 10px}
.sm-offer-title span{margin-left:8px;color:var(--sm-forest);font-size:.82em}
.sm .sm-offer-text{font-size:13px;line-height:1.55;color:var(--sm-muted);margin:0 0 14px}
.sm-offer-start .sm-offer-text{margin:0}
.sm-costs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 12px}
.sm-costs>div{padding:10px 12px;background:var(--sm-cream);border:1px solid #c3cfb4;border-radius:3px}
.sm-costs dt{font-size:11px;letter-spacing:.3px;color:#44513f}
.sm-costs dd{margin:0}
.sm-cost{font-size:13px;color:var(--sm-forest)}
.sm-cost b{font:700 30px/1.1 var(--sm-condensed);letter-spacing:-.01em;color:var(--sm-ink)}
.sm-cost-note{margin-top:4px!important;font-size:11px;line-height:1.4;color:#4f5c49}
.sm .sm-cta{width:100%;justify-content:center}
.sm .sm-compare{font-size:12px;line-height:1.5;color:#44513f;margin:10px 0 0}
.sm .sm-volume{font-size:13px;margin:12px 0 0}
.sm-volume a{color:var(--sm-forest);text-decoration:underline;text-underline-offset:4px}

/* Règles : relevé à 3 colonnes */
.sm-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:34px;padding-top:26px;border-top:1px solid #bcc8b0}
.sm .sm-rule-head{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:700 23px/1 var(--sm-condensed);color:var(--sm-forest)}
.sm-rule-head .sm-token{width:30px;height:30px;font-size:20px}
.sm-token-time svg{display:block}
.sm-rules ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sm-rules li{padding-top:12px;border-top:1px solid #d5dbcb;font-size:13px;line-height:1.5;color:var(--sm-muted)}
.sm-rules li strong{display:block;margin-bottom:3px;color:var(--sm-forest);font-weight:600}
.sm-frise{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;margin-top:10px;font-size:9px;line-height:1.2}
.sm-frise-m{grid-row:1;text-align:center;color:#56654c;padding-bottom:3px;border-bottom:1px solid #c7d2ba}
.sm-frise-bar{padding:3px 5px;background:#e7eadf;border-left:3px solid var(--sm-forest);color:var(--sm-forest);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-frise-bar:nth-of-type(6){grid-row:2}.sm-frise-bar:nth-of-type(7){grid-row:3;border-left-color:#3f6b4f}.sm-frise-bar:nth-of-type(8){grid-row:4;border-left-color:#8da478}
.sm .sm-note{font-size:11px;line-height:1.6;color:#5c6358;margin:22px 0 0;max-width:820px}

/* Mise en évidence de la carte tarifaire visée par le bouton du résultat */
.price-card[tabindex="-1"]:focus{outline:none}
.price-card.sm-highlight{animation:sm-glow 2.4s ease-out both}
@keyframes sm-glow{0%,55%{box-shadow:0 0 0 4px var(--lime,#d2f909),0 0 0 6px var(--forest,#183f30)}100%{box-shadow:0 0 0 0 transparent}}

/* Apparition en cascade au changement de projet */
.sm-anim .sm-secs>li{animation:sm-in 420ms cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes sm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.reduced .sm-anim .sm-secs>li,.reduced .price-card.sm-highlight{animation:none}
.reduced .price-card.sm-highlight{box-shadow:0 0 0 4px var(--lime,#d2f909),0 0 0 6px var(--forest,#183f30)}
@media(prefers-reduced-motion:reduce){
  .sm-anim .sm-secs>li{animation:none}
  .sm *{transition:none!important}
  .price-card.sm-highlight{animation:none;box-shadow:0 0 0 4px var(--lime,#d2f909),0 0 0 6px var(--forest,#183f30)}
}

/* Responsive */
@media(max-width:1180px){
  .sm-pages[data-mode="tunnel"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .sm-pages[data-mode="tunnel"] .sm-page::after{display:none}
}
@media(max-width:1100px){.sm-sec{grid-template-columns:52px minmax(0,1fr) auto;gap:12px}.sm-sec-art{width:52px}}
@media(max-width:900px){
  .sm-head{grid-template-columns:1fr;gap:16px}
  .sm-body{grid-template-columns:1fr}
  .sm .sm-lead{max-width:600px}
}
@media(max-width:540px){
  .sm{padding-bottom:36px}
  .sm .sm-title{font-size:34px}
  .sm-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .sm-chip:last-child{grid-column:1/-1}
  .sm-chip>span{padding:9px 12px;min-height:54px}
  .sm-chip b{font-size:13px}
  .sm-visual{padding:14px 12px 12px}
  .sm-secs{padding:16px 10px 10px;gap:12px}
  .sm-sec{grid-template-columns:40px minmax(0,1fr) auto;gap:10px;padding:10px 9px 7px}
  .sm-sec-art{width:40px;height:22px}
  .sm-sec-name{font-size:13px}
  .sm-cost-word{display:none}
  .sm-pages[data-mode="tunnel"]{gap:10px}
  .sm-rhythm,.sm-result{padding:16px}
  .sm-seg span{font-size:12px;padding:6px}
  .sm-equation{flex-wrap:nowrap;gap:4px 9px}
  .sm-term{flex:0 1 auto;min-width:0}
  .sm-term b{font-size:38px}
  .sm-term small{max-width:none;font-size:11px}
  .sm-op{font-size:24px;padding-top:6px}
  .sm-costs{grid-template-columns:1fr}
  .sm-offer,.sm-offer-rec{padding:14px}
  .sm-rules{grid-template-columns:1fr;gap:24px}
}