/* l'attribut hidden ne pese rien face a un display:flex ou grid declare ici */

.dictee_bouton {
gap:12px;
flex-shrink:0
}

.dictee_point {
display:block;
width:10px;
height:10px;
background:var(--v_encre);
border-radius:50%;
opacity:.85;
flex-shrink:0
}

[data-actif="oui"] .dictee_point {
background:#c8261a;
opacity:1;
animation:dictee_pulse 1.4s var(--v_courbe) infinite
}

@keyframes dictee_pulse {
0%   { opacity:1;   transform:scale(1) }
50%  { opacity:.35; transform:scale(.72) }
100% { opacity:1;   transform:scale(1) }
}

.dictee_compteurs {
display:flex;
align-items:baseline;
gap:14px;
font-variant-numeric:tabular-nums;
font-size:15px;
margin:0
}

.dictee_module .dictee_minuterie {
min-width:42px;
font-weight:700;
color:var(--v_orange)
}

.dictee_module .dictee_mots {
font-weight:600;
color:var(--v_texte2);
transition:color .25s var(--v_courbe)
}

.dictee_module .dictee_mots[data-plein="oui"] { color:var(--v_erreur) }

.dictee_tons {
border:0;
margin:0;
padding:0
}

.dictee_tons legend {
letter-spacing:.08em;
text-transform:uppercase;
font-size:12px;
font-weight:700;
color:var(--v_texte2);
margin:0;
padding:0 0 12px
}

.dictee_tonsGrille {
display:grid;
gap:1px;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
background:var(--v_ligne);
border:1px solid var(--v_ligne)
}

.dictee_ton {
display:flex;
flex-direction:column;
gap:5px;
background:var(--v_encre);
cursor:pointer;
transition:background-color .25s var(--v_courbe);
padding:16px 18px
}

.dictee_ton:hover { background:#262322 }

.dictee_ton:has(input:checked) { background:color-mix(in srgb,var(--v_orange) 14%,var(--v_encre)) }

.dictee_ton:has(input:focus-visible) {
outline:2px solid var(--v_orange);
outline-offset:-2px
}

.dictee_ton input {
position:absolute;
width:1px;
height:1px;
overflow:hidden;
opacity:0;
margin:-1px;
padding:0
}

.dictee_tonNom {
font-size:15px;
font-weight:700;
color:var(--v_texte)
}

.dictee_ton:has(input:checked) .dictee_tonNom { color:var(--v_orange) }

.dictee_tonResume {
font-size:13px;
color:var(--v_texte2);
line-height:1.45
}

.dictee_zone {
position:relative;
min-height:220px;
max-height:46vh;
overflow-y:auto;
background:var(--v_encre);
border:1px solid var(--v_ligneChamp);
padding:22px 24px
}

.dictee_zone .dictee_vide {
font-size:15px;
color:var(--v_texte2);
margin:0
}

.dictee_zone .dictee_texte {
font-size:18px;
color:var(--v_texte);
line-height:1.75;
margin:0
}

.dictee_phrase {
transition:color .35s var(--v_courbe),opacity .35s var(--v_courbe)
}

.dictee_phrase[data-etat="attente"] {
text-decoration:underline;
text-decoration-color:color-mix(in srgb,var(--v_orange) 70%,transparent);
text-decoration-style:wavy;
text-underline-offset:5px;
color:var(--v_texte2)
}

.dictee_phrase[data-etat="brut"] {
text-decoration:underline dotted color-mix(in srgb,var(--v_erreur) 60%,transparent);
text-underline-offset:5px;
color:var(--v_texte)
}

.dictee_phrase[data-etat="corrige"] { color:var(--v_texte) }

.dictee_chaud {
color:var(--v_texte2);
opacity:.75
}

.dictee_actions {
display:flex;
flex-wrap:wrap;
gap:12px
}

.dictee_traductions {
display:grid;
gap:1px;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
background:var(--v_ligne);
border:1px solid var(--v_ligne)
}

.dictee_traduction {
background:var(--v_encre);
padding:22px 24px
}

.dictee_traduction h3 {
display:flex;
align-items:center;
gap:8px;
letter-spacing:.14em;
text-transform:uppercase;
font-size:12px;
font-weight:700;
color:var(--v_orange);
margin:0 0 12px
}

.dictee_traduction p {
white-space:pre-wrap;
font-size:16px;
color:var(--v_texte);
line-height:1.7;
margin:0
}

/* Sur mobile le bouton doit rester colle au texte qu'il produit : la liste des tons
   passe en deux colonnes sans resume, et se replie sur le seul ton actif pendant la
   dictee. Le bouton se retrouve juste au-dessus de la zone de texte, dans le meme ecran. */

@media (max-width:760px) {
	.dictee_module { gap:18px }

	.dictee_module .demo_essais { order:1 }

	.dictee_tons { order:2 }

	.dictee_module .demo_barre { order:3 }

	.dictee_zone { order:4 }

	.dictee_actions { order:5 }

	.dictee_traductions { order:6 }

	.dictee_module .demo_notice { order:7 }

	.dictee_tonsGrille { grid-template-columns:repeat(2,minmax(0,1fr)) }

	.dictee_ton { padding:12px 14px }

	.dictee_tonResume { display:none }

	.dictee_module[data-actif="oui"] .dictee_tons legend { display:none }

	.dictee_module[data-actif="oui"] .dictee_ton:not(:has(input:checked)) { display:none }

	.dictee_module[data-actif="oui"] .dictee_tonsGrille { grid-template-columns:minmax(0,1fr) }

	.dictee_module[data-actif="oui"] .dictee_tonResume { display:block }
}

@media (max-width:560px) {
	.dictee_module .demo_barre { gap:12px }

	.dictee_module .demo_etat { width:100% }

	.dictee_bouton {
	width:100%;
	padding:15px 22px
	}

	.dictee_zone {
	min-height:170px;
	max-height:38vh;
	padding:16px 18px
	}

	.dictee_zone .dictee_texte { font-size:17px }

	.dictee_actions > .demo_btn { width:100% }
}

@media (prefers-reduced-motion:reduce) {
	[data-actif="oui"] .dictee_point { animation:none }
}