/* MES REPÈRES — habillage ======================= Aucune valeur en dur : tout vient de `tokens.css`. La couleur d'accent est celle de la rubrique de la page (`--accent`, posée sur par le gabarit), avec le doré en repli comme partout ailleurs. Mobile d'abord. Toutes les cibles tactiles font au moins 44 px de haut, y compris les petits boutons de statut : ces contrôles servent surtout au pouce, sur un téléphone, pendant une lecture. */ .reperes-annonce { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── La barre posée sous le chapô d'un article, ou sur une fiche Kit ── */ .reperes-mount { margin: var(--pas-5) 0; } .reperes-barre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pas-2); padding: var(--pas-3); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--rayon); } .repere-bouton, .repere-statut, .repere-retirer, .reperes-action { font-family: var(--sans); font-size: 0.9rem; line-height: 1.2; min-height: 44px; padding: 0 var(--pas-3); border-radius: var(--rayon-pilule); border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; transition: background var(--duree-courte) var(--courbe), border-color var(--duree-courte) var(--courbe), color var(--duree-courte) var(--courbe); } .repere-bouton { font-weight: 600; letter-spacing: 0.01em; } .repere-bouton:hover, .repere-statut:hover, .reperes-action:hover, .repere-retirer:hover { border-color: var(--accent, var(--gold)); } /* Enregistré : l'aplat profond, pas une couleur pâle. Le contraste franc est la signature du site — on ne signale pas un état par une nuance timide. */ .repere-bouton.est-actif { background: var(--plum); border-color: var(--plum); color: var(--paper); } .repere-statuts { display: flex; flex-wrap: wrap; gap: var(--pas-1); } .repere-statut { font-size: 0.82rem; padding: 0 var(--pas-2); } .repere-statut.est-actif { background: var(--accent, var(--gold)); border-color: var(--accent, var(--gold)); color: var(--paper); } .reperes-lien { margin-left: auto; font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; } .reperes-lien:hover { color: var(--accent, var(--gold)); } .reperes-indispo { font-family: var(--sans); font-size: 0.88rem; color: var(--ink-soft); margin: 0; } /* ── La page /mes-reperes/ ───────────────────────────────────────────── */ .reperes-filtres { display: flex; flex-wrap: wrap; gap: var(--pas-2); margin-bottom: var(--pas-5); } .reperes-filtre { font-family: var(--sans); font-size: 0.9rem; min-height: 44px; padding: 0 var(--pas-3); display: inline-flex; align-items: center; gap: var(--pas-1); border: 1px solid var(--line); border-radius: var(--rayon-pilule); background: var(--paper); color: var(--ink); cursor: pointer; transition: background var(--duree-courte) var(--courbe), border-color var(--duree-courte) var(--courbe); } .reperes-filtre.est-actif { background: var(--plum); border-color: var(--plum); color: var(--paper); } .filtre-compteur { font-variant-numeric: tabular-nums; opacity: 0.7; } .reperes-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pas-2); } .repere-item { display: flex; align-items: center; gap: var(--pas-3); padding: var(--pas-3); background: var(--paper); border: 1px solid var(--line); border-radius: var(--rayon); } .repere-item__texte { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pas-2); flex: 1; min-width: 0; } .repere-item__titre { font-family: var(--serif); font-size: 1.12rem; color: var(--ink); text-decoration: none; flex-basis: 100%; } .repere-item__titre:hover { color: var(--accent, var(--gold)); } .repere-type, .repere-badge { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--rayon-pilule); background: var(--paper-2); color: var(--ink-soft); } .repere-type--kit { background: var(--olive); color: var(--paper); } .repere-badge--en-cours { background: var(--gold); color: var(--paper); } .repere-badge--termine { background: var(--sauge); color: var(--paper); } .repere-retirer { flex-shrink: 0; font-size: 0.82rem; color: var(--ink-soft); } .repere-retirer:hover { color: var(--bordeaux); border-color: var(--bordeaux); } .reperes-vide { font-family: var(--sans); color: var(--ink-soft); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--rayon); padding: var(--pas-5); margin: 0; } .reperes-vide a { color: var(--bordeaux); } .reperes-actions { display: flex; flex-wrap: wrap; gap: var(--pas-2); margin-top: var(--pas-6); padding-top: var(--pas-5); border-top: 1px solid var(--line); } .reperes-action--danger:hover { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--paper); } /* ── Accessibilité ───────────────────────────────────────────────────── */ .repere-bouton:focus-visible, .repere-statut:focus-visible, .repere-retirer:focus-visible, .reperes-action:focus-visible, .reperes-filtre:focus-visible, .reperes-lien:focus-visible, .repere-item__titre:focus-visible { outline: 2px solid var(--accent, var(--gold)); outline-offset: 2px; } /* `tokens.css` met déjà les durées à 0 sous `prefers-reduced-motion`. On coupe ici la transition elle-même, pour les navigateurs qui ignorent la variable. */ @media (prefers-reduced-motion: reduce) { .repere-bouton, .repere-statut, .repere-retirer, .reperes-action, .reperes-filtre { transition: none; } } /* ── Écran large ─────────────────────────────────────────────────────── */ @media (min-width: 48rem) { .repere-item__titre { flex-basis: auto; order: -1; } .repere-item__texte { align-items: center; } }