/* =========================================================================
* kids-toddler.css — Shell partagé pour les jeux 2-5 ans
*
* Utilisation : + lien vers ce CSS via
*
*
* Industrialise les patterns mobile-first pour les tout-petits :
* - Plein écran sans scroll (height: 100dvh + overflow: hidden)
* - Pas de double-tap zoom (touch-action: manipulation)
* - Pas de surlignement gris au tap (-webkit-tap-highlight-color)
* - Pas de sélection texte intempestive (-webkit-user-select: none)
* - Padding safe-area (env(safe-area-inset-*)) pour iPhone notch
* - Padding-top calé sur le header fixe via var(--ik-header-h)
* - Tap targets agrandis (min-height: 56px sur boutons)
*
* Les CSS spécifiques par jeu (tactile.css, animaux.css, couleurs.css)
* restent responsables de l'identité visuelle (couleurs, fonds, layout
* des cartes/grilles) et de l'animation des éléments de jeu.
* ========================================================================= */
/* ─── Shell fullscreen ─────────────────────────────────────────────────── */
body.toddler-body {
/* Empêche le scroll vertical : prend toute la hauteur réelle visible.
* 100dvh = dynamic viewport (prend en compte barres URL mobile qui
* apparaissent/disparaissent). Fallback 100vh pour anciens navigateurs. */
height: 100vh;
height: 100dvh;
/* Si le contenu d'un écran dépasse, on coupe plutôt que scroll.
* Les sous-écrans (.tactile-screen, .animaux-screen, etc.) doivent
* gérer leur propre overflow:auto si nécessaire. */
overflow: hidden;
/* Reset marges */
margin: 0;
padding: 0;
/* UX tactile enfant */
touch-action: manipulation; /* Pas de double-tap zoom */
-webkit-tap-highlight-color: transparent; /* Pas de halo gris au tap */
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none; /* Pas de menu contextuel sur long press */
/* Évite l'overscroll bounce sur iOS */
overscroll-behavior: none;
/* La couleur de fond et la font restent définies par les CSS
* spécifiques (.tactile-body, .animaux-body, .couleurs-body) pour
* préserver l'identité de chaque jeu. */
}
/* Le du jeu : flex column qui prend tout l'espace sous le header */
body.toddler-body > main {
/* Compense la hauteur du header fixe + safe-area iPhone + 16px de
respiration pour absorber ombres header et bugs d'arrondi viewport
(sprint UX.PATCH : cartes du jeu memory tactile légèrement tronquées
en haut sur certains devices). */
padding-top: calc(var(--ik-header-h, 52px) + 16px + env(safe-area-inset-top, 0px));
padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
/* Flex pour que les enfants directs puissent prendre tout l'espace */
display: flex;
flex-direction: column;
/* Prend la hauteur exacte du viewport moins éventuels offsets */
height: 100%;
box-sizing: border-box;
/* Évite la sélection texte au glissement (les bambins glissent souvent) */
-webkit-user-select: none;
user-select: none;
}
/* Les doivent prendre toute la place dispo */
body.toddler-body main > section {
flex: 1;
min-height: 0; /* Permet au flex child de rétrécir sous content-size */
display: flex;
flex-direction: column;
/* Sprint UX.PATCH : compromis. Le body reste no-scroll (pas d'overscroll
* bounce, pas de double-tap zoom) mais on autorise un scroll interne à
* la section si le contenu d'un écran dépasse vraiment l'espace dispo
* (cas du tactile-board "Difficile" 4 paires sur petit écran portrait).
* -webkit-overflow-scrolling: touch pour scroll fluide iOS. */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
}
/* Sprint UX.PATCH-3 : restaurer le comportement de l'attribut [hidden].
* La règle ci-dessus (display:flex) a une spécificité supérieure à la
* règle UA `[hidden]{display:none}` et l'annule → sur tactile.html et
* couleurs.html les 3 sections (home/game/win) s'affichaient en même
* temps, empilées par le flex column.
* Pitfall : les règles d'auteur l'emportent TOUJOURS sur le user-agent
* stylesheet, peu importe la spécificité — il faut restaurer [hidden]
* explicitement côté auteur. */
body.toddler-body main > section[hidden] {
display: none;
}
/* ─── Tap targets élargis (recommandation WCAG 2.2 SC 2.5.8 : 44×44 min,
* mais pour des tout-petits maladroits on vise 56px+ partout) ─────── */
body.toddler-body button,
body.toddler-body [role="button"],
body.toddler-body .tactile-level-btn,
body.toddler-body .animaux-card,
body.toddler-body .couleurs-choice {
/* Garde les styles cosmétiques des CSS spécifiques, on ne touche
* qu'aux dimensions minimum tactiles. */
min-height: 56px;
min-width: 56px;
/* Pas de transition sur transform au tap (lag perceptible chez les petits) */
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
/* ─── Réactivation du header (pas dans le flux toddler-body main) ─────── */
/* Le header doit rester cliquable au-dessus du main */
body.toddler-body > .ik-header {
z-index: 200; /* Au-dessus de tout */
}
/* ─── Disable text input selection if any (forms côté toddler) ────────── */
body.toddler-body input,
body.toddler-body textarea {
/* Si jamais un jeu a un input, on autorise la sélection à cet endroit */
-webkit-user-select: text;
user-select: text;
}
/* ─── Petits ajustements safe-area pour les écrans du jeu ─────────────── */
/* Si un jeu a un footer ou des contrôles bas, ils peuvent utiliser ces
* helper classes pour respecter le safe-area iPhone. */
.toddler-safe-bottom {
padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.toddler-safe-top {
padding-top: max(16px, env(safe-area-inset-top));
}
/* ─── Animation kill-switch sur prefers-reduced-motion (accessibilité) ── */
@media (prefers-reduced-motion: reduce) {
body.toddler-body *,
body.toddler-body *::before,
body.toddler-body *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}