/* ============================================================
   PortalRez — app.css · Mise en page (complète larez.css)
   larez.css = design system de la maquette (ne pas modifier)
   ============================================================ */

html, body { background: var(--bg-2); min-height: 100%; }

/* L'attribut HTML hidden doit TOUJOURS gagner (larez.css pose des display:flex) */
[hidden] { display: none !important; }

/* ---------- Parcours étudiant : colonne centrée mobile-first ---------- */
.student-shell {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--white);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 600px) {
  .student-shell { margin: 28px auto; min-height: calc(100vh - 56px); border-radius: 20px; border: 1px solid var(--border); overflow: hidden; }
}

.student-head { padding: 14px 22px 12px; border-bottom: 1px solid var(--border-soft); margin-bottom: 14px; }
.student-head img { height: 26px; display: block; }

.student-main { flex: 1; padding: 8px 22px 26px; }

.student-foot {
  position: sticky; bottom: 0;
  display: flex; gap: 12px;
  padding: 14px 22px;
  border-top: 1px solid var(--border-soft);
  background: var(--white);
}
.student-foot .grow { flex: 1; }

/* utilitaires simples utilisés par les pages */
.row { display: flex; align-items: center; }
.row.between { justify-content: space-between; }
.gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-14 { gap: 14px; }
.grow { flex: 1; }
.stack { display: flex; flex-direction: column; }
.center { align-items: center; }
.field-row { display: flex; gap: 16px; }
.field-row > .field { flex: 1; }
@media (max-width: 480px) { .field-row { flex-direction: column; gap: 16px; } }

/* étapes du formulaire (affichées/masquées en JS) */
.form-step { display: none; }
.form-step.on { display: block; animation: stepIn .26s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Boutons verts : texte blanc (demande client) ---------- */
.btn-primary { color: #fff !important; }
.btn-primary svg { stroke: #fff; }
.btn-validate:hover:not(:disabled) { color: #fff !important; }

/* ---------- Bouton destructif doux (retirer, supprimer) ----------
   Même style que .btn-secondary survolé (pilule bordée, fond pâle),
   décliné en rouge : bordure rouge, fond rouge très clair, texte rouge. */
.btn-rouge,
.btn-rouge.btn-secondary,
.btn-rouge.btn-ghost {
  background: rgba(220, 68, 68, .07);
  border: 1.5px solid rgba(220, 68, 68, .55);
  color: #c0392b;
}
.btn-rouge:hover:not(:disabled) {
  background: rgba(220, 68, 68, .14);
  border-color: #c0392b;
  color: #a93226;
}


/* ============================================================
   En-têtes de page (lot G) — écrans étroits / navigateur avec
   barre latérale : les actions restent compactes et se replient
   proprement au lieu d'étirer les champs sur toute la largeur.
   ============================================================ */
.page-head { flex-wrap: wrap; gap: 12px 24px; }
.page-head > div:first-child { min-width: 0; }
.page-head > form.row, .page-head > .row.gap-8, .page-head > .row.gap-6 { flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }
.page-head form.row .input, .page-head form.row .select { width: auto; flex: 0 0 auto; }
.page-head .btn { white-space: nowrap; }
.page-head .btn-secondary, .page-head .btn-ghost { padding: 9px 14px; font-size: 13.5px; }
.page-head .btn-secondary svg, .page-head .btn-ghost svg { width: 14px; height: 14px; }
@media (max-width: 1500px) {
  .page-head > form.row, .page-head > .row.gap-8, .page-head > .row.gap-6 { margin-left: 0; justify-content: flex-start; flex-basis: 100%; }
}


/* ============================================================
   Modales (<dialog>) — mobile / PWA : confinées à l'écran, défilement
   vertical à l'intérieur, jamais de débordement horizontal, champs
   côte à côte empilés sur petit écran.
   ============================================================ */
dialog { box-sizing: border-box; max-height: calc(100dvh - 24px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
dialog > form, dialog > div { max-width: 100%; box-sizing: border-box; }
dialog .field, dialog .field-row > .field, dialog .row > .field { min-width: 0; }
dialog .input, dialog .select, dialog textarea { max-width: 100%; min-width: 0; box-sizing: border-box; }
dialog::backdrop { background: rgba(20, 30, 10, .38); backdrop-filter: blur(2px); }
@media (max-width: 640px) {
  dialog { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; margin: 8px auto; border-radius: 14px; }
  dialog .field-row, dialog .row.gap-12, dialog .row.gap-10 { flex-direction: column; gap: 12px; }
  dialog .field-row > .field, dialog .row.gap-12 > .field, dialog .row.gap-10 > .field { width: 100%; }
  dialog .card-pad { padding: 16px !important; }
  dialog .row.gap-8[style*="justify-content:flex-end"] { flex-wrap: wrap; }
  dialog .btn { white-space: nowrap; }
}