/* ============================================================ * * kids-conteur · style.css * * Sprint 3.C — frontend toddler (3-5 ans) * * * * Conventions : * * - : shell sans * * scroll, tap optimisé, padding safe-area (cf. kids-toddler.* * css côté iriskids-home). * * - Pas de texte sur les cards (gros emoji/SVG uniquement, * * Stéphane a choisi tranche 3-5 ans). * * - Tap targets très larges (~30vmin par card). * * - 3 écrans de choix + loading + histoire. * * ============================================================ */ :root { --ik-accent: #8b5cf6; /* violet Conteur (cohérent avec --ik-accent fallback iriskids-ui.css) */ --conteur-bg: #FAF5FF; /* fond très doux lavande */ --conteur-card-bg: #FFFFFF; --conteur-card-ring: rgba(139, 92, 246, 0.18); --conteur-text: #1F2937; --conteur-text-soft: #6B7280; } /* ─── Body : étend toddler-body de iriskids-home/static/kids-toddler.css ─── */ .conteur-body { background: var(--conteur-bg); font-family: 'Baloo 2', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--conteur-text); } /* ─── Screens (1 visible à la fois) ─── */ .conteur-screen { /* Plein écran sous le header. kids-toddler.css applique le padding-top correspondant à --ik-header-h (52px par défaut) + safe-area iPhone. */ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--ik-header-h, 52px) + env(safe-area-inset-top, 0px) + 8px) env(safe-area-inset-right, 16px) env(safe-area-inset-bottom, 16px) env(safe-area-inset-left, 16px); gap: clamp(0.5rem, 2vh, 1.25rem); box-sizing: border-box; /* Animation d'entrée discrète */ animation: conteur-fade-in 0.28s ease-out; } @keyframes conteur-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } [hidden].conteur-screen { display: none !important; } /* ─── Prompt (titre du screen) ─── */ .conteur-prompt { font-size: clamp(1.4rem, 4.5vw, 2.2rem); font-weight: 800; margin: 0; text-align: center; color: var(--conteur-text); line-height: 1.15; padding: 0 0.5rem; } /* ─── Grille de 5 cards (3 en haut, 2 en bas) ─── */ .conteur-grid { display: grid; grid-template-columns: repeat(3, 1fr); /* explicite : 2 lignes, hauteur partagée */ grid-template-rows: 1fr 1fr; gap: clamp(0.5rem, 2vw, 1rem); width: 100%; max-width: 900px; flex: 1; min-height: 0; /* permet à flex:1 de respecter le parent sans pousser */ align-items: stretch; justify-items: stretch; } /* La 4ème carte (index 4 = 1-based) commence en row 2 col 1, on la centre visuellement avec la 5ème pour avoir un 3+2 propre */ .conteur-grid .conteur-card:nth-child(4) { grid-column: 1 / span 1; } .conteur-grid .conteur-card:nth-child(5) { grid-column: 2 / span 1; } /* col 3 ligne 2 reste vide intentionnellement (équilibre visuel 3+2) */ /* ─── Card (1 choix) ─── */ .conteur-card { appearance: none; -webkit-appearance: none; border: none; padding: clamp(0.5rem, 1.5vw, 1rem); background: var(--conteur-card-bg); border-radius: clamp(16px, 3vw, 24px); box-shadow: 0 4px 0 var(--conteur-card-ring), 0 8px 20px rgba(139, 92, 246, 0.12); cursor: pointer; display: flex; flex-direction: column; /* SVG en haut, label en bas */ align-items: center; justify-content: center; gap: clamp(0.25rem, 1vmin, 0.6rem); min-height: 0; /* important sinon les SVG empêchent le shrink */ transition: transform 0.15s ease-out, box-shadow 0.15s ease-out; touch-action: manipulation; } .conteur-card:active, .conteur-card--picked { transform: scale(0.94); box-shadow: 0 2px 0 var(--conteur-card-ring), 0 4px 12px rgba(139, 92, 246, 0.18); } .conteur-card:focus-visible { outline: 3px solid var(--ik-accent); outline-offset: 2px; } .conteur-card svg { width: 100%; height: auto; flex: 1; min-height: 0; max-width: clamp(70px, 16vmin, 160px); max-height: clamp(70px, 16vmin, 160px); display: block; } /* Label sous le SVG (3.C HOTFIX-2 — toddler a besoin du mot écrit pour l'apprentissage de la reconnaissance, et le parent peut lire à voix haute) */ .conteur-card-label { font-size: clamp(0.95rem, 2.6vw, 1.3rem); font-weight: 700; color: var(--conteur-text); font-family: 'Baloo 2', system-ui, -apple-system, sans-serif; text-align: center; line-height: 1.1; flex-shrink: 0; } /* ─── Écran loading ─── */ .conteur-loading { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; flex: 1; justify-content: center; } .conteur-spinner { width: clamp(80px, 18vmin, 140px); height: clamp(80px, 18vmin, 140px); } .conteur-loading-text { font-size: clamp(1.1rem, 3vw, 1.4rem); font-weight: 600; color: var(--ik-accent); margin: 0; text-align: center; animation: conteur-pulse 1.8s ease-in-out infinite; } @keyframes conteur-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1.0; } } /* ─── Écran story ─── */ .conteur-story-screen { justify-content: flex-start; padding-top: calc(var(--ik-header-h, 52px) + env(safe-area-inset-top, 0px) + 12px); } .conteur-story-recap { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: clamp(0.4rem, 1.5vw, 0.8rem); flex-shrink: 0; } .conteur-recap-icon { width: clamp(48px, 10vmin, 80px); height: clamp(48px, 10vmin, 80px); border-radius: clamp(8px, 1.5vw, 14px); background: transparent; } .conteur-story-content { flex: 1; min-height: 0; width: 100%; max-width: 720px; overflow-y: auto; background: #FFFFFF; border-radius: clamp(16px, 3vw, 24px); padding: clamp(0.75rem, 3vw, 1.5rem); box-shadow: 0 4px 16px rgba(139, 92, 246, 0.1); /* Scroll natif tactile (l'histoire peut dépasser sur petits écrans) C'est l'exception au "no scroll" toddler — c'est CONTENU lisible, pas du jeu interactif où le scroll perturberait le tap. */ -webkit-overflow-scrolling: touch; } .conteur-story-text { font-size: clamp(1.05rem, 3vw, 1.35rem); line-height: 1.55; color: var(--conteur-text); margin: 0; /* Petit white-space pre-wrap pour respecter les sauts de ligne de Claude */ white-space: pre-wrap; } /* ─── Contrôles audio (play/pause, replay, nouvelle) ─── */ .conteur-story-controls { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: clamp(0.75rem, 3vw, 1.5rem); flex-shrink: 0; padding-bottom: env(safe-area-inset-bottom, 8px); } .conteur-control { appearance: none; -webkit-appearance: none; border: 3px solid var(--ik-accent); background: #FFFFFF; border-radius: 50%; width: clamp(56px, 14vmin, 80px); height: clamp(56px, 14vmin, 80px); font-size: clamp(1.5rem, 5vmin, 2.2rem); color: var(--ik-accent); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s, background-color 0.15s; box-shadow: 0 4px 0 rgba(139, 92, 246, 0.25); touch-action: manipulation; } .conteur-control:active { transform: scale(0.92) translateY(2px); box-shadow: 0 2px 0 rgba(139, 92, 246, 0.25); } .conteur-control--primary { background: var(--ik-accent); color: #FFFFFF; width: clamp(64px, 16vmin, 92px); height: clamp(64px, 16vmin, 92px); font-size: clamp(1.8rem, 6vmin, 2.6rem); } .conteur-control--new { border-color: #F59E0B; color: #F59E0B; } .conteur-control-icon { line-height: 1; } .conteur-control:focus-visible { outline: 3px solid #F59E0B; outline-offset: 3px; } /* ─── Build tag (discret, coin bas droite) ─── */ .conteur-build-tag { position: fixed; bottom: 2px; right: 6px; font-size: 9px; opacity: 0.25; font-family: monospace; pointer-events: none; z-index: 1; margin: 0; } /* ─── Adaptations orientation / petits écrans ─── */ /* Paysage mobile : limite la hauteur du recap pour ne pas étouffer l'histoire */ @media (orientation: landscape) and (max-height: 500px) { .conteur-recap-icon { width: clamp(36px, 8vmin, 56px); height: clamp(36px, 8vmin, 56px); } .conteur-prompt { font-size: clamp(1.1rem, 3.5vw, 1.6rem); } } /* Très petits écrans (<360px) : cards plus compactes */ @media (max-width: 359px) { .conteur-grid { gap: 6px; } .conteur-card { padding: 4px; } }