/* =====================================================================
   pronetwork.lunekkowo.fr — Carte de visite
   Design system repris de /var/www/html/Lune/assets/css/vitrine.css
   « Studio éditorial » · Fraunces (display) · Hanken Grotesk (texte)
   · JetBrains Mono (code)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* =====================================================================
   Tokens — thème sombre (défaut, identique à vitrine.css)
   ===================================================================== */
:root {
    --dark: #161210;
    --surface: #1f1a15;
    --surface-light: #261f18;
    --surface-2: #2f2820;

    --text: #f1eade;
    --text-muted: #b8ac99;
    --text-faint: #9a9080;

    --primary: #db6f43;
    --primary-light: #e8865a;
    --primary-dim: rgba(219, 111, 67, 0.15);
    --accent: #6cab8a;

    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.17);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 18px 40px -20px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 30px 60px -28px rgba(0, 0, 0, 0.7);

    --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Fraunces', Georgia, serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;

    /* propres à la carte */
    --hover-wash: rgba(255, 255, 255, 0.04);
    --grain-blend: soft-light;
    --grain-opacity: 0.05;
    --halo-1: rgba(219, 111, 67, 0.13);
    --halo-2: rgba(108, 171, 138, 0.07);
    --card-bg: rgba(31, 26, 21, 0.72);
}

/* ---------- Tokens — thème clair ----------
   Même palette, inversée : crème chaud en surface, encre en texte.
   Terracotta et sauge assombris pour tenir le contraste sur fond clair. */
:root[data-theme="light"] {
    --dark: #f4ede1;
    --surface: #fffaf2;
    --surface-light: #fbf4e8;
    --surface-2: #f0e6d6;

    --text: #241d17;
    --text-muted: #6b6055;
    --text-faint: #8b8073;

    --primary: #bf5a2e;
    --primary-light: #a94b23;
    --primary-dim: rgba(191, 90, 46, 0.12);
    --accent: #43805f;

    --border: rgba(36, 29, 23, 0.12);
    --border-strong: rgba(36, 29, 23, 0.24);

    --shadow-sm: 0 1px 2px rgba(90, 66, 45, 0.08);
    --shadow-md: 0 18px 40px -22px rgba(90, 66, 45, 0.35);
    --shadow-lg: 0 30px 60px -30px rgba(90, 66, 45, 0.42);

    --hover-wash: rgba(36, 29, 23, 0.035);
    --grain-blend: multiply;
    --grain-opacity: 0.035;
    --halo-1: rgba(191, 90, 46, 0.14);
    --halo-2: rgba(67, 128, 95, 0.09);
    --card-bg: rgba(255, 250, 242, 0.82);
}

/* Respecte la préférence système tant que l'utilisatrice n'a pas choisi. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --dark: #f4ede1;
        --surface: #fffaf2;
        --surface-light: #fbf4e8;
        --surface-2: #f0e6d6;

        --text: #241d17;
        --text-muted: #6b6055;
        --text-faint: #8b8073;

        --primary: #bf5a2e;
        --primary-light: #a94b23;
        --primary-dim: rgba(191, 90, 46, 0.12);
        --accent: #43805f;

        --border: rgba(36, 29, 23, 0.12);
        --border-strong: rgba(36, 29, 23, 0.24);

        --shadow-sm: 0 1px 2px rgba(90, 66, 45, 0.08);
        --shadow-md: 0 18px 40px -22px rgba(90, 66, 45, 0.35);
        --shadow-lg: 0 30px 60px -30px rgba(90, 66, 45, 0.42);

        --hover-wash: rgba(36, 29, 23, 0.035);
        --grain-blend: multiply;
        --grain-opacity: 0.035;
        --halo-1: rgba(191, 90, 46, 0.14);
        --halo-2: rgba(67, 128, 95, 0.09);
        --card-bg: rgba(255, 250, 242, 0.82);
    }
}

/* =====================================================================
   Base
   ===================================================================== */
/* Pas de scrollbar-gutter ici, contrairement à vitrine.css : la carte
   tient dans un écran, la gouttière réservée laisserait une bande vide
   sur le bord droit. */
html { background: var(--dark); }

body {
    font-family: var(--font-sans);
    background: var(--dark);
    color: var(--text);
    line-height: 1.65;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    position: relative;
    /* atmosphère chaude diffuse, reprise de vitrine.css */
    background-image:
        radial-gradient(1100px 640px at 50% -10%, var(--halo-1), transparent 62%),
        radial-gradient(900px 620px at 100% 8%, var(--halo-2), transparent 58%);
    background-attachment: fixed;
    transition: background-color 0.35s ease, color 0.35s ease;
}

/* grain très discret */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    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' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

h1, h2 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text);
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--primary-dim); color: var(--primary); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* icônes de marque : aplats plutôt que traits */
svg[data-fill] { fill: currentColor; stroke: none; }

/* =====================================================================
   Bascule de thème
   ===================================================================== */
.theme-toggle {
    position: fixed;
    top: max(1.15rem, env(safe-area-inset-top));
    right: max(1.15rem, env(safe-area-inset-right));
    z-index: 50;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.18s, border-color 0.18s, background 0.18s, transform 0.18s;
}
.theme-toggle:hover {
    color: var(--primary);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .icon-sun { display: none; }

/* Le soleil s'affiche quand on est en sombre (= ce vers quoi on bascule). */
:root[data-theme="dark"] .theme-toggle .icon-sun,
:root:not([data-theme]) .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon,
:root:not([data-theme]) .theme-toggle .icon-moon { display: none; }

:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .theme-toggle .icon-moon { display: block; }
    :root:not([data-theme]) .theme-toggle .icon-sun { display: none; }
}

/* =====================================================================
   Scène + carte
   ===================================================================== */
.stage {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.1rem, 4vw, 2.5rem);
    padding-top: max(clamp(1.1rem, 4vw, 2.5rem), calc(env(safe-area-inset-top) + 4rem));
    padding-bottom: max(clamp(1.1rem, 4vw, 2.5rem), env(safe-area-inset-bottom));
}

.card {
    position: relative;
    width: 100%;
    max-width: 470px;
    background: var(--card-bg);
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    padding: clamp(1.9rem, 5vw, 2.6rem);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: card-in 0.5s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes card-in {
    from { opacity: 0; transform: translateY(16px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

/* halo interne, dans l'esprit des dégradés de vitrine.css */
.card-glow {
    position: absolute;
    inset: -40% -20% auto -20%;
    height: 300px;
    pointer-events: none;
    background: radial-gradient(closest-side, var(--primary-dim), transparent 72%);
}

/* ---------- En-tête ---------- */
.card-head { text-align: center; }

.avatar {
    width: clamp(90px, 24vw, 112px);
    height: clamp(90px, 24vw, 112px);
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(160deg, var(--surface-light), var(--surface-2));
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-md), 0 0 0 6px var(--primary-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.avatar .initials {
    font-family: var(--font-display);
    font-size: clamp(2rem, 7vw, 2.5rem);
    font-weight: 500;
    font-style: italic;
    color: var(--primary);
    letter-spacing: 0.02em;
    user-select: none;
}

.name {
    font-size: clamp(1.65rem, 6vw, 2.05rem);
    line-height: 1.15;
}

.handle {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--primary);
    letter-spacing: 0.02em;
    margin-top: 0.4rem;
}
.handle::before { content: '@'; opacity: 0.5; }

.rule {
    width: 46px;
    height: 1px;
    margin: 1.1rem auto;
    background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}

.role {
    font-size: 0.93rem;
    color: var(--text-muted);
    line-height: 1.55;
}

/* =====================================================================
   Liens
   ===================================================================== */
.links {
    --links-gap: 0.7rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--links-gap);
    margin-top: 1.9rem;
}

/* Nombre impair de réseaux : le dernier se centre sur les deux colonnes
   au lieu de laisser un trou en fin de grille. Il garde la largeur d'une
   colonne pour ne pas casser le rythme des tuiles. */
.links > .link:last-child:nth-child(odd):not(.is-wide) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - var(--links-gap) / 2);
}

/* "wide": true dans links.json — la tuile occupe les deux colonnes.
   Le :not() ci-dessus l'exclut de la règle de centrage, qui serait
   sinon plus spécifique et l'emporterait. */
.links > .link.is-wide {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: auto;
}

.links-loading,
.links-error {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-faint);
    padding: 1.4rem 0;
}
.links-error { color: var(--danger, #e87055); }

.link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.8rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-sm);
    font: inherit;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.link:hover {
    border-color: var(--primary);
    background: var(--surface-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.link:active { transform: translateY(0); }

.link-icon {
    flex: none;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--primary-dim);
    border: 1px solid rgba(219, 111, 67, 0.2);
    color: var(--primary-light);
    transition: color 0.2s;
}
:root[data-theme="light"] .link-icon { border-color: rgba(191, 90, 46, 0.22); }
.link-icon svg { width: 17px; height: 17px; }

.link-text { min-width: 0; flex: 1; }
.link-label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.3;
}
.link-value {
    display: block;
    font-size: 0.75rem;
    color: var(--text-faint);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-arrow {
    flex: none;
    width: 14px;
    height: 14px;
    color: var(--text-faint);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s, transform 0.2s, color 0.2s;
}
.link:hover .link-arrow { opacity: 1; transform: none; color: var(--primary); }

/* état « copié » */
.link.is-copied { border-color: var(--accent); }
.link.is-copied .link-icon {
    background: rgba(108, 171, 138, 0.16);
    border-color: rgba(108, 171, 138, 0.35);
    color: var(--accent);
}

/* =====================================================================
   Boutons de pied de carte
   ===================================================================== */
.card-foot {
    display: flex;
    gap: 0.65rem;
    margin-top: 1.6rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.78rem 1.4rem;
    border-radius: 100px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.87rem;
    letter-spacing: 0.01em;
    transition: all 0.18s ease;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn .label-short { display: none; }

.btn-primary {
    flex: 1;
    background: var(--text);
    color: var(--surface);
}
.btn-primary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-outline {
    flex: none;
    background: transparent;
    color: var(--text);
    border-color: var(--border-strong);
}
.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--hover-wash);
    transform: translateY(-1px);
}

/* =====================================================================
   Modale QR
   ===================================================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: fade-in 0.2s ease both;
}
.modal-overlay[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    width: 100%;
    max-width: 340px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: modal-in 0.26s cubic-bezier(.2, .7, .2, 1);
}
@keyframes modal-in {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.modal-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.15rem 1.35rem;
    border-bottom: 1px solid var(--border);
}
.modal-header h2 { flex: 1; font-size: 1.15rem; font-weight: 500; line-height: 1.2; }

.modal-close {
    flex: none;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.modal-close:hover { color: var(--text); background: var(--hover-wash); border-color: var(--border-strong); }

.modal-body { padding: 1.5rem; text-align: center; }
.modal-body img {
    width: 220px;
    max-width: 100%;
    height: auto;
    background: #fff;
    padding: 12px;
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-sm);
}
.modal-url {
    margin-top: 1rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-faint);
    word-break: break-all;
}

/* =====================================================================
   Toast
   ===================================================================== */
.toast {
    position: fixed;
    left: 50%;
    bottom: max(1.5rem, env(safe-area-inset-bottom));
    z-index: 200;
    transform: translate(-50%, 130%);
    padding: 0.7rem 1.25rem;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 100px;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(.2, .7, .2, 1), opacity 0.3s;
}
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

/* =====================================================================
   Responsive
   ===================================================================== */

/* ---------------------------------------------------------------------
   Écrans larges : identité à gauche, réseaux à droite.
   Empilé, la carte dépassait 780 px de haut et débordait d'un écran
   d'ordinateur portable (768 px). En deux colonnes elle tombe sous
   500 px et tient partout sans défilement.
   --------------------------------------------------------------------- */
@media (min-width: 720px) {
    .card {
        /* --split : moitié de l'espace entre les colonnes. Le filet de
           séparation se pose dessus, donc il tombe pile au milieu et
           garde la même respiration de chaque côté. */
        --split: 1.9rem;

        max-width: 900px;
        display: grid;
        grid-template-columns: 292px minmax(0, 1fr);
        grid-template-rows: 1fr auto;
        column-gap: calc(var(--split) * 2);
        padding: 2.6rem 2.9rem;
    }

    .card-head {
        grid-column: 1;
        grid-row: 1 / -1;
        align-self: center;
        /* Le rôle est la ligne la plus large : sans cette marge il vient
           buter contre le filet. */
        padding: 0 0.75rem;
    }

    .links {
        grid-column: 2;
        grid-row: 1;
        margin-top: 0;
        align-content: start;
        padding-left: var(--split);
        margin-left: calc(var(--split) * -1);
        border-left: 1px solid var(--border);
    }

    .card-foot {
        grid-column: 2;
        grid-row: 2;
        position: relative;
        margin-top: 1.4rem;
        padding-top: 1.4rem;
        padding-left: var(--split);
        margin-left: calc(var(--split) * -1);
        border-left: 1px solid var(--border);
        border-top: none;
    }
    /* Le filet horizontal du pied se limite à la colonne de droite. */
    .card-foot::before {
        content: '';
        position: absolute;
        left: var(--split);
        right: 0;
        top: 0;
        border-top: 1px solid var(--border);
    }

    .avatar { width: 128px; height: 128px; }
}

/* Écrans larges mais courts : on garde deux colonnes et on comprime. */
@media (min-width: 720px) and (max-height: 700px) {
    .card { padding: 1.9rem 2.2rem; }
    .avatar { width: 96px; height: 96px; margin-bottom: 0.9rem; }
    .name { font-size: 1.7rem; }
    .rule { margin: 0.75rem auto; }
    .links { --links-gap: 0.55rem; }
    .link { padding: 0.6rem 0.75rem; }
    /* Pas de margin-top négatif sur ::before : il est calé en top: 0 du
       pied, un décalage le collerait contre la dernière tuile. */
    .card-foot { margin-top: 1.25rem; padding-top: 1.25rem; }
}

/* Tablettes étroites et grands téléphones */
@media (max-width: 560px) {
    .card { max-width: 100%; border-radius: var(--r-md); }
    .theme-toggle { width: 44px; height: 44px; }
}

/* Téléphones — objectif : la carte entière tient sans défiler.
   On garde donc les deux colonnes de réseaux (une seule colonne
   déborderait dès 5 entrées) et on compacte les tuiles. */
@media (max-width: 460px) {
    .stage { padding: 0.8rem; padding-top: calc(env(safe-area-inset-top) + 3.4rem); }
    .card { padding: 1.5rem 1.15rem 1.35rem; }

    .links { --links-gap: 0.55rem; margin-top: 1.35rem; }
    /* La flèche ne sert à rien sans survol : on récupère la place. */
    .link-arrow { display: none; }
    .link { padding: 0.65rem 0.6rem; gap: 0.55rem; }
    .link-icon { width: 30px; height: 30px; border-radius: 8px; }
    .link-icon svg { width: 15px; height: 15px; }
    .link-label { font-size: 0.81rem; line-height: 1.25; }
    .link-value { font-size: 0.68rem; line-height: 1.3; }

    /* Les deux boutons restent côte à côte : les empiler coûtait une
       cinquantaine de pixels, soit la différence entre tenir ou non. */
    .card-foot { gap: 0.5rem; margin-top: 1.25rem; padding-top: 1.1rem; }
    .btn { padding: 0.8rem 0.9rem; font-size: 0.82rem; }
    .btn svg { width: 15px; height: 15px; }

    .avatar { width: 82px; height: 82px; margin-bottom: 0.95rem; }
    .name { font-size: 1.5rem; }
    .handle { font-size: 0.78rem; }
    .rule { margin: 0.8rem auto; }
    .role { font-size: 0.87rem; }

    .toast { left: 0.9rem; right: 0.9rem; transform: translateY(130%); max-width: none; text-align: center; }
    .toast.is-visible { transform: translateY(0); }
}

/* Téléphones courts (SE, écrans 4,7") : dernier palier de compression,
   la valeur sous chaque label passe à la trappe avant le reste. */
@media (max-width: 460px) and (max-height: 720px) {
    .stage { padding-top: calc(env(safe-area-inset-top) + 3rem); }
    .card { padding: 1.2rem 1rem 1.1rem; }
    .avatar { width: 64px; height: 64px; margin-bottom: 0.7rem; }
    .name { font-size: 1.32rem; }
    .rule { margin: 0.6rem auto; }
    .role { font-size: 0.82rem; }
    .links { --links-gap: 0.45rem; margin-top: 1rem; }
    .link { padding: 0.55rem 0.55rem; }
    .link-value { display: none; }
    .card-foot { margin-top: 0.95rem; padding-top: 0.85rem; }
    .btn { padding: 0.7rem 0.8rem; }
}

/* Très étroit (320 px) : colonnes resserrées et libellé court sur le
   bouton principal, sinon les deux boutons ne tiennent plus côte à côte. */
@media (max-width: 340px) {
    .links { --links-gap: 0.4rem; }
    .link { padding: 0.5rem 0.45rem; gap: 0.45rem; }
    .link-icon { width: 26px; height: 26px; }
    .link-label { font-size: 0.75rem; }
    .btn .label-long { display: none; }
    .btn .label-short { display: inline; }
}

/* Appareils tactiles : pas de survol, donc pas d'effets qui restent
   collés après un tap. On garde uniquement un retour à l'appui. */
@media (hover: none) {
    .link:hover {
        border-color: var(--border);
        background: var(--surface);
        transform: none;
        box-shadow: var(--shadow-sm);
    }
    .link:active {
        border-color: var(--primary);
        background: var(--surface-light);
        transform: scale(0.985);
    }
    .btn:hover, .theme-toggle:hover { transform: none; box-shadow: none; }
    .btn:active, .theme-toggle:active { transform: scale(0.97); }
    .btn-outline:hover { border-color: var(--border-strong); color: var(--text); background: transparent; }
    .btn-outline:active { border-color: var(--primary); color: var(--primary); }
    .link.is-copied { border-color: var(--accent); }
}

/* Le flou d'arrière-plan coûte cher sur mobile d'entrée de gamme :
   on retombe sur une surface opaque, visuellement équivalente. */
@supports not (backdrop-filter: blur(1px)) {
    .card, .theme-toggle { background: var(--surface); }
}

/* Écrans courts en paysage : on resserre pour rester sur un écran. */
@media (max-height: 620px) and (min-width: 461px) {
    .avatar { width: 74px; height: 74px; margin-bottom: 0.9rem; }
    .rule { margin: 0.8rem auto; }
    .links { margin-top: 1.3rem; }
    .card-foot { margin-top: 1.2rem; padding-top: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .link:hover { transform: none; }
    .btn:hover { transform: none; }
}

@media print {
    body { background: #fff; color: #000; }
    body::before, .theme-toggle, .card-foot { display: none; }
    .card { box-shadow: none; border-color: #ccc; backdrop-filter: none; }
}