/* MyDipro : page d'accueil de la suite d'applications.
   Same look as "Demandes & tickets": colours of the Dipropneu logo, navy #004279 (main), blues #0067A8 / #119BDA,
   orange #F6821F. No web fonts (nothing is loaded from elsewhere). Light by default, dark with the button. */

:root {
  --brand-navy: #004279; --brand-blue: #0067A8; --brand-sky: #119BDA; --brand-orange: #F6821F;
  --bg: #EDF1F6; --surface: #FFFFFF; --surface-2: #F3F6FA; --ink: #10233A; --muted: #55667B; --line: #D3DCE7;
  --accent: #004279; --accent-soft: #E0EBF5;
  --shadow: 0 1px 2px rgba(0, 40, 80, .06), 0 8px 24px rgba(0, 40, 80, .08);
  --shadow-hover: 0 2px 4px rgba(0, 40, 80, .08), 0 16px 36px rgba(0, 40, 80, .14);
  --title: #004279; --logo-plate: transparent; --logo-pad: 0;
  --tone-blue: #0067A8; --tone-blue-soft: #E0EEF8; --tone-orange: #C25E00; --tone-orange-soft: #FDEDDC;
  --tone-sky: #0B7BB0; --tone-sky-soft: #DDF1FB; --tone-navy: #004279; --tone-navy-soft: #E0EBF5;
  --f-display: "Bahnschrift SemiCondensed", "Bahnschrift", "Roboto Condensed", "Arial Narrow", sans-serif;
  --f-body: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0A1522; --surface: #102030; --surface-2: #16293D; --ink: #E5EDF6; --muted: #98AABF; --line: #22384F;
  --accent: #3FAEE8; --accent-soft: #10324E;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 16px 36px rgba(0, 0, 0, .5);
  --title: #E5EDF6; --logo-plate: #FFFFFF; --logo-pad: 6px 10px;
  --tone-blue: #6CB8EE; --tone-blue-soft: #13304A; --tone-orange: #F8A14B; --tone-orange-soft: #3A2814;
  --tone-sky: #7FD0F5; --tone-sky-soft: #10354A; --tone-navy: #A9C8EA; --tone-navy-soft: #1A2B3D;
  color-scheme: dark;
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font-family: var(--f-body); font-size: 15px; line-height: 1.5;
}
/* The logo ring's blue gradient, as a thin band across the top. */
body::before { content: ""; display: block; height: 5px; background: linear-gradient(90deg, var(--brand-navy), var(--brand-blue) 55%, var(--brand-sky)) }
h1, h2 { font-family: var(--f-display); margin: 0; letter-spacing: .01em; text-wrap: balance }
a { color: var(--accent) }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px }

.wrap {
  max-width: 1080px; margin: 0 auto; min-height: calc(100vh - 5px);
  padding: 24px max(16px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 36px;
}

/* ---------- header ---------- */
.top { display: flex; justify-content: center; align-items: center }
.brand { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; min-width: 0 }
.brand-text { display: flex; flex-direction: column; gap: 2px; padding-left: 18px; border-left: 2px solid var(--line) }
.label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600 }
.brand h1 { font-size: 28px; font-weight: 700; color: var(--title) }
.brand h1 span { color: var(--brand-orange) }
.logo { display: block; height: 46px; width: auto; border-radius: 8px; background: var(--logo-plate); padding: var(--logo-pad); box-sizing: content-box }
/* Light / dark switch, in the footer: icon + what it switches to. */
.theme-btn {
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px;
  font: inherit; font-size: 13.5px; cursor: pointer;
}
.theme-btn:hover { border-color: var(--accent) }
.i-sun { display: none }
:root[data-theme="dark"] .i-sun { display: block }
:root[data-theme="dark"] .i-moon { display: none }

/* ---------- intro ---------- */
/* Title and tiles centred in the free space, a little above the middle (balanced with few tools). */
main { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 26px; padding-bottom: 6vh }
.intro h2 { font-size: 34px; line-height: 1.1; color: var(--title); text-align: center }

/* ---------- application tiles ---------- */
/* Same-width tiles, up to 3 per row, every row centred (the last one too): balanced with 2 tools or 10. */
.apps { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px }
.app {
  --tone: var(--tone-blue); --tone-soft: var(--tone-blue-soft);
  flex: 0 1 320px; min-width: 0;
  position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 196px;
  padding: 22px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow); color: var(--ink); text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.app[data-tone="orange"] { --tone: var(--tone-orange); --tone-soft: var(--tone-orange-soft) }
.app[data-tone="sky"] { --tone: var(--tone-sky); --tone-soft: var(--tone-sky-soft) }
.app[data-tone="navy"] { --tone: var(--tone-navy); --tone-soft: var(--tone-navy-soft) }
/* The tile's colour as a band on its top edge. */
.app::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: 14px 14px 0 0; background: var(--tone) }
a.app:hover { border-color: var(--tone); box-shadow: var(--shadow-hover); transform: translateY(-2px) }
a.app:active { transform: translateY(0) }
@media (prefers-reduced-motion: reduce) { .app { transition: none } a.app:hover { transform: none } }

.app-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 12px; background: var(--tone-soft); color: var(--tone);
}
.app-body { display: flex; flex-direction: column; gap: 6px; flex: 1 }
.app-name { font-family: var(--f-display); font-size: 21px; font-weight: 700; line-height: 1.2 }
.app-desc { color: var(--muted); font-size: 14.5px }
.app-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--tone); font-size: 14.5px }
a.app:hover .app-go svg { transform: translateX(3px) }
.app-go svg { transition: transform .15s ease }

.app.soon { background: transparent; border-style: dashed; box-shadow: none; color: var(--muted) }
.app.soon::before { display: none }
.app.soon .app-icon { background: var(--surface-2); color: var(--muted) }
.app.soon .app-name { color: var(--muted) }
.app-soon { align-self: flex-start; font-size: 12.5px; font-weight: 600; color: var(--muted); border: 1px dashed var(--line); border-radius: 999px; padding: 2px 10px }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding-top: 16px; color: var(--muted); font-size: 13.5px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap }
.foot p { margin: 0 0 4px }

@media (max-width: 560px) {
  .brand-text { padding-left: 0; border-left: 0 }
  .logo { height: 38px }
  .brand h1 { font-size: 24px }
  .intro h2 { font-size: 27px }
  .app { flex-basis: 100% }
  .wrap { gap: 26px }
}