/*
 * Formats de mise en page des pages de contenu (audit UX 2026, P1-7 et §5.6) : macros de vitrine/_ui.php.
 * Chargée après site.css par les pages qui les utilisent. Jetons --sx-* uniquement, rayons 8 / 20 px,
 * échelle 12 · 14 · 16 · 18 · 20 · 24 · 32 · 56. Mobile d'abord (360 px).
 * Tout fonctionne SANS JavaScript : onglets = sections empilées précédées de liens d'ancre, sommaire = liens,
 * carrousels = défilement horizontal natif. site.js ajoute seulement : onglets ARIA, état actif du sommaire,
 * flèches des carrousels. Aucune boucle d'animation.
 *  1. .sx-pnav      sommaire « Sur cette page » (marge collante sur ordinateur, barre de puces sur téléphone)
 *  2. .sx-rail      rangée de cartes en carrousel à accroche sur téléphone, grille sur ordinateur
 *  3. .sx-bento     grille asymétrique : une grande carte + petites cartes
 *  4. .sx-tabs      onglets (repli : sections empilées)
 *  5. .sx-bignums   bande de chiffres clés (uniquement des chiffres vrais, comptés dans le code)
 *  6. .sx-flow      frise de parcours numérotée
 *  7. .sx-vs        comparateur « Souvent ailleurs / Avec Scolarix »
 *  8. accordéons    réutilisent .sx-faq (site.css) ; ici l'icône de tête seulement
 */

/* ---------- 1. sommaire « Sur cette page » ---------- */
.sx-pnav { position: sticky; top: var(--sx-header); z-index: 40; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--sx-line); box-shadow: var(--sx-shadow-sm); }
.sx-pnav-in { width: 100%; max-width: var(--sx-wrap); margin: 0 auto; padding: 6px 0; }
.sx-pnav-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.sx-pnav ol { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0 40px 0 16px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.sx-pnav ol::-webkit-scrollbar { display: none; }
.sx-pnav li { flex: 0 0 auto; }
.sx-pnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid rgba(45, 74, 107, .18); border-radius: var(--sx-r-pill);
    background: var(--sx-white); color: var(--sx-text-mid); font-size: var(--sx-fs-14); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s; }
.sx .sx-pnav a:hover { border-color: var(--sx-navy); color: var(--sx-navy-900); }
.sx .sx-pnav a[aria-current] { background: var(--sx-navy-900); border-color: var(--sx-navy-900); color: var(--sx-white); }
/* la barre ne recouvre jamais le titre d'une section atteinte par une ancre */
@media (max-width: 1199.98px) { html:has(.sx-pnav) { scroll-padding-top: calc(var(--sx-header) + 72px); } }
/* ordinateur : carte collante dans une marge gauche ; le texte garde ≥ 680 px de large (892 px à 1366 px) */
@media (min-width: 1200px) {
    .sx-withtoc { display: grid; }
    .sx-withtoc > * { grid-area: 1 / 1; min-width: 0; }
    .sx-pnav { position: relative; top: auto; z-index: 30; pointer-events: none; background: none; border: 0; box-shadow: none; }
    .sx-pnav-in { position: sticky; top: calc(var(--sx-header) + 24px); width: 216px; max-width: none; margin: 3.5rem 0 3.5rem max(24px, calc((100% - var(--sx-wrap)) / 2 + 24px)); padding: 1rem;
        pointer-events: auto; background: var(--sx-white); border: 1px solid var(--sx-line); border-radius: var(--sx-r-lg); box-shadow: var(--sx-shadow-sm); }
    .sx-pnav-t { position: static; width: auto; height: auto; overflow: visible; clip: auto; margin: 0 0 .5rem; padding: 0 .6rem; font-size: var(--sx-fs-12); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sx-success); }
    .sx-pnav ol { display: grid; gap: 2px; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
    .sx-pnav a { display: flex; width: 100%; min-height: 40px; padding: .45rem .6rem; border: 0; border-left: 3px solid transparent; border-radius: 0 var(--sx-r-sm) var(--sx-r-sm) 0; background: none; font-size: var(--sx-fs-14); white-space: normal; line-height: 1.3; }
    .sx .sx-pnav a:hover { background: var(--sx-cream); color: var(--sx-navy-900); }
    .sx .sx-pnav a[aria-current] { background: var(--sx-action-pale); border-left-color: var(--sx-action); color: var(--sx-navy-900); font-weight: 700; }
    .sx-withtoc-body > .sx-sec > .sx-wrap { padding-left: calc(24px + 216px + 40px); }
    .sx-withtoc-body > .sx-sec { padding: 3.5rem 0; }
}
@media print { .sx-pnav { display: none !important; } }

/* ---------- 2. carrousel à accroche (téléphone) / grille (ordinateur) ---------- */
.sx-rail { list-style: none; display: grid; gap: 12px; grid-auto-flow: column; grid-auto-columns: min(82%, 320px); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 -16px; padding: 4px 16px 12px; scroll-padding-inline: 16px; scrollbar-width: thin; }
.sx-rail > li { scroll-snap-align: start; min-width: 0; display: flex; }
.sx-rail > li > * { flex: 1 1 auto; }
.sx-rail .sx-card { padding: 1.4rem 1.2rem; }
@media (min-width: 992px) { .sx-rail .sx-card { padding: 1.6rem 1.4rem; } }
/* flèches : souris et clavier seulement ; au doigt, on fait glisser (la carte suivante dépasse) */
.sx-rail-nav { display: none; justify-content: flex-end; gap: 8px; margin-top: 4px; }
@media (hover: hover) and (pointer: fine) { .sx-rail-nav { display: flex; } }
.sx-rail-nav[hidden] { display: none; }
.sx .sx-rail-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sx-line-strong); border-radius: 50%; background: var(--sx-white); color: var(--sx-navy); cursor: pointer; font-size: 1rem; transition: background-color .2s, border-color .2s, transform .15s; }
.sx .sx-rail-btn:hover:not(:disabled) { border-color: var(--sx-navy); background: var(--sx-action-pale); }
.sx .sx-rail-btn:active:not(:disabled) { transform: scale(.94); }
.sx .sx-rail-btn:disabled { opacity: .4; cursor: default; }
.sx-sec-navy .sx-rail-btn { background: transparent; color: var(--sx-white); border-color: rgba(255, 255, 255, .5); }
@media (min-width: 768px) {
    .sx-rail { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; gap: 1.2rem; }
    .sx-rail-nav { display: none !important; }
}
@media (min-width: 768px) { .sx-rail-1 { grid-template-columns: minmax(0, 1fr); } }
/* .is-even : toutes les cartes à la hauteur de la plus haute (pas seulement celles d'une même ligne) */
@media (min-width: 768px) {
    .sx-rail.is-even { grid-auto-rows: 1fr; }
    /* carte de domaine : la liste prend l'espace libre, le lien « … en détail » se cale en bas, aligné d'une carte à l'autre */
    .sx-rail.is-even .sx-card.sx-domain { grid-template-rows: auto 1fr auto; align-content: stretch; }
    .sx-rail.is-even .sx-card.sx-domain .sx-mods { align-self: start; }
}
@media (min-width: 992px) {
    .sx-rail-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sx-rail-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* cartes de hauteurs très inégales : colonnes « maçonnerie » (lecture de haut en bas, colonne après colonne) */
    .sx-rail.is-masonry { display: block; columns: 3; column-gap: 1.2rem; }
    .sx-rail.is-masonry > li { break-inside: avoid; margin-bottom: 1.2rem; }
    .sx-rail.is-masonry > li > * { height: auto; }
}

/* carte compacte (carrousels, bento) : icône en pastille, titre, texte */
.sx-tile2 { position: relative; display: flex; flex-direction: column; gap: .35rem; min-width: 0; background: var(--sx-white); border: 1px solid rgba(45, 74, 107, .1); border-radius: var(--sx-r-lg); padding: 1.2rem 1.2rem 1.3rem; box-shadow: var(--sx-shadow-sm); }
.sx-sec-white .sx-tile2 { background: var(--sx-cream); box-shadow: none; }
.sx-tile2-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: .35rem; border-radius: var(--sx-r-sm); background: var(--sx-action-pale); color: var(--sx-navy); font-size: 1.15rem; }
.sx .sx-tile2 :is(h3, h4) { font-family: var(--sx-sans); font-size: var(--sx-fs-16); font-weight: 700; color: var(--sx-navy); letter-spacing: 0; line-height: 1.35; margin: 0; }
.sx-tile2 p { margin: 0; font-size: var(--sx-fs-14); color: var(--sx-text-mid); line-height: 1.55; }
.sx-tile2 .sx-link { margin-top: auto; }
.sx-tile2 .sx-chip { align-self: flex-start; }
/* carte claire posée sur une surface marine : textes « clair » */
:is(.sx-sec-navy, .sx-bento-big) .sx-tile2 { --sx-text: var(--sx-l-text); --sx-text-mid: var(--sx-l-text-mid); --sx-muted: var(--sx-l-muted); }
.sx .sx-sec-navy .sx-tile2 a:not(.sx-btn) { color: var(--sx-action); }
.sx-sec-navy :is(.sx-note, .sx-faq, .sx-tile2) p { color: var(--sx-text-mid); }
.sx-sec-navy :is(.sx-note, .sx-faq, .sx-tile2) strong { color: var(--sx-text); }
.sx .sx-sec-navy .sx-faq a:not(.sx-btn) { color: var(--sx-action); }

/* ---------- 3. bento : une grande carte + petites cartes ---------- */
.sx-bento { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.sx-bento-big { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .5rem; padding: 1.6rem 1.4rem; border-radius: var(--sx-r-lg); background: var(--sx-navy-900); color: var(--sx-on-dark);
    --sx-text: var(--sx-on-dark); --sx-text-mid: var(--sx-on-dark-2); --sx-muted: var(--sx-on-dark-2); }
.sx-bento-big::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; border: 2px dashed rgba(201, 168, 76, .35); pointer-events: none; }
.sx-bento-big .sx-tile2-ico { width: 48px; height: 48px; background: rgba(255, 255, 255, .1); color: var(--sx-gold); font-size: 1.4rem; }
.sx-bento-k { margin: 0; font-size: var(--sx-fs-12); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sx-gold); }
.sx .sx-bento-big :is(h3, h4) { font-size: var(--sx-fs-24); color: var(--sx-white); margin: 0; line-height: 1.2; }
.sx-bento-big p { margin: 0; font-size: var(--sx-fs-16); color: var(--sx-on-dark); line-height: 1.6; max-width: 34rem; }
.sx-bento-big a:not(.sx-btn) { color: var(--sx-action-on-dark); }
.sx-bento-big :focus-visible { outline-color: var(--sx-white); }
.sx-bento-rest { list-style: none; }
@media (min-width: 768px) {
    .sx-bento { gap: 1.2rem; }
    .sx-bento-big { padding: 2rem 1.8rem; }
}
@media (min-width: 992px) {
    .sx-bento { grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); align-items: stretch; }
    .sx-bento-big { padding: 2.4rem 2rem; min-height: 100%; }
    .sx-bento-big .sx-tile2-ico { width: 64px; height: 64px; font-size: 1.8rem; margin-bottom: auto; }
    .sx-bento .sx-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sx-bento:has(.sx-rail-3) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 3fr); }
    .sx-bento .sx-rail.sx-rail-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 4. onglets ---------- */
/* sans JavaScript : la liste des onglets est une rangée de liens d'ancre, les panneaux sont empilés */
.sx-tabs-nav ul { list-style: none; display: flex; gap: 6px; margin: 0 -16px 1.2rem; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
.sx-tabs-nav ul::-webkit-scrollbar { display: none; }
.sx-tabs-nav li { flex: 0 0 auto; }
.sx-tabs-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border: 1px solid var(--sx-line-strong); border-radius: var(--sx-r-sm); background: var(--sx-white);
    color: var(--sx-navy); font-size: var(--sx-fs-16); font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s, transform .15s; }
.sx .sx-tabs-nav a:hover { border-color: var(--sx-navy); background: var(--sx-action-pale); color: var(--sx-navy-900); }
.sx-tabs-nav a:active { transform: translateY(1px); }
.sx-tabs-nav .sx-i { color: var(--sx-success); }
.sx .sx-tabs-nav a[aria-selected="true"] { background: var(--sx-navy-900); border-color: var(--sx-navy-900); color: var(--sx-white); }
.sx-tabs-nav a[aria-selected="true"] .sx-i { color: var(--sx-gold); }
.sx-tab + .sx-tab { margin-top: 2.4rem; padding-top: 2.4rem; border-top: 1px solid var(--sx-line); }
.sx-tabs.is-tabs .sx-tab + .sx-tab { margin-top: 0; padding-top: 0; border-top: 0; }
.sx-tab:focus-visible { outline-offset: 6px; }
.sx-tab-h { font-size: var(--sx-fs-20); margin: 0 0 .6rem; }
@media (min-width: 768px) { .sx-tab-h { font-size: var(--sx-fs-24); } }
/* pages à sommaire : titres de section à 24 → 32 px (le rythme vient des formats, pas de la taille) */
.sx-withtoc-body .sx-head h2 { font-size: var(--sx-fs-t32); }
@media (min-width: 768px) { .sx-withtoc-body .sx-head { margin-bottom: 1.8rem; } .sx-withtoc-body .sx-divider { margin: .8rem 0 1.2rem; } }
.sx-tab .sx-lead { margin: 0 0 1.4rem; }
@media (min-width: 768px) { .sx-tabs-nav ul { flex-wrap: wrap; overflow: visible; margin: 0 0 1.6rem; padding: 0; } }
/* panneau à deux colonnes (texte + visuel) */
.sx-tab-split { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 992px) { .sx-tab-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 2.4rem; } }
/* liste de fonctions compacte : deux colonnes dès la tablette */
.sx-feats.is-2 { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 2rem; }
@media (min-width: 768px) { .sx-feats.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sx-feats.is-2 > li:nth-last-child(2):nth-child(odd) { border-bottom: 0; } }
.sx-feats.is-tight > li { padding: .85rem 0; }
/* deux colonnes dès 340 px pour des éléments courts (icône au-dessus du titre) */
@media (min-width: 340px) and (max-width: 767.98px) {
    .sx-feats.is-2m { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
    .sx-feats.is-2m > li { flex-direction: column; gap: .4rem; }
    .sx-feats.is-2m p { font-size: var(--sx-fs-14); line-height: 1.5; }
    .sx-feats.is-2m > li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}
.sx .sx-feats :is(h4) { font-family: var(--sx-sans); font-size: var(--sx-fs-16); font-weight: 700; color: var(--sx-navy); margin: 0 0 .25rem; letter-spacing: 0; line-height: 1.35; }

/* ---------- 5. bande de chiffres clés ---------- */
.sx-n2 { --n: 2; } .sx-n3 { --n: 3; } .sx-n4 { --n: 4; } .sx-n5 { --n: 5; }
.sx-bignums { list-style: none; display: grid; gap: 10px; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); margin: 0; padding: 0; }
.sx-bignums > li { display: flex; flex-direction: column; gap: .35rem; min-width: 0; padding: 0 0 0 .7rem; border-left: 3px solid var(--sx-gold); }
.sx-bignums strong { font-family: var(--sx-serif); font-size: var(--sx-fs-32); font-weight: 800; line-height: 1; color: var(--sx-action); font-variant-numeric: lining-nums tabular-nums; }
.sx-bignums span { font-size: var(--sx-fs-14); color: var(--sx-text-mid); line-height: 1.4; overflow-wrap: break-word; }
.sx-bignums span b { color: var(--sx-navy); }
@media (min-width: 768px) {
    .sx-bignums { gap: 1.2rem; }
    .sx-bignums > li { gap: .5rem; padding-left: 1.2rem; }
    .sx-bignums strong { font-size: var(--sx-fs-56); }
    .sx-bignums span { font-size: var(--sx-fs-16); }
}
.sx-sec-navy .sx-bignums strong { color: var(--sx-gold); }
.sx-sec-navy .sx-bignums span b { color: var(--sx-white); }

/* ---------- 6. frise de parcours ---------- */
.sx-flow { list-style: none; counter-reset: sxf; display: grid; gap: 0; margin: 0; padding: 0; }
.sx-flow > li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 14px; padding: 0 0 1.2rem; }
.sx-flow > li::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--sx-sage-light); }
.sx-flow > li:last-child { padding-bottom: 0; }
.sx-flow > li:last-child::before { content: none; }
.sx-flow-n { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sx-navy-900); color: var(--sx-gold); font-family: var(--sx-serif); font-size: var(--sx-fs-18); font-weight: 800; font-variant-numeric: lining-nums; }
.sx .sx-flow :is(h3, h4) { font-family: var(--sx-sans); font-size: var(--sx-fs-16); font-weight: 700; color: var(--sx-navy); margin: .55rem 0 .2rem; letter-spacing: 0; line-height: 1.35; }
.sx-flow p { margin: 0; font-size: var(--sx-fs-14); color: var(--sx-text-mid); line-height: 1.55; }
.sx-sec-navy .sx-flow-n { background: var(--sx-gold); color: var(--sx-navy-950); }
.sx-sec-navy .sx-flow > li::before { background: rgba(168, 197, 171, .45); }
/* tablette et ordinateur : frise horizontale (sauf .is-v, verticale partout, pour une colonne étroite) */
@media (min-width: 768px) {
    .sx-flow:not(.is-v) { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 1.2rem; }
    .sx-flow:not(.is-v) > li { grid-template-columns: minmax(0, 1fr); padding: 0; }
    .sx-flow:not(.is-v) > li::before { left: 52px; right: -1.2rem; top: 21px; bottom: auto; width: auto; height: 2px; }
    .sx .sx-flow:not(.is-v) :is(h3, h4) { margin-top: .9rem; }
}

/* ---------- 7. comparateur « Souvent ailleurs / Avec Scolarix » ---------- */
.sx-vs { list-style: none; display: grid; gap: .8rem; margin: 0; padding: 0; }
.sx-vs > li { display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr); padding: 1rem 1.1rem; background: var(--sx-white); border: 1px solid rgba(45, 74, 107, .1); border-radius: var(--sx-r-lg); }
.sx-sec-white .sx-vs > li { background: var(--sx-cream); }
.sx .sx-vs h3 { font-family: var(--sx-sans); font-size: var(--sx-fs-16); font-weight: 800; color: var(--sx-navy); margin: 0; letter-spacing: 0; }
.sx-vs p { display: flex; gap: .55rem; align-items: flex-start; margin: 0; font-size: var(--sx-fs-14); line-height: 1.55; color: var(--sx-text-mid); }
.sx-vs p > .sx-i { flex: 0 0 auto; margin-top: .2em; font-size: 1rem; }
.sx-vs-dot { flex: 0 0 10px; width: 10px; height: 2px; margin: .7em 3px 0; background: var(--sx-line-strong); }
.sx-vs p.is-after { color: var(--sx-text); }
.sx-vs p.is-after > .sx-i { color: var(--sx-success); }
.sx-vs p b { font-weight: 700; }
.sx-vs-head { display: none; }
@media (min-width: 768px) {
    .sx-vs-head { display: grid; grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; padding: 0 1.1rem; font-size: var(--sx-fs-12); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sx-muted); }
    .sx-vs-head span:last-child { color: var(--sx-success); }
    .sx-vs > li { grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
    .sx-vs p b.sx-vs-lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .sx-vs p.is-after { padding-left: 1.2rem; border-left: 3px solid var(--sx-success); }
}

/* ---------- 8. accordéons (.sx-faq) : icône devant le titre ---------- */
.sx-faq summary .sx-acc-t { display: inline-flex; align-items: flex-start; gap: .7rem; }
.sx-faq summary .sx-acc-t > .sx-i { margin-top: .2em; color: var(--sx-success); transform: none; }
.sx-faq details[open] summary .sx-acc-t > .sx-i { transform: none; }
.sx-faq summary > .sx-i:last-child { flex: 0 0 auto; }
.sx-faq.is-wide { max-width: none; }
@media (min-width: 992px) { .sx-faq.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

/* carte de section à deux colonnes (titre à gauche, format à droite) */
.sx-duo { display: grid; gap: 1.6rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .sx-duo { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3rem; align-items: start; } .sx-duo > .sx-head { margin-bottom: 0; } }

/* capture réduite sur téléphone (moins de hauteur, reste lisible au toucher) */
@media (max-width: 767.98px) { .sx-shot.is-compact-m { max-width: 260px; margin-left: auto; margin-right: auto; } .sx-phone.is-compact-m { width: 48%; max-width: 190px; margin-left: auto; margin-right: auto; } }
@media (min-width: 992px) { .sx-shot.is-compact-d { max-width: 300px; } }
/* capture de téléphone recadrée sur le haut de l'écran, sur téléphone seulement */
@media (max-width: 767.98px) { .sx-phone.is-crop-m img { max-height: 220px; object-fit: cover; object-position: top center; } }

/* fin de page : « Ce que ça change » et appel à la démo côte à côte sur grand écran */
.sx-end { display: grid; gap: 1.6rem; grid-template-columns: minmax(0, 1fr); }
.sx-end + .sx-pager { margin-top: 1.6rem; }
@media (min-width: 1200px) {
    .sx-end { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 1.6rem; align-items: stretch; }
    .sx-end .sx-change .sx-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1.6rem; }
    .sx-end .sx-cta-wrap { grid-template-columns: minmax(0, 1fr); padding: 2rem; gap: 1.2rem; align-content: center; }
    .sx-end .sx-cta-wrap h2 { font-size: var(--sx-fs-32); }
}

/* capture recadrée sur sa partie utile (audit P1-4 : recadrer plutôt que réduire) */
.sx-shot.is-crop img { max-height: 300px; object-fit: cover; object-position: top center; }

/* carte de domaine (/modules) : icône et titre sur la même ligne, liste dessous */
.sx-card.sx-domain { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: start; gap: 0 .8rem; }
.sx-card.sx-domain > :not(.sx-icon):not(h3) { grid-column: 1 / -1; }
.sx-card.sx-domain > .sx-icon { width: 44px; height: 44px; flex-basis: 44px; margin: 0; font-size: 1.15rem; }
.sx .sx-card.sx-domain > h3 { margin: 0; }
.sx-card.sx-domain .sx-mods { margin-top: 1rem; gap: .7rem; }
.sx-card.sx-domain > .sx-link { align-self: end; }
/* titre de panneau identique au libellé de l'onglet : visible sans JavaScript (sections empilées), masqué
   visuellement quand les onglets sont actifs (le panneau reste nommé par son onglet) */
.sx-tabs.is-tabs .sx-tab-h.is-dup { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
/* modules optionnels (/modules) dans un panneau d'onglet : cartes plus serrées */
.sx-tab .sx-optmods { gap: .7rem; }
.sx-tab .sx-optmods li { padding: .85rem 1rem; gap: .25rem; }