/*
 * Thème « service public » du SITE PUBLIC Scolarix (vitrine, écoles partenaires, pré-inscription, connexion,
 * mot de passe oublié, guide, confidentialité). Chargé par App/Views/vitrine/_layout.php APRÈS site.css et
 * après les feuilles propres à chaque page (bloc head) : il les surcharge sans les modifier.
 * Les espaces connectés (admin, enseignant, parent, élève) ne chargent jamais ce fichier.
 *
 * Inspiration : la grammaire du site Parcoursup (système de design de l'État) : fond blanc, sections
 * teintées très pâles, angles droits, titres sans empattement, liens et boutons d'un seul bleu profond,
 * cartes à filet gris, champs gris à filet inférieur, en-tête sur deux niveaux, pied de page blanc à filet bleu.
 * Sans reprendre ce qui est réservé à l'État : ni police Marianne, ni bloc-marque « République française »,
 * ni bleu France #000091. Couleurs de la charte Scolarix (#0C6CD0, #1A2F45), le bleu approfondi pour le texte.
 * Contrastes vérifiés : #0b4f9c 8,2:1 sur blanc, 7,6:1 sur #f2f5fb ; #3a3a3a 11:1 ; #666 5,7:1 sur blanc.
 */

/* ---------- jetons ---------- */
:root {
    --ps-blue: #0b4f9c;            /* bleu Scolarix approfondi : liens, boutons, filets actifs */
    --ps-blue-hover: #083e7c;
    --ps-blue-active: #062f5e;
    --ps-blue-pale: #e8eef8;       /* survol des boutons secondaires, élément courant */
    --ps-tint: #f2f5fb;            /* sections alternées */
    --ps-grey-bg: rgba(15, 23, 42, .035); /* fond des champs : voile très léger (s'adapte aux sections teintées) */
    --ps-grey-bg-hover: rgba(15, 23, 42, .06);
    --ps-grey-50: #f6f6f6;
    --ps-border: #dddddd;
    --ps-title: #161616;
    --ps-text: #3a3a3a;
    --ps-muted: #666666;

    --sx-action: var(--ps-blue);
    --sx-action-hover: var(--ps-blue-hover);
    --sx-action-pale: var(--ps-blue-pale);
    --sx-blue: var(--ps-blue);
    --sx-blue-ink: var(--ps-blue);
    --sx-navy: var(--ps-title);
    --sx-cream: var(--sx-white);
    --sx-l-text: var(--ps-text);
    --sx-l-text-mid: var(--ps-text);
    --sx-l-muted: var(--ps-muted);
    --sx-text: var(--ps-text);
    --sx-text-mid: var(--ps-text);
    --sx-muted: var(--ps-muted);
    --sx-sage-ink: var(--ps-muted);
    --sx-line: var(--ps-border);
    --sx-line-strong: #929292;
    --sx-r-sm: 0px;
    --sx-r-lg: 0px;
    --sx-r-pill: 0px;
    --sx-shadow-sm: none;
    --sx-shadow: 0 6px 18px rgba(0, 0, 18, .16);
    --sx-serif: var(--sx-sans);    /* plus de titres à empattement */
    --sx-focus: 0 0 0 2px var(--sx-white), 0 0 0 4px #0a76f6;
}

/* ---------- base ---------- */
body.sx { background: var(--sx-white); color: var(--ps-text); }
.sx :where(h1, h2, h3, h4) { font-family: var(--sx-sans); color: var(--ps-title); font-weight: 700; letter-spacing: 0; line-height: 1.25; }
.sx :where(a) { color: var(--ps-blue); }
.sx :where(a):hover { color: var(--ps-blue-hover); }
.sx :focus-visible { outline: 2px solid #0a76f6; outline-offset: 2px; box-shadow: none; }
.sx :where(strong) { color: var(--ps-title); }
.sx-skip { border-radius: 0; }

/* ---------- en-tête sur deux niveaux ---------- */
.sx-header { background: var(--sx-white); box-shadow: 0 1px 0 var(--ps-border); border-bottom: 0; }
@supports (backdrop-filter: blur(14px)) { .sx-header { background: var(--sx-white); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.sx-brand img { height: 44px; }
.sx-tagline { display: none; }
.sx-tools { display: none; }
.sx-navbar { display: none; }
.sx-menu > summary { border-color: var(--ps-border); color: var(--ps-blue); font-weight: 500; }
.sx-menu[open] > summary { background: var(--ps-blue-pale); border-color: var(--ps-blue); }
.sx-menu-panel { box-shadow: 0 8px 16px rgba(0, 0, 0, .12); }
.sx-menu-panel a { font-weight: 500; color: var(--ps-title); border-bottom-color: var(--ps-border); }
.sx-menu-panel a[aria-current="page"] { color: var(--ps-blue); box-shadow: inset 2px 0 0 var(--ps-blue); padding-left: 12px; }
.sx-menu-panel a[aria-current="page"]::after { content: none; }
.sx-menu-group > span { letter-spacing: 0; text-transform: none; font-size: var(--sx-fs-14); color: var(--ps-muted); font-weight: 500; }

@media (min-width: 1140px) {
    /* comme le modèle, l'en-tête défile avec la page : plus de bandeau collant de 150 px */
    :root { --sx-header: 0px; }
    /* relative + z-index : sans eux, le sous-menu « Plateforme » passait SOUS le héros de la page */
    .sx-header { position: relative; z-index: 100; }
    .sx-header-in { min-height: 112px; align-items: center; gap: 24px; }
    .sx-brand { margin-right: 0; gap: 18px; }
    .sx-brand img { height: 52px; }
    .sx-tagline { display: block; max-width: 220px; padding-left: 18px; border-left: 1px solid var(--ps-border); font-family: var(--sx-sans); font-size: var(--sx-fs-14); font-weight: 400; line-height: 1.4; color: var(--ps-text); letter-spacing: 0; }
    .sx-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin-left: auto; }
    .sx-tools ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 4px; }
    .sx-tools a:not(.sx-btn) { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; font-size: var(--sx-fs-14); font-weight: 500; color: var(--ps-blue); text-decoration: none; }
    .sx-tools a:not(.sx-btn):hover { background: var(--ps-grey-50); text-decoration: none; }
    .sx-tools a:not(.sx-btn)[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
    .sx-tools .sx-btn[aria-current] { text-decoration: none; }
    .sx-tools .sx-i { font-size: 1rem; }
    .sx-tools .sx-btn { min-height: 40px; padding: .4rem 1rem; }

    .sx-navbar { display: block; border-top: 1px solid var(--ps-border); }
    .sx-navbar .sx-nav { display: flex; }
    .sx-navbar .sx-nav > ul { display: flex; flex-wrap: wrap; gap: 0 4px; margin-left: -16px; }
    .sx a.sx-nav-link { min-height: 56px; padding: 0 16px; font-size: var(--sx-fs-14); font-weight: 400; color: var(--ps-title); transition: background-color .15s; }
    .sx a.sx-nav-link:hover, .sx-dd:focus-within > .sx-nav-link, .sx-dd:hover > .sx-nav-link { color: var(--ps-title); background: var(--ps-grey-50); box-shadow: none; }
    .sx a.sx-nav-link[aria-current] { color: var(--ps-blue); font-weight: 500; box-shadow: inset 0 -2px 0 var(--ps-blue); }
    .sx-nav-link .sx-i { font-size: .75rem; margin-left: 4px; }
    /* ouvert au clic (site.js) : visible même sans survol */
    .sx-dd.is-open > .sx-dd-panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
    .sx-dd.is-open > .sx-nav-link { background: var(--ps-grey-50); }
    .sx-dd.is-open > .sx-nav-link .sx-i { transform: rotate(180deg); }
    .sx-dd-panel { z-index: 110; top: 100%; left: 0; min-width: 340px; padding: 8px 0; border: 0; box-shadow: 0 8px 16px rgba(0, 0, 0, .14); transform: none; }
    .sx-dd-panel a { padding: 12px 20px; border-bottom: 1px solid var(--ps-border); }
    .sx-dd-panel li:last-child a { border-bottom: 0; }
    .sx-dd-panel a:hover, .sx-dd-panel a:focus-visible { background: var(--ps-grey-50); }
    .sx-dd-panel a[aria-current="page"] { background: transparent; box-shadow: inset 2px 0 0 var(--ps-blue); }
    .sx-dd-panel .sx-i, .sx-dd-panel strong { color: var(--ps-blue); }
    .sx-dd-panel strong { font-weight: 500; }
}

/* en-tête « focus » (connexion, pré-inscription, mot de passe) : un seul niveau, mêmes liens outils */
.sx-fnav a { color: var(--ps-blue); font-weight: 500; }
.sx-fnav a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- boutons : angles droits, un bleu ---------- */
.sx-btn { font-weight: 500; border-width: 0; padding: .55rem 1.5rem; min-height: 44px; transition: background-color .15s, color .15s, box-shadow .15s; }
@media (hover: hover) { .sx .sx-btn:not(:disabled):hover { transform: none; } }
.sx .sx-btn:not(:disabled):active { transform: none; }
.sx .sx-btn-primary, .sx .sx-btn-red, .sx .sx-btn-light { background: var(--ps-blue); color: var(--sx-white); box-shadow: none; }
.sx .sx-btn-primary:hover, .sx .sx-btn-red:hover, .sx .sx-btn-light:hover { background: var(--ps-blue-hover); color: var(--sx-white); box-shadow: none; }
.sx .sx-btn-primary:active { background: var(--ps-blue-active); }
/* secondaire : contour intérieur bleu de 1 px */
.sx .sx-btn-outline, .sx .sx-btn-ghost-light, .sx .sx-eh .sx-eh-btn2 { background: transparent; color: var(--ps-blue); box-shadow: inset 0 0 0 1px var(--ps-blue); }
.sx .sx-btn-outline:hover, .sx .sx-btn-ghost-light:hover, .sx .sx-eh .sx-eh-btn2:hover { background: var(--ps-grey-50); color: var(--ps-blue); box-shadow: inset 0 0 0 1px var(--ps-blue); }
.sx-sec-navy .sx-btn-primary, .sx-eh .sx-btn-primary, .sx-ls .sx-btn-primary, .sx-ent-band .sx-btn-primary { box-shadow: none; }
.sx .sx-menu-panel a.sx-btn { border: 0; font-weight: 500; }

/* liens d'action : soulignés, flèche à droite */
.sx-link { font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.sx a.sx-link:hover { text-decoration-thickness: 2px; }

/* ---------- éléments partagés ---------- */
.sx-eyebrow, .sx-eyebrow-light { font-size: var(--sx-fs-14); letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--ps-muted); }
.sx-crumb { font-size: var(--sx-fs-12); }
.sx-crumb a { color: var(--ps-text); }
.sx-crumb [aria-current] { color: var(--ps-text); font-weight: 400; }
.sx-divider, .sx-divider-gold { background: var(--ps-blue) !important; }

/* ---------- héros de l'accueil : section teintée, à plat ---------- */
.sx-hero { background: var(--ps-tint); }
.sx-hero-shape { display: none !important; }
.sx-hero-eyebrow { font-size: var(--sx-fs-16); color: var(--ps-muted); }
.sx .sx-hero-title { font-family: var(--sx-sans); text-transform: none; color: var(--ps-title); font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); line-height: 1.15; letter-spacing: 0; }
.sx-hero-lead { color: var(--ps-text); }
.sx-trust { color: var(--ps-text); }
.sx-trust .sx-i { color: var(--ps-blue); }
.sx-hero-panel { background: none; clip-path: none; }
@media (min-width: 992px) {
    .sx-hero { min-height: 0; }
    .sx-hero-in { padding-top: 4rem; padding-bottom: 4rem; }
}
.sx-hv { background: none; clip-path: none; padding-left: 0; padding-right: 0; }
.sx-hv-cap, .sx .sx-hv-cap { background: transparent; color: var(--ps-muted); padding-left: 0; padding-right: 0; }

/* ---------- héros des pages de contenu ---------- */
.sx-phero { background: var(--ps-tint); border-bottom: 0; }
.sx-phero h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); color: var(--ps-title); line-height: 1.15; }
.sx-phero h1 em { color: var(--ps-blue); }
.sx-phero-media::before { display: none; }
.sx-phero-media { --sx-text: var(--ps-text); --sx-text-mid: var(--ps-text); --sx-muted: var(--ps-muted); }
.sx .sx-phero-media figcaption, .sx-phero-media .sx-phone figcaption, .sx-phero-cap { color: var(--ps-muted); }

/* ---------- héros-diaporama (hero.css) : clair, texte foncé ---------- */
.sx-eh { background: var(--ps-tint); color: var(--ps-text); }
.sx-eh::before, .sx-eh::after { display: none; }
.sx-eh :focus-visible { outline-color: #0a76f6; }
.sx-eh .sx-crumb { color: var(--ps-muted); }
.sx-eh .sx-crumb a { color: var(--ps-text); }
.sx-eh .sx-crumb a:hover { color: var(--ps-blue); }
.sx-eh .sx-crumb [aria-current] { color: var(--ps-text); }
.sx-eh .sx-crumb li + li::before { color: var(--ps-muted); }
.sx .sx-eh-kicker { color: var(--ps-muted); letter-spacing: 0; text-transform: none; font-size: var(--sx-fs-14); font-weight: 500; }
.sx-eh-kicker::before { background: var(--ps-blue); }
.sx-eh h2 { color: var(--ps-title); font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); line-height: 1.15; }
.sx-eh.is-compact h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
.sx-eh h2 em { color: var(--ps-blue); }
.sx-eh-txt p { color: var(--ps-text); }
.sx .sx-eh .sx-ls-dot, .sx .sx-ls-dot { color: var(--ps-muted); font-weight: 500; }
.sx .sx-eh .sx-ls-dot.is-active, .sx .sx-ls-dot.is-active { color: var(--ps-title); font-weight: 700; }
.sx-eh .sx-ls-dot-track { background: #cfd6e2; border-radius: 0; }
.sx-eh .sx-ls-dot:hover .sx-ls-dot-track { background: #aab4c4; }
.sx-eh .sx-ls-dot-bar { background: var(--ps-blue); }
.sx .sx-eh .sx-ls-btn { border-radius: 0; border-color: var(--ps-blue); color: var(--ps-blue); background: var(--sx-white); }
.sx .sx-eh .sx-ls-btn:hover { background: var(--ps-blue-pale); border-color: var(--ps-blue); }
/* rangée de mots-clés : étiquettes grises, comme les « tags » du modèle */
.sx-rib { background: var(--sx-white); border-bottom: 1px solid var(--ps-border); color: var(--ps-title); }
.sx-rib-list li { border: 0; background: var(--ps-blue-pale); color: var(--ps-title); font-weight: 400; border-radius: 0; }
.sx-rib-list li::before { content: none; }

/* ---------- connexion : panneau illustré clair (connexion.css) ---------- */
.sx-login-main { background: var(--sx-white); }
.sx-ls { background: var(--ps-tint); color: var(--ps-text); }
.sx-ls::before, .sx-ls::after { display: none; }
.sx-ls :focus-visible { outline-color: #0a76f6; }
.sx-ls-kicker { color: var(--ps-muted); font-weight: 500; }
.sx-ls-kicker::before { background: var(--ps-blue); }
.sx-ls h2 { color: var(--ps-title); }
.sx-ls-list { color: var(--ps-text); }
.sx-ls-list .sx-i { background: var(--ps-blue-pale); color: var(--ps-blue); border-radius: 0; }
.sx-ls-dot { color: var(--ps-muted); }
.sx-ls-dot.is-active { color: var(--ps-title); }
.sx-ls-dot-track { background: #cfd6e2; border-radius: 0; }
.sx-ls-dot:hover .sx-ls-dot-track { background: #aab4c4; }
.sx-ls-dot-bar { background: var(--ps-blue); }
.sx .sx-ls-btn { border-radius: 0; border-color: var(--ps-blue); color: var(--ps-blue); background: var(--sx-white); }
.sx .sx-ls-btn:hover { background: var(--ps-blue-pale); border-color: var(--ps-blue); }
.sx-ls, .sx-eh, .sx-ent-band { --sx-text: var(--ps-text); --sx-text-mid: var(--ps-text); --sx-muted: var(--ps-muted); --sx-sage-ink: var(--ps-muted); }
.sx-auth-card { border: 1px solid var(--ps-border); box-shadow: none; }
.sx-auth-card::before { background: var(--ps-blue) !important; }
.sx .sx-login .sx-auth-spaces a:hover { background: var(--ps-grey-50); color: var(--ps-blue); }
.sx-auth-spaces li { border-radius: 0; }
.sx-auth-spaces li.is-current { background: var(--ps-blue-pale); border-color: var(--ps-blue); color: var(--ps-blue); }

/* surtitres en capitales espacées restés dans les feuilles des pages : casse normale, gris */
.sx-pnav-t, .sx-ent-pre, .pi-school-kicker, .gd-card-aud, .sx-bento-k, .sx-vs-head { letter-spacing: 0 !important; text-transform: none !important; }
.sx-pnav-t, .pi-school-kicker, .gd-card-aud { color: var(--ps-muted) !important; font-weight: 500 !important; font-size: var(--sx-fs-14) !important; }
.sx-bento-k { color: var(--ps-blue) !important; }

/* ---------- sections ---------- */
.sx-sec-white { background: var(--sx-white); }
/* les anciennes sections marine deviennent des sections teintées, texte foncé */
.sx-sec-navy { background: var(--ps-tint); color: var(--ps-text);
    --sx-text: var(--ps-text); --sx-text-mid: var(--ps-text); --sx-muted: var(--ps-muted); --sx-sage-ink: var(--ps-muted); }
.sx-sec-navy h2, .sx-sec-navy h3 { color: var(--ps-title); }
.sx-sec-navy .sx-lead, .sx-sec-navy p { color: var(--ps-text); }
.sx-sec-navy strong { color: var(--ps-title); }
.sx-sec-navy a, .sx .sx-sec-navy a:not(.sx-btn):hover { color: var(--ps-blue); }
.sx-sec-navy .sx-icon { color: var(--ps-blue); }
.sx-sec-navy .sx-feats > li { border-color: var(--ps-border); }
.sx-sec-navy .sx-feats > li > .sx-i, .sx-sec-navy .sx-check li > .sx-i { color: var(--ps-blue); }
.sx-sec-navy .sx-feats h3 { color: var(--ps-title); }
.sx-sec-navy .sx-check { color: var(--ps-text); }
.sx-sec-navy figcaption { color: var(--ps-muted); }
:is(.sx-sec-navy, .sx-band, .sx-hv, .sx-hero-panel, .sx-kpi) :focus-visible { outline-color: #0a76f6; box-shadow: none; }
.sx-head h2, .sx-cta-wrap h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); font-weight: 700; }

/* bande de chiffres : blanche, chiffres bleus, séparateurs fins */
.sx-band { background: var(--sx-white); color: var(--ps-text); border-bottom: 1px solid var(--ps-border);
    --sx-text: var(--ps-text); --sx-text-mid: var(--ps-text); --sx-muted: var(--ps-muted); }
.sx-band .sx-stat { background: var(--sx-white); border: 0; border-left: 1px solid var(--ps-border); }
.sx-band .sx-stat:first-child { border-left: 0; }
.sx-band .sx-stat-num { color: var(--ps-blue); font-family: var(--sx-sans); }
.sx-band .sx-stat-label { color: var(--ps-text); letter-spacing: 0; text-transform: none; font-size: var(--sx-fs-14); }
.sx-band .sx-stats-note { color: var(--ps-muted); }

/* ---------- cartes : filet gris, titre bleu, sans ombre ni soulèvement ---------- */
.sx-card, .sx-box, .sx-plan, .sx-feats-card, .sx-school, .sx-mini-plan, .sx-cta-wrap { border: 1px solid var(--ps-border); box-shadow: none; }
.sx-card { padding: 2rem; transition: background-color .15s; }
.sx-card.is-link:hover, .sx-card.is-link:focus-within { transform: none; box-shadow: none; border-color: var(--ps-border); background: var(--ps-grey-50); }
.sx-card.is-link:active { transform: none; }
.sx-card h3 { font-size: var(--sx-fs-20); line-height: 1.4; color: var(--ps-blue); }
.sx-card p { font-size: var(--sx-fs-14); line-height: 1.7; color: var(--ps-text); }
/* carte-lien : la flèche en bas à droite, comme les cartes du modèle */
.sx-card .sx-link { align-self: flex-end; text-decoration: none; padding-top: 1.4rem; }
/* pictogramme seul, sans cercle pointillé */
.sx-icon { width: auto; height: auto; flex-basis: auto; border: 0; border-radius: 0; justify-content: flex-start; font-size: 2.2rem; color: var(--ps-blue); margin-bottom: 1rem; }
.sx-card.is-center .sx-icon { justify-content: center; }
.sx-card:hover .sx-icon { background: none; }
.sx-icon-sm { font-size: 1.6rem; }
/* tuiles des anciennes sections sombres : blanches, filet bleu en bas (cartes de contact du modèle) */
.sx-feats-card { background: var(--sx-white); box-shadow: inset 0 -4px 0 var(--ps-blue); text-align: left; }
.sx-feats-card:hover { background: var(--sx-white); border-color: var(--ps-border); }
.sx-feats-card .sx-icon { margin-left: 0; }
.sx-cta-wrap::before { height: 4px; background: var(--ps-blue); }
.sx-plan.is-featured { border: 2px solid var(--ps-blue); box-shadow: none; }
.sx-plan-badge { background: var(--ps-blue); letter-spacing: 0; text-transform: none; font-weight: 700; font-size: var(--sx-fs-14); }
.sx-plan-cap { color: var(--ps-blue); }
.sx-sec-white .sx-note, .sx-sec-white .sx-faq details, .sx-sec-white .sx-acc { background: var(--ps-tint); }

/* ---------- champs : fond gris, filet inférieur bleu ---------- */
.sx-input, .sx-auth-input input, .sx-auth-input select { background-color: var(--ps-grey-bg); border: 0; border-radius: 4px 4px 0 0; box-shadow: inset 0 -2px 0 var(--ps-title); color: var(--ps-title); }
.sx-input:hover { border: 0; background-color: var(--ps-grey-bg-hover); }
.sx-input:focus { outline: 2px solid #0a76f6; outline-offset: 2px; box-shadow: inset 0 -2px 0 var(--ps-title); }
.sx-input[aria-invalid="true"] { border: 0; box-shadow: inset 0 -2px 0 var(--sx-bad-ink); }
.sx-tile { border-color: var(--ps-border); }
.sx-tile:hover { border-color: var(--ps-blue); }
.sx-tile input { accent-color: var(--ps-blue); }
.sx-tile:has(input:checked) { border: 2px solid var(--ps-blue); background: var(--ps-blue-pale); }

/* ---------- pied de page : blanc, filet bleu en haut ---------- */
.sx-footer { background: var(--sx-white); color: var(--ps-text); border-top: 2px solid var(--ps-blue); font-size: var(--sx-fs-14);
    --sx-text: var(--ps-text); --sx-text-mid: var(--ps-text); --sx-muted: var(--ps-muted); --sx-sage-ink: var(--ps-muted); }
.sx-footer a { color: var(--ps-text); }
.sx-footer a:hover { color: var(--ps-blue); }
.sx-footer :focus-visible { outline-color: #0a76f6; }
.sx-footer h2 { color: var(--ps-title); font-size: var(--sx-fs-14); font-weight: 700; letter-spacing: 0; text-transform: none; }
.sx-footer-bottom { border-top: 1px solid var(--ps-border); font-size: var(--sx-fs-12); color: var(--ps-muted); }

/* ---------- derniers éléments sombres ou sauge ---------- */
/* fonds sauge pâle (encadrés, sélection, illustrations) : bleu pâle */
:root { --sx-sage-pale: var(--ps-blue-pale); }

/* Espace numérique : « Choisissez votre espace » (ent.css) : cartes blanches à filet bleu, la carte ouverte teintée */
.sx-ent-band { --acc: var(--ps-blue); color: var(--ps-text); background: var(--sx-white); border-radius: 0;
    box-shadow: inset 0 0 0 1px var(--ps-border), inset 0 4px 0 var(--ps-blue);
    --sx-text: var(--ps-text); --sx-text-mid: var(--ps-text); --sx-muted: var(--ps-muted); }
.sx-ent-band.is-k-enseignant, .sx-ent-band.is-k-parent, .sx-ent-band.is-k-eleve { --acc: var(--ps-blue); }
.sx-ent-band.is-open { background: var(--ps-tint); }
.sx-ent-band::before { display: none; }
.sx-ent-band :focus-visible { outline-color: #0a76f6; }
.sx-ent-band:focus-within { box-shadow: inset 0 0 0 1px var(--ps-border), inset 0 4px 0 var(--ps-blue), 0 0 0 2px #0a76f6; }
.sx .sx-ent-tab { color: var(--ps-title); }
.sx-ent-ico { border: 0; border-radius: 0; background: var(--ps-blue-pale); color: var(--ps-blue); }
.sx-ent.is-js .is-open .sx-ent-ico { background: var(--ps-blue-pale); transform: none; }
.sx-ent-name { font-family: var(--sx-sans); font-weight: 700; color: var(--ps-title); }
.sx-ent-pre { color: var(--ps-muted); font-weight: 500 !important; }
.sx-ent-who { color: var(--ps-text); }
.sx-ent-plus { border-radius: 0; border-color: var(--ps-blue); color: var(--ps-blue); background: var(--sx-white); }
/* le carré ne tourne pas : seule la croix pivote (masqué sur ordinateur une fois ouvert, comme avant) */
.sx-ent.is-js .is-open .sx-ent-plus { transform: none; background: var(--ps-blue-pale); }
.sx-ent-plus .sx-i { transition: transform .35s; }
.sx-ent.is-js .is-open .sx-ent-plus .sx-i { transform: rotate(45deg); }
@media (min-width: 992px) { .sx-ent.is-js .is-open .sx-ent-plus { opacity: 0; } }
.sx-ent-list { color: var(--ps-text); }
.sx-ent-list .sx-i { border-radius: 0; background: var(--ps-blue-pale); color: var(--ps-blue); }
.sx .sx-ent-go { background: var(--ps-blue); color: var(--sx-white); box-shadow: none; border: 0; }
.sx .sx-ent-go:hover { background: var(--ps-blue-hover); }
.sx-ent-num { font-family: var(--sx-sans) !important; color: rgba(11, 79, 156, .08) !important; }
.sx-ent-veil { background: var(--sx-white); }
@media (min-width: 992px) { .sx-ent.is-js .sx-ent-band:not(.is-open):hover { transform: none; background: var(--ps-grey-50); } }
.sx-ent-help-in li { border-left-color: var(--ps-blue); }
.sx-ent-foot .sx-i { color: var(--ps-blue); }

/* Pourquoi Scolarix : carte mise en avant des « choix » (formats.css) : encadré teinté à filet gauche bleu */
.sx-bento-big { background: var(--ps-tint); color: var(--ps-text); border-radius: 0; box-shadow: inset 4px 0 0 var(--ps-blue);
    --sx-text: var(--ps-text); --sx-text-mid: var(--ps-text); --sx-muted: var(--ps-muted); }
.sx-bento-big::after { display: none; }
.sx-bento-big .sx-tile2-ico { background: var(--ps-blue-pale); color: var(--ps-blue); border-radius: 0; }
.sx .sx-bento-big :is(h3, h4) { color: var(--ps-title); }
.sx-bento-big p { color: var(--ps-text); }
.sx-bento-big a:not(.sx-btn) { color: var(--ps-blue); }
.sx-bento-big :focus-visible { outline-color: #0a76f6; }

/* formulaire de démo : numéros d'étape pleins, carrés */
.sx-num { border: 0; border-radius: 0; background: var(--ps-blue); color: var(--sx-white); font-family: var(--sx-sans); font-weight: 700; flex-basis: 40px; width: 40px; height: 40px; }

/* « Ce que ça change pour vous » et cartes « pourquoi » : teinte bleue, éléments blancs à filet gris */
.sx-change { background: var(--ps-tint); border: 0; border-radius: 0; }
.sx .sx-change-it { height: 100%; padding: 1rem 1.1rem; background: var(--sx-white); border: 1px solid var(--ps-border); border-radius: 0; }
.sx-change-it > .sx-i { color: var(--ps-blue); }
.sx-change-it strong { color: var(--ps-title); }
.sx-why { background: var(--sx-white); border-color: var(--ps-border); }
.sx-why:hover { background: var(--ps-grey-50); }

/* numéros et pastilles restés en or ou en sauge */
.sx-steps > li::before { font-family: var(--sx-sans); color: var(--ps-blue); }
.sx-num-badge { font-family: var(--sx-sans); color: var(--ps-blue); letter-spacing: 0; text-transform: none; }
.sx-fx-rows .is-ours dd { color: var(--ps-blue); }
.sx-fx-rows > li { background: var(--ps-tint); }

/* ---------- démonstration : 4 comptes de test en grille 2 × 2 (external/connexion.php) ---------- */
.sx-auth-demo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx-auth-demo-list button:hover { border-color: var(--ps-blue); color: var(--ps-blue); }

/* ---------- contact WhatsApp et barre mobile : angles droits ---------- */
.sx-wa { border-radius: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
.sx-mbar { box-shadow: 0 -1px 0 var(--ps-border); }