/* Styles limités à l'abécédaire. Le cadre et la navigation gardent leurs feuilles. */
#tp-abc-page { grid-column:1 / span 6; grid-row:6; order:8; min-width:0; padding:0 14px; }
#tp-abc-page .tp-abc-layout { min-width:0; max-width:1160px; margin:0 auto; }
#tp-abecedaire, #tp-abecedaire * { box-sizing:border-box; }
#tp-abecedaire { align-self:start; max-width:800px; min-width:0; margin:12px auto 28px; padding:24px; border:1px solid #d5e1ec; border-radius:22px; background:#fffdf6; color:#193b59; font:16px/1.45 Arial,Helvetica,sans-serif; text-align:center; box-shadow:0 8px 22px rgba(43,24,24,.14); }
#tp-abecedaire h1 { margin:0 0 8px; padding:0; color:#193b59; font:bold 28px/1.2 'Trebuchet MS',Arial,sans-serif; text-align:center; }
#tp-abecedaire .tp-abc-consigne { margin:0 0 22px; padding:0; color:#193b59; font:17px/1.45 Arial,sans-serif; text-align:center; }
#tp-abecedaire .tp-abc-contenu { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:22px; }
#tp-abecedaire .tp-abc-lettres { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; }
#tp-abecedaire [data-abc-choix] { min-width:44px; min-height:48px; padding:4px 0; border:2px solid #8bc7cf; border-radius:10px; background:#eef9fa; color:#174866; font:bold 26px/1 Arial,sans-serif; cursor:pointer; touch-action:manipulation; }
#tp-abecedaire [data-abc-choix]:hover { border-color:#24558a; background:#dff3f5; }
#tp-abecedaire [data-abc-choix][aria-pressed="true"] { border-color:#24558a; background:#24558a; color:#fff; }
#tp-abecedaire [data-abc-choix]:focus-visible { outline:3px solid #a44e00; outline-offset:3px; }
#tp-abecedaire figure { min-width:0; margin:0; padding:10px 6px; border:1px solid #dce6ec; border-radius:16px; background:#fff; }
#tp-abecedaire .tp-abc-image { display:flex; align-items:center; justify-content:center; width:100%; height:236px; }
#tp-abecedaire [data-abc-image] { display:block; max-width:100%; max-height:226px; width:auto; height:auto; object-fit:contain; }
#tp-abecedaire figcaption { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:78px; gap:4px; }
#tp-abecedaire [data-abc-lettre] { min-height:28px; color:#25658a; font:bold 24px/1.15 Arial,sans-serif; }
#tp-abecedaire [data-abc-mot] { display:block; color:#193b59; font:bold 25px/1.3 Arial,sans-serif; overflow-wrap:anywhere; }
#tp-abecedaire .tp-abc-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
/* Fiches : lettres typographiques, liens conservés, grille autonome sans script. */
#tp-abc-page .tp-abc-fiches, #tp-abc-page .tp-abc-fiches * { box-sizing:border-box; }
#tp-abc-page .tp-abc-fiches { margin-top:30px; }
#tp-abc-page .tp-abc-fiches .tp-abc-fiches-liste { display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:12px; margin:18px 0 0; padding:0; list-style:none; }
#tp-abc-page .tp-abc-fiches-liste > li { min-width:0; margin:0; padding:0; }
#tp-abc-page .tp-abc-fiches .tp-abc-fiche { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:112px; padding:14px 8px; border:1px solid #c7d8dd; border-radius:10px; background:#fff; color:#193b59; font:600 14px/1.4 Arial,Helvetica,sans-serif; text-align:center; text-decoration:none; }
#tp-abc-page .tp-abc-fiche-lettre { color:#174866; font:bold 48px/1 'Trebuchet MS',Arial,sans-serif; }
#tp-abc-page .tp-abc-fiches .tp-abc-fiche:hover,
#tp-abc-page .tp-abc-fiches .tp-abc-fiche:focus-visible { border-color:#52711f; background:#eaf4d9; color:#193b59; box-shadow:0 0 0 2px #52711f; }
#tp-abc-page .tp-abc-fiche:hover .tp-abc-fiche-libelle,
#tp-abc-page .tp-abc-fiche:focus-visible .tp-abc-fiche-libelle { text-decoration:underline; text-underline-offset:3px; }
#tp-abc-page .tp-abc-fiches .tp-abc-fiche:focus-visible { outline:3px solid #184e9b; outline-offset:4px; }
@media (prefers-reduced-motion:no-preference) {
    #tp-abc-page .tp-abc-fiche { transition:transform 160ms ease,background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease; }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
    #tp-abc-page .tp-abc-fiche:hover { transform:translateY(-4px); }
}
#tp-abc-page .tp-abc-ad-vertical { display:none; width:160px; text-align:center; }
#tp-abc-page .tp-abc-ad-label { display:block; margin-bottom:8px; font:12px/1.4 Arial,sans-serif; color:#ffffcc; }
#tp-abc-page .tp-abc-ad-vertical .pubVerticaleGauche { width:160px; height:600px; margin:0; }
.tp-abc-host .tp-abc-factice { box-sizing:border-box; display:grid; place-content:center; padding:8px; border:1px solid #c7cbbc; background:#f3f1e9; color:#535b4e; font:13px/1.5 Arial,sans-serif; text-align:center; }
.tp-abc-host .tp-abc-header-ad { display:inline-block; width:728px; height:90px; }
.tp-abc-host .tp-abc-header-factice { min-height:90px; }
#tp-abc-page .tp-abc-ad-bas { margin:150px 0 24px; padding:12px 0; background:#f3f1e9; border:1px solid #c7cbbc; text-align:center; }
#tp-abc-page .tp-abc-ad-bas .tp-abc-ad-label { color:#535b4e; }
#tp-abc-page .tp-abc-ad-bas .tp-abc-factice { min-height:250px; border:0; }
@media (min-width:1200px) {
    #tp-abc-page .tp-abc-layout { display:grid; grid-template-columns:160px minmax(0,1fr); column-gap:150px; }
    #tp-abc-page .tp-abc-ad-vertical { display:block; margin-top:12px; }
    #tp-abecedaire { width:100%; }
}
@media (max-width:900px) {
    .tp-abc-host #affichage728x90, .tp-abc-host #affichage728x90 .pubHorizontaleHeader { min-width:0; width:100%; }
    .tp-abc-host .tp-abc-header-ad { width:100%; }
}
@media (max-width:680px) {
    #tp-abc-page { padding:0 8px; }
    #tp-abecedaire { padding:18px 10px; border-radius:17px; }
    #tp-abecedaire h1 { font-size:25px; }
    #tp-abecedaire .tp-abc-consigne { font-size:16px; margin-bottom:18px; }
    #tp-abecedaire .tp-abc-contenu { grid-template-columns:minmax(0,1fr); gap:16px; }
    #tp-abecedaire .tp-abc-lettres { gap:4px; }
    #tp-abecedaire figure { max-width:380px; width:100%; margin:0 auto; }
}
@media (min-width:390px) and (max-width:680px) {
    #tp-abecedaire .tp-abc-lettres { grid-template-columns:repeat(7,minmax(0,1fr)); }
}

#tp-abc-page > .tp-francais-fil { margin-left:6px; margin-right:6px; }
@media (max-width:680px) { #tp-abc-page > .tp-francais-fil { margin-left:12px; margin-right:12px; } }