/* Depression : réglages propres au site.
   Toute la charte vient du kit commun Devolim (/kit/devolim.css, copie de _modele/kit/ :
   ne pas modifier ici, voir _modele/KIT.md). Ce fichier ne contient que la couleur de l'app
   (palette Nuit de l'app) et les quelques blocs propres à ce site. */
:root {
  --app: #4651A6;     /* indigo de l'app */
  --app-2: #262D66;   /* le même, nettement plus foncé : bas des dégradés */
}

/* Accueil, bloc « L'aide, toujours à un geste » (texte sur fond clair + téléphone). */
.dep-dark .k-eyebrow { text-align: left; margin-bottom: 0; }
.dep-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.dep-list li { position: relative; padding-left: 32px; font: 650 16.5px/1.4 var(--display); color: var(--fg); }
.dep-list li::before { content: ""; position: absolute; left: 0; top: .15em; width: 20px; height: 20px; border-radius: 7px; background: var(--app); box-shadow: inset 0 -3px 0 var(--app-edge); }
.dep-list li::after { content: ""; position: absolute; left: 7px; top: calc(.15em + 7px); width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.k-split-copy .dep-small { font-size: 15px; color: var(--muted); }
.dep-small a { color: var(--app-ink); font-weight: 750; }
.dep-phone { display: grid; place-items: center; padding: 24px 0; }
@media (max-width: 859px) {
  .dep-dark .k-eyebrow { text-align: center; }
  .dep-list { justify-self: stretch; text-align: left; max-width: 520px; margin-inline: auto; }
}

/* Accueil, encart « Tu vas très mal en ce moment ? ». */
.dep-help { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 24px; align-items: center; padding: clamp(22px, 3.5vw, 34px); border-radius: 28px; background: #fff; border: 2px solid color-mix(in oklab, var(--app) 28%, #fff); box-shadow: 0 5px 0 #D3D9E6, 0 24px 40px -24px rgba(10, 16, 51, .35); }
.dep-help h2 { font-size: clamp(22px, 2.6vw, 30px); text-align: left; }
.dep-help p { margin: 8px 0 0; color: var(--fg); font-size: 17px; line-height: 1.5; }
.dep-help a:not(.k-btn) { color: var(--app-ink); text-decoration: none; }
@media (max-width: 759px) {
  .dep-help { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .dep-help h2 { text-align: center; }
}

/* Kolo, la mascotte de l'app, dans le bloc final. */
.k-cta-art .kolo { position: relative; z-index: 2; width: clamp(170px, 20vw, 260px); height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); animation: k-bob 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .k-cta-art .kolo { animation: none; } }