/* ----- Deux formats de PDF (US Letter / A4), boutons l'un sous l'autre ----- */
.print-formats{
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
}

.description .print-formats{
align-items:flex-start;
}

.print-formats .new-bt-print{
display:inline-block;
margin:auto!important;
box-sizing:border-box;
padding:10px 20px;
text-align:center;
white-space:normal;
color:#fff!important;
font-size: 16px;
font-weight:600;
background:#0376db;
border:2px solid #0376db;   /* même bordure que le bouton A4 : les deux boutons ont la même hauteur */
border-radius:24px;
min-width:300px;
line-height:1.5;
}

.print-formats .bt-print-letter{
background:#fff;
border-color:#0376db;
color:#0376db!important;
}

.print-formats .new-bt-print:hover, .print-formats .new-bt-print:focus-visible{
text-decoration:none;
color:#fff!important;
background:#fe9d16;
border-color:#fe9d16;
}
.letters-grid-item a.pdf-shadow{display:block}
.letters-grid-item a.pdf-shadow img {
    box-shadow: 0 0 5px 2px rgb(172 188 204 / .4);
}

/* ----- Grille des grandes lettres : 4 par ligne, 2 à 600px et moins ----- */
.letters-grid{
display:flex;
flex-wrap:wrap;
gap:24px 20px;
margin:20px 0 30px;
}
.letters-grid-item{
flex:0 0 calc((100% - 3 * 20px) / 4);   /* 4 cartes + 3 espaces de 20px */
min-width:0;
box-sizing:border-box;
}
.letters-grid-card{
display:flex;
flex-direction:column;
height:100%;
text-align:center;
}
.letters-grid-image img{
display:block;
width:100%;
height:auto;
}
.letters-grid-title{
display:block;
font-size:16px;
font-weight:700;
padding:8px 0 5px;
}
/* Boutons sur toute la largeur de la carte, alignés en bas */
.letters-grid .print-formats{
align-items:stretch;
margin-top:auto;
}
.letters-grid .print-formats .new-bt-print{
display:block;
width:100%;
padding:5px 0!important;
min-width:0!important;
}

@media (max-width:600px){
.letters-grid{gap:20px 12px}
.letters-grid-item{flex-basis:calc((100% - 12px) / 2)}   /* 2 cartes + 1 espace de 12px */
.letters-grid .print-formats .new-bt-print{font-size:13px;padding:9px 6px}
}

/* ----- tableau alphabet interactif ----- */
.alphabet-table{width:100%;max-width:640px;border-collapse:collapse;margin:16px 0;font-family:Arial,sans-serif}
.alphabet-table th,.alphabet-table td{padding:6px 8px;border-bottom:1px solid #e3e3e3;text-align:center}
.alphabet-table th{background:#f2f6fb;font-size:14px}
.alphabet-table td.letter{font-size:24px;font-weight:bold}
.alphabet-table tbody tr:hover,.alphabet-table tr.is-playing{background:#fef0de}
.alphabet-table tr.vowel td.letter{color:#dd10b3}
.alphabet-table .play-letter{border:0;background:#0376db;cursor:pointer;padding:5px;color:#fff;line-height:0;border-radius:50%}
.alphabet-table .play-letter:hover,.alphabet-table .play-letter:focus-visible,.alphabet-table .play-letter.is-on{background:#fe9d16}
.alphabet-table .play-letter svg{width:22px;height:22px;fill:currentColor}
.play-letter .icon-pause,.play-letter.is-on .icon-play{display:none}
.play-letter.is-on .icon-pause{display:inline}
.alphabet-table{scroll-margin-top:20px} /* à augmenter si votre site a un menu fixe en haut */
.alphabet-player{display:flex;align-items:center;gap:10px;margin:10px 0 20px;padding:8px 0;background:#fff}
.alphabet-player.is-active{position:sticky;bottom:0;z-index:5;box-shadow:0 -6px 8px -6px rgba(0,0,0,.25)}
.play-all{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:24px;padding:10px 30px 10px 20px;background:#0376db;color:#fff;font-size:16px;font-weight:bold;cursor:pointer}
.play-all:hover,.play-all:focus-visible,.play-all.is-on{background:#fe9d16}
.play-all svg{width:22px;height:22px;fill:currentColor}
.play-all .icon-pause,.play-all.is-on .icon-play{display:none}
.play-all.is-on .icon-pause{display:inline}
.restart-all{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#0376db;color:#fff;cursor:pointer}
.restart-all:hover:not(:disabled),.restart-all:focus-visible{background:#fe9d16}
.restart-all:disabled{background:#c9d6e3;cursor:default}
.restart-all svg{width:22px;height:22px;fill:currentColor}
@media (max-width:480px){
  .alphabet-table th,.alphabet-table td{padding:15px 3px;font-size:13px}
  .alphabet-table td.letter{font-size:24px}
  .alphabet-table .play-letter{padding:7px}
 }
/* ----- Volume ----- */
.alphabet-volume-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;max-width:640px;margin:16px 0 -8px;scroll-margin-top:20px} /* même largeur que le tableau */
.volume-control{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.volume-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:none;color:#0376db;cursor:pointer}
.volume-toggle:hover,.volume-toggle:focus-visible{background:#fef0de;color:#fe9d16}
.volume-toggle svg{width:24px;height:24px;fill:currentColor}
.volume-toggle .icon-muted,.volume-toggle.is-muted .icon-volume{display:none}
.volume-toggle.is-muted .icon-muted{display:inline}
.volume-slider{width:100px;accent-color:#0376db;cursor:pointer}
@media (max-width:480px){.volume-slider{width:70px}}
/* ----- Choix de l'accent (page EN) ----- */
.voice-switch{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px}
.voice-switch-label{font-weight:bold;font-size:14px}
.voice-option{border:2px solid #0376db;border-radius:18px;padding:5px 12px;background:#fff;color:#0376db;font-size:14px;font-weight:bold;cursor:pointer}
.voice-option:hover,.voice-option:focus-visible{border-color:#fe9d16;color:#fe9d16}
.voice-option.is-selected{background:#0376db;color:#fff}
.voice-option.is-selected:hover,.voice-option.is-selected:focus-visible{background:#fe9d16;border-color:#fe9d16;color:#fff}