/* ============================================================
   Fiches techniques « partage d'expérience » (handball).
   S'ajoute au style.css global : ne redéfinit ni les couleurs ni la
   typographie, seulement ce qui est propre aux fiches (schémas, étapes,
   encarts, sélecteur de niveau). Tout suit les variables du site, donc
   le mode sombre marche sans règle en plus.
   ============================================================ */

/* Quelques teintes que le site global n'a pas : le texte posé SUR un aplat d'accent, le rouge des
   avertissements, et les lignes du gymnase (basket en rouge, handball en jaune, comme sur un vrai
   parquet). Toutes doivent suivre le thème — en sombre, du blanc sur l'accent clair, un rouge vif
   sur fond gris ou un jaune foncé tombent sous le seuil de lisibilité. */
/* Le jaune du handball a deux nuances en mode clair : le trait garde une vraie teinte jaune (un
   trait n'a besoin que de 3:1), l'étiquette écrite est un cran plus foncée pour rester lisible
   (4.5:1). En mode sombre, la même couleur convient aux deux. */
/* Les traces de pas disent de quel pied on se sert : vert pour le pied fort — celui qui porte la
   passe et le tir —, orangé pour le pied ballon. C'est la convention du glossaire, entrée « pied
   fort, pied ballon » ; elle ne sert à rien si elle change d'une fiche à l'autre. */
:root {
    --sur-accent: #ffffff; --danger: #dc2626;
    --ligne-basket: #dc2626; --ligne-hand: #b8860b; --ligne-hand-texte: #a16207;
    --trace-fort: #16a34a; --trace-ballon: #ea580c;
}
/* Les couleurs du thème sombre s'appliquent dans deux cas : le système le demande et le lecteur
   n'a pas forcé le clair, ou le lecteur a choisi le sombre avec le bouton de l'en-tête. D'où les
   deux écritures, ici et à chaque couleur qui change de thème dans ce fichier — si vous retouchez
   l'une, retouchez sa jumelle juste en dessous. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --sur-accent: #0e1116; --danger: #fca5a5;
        --ligne-basket: #f87171; --ligne-hand: #facc15; --ligne-hand-texte: #facc15;
        --trace-fort: #4ade80; --trace-ballon: #fb923c;
    }
}
:root[data-theme="dark"] {
    --sur-accent: #0e1116; --danger: #fca5a5;
    --ligne-basket: #f87171; --ligne-hand: #facc15; --ligne-hand-texte: #facc15;
    --trace-fort: #4ade80; --trace-ballon: #fb923c;
}
/* Les deux mots du glossaire qui nomment les traces : ils portent leur couleur, sinon la
   convention ne s'apprend pas. */
.pied-fort { color: var(--trace-fort); }
.pied-ballon { color: var(--trace-ballon); }
.ligne-basket { stroke: var(--ligne-basket); }
.ligne-hand { stroke: var(--ligne-hand); }
.etiq-basket { fill: var(--ligne-basket); }
.etiq-hand { fill: var(--ligne-hand-texte); }
/* La paire de lignes qui ne sert pas au niveau choisi s'estompe, sans disparaître : on voit d'un
   coup d'œil de combien la course s'allonge d'un niveau à l'autre. */
#anim-terrain .ligne-basket, #anim-terrain .ligne-hand,
#anim-terrain .etiq-basket, #anim-terrain .etiq-hand { transition: opacity .25s linear; }
#anim-terrain[data-lignes="handball"] .ligne-basket,
#anim-terrain[data-lignes="handball"] .etiq-basket,
#anim-terrain[data-lignes="basket"] .ligne-hand,
#anim-terrain[data-lignes="basket"] .etiq-hand { opacity: .3; }
/* Même code couleur dans le texte : un petit trait devant « lignes de basket / de handball ». */
.trait { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; }
.trait.basket { background: var(--ligne-basket); }
.trait.hand { background: var(--ligne-hand); }

/* Le code couleur des catégories. La fiche vaut pour les U11 comme pour les U13 : ce qui ne
   concerne que les plus grands porte une pastille violette, et les encarts qui leur sont réservés
   un liseré de la même couleur. La pastille porte le mot « U13 », donc l'information ne tient pas
   qu'à la couleur — elle se lit aussi à l'impression en noir et blanc. */
:root { --u13: #6d28d9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --u13: #c4b5fd; } }
:root[data-theme="dark"] { --u13: #c4b5fd; }
.badge-age {
    display: inline-block; margin-right: .4rem; padding: .02rem .5rem; border-radius: 999px;
    border: 1px solid var(--accent); color: var(--accent);
    font-size: .8rem; font-weight: 700; letter-spacing: .02em; vertical-align: .08em;
}
.badge-age.u13 { color: var(--u13); border-color: var(--u13); }
.encart.u13 { border-left-color: var(--u13); }
.encart.u13 h3 { color: var(--u13); }
/* Dans les duels, l'attaquant garde le bleu du site et le défenseur passe en rose : c'est la
   convention des schémas de handball, où l'adversaire n'est jamais de la même couleur que nous.
   L'entraîneur, lui, est de la couleur du texte, et les gardiens restent gris. */
:root { --adverse: #be123c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --adverse: #fda4af; } }
:root[data-theme="dark"] { --adverse: #fda4af; }

/* Le plot posé sur la zone, dans la variante U13 : orange, comme tous les plots de gymnase. Il est
   dessiné en triangle pour qu'on ne le confonde pas avec un ballon, qui est rond et de la même
   famille de couleurs. */
:root { --plot: #ea580c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --plot: #fb923c; } }
:root[data-theme="dark"] { --plot: #fb923c; }
.note-ages { margin: .6rem 0 0; color: var(--muted); font-size: .9rem; }
/* Une énumération courte — les impacts imposés au tir : des puces, pas des cartes. */
.impacts { margin: .5rem 0; padding-left: 1.2rem; display: grid; gap: .25rem; }

/* Le sigle PAC · TIL · DUEL. Dans le titre il est en couleur ; dans le sous-titre, ce sont les
   lettres qui le composent qui prennent la même couleur — plutôt que des majuscules au milieu des
   mots, qui hacheraient la lecture. Le lien entre les deux se fait donc à l'œil. */
.sigle { color: var(--accent); }
h1 .sigle { white-space: nowrap; }
.sous-titre { margin: -.35rem 0 .7rem; color: var(--muted); font-size: 1.08rem; }

/* Bandeau de tête d'une fiche : titre, chapô et « étiquettes » (durée, âge…). */
.fiche-tete { border-bottom: 1px solid var(--border); padding-bottom: 1.25rem; margin-bottom: .5rem; }
.etiquettes { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.etiquettes li {
    background: var(--card); border: 1px solid var(--border); border-radius: 999px;
    padding: .25rem .8rem; font-size: .88rem; color: var(--muted);
}
.etiquettes li b { color: var(--fg); font-weight: 600; }

/* Sommaire : les étapes du protocole, cliquables. */
.sommaire { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; counter-reset: etape; }
.sommaire a {
    display: block; padding: .8rem 1rem; background: var(--card);
    border: 1px solid var(--border); border-left: 3px solid var(--accent);
    border-radius: var(--radius); color: var(--fg); text-decoration: none;
}
.sommaire a:hover { border-color: var(--accent); text-decoration: none; }
.sommaire a span { display: block; color: var(--muted); font-size: .9rem; }
/* « À venir » : signalé par le liseré gris et l'italique, sans opacité — celle-ci délavait aussi
   le texte et le rendait illisible. */
.sommaire a.a-venir { border-left-color: var(--border); }
.sommaire a.a-venir span { font-style: italic; }

/* Une étape = un titre numéroté, un schéma, puis le détail. */
.etape { margin-top: 3rem; scroll-margin-top: 1rem; }
.etape > h2 { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .25rem; }
.etape > h2 .num {
    flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background: var(--accent); color: var(--sur-accent); font-size: 1rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Cadre d'un schéma : le dessin occupe toute la largeur, la légende dessous. */
/* Les animations ne sont pas des encarts de texte parmi d'autres : elles sont le cœur de la fiche.
   Leur panneau est donc teinté de l'accent du site — un fond légèrement bleuté, qui les détache du
   gris de toutes les autres tuiles sans crier. Le mélange suit le thème : il reste clair en clair,
   sombre en sombre. */
.schema {
    margin: 1.25rem 0; padding: 1rem; border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent) 9%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
}
.schema svg { display: block; width: 100%; height: auto; }
/* Sur téléphone, un schéma réduit à la largeur de l'écran devient illisible : il garde une
   largeur minimale et défile dans son cadre (le reste de la fiche, lui, ne défile pas). */
.cadre-svg { overflow-x: auto; }
.cadre-svg svg { min-width: 700px; }
.cadre-svg::after { content: "↔ faites glisser le schéma"; display: none; color: var(--muted); font-size: .82rem; }
@media (max-width: 640px) { .cadre-svg::after { display: block; margin-top: .3rem; } }
/* Sur un téléphone, les terrains animés tiennent dans la largeur : plus de défilement latéral.
   Le dessin rétrécit alors d'un facteur deux et demi — les joueurs et les ballons restent lisibles,
   mais pas les écritures : on les grossit d'autant. Les bulles grossissent un peu moins, pour ne
   pas aller couvrir le jeu. Le schéma du glossaire, lui, garde son défilement. */
@media (max-width: 760px) {
    /* Le cadre du schéma mord sur les marges de la page : trente pixels de plus pour le dessin,
       c'est un dixième de terrain gagné. */
    .schema { margin-left: -.75rem; margin-right: -.75rem; padding: .6rem; border-radius: 0; }
    .cadre-svg.terrain { overflow-x: visible; }
    .cadre-svg.terrain svg { min-width: 0; }
    .cadre-svg.terrain::after { display: none; }
}
/* Sous cette largeur, le dessin descend à moins de la moitié de sa taille : les joueurs et les
   ballons restent lisibles, les écritures non. On les grossit donc d'autant, en gardant les bulles
   un cran plus petites — elles ne doivent pas aller couvrir le jeu (vérifié à cette taille-là). */
@media (max-width: 480px) {
    .cadre-svg.terrain svg text { font-size: 36px; }
    .cadre-svg.terrain svg [id$="-bulles"] text { font-size: 27px; }
}
.legende { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .8rem 0 0; padding: 0; list-style: none; color: var(--muted); font-size: .88rem; }
.legende li { display: flex; align-items: center; gap: .4rem; }
.legende svg { width: 34px; height: 14px; }
.legende .pastille { width: 13px; height: 13px; border-radius: 50%; display: inline-block; }

/* Titre réservé aux lecteurs d'écran (le tableau a déjà son titre visible au-dessus). */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Bouton « animer » : la balle parcourt le trajet. */
.animer {
    font: inherit; font-size: .9rem; cursor: pointer; padding: .35rem .8rem; border-radius: 999px;
    background: var(--bg); color: var(--fg); border: 1px solid var(--border); margin-left: auto;
}
.animer:hover { border-color: var(--accent); }
/* Les animations sont pilotées par bonhommes.js, image par image : plus de règle @keyframes. */
.schema-entete { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; color: var(--muted); font-size: .9rem; }

/* Commandes de l'animation : le niveau de l'exercice, et la vitesse de lecture. */
.commandes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; margin-bottom: .6rem; color: var(--muted); font-size: .9rem; }
.niveaux { display: flex; align-items: center; gap: .35rem; }
.niveaux button {
    font: inherit; cursor: pointer; min-width: 2.2rem; padding: .25rem .55rem; border-radius: 999px;
    background: var(--bg); color: var(--fg); border: 1px solid var(--border);
}
.niveaux button:hover { border-color: var(--accent); }
.niveaux button[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); font-weight: 700; }
/* Une variante réservée aux U13 s'allume en violet, comme les encarts qui leur sont réservés : le
   code couleur des catégories vaut aussi dans les commandes des animations. */
.niveaux button.u13:hover { border-color: var(--u13); }
.niveaux button.u13[aria-pressed="true"] { background: var(--u13); border-color: var(--u13); }
.vitesse { display: flex; align-items: center; gap: .45rem; }
.vitesse input { width: 130px; accent-color: var(--accent); }
.vitesse output { min-width: 3.4rem; font-variant-numeric: tabular-nums; }
/* Le titre du niveau choisi, juste au-dessus du dessin. C'est un intitulé, pas un paragraphe : la
   boîte se serre autour de lui. Le détail de chaque niveau est dans le tableau, sous l'animation. */
.niveau-texte {
    display: inline-block; margin: 0 0 .8rem; padding: .35rem .8rem; font-size: .95rem;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
}
.niveau-texte .trait { margin: 0 .15rem; }

/* Règles d'or : les points à répéter aux enfants. */
.regles { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .6rem; }
.regles li { display: flex; gap: .7rem; padding: .7rem .9rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.regles li .icone { flex: none; font-size: 1.2rem; line-height: 1.4; }

/* Deux routes à l'intérieur d'une règle d'or : l'émoji tient lieu de puce, comme pour la règle
   elle-même, et la boîte reste celle de la règle — ce ne sont pas deux consignes de plus. */
.routes { list-style: none; margin: .45rem 0 0; padding: 0; display: grid; gap: .4rem; }
/* Sans fond ni cadre : la règle d'or est déjà dans sa carte, et une carte dans une carte se lit
   comme une consigne de plus. (Il faut le dire : ces puces-ci sont aussi des `.regles li`.) */
.routes li { display: flex; gap: .55rem; padding: 0; background: none; border: 0; }
/* La puce : grise et discrète, elle marque le retrait sans peser dans la phrase. */
.routes li span { flex: none; color: var(--muted); }

/* Encarts : à retenir (gris), à éviter (rouge), à venir (effacé), U13 (violet). Pas de bleu : sur
   tout le site, le liseré bleu est réservé à ce qui se clique, et un encart ne mène nulle part. */
.encart { border-left: 3px solid var(--muted); background: var(--card); border-radius: var(--radius); padding: .9rem 1.1rem; margin: 1.25rem 0; }
.encart h3 { margin: 0 0 .35rem; font-size: 1rem; }
.encart p:last-child { margin-bottom: 0; }
.encart.attention { border-left-color: var(--danger); }
.encart.attention h3 { color: var(--danger); }
.encart.suite { border-left-color: var(--border); color: var(--muted); }

/* Tableau des niveaux : lisible sur téléphone (il défile plutôt que d'écraser). */
.tableau-defilant { overflow-x: auto; margin: 1rem 0; }
table.niveaux-table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: .95rem; }
table.niveaux-table th, table.niveaux-table td { border: 1px solid var(--border); padding: .5rem .7rem; text-align: left; vertical-align: top; }
table.niveaux-table thead th { background: var(--card); }
table.niveaux-table tbody th { font-weight: 600; white-space: nowrap; }
/* La ligne du niveau choisi dans l'animation. Un fond et un liseré en ombre portée : ni l'un ni
   l'autre ne prend de place, donc le tableau ne bouge pas d'un niveau à l'autre. */
table.niveaux-table tbody tr.actif > * { background: var(--card); }
table.niveaux-table tbody tr.actif th { box-shadow: inset 3px 0 0 var(--accent); color: var(--accent); }

/* Glossaire : les mots que l'on répète aux enfants. Il ne vit plus dans la page mais dans une
   fenêtre (<dialog>, voir glossaire.js), qu'on ouvre d'un mot souligné ou d'un bouton — depuis
   cette fiche comme depuis n'importe quelle autre page. */
.mot {
    font: inherit; color: var(--accent); background: none; border: 0; padding: 0;
    cursor: pointer; border-bottom: 1px dotted currentColor;
}
.mot:hover, .mot:focus-visible { border-bottom-style: solid; }
/* La ligne qui liste les mots, sous le sommaire : un index, pas un paragraphe. */
.mots-glossaire { margin: 1rem 0 0; color: var(--muted); font-size: .92rem; }
.mots-glossaire .mot { margin: 0 .1rem; }

/* La tuile du glossaire ouvre une fenêtre, elle ne mène pas ailleurs : c'est un bouton, auquel on
   rend l'aspect d'une tuile. */
button.card { font: inherit; text-align: left; width: 100%; cursor: pointer; }

.pop {
    width: min(44rem, calc(100vw - 2rem)); max-height: min(85vh, 46rem); padding: 0;
    background: var(--card); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--radius);
}
.pop[open] { display: flex; flex-direction: column; }
.pop::backdrop { background: rgba(0, 0, 0, .55); }
.pop-tete {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .8rem 1.1rem; border-bottom: 1px solid var(--border);
}
.pop-tete h2 { margin: 0; font-size: 1.25rem; }
.pop-fermer {
    flex: none; font: inherit; line-height: 1; cursor: pointer; padding: .3rem .6rem;
    border-radius: 999px; background: var(--bg); color: var(--fg); border: 1px solid var(--border);
}
.pop-fermer:hover { border-color: var(--accent); }
.pop-corps { overflow-y: auto; padding: .4rem 1.1rem 1.1rem; }
.pop-chapo { color: var(--muted); margin: .6rem 0 .2rem; }
/* Une entrée, et celle qu'on est venu voir : un liseré et un fond, sans décaler le texte. */
.pop .entree {
    padding: .5rem .8rem; margin: .5rem 0; border-radius: var(--radius);
    border-left: 3px solid transparent; outline: none;
}
.pop .entree.vise { background: var(--bg); border-left-color: var(--accent); }
.pop .entree h3 { margin: 0 0 .3rem; color: var(--accent); font-size: 1.05rem; }
.pop .entree p { margin: .3rem 0; }
.pop .entree .schema { margin: .8rem 0 .2rem; }
.pop .entree .cadre-svg svg { min-width: 440px; }

/* Impression : la fiche doit tenir sur du papier, sans navigation ni boutons. */
@media print {
    header.site, footer.site, .animer, .sommaire, .commandes { display: none !important; }
    /* Sur papier il n'y a pas de fenêtre à ouvrir : le glossaire se déplie à la fin de la feuille,
       et les mots cliquables redeviennent du texte. */
    dialog#glossaire { display: block; position: static; max-height: none; width: auto; border: 0; break-before: page; }
    dialog#glossaire .pop-fermer { display: none; }
    dialog#glossaire .pop-corps { overflow: visible; }
    .mot { color: inherit; border-bottom: 0; }
    .mots-glossaire { display: none; }
    .schema, .regles li, .encart { break-inside: avoid; }
    /* Les aplats ne s'impriment pas par défaut : le numéro d'étape deviendrait blanc sur blanc. */
    .etape > h2 .num { background: none !important; color: #000; border: 2px solid #000; }
}