/* landing/package-rentree.css — outil gratuit « Package de rentrée »
 *
 * Assistant pas-à-pas en 5 étapes, intégré à la vraie navbar/pied de page du
 * site (landing/home.css, chargé par package-rentree.html juste avant cette
 * feuille — .nav/.nav-*, .footer/.footer-*). Ici ne vivent QUE les classes
 * propres au wizard, préfixées `pkg-`, sur les jetons de
 * landing/design-tokens.css (--v, --vd, --vl, --v-soft, --navy, --g, --g2,
 * --g3, --bg, --card, --brd, --rad*, --sh*, --fd) — jamais redéfinis ici.
 */

:root {
  --pkg-bg: #f7f5fd;
  --pkg-danger: #b42318; /* même rouge que --danger de l'app (base.css), landing/ n'a pas ce jeton */
  --pkg-danger-soft: #fef3f2;
  --pkg-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(123, 91, 240, .06);
}

body { background: var(--pkg-bg); }

.pkg-ctn { max-width: 720px; margin: 0 auto; padding: 0 20px; }

/* ===== CHÂSSIS DU WIZARD ===== */
.pkg-wizard { padding-top: 68px; min-height: calc(100vh - 68px); display: flex; flex-direction: column; }
/* Base : étapes sans barre d'actions collée (1, 6) ou dont le script n'a
 * pas encore tourné. Sur les étapes qui portent la barre, le script
 * remplace ce padding-bottom par la hauteur RÉELLE de #pkgControls (voir
 * reserveControlsSpace()) — jamais une valeur devinée. */
.pkg-body { flex: 1; padding: 18px 20px 32px; }

/* ===== FIL DES ÉTAPES ===== */
.pkg-steps-wrap {
  position: sticky; top: 68px; z-index: 40;
  background: rgba(247, 245, 253, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--brd);
  padding: 10px 0 8px;
}
.pkg-steps { display: flex; align-items: flex-start; gap: 0; list-style: none; margin: 0; padding: 0; }
.pkg-step { display: flex; align-items: center; flex: 1; }
.pkg-step:last-child { flex: 0 0 auto; }
.pkg-step-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: 0; padding: 2px; color: var(--g3); font: inherit;
  cursor: pointer;
}
.pkg-step-btn:disabled { cursor: default; }
.pkg-step-num {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 700; color: var(--g3);
  background: var(--card); border: 1.5px solid var(--brd);
  transition: background .2s, border-color .2s, color .2s;
}
.pkg-step-label { font-size: .68rem; font-weight: 600; color: var(--g3); white-space: nowrap; transition: color .2s; }
.pkg-step.is-done .pkg-step-num { background: var(--v); border-color: var(--v); color: #fff; }
.pkg-step.is-done .pkg-step-label { color: var(--g); }
.pkg-step.is-current .pkg-step-num { border-color: var(--v); color: var(--v); background: var(--v-soft); }
.pkg-step.is-current .pkg-step-label { color: var(--v); }
.pkg-step:not(:last-child)::after {
  content: ""; flex: 1; height: 1.5px; background: var(--brd); margin: 0 6px; align-self: center;
  transform: translateY(-11px);
}
.pkg-step.is-done:not(:last-child)::after { background: var(--v); }

.pkg-step-caption { display: none; text-align: center; font-size: .78rem; font-weight: 600; color: var(--v); margin: 10px 0 0; }

@media (max-width: 640px) {
  .pkg-step-label { display: none; }
  .pkg-step-caption { display: block; }
}

/* ===== MESSAGE DE PORTE (bloque « Suivant » / « Générer ») ===== */
.pkg-flash {
  margin: 0 0 20px; padding: 11px 14px; border-radius: var(--rad-sm); font-size: .84rem; font-weight: 600;
  background: var(--pkg-danger-soft); border: 1px solid rgba(180, 35, 24, .2); color: var(--pkg-danger);
}
.pkg-flash[hidden] { display: none; }

/* ===== ÉCRANS D'ÉTAPE ===== */
.pkg-screen h1 { font-family: var(--fd); font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; color: var(--g); }
.pkg-screen h2 { font-family: var(--fd); font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; color: var(--g); margin-bottom: 6px; }
.pkg-screen h2:focus-visible, .pkg-screen h1:focus-visible { outline: none; }
.pkg-hint { font-size: .84rem; color: var(--g2); margin: 0 0 20px; line-height: 1.6; max-width: 56ch; }
.pkg-hint em { font-style: normal; font-weight: 600; color: var(--g); }

/* ===== ÉTAPE 1 — PRÉSENTATION ===== */
.pkg-screen--intro { text-align: center; padding: 40px 0 12px; max-width: 560px; margin: 0 auto; }
.pkg-eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 700; color: var(--v); background: var(--v-soft);
  padding: 4px 11px; border-radius: 100px; letter-spacing: .03em; margin-bottom: 16px;
}
.pkg-intro-lede { font-size: 1.02rem; color: var(--g2); line-height: 1.65; margin: 16px 0 26px; }
.pkg-intro-points { list-style: none; margin: 0 0 34px; padding: 0; display: flex; flex-direction: column; gap: 11px; text-align: left; max-width: 380px; margin-left: auto; margin-right: auto; }
.pkg-intro-points li { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--g); font-weight: 500; }
.pkg-intro-points svg { width: 20px; height: 20px; flex-shrink: 0; color: #fff; background: var(--v); border-radius: 50%; padding: 3px; }
.pkg-btn--lg { padding: 13px 26px; font-size: .95rem; }
.pkg-btn--lg svg { width: 17px; height: 17px; }
.pkg-onde-v2-notice {
  display: flex; align-items: flex-start; gap: 9px; max-width: 500px; margin: 16px auto 0;
  padding: 11px 14px; border: 1px solid #e2ad72; border-radius: 18px;
  background: #fff1df; color: #70411d; text-align: left; font-size: .8rem; line-height: 1.45;
}
.pkg-onde-v2-notice svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; color: #a45b22; }
.pkg-onde-v2-notice p { margin: 0; }
.pkg-onde-v2-notice a { color: inherit; font-weight: 800; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.pkg-onde-v2-notice a:focus-visible { outline: 2px solid #70411d; outline-offset: 2px; border-radius: 2px; }

/* ===== CARTES / CHAMPS (partagés entre les étapes 2 à 5) ===== */
.pkg-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; }
.pkg-field { display: flex; flex-direction: column; gap: 5px; }
/* .pkg-field pose `display: flex` (origine auteur) : ça l'emporte sur le
 * `display: none` du navigateur pour [hidden] (origine agent utilisateur),
 * quelle que soit la spécificité — sans cette règle, un .pkg-field masqué
 * par l'attribut `hidden` (ex. #pkgZoneFieldWrap) reste visible. */
.pkg-field[hidden] { display: none; }
.pkg-field--narrow { max-width: 160px; }
.pkg-field--wide { grid-column: 1 / -1; margin-top: 16px; }
.pkg-school-details[hidden] { display: none; }
.pkg-school-year { margin-top: 16px; }
.pkg-label { font-size: .74rem; font-weight: 600; color: var(--g2); }
.pkg-hint-inline { display: block; font-size: .68rem; font-weight: 400; color: var(--g3); margin-top: 1px; }
.pkg-field input[type="text"],
.pkg-field input[type="email"],
.pkg-field select,
.pkg-field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--brd); border-radius: var(--rad-sm);
  font: inherit; font-size: .88rem; color: var(--g); background: var(--card);
  outline: none; transition: border-color .15s;
}
.pkg-field input:focus, .pkg-field select:focus, .pkg-field textarea:focus { border-color: var(--v); }

/* ===== CASES (consentement, lettre d'information) ===== */
.pkg-checks { display: flex; flex-direction: column; gap: 10px; margin: 0 0 24px; }
.pkg-check { display: flex; align-items: flex-start; gap: 9px; font-size: .84rem; color: var(--g2); line-height: 1.5; cursor: pointer; }
.pkg-check input { margin-top: 3px; accent-color: var(--v); flex-shrink: 0; width: 16px; height: 16px; }
.pkg-check a { color: var(--v); font-weight: 600; text-decoration: underline; }
.pkg-check.pkg-missing, .pkg-field.pkg-missing { color: var(--pkg-danger); }
.pkg-check.pkg-missing { font-weight: 600; }
.pkg-check.pkg-missing input { outline: 2px solid var(--pkg-danger); outline-offset: 1px; border-radius: 3px; }
.pkg-field.pkg-missing .pkg-label { color: var(--pkg-danger); }
.pkg-field.pkg-missing input, .pkg-field.pkg-missing select { border-color: var(--pkg-danger); }
.pkg-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ===== ÉTAPE 3 — ÉCOLE RETROUVÉE ===== */
.pkg-school-status {
  margin-top: 10px; font-size: .82rem; line-height: 1.5; color: var(--g2);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.pkg-school-status[hidden] { display: none; } /* display:flex l'emporterait sinon sur [hidden], cf. .pkg-field[hidden] */
.pkg-school-status--found { color: var(--g); }
.pkg-school-status--loading { color: var(--g3); }
.pkg-link-btn {
  background: none; border: 0; padding: 0; font: inherit; font-size: .78rem; font-weight: 700;
  color: var(--v); text-decoration: underline; cursor: pointer;
}
.pkg-link-btn:hover { color: var(--vd); }
.pkg-school-card {
  background: var(--v-soft); border: 1px solid rgba(123, 91, 240, .18); border-radius: var(--rad-sm);
  padding: 12px 14px; width: 100%;
}
.pkg-school-card[hidden] { display: none; }
.pkg-school-card-name { font-family: var(--fd); font-weight: 700; font-size: .92rem; color: var(--g); }
.pkg-school-card-line { font-size: .8rem; color: var(--g2); margin-top: 2px; }
.pkg-school-card-uai {
  display: inline-block; margin-top: 7px; font-size: .68rem; font-weight: 700; color: var(--v);
  background: #fff; border: 1px solid rgba(123, 91, 240, .25); border-radius: 100px; padding: 2px 9px; letter-spacing: .02em;
}

/* ===== ÉTAPE 3 — ZONE DE VACANCES (lecture seule, correction discrète) ===== */
.pkg-zone-block { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--brd); }
.pkg-zone-readout { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; font-size: .84rem; }
.pkg-zone-readout-label { font-weight: 600; color: var(--g); }
.pkg-zone-readout-text { color: var(--g2); }
.pkg-zone-block .pkg-field { margin-top: 10px; }

/* ===== ÉTAPE 3 — JOURS DE CLASSE ===== */
.pkg-days { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 4px; }
.pkg-day { display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--g2); cursor: pointer; }
.pkg-day input { accent-color: var(--v); width: 15px; height: 15px; }

/* ===== ÉTAPE 2 — PIÈCES DU PACKAGE (générées depuis PACKAGE_WEB_PIECES) ===== */
.pkg-pieces { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; border-radius: var(--rad-sm); }
.pkg-missing-group { outline: 2px solid var(--pkg-danger); outline-offset: 4px; border-radius: var(--rad-sm); }
.pkg-piece {
  display: flex; align-items: flex-start; gap: 11px; padding: 12px 12px; border-radius: var(--rad-sm);
  cursor: pointer; transition: background .12s; border: 1px solid transparent;
}
.pkg-piece:hover { background: var(--card); border-color: var(--brd); }
.pkg-piece input { margin-top: 3px; accent-color: var(--v); flex-shrink: 0; width: 16px; height: 16px; }
.pkg-piece-text { display: flex; flex-direction: column; gap: 2px; }
.pkg-piece-label { font-size: .9rem; font-weight: 600; color: var(--g); }
.pkg-piece-hint { font-size: .78rem; color: var(--g2); line-height: 1.4; }
.pkg-piece--disabled { cursor: not-allowed; opacity: .55; }
.pkg-piece--disabled:hover { background: none; border-color: transparent; }
.pkg-piece--disabled .pkg-piece-label { color: var(--g3); }
.pkg-piece--disabled .pkg-piece-hint { font-style: italic; }

.pkg-conditional { margin-top: 12px; padding: 14px 12px 2px; border-top: 1px dashed var(--brd); }
.pkg-conditional[hidden] { display: none; }

.pkg-options { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--brd); }
.pkg-options-label { font-size: .72rem; font-weight: 700; color: var(--g3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.pkg-option { display: flex; align-items: flex-start; gap: 9px; font-size: .86rem; color: var(--g2); line-height: 1.5; cursor: pointer; }
.pkg-option input { margin-top: 3px; accent-color: var(--v); flex-shrink: 0; width: 16px; height: 16px; }
.pkg-option-hint { display: block; font-size: .74rem; color: var(--g3); }

/* ===== ÉTAPE 4 — CONFIDENTIALITÉ, MISE EN VALEUR ===== */
.pkg-privacy-banner {
  display: flex; align-items: flex-start; gap: 12px; margin: 0 0 20px; padding: 14px 16px;
  background: linear-gradient(135deg, rgba(123, 91, 240, .08), rgba(169, 139, 247, .04));
  border: 1px solid rgba(123, 91, 240, .22); border-radius: var(--rad);
}
.pkg-privacy-banner svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--v); margin-top: 1px; }
.pkg-privacy-banner div { font-size: .84rem; line-height: 1.55; color: var(--g); }
.pkg-privacy-banner strong { color: var(--navy); }

.pkg-onde-guide { margin: 18px 0; border: 1px solid var(--brd); border-radius: var(--rad); background: var(--card); overflow: hidden; }
.pkg-onde-guide details { padding: 13px 15px; border-bottom: 1px solid var(--brd); }
.pkg-onde-guide details:last-child { border-bottom: 0; }
.pkg-onde-guide summary { cursor: pointer; color: var(--g); font-size: .88rem; }
.pkg-onde-guide summary::marker { color: var(--v); }
.pkg-onde-guide ol { margin: 11px 0 0 21px; padding: 0; color: var(--g2); font-size: .82rem; line-height: 1.55; }
.pkg-onde-guide li + li { margin-top: 5px; }
.pkg-onde-version-help p { margin: 11px 0 0; color: var(--g2); font-size: .82rem; line-height: 1.5; }
.pkg-onde-version-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 13px; }
.pkg-onde-version-images figure { margin: 0; min-width: 0; }
.pkg-onde-version-images img { display: block; width: 100%; border: 1px solid var(--brd); border-radius: var(--rad-sm); }
.pkg-onde-version-images figcaption { margin-top: 5px; text-align: center; color: var(--g3); font-size: .74rem; font-weight: 700; }

.pkg-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; text-align: center; padding: 38px 20px; cursor: pointer;
  border: 1.5px dashed var(--brd); border-radius: var(--rad); background: var(--card);
  transition: border-color .15s, background .15s;
}
.pkg-dropzone:hover, .pkg-dropzone:focus-visible { border-color: var(--vl); background: var(--v-soft); outline: none; }
.pkg-dropzone--over { border-color: var(--v); background: var(--v-soft); }
.pkg-dropzone-icon { width: 32px; height: 32px; color: var(--v); }
.pkg-dropzone-text { font-size: .88rem; color: var(--g2); margin: 0; }
.pkg-dropzone-link { color: var(--v); font-weight: 700; text-decoration: underline; }
.pkg-dropzone[hidden] { display: none; }

.pkg-files-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pkg-files-item { font-size: .82rem; color: var(--g); padding: 7px 11px; border-radius: var(--rad-sm); background: var(--v-soft); }
.pkg-files-item--unknown { background: var(--pkg-danger-soft); color: var(--pkg-danger); }
.pkg-files-change { margin-top: 4px; font-size: .78rem; }

.pkg-classes-preview { margin-top: 16px; font-size: .84rem; color: var(--g); font-weight: 600; }
.pkg-classes-preview[hidden] { display: none; }

/* ===== NOTICES ===== */
.pkg-notice {
  margin-top: 12px; padding: 11px 13px; border-radius: var(--rad-sm); font-size: .84rem;
  background: var(--v-soft); border: 1px solid rgba(123, 91, 240, .18); color: var(--g);
}
.pkg-notice--error { background: var(--pkg-danger-soft); border-color: rgba(180, 35, 24, .2); color: var(--pkg-danger); }

/* ===== BOUTONS ===== */
.pkg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 18px; border-radius: var(--rad-sm); font-size: .85rem; font-weight: 700;
  font-family: var(--fd); transition: all .15s; white-space: nowrap; cursor: pointer;
}
.pkg-btn--primary { background: linear-gradient(135deg, var(--vl), var(--v)); color: var(--bg); box-shadow: 0 4px 14px rgba(123, 91, 240, .25); }
.pkg-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(123, 91, 240, .32); }
.pkg-btn--ghost { background: var(--card); color: var(--g2); border: 1px solid var(--brd); }
.pkg-btn--ghost:hover { border-color: var(--vl); color: var(--v); background: var(--v-soft); }
.pkg-btn--sm { padding: 7px 13px; font-size: .76rem; }
.pkg-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* ===== ÉTAPE 5 — CLASSES DÉTECTÉES ===== */
.pkg-step5-back { margin-bottom: 18px; }
.pkg-results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 12px; }
.pkg-results-head .pkg-card-title { margin-bottom: 0; }
.pkg-classes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pkg-classes-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--brd); border-radius: var(--rad-sm); background: var(--card);
}
.pkg-classes-name { font-weight: 700; color: var(--g); font-size: .88rem; }
.pkg-classes-level { font-weight: 400; color: var(--g3); font-size: .78rem; }
.pkg-classes-count { color: var(--g2); font-size: .8rem; margin-left: auto; }

/* ===== ÉCRAN FINAL ===== */
.pkg-screen--final { text-align: center; max-width: 620px; margin: 24px auto 0; padding: 20px 0 40px; }
.pkg-final-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px;
  border-radius: 50%; background: linear-gradient(135deg, var(--vl), var(--v)); color: #fff; margin-bottom: 20px;
}
.pkg-final-icon svg { width: 30px; height: 30px; }
.pkg-final-summary { font-size: 1rem; color: var(--g2); margin: 4px 0 32px; }
.pkg-print-tip {
  display: flex; align-items: center; gap: 12px; text-align: left;
  margin: 0 0 24px; padding: 14px 18px; border-radius: var(--rad);
  background: var(--v-soft); border: 1.5px solid var(--v);
}
.pkg-print-tip svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--v); }
.pkg-print-tip div { font-size: .92rem; line-height: 1.5; color: var(--navy); }
.pkg-print-tip strong { color: var(--v); }
.pkg-final-promo {
  background: linear-gradient(135deg, var(--vl), var(--v)); padding: 32px 28px; border-radius: var(--rad-lg);
}
.pkg-final-promo p { color: #fff; font-size: .96rem; max-width: 520px; margin: 0 auto 20px; line-height: 1.6; }
.pkg-final-promo p strong { font-weight: 800; }
.pkg-final-ctas { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.pkg-final-promo .pkg-btn--primary { background: #fff; color: var(--v); box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
.pkg-final-promo .pkg-btn--primary:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, .24); }
.pkg-final-promo .pkg-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
.pkg-final-promo .pkg-btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

/* ===== CONTRÔLES DE NAVIGATION (Précédent / Suivant) ===== */
.pkg-controls { position: sticky; bottom: 0; z-index: 30; background: rgba(247, 245, 253, .95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--brd); padding: 14px 0; }
.pkg-controls[hidden] { display: none; }
.pkg-controls-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pkg-controls-in #pkgBtnPrev[hidden] { visibility: hidden; }
.pkg-controls-in #pkgBtnNext { margin-left: auto; }

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
  .pkg-body { padding: 14px 16px 24px; }
  .pkg-onde-version-images { grid-template-columns: 1fr; }
  .pkg-fields { grid-template-columns: 1fr; }
  .pkg-field--wide { grid-column: auto; }
  .pkg-results-head { flex-direction: column; align-items: stretch; }
  .pkg-results-head #pkgDownloadAll { width: 100%; }
  .pkg-classes-item { flex-wrap: wrap; }
  .pkg-classes-count { margin-left: 0; }
  .pkg-classes-item [data-download-class] { width: 100%; }
  .pkg-final-ctas { flex-direction: column; align-items: stretch; }
}

/* ===== ACCESSIBILITÉ ===== */
@media (prefers-reduced-motion: reduce) {
  .pkg-btn, .pkg-dropzone, .pkg-piece, .pkg-step-num, .pkg-step-label { transition: none; }
}