/* Tomber Enceinte : 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 palette « Prune douce »
   de l'app et quelques styles propres à ce site. */
:root {
  --app: #A065CF;      /* prune, accent de l'app (Pépin) */
  --app-2: #522272;    /* prune profond : bas des dégradés */
  --hero-hl: #FFD6EA;  /* rose tendre des joues de Pépin, pour le mot mis en valeur du grand titre */
  --bg: #FCF7FE;       /* fond prune très clair de l'app */
  --nuit: #2B1636;     /* texte et cartes sombres : prune nuit */
  --brume: #67526F;    /* texte secondaire */
  --line: #EBD8F5;
}

/* Pages de texte : sommaire et tableaux (le reste vient du kit). */
.k-toc > p:first-child { font: 800 12.5px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--app-ink); margin: 2px 0 12px; }
.k-doc .table-wrap { overflow-x: auto; }
.k-doc .table-wrap table { margin: 0; }
/* Légendes de la galerie : phrases complètes, en casse normale. */
.k-gallery .k-shot figcaption { text-transform: none; letter-spacing: 0; }

/* Bloc « ce chemin n'est pas toujours simple » : texte et Pépin côte à côte. */
.te-split { align-items: center; }
.te-mascot { display: grid; place-items: center; }
.te-mascot img { width: min(300px, 70vw); height: auto; filter: drop-shadow(0 22px 26px rgba(43, 22, 54, .28)); animation: k-bob 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .te-mascot img { animation: none; } }

/* Bloc d'honnêteté : ce que l'app n'est pas. */
.te-honest { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start; max-width: 900px; margin-inline: auto; padding: clamp(24px, 4vw, 40px); border-radius: 28px; background: #fff; }
.te-honest h2 { font: 800 clamp(24px, 3vw, 32px)/1.15 var(--display); color: var(--fg); margin: 0 0 12px; }
.te-honest p { color: var(--muted); line-height: 1.6; margin: 0 0 16px; max-width: 62ch; }
.te-honest p strong { color: var(--fg); }
@media (max-width: 599px) { .te-honest { grid-template-columns: minmax(0, 1fr); } }

.te-more { margin-top: 28px; font-size: 16px; }
.te-more a { color: var(--app-ink); font-weight: 700; }

/* 404 : Pépin à la place du 0. */
.te-404-pepin img { width: 78%; height: auto; display: block; }