/* Finition technique (19/10/2026) — accessibilité commune à l'appli (/app/) et au code (/parcours-code/).
   Chargée après la charte. Ne change pas l'apparence : focus visible au clavier, cibles tactiles ≥ 44 px,
   animations réduites si le téléphone le demande, option « Texte plus grand » (réglage Couleur). */

/* l'en-tête commun est ajouté par charte.js juste après le chargement : on lui garde sa place
   (sinon toute la page saute de 63 px au premier affichage) */
body:not(.gp-avec-dock):not(.gp-sans-barre)::before{content:"";display:block;height:63px;background:var(--gp-barre,#0D0D0D)}
@media (max-width:380px){ body:not(.gp-avec-dock):not(.gp-sans-barre)::before{height:57px} }
/* code : l'en-tête commun (63-70 px) ET la barre « ← Thèmes » (51-57 px) arrivent après le premier affichage ;
   on garde leur place jusqu'à ce que les deux soient là (page Examen : la page sautait de 60 px, indice 0,93) */
html.gp-code body::before{content:"";display:block;background:var(--gp-barre,#0D0D0D)}
html.gp-code body:not(.gp-avec-dock):not(:has(>.gp-ariane))::before{height:120px}
html.gp-code body.gp-avec-dock:not(:has(>.gp-ariane))::before{height:53px}
html.gp-code body:not(.gp-avec-dock):has(>.gp-ariane)::before{height:66px}
html.gp-code body.gp-avec-dock:has(>.gp-ariane)::before{display:none}
/* le grand titre propre à chaque page du code est masqué par la barre « Où suis-je » une fois chargée : masqué dès le départ */
html.gp-code body>header:not(.gp-charte){display:none}

/* focus visible au clavier / lecteur d'écran (jamais au doigt) */
:focus-visible{outline:3px solid var(--gp-accent,#F59A45)!important;outline-offset:2px!important;border-radius:6px}
:focus:not(:focus-visible){outline:none}
.gp-saut{position:absolute;left:8px;top:-60px;z-index:100;padding:12px 16px;border-radius:12px;background:var(--gp-carte,#1A1A1A);color:var(--gp-texte,#fff);font:700 16px var(--gp-police,system-ui)}
.gp-saut:focus{top:8px}

/* cibles tactiles : 44 px minimum */
.gp-charte button,.gp-charte a,.gp-dock a{min-height:44px}
button.voix,.prenom-btn,a.statut{min-height:44px}
details>summary{min-height:44px;display:flex;align-items:center;gap:6px;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
details>summary::marker{content:""}
input[type=checkbox],input[type=radio]{width:22px;height:22px;accent-color:var(--gp-orange,#E87511);flex:0 0 auto}
label:has(>input[type=checkbox]),label:has(>input[type=radio]){min-height:44px;display:inline-flex;align-items:center;gap:8px}

/* image ou dessin manquant : un cadre neutre au lieu d'une icône cassée */
img.gp-manque{background:var(--gp-carte-2,#222) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 16l5-5 4 4 3-3 6 6'/%3E%3Ccircle cx='15.5' cy='9.5' r='1.5'/%3E%3C/svg%3E") center/48px no-repeat;min-height:120px;object-position:-9999px -9999px}

/* bandeau « pas de connexion » */
.gp-horsligne{position:fixed;left:10px;right:10px;bottom:calc(86px + env(safe-area-inset-bottom));z-index:60;max-width:600px;margin:0 auto;
  display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--gp-carte,#1A1A1A);color:var(--gp-texte,#fff);
  border:1.5px solid var(--gp-orange,#E87511);font:600 15px/1.35 var(--gp-police,system-ui);box-shadow:0 6px 24px rgb(0 0 0 / .35)}
.gp-horsligne svg{flex:0 0 22px;width:22px;height:22px;color:var(--gp-accent,#F59A45)}
.gp-horsligne button{margin-inline-start:auto;min-width:44px;min-height:44px;border-radius:10px;border:1px solid var(--gp-ligne,#333);background:none;color:inherit;font:700 18px var(--gp-police,system-ui)}

/* option « Texte plus grand » (feuille Couleur de l'écran) */
html[data-texte="grand"] body{zoom:1.15}
.gp-texte-opt{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;margin-top:14px;padding:10px 14px;border-radius:14px;
  border:2px solid var(--gp-ligne,#333);background:var(--gp-carte-2,#222);color:var(--gp-texte,#fff);font:700 16px var(--gp-police,system-ui);text-align:start;cursor:pointer}
.gp-texte-opt b{flex:0 0 52px;height:40px;display:grid;place-items:center;border-radius:10px;border:1px solid rgb(128 128 128 / .5);font:800 20px/1 var(--gp-titres,var(--gp-police,system-ui))}
.gp-texte-opt small{display:block;font:500 13.5px var(--gp-police,system-ui);color:var(--gp-texte-3,#aaa);margin-top:2px}
.gp-texte-opt i{margin-inline-start:auto;flex:0 0 46px;height:28px;border-radius:99px;background:var(--gp-ligne,#444);position:relative;transition:background .2s}
.gp-texte-opt i:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s}
.gp-texte-opt[aria-checked="true"]{border-color:var(--gp-orange,#E87511)}
.gp-texte-opt[aria-checked="true"] i{background:var(--gp-orange,#E87511)}
.gp-texte-opt[aria-checked="true"] i:after{transform:translateX(18px)}
[dir=rtl] .gp-texte-opt[aria-checked="true"] i:after{transform:translateX(-18px)}
[dir=rtl] .gp-texte-opt i:after{left:auto;right:3px}

/* le téléphone demande moins de mouvement : on coupe les effets de l'interface
   (les dessins animés du cours, en SVG, restent lisibles : l'élève les lance lui-même) */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *:not(svg):not(svg *),*:not(svg):not(svg *)::before,*:not(svg):not(svg *)::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* appli : place gardée pour les blocs remplis par le script (sinon la page saute au premier affichage) */
#salut:empty{min-height:28px}
#statut:empty,#prenom-btn:empty{min-height:44px}
#tuiles.gp-tuiles:empty{min-height:449px}
@media (max-width:370px){ #tuiles.gp-tuiles:empty{min-height:509px} }
#mon-permis:empty{min-height:44px}
#onglets.onglets:empty{min-height:58px}