/*
 * Espace ADULTE — authentification, espace parent, administration.
 *
 * Le socle (jetons de couleur, typographie, boutons, animations, extinction
 * `prefers-reduced-motion`) vit dans `theme.css`, chargée AVANT celle-ci sur
 * toutes les pages. Ce fichier n'y ajoute que des composants, et il ne DÉFINIT
 * aucune couleur : chaque valeur passe par un jeton `var(--…)`. Un `#hex` écrit
 * ici est un défaut à corriger — c'est ce qui rend un changement de palette
 * possible en une ligne.
 *
 * Le style du site public vit dans `site.css`, celui du parcours enfant dans
 * `kid.css` / `stars.css` / `gauge.css` / `trophies.css`.
 *
 * Cet écran-ci est celui du PARENT : cibles ≥ 44 px (le seuil enfant de 60 px
 * est celui de `kid.css`), une colonne sur téléphone, deux à partir de 768 px,
 * aucun défilement horizontal à 320 px — d'où `min-width: 0` sur les zones
 * souples et `flex-wrap` partout.
 */

/* ==========================================================================
   Surfaces
   ========================================================================== */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.card--highlight {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
}

/* Carte d'authentification : centrée, étroite, avec la marque au-dessus. Un
   parent y arrive souvent depuis un courriel, sur un téléphone. */
.auth-card {
    width: min(26rem, 100%);
    margin: 1rem auto 0;
}

.auth-intro {
    text-align: center;
    margin: 1.5rem 0 1.25rem;
}

.auth-intro h1 {
    margin-bottom: 0.25rem;
}

.auth-links {
    text-align: center;
}

/* « Mot de passe oublié ? », « Retour » : seuls dans leur paragraphe, ce sont
   les SORTIES de l'écran, pas des liens au fil d'une phrase — 22 px mesurés le
   2026/08/20. `.back-link` portait déjà ce plancher ; ces deux-là y échappaient
   faute de classe. Cibler la CLASSE et jamais `p > a:only-child` : `:only-child`
   ignore les nœuds de texte, donc un lien entouré de prose est « enfant unique »
   pour CSS et hériterait d'un `inline-flex` de 44 px EN PLEINE PHRASE. Mesuré. */
.auth-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* ==========================================================================
   Formulaires
   ========================================================================== */

label {
    display: block;
    margin: 0.9rem 0 0.3rem;
    font-weight: 700;
}

/* La LIGNE ENTIÈRE est la cible, pas la case de 13 px — et 44 px est le minimum
   confortable au doigt. `.suggest__item` le posait déjà pour les suggestions ;
   les NEUF autres `label.checkbox` du dépôt (« Active » d'une étape, « Jalon
   actif », « se souvenir de moi ») mesuraient 27,2 px, sur des écrans qu'un
   parent remplit debout, souvent d'une main. Mesuré le 2026/08/20, au premier
   audit navigateur des écrans MEMBRES — aucun test PHP ne voit un pixel. */
label.checkbox {
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 0.75rem 0.85rem;
    border: 2px solid var(--line);
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 1rem;
    background: var(--surface);
    color: var(--ink);
    transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

input[type="checkbox"],
input[type="radio"] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--accent);
}

/* Les boutons nus des formulaires existants partagent les jetons de `.btn` :
   même famille, même relief à l'appui, aucune divergence à entretenir. */
button {
    margin-top: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.35rem;
    min-height: 48px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--on-accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-press);
    transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease,
        background-color var(--t-fast) ease;
}

button:hover {
    background: var(--accent-deep);
}

button:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 rgba(74, 47, 168, 0.22);
}

form.inline {
    display: inline;
}

/* Un formulaire en ligne ne fait que RETIRER la marge du bouton : il ne le
   dimensionne plus.

   `form.inline button` (spécificité 0-1-2) battait `.btn-icon` (0-1-0) et
   ramenait les flèches de réordonnancement à **31 px** de haut — mesuré sur le
   tableau de bord, où trente-deux cibles passaient ainsi sous le seuil de
   44 px. Une flèche de 31 px sur un téléphone se rate une fois sur trois, et
   c'est l'écran qu'un parent remplit debout, souvent d'une main. */
form.inline button {
    margin-top: 0;
}

/* Deux gestes côte à côte dont un seul crée un compte. `flex-wrap` pour que le
   refus ne sorte pas de l'écran à 320 px. */
.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0.75rem 0 0.5rem;
}

/* Le geste destructif est LISIBLE mais pas mis en avant : « Refuser » n'a pas
   à avoir le même poids visuel que « Créer la famille et inviter ». */
.button--quiet {
    background: transparent;
    color: var(--error);
    border: 2px solid var(--error);
    box-shadow: none;
}

.button--quiet:hover {
    background: var(--coral-soft);
    color: var(--error);
}

/* Le lien de retour est la seule sortie de plusieurs écrans, et il faisait
   22 px de haut : sous le seuil tactile de 44 px, donc raté une fois sur trois
   au pouce. Le rembourrage vertical n'en change pas l'apparence — il agrandit
   la CIBLE, ce qu'aucune capture d'écran ne montre. */
/* Un geste destructif isolé au bas d'une carte : à droite, à l'écart du reste,
   et jamais mêlé au contenu qu'il supprimerait. */
.card__destructive {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
}

.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.7rem 1.35rem;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow-press);
    transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease,
        background-color var(--t-fast) ease;
}

.button-link:hover {
    background: var(--accent-deep);
    color: var(--on-accent);
    transform: translateY(-2px);
}

.button-link:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 rgba(74, 47, 168, 0.22);
}

.btn-icon {
    margin-top: 0;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-size: 1.1rem;
    box-shadow: none;
}

.btn-icon:hover {
    background: var(--accent);
    color: var(--on-accent);
}

.btn-icon--danger {
    color: var(--error);
    background: var(--coral-soft);
}

.btn-icon--danger:hover {
    background: var(--error);
    color: var(--on-accent);
}

.btn-small {
    margin-top: 0;
    min-height: 44px;
    padding: 0.4rem 0.9rem;
    font-size: 0.9rem;
    box-shadow: none;
}

code {
    display: inline-block;
    word-break: break-all;
    background: var(--accent-soft);
    color: var(--accent-deep);
    padding: 0.4rem 0.5rem;
    border-radius: var(--r-sm);
    font-size: 0.9rem;
}

/* ==========================================================================
   Messages
   ========================================================================== */

.errors {
    color: var(--error);
    background: var(--coral-soft);
    border: 2px solid var(--error);
    border-radius: var(--r-md);
    padding: 0.8rem 0.8rem 0.8rem 2rem;
}

.flash {
    border-radius: var(--r-md);
    padding: 0.85rem 1.1rem;
    margin-bottom: 1rem;
    font-weight: 600;
    animation: mr-rise var(--t-mid) ease-out both;
}

.flash--success {
    color: var(--success);
    background: var(--mint-soft);
    border: 2px solid var(--mint);
}

.flash--error {
    color: var(--error);
    background: var(--coral-soft);
    border: 2px solid var(--error);
}

.muted {
    color: var(--muted);
    font-size: 0.92rem;
}

/* ==========================================================================
   Listes de l'espace parent
   ========================================================================== */

.stack {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.empty {
    color: var(--muted);
    background: var(--surface);
    border: 2px dashed var(--line);
    border-radius: var(--r-lg);
    padding: 1.5rem 1.25rem;
    text-align: center;
}

/* ┌─ UNE CARTE, PAS UNE LIGNE DE TABLEAU ──────────────────────────────────┐
   │ En `flex-wrap`, poignée, avatar, corps et gestes se disputaient la même │
   │ ligne : à 390 px les quatre liens d'un enfant s'enroulaient sous        │
   │ l'avatar et les boutons ↑ ↓ ✕ finissaient collés au coin. La grille    │
   │ nomme ce qui va où — identité sur la première ligne, gestes sur la      │
   │ seconde — et se comporte pareil à 320 px et à 1280.                     │
   └────────────────────────────────────────────────────────────────────────┘ */
.row,
.step {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: start;
    gap: 0.6rem 0.75rem;
    margin-bottom: 0;
    padding: 0.9rem;
    transition: box-shadow var(--t-fast) ease, border-color var(--t-fast) ease;
}

/* L'étape n'a pas d'avatar : poignée + formulaire, et c'est tout. */
.step {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.row:hover,
.step:hover {
    box-shadow: var(--shadow-md);
}

.row--muted {
    opacity: 0.6;
}

/* Le menu membre fait de la RANGÉE ENTIÈRE un lien (`<a class="card row">`) :
   la cible tactile est alors la carte, pas le titre de 17 px. Sans ces deux
   lignes le titre serait souligné et violet, ce qui donnerait à la carte l'air
   d'un paragraphe contenant un lien plutôt que d'un bouton. */
a.row {
    color: var(--ink);
    text-decoration: none;
}

a.row:hover {
    border-color: var(--accent);
}

.row__handle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--r-sm);
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-size: 1.3rem;
    cursor: grab;
    /* Sans cela, un glissement au doigt fait défiler la page au lieu de
       déplacer l'élément. */
    touch-action: none;
    user-select: none;
}

/* La puce d'identité d'un enfant au tableau de bord (ADR-038). Elle CONSOMME
   les jetons de décor, comme `.kid-tile` de l'écran 1 : sans classe
   `kid-decor--`, ils valent ceux de `:root` et la puce est simplement blanche.

   ⚠️ Elle ne reçoit AUCUN calque de scène : à 3 rem, une planète serait une
   tache. C'est la même décision que pour l'aperçu du sélecteur. */
.row__avatar {
    flex: 0 0 auto;
    font-size: 2.2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: var(--r-pill);
    border: 2px solid var(--decor-bord);
    background: var(--decor-tuile);
}

.row__body {
    flex: 1 1 12rem;
    min-width: 0;
    display: grid;
    gap: 0.2rem;
}

.row__title {
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Les quatre gestes d'un enfant étaient des liens soulignés de 24 px de haut.
   En PASTILLES, ils gagnent la cible de 44 px, se distinguent du texte de la
   carte, et cessent de ressembler à de la prose contenant des liens. */
.row__links {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.92rem;
}

.row__links a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 44px;
    padding: 0.35rem 0.8rem;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-weight: 600;
    text-decoration: none;
}

.row__links a:hover {
    background: var(--accent);
    color: var(--on-accent);
}

/* Les gestes de gestion — réordonner, supprimer — occupent leur PROPRE ligne,
   alignés à droite : ils ne sont pas ce qu'on vient faire ici. */
.row__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

.step__form {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Sur téléphone le libellé occupe SA PROPRE ligne. Partagée avec le sélecteur
   de pictogramme, il ne restait que ~142 px de champ à 375 px, et « Mettre son
   manteau » s'y affichait « Mettre son mant » — un parent ne peut pas relire ce
   qu'il vient d'écrire. */
.step__form input[type="text"] {
    flex: 1 1 100%;
    min-width: 0;
}

@media (min-width: 600px) {
    .step__form input[type="text"] {
        flex: 1 1 8rem;
    }
}

.step__form label.checkbox {
    margin: 0;
    white-space: nowrap;
}

/* État de glissement : élévation + opacité réduite, pour que le doigt qui
   masque l'élément ne fasse pas perdre le fil. */
.is-dragging {
    opacity: 0.5;
    box-shadow: var(--shadow-lg);
    transform: scale(1.02);
}

/* ==========================================================================
   Sélecteur d'emoji
   ========================================================================== */

.emoji-picker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.emoji-picker__face {
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.3rem 0.7rem;
    background: var(--accent-soft);
    color: var(--ink);
    box-shadow: none;
}

.emoji-picker__face:hover {
    background: var(--accent-soft);
    color: var(--ink);
}

.emoji-picker__glyph {
    font-size: 1.8rem;
    line-height: 1;
}

.emoji-picker__hint {
    font-size: 0.8rem;
    color: var(--muted);
    font-weight: 400;
}

.emoji-dialog {
    width: min(28rem, 92vw);
    max-height: 80vh;
    overflow-y: auto;
    border: 0;
    border-radius: var(--r-lg);
    padding: 1rem;
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
}

.emoji-dialog::backdrop {
    background: rgba(36, 31, 61, 0.5);
}

.emoji-dialog__group {
    margin: 0.9rem 0 0.4rem;
    font-size: 0.85rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 0.35rem;
}

.emoji-grid__item {
    margin-top: 0;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: var(--r-sm);
    background: var(--bg-deep);
    font-size: 1.6rem;
    line-height: 1;
    box-shadow: none;
}

.emoji-grid__item:hover {
    background: var(--accent-soft);
    transform: scale(1.12);
}

.emoji-dialog__close {
    width: 100%;
}

/* Rangée de teintes de peau. L'écran est celui du parent, mais c'est l'enfant
   qui pointe : cibles de 56 px et le libellé sous l'échantillon, pour qu'un
   choix reste possible sans savoir lire. */
.tones {
    margin: 0.75rem 0 0;
    padding: 0.6rem;
    border: 2px solid var(--line);
    border-radius: var(--r-md);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tones legend {
    padding: 0 0.3rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.tones__choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-width: 56px;
    padding: 0.35rem 0.2rem;
    border: 2px solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
    text-align: center;
}

/* `:has()` n'est pas indispensable : sans lui le bouton radio reste visible et
   dit lequel est coché. Le cadre n'est qu'un renfort visuel. */
.tones__choice:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.tones__choice input {
    margin: 0;
}

.tones__sample {
    font-size: 1.8rem;
    line-height: 1;
}

.tones__label {
    font-size: 0.7rem;
    color: var(--muted);
}

/* ==========================================================================
   Sélecteur de DÉCOR (ADR-035)
   Des radios, aucun JavaScript : l'aperçu EST la pastille, qui porte la classe
   `kid-decor--<slug>` et consomme donc `--decor-tuile` / `--decor-bord`
   exactement comme la tuile de l'écran 1. Rien à repeindre, donc rien qui
   puisse tomber en panne — et le parent voit la vraie couleur, pas une
   approximation recopiée à la main.
   ========================================================================== */

.themes {
    margin: 0.75rem 0 0;
    padding: 0.6rem;
    border: 2px solid var(--line);
    border-radius: var(--r-md);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.themes legend {
    padding: 0 0.3rem;
    font-size: 0.85rem;
    color: var(--muted);
}

/* Plancher de cible tactile : 44 px comme partout dans l'espace parent — un
   parent remplit cet écran debout, souvent d'une main. */
.themes__choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-width: 72px;
    min-height: 44px;
    padding: 0.35rem 0.3rem;
    border: 2px solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
    text-align: center;
}

/* `:has()` n'est pas indispensable : sans lui la radio reste visible et dit
   lequel est coché. Le cadre n'est qu'un renfort. */
.themes__choice:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.themes__choice input {
    margin: 0;
}

/* La pastille porte `kid-decor--<slug>` : c'est le décor lui-même qui la peint.

   🔴 ELLE MONTRE LE CIEL, PAS LA TUILE — ET C'EST UNE CORRECTION DE MENSONGE
   (ADR-037). Sous ADR-036 elle peignait `--decor-tuile`, un jeton resté
   volontairement CLAIR pour que les panneaux de l'enfant gardent leurs
   contrastes. Conséquence mesurée : le parent choisissait « Espace » sur une
   pastille bleu PÂLE et son enfant recevait un ciel `#140f33`, bleu NUIT. Un
   aperçu qui ne montre pas ce qu'on choisit est pire qu'une absence d'aperçu :
   il donne une certitude fausse, et c'est le parent qui découvre l'écart sur
   la tablette de son enfant.

   La pastille reprend donc les DEUX extrémités de la rampe du ciel, celles-là
   mêmes que la garde AA mesure. Elle ne reçoit toujours AUCUN calque d'objets :
   à 2,4 rem une planète serait une tache (Non-buts d'ADR-035, conservé).

   `background:` en raccourci reste SANS DANGER ici, la pastille n'ayant pas de
   `background-image` à effacer. */
.themes__sample {
    font-size: 1.6rem;
    line-height: 1;
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--decor-bord);
    border-radius: var(--r-pill);
    background: linear-gradient(180deg, var(--decor-ciel-1) 0%, var(--decor-ciel-4) 100%);
}

.themes__label {
    font-size: 0.7rem;
    color: var(--muted);
}

/* ==========================================================================
   Suggestions d'étapes (PRP-06)
   Une liste à cocher au-dessus du formulaire libre. Aucune fonctionnalité n'y
   dépend de JavaScript : ce sont des cases et un bouton d'envoi.
   ========================================================================== */

.suggest__group {
    font-size: 0.95rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 1.1rem 0 0.35rem;
}

.suggest__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* La ligne ENTIÈRE est la cible tactile, pas la case de 13 px : le `<label>`
   englobe l'emoji et le libellé, et les 44 px de hauteur sont le minimum
   confortable au doigt sur un téléphone — un parent remplit cet écran debout,
   souvent d'une main. */
.suggest__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.25rem 0.5rem;
    border-radius: var(--r-sm);
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}

.suggest__item:hover {
    background: var(--accent-soft);
}

.suggest__emoji {
    font-size: 1.5rem;
    line-height: 1;
}

/* Le libellé occupe la place restante : sans cela, la mention « déjà dans la
   routine » se colle au texte au lieu de s'aligner à droite de la ligne, et la
   liste perd la colonne qui la rend lisible d'un coup d'œil. Une règle absente
   ne se voit dans AUCUNE assertion sur le HTML — `StyleCoverageTest` est ce
   qui a nommé cette classe comme orpheline. */
.suggest__label {
    flex: 1;
}

/* Déjà dans la routine : la case est `disabled`, donc ni cochable ni soumise.
   L'estomper sans la retirer garde la liste stable d'une visite à l'autre —
   le parent retrouve la suggestion là où il l'avait vue. */
.suggest__item--present {
    color: var(--muted);
    cursor: default;
}

.suggest__item--present:hover {
    background: none;
}

.suggest__present {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--muted);
}

/* ==========================================================================
   « Appliquer à tous » (PRP-09) — copier cette routine chez la fratrie
   Une case par enfant actif, PRÉ-COCHÉE : le geste demandé est « à tous », et
   décocher est l'exception. Aucune couleur n'est DÉFINIE ici — ADR-027 réserve
   la définition d'une couleur à `theme.css` ; on n'utilise que ses jetons.
   ========================================================================== */

/* La carte se détache des deux formulaires qu'elle suit : c'est le seul geste de
   l'écran qui écrit chez QUELQU'UN D'AUTRE, et il ne doit pas se confondre avec
   « ajouter une étape » d'un simple coup d'œil. */
.apply-all {
    border-top: 3px solid var(--line);
    margin-top: 2rem;
}

.apply-all__list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* La LIGNE entière est la cible tactile, pas la case de 13 px — même raison que
   `.suggest__item` : un parent remplit cet écran debout, souvent d'une main. Les
   44 px sont un minimum, et ils se mesurent en NAVIGATEUR (`bin/audit-ui.py`),
   jamais dans une assertion PHP. */
.apply-all__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.35rem 0.75rem;
    margin: 0;
    border: 2px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    font-weight: 400;
    cursor: pointer;
    transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}

.apply-all__item:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* `:has()` plutôt qu'une classe posée par du JavaScript : l'écran parent n'a
   aucun script obligatoire, et un enfant coché doit se distinguer d'un enfant
   décoché même sans une ligne de JS. */
.apply-all__item:has(input:checked) {
    border-color: var(--accent);
}

.apply-all__emoji {
    font-size: 1.5rem;
    line-height: 1;
}

.apply-all__name {
    font-weight: 700;
}

/* Le bouton dit ce qui va ARRIVER, donc son libellé est long : il doit pouvoir
   revenir à la ligne sur un téléphone plutôt que déborder de la carte. */
.apply-all__submit {
    max-width: 100%;
    white-space: normal;
}

/* ==========================================================================
   Bouton ⚙️ de l'écran 1 — le seul chemin vers le monde des adultes
   Petit et discret pour qu'un enfant ne le touche pas par accident, mais une
   cible tactile réelle de 44 px pour qu'un parent le trouve du premier coup.
   ========================================================================== */

/*
 * ⚠️ `z-index` INDISPENSABLE, et il ne se devine PAS à la lecture.
 *
 * Cette roue est un FLOAT, et un float est RECOUVERT par la boîte du bloc qui
 * le suit — seules les *lignes de texte* de ce bloc se décalent, jamais sa
 * boîte. Tant que le `<h1 class="kid-title">` de `views/app/children.php` est
 * resté un bloc ordinaire, la roue se peignait au-dessus et tout allait bien.
 *
 * PRP-08 a donné au titre `animation: mr-rise … both` : le mode `both` laisse
 * un `transform` appliqué EN PERMANENCE, ce qui crée un contexte d'empilement
 * et fait passer le titre DEVANT la roue. Mesuré le 2026/08/21 — roue à y=20
 * sur 44 px, titre à y=28 sur toute la largeur : `elementFromPoint` au CENTRE
 * de la roue rendait `H1.kid-title`, et seuls les 8 px du haut répondaient
 * encore. D'où « on clique et il ne se passe rien » plutôt qu'un lien mort,
 * symptôme qui envoie chercher la panne du côté de la route ou de la session.
 *
 * `position: relative` SEUL ne suffit pas : les deux éléments sont alors des
 * contextes d'empilement de même rang, et le titre gagne par ordre d'arbre
 * (mesuré). Il faut le `z-index`.
 *
 * `prefers-reduced-motion` n'y change RIEN : `theme.css` ramène la durée à
 * 0,001 ms, mais le `transform` de remplissage — donc le contexte d'empilement
 * — demeure. Ne pas conclure que la règle est inutile là-bas.
 *
 * La régression est désormais gardée mécaniquement par la sonde « cible
 * RECOUVERTE » de `bin/audit-ui.py`, qui vérifie en navigateur réel que le
 * centre de chaque cible est bien elle-même. Aucun test PHPUnit ne peut voir
 * ça : le HTML est parfaitement correct dans les deux cas.
 */
.kid-gear {
    position: relative;
    z-index: 1;
    float: right;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    opacity: 0.45;
    font-size: 1.2rem;
    text-decoration: none;
    transition: opacity var(--t-fast) ease, transform var(--t-fast) ease;
}

.kid-gear:hover,
.kid-gear:focus {
    opacity: 1;
    transform: rotate(45deg);
}

@media (min-width: 768px) {
    .stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Les étapes restent sur une colonne : leur formulaire est large et une
       routine se lit de haut en bas, comme l'enfant la vivra. */
    .stack:has(.step) {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- L'entrée vers la file d'approbation (ADR-041) ------------------------- */

/*
 * 🔴 ELLE VIT DANS `app.css` ET NON DANS `parent.css`, ET C'EST MESURÉ.
 * `parent.css` n'est chargée que par `HistoryController` et `RewardController`
 * (`Controller::PARENT_STYLES`) : le TABLEAU DE BORD ne la charge PAS. Écrite
 * là-bas, cette règle n'atteignait jamais le navigateur — le lien rendait
 * **22 px** au lieu de 44, mesuré par `bin/audit-ui.py` le 2026-08-30.
 *
 * ⚠️ `StyleCoverageTest` NE PEUT PAS voir ce défaut : il constate qu'une règle
 * EXISTE quelque part, jamais que la feuille qui la porte est CHARGÉE sur
 * l'écran qui nomme la classe. C'est le défaut des 22 classes de PRP-08 d'un
 * cran plus bas — ici la règle existe, et personne ne la lit.
 *
 * Cible posée PAR CLASSE et jamais par `p > a:only-child` : `:only-child`
 * ignore les nœuds de TEXTE, donc cette forme matcherait aussi un lien au fil
 * d'une phrase.
 */
.approvals-entry {
    margin: 0 0 1rem;
}

.approvals-entry a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    max-width: 100%;
    padding: 0.5rem 0.9rem;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.approvals-entry__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    padding: 0 0.4rem;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.9rem;
    font-weight: 800;
}