/*
 * Pré-inscription en ligne (formulaire, merci, suivi, introuvable) : compléments propres au parcours.
 * Gabarit : App/Views/preinscription/_layout.php, qui étend le site public (vitrine/_layout.php).
 * Tout le reste (boutons, champs, étapes, progression, récapitulatif, messages, confirmation,
 * contact) vient de public/css/site.css (jetons --sx-*, composants sx-*). Pas de mode sombre,
 * comme le reste du site public. Mobile d'abord (360 px), une colonne sous 576 px.
 */

/* ---------- structure ---------- */
.pi-wrap { max-width: 820px; }
.pi-sec { padding-top: 1.6rem; }
@media (min-width: 992px) { .pi-sec { padding-top: 2.4rem; padding-bottom: 4rem; } }
.pi-center { text-align: center; }
.pi-center .sx-icon { margin: 0 auto 1rem; }
.pi-gap { margin-top: 1.2rem; }
.pi-mb0 { margin: 0; }
.pi-pre { white-space: pre-line; }
.pi-mono { letter-spacing: .06em; text-transform: uppercase; }
.pi-mono::placeholder { text-transform: none; letter-spacing: 0; }
.pi-hero .sx-phero-in { padding-bottom: 1.8rem; }
.pi-hero .sx-lead { margin-bottom: .6rem; }
/* coupure fixe du titre : le nombre de lignes ne dépend plus de la police chargée (aucun décalage, CLS) */
.pi-hero h1 em { display: block; }
.pi-public .sx-msg ul { margin-bottom: .2rem; }
.pi-public .sx-msg p + p { margin-top: .35rem; }
.pi-intro { margin: 0 0 1rem; }
.pi-public .sx-step > .sx-note { margin: 0 0 1rem; }
.pi-public .sx-box + .sx-step, .pi-public .sx-step + .sx-contact, .pi-public .sx-box + .sx-contact, .pi-public .sx-msg + .sx-step { margin-top: 1rem; }
.pi-public .sx-box > h1 { font-size: var(--sx-fs-t32); margin: 0 0 .5rem; }
.pi-public .sx-box > p { color: var(--sx-text-mid); }
.pi-public .sx-contact ul a { color: var(--sx-blue-ink); }

/* ---------- bandeau de l'établissement ---------- */
.pi-schoolbar { background: var(--sx-white); border-bottom: 1px solid var(--sx-line); }
.pi-schoolbar-in { display: flex; align-items: center; gap: .9rem; padding-top: .8rem; padding-bottom: .8rem; }
.pi-schoolbar .sx-school-logo { flex-basis: 48px; width: 48px; height: 48px; font-size: var(--sx-fs-16); }
.pi-school { min-width: 0; }
.pi-school p { margin: 0; }
.pi-school-kicker { font-size: var(--sx-fs-12); letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--sx-sage-ink); }
.pi-school-name { font-family: var(--sx-serif); font-weight: 800; font-size: var(--sx-fs-18); color: var(--sx-navy); line-height: 1.25; overflow-wrap: anywhere; }
.pi-school-meta { display: flex; flex-wrap: wrap; gap: 0 14px; font-size: var(--sx-fs-14); color: var(--sx-text-mid); }
.pi-school-meta span, .pi-school-meta a { display: inline-flex; align-items: center; gap: 5px; overflow-wrap: anywhere; }
.pi-school-meta a { min-height: 44px; font-weight: 700; }
.pi-school-meta .sx-i { color: var(--sx-sage-ink); }

/* ---------- « Avant de commencer » (replié : résumé d'une ligne ; détails au clic, sans JavaScript) ---------- */
.pi-before { margin: 0 0 1rem; background: var(--sx-white); border: 1px solid var(--sx-line); border-radius: var(--sx-r-sm); box-shadow: var(--sx-shadow-sm); }
.pi-before > summary { list-style: none; display: flex; align-items: center; gap: .7rem; min-height: 56px; padding: .6rem .9rem; cursor: pointer; border-radius: var(--sx-r-sm); }
.pi-before > summary::-webkit-details-marker { display: none; }
.pi-before > summary:focus-visible { outline: 3px solid var(--sx-action); outline-offset: 2px; }
.pi-before-ico { flex: 0 0 auto; display: inline-flex; color: var(--sx-sage-ink); font-size: 1.15rem; }
.pi-before-t { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.pi-before-t strong { color: var(--sx-navy); font-size: var(--sx-fs-16); }
.pi-before-t span { color: var(--sx-text-mid); font-size: var(--sx-fs-14); line-height: 1.4; }
.pi-before > summary:hover .pi-before-t strong { text-decoration: underline; }
.pi-before-chev { flex: 0 0 auto; color: var(--sx-navy); transition: transform .2s; }
.pi-before[open] .pi-before-chev { transform: rotate(180deg); }
.pi-before[open] > summary { border-bottom: 1px solid var(--sx-line); border-radius: var(--sx-r-sm) var(--sx-r-sm) 0 0; }
.pi-before-in { padding: .9rem .9rem 1rem; }
.pi-before-lead { margin: 0 0 .9rem; color: var(--sx-text-mid); }
.pi-before .pi-intro { margin: .9rem 0 0; }
.pi-facts { margin: 0; }
@media (min-width: 576px) { .pi-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pi-before-in { padding: 1.1rem 1.2rem 1.2rem; } }

/* ---------- héros compact sur téléphone : la première question reste au-dessus de la ligne de flottaison ---------- */
@media (max-width: 575.98px) {
    .pi-crumb .pi-crumb-far { display: none; }
    .pi-crumb li:first-child + li::before { display: none; }
    .pi-hero .sx-crumb { margin-bottom: .5rem; }
    .pi-hero .sx-phero-in { padding-top: .9rem; padding-bottom: .6rem; }
    .pi-hero .sx-eyebrow { margin-bottom: .3rem; }
    .pi-hero h1 { font-size: var(--sx-fs-t32); margin-bottom: 0; }
    .pi-sec { padding-top: 1rem; }
    .pi-schoolbar-in { padding-top: .5rem; padding-bottom: .4rem; gap: .7rem; }
    .pi-schoolbar .sx-school-logo { flex-basis: 40px; width: 40px; height: 40px; font-size: var(--sx-fs-14); }
    .pi-school-kicker { display: none; }
    .pi-school-name { font-size: var(--sx-fs-16); }
    .pi-progress .pi-steps { display: none; }
    .pi-hero .pi-hero-eyebrow, .pi-hide-sm { display: none; }
    .pi-school-meta { gap: 0 10px; }
    /* téléphone sur la ligne de l'adresse : la cible tactile garde 44 px grâce à une zone étendue invisible */
    .pi-school-meta a { position: relative; min-height: 0; }
    .pi-school-meta a::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
    .pi-progress { margin-bottom: .8rem; }
    .pi-public .pi-step { padding-top: 1rem; }
    /* le numéro d'étape est déjà dans la barre de progression : on rend sa largeur au titre */
    .pi-public .pi-step .sx-step-head > .sx-num { display: none; }
    .pi-public .pi-step .sx-step-head h2 { margin-top: 0; }
}
.pi-crumb-session { margin-left: .3em; }
@media (min-width: 576px) {
    .pi-crumb-session { display: none; }
    .pi-public .pi-step .sx-step-head { margin-bottom: .9rem; }
}

/* ---------- champs : une colonne sous 576 px, deux au-delà ---------- */
.pi-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) { .pi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pi-full { grid-column: 1 / -1; } }
.pi-field { min-width: 0; }
.pi-note-field { margin-bottom: 1rem; }
.pi-public .sx-input.is-invalid { border: 2px solid var(--sx-bad-ink); }
.pi-public .sx-group:has(.is-invalid) .sx-prefix { border-color: var(--sx-bad-ink); }
.pi-public .sx-err[hidden] { display: none; }
/* Sous l'en-tête fixe et la barre de progression : un champ ou une étape ciblés restent visibles. */
.pi-public .sx-input, .pi-public .pi-drop, .pi-public .pi-step { scroll-margin-top: calc(var(--sx-header) + 150px); }

/* ---------- progression sticky (sous l'en-tête fixe, voir .sx-progress) ---------- */
.pi-progress { margin-bottom: 1.2rem; top: calc(var(--sx-header) + 8px); }
/* place réservée dès le premier rendu (aucun décalage) ; visible quand le script de la page est prêt */
.pi-progress:not(.is-ready) { visibility: hidden; }
.pi-steps { list-style: none; display: flex; gap: 6px; margin: 10px 0 0; padding: 0; }
.pi-steps li { flex: 1 1 0; min-width: 0; }
.pi-steps a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 4px; border: 1px solid var(--sx-line-strong); border-radius: var(--sx-r-sm); color: var(--sx-text-mid); font-size: var(--sx-fs-14); font-weight: 700; text-decoration: none; background: var(--sx-white); }
.pi-steps a:hover { border-color: var(--sx-navy); color: var(--sx-navy); }
.pi-steps a b { display: inline-flex; width: 24px; height: 24px; flex: 0 0 auto; align-items: center; justify-content: center; border: 1.5px dashed currentColor; border-radius: 50%; font-family: var(--sx-serif); font-size: var(--sx-fs-14); }
.pi-steps a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-steps a.is-done { color: var(--sx-ok-ink); border-color: var(--sx-sage); background: var(--sx-ok-bg); }
.pi-steps a.is-done b { border-style: solid; }
.pi-steps a.is-current { color: var(--sx-navy); border: 2px solid var(--sx-navy); }
@media (max-width: 479.98px) { .pi-steps a span { display: none; } }
.pi-step { scroll-margin-top: calc(var(--sx-header) + 150px); }

/* ---------- enfants (demande familiale) ---------- */
.pi-child { border: 1px solid rgba(45, 74, 107, .14); border-left: 4px solid var(--sx-sage); border-radius: var(--sx-r-sm); background: var(--sx-cream); padding: 1rem 1rem 1.1rem; margin: 0 0 1rem; min-width: 0; }
@media (min-width: 576px) { .pi-child { padding: 1.2rem 1.3rem 1.3rem; } }
.pi-child-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: .9rem; }
.pi-child-head h3 { font-size: var(--sx-fs-18); margin: 0; overflow-wrap: anywhere; }
.pi-child-name { font-family: var(--sx-sans); font-size: var(--sx-fs-16); font-weight: 600; color: var(--sx-text-mid); }
.pi-child-remove { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--sx-line-strong); background: var(--sx-white); color: var(--sx-bad-ink); font-weight: 700; font-size: var(--sx-fs-14); cursor: pointer;  border-radius: var(--sx-r-sm); }
.pi-child-remove:hover { border-color: var(--sx-bad-ink); background: var(--sx-bad-bg); }
.pi-child .sx-input { background-color: var(--sx-white); }
.pi-add { display: grid; gap: 8px; justify-items: start; }
@media (min-width: 576px) { .pi-add { display: flex; align-items: center; gap: 14px; } }
.pi-add .sx-btn { width: 100%; }
@media (min-width: 576px) { .pi-add .sx-btn { width: auto; } }
.pi-add .sx-help { margin: 0; }

/* ---------- dépôt de fichiers (sans JS : champ fichier natif) ---------- */
.pi-drop { position: relative; }
.pi-file-input { display: block; width: 100%; min-height: 48px; padding: .6rem; font-size: var(--sx-fs-16); border: 1px dashed var(--sx-line-strong); background: var(--sx-white);  border-radius: var(--sx-r-sm); }
.pi-drop-zone, .pi-file { display: none; }
.pi-enhanced .pi-drop-zone { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 14px; border: 2px dashed var(--sx-sage-light); border-radius: var(--sx-r-sm); background: var(--sx-white); color: var(--sx-text-mid); transition: border-color .2s, background-color .2s; }
.pi-enhanced .pi-drop .pi-file-input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; opacity: 0; cursor: pointer; z-index: 2; }
.pi-enhanced .pi-drop.has-file .pi-file-input { pointer-events: none; z-index: -1; }
.pi-drop-ico { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; border: 2px dashed var(--sx-sage-light); display: flex; align-items: center; justify-content: center; color: var(--sx-navy); font-size: 1.25rem; }
.pi-drop-zone strong { display: block; color: var(--sx-navy); font-size: var(--sx-fs-16); }
.pi-drop-zone small { display: block; color: var(--sx-muted); font-size: var(--sx-fs-14); }
.pi-drop:hover .pi-drop-zone, .pi-drop.is-over .pi-drop-zone { border-color: var(--sx-sage); background: var(--sx-sage-pale); }
.pi-drop:focus-within .pi-drop-zone { border-color: var(--sx-blue); box-shadow: var(--sx-focus); }
.pi-drop.is-invalid .pi-drop-zone, .pi-drop.is-invalid .pi-file-input { border-color: var(--sx-bad-ink); }
.pi-drop.has-file .pi-drop-zone { display: none; }
.pi-drop.has-file .pi-file { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--sx-line-strong); border-radius: var(--sx-r-sm); background: var(--sx-white); min-width: 0; }
.pi-drop.is-invalid .pi-file { border: 2px solid var(--sx-bad-ink); }
.pi-thumb { flex: 0 0 48px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: var(--sx-r-sm); background: var(--sx-sage-pale); color: var(--sx-navy); font-size: 1.5rem; overflow: hidden; }
.pi-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pi-file-main { flex: 1 1 auto; min-width: 0; }
.pi-file-name { font-weight: 700; color: var(--sx-navy); font-size: var(--sx-fs-16); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-file-size { font-size: var(--sx-fs-14); color: var(--sx-muted); }
.pi-file button { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--sx-line-strong); background: var(--sx-white); color: var(--sx-navy); font-weight: 700; font-size: var(--sx-fs-14); cursor: pointer;  border-radius: var(--sx-r-sm); }
.pi-file button:hover { border-color: var(--sx-navy); background: var(--sx-cream); }
.pi-file .pi-js-remove { color: var(--sx-bad-ink); }
@media (max-width: 359.98px) { .pi-thumb { display: none; } }

/* ---------- récapitulatif (complète .sx-recap) ---------- */
.pi-recap .pi-recap-row { display: block; }
.pi-recap dd { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pi-recap-val { min-width: 0; color: var(--sx-navy); font-weight: 700; overflow-wrap: anywhere; }
.pi-recap-val.is-empty { color: var(--sx-bad-ink); }
.pi-recap-val.is-none { color: var(--sx-muted); font-weight: 500; }
.pi-recap dd a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; font-size: var(--sx-fs-14); font-weight: 700; }
@media (min-width: 576px) { .pi-recap .pi-recap-row { display: grid; } }
.pi-submit { margin-top: .4rem; }
@media (min-width: 576px) { .pi-submit { justify-content: flex-end; } }

/* ---------- confirmation ---------- */
.pi-done-actions { margin-top: 1rem; }
.pi-kids-done { text-align: left; margin-top: 1rem; }

/* ---------- suivi ---------- */
.pi-dossier .sx-eyebrow { margin-bottom: .3rem; }
.pi-dossier-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 12px; margin-bottom: 1.1rem; }
.pi-dossier-head h1 { font-size: var(--sx-fs-t32); margin: 0; overflow-wrap: anywhere; }
.pi-dossier-head p { margin: .2rem 0 0; font-size: var(--sx-fs-16); color: var(--sx-text-mid); }
.pi-status { display: inline-flex; align-items: center; gap: 6px; padding: .25rem .75rem; border-radius: var(--sx-r-pill); font-size: var(--sx-fs-14); font-weight: 700; white-space: nowrap; }
.pi-st-info { background: var(--sx-action-pale); color: var(--sx-navy); }
.pi-st-warn { background: var(--sx-warn-bg); color: var(--sx-warn-ink); }
.pi-st-ok { background: var(--sx-ok-bg); color: var(--sx-ok-ink); }
.pi-st-bad { background: var(--sx-bad-bg); color: var(--sx-bad-ink); }
.pi-st-neutral { background: var(--sx-chip-off-bg); color: var(--sx-chip-off-ink); }
.pi-track { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.pi-track li { position: relative; display: flex; gap: 12px; padding-bottom: 16px; font-size: var(--sx-fs-16); color: var(--sx-muted); }
.pi-track li:last-child { padding-bottom: 0; }
.pi-track li::after { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--sx-line); }
.pi-track li:last-child::after { display: none; }
.pi-track i { flex: 0 0 32px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--sx-sage-light); border-radius: 50%; background: var(--sx-white); font-style: normal; font-weight: 800; font-family: var(--sx-serif); font-size: var(--sx-fs-14); color: var(--sx-navy); position: relative; z-index: 1; }
.pi-track .is-done { color: var(--sx-text); }
.pi-track .is-done i { background: var(--sx-sage-ink); border: 2px solid var(--sx-sage-ink); color: var(--sx-white); }
.pi-track .is-done::after { background: var(--sx-sage); }
.pi-track .is-current { color: var(--sx-navy); font-weight: 700; }
.pi-track .is-current i { border: 2px solid var(--sx-navy); }
.pi-track .is-stop i { border: 2px solid var(--sx-bad-ink); background: var(--sx-bad-ink); color: var(--sx-white); }
.pi-track span { padding-top: 5px; }
.pi-sum { margin-top: .4rem; }
.pi-kids { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.pi-kid { border: 1px solid rgba(45, 74, 107, .12); border-radius: var(--sx-r-sm); background: var(--sx-cream); padding: .9rem 1rem; }
.pi-kid-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 10px; flex-wrap: wrap; }
.pi-kid-top h2 { font-size: var(--sx-fs-18); margin: 0; }
.pi-kid-sub { font-size: var(--sx-fs-14); color: var(--sx-text-mid); margin: .15rem 0 0; }
.pi-kid .sx-msg { margin: .7rem 0 0; }
.pi-kid-docs { margin-top: .6rem; }

/* ---------- mention de confidentialité ---------- */
.pi-privacy { display: flex; gap: 8px; align-items: flex-start; justify-content: center; font-size: var(--sx-fs-14); color: var(--sx-muted); text-align: center; margin: 1.8rem 0 0; }
.pi-privacy .sx-i { color: var(--sx-sage-ink); margin-top: .25em; }

/* ---------- impression (confirmation : numéro de dossier) ---------- */
@media print {
    .pi-noprint, .pi-schoolbar a, .pi-privacy { display: none !important; }
    .sx-done, .sx-ref, .sx-box { box-shadow: none; border-color: #000; background: #fff; }
}