/*
 * Profil public (/@username) - feuille de style de la page.
 *
 * Ces 700 lignes vivaient dans un bloc <style> de profile/show.html.twig :
 * retelechargees a chaque affichage de chaque profil, jamais mises en cache,
 * et impossibles a relire. Seules les valeurs qui dependent du theme choisi par
 * l'utilisateur restent dans le template, sous forme de variables CSS posees
 * sur :root (cf. le bloc « Variables du theme » de profile/show.html.twig).
 *
 * Variables attendues, toutes avec une valeur de repli ici :
 *   --ez-profile-font          famille de police
 *   --ez-profile-bg            fond de page
 *   --ez-profile-accent           couleur d'accent (fonds poses sur le fond de page)
 *   --ez-profile-accent-on-light  accent lisible sur une pastille blanche
 *   --ez-profile-accent-hover     accent au survol du bouton de copie
 *   --ez-profile-accent-bar       barre laterale des cartes de lien
 *   --ez-profile-btn-text         texte du bouton de copie
 *   --ez-profile-qr-bg            fond du cadre du QR code
 *
 * Distinction importante : les icones sociales, les deux boutons flottants et
 * la fleche des cartes sont poses sur du blanc. Un accent clair - le theme par
 * defaut vaut #ffffff - les rendait invisibles. Ils utilisent donc
 * --ez-profile-accent-on-light, calculee cote serveur par readable_on_light().
 */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-Gz7AlRl.woff2") format('woff2');
}

:root {
    --ez-profile-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ez-profile-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --ez-profile-accent: #667eea;
    --ez-profile-accent-on-light: #667eea;
    --ez-profile-accent-hover: #5568d3;
    --ez-profile-accent-bar: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --ez-profile-btn-text: #ffffff;
    --ez-profile-qr-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /* Texte pose sur le fond de page : pseudo, bio, pied de page. Le blanc
       reste le defaut, qui correspond au theme livre en degrade violet. */
    --ez-profile-text: #ffffff;
    --ez-profile-text-muted: rgba(255, 255, 255, 0.85);
    --ez-profile-text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--ez-profile-font);
    background: var(--ez-profile-bg);
    /* 100dvh plutot que 100vh : sur mobile, la barre d'adresse retractable fait
       depasser le pied de l'ecran avec l'unite classique. Le repli couvre les
       navigateurs qui ignorent dvh. */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow-x: hidden;
}

/* Les motifs de fond vivent dans theme_patterns.css : ils servent aussi au
   selecteur de themes du tableau de bord, qui ne charge pas cette feuille. La
   couche est posee par le ::before du body, porteur de l'attribut data-pattern
   (cf. profile/show.html.twig). */
body::before {
    z-index: 0;
}

.container {
    max-width: 680px;
    width: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    /* Prend toute la hauteur restante du corps : c'est ce qui permet au pied de
       se poser en bas quand la page est courte, et de suivre le contenu quand
       elle est longue. */
    flex: 1 0 auto;
    padding-top: 75px;
}

.container > *:last-child {
    margin-top: auto;
}

.profile-section {
    text-align: center;
    margin-bottom: 32px;
}

.profile-image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 0 auto 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border: 4px solid rgba(255, 255, 255, 0.3);
    object-fit: cover;
    display: block;
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.verified-badge i,
.verified-badge svg {
    color: #3b82f6 !important;
    fill: #3b82f6 !important;
    margin-right: 6px;
    font-size: 14px;
}

.verified-badge span {
    color: #3b82f6 !important;
    font-weight: 600;
    font-size: 14px;
}

/* Un pseudo long, un titre contenant une URL ou une bio avec un lien colle
   etaient rognes par l'overflow des cartes, sans jamais passer a la ligne. */
.username,
.bio,
.link-title {
    overflow-wrap: anywhere;
}

.username {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--ez-profile-text);
    margin: 14px auto;
    text-shadow: var(--ez-profile-text-shadow);
}

.bio {
    font-size: 16px;
    color: var(--ez-profile-text-muted);
    font-weight: 400;
    margin-bottom: 24px;
}

.social-icons {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 32px;
}

.social-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ez-profile-accent-on-light);
    font-size: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.social-icon:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    background: white;
}

.links-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.link-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 20px 28px;
    text-decoration: none;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.link-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: var(--ez-profile-accent-bar);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.link-card:hover,
.link-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
    /* Le fond prend une pointe de l'accent du theme au lieu du blanc fixe
       d'avant : la barre laterale et la fleche se coloraient deja, seul le fond
       restait inerte. Le repli couvre les navigateurs sans color-mix. */
    background: #ffffff;
    background: color-mix(in srgb, var(--ez-profile-accent-on-light) 8%, #ffffff);
}

.link-card:hover::before {
    transform: scaleY(1);
}

/* Pastille d'icone d'un lien.
   Sans classe de plateforme, elle n'avait ni fond ni couleur : l'icone heritait
   du texte de la carte. Elle prend desormais l'accent du theme, avec une encre
   noire ou blanche selon ce qui tranche le mieux dessus - une icone blanche sur
   un accent jaune ne se voyait pas. */
.link-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    background: var(--ez-profile-accent);
    color: var(--ez-profile-accent-ink, #ffffff);
}

.link-content {
    flex: 1;
}

.link-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.link-arrow {
    font-size: 20px;
    color: #999;
    transition: all 0.3s ease;
}

.link-card:hover .link-arrow {
    transform: translateX(4px);
    color: var(--ez-profile-accent-on-light);
}

/* Couleurs par plateforme */
.twitch-icon {
    background: #9146FF;
    color: white;
}

.discord-icon {
    background: #5865F2;
    color: white;
}

.etsy-icon {
    background: #F56400;
    color: white;
}

.instagram-icon {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
}

.kofi-icon {
    background: #29b6f6;
    color: white;
}

.twitter-icon {
    background: #000000;
    color: white;
}

/* Le pied de page se cale en bas de la fenetre quand le contenu est court.
   « margin-top: 100px !important » battait le « margin-top: auto » de
   .container > *:last-child : sur un profil de deux liens, le pied flottait au
   milieu de la page. L'espacement minimal passe en padding, qui ne concourt
   pas avec le calage. */
.footer {
    text-align: center;
    margin-top: auto;
    padding-top: 64px;
    /* La bascule de mode sombre est fixee en bas a droite sur 48 pixels : sans
       cette reserve, la derniere ligne du pied passe dessous. */
    padding-bottom: 32px;
}

@media (max-width: 640px) {
    /* Sur un ecran etroit, le pied passe sur deux lignes centrees et croise le
       bouton flottant : la reserve doit y etre plus genereuse. */
    .footer {
        padding-bottom: 80px;
    }
}

/* Le pied de page etait le texte le plus atténué de la page (0.85 et 0.75)
   alors qu'il est aussi le plus petit : sur les thèmes à dégradé clair, le
   contraste tombait sous 4.5:1 une fois l'opacité appliquée. Il porte
   maintenant le même halo que le pseudo et ne descend plus sous 0.9. */
.footer-text {
    color: var(--ez-profile-text-muted);
    font-size: 14px;
    opacity: 0.95;
    text-shadow: var(--ez-profile-text-shadow);
}

/* Les liens du pied de page portaient leur couleur en style inline, blanche
   quel que soit le theme : ils suivent desormais la couleur de texte. */
.footer-links {
    margin-bottom: 16px;
}

.footer-links a,
.footer-links span,
.footer-text a {
    color: var(--ez-profile-text);
    text-decoration: none;
    font-size: 13px;
    margin: 0 12px;
    opacity: 0.9;
    text-shadow: var(--ez-profile-text-shadow);
    transition: opacity 0.3s ease;
}

/* Les barres de séparation sont décoratives (aria-hidden) : elles peuvent
   rester discrètes sans poser de question de lisibilité. */
.footer-links span {
    margin: 0;
    opacity: 0.5;
}

.footer-text a {
    margin: 0;
    font-size: inherit;
    font-weight: 600;
    opacity: 0.95;
}

.footer-links a:hover,
.footer-text a:hover {
    opacity: 1;
}

/* Bouton d'accès à l'application (haut gauche) */
/* La largeur suit le contenu : c'est le texte qui s'ouvre (max-width animable),
   le bouton s'ajuste. Une largeur fixe au survol coupait le libelle des qu'il
   depassait la valeur codee en dur - « Créer ma page » demande 196px, la regle
   en imposait 170. */
.app-button {
    position: fixed;
    top: 30px;
    left: 30px;
    min-width: 56px;
    width: max-content;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ez-profile-accent-on-light);
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    border: none;
    z-index: 1000;
    text-decoration: none;
    overflow: hidden;
}

.app-button i {
    min-width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-button .app-button-text {
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.app-button:hover {
    justify-content: flex-start;
    border-radius: 50px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
    background: white;
    padding-left: 14px;
}

.app-button:hover .app-button-text {
    opacity: 1;
    /* Plafond de securite, pas une largeur : le texte prend la place qu'il lui
       faut, y compris une fois traduit. */
    max-width: 240px;
    padding-right: 20px;
}

/* Bouton de partage */
.share-button {
    position: fixed;
    top: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ez-profile-accent-on-light);
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    border: none;
    z-index: 1000;
}

.share-button:hover {
    transform: scale(1.1) rotate(15deg);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
    background: white;
}

/* Fenêtre modale de partage */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.modal-overlay.active {
    display: flex;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-content {
    background: white;
    border-radius: 24px;
    padding: 40px;
    max-width: 480px;
    width: 100%;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.4s ease;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f0f0f0;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #666;
    font-size: 18px;
}

.modal-close:hover {
    background: #e0e0e0;
    transform: rotate(90deg);
}

.modal-header {
    text-align: center;
    margin-bottom: 32px;
}

.modal-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.modal-subtitle {
    font-size: 14px;
    color: #666;
}

/* QR code */
.qr-container {
    background: var(--ez-profile-qr-bg);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#qrcode {
    background: white;
    padding: 16px;
    border-radius: 12px;
    display: inline-block;
    line-height: 0;
}

#qrcode canvas {
    display: block !important;
    margin: 0 auto;
}

#qrcode img {
    display: none !important;
}

/* Options de partage */
.share-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.share-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    background: #f8f9fa;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: #1a1a1a;
}

.share-option:hover {
    background: white;
    border-color: var(--ez-profile-accent-on-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.share-option-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
}

.share-option-text {
    font-size: 14px;
    font-weight: 600;
}

.whatsapp-bg {
    background: #25D366;
}

.facebook-bg {
    background: #1877F2;
}

.twitter-bg {
    background: #000000;
}

.email-bg {
    background: #EA4335;
}

.copy-bg {
    background: var(--ez-profile-accent-on-light);
}

.telegram-bg {
    background: #0088cc;
}

/* Copie du lien */
.copy-link-container {
    display: flex;
    gap: 12px;
    align-items: center;
}

.copy-link-input {
    flex: 1;
    padding: 14px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
}

.copy-link-input:focus {
    outline: none;
    border-color: var(--ez-profile-accent-on-light);
}

.copy-link-button {
    padding: 14px 24px;
    background: var(--ez-profile-accent-on-light);
    color: var(--ez-profile-btn-text);
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

.copy-link-button:hover {
    background: var(--ez-profile-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.copy-link-button.copied {
    background: #10b981;
}

/* Bandeau de prévisualisation */
.preview-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 16px 20px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 2001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    animation: slideDown 0.4s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.preview-banner i {
    font-size: 18px;
}

.preview-banner-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

.preview-banner-close {
    position: absolute;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.preview-banner-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

@media (max-width: 768px) {
    /* Raccourci volontairement complet : la forme « padding: 0 16px » remettait
       a zero le padding-top de 75px declare plus haut, et le contenu passait
       sous les boutons flottants qui occupent le haut de l'ecran. */
    .container {
        padding: 90px 16px 0;
    }

    .link-card {
        padding: 18px 20px;
    }

    .username {
        font-size: 20px;
    }

    .app-button {
        top: 20px;
        left: 20px;
        min-width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .app-button i {
        min-width: 50px;
        height: 50px;
    }

    .share-button {
        top: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .modal-content {
        padding: 30px 24px;
    }

    .share-options {
        grid-template-columns: 1fr;
    }

    .copy-link-container {
        flex-direction: column;
    }

    .copy-link-button {
        width: 100%;
    }

    .preview-banner {
        padding: 14px 16px;
        font-size: 13px;
    }

    .preview-banner-text {
        flex-direction: column;
        gap: 4px;
    }
}

/* Mode sombre visiteur : variables surchargées quand data-theme=dark */
:root {
    --pub-overlay-bg: rgba(255, 255, 255, 0.95);
    --pub-text: #1a1a1a;
    --pub-text-muted: #6b7280;
    --pub-card-bg: rgba(255, 255, 255, 0.95);
    --pub-card-border: rgba(255, 255, 255, 0.3);
    --pub-toggle-bg: rgba(255, 255, 255, 0.92);
    --pub-toggle-color: #1a1a1a;
}

html[data-theme="dark"] {
    --pub-overlay-bg: rgba(20, 20, 28, 0.95);
    --pub-text: #f3f4f6;
    --pub-text-muted: #9ca3af;
    --pub-card-bg: rgba(28, 28, 36, 0.92);
    --pub-card-border: rgba(255, 255, 255, 0.12);
    --pub-toggle-bg: rgba(28, 28, 36, 0.92);
    --pub-toggle-color: #f3f4f6;

    /* Le mode sombre visiteur impose son fond a tous les themes, y compris aux
       quatorze themes clairs, mais laissait --ez-profile-text a la couleur du
       theme : l'encre ardoise du theme « Default » (#1f2937) se retrouvait sur
       un fond nuit, soit du gris sur gris. Le pseudo et la bio etaient rattrapes
       un a un plus bas, le pied de page ne l'etait pas. Surcharger la variable
       traite les trois d'un coup, et tout texte a venir pose sur le fond.
       La specificite (0,1,1) l'emporte sur le :root en ligne du gabarit. */
    --ez-profile-text: var(--pub-text);
    --ez-profile-text-muted: var(--pub-text-muted);
    --ez-profile-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* La bascule « mode sombre » du visiteur remplacait le fond par un bleu nuit
   fixe, avec !important, POUR TOUS LES THEMES. Consequence : le fond etait
   strictement le meme quel que soit le theme choisi - le travail du createur
   disparaissait, et sur un theme deja nocturne on remplacait une nuit soignee
   par une nuit generique.

   Le fond du theme reste desormais visible. Sur un theme CLAIR, un voile
   l'assombrit sans effacer sa teinte ; sur un theme deja sombre, la bascule
   n'a rien a assombrir et ne touche a rien. `data-theme-mode` est calcule cote
   serveur a partir de la luminance du fond. */
html[data-theme="dark"] body[data-theme-mode="light"]::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 20, 0.78);
    pointer-events: none;
    z-index: 0;
}

/* Les cartes, elles, sont bien posees sur ce voile : elles doivent suivre. */
html[data-theme="dark"] body[data-theme-mode="light"] .link-card {
    background: var(--pub-card-bg);
    color: var(--pub-text);
}

html[data-theme="dark"] body[data-theme-mode="light"] .link-card:hover {
    background: color-mix(in srgb, var(--ez-profile-accent) 14%, var(--pub-card-bg));
}

html[data-theme="dark"] body[data-theme-mode="light"] .link-title {
    color: var(--pub-text);
}

html[data-theme="dark"] body[data-theme-mode="light"] .social-icon {
    background: var(--pub-card-bg);
}

/* `.link-item` et `.display-name` n'existent pas sur le profil public (le
   gabarit ecrit `.link-card` et `.username`) : ces deux selecteurs ne ciblaient
   rien. Le pseudo et la bio suivent maintenant --ez-profile-text ci-dessus,
   comme le reste du texte pose sur le fond. */
html[data-theme="dark"] .verified-badge,
html[data-theme="dark"] .qr-container,
html[data-theme="dark"] .copy-link-container {
    background: var(--pub-card-bg) !important;
    color: var(--pub-text) !important;
}

.dark-toggle-public {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--pub-toggle-bg);
    color: var(--pub-toggle-color);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: transform 0.2s ease;
}

.dark-toggle-public:hover {
    transform: scale(1.08);
}

/* Navigation au clavier. Cette page ne charge pas la feuille commune : sans ces
   regles, rien n'indique ou l'on se trouve en parcourant les liens au clavier,
   et le champ de copie supprimait meme son anneau natif. */
.link-card:focus-visible,
.social-icon:focus-visible,
.app-button:focus-visible,
.share-button:focus-visible,
.dark-toggle-public:focus-visible,
.copy-link-input:focus-visible,
.footer-links a:focus-visible,
.footer-text a:focus-visible {
    outline: 3px solid var(--ez-profile-accent-on-light);
    outline-offset: 3px;
}

/* Le profil s'appuie entierement sur AOS : chaque bloc nait a opacite nulle et
   n'apparait que si le module a demarre. Un visiteur qui refuse les animations
   - ou dont le module ne charge pas - voyait une page vide. */
@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}