/* ==========================================================================
   MécaTips — direction artistique "brut / vécu"
   Fiche d'atelier : papier grainé, tampon encreur, annotation au marqueur.
   Contrainte non négociable (voir ROADMAP.md) : la lisibilité prime sur la
   patine. Rotation < 1°, grain jamais superposé au texte, annotation
   manuscrite réservée à de courts fragments — jamais le corps de texte.
   ========================================================================== */

@font-face {
    font-family: 'Big Shoulders';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/big-shoulders-700-PlzL55n.woff2") format('woff2');
}

@font-face {
    font-family: 'Big Shoulders';
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/big-shoulders-900-R-jycQM.woff2") format('woff2');
}

@font-face {
    font-family: 'Plex Sans';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/plex-sans-400-dCzU-sz.woff2") format('woff2');
}

@font-face {
    font-family: 'Plex Sans';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/plex-sans-500-mSIWrNY.woff2") format('woff2');
}

@font-face {
    font-family: 'Plex Sans';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/plex-sans-600-pA5FLX3.woff2") format('woff2');
}

@font-face {
    font-family: 'Plex Mono';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/plex-mono-400-78NWkmx.woff2") format('woff2');
}

@font-face {
    font-family: 'Plex Mono';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/plex-mono-500-QJNNIVc.woff2") format('woff2');
}

@font-face {
    font-family: 'Marker';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/caveat-600-kJk2uD6.woff2") format('woff2');
}

@font-face {
    font-family: 'Marker';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/caveat-700-CPkli8Z.woff2") format('woff2');
}

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
    /* Palette brute (ROADMAP.md — direction artistique) */
    --graphite: #1e2225;
    --paper: #f1ede4;
    --steel: #4b5359;
    --brass: #c8863a;
    --signal: #e3b23c;
    --patina: #8a9a8e;
    --rust: #a63d2d;

    /* Tokens sémantiques — thème clair (défaut) */
    --bg: var(--paper);
    --surface: #f8f3e7;
    --ink: #22201b;
    --muted: #6e6553;
    --accent: var(--brass);
    /* --link : brass foncé, distinct de --accent. Le brass standard en texte
       sur fond clair tombe à ~2.6:1 (échoue WCAG AA 4.5:1) — --accent reste
       réservé aux fonds/bordures où il est associé à du texte graphite,
       --link est la seule variante sûre en tant que couleur de texte. */
    --link: #8f5a1f;
    --border: rgba(34, 30, 22, 0.22);
    --shadow: rgba(46, 32, 10, 0.22);
    --header-bg: var(--graphite);
    --header-ink: var(--paper);
    --grain-blend: multiply;
    --grain-opacity: 0.05;

    --font-display: 'Big Shoulders', ui-sans-serif, sans-serif;
    --font-body: 'Plex Sans', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'Plex Mono', ui-monospace, monospace;
    --font-marker: 'Marker', cursive;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1b1815;
        --surface: #262019;
        --ink: #eee6d4;
        --muted: #ab9f87;
        --accent: #e0a257;
        --link: #e0a257;
        --border: rgba(238, 230, 212, 0.16);
        --shadow: rgba(0, 0, 0, 0.55);
        --header-bg: #100e0c;
        --header-ink: #eee6d4;
        --grain-blend: overlay;
        --grain-opacity: 0.09;
    }
}

:root[data-theme='dark'] {
    --bg: #1b1815;
    --surface: #262019;
    --ink: #eee6d4;
    --muted: #ab9f87;
    --accent: #e0a257;
    --link: #e0a257;
    --border: rgba(238, 230, 212, 0.16);
    --shadow: rgba(0, 0, 0, 0.55);
    --header-bg: #100e0c;
    --header-ink: #eee6d4;
    --grain-blend: overlay;
    --grain-opacity: 0.09;
}

:root[data-theme='light'] {
    --bg: var(--paper);
    --surface: #f8f3e7;
    --ink: #22201b;
    --muted: #6e6553;
    --accent: var(--brass);
    --link: #8f5a1f;
    --border: rgba(34, 30, 22, 0.22);
    --shadow: rgba(46, 32, 10, 0.22);
    --header-bg: var(--graphite);
    --header-ink: var(--paper);
    --grain-blend: multiply;
    --grain-opacity: 0.05;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

* {
    box-sizing: border-box;
}

html {
    color-scheme: light dark;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Grain de papier en fond, jamais au-dessus du texte (z-index négatif) */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--grain-opacity);
    mix-blend-mode: var(--grain-blend);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin: 0 0 0.6em;
}

h1 {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
}

h2 {
    font-size: 1.4rem;
}

a {
    color: var(--link);
    text-underline-offset: 3px;
}

.tip-list__item a,
.btn,
.site-nav a,
.site-nav__cta {
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   En-tête & navigation
   ========================================================================== */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.5rem;
    background: var(--header-bg);
    color: var(--header-ink);
}

.site-header .brand {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.4rem;
    letter-spacing: -0.01em;
    color: var(--header-ink);
    text-decoration: none;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
    font-size: 0.88rem;
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--header-ink);
    text-decoration: none;
}

.nav-icon {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
}

.nav-icon-only {
    gap: 0 !important;
}

.nav-icon-only .notification-badge {
    margin-left: 0.3rem;
}

.site-nav a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-nav__cta {
    background: var(--accent);
    color: var(--graphite) !important;
    padding: 0.4rem 0.85rem;
    border-radius: 2px;
    font-weight: 600;
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    list-style: none;
    color: var(--header-ink);
}

.nav-dropdown summary::-webkit-details-marker {
    display: none;
}

.nav-dropdown summary::after {
    content: ' ▾';
    font-size: 0.7em;
}

.nav-dropdown summary:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nav-dropdown[open] summary {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nav-dropdown__menu {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    min-width: 11rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 2px;
    box-shadow: 0 0.6rem 1.2rem -0.4rem var(--shadow);
    overflow: hidden;
}

.nav-dropdown__menu a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    color: var(--ink) !important;
    font-size: 0.88rem;
}

.nav-dropdown__menu a:hover {
    background: var(--bg);
    text-decoration: none !important;
}

.notification-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--signal);
    color: var(--graphite);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(241, 237, 228, 0.3);
    color: var(--header-ink);
    padding: 0.4rem;
    border-radius: 2px;
    cursor: pointer;
    width: auto;
}

.theme-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ==========================================================================
   Structure de page
   ========================================================================== */

.site-main {
    max-width: 720px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

.flash {
    padding: 0.75rem 1rem;
    border-radius: 2px;
    margin-bottom: 1.5rem;
    border-left: 3px solid transparent;
    font-size: 0.92rem;
}

.flash--success {
    background: color-mix(in srgb, var(--patina) 20%, var(--surface));
    border-left-color: var(--patina);
}

.flash--error,
.flash--danger {
    background: color-mix(in srgb, var(--rust) 14%, var(--surface));
    border-left-color: var(--rust);
}

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

form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* Enveloppe label + champ — tous les formulaires du site (pas seulement le
   formulaire de tip) : la règle générale évite qu'un formulaire "oublié"
   se retrouve avec un espacement par défaut du navigateur, plus serré et
   incohérent avec le reste. Les groupes de boutons/radios (ex. la décision
   pour/contre du comité) ont leur propre classe, plus spécifique, qui prend
   le dessus. */
form > div {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
}

input[type='email'],
input[type='password'],
input[type='text'],
textarea,
select {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 2px;
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1.4;
    background: var(--surface);
    color: var(--ink);
}

.tip-form ul {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--rust);
    font-size: 0.85rem;
}

/* Type de tip : chips colorées par type (même langage que .tip-type-badge
   sur la fiche détail) plutôt que des boutons radio bruts. Le rendu Symfony
   pour un EnumType expanded est une séquence plate input/label/input/label
   (pas de <div> par choix, contrairement à d'autres ChoiceType) — le radio
   natif reste présent et fonctionnel (accessibilité/focus clavier), juste
   masqué visuellement, le label stylé en chip fait office de bouton visible.
   Sélection par [value=...] sur le radio plutôt que par l'id auto-généré
   (tip_form_type_0/1/2/3, indexé sur l'ordre des cases, donc fragile) — la
   value est le name anglais stable de l'enum (choice_value ci-dessus). */
#tip_form_type {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.6rem;
}

#tip_form_type input[type='radio'] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

#tip_form_type label {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: var(--surface);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

#tip_form_type input[type='radio']:focus-visible + label {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

#tip_form_type input[type='radio']:checked + label {
    border-color: var(--type-color, var(--accent));
    background: color-mix(in srgb, var(--type-color, var(--accent)) 16%, var(--surface));
}

#tip_form_type input[value='PITFALL'] + label {
    --type-color: var(--rust);
}

#tip_form_type input[value='PREVENTION'] + label {
    --type-color: var(--patina);
}

#tip_form_type input[value='TOOLING'] + label {
    --type-color: var(--link);
}

#tip_form_type input[value='ADVICE'] + label {
    --type-color: var(--steel);
}

/* Case "Valable pour tous véhicules" : ligne propre plutôt que le
   label/checkbox empilés en colonne qu'impose la règle générale "form > div". */
.tip-form__all-vehicles {
    flex-direction: row !important;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: var(--surface);
}

.tip-form__all-vehicles label {
    margin: 0;
    font-weight: 500;
}

.tip-form__all-vehicles input[type='checkbox'] {
    width: auto;
    flex-shrink: 0;
}

/* Masque le champ véhicule quand "tous véhicules" est coché — pas de JS
   nécessaire. Bug trouvé au passage : l'id ciblait un attr id="tip_all_vehicles"
   custom qui entrait en conflit avec l'id auto-généré par Symfony
   (id="tip_form_allVehicles" rendu en premier, donc gagnant — le second id
   dupliqué était silencieusement ignoré par le parseur HTML, cette règle ne
   matchait jamais rien). Utilise directement l'id auto-généré désormais. */
.tip-form:has(#tip_form_allVehicles:checked) .vehicle-field {
    display: none;
}

.tip-form__more {
    border-top: 1px dashed var(--border);
    padding-top: 1rem;
}

.tip-form__more summary {
    cursor: pointer;
    font-weight: 600;
}

/* ux-autocomplete (TomSelect) — thème par défaut remplacé pour matcher la DA
   plutôt que le bleu générique. Scopé sous .tip-form : la spécificité de
   classe l'emporte sur tom-select.default.css sans dépendre de l'ordre de
   chargement (son CSS est importé dynamiquement par le contrôleur Stimulus,
   pas garanti de passer après app.css). */
.tip-form .ts-wrapper {
    font-family: var(--font-body);
}

.tip-form .ts-control {
    border: 1px solid var(--border);
    border-radius: 2px;
    background: var(--surface);
    box-shadow: none;
    padding: 0.45rem 0.6rem;
}

.tip-form .ts-wrapper.focus .ts-control {
    border-color: var(--accent);
    box-shadow: none;
}

.tip-form .ts-control > input {
    color: var(--ink);
}

.tip-form .ts-control input::placeholder {
    color: var(--muted);
}

.tip-form .ts-dropdown {
    border: 1px solid var(--border);
    border-radius: 0 0 2px 2px;
    background: var(--surface);
    box-shadow: 0 0.5rem 1rem -0.4rem var(--shadow);
    font-family: var(--font-body);
}

.tip-form .ts-dropdown .option,
.tip-form .ts-dropdown .no-results,
.tip-form .ts-dropdown .create {
    padding: 0.5rem 0.65rem;
    color: var(--ink);
}

.tip-form .ts-dropdown .optgroup-header {
    background: var(--bg);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.tip-form .ts-dropdown .active {
    background: var(--bg);
    color: var(--ink);
}

.tip-form .ts-dropdown .create {
    color: var(--link);
}

button,
.btn {
    padding: 0.65rem 1.2rem;
    border: none;
    border-radius: 2px;
    background: var(--accent);
    color: var(--graphite);
    font-weight: 600;
    font-family: var(--font-body);
    font-size: 1rem;
    cursor: pointer;
    width: fit-content;
}

button:hover,
.btn:hover {
    filter: brightness(0.95);
}

.btn-outline {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--border);
}

.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
    filter: none;
}

button:focus-visible,
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ==========================================================================
   Carte "fiche d'atelier" — légèrement inclinée, jamais au détriment de la
   lecture (rotation < 1°). Utilisée pour les listes de tips, la file de
   validation et le classement.
   ========================================================================== */

.review-card,
.tip-list__item {
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 1.2rem 1.3rem;
    margin-bottom: 1.5rem;
    background: var(--surface);
    box-shadow: 0 0.5rem 1rem -0.6rem var(--shadow);
    transform: rotate(-0.35deg);
}

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

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

.notification-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.6rem;
    background: var(--surface);
}

.notification-list__item--unread {
    border-left: 3px solid var(--signal);
}

.notification-list__date {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--muted);
    flex-shrink: 0;
}

.tip-list__item:nth-child(even) {
    transform: rotate(0.3deg);
}

.tip-list__item a {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
    color: var(--ink);
}

.tip-list__name strong {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
}

.tip-list__meta,
.tip-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.01em;
    color: var(--muted);
    margin-top: 0.4rem;
    text-transform: uppercase;
}

.tip-list__meta a,
.tip-detail__meta a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--border);
    text-underline-offset: 2px;
}

.tip-list__meta a:hover,
.tip-detail__meta a:hover {
    color: var(--link);
    text-decoration-color: currentColor;
}

.review-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.6rem;
}

.review-card__badge {
    background: var(--signal);
    color: var(--graphite);
    padding: 0.15rem 0.5rem;
    border-radius: 2px;
    font-weight: 600;
}

.review-card__author {
    font-size: 0.85rem;
    color: var(--muted);
}

.review-card__votes {
    background: var(--bg);
    border-radius: 2px;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    font-size: 0.9rem;
}

.review-card__votes ul {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
}

.review-card__done {
    color: var(--patina);
    font-weight: 600;
}

.review-card__form {
    border-top: 1px dashed var(--border);
    padding-top: 1rem;
}

.review-card__decision {
    display: flex;
    gap: 1.5rem;
}

.review-card__decision label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 400;
}

/* ==========================================================================
   Annotation manuscrite au marqueur — réservée à un seul usage (le titre de
   la landing) : un vocabulaire visuel cohérent, pas un effet répété
   partout. Le type de tip a son propre badge (.tip-type-badge ci-dessous)
   depuis que la fiche détail a besoin de distinguer les 4 types, pas
   seulement "piège à éviter".
   ========================================================================== */

.marker {
    position: relative;
    display: inline-block;
}

.marker::after {
    content: '';
    position: absolute;
    left: -4%;
    right: -4%;
    bottom: -0.35em;
    height: 0.5em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M2,7 Q15,2 28,7 T54,6 T80,8 T98,5' fill='none' stroke='%23c8863a' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.tip-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0.3rem 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--badge-color, var(--accent));
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink);
}

.tip-type-badge svg {
    color: var(--badge-color, var(--accent));
}

.tip-type-badge--pitfall {
    --badge-color: var(--rust);
}

.tip-type-badge--prevention {
    --badge-color: var(--patina);
}

.tip-type-badge--tooling {
    --badge-color: var(--link);
}

.tip-type-badge--advice {
    --badge-color: var(--steel);
}

.tip-detail__content {
    font-size: 1.08rem;
    line-height: 1.65;
    margin-top: 1.4rem;
}

.tip-detail__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1.4rem 0;
}

.tip-detail__tags .tag {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 0.15rem 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--muted);
}

.tip-detail__author {
    margin-top: 1.2rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.favorite-btn {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
}

.favorite-btn--active {
    background: var(--signal);
    border-color: var(--signal);
    color: var(--graphite);
}

/* Une seule zone pour les trois actions (vote/favoris/signalement) plutôt
   que trois formulaires empilés sans lien visuel entre eux. */
.tip-detail__actions {
    margin-top: 2rem;
    padding: 1.2rem 1.3rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 2px;
}

.tip-detail__actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.tip-detail__tally {
    color: var(--muted);
    font-size: 0.9rem;
}

.tip-detail__actions-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.tip-detail__vote-form {
    flex-direction: row;
    gap: 0.75rem;
}

.vote-btn {
    background: var(--bg);
    color: var(--ink);
    border: 1px solid var(--border);
}

.vote-btn--active {
    background: var(--patina);
    border-color: var(--patina);
    color: white;
}

.report-disclosure {
    border-top: 1px dashed var(--border);
    margin-top: 1.2rem;
    padding-top: 1rem;
}

.report-disclosure summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--muted);
}

.report-form {
    margin-top: 0.75rem;
}

.review-card__form button + button {
    margin-left: 0.6rem;
}

/* ==========================================================================
   Classement — pas d'inclinaison ici : c'est une liste ordonnée, la
   lisibilité/scannabilité prime sur le geste "fiche d'atelier".
   ========================================================================== */

.ranking-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ranking-list__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 0.75rem 1rem;
    background: var(--surface);
}

.ranking-list__rank {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--muted);
    width: 1.5rem;
    text-align: right;
    flex-shrink: 0;
}

.ranking-list__main {
    flex: 1;
}

.ranking-list__name {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ranking-list__detail {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--muted);
}

.ranking-list__score {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.15rem;
    flex-shrink: 0;
}

/* Tampon encreur — signature visuelle du badge de progression
   (Apprenti/Compagnon/Expert). Réservé à cet usage : un seul geste fort
   plutôt que répété sur chaque badge du site. */
.stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    border: 2px solid var(--accent);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-8deg);
    box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--accent);
    padding: 0.2rem;
    flex-shrink: 0;
    filter: url(#stampDistress);
}

/* ==========================================================================
   Profil public contributeur
   ========================================================================== */

.profile-header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.profile-header h1 {
    margin-bottom: 0.2rem;
}

.profile-header__stats {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--muted);
}

/* ==========================================================================
   Suivi des soumissions
   ========================================================================== */

.status-badge {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 2px;
    color: white;
}

.status-badge--pending {
    background: var(--steel);
}

.status-badge--published {
    background: var(--patina);
}

.status-badge--rejected {
    background: var(--rust);
}

.tip-list__reasons {
    background: var(--bg);
    border-radius: 2px;
    padding: 0.6rem 1rem;
    margin-top: 0.6rem;
    font-size: 0.85rem;
}

.tip-list__reasons p {
    margin: 0 0 0.3rem;
    font-weight: 600;
    color: var(--muted);
}

.tip-list__reasons ul {
    margin: 0;
    padding-left: 1.2rem;
}

/* ==========================================================================
   Admin — tabulaire et sans fioriture, c'est un outil de travail
   ========================================================================== */

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    font-size: 0.9rem;
}

.admin-table th {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.admin-table .badge {
    background: var(--accent);
    color: var(--graphite);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 2px;
    margin-right: 0.3rem;
}

.admin-table form {
    display: block;
}

.admin-table button {
    font-size: 0.8rem;
    padding: 0.4rem 0.7rem;
}

.admin-table .btn-danger {
    background: var(--rust);
    color: white;
}

/* ==========================================================================
   Connexion / inscription — fiche d'atelier centrée plutôt que formulaire nu
   ========================================================================== */

.auth-page {
    max-width: 420px;
    margin: 1.5rem auto 0;
}

.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 2rem 1.8rem;
    box-shadow: 0 0.6rem 1.2rem -0.7rem var(--shadow);
    transform: rotate(-0.3deg);
}

.eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.5rem;
}

.auth-card h1 {
    font-size: 1.8rem;
    margin-bottom: 1.2rem;
}

.auth-card .flash {
    margin-bottom: 1rem;
}

.auth-switch {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--muted);
}

/* ==========================================================================
   Landing — la seule page qui a droit à un vrai moment éditorial. La preuve
   du concept, c'est un tip réel, pas une promesse marketing.
   ========================================================================== */

.hero {
    padding: 1.5rem 0 1rem;
}

.hero__title {
    font-size: clamp(2.3rem, 6vw, 3.4rem);
    max-width: 14ch;
}

.hero__lead {
    max-width: 46ch;
    font-size: 1.08rem;
    color: var(--muted);
}

.hero__example {
    margin: 2.2rem 0 2rem;
}

.hero__example-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.6rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ==========================================================================
   Barre de filtres — fiche technique, pas un moment éditorial
   ========================================================================== */

.filter-bar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.9rem;
    margin-bottom: 2rem;
    padding: 1rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 2px;
}

.filter-bar > div {
    flex: 1 1 150px;
    min-width: 150px;
}

.filter-bar label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

.filter-bar input,
.filter-bar select {
    font-size: 0.85rem;
    padding: 0.45rem 0.55rem;
}

.filter-bar button {
    flex-shrink: 0;
}

.filter-bar__reset {
    align-self: center;
    font-size: 0.85rem;
    color: var(--muted);
    flex-shrink: 0;
}

/* ==========================================================================
   Parcours par tuiles — véhicule > catégorie > opération
   ========================================================================== */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1.2rem;
}

.breadcrumb a {
    color: var(--muted);
}

.breadcrumb a:hover {
    color: var(--link);
}

.breadcrumb__sep {
    opacity: 0.5;
}

.browse-intro,
.browse-alt {
    color: var(--muted);
    max-width: 55ch;
}

.browse-alt {
    font-size: 0.9rem;
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.tile {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 6rem;
    padding: 1.2rem;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: var(--surface);
    box-shadow: 0 0.5rem 1rem -0.6rem var(--shadow);
    text-decoration: none;
    color: var(--ink);
    transition: transform 0.12s ease, border-color 0.12s ease;
}

.tile:nth-child(even) {
    transform: rotate(-0.3deg);
}

.tile:nth-child(odd) {
    transform: rotate(0.3deg);
}

a.tile:hover {
    border-color: var(--accent);
    transform: rotate(0deg) translateY(-2px);
}

.tile__label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
}

.tile--disabled {
    flex-direction: column;
    gap: 0.5rem;
    background: transparent;
    border-style: dashed;
    box-shadow: none;
    color: var(--muted);
    cursor: not-allowed;
}

.tile--disabled .tile__label {
    color: var(--muted);
}

.tile__badge {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 0.15rem 0.5rem;
}

/* ==========================================================================
   Pages légales (mentions légales, CGU, confidentialité)
   ========================================================================== */

.legal-page h2 {
    margin-top: 2rem;
}

.legal-page p,
.legal-page li {
    line-height: 1.6;
    color: var(--ink);
}

.legal-page ul {
    margin: 0 0 1rem;
    padding-left: 1.3rem;
}

.legal-page li {
    margin-bottom: 0.4rem;
}

.legal-page__intro {
    color: var(--muted);
    font-style: italic;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    font-size: 0.9rem;
}

.legal-table th,
.legal-table td {
    text-align: left;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    vertical-align: top;
}

.legal-table th {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface);
}

.form-legal-notice {
    font-size: 0.82rem;
    color: var(--muted);
    margin: -0.5rem 0 1rem;
}

/* ==========================================================================
   Pied de page
   ========================================================================== */

.site-footer {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 3rem;
    border-top: 1px solid var(--border);
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    font-size: 0.85rem;
}

.site-footer__links a {
    color: var(--muted);
}