@charset "UTF-8";
/*!
 * Apprendre à lire et à écrire — écrans de l'apprenant.
 * Tout est surdimensionné : cibles tactiles larges, contrastes forts, peu d'éléments
 * par écran. Personne ne doit avoir besoin de lire pour savoir où appuyer.
 */

.alr-app .kqa-shell { background: radial-gradient(120% 90% at 15% 0%, #1b5a6b 0%, #114256 45%, #082733 100%); }

.alr-home, .alr-chapitre, .alr-atelier, .alr-lecon, .alr-reussite {
	padding: clamp(.8rem, 2.5vw, 1.8rem) clamp(.4rem, 2vw, 1.4rem);
	text-align: center;
}

.alr-app .kqa-title { font-size: clamp(1.6rem, 5vw, 2.8rem); }
.alr-consigne { display: flex; flex-direction: column; align-items: center; gap: .4rem; margin: .6rem 0 1rem; }
.alr-consigne-texte { color: rgba(255, 255, 255, .9); font-size: clamp(1rem, 2.4vw, 1.3rem); max-width: 34ch; margin: 0 auto; }

/* ---------- Bouton « écouter » ---------- */

.alr-ecoute {
	display: inline-flex; align-items: center; gap: .5rem;
	min-height: 3.4rem;
	padding: .5rem 1.2rem;
	font-family: var(--kqa-display);
	font-size: 1.05rem;
	color: var(--kqa-ink);
	background: #fff;
	border: 3px solid var(--kqa-ink);
	border-radius: 999px;
	box-shadow: 0 5px 0 var(--kqa-ink);
	cursor: pointer;
}

.alr-ecoute:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--kqa-ink); }
.alr-ecoute-icone { display: block; line-height: 0; }
.alr-ecoute-icone svg { width: 1.7rem; height: 1.7rem; display: block; }
.alr-ecoute.is-geant .alr-ecoute-icone svg { width: 2.8rem; height: 2.8rem; }
.alr-ecoute.is-grand .alr-ecoute-icone svg { width: 2.1rem; height: 2.1rem; }

/* Outils de l'écriture : chacun sa couleur, pour se repérer sans lire. */
.alr-ecoute.is-outil {
	flex-direction: column;
	gap: .1rem;
	min-width: 5.4rem;
	min-height: 4.6rem;
	padding: .45rem .6rem;
	font-size: .82rem;
}

.alr-ecoute.is-outil .alr-ecoute-mot { display: inline; }
.alr-ecoute.is-t1 { background: #FFD9A0; }
.alr-ecoute.is-t2 { background: #BFDDF7; }
.alr-ecoute.is-t3 { background: #BCE8CC; }
.alr-ecoute.is-t4 { background: #FFFFFF; }
.alr-ecoute.is-t5 { background: #F3D8F0; }
.alr-ecoute.is-grand { min-height: 4.4rem; font-size: 1.3rem; padding: .6rem 1.8rem; background: var(--kqa-band); }
.alr-ecoute.is-geant { min-height: 5.6rem; font-size: clamp(1.2rem, 3vw, 1.7rem); padding: .8rem 2.4rem; background: var(--kqa-band); }
.alr-ecoute.is-geant .alr-ecoute-icone { font-size: 2.6rem; }
.alr-ecoute.is-aide { background: #fff3d6; }
.alr-avertissement { color: #ffd7db; background: rgba(179, 32, 47, .45); border-radius: 12px; padding: .6rem 1rem; max-width: 40ch; margin: 1rem auto 0; }

/* ---------- En-tête d'écran ---------- */

.alr-entete { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .4rem; }
.alr-entete .kqa-title { margin: 0; flex: 1; }
.alr-entete-fin { flex: 0 0 auto; }

.alr-retour {
	width: 3.4rem; height: 3.4rem;
	flex: 0 0 auto;
	display: grid; place-items: center;
	color: var(--kqa-ink);
	background: #fff;
	border: 3px solid var(--kqa-ink);
	border-radius: 50%;
	cursor: pointer;
}

.alr-retour svg { width: 1.6rem; height: 1.6rem; }
.alr-etapes { display: flex; gap: .4rem; }
.alr-point { width: .9rem; height: .9rem; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.alr-point.is-on { background: var(--kqa-band); }

/* ---------- Choix d'un thème ---------- */

.alr-themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .9rem; }

.alr-theme {
	display: flex; flex-direction: column; align-items: center; gap: .3rem;
	padding: 1rem .8rem;
	background: #fff;
	border: 4px solid transparent;
	border-radius: 20px;
	box-shadow: 0 6px 0 rgba(0, 0, 0, .25);
	cursor: pointer;
	transition: transform .12s ease;
}

.alr-theme:hover { transform: translateY(-4px); border-color: var(--kqa-band); }
.alr-theme-image svg { width: clamp(6rem, 16vw, 9rem); height: auto; }
.alr-theme-nom { font-family: var(--kqa-display); font-size: 1.3rem; }
.alr-theme-etat { display: flex; align-items: center; gap: .3rem; }
.alr-pastille { width: .8rem; height: .8rem; border-radius: 50%; background: #dfe5e8; }
.alr-pastille.is-ok { background: var(--kqa-ok); }
.alr-coupe-mini { display: inline-block; width: 1.4rem; margin-left: .2rem; line-height: 0; }
.alr-coupe-mini svg { width: 100%; height: auto; }

/* ---------- Les mots d'un thème ---------- */

.alr-piste { margin-bottom: .8rem; }
.alr-mots { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; }

.alr-mot-carte {
	display: flex; flex-direction: column; align-items: center; gap: .2rem;
	padding: .8rem .5rem .6rem;
	background: #fff;
	border: 4px solid transparent;
	border-radius: 20px;
	box-shadow: 0 6px 0 rgba(0, 0, 0, .25);
	cursor: pointer;
	transition: transform .12s ease;
}

.alr-mot-carte:hover { transform: translateY(-4px); border-color: var(--kqa-band); }
.alr-mot-carte.is-fini { border-color: var(--kqa-ok); }
.alr-mot-image svg { width: clamp(5.5rem, 14vw, 8rem); height: auto; }
.alr-mot-texte { font-family: var(--kqa-display); font-size: 1.4rem; letter-spacing: .08em; }
.alr-mot-etoiles { display: flex; gap: .15rem; }
.alr-etoile { display: block; width: 1.5rem; height: 1.5rem; }
.alr-etoile svg { width: 100%; height: 100%; fill: #dfe5e8; }
.alr-etoile.is-on svg { fill: var(--kqa-band); }
.alr-etoile.is-or svg { fill: #F4B400; filter: drop-shadow(0 0 4px rgba(244, 180, 0, .8)); }
.alr-etoile.is-grande { width: 3rem; height: 3rem; }

/* ---------- Atelier ---------- */

.alr-zone { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.alr-mot-ecoute { display: flex; justify-content: center; }
.alr-image-mot svg { width: clamp(8rem, 26vw, 13rem); height: auto; }
.alr-image-mot.is-petite svg { width: clamp(5rem, 14vw, 7rem); }
.alr-choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; width: 100%; }

.alr-choix-image {
	padding: .8rem .4rem;
	background: #fff;
	border: 4px solid transparent;
	border-radius: 20px;
	box-shadow: 0 6px 0 rgba(0, 0, 0, .25);
	cursor: pointer;
}

.alr-choix-image svg { width: 100%; max-width: 9rem; height: auto; }
.alr-choix-image:hover { border-color: var(--kqa-band); }
.alr-choix-image.is-juste { border-color: var(--kqa-ok); background: #e9f7ef; animation: alr-saut .5s ease; }
.alr-choix-image.is-faux { border-color: var(--kqa-ko); animation: alr-secousse .4s ease; }

@keyframes alr-secousse { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@keyframes alr-saut { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } }

/* ---------- Syllabes ---------- */

.alr-syllabes { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

.alr-syllabe {
	display: flex; flex-direction: column; align-items: center; gap: .3rem;
	min-width: 6.5rem;
	padding: 1rem 1.2rem;
	background: #fff;
	border: 4px solid transparent;
	border-radius: 20px;
	box-shadow: 0 6px 0 rgba(0, 0, 0, .25);
	cursor: pointer;
}

.alr-syllabe:hover { border-color: var(--kqa-band); }
.alr-syllabe.is-juste { border-color: var(--kqa-ok); background: #e9f7ef; animation: alr-saut .5s ease; }
.alr-syllabe.is-faux { border-color: var(--kqa-ko); animation: alr-secousse .4s ease; }
.alr-taps { display: flex; gap: .3rem; }
.alr-taps i { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--kqa-c1); }
.alr-syllabe-nb { font-family: var(--kqa-display); font-size: 2rem; }

/* ---------- Écriture du mot ---------- */

.alr-ecriture { display: flex; flex-direction: column; align-items: center; gap: .8rem; width: 100%; }
.alr-outils { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.alr-modele { display: flex; gap: .3rem; justify-content: center; }
.alr-modele span { font-family: var(--kqa-display); font-size: 1.6rem; color: var(--kqa-band); }

.alr-cases { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }

.alr-case {
	display: grid; place-items: center;
	width: clamp(2.6rem, 8vw, 3.6rem);
	height: clamp(3.2rem, 9vw, 4.4rem);
	font-family: var(--kqa-display);
	font-size: clamp(1.6rem, 5vw, 2.4rem);
	color: var(--kqa-ink);
	background: #fff;
	border-bottom: 6px solid #c9d3d9;
	border-radius: 8px 8px 0 0;
}

.alr-case.is-active { border-bottom-color: var(--kqa-band); box-shadow: 0 0 0 4px rgba(244, 163, 0, .35); animation: alr-clignote 1.4s infinite; }
.alr-case.is-remplie { border-bottom-color: var(--kqa-ok); animation: alr-saut .4s ease; }
.alr-cases.is-fini .alr-case { border-bottom-color: var(--kqa-ok); background: #e9f7ef; }

@keyframes alr-clignote { 0%, 100% { box-shadow: 0 0 0 4px rgba(244, 163, 0, .35); } 50% { box-shadow: 0 0 0 10px rgba(244, 163, 0, .12); } }

.alr-clavier { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; max-width: 34rem; }

.alr-touche {
	width: clamp(3rem, 9vw, 4.2rem);
	height: clamp(3rem, 9vw, 4.2rem);
	font-family: var(--kqa-display);
	font-size: clamp(1.4rem, 4vw, 2rem);
	color: var(--kqa-ink);
	background: #fff;
	border: 3px solid var(--kqa-ink);
	border-radius: 14px;
	box-shadow: 0 5px 0 var(--kqa-ink);
	cursor: pointer;
}

.alr-touche:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--kqa-ink); }
.alr-touche.is-faux { background: #fdeced; border-color: var(--kqa-ko); animation: alr-secousse .4s ease; }
.alr-touche.is-indice { background: var(--kqa-band); animation: alr-pulse 1s infinite; }
.alr-touche[disabled] { opacity: .45; cursor: default; }

@keyframes alr-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ---------- Leçon ---------- */

.alr-sous-titre { font-family: var(--kqa-display); color: var(--kqa-band); font-size: 1.2rem; margin: 1.2rem 0 .5rem; }
.alr-syl-demo { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

.alr-syl {
	font-family: var(--kqa-display);
	font-size: clamp(1.4rem, 4vw, 2rem);
	letter-spacing: .06em;
	padding: .6rem 1.4rem;
	background: #fff;
	border: 3px solid var(--kqa-ink);
	border-radius: 14px;
	box-shadow: 0 5px 0 var(--kqa-ink);
	cursor: pointer;
}

.alr-syl.is-tout { background: var(--kqa-band); }
.alr-lettres { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .6rem; }

.alr-lettre-carte {
	display: flex; flex-direction: column; align-items: center; gap: .1rem;
	padding: .8rem .5rem;
	background: #fff;
	border: 3px solid transparent;
	border-radius: 16px;
	box-shadow: 0 5px 0 rgba(0, 0, 0, .25);
	cursor: pointer;
}

.alr-lettre-carte:hover { border-color: var(--kqa-band); }
.alr-lettre-grande { font-family: var(--kqa-display); font-size: 2.8rem; line-height: 1; }
.alr-lettre-son { font-family: var(--kqa-display); font-size: 1.1rem; color: var(--kqa-c0); }
.alr-lettre-repere { font-size: .8rem; color: var(--kqa-ink-soft); }

/* ---------- Réussite ---------- */

.alr-mot-gagne { font-family: var(--kqa-display); font-size: clamp(2rem, 7vw, 3.4rem); letter-spacing: .12em; color: #fff; margin: .2rem 0; }
.alr-etoiles-gagnees { display: flex; gap: .5rem; justify-content: center; margin: .4rem 0; }
.alr-badge { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--kqa-display); font-size: 1.3rem; color: var(--kqa-band); }
.alr-badge svg { width: 2rem; height: 2rem; }
.alr-btn b { display: inline-flex; align-items: center; gap: .45rem; }
.alr-btn-icone svg { width: 1.3rem; height: 1.3rem; display: block; }
.alr-coupe-gagnee { animation: kqa-drop .8s cubic-bezier(.3, 1.5, .5, 1) both; }
.alr-coupe { width: clamp(6rem, 20vw, 9rem); height: auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.alr-reussite .kqa-btn { min-width: 11rem; }

@container (max-width: 46rem) {
	.alr-themes, .alr-mots { grid-template-columns: repeat(2, 1fr); }
	.alr-entete .kqa-title { font-size: 1.3rem; }
	.alr-ecoute-mot { display: none; }
	.alr-ecoute.is-outil { min-width: 4.4rem; }
	.alr-ecoute.is-geant .alr-ecoute-mot, .alr-ecoute.is-grand .alr-ecoute-mot { display: inline; }
	.alr-lettres { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Petit bouton « à quoi sert ce bouton ? » ---------- */

.alr-groupe { position: relative; display: inline-flex; }
/* Le petit bouton déborde en haut à droite : on lui laisse la place dans les rangées. */
.alr-contact-actions .alr-groupe, .alr-ajout-actions .alr-groupe, .alr-outils .alr-groupe, .alr-bas .alr-groupe { margin: .5rem 1rem .2rem 0; }
.alr-groupe > .alr-theme, .alr-groupe > .alr-mot-carte, .alr-groupe > .alr-aide-choix { width: 100%; }
.alr-groupe.is-coin { display: block; }

.alr-mini-aide {
	position: absolute; top: -.4rem; right: -.4rem;
	width: 2.2rem; height: 2.2rem;
	display: grid; place-items: center;
	color: var(--kqa-sea);
	background: #fff;
	border: 2px solid var(--kqa-sea);
	border-radius: 50%;
	box-shadow: 0 2px 0 rgba(0, 0, 0, .3);
	cursor: pointer;
	z-index: 3;
}

.alr-mini-aide svg { width: 1.2rem; height: 1.2rem; }
.alr-mini-aide:hover { background: var(--kqa-band); }
.alr-groupe.is-coin .alr-mini-aide { top: .3rem; right: .3rem; }

/* ---------- Mots fermés (niveau) ---------- */

.alr-mot-carte.is-verrouille { opacity: .6; }
.alr-mot-carte.is-verrouille .alr-mot-image { filter: grayscale(1); }
.alr-verrou { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 2.8rem; color: var(--kqa-sea); }
.alr-verrou svg { width: 100%; height: auto; }
.alr-mot-carte { position: relative; }
.alr-mot-carte.is-secoue { animation: alr-secousse .4s ease; }

.alr-note-niveau {
	display: flex; align-items: center; gap: .4rem; justify-content: center;
	color: rgba(255, 255, 255, .85);
	background: rgba(255, 255, 255, .1);
	border-radius: 12px;
	padding: .5rem .9rem;
	margin: 0 auto .8rem;
	max-width: 32rem;
}

.alr-note-niveau svg { width: 1.2rem; height: 1.2rem; }

/* ---------- Mes mots ---------- */

.alr-theme.is-perso .alr-theme-image svg { width: clamp(4.5rem, 12vw, 6.5rem); }
.alr-mot-carte.is-ajout { border-style: dashed; border-color: #7fb4e3; }
.alr-mot-texte.is-petit { font-size: 1.1rem; }
.alr-mot-image img { width: clamp(5.5rem, 14vw, 8rem); height: clamp(5.5rem, 14vw, 8rem); object-fit: cover; border-radius: 12px; display: block; }

.alr-supprimer {
	position: absolute; bottom: .3rem; right: .3rem;
	width: 2.2rem; height: 2.2rem;
	display: grid; place-items: center;
	color: var(--kqa-ko);
	background: #fff;
	border: 2px solid var(--kqa-ko);
	border-radius: 50%;
	cursor: pointer;
	z-index: 3;
}

.alr-supprimer svg { width: 1.1rem; height: 1.1rem; }

.alr-ajout-zone { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.alr-photo { display: inline-block; cursor: pointer; position: relative; }

.alr-photo-vue {
	display: grid; place-items: center; gap: .3rem;
	width: clamp(9rem, 26vw, 12rem);
	height: clamp(9rem, 26vw, 12rem);
	background: #fff;
	border: 4px dashed #7fb4e3;
	border-radius: 20px;
	font-family: var(--kqa-display);
	color: var(--kqa-sea);
	overflow: hidden;
}

.alr-photo-vue img { width: 100%; height: 100%; object-fit: cover; }
.alr-photo-icone svg { width: 2.6rem; height: 2.6rem; }

.alr-saisie {
	width: min(20rem, 90vw);
	padding: .7rem 1rem;
	font-family: var(--kqa-display);
	font-size: clamp(1.6rem, 5vw, 2.4rem);
	letter-spacing: .12em;
	text-align: center;
	text-transform: uppercase;
	color: var(--kqa-ink);
	background: #fff;
	border: 4px solid var(--kqa-ink);
	border-radius: 14px;
}

.alr-decoupe { font-family: var(--kqa-display); font-size: 1.3rem; color: var(--kqa-band); letter-spacing: .08em; margin: 0; min-height: 1.6rem; }
.alr-ajout-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; align-items: center; }

/* ---------- Besoin d'un formateur ---------- */

.alr-bas { margin-top: 1.4rem; display: flex; justify-content: center; }

.alr-formateur-btn {
	display: inline-flex; align-items: center; gap: .6rem;
	min-height: 3.6rem;
	padding: .6rem 1.4rem;
	font-family: var(--kqa-display);
	font-size: 1.1rem;
	color: #fff;
	background: var(--kqa-c1);
	border: 3px solid #fff;
	border-radius: 999px;
	box-shadow: 0 5px 0 rgba(0, 0, 0, .35);
	cursor: pointer;
}

.alr-formateur-icone svg { width: 1.8rem; height: 1.8rem; display: block; }
.alr-choix-aide { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .9rem; }

.alr-aide-choix {
	display: flex; flex-direction: column; align-items: center; gap: .2rem;
	padding: 1.2rem 1rem;
	background: #fff;
	border: 4px solid transparent;
	border-radius: 20px;
	box-shadow: 0 6px 0 rgba(0, 0, 0, .25);
	cursor: pointer;
}

.alr-aide-choix.is-on { border-color: var(--kqa-band); background: #fff8ec; }
.alr-aide-icone { color: var(--kqa-c1); }
.alr-aide-icone svg { width: 2.6rem; height: 2.6rem; }
.alr-aide-choix b { font-family: var(--kqa-display); font-size: 1.15rem; }
.alr-aide-choix small { color: var(--kqa-ink-soft); }

.alr-contact { margin-top: 1.2rem; }
.alr-contact-nom { font-family: var(--kqa-display); color: #fff; font-size: 1.2rem; margin: 0 0 .5rem; }
.alr-contact-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; align-items: center; }

.alr-contact-lien {
	display: inline-flex; align-items: center; gap: .5rem;
	min-height: 3.4rem;
	padding: .5rem 1.2rem;
	font-family: var(--kqa-display);
	color: var(--kqa-ink);
	text-decoration: none;
	background: #fff;
	border: 3px solid var(--kqa-ink);
	border-radius: 999px;
	box-shadow: 0 5px 0 var(--kqa-ink);
}

.alr-contact-lien svg { width: 1.5rem; height: 1.5rem; }
.alr-contact-etat { color: var(--kqa-band); font-family: var(--kqa-display); min-height: 1.4rem; }
.alr-contact-mot { color: rgba(255, 255, 255, .85); max-width: 40ch; margin: .6rem auto 0; }

/* ---------- Dire le mot ---------- */

.alr-dire { display: flex; flex-direction: column; align-items: center; gap: .3rem; }

.alr-micro {
	display: inline-flex; align-items: center; gap: .6rem;
	min-height: 3.8rem;
	padding: .6rem 1.6rem;
	font-family: var(--kqa-display);
	font-size: 1.15rem;
	color: #fff;
	background: var(--kqa-c3);
	border: 3px solid #fff;
	border-radius: 999px;
	box-shadow: 0 5px 0 rgba(0, 0, 0, .35);
	cursor: pointer;
}

.alr-micro-icone svg { width: 1.8rem; height: 1.8rem; display: block; }
.alr-micro.is-ecoute { background: var(--kqa-c0); animation: alr-ecoute 1s infinite alternate; }
.alr-dire-etat { color: rgba(255, 255, 255, .9); min-height: 1.4rem; margin: 0; max-width: 34ch; }

@keyframes alr-ecoute { from { box-shadow: 0 5px 0 rgba(0, 0, 0, .35), 0 0 0 0 rgba(214, 40, 57, .5); } to { box-shadow: 0 5px 0 rgba(0, 0, 0, .35), 0 0 0 14px rgba(214, 40, 57, 0); } }