/* _content/PawSeekrWebApp/Components/AccountRestrictions.razor.rz.scp.css */



.acc-load[b-vwjod87vfj] {
    margin: 0;
    font-size: 0.82rem;
    color: var(--ps-muted);
}






/* Interrupteur ROSE et non teal quand il est allumé : dans tout le site le teal dit
   « ça va ». Un réglage qui bride ses propres fiches ne doit pas avoir l'air d'un
   bon état — c'est la seule couleur qui empêche de le lire comme une confirmation. */
.acc-sw[b-vwjod87vfj] {
    position: relative;
    flex: none;
    width: 2.7rem;
    height: 1.55rem;
    margin-top: 0.15rem;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: var(--ps-line);
    cursor: pointer;
}

.acc-sw i[b-vwjod87vfj] {
    position: absolute;
    top: 0.17rem;
    left: 0.17rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 9999px;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: left 0.18s ease;
}

.acc-sw.on[b-vwjod87vfj] {
    background: var(--ps-pink-ink);
}

.acc-sw.on i[b-vwjod87vfj] {
    left: 1.33rem;
}

.acc-sw:focus-visible[b-vwjod87vfj] {
    outline: 3px solid var(--ps-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .acc-sw i[b-vwjod87vfj] { transition: none; }
}












/* _content/PawSeekrWebApp/Components/AddressAutocomplete.razor.rz.scp.css */
/* Saisie de lieu avec suggestions — langage « Récré », tokens uniquement */

/* `flex: 0 1 …` et non `1 1 …` : le champ ne DOIT PAS s'étirer. En le laissant
   grandir, lui et le réglage voisin prenaient chacun la moitié de la barre, qui se
   lisait alors comme deux colonnes au lieu d'une ligne. Il garde donc sa largeur
   confortable et rétrécit seulement quand la place manque. */
.ac[b-toom1f9fvl] {
    position: relative;
    /* Le champ PREND toute la largeur restante (proposition A). Il peut le faire sans
       recouper la barre en deux parce que le réglage de rayon, lui, est en
       `flex: none` : un seul élément élastique, donc une barre et non deux colonnes.
       Nécessaire ici : entre la pastille de source et les deux boutons, plus de 13 rem
       sont consommés, et une adresse belge complète — « Rue de Fer 12, 5000 Namur,
       Belgique » — était tronquée à toute largeur fixe raisonnable. */
    flex: 1 1 18rem;
    min-width: 0;
}

.ac-input[b-toom1f9fvl] {
    width: 100%;
    /* Place à l'icône à gauche et au voyant d'attente à droite. */
    padding-left: 2.3rem;
    padding-right: 2.2rem;
}

/* Deux boutons logés dans le champ : il faut leur dégager la place, sinon la
   saisie passe dessous. */
.ac-input.has-trailing[b-toom1f9fvl] {
    padding-right: 5rem;
}

/* Place à la pastille de source, qui remplace l'icône de lieu à gauche. */
.ac-input.has-src[b-toom1f9fvl] {
    padding-left: 7.6rem;
}

.ac-src[b-toom1f9fvl] {
    position: absolute;
    left: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    max-width: 7rem;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
    border-radius: 9999px;
    padding: 0.2rem 0.3rem 0.2rem 0.55rem;
    font-size: 0.66rem;
    font-weight: 800;
    white-space: nowrap;
}

/* ::deep : le contenu de la pastille vient du fragment SourceBadge, donc de la PAGE
   appelante — il ne porte pas la portée de ce composant. Sans lui, l'icône sortirait
   à sa taille par défaut. */
.ac-src[b-toom1f9fvl]  svg {
    width: 0.85rem;
    height: 0.85rem;
    flex: none;
}

.ac-src-x[b-toom1f9fvl] {
    border: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.15rem 0.2rem;
    border-radius: 9999px;
    cursor: pointer;
    opacity: 0.7;
}

.ac-src-x:hover[b-toom1f9fvl] {
    opacity: 1;
    background: var(--ps-surface);
}

.ac-trailing[b-toom1f9fvl] {
    position: absolute;
    right: 0.28rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    gap: 0.18rem;
}

.ac-ic[b-toom1f9fvl] {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.05rem;
    height: 1.05rem;
    color: var(--ps-accent-ink);
    pointer-events: none;
    z-index: 2;
}

.ac-ic svg[b-toom1f9fvl] {
    width: 100%;
    height: 100%;
    display: block;
}

.ac-busy[b-toom1f9fvl] {
    position: absolute;
    right: 5.2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    line-height: 0;
}

/* ---- Panneau de suggestions ---- */
.ac-panel[b-toom1f9fvl] {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 30;
    background: var(--ps-surface);
    border: 2px solid var(--ps-line);
    border-radius: 0.9rem;
    overflow: hidden;
    box-shadow: 0 14px 34px -18px var(--ps-shadow);
}

.ac-panel ul[b-toom1f9fvl] {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 15rem;
    overflow-y: auto;
}

.ac-panel li[b-toom1f9fvl] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.85rem;
    cursor: pointer;
}

.ac-panel li + li[b-toom1f9fvl] {
    border-top: 1px solid var(--ps-line);
}

.ac-panel li.on[b-toom1f9fvl],
.ac-panel li:hover[b-toom1f9fvl] {
    background: var(--ps-accent-soft);
}

.ac-title[b-toom1f9fvl] {
    font-size: 0.84rem;
    font-weight: 800;
    color: var(--ps-ink);
}

.ac-label[b-toom1f9fvl] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ps-muted);
}

.ac-foot[b-toom1f9fvl],
.ac-empty[b-toom1f9fvl] {
    margin: 0;
    padding: 0.4rem 0.85rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ps-muted);
    background: var(--ps-well);
    border-top: 1px solid var(--ps-line);
}

.ac-empty[b-toom1f9fvl] {
    border-top: none;
    padding: 0.7rem 0.85rem;
    font-size: 0.8rem;
}
/* _content/PawSeekrWebApp/Components/Admin/AdmEmpty.razor.rz.scp.css */
/* La carte au centre exact de l'espace restant : flex:1 dans la colonne
   .admin-content (AdminLayout est passé en flex column le 2026-08-20 pour ça).
   min-height en secours : si le composant vit un jour hors de cette colonne,
   la carte garde une zone respirable au lieu de se coller à la barre. */
.adm-empty-wrap[b-i4xhw8a9cj] {
    flex: 1;
    min-height: 16rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 0;
}

/* La carte : recette .adm-card (surface, rayon 1.25rem, ombre douce), contenu
   centré, échelle dense du back-office. */
.adm-empty[b-i4xhw8a9cj] {
    text-align: center;
    padding: 1.6rem 1.4rem;
    max-width: 22rem;
    background: var(--ps-surface);
    border-radius: 1.25rem;
    box-shadow: 0 10px 26px -20px var(--ps-shadow);
}

.m[b-i4xhw8a9cj] {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.m svg[b-i4xhw8a9cj] {
    width: 1.45rem;
    height: 1.45rem;
}

.t[b-i4xhw8a9cj] {
    margin: 0.75rem 0 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--ps-ink);
}

.s[b-i4xhw8a9cj] {
    margin: 0.25rem 0 0;
    color: var(--ps-muted);
    font-size: 0.8rem;
}

.a[b-i4xhw8a9cj] {
    margin-top: 1rem;
}
/* _content/PawSeekrWebApp/Components/Admin/CardImageBlock.razor.rz.scp.css */
/* Le bloc « image de la tuile ». L'atelier lui-même (.pp-stage, .pp-hole, .pp-zoom)
   vit dans input.css depuis le 2026-08-25 — deuxième usage, donc feuille globale. Il ne
   reste ici que ce qui est propre à ce bloc : le carré et ses actions. */

/* Quand ce bloc OUVRE la colonne de contenu (paramètre First — l'éditeur de produit,
   où l'image passe devant), c'est lui qui annule l'écart du haut que .adm-card donne à
   toutes les cartes. Ailleurs (article, offre) une autre carte le précède : sans la
   classe, il garde l'écart commun et les deux cartes ne se touchent pas.

   ⚠️ La spécificité a été MESURÉE, pas devinée : la règle d'AdminLayout est
   `.admin-content ::deep .adm-card`, qui compile en `.admin-content[b-…] .adm-card` et
   pèse donc (0,3,0) — deux classes et un attribut. Un simple `div.adm-card` scopé pèse
   (0,2,1) et perdait : la carte gardait ses 20 px. En passant par le conteneur du studio
   on obtient `.adm-studio-main div.adm-card[b-…]`, soit (0,3,1), qui l'emporte.

   Et surtout PAS de `:first-of-type` : quand l'atelier s'ouvre, son voile est rendu avant
   la carte et deviendrait « le premier » — la marge sauterait derrière la modale. */
.adm-studio-main div.adm-card.ci-first[b-36b5c9tpoo] {
    margin-top: 0;
}

.ci-body[b-36b5c9tpoo] {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    margin-top: 0.9rem;
}

/* Le carré, à l'échelle du back-office (un cran sous le rond de /profile) : ce studio
   est un outil, la densité y prime. */
.ci-sq[b-36b5c9tpoo] {
    position: relative;
    width: 7.5rem;
    height: 7.5rem;
    flex: none;
    padding: 0;
    border-radius: 1rem;
    overflow: hidden;
    border: 3px solid var(--ps-line);
    background: var(--ps-well);
    font: inherit;
    color: var(--ps-muted-soft);
    display: block;
}

.ci-sq img[b-36b5c9tpoo] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Le cadrage en attente : fond posé en POURCENTAGES (calculé en C#), donc juste à
   n'importe quelle taille de carré, sans mesurer de pixels. */
.ci-sq .shot[b-36b5c9tpoo] {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
}

.ci-sq.empty[b-36b5c9tpoo] {
    display: grid;
    place-items: center;
    border-style: dashed;
    border-color: var(--ps-dash);
}

.ci-sq.empty svg[b-36b5c9tpoo] { width: 2.6rem; height: 2.6rem; }

/* Le seul cas d'attente : la création, où le produit n'existe pas encore. Une ligne
   grise sous l'encart, pas un ruban rouge — rien n'est en défaut, c'est une séquence. */
.ci-pending[b-36b5c9tpoo] {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ps-muted-soft);
}

.ci-side[b-36b5c9tpoo] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ci-acts[b-36b5c9tpoo] { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* L'encart qui dit ce que l'écran ne montre pas : teal quand tout va bien, pêche quand
   il manque quelque chose. Jamais de rouge — il ne manque rien d'obligatoire. */
.ci-well[b-36b5c9tpoo] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 0.65rem 0.75rem;
    border-radius: 0.8rem;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
    font-size: 0.76rem;
    line-height: 1.45;
    font-weight: 600;
}

.ci-well.warn[b-36b5c9tpoo] { background: var(--ps-peach-soft); color: var(--ps-on-peach); }
.ci-well svg[b-36b5c9tpoo] { width: 1rem; height: 1rem; flex: none; margin-top: 0.1rem; }

/* Le choix de fichier est un <label> déguisé en bouton (.adm-upl porte déjà le
   masquage de l'input natif dans AdminLayout) : il ne reste que l'état désactivé, que
   `disabled` ne sait pas donner à un label. */
.ci-acts label.off[b-36b5c9tpoo] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

@media (max-width: 34rem) {
    .ci-body[b-36b5c9tpoo] { flex-direction: column; }
}
/* _content/PawSeekrWebApp/Components/Admin/TranslationTabs.razor.rz.scp.css */
/* Onglets de traduction : soulignement pêche façon marqueur, sur tokens */
.ttabs[b-id3z0utgsj] {
    display: flex;
    gap: 0.3rem;
    border-bottom: 2px solid var(--ps-line);
    margin-bottom: 1rem;
}

.ttab[b-id3z0utgsj] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    background: none;
    font-family: inherit;
    padding: 0.5rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--ps-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    border-radius: 0.6rem 0.6rem 0 0;
}

.ttab:hover[b-id3z0utgsj] {
    background: var(--ps-well);
}

.ttab-on[b-id3z0utgsj] {
    color: var(--ps-ink);
    border-bottom-color: var(--ps-peach);
}

.dot[b-id3z0utgsj] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

/* Sémantique, indépendante de l'accent : complet / incomplet */
.dot-ok[b-id3z0utgsj] {
    background: var(--ps-accent);
}

.dot-todo[b-id3z0utgsj] {
    background: var(--ps-peach);
}
/* _content/PawSeekrWebApp/Components/AuthorProfileBlock.razor.rz.scp.css */
/* ═══ Carte d'auteur — bloc de /profile (2026-08-24, épreuve validée).
   Le gabarit (.ps-block, .ps-block-row, .ps-block-foot) est GLOBAL : on ne pose ici
   que ce qui est propre à ce bloc. ═══ */

/* Les rangées de ce bloc empilent un libellé, un champ et son explication : elles
   se cadrent en haut, pas au milieu comme une rangée d'une seule ligne. */
.ps-block-row.ap-stack[b-oy8iy1uctx] {
    align-items: flex-start;
}

.ap-count[b-oy8iy1uctx] {
    display: block;
    margin-top: 0.3rem;
    text-align: right;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ps-muted-soft);
    font-variant-numeric: tabular-nums;
}

/* Les vingt derniers caractères : on prévient AVANT le mur, pas au moment où la
   frappe cesse de répondre. */
.ap-count.near[b-oy8iy1uctx] {
    color: var(--ps-pink-ink);
}

/* Ce bloc publie : le dire là où on écrit, et pas dans une aide qu'on ne lit pas. */
.ap-public[b-oy8iy1uctx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.8rem;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
    font-size: 0.76rem;
    font-weight: 700;
}

.ap-public svg[b-oy8iy1uctx] {
    width: 1rem;
    height: 1rem;
    flex: none;
}

/* Pour un compte ordinaire, l'encart n'est pas une promesse mais un AVERTISSEMENT :
   sa bio n'est affichée nulle part tant que contactservice n'existe pas. La pêche dit
   « en attente », le teal dirait « c'est en ligne » — deux choses différentes. */
.ap-public.wait[b-oy8iy1uctx] {
    background: var(--ps-peach-soft);
    color: var(--ps-ink);
}
/* _content/PawSeekrWebApp/Components/AuthShell.razor.rz.scp.css */
/* Écrans d'entrée : bandeau photo + carte chevauchante (2026-08-06).

   La photo est posée en fond CSS et non en <img> : c'est une image décorative,
   son texte alternatif est porté par role="img" + aria-label sur le conteneur.
   Elle n'a donc pas à figurer dans l'arbre de contenu. */

.auth-page[b-wqa81faur5] {
    /* Pas d'align-items:center ici : quand la carte est plus haute que
       l'espace (mobile paysage, tablette basse), le centrage flex la fait
       déborder PAR LES DEUX BOUTS et son haut passe sous la barre. */
    padding: 2rem 1rem 3rem;
}

.auth-shell[b-wqa81faur5] {
    width: 100%;
    max-width: 30rem;
    /* margin:auto = centrage sûr dans les deux axes : les marges auto se
       replient à zéro quand la place manque — la carte reste alors collée
       en haut, entièrement visible et défilable, jamais sous la barre. */
    margin: auto;
}

.auth-photo[b-wqa81faur5] {
    height: clamp(9rem, 22vw, 13rem);
    border-radius: 0 0 1.75rem 1.75rem;
    background-image: url("../images/cat_question.jpg");
    background-position: 50% 38%;
}

.auth-card[b-wqa81faur5] {
    position: relative;
    margin: 0 0.75rem;
    padding: 1.5rem;
    border: 1px solid var(--ps-line);
    box-shadow: 6px 8px 20px -8px var(--ps-shadow);
}

@media (min-width: 640px) {
    .auth-card[b-wqa81faur5] {
        padding: 2rem;
        margin-left: 1.25rem;
        margin-right: 1.25rem;
    }
}

/* Chevauchement carte/photo : UNIQUEMENT quand le bandeau existe. Sans photo,
   cette marge négative tirait la carte sous la barre de navigation dès que le
   centrage se repliait en haut (constaté à 420×740 le 2026-08-07). */
.auth-shell:not(.no-photo) .auth-card[b-wqa81faur5] {
    margin-top: -2.5rem;
}

/* ── Variante « studio » : le monde du héros ────────────────────────────────
   Fond #9DCED2 en dur : c'est la couleur du studio de la photo, invariante au
   thème (même règle que le héros — voir Home.razor.css). La carte devient du
   verre, et l'on remappe les tokens à l'INTÉRIEUR : les custom properties
   cascadent dans le contenu de la page sans toucher à ses classes. */

.auth-page.studio[b-wqa81faur5] {
    /* Fond du studio qui FOND vers le fond de page en bas — même geste que la
       jonction héros/section de l'accueil : le pied de page repose sur le fond
       normal, sans coupure, dans les deux thèmes. Paliers en oklab pour éviter
       la bande de Mach (cf. Home.razor.css). */
    background: linear-gradient(180deg,
        #9DCED2 0%,
        #9DCED2 58%,
        color-mix(in oklab, #9DCED2 72%, var(--ps-bg)) 74%,
        color-mix(in oklab, #9DCED2 38%, var(--ps-bg)) 88%,
        var(--ps-bg) 100%);
}

.auth-page.studio .auth-card[b-wqa81faur5] {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.72);
    box-shadow: 0 18px 44px -24px rgba(18, 58, 70, 0.5);

    /* encres du héros, valables clair comme sombre */
    --ps-ink: #123A46;
    --ps-muted: #2E5A63;
    --ps-muted-soft: #4a707a;
    --ps-line: rgba(255, 255, 255, 0.75);
    --ps-well: rgba(255, 255, 255, 0.5);
    --ps-accent: #2E8C99;
    --ps-accent-ink: #2E8C99;

    /* Jetons d'ÉTAT épinglés aussi (épreuve A validée le 2026-10-12) : la carte reste
       du verre CLAIR en sombre, mais ces jetons basculaient en valeurs « lagon » (fonds
       à 18 %, encres pastel) et se posaient sur du clair — notes d'erreur et
       d'avertissement délavées, illisibles (retour d'un testeur). Valeurs du thème
       clair, comme pour les encres ci-dessus : rien ne change en clair. */
    --ps-pink-soft: #FFDCE3;
    --ps-pink-ink: #c2455e;
    --ps-peach-soft: #FFE3BF;
    --ps-accent-soft: #D7EAE9;
    --ps-danger: #dc2626;
}
/* _content/PawSeekrWebApp/Components/CharCounter.razor.rz.scp.css */
.cnt[b-0fc4c1xqrr] {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-align: right;
    color: var(--ps-muted-soft);
    font-variant-numeric: tabular-nums;
}

.cnt.ok[b-0fc4c1xqrr] {
    color: var(--ps-accent-ink);
}

.cnt.err[b-0fc4c1xqrr] {
    color: var(--ps-pink-ink);
}
/* _content/PawSeekrWebApp/Components/CommunicationLanguage.razor.rz.scp.css */




.cl-l[b-557t78o0g7] {
    flex: 1;
    min-width: 12rem;
    font-size: 0.8rem;
    color: var(--ps-muted);
}

.cl-load[b-557t78o0g7] {
    font-size: 0.8rem;
    color: var(--ps-muted-soft);
}

.cl-langs[b-557t78o0g7] {
    display: flex;
    gap: 0.3rem;
}

/* Même gabarit de commande que partout : 2,1 rem de haut, pilule creuse, actif en
   marine plein. */
.cl-langs button[b-557t78o0g7] {
    height: 2.1rem;
    padding: 0 0.75rem;
    border: 2px solid var(--ps-line);
    border-radius: 9999px;
    background: var(--ps-surface);
    color: var(--ps-muted);
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 800;
    cursor: pointer;
}

.cl-langs button.on[b-557t78o0g7] {
    background: var(--ps-btn);
    border-color: transparent;
    color: var(--ps-btn-ink, #ffffff);
}

.cl-langs button:focus-visible[b-557t78o0g7] {
    outline: 3px solid var(--ps-accent);
    outline-offset: 2px;
}


/* _content/PawSeekrWebApp/Components/ConnectedDevices.razor.rz.scp.css */
/* Appareils connectés (2026-10-12) : une pastille d'appareil par ligne, « Cet appareil »
   en teal, sortie en fondu d'une ligne révoquée. Le reste est le vocabulaire .ps-block. */
.dev-row[b-8uk9unn82n] {
    transition: opacity 0.25s, transform 0.25s;
}

.dev-row.leaving[b-8uk9unn82n] {
    opacity: 0;
    transform: translateX(1rem);
}

.dev[b-8uk9unn82n] {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.8rem;
    background: var(--ps-well);
    border: 1.5px solid var(--ps-line);
    color: var(--ps-muted);
}

.dev[b-8uk9unn82n]  svg {
    width: 1.2rem;
    height: 1.2rem;
}

.dev-row.me .dev[b-8uk9unn82n] {
    background: var(--ps-accent-soft);
    border-color: var(--ps-accent);
    color: var(--ps-accent-ink);
}

.dev-badge[b-8uk9unn82n] {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
    vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
    .dev-row[b-8uk9unn82n] { transition: none; }
}
/* _content/PawSeekrWebApp/Components/EmptyState.razor.rz.scp.css */
/* La carte occupe l'espace restant au lieu de se coller sous la barre d'outils
   (2026-08-19) : une liste vide laissait un bloc en haut et un grand vide dessous.
   min-height en vh plutôt qu'une hauteur calculée : la page n'a pas de hauteur
   connue à cet endroit, et 46vh place la carte au bon endroit du premier écran
   sans jamais provoquer de défilement sur un petit téléphone. */
.empty-wrap[b-6dwsnwwqbs] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46vh;
    padding: 1.5rem 0;
}

.empty[b-6dwsnwwqbs] {
    text-align: center;
    padding: 1.9rem 1.5rem;
    max-width: 24rem;
    margin: 0;
}

.m[b-6dwsnwwqbs] {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 9999px;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.m svg[b-6dwsnwwqbs] {
    width: 1.7rem;
    height: 1.7rem;
}

.t[b-6dwsnwwqbs] {
    margin: 0.85rem 0 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--ps-ink);
}

.s[b-6dwsnwwqbs] {
    margin: 0.25rem 0 0;
    color: var(--ps-muted);
    font-size: 0.85rem;
}
/* _content/PawSeekrWebApp/Components/FavoriteStar.razor.rz.scp.css */
.fav-star[b-m6hthtohc3] {
    background: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 9999px;
    width: 2.1rem;
    height: 2.1rem;
    color: #9ca3af;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.fav-star svg[b-m6hthtohc3] {
    width: 1.15rem;
    height: 1.15rem;
}

.fav-star:hover:not(:disabled)[b-m6hthtohc3] {
    color: #f59e0b;
}

.fav-on[b-m6hthtohc3] {
    color: #f59e0b;
}

.fav-star:disabled[b-m6hthtohc3] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* _content/PawSeekrWebApp/Components/FormExpiredNotice.razor.rz.scp.css */
/* Bandeau pleine largeur sous la navbar — même grammaire que .ps-note-warn
   (pêche douce, les deux thèmes suivent par les tokens). */
.fe-band[b-24mjerdgsa] {
    width: 100%;
    background: var(--ps-peach-soft);
    color: var(--ps-ink);

    /* Il s'efface seul (2026-08-19) : accusé de réception, pas état de la page.
       max-height plutôt qu'un simple fondu — le contenu doit remonter, sinon la
       page garde un vide pêche invisible. overflow pour que le texte ne dépasse
       pas pendant la fermeture. */
    overflow: hidden;
    max-height: 6rem;
    animation: fe-vanish-b-24mjerdgsa 0.45s ease 7s forwards;
}

@keyframes fe-vanish-b-24mjerdgsa {
    to {
        opacity: 0;
        max-height: 0;
    }
}

/* Mouvement réduit : il disparaît quand même, sans le fondu. */
@media (prefers-reduced-motion: reduce) {
    .fe-band[b-24mjerdgsa] {
        animation-duration: 0.01s;
    }
}

.fe-in[b-24mjerdgsa] {
    max-width: var(--ps-page-w); /* mesure commune des pages utilisateur (2026-09-18) */
    margin: 0 auto;
    padding: 0.8rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.fe-in svg[b-24mjerdgsa] {
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
    color: var(--ps-accent-ink);
}

.fe-in p[b-24mjerdgsa] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
}
/* _content/PawSeekrWebApp/Components/LanguageSwitcher.razor.rz.scp.css */
.lang-switcher[b-a0crcbx163] {
    display: inline-flex;
    gap: 0.3rem;
    align-items: center;
}

/* La recette des chips de barre (2026-08-19) : crème cerclé au repos, encre
   assourdie, l'actif seul est marine — l'ancienne (blanc + encre pleine) était
   celle que les chips ont abandonnée le même jour. */
.lang-btn[b-a0crcbx163] {
    border: 2px solid var(--ps-line);
    background: var(--ps-well);
    color: var(--ps-muted);
    border-radius: 9999px;
    padding: 0.22rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
}

/* Le survol épargne le bouton actif — même garde-fou que .ps-chip : sans lui,
   l'encre du survol gagnerait sur le marine de l'actif. */
.lang-btn:not(.lang-btn-on):hover[b-a0crcbx163] {
    border-color: var(--ps-accent);
    color: var(--ps-ink);
}

.lang-btn-on[b-a0crcbx163] {
    background: var(--ps-btn);
    border-color: var(--ps-btn);
    color: var(--ps-btn-ink);
}
/* _content/PawSeekrWebApp/Components/LegalDocument.razor.rz.scp.css */
/* Pages légales — gabarit « cartes-chapitres » (épreuve B validée le 2026-09-18).
   Bandeau centré, pile de blocs blancs sur 62 rem, tokens --ps-* partout. Les blocs
   sont rendus par LegalBlock (composant enfant) : leurs règles sont en ::deep ici pour
   qu'un seul fichier fasse le gabarit des deux documents. */

.legal-band[b-zgefxg3ux8] {
    position: relative;
    overflow: hidden;
    margin-top: -1rem;
    padding: 3.2rem 0 5.5rem;
    background:
        radial-gradient(28rem 12rem at 100% -6rem, var(--ps-cyan-soft), transparent 65%),
        radial-gradient(22rem 10rem at 0% 0%, var(--ps-accent-soft), transparent 70%),
        linear-gradient(180deg, var(--ps-peach-soft) 0, var(--ps-bg) 9rem);
}



.legal-inner[b-zgefxg3ux8] {
    max-width: var(--ps-page-w); /* mesure commune des pages utilisateur (2026-09-18) */
    margin: 0 auto;
    padding: 0 1.25rem;
}

.legal-id[b-zgefxg3ux8] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    align-items: center;
    text-align: center;
}

.legal-intro[b-zgefxg3ux8] {
    margin: 0;
    max-width: 44rem;
    font-size: 1.0625rem;
    line-height: 1.55;
}

.legal-chips[b-zgefxg3ux8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
    margin-top: 0.6rem;
}

[b-zgefxg3ux8] .legal-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 2rem;
    padding: 0 0.85rem;
    border-radius: 9999px;
    background: var(--ps-surface);
    border: 2px solid var(--ps-line);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--ps-ink);
    text-decoration: none;
}

[b-zgefxg3ux8] .legal-chip svg {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--ps-accent-ink);
}

[b-zgefxg3ux8] .legal-chip:hover {
    border-color: var(--ps-accent);
}

/* Puce active = marine, comme les pastilles des barres de liste (ps-chip-on). Les puces
   sont des FILTRES (2026-09-18, épreuve validée) : /privacy?topic=… ne rend que le sujet. */
[b-zgefxg3ux8] .legal-chip.on {
    background: var(--ps-btn);
    color: var(--ps-btn-ink);
    border-color: var(--ps-btn);
}

[b-zgefxg3ux8] .legal-chip.on svg {
    color: currentColor;
}

/* Rappel du filtre actif, avec le retour à la page complète. */
[b-zgefxg3ux8] .legal-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
    border-radius: 1rem;
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
}

[b-zgefxg3ux8] .legal-filter a {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 0.9rem;
    border-radius: 9999px;
    border: 2px solid var(--ps-accent);
    color: var(--ps-accent-ink);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
    background: transparent;
}

/* La pile remonte dans le bandeau : le premier bloc chevauche le dégradé. */
.legal-stack[b-zgefxg3ux8] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: -4rem;
}

.legal-draft[b-zgefxg3ux8] {
    margin: 0;
    padding: 0.85rem 1.1rem;
    border-radius: 1rem;
    background: var(--ps-peach-soft);
    border: 1px dashed var(--ps-peach);
    color: var(--ps-ink);
    font-size: 0.875rem;
    font-weight: 700;
}

/* ── Bloc-chapitre (LegalBlock) ── */
[b-zgefxg3ux8] .legal-blk {
    background: var(--ps-surface);
    color: var(--ps-ink);
    border-radius: 1.75rem;
    padding: 1.35rem 1.5rem;
    box-shadow: 0 14px 34px -20px var(--ps-shadow);
    min-width: 0;
}

[b-zgefxg3ux8] .legal-blk-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

[b-zgefxg3ux8] .legal-blk-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.85rem;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
}

[b-zgefxg3ux8] .legal-blk-ic.peach { background: var(--ps-peach-soft); color: var(--ps-on-peach); }
[b-zgefxg3ux8] .legal-blk-ic.cyan { background: var(--ps-cyan-soft); color: var(--ps-cyan-text); }
[b-zgefxg3ux8] .legal-blk-ic.pink { background: var(--ps-pink-soft); color: var(--ps-pink-ink); }

[b-zgefxg3ux8] .legal-blk-ic svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Pastille « Art. n » des conditions générales : même gabarit que la pastille d'icône. */
[b-zgefxg3ux8] .legal-blk-ic.num {
    width: auto;
    min-width: 2.4rem;
    padding: 0 0.6rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* « En clair » : la phrase pour tout le monde, avant le texte qui fait foi. */
[b-zgefxg3ux8] .legal-clair {
    margin-top: 0.9rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0.9rem;
    background: var(--ps-peach-soft);
    color: var(--ps-on-peach);
    font-size: 0.85rem;
    line-height: 1.5;
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
}

[b-zgefxg3ux8] .legal-clair b {
    flex: none;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.2rem;
}

[b-zgefxg3ux8] .legal-blk-t {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ps-ink);
}

[b-zgefxg3ux8] .legal-blk-h {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--ps-muted);
}

[b-zgefxg3ux8] .legal-blk-body {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

[b-zgefxg3ux8] .legal-blk-body p,
[b-zgefxg3ux8] .legal-blk-body li {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--ps-muted);
}

/* Sous-titre : point pêche + petites capitales de la fiche détaillée. */
[b-zgefxg3ux8] .legal-blk-body h3 {
    margin: 0.5rem 0 0;
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--ps-ink);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[b-zgefxg3ux8] .legal-blk-body h3::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--ps-peach);
    flex: none;
}

[b-zgefxg3ux8] .legal-list {
    margin: 0;
    padding-left: 1.2rem;
    list-style: disc; /* le reset Tailwind efface les puces : les remettre */
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

[b-zgefxg3ux8] a {
    color: var(--ps-accent-ink);
    font-weight: 700;
    text-underline-offset: 3px;
}

/* Deux blocs côte à côte (base légale · destinataires). */
[b-zgefxg3ux8] .legal-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 760px) {
    [b-zgefxg3ux8] .legal-two {
        grid-template-columns: 1fr;
    }
}

/* Chiffres clés (durées). */
[b-zgefxg3ux8] .legal-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
}

@media (max-width: 760px) {
    [b-zgefxg3ux8] .legal-facts {
        grid-template-columns: 1fr;
    }
}

[b-zgefxg3ux8] .legal-fact {
    background: var(--ps-well);
    border: 2px solid var(--ps-line);
    border-radius: 1rem;
    padding: 0.75rem 0.9rem;
}

[b-zgefxg3ux8] .legal-fact b {
    display: block;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: var(--ps-ink);
    line-height: 1.1;
}

[b-zgefxg3ux8] .legal-fact small {
    display: block;
    font-size: 0.74rem;
    color: var(--ps-muted);
    margin-top: 0.25rem;
    line-height: 1.35;
}

/* Tableau d'inventaire (cookies et stockage local) : hairlines seulement, et le
   conteneur défile de côté sur mobile pour que la page, elle, ne déborde jamais. */
[b-zgefxg3ux8] .legal-table-wrap {
    overflow-x: auto;
}

[b-zgefxg3ux8] .legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ps-muted);
}

[b-zgefxg3ux8] .legal-table th {
    text-align: left;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ps-ink);
    padding: 0.4rem 0.6rem 0.4rem 0;
    border-bottom: 2px solid var(--ps-line);
    white-space: nowrap;
}

[b-zgefxg3ux8] .legal-table td {
    padding: 0.55rem 0.6rem 0.55rem 0;
    border-bottom: 1px solid var(--ps-line);
    vertical-align: top;
}

[b-zgefxg3ux8] .legal-table code {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.78rem;
    color: var(--ps-ink);
    white-space: nowrap;
}

/* Fait à remplir par le fondateur avant la prod : surligné, impossible à manquer. */
[b-zgefxg3ux8] .legal-todo {
    background: var(--ps-peach-soft);
    color: var(--ps-on-peach);
    font-weight: 800;
    padding: 0 0.3rem;
    border-radius: 0.3rem;
}

/* ── Pied commun : date + question ── */
.legal-foot[b-zgefxg3ux8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.25rem 0;
}

.legal-updated[b-zgefxg3ux8] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ps-muted-soft);
}

.legal-ask[b-zgefxg3ux8] {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--ps-accent-ink);
    text-decoration: none;
    text-underline-offset: 3px;
}

.legal-ask:hover[b-zgefxg3ux8] {
    text-decoration: underline;
}
/* _content/PawSeekrWebApp/Components/LoadingSpinner.razor.rz.scp.css */
/* Pattes dans un CONTRÔLE (bouton pendant un envoi) : nues, à la couleur du texte, foulée
   de la navigation. Les empreintes viennent de PawGlyph (composant enfant) : ::deep. */
.paws[b-8s7ldq3zgd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--sz) * 0.35);
    color: currentColor;
    vertical-align: middle;
}

.paws[b-8s7ldq3zgd]  svg {
    width: var(--sz);
    height: var(--sz);
    flex: none;
    opacity: 0.2;
    animation: ps-paw-step 1.05s infinite;
}

.paws[b-8s7ldq3zgd]  svg:nth-child(2) {
    transform: rotate(12deg) translateY(-2px);
    animation-delay: 0.35s;
}

.paws[b-8s7ldq3zgd]  svg:nth-child(3) {
    transform: rotate(-8deg);
    animation-delay: 0.7s;
}

/* Chargement d'une PAGE (2026-09-18) : la carte de l'upload (.ps-upl-card, .ps-upl-paws,
   .ps-upl-bar — vocabulaire global d'input.css, aucune recette ici), centrée dans les deux
   sens. Les 17 pages posent le loader dans un `mt-10 flex justify-center` qui le calait
   en haut (constat du fondateur) : plutôt que 17 retouches, le bloc se donne lui-même la
   hauteur visible restante — la fenêtre moins la barre (3,5 rem), le pied (5 rem) et sa
   propre marge — et centre la carte dedans. Un `dvh` suit la barre d'adresse mobile. */
.paws-page[b-8s7ldq3zgd] {
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    min-height: max(18rem, calc(100dvh - 3.5rem - 5rem - 2.5rem));
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
    .paws[b-8s7ldq3zgd]  svg {
        animation: none;
        opacity: 1;
    }
}
/* _content/PawSeekrWebApp/Components/MailDeliveryWatch.razor.rz.scp.css */
/* Le contrôle est muet : ce fichier ne porte que la note de REFUS et son bouton support
   (concept validé le 2026-10-12). La note elle-même est le .ps-note-error global, posé
   dans le formulaire ; ici seulement son icône et sa mise en ligne. */
.dlv-note[b-orea4eex5k] {
    margin-top: 1rem;
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    text-align: left;
    font-weight: 700;
}

.dlv-note svg[b-orea4eex5k] {
    width: 1.05rem;
    height: 1.05rem;
    flex: none;
    margin-top: 0.1rem;
}

.dlv-note p[b-orea4eex5k] { margin: 0; }
.dlv-note p + p[b-orea4eex5k] { margin-top: 0.3rem; font-weight: 600; }

.dlv-note code[b-orea4eex5k] {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.74rem;
    background: rgba(0, 0, 0, 0.09);
    border-radius: 0.35rem;
    padding: 0.05rem 0.35rem;
    overflow-wrap: anywhere;
}

/* Bouton support en cas de refus (épreuve validée) : teal plein, relief des boutons du
   site, distinct du gold qui reste l'action première de la carte. */
.dlv-support[b-orea4eex5k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    background: var(--ps-accent);
    color: #fff;
    box-shadow: 0 4px 0 rgba(18, 58, 70, 0.42);
}

.dlv-support:hover:not(:disabled)[b-orea4eex5k] {
    transform: translateY(-1px);
    box-shadow: 0 5px 0 rgba(18, 58, 70, 0.42);
}

.dlv-support:active:not(:disabled)[b-orea4eex5k] {
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgba(18, 58, 70, 0.42);
}

.dlv-support svg[b-orea4eex5k] {
    width: 1.05rem;
    height: 1.05rem;
    flex: none;
}
/* _content/PawSeekrWebApp/Components/MapPointModal.razor.rz.scp.css */
/* Modale de déclaration de perte — carte à épingle fixe (V2 validée le 2026-08-13) */

.ps-scrim[b-9rfydydy29] {
    position: fixed;
    inset: 0;
    background: rgba(26, 34, 64, 0.5);
    display: grid;
    place-items: center;
    z-index: 100;
    padding: 1rem;
}

.lp-modal[b-9rfydydy29] {
    background: var(--ps-surface);
    color: var(--ps-ink);
    border-radius: 1.5rem;
    width: 100%;
    max-width: 30rem;
    box-shadow: 0 24px 60px -20px var(--ps-shadow);
    overflow: hidden;
}

.lp-head[b-9rfydydy29] {
    padding: 1.3rem 1.4rem 0.9rem;
}

.lp-kick[b-9rfydydy29] {
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ps-pink-ink);
    margin: 0;
}

.lp-title[b-9rfydydy29] {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0.25rem 0 0;
}

.lp-text[b-9rfydydy29] {
    font-size: 0.86rem;
    color: var(--ps-muted);
    line-height: 1.5;
    margin: 0.5rem 0 0;
}

.lp-body[b-9rfydydy29] {
    padding: 0 1.4rem 1.2rem;
}

/* ---- La carte ---- */
.lp-map[b-9rfydydy29] {
    position: relative;
    height: 16rem;
    border-radius: 1.1rem;
    overflow: hidden;
    border: 2px solid var(--ps-line);
    background: var(--ps-well);
    cursor: grab;
    /* Indispensable : sans ça, le navigateur mobile intercepte le glissement
       pour faire défiler la page au lieu de déplacer la carte. */
    touch-action: none;
    user-select: none;
}

.lp-map.psmap-dragging[b-9rfydydy29] {
    cursor: grabbing;
}

.lp-map[b-9rfydydy29]  .psmap-layer {
    position: absolute;
    inset: 0;
}

.lp-map[b-9rfydydy29]  .psmap-layer img {
    position: absolute;
    /* 513 et non 512 : les tuiles se recouvrent d'un pixel. Un bord pile a 512
       laisse une couture blanche des que l'echelle de l'ecran n'est pas entiere
       (ecran HiDPI, zoom navigateur), le navigateur n'ayant rien a peindre entre
       deux tuiles adjacentes. L'etirement d'un pixel sur 512 est invisible. */
    width: 513px;
    height: 513px;
    /* ⚠️ INDISPENSABLE : le preflight de Tailwind pose `img,video{max-width:100%;
       height:auto}`. Notre `width` gagne en spécificité, mais tant qu'on ne déclare
       pas `max-width`, celui de Tailwind plafonne la largeur UTILISÉE à celle du
       conteneur : les tuiles tombaient à 431 px alors qu'elles restent posées tous
       les 512 px, laissant des bandes vides de 81 px à intervalle régulier. La
       hauteur, elle, n'était pas touchée — d'où des lignes verticales seulement. */
    max-width: none;
    max-height: none;
    pointer-events: none;
}

.lp-map-loading[b-9rfydydy29] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 5;
    background: var(--ps-well);
}

/* Épingle FIXE au centre : c'est la carte qui bouge dessous.
   Goutte classique dessinée en SVG plutôt qu'un emoji : l'emoji change de dessin
   selon le système (Apple, Android, Windows en donnent trois formes différentes)
   et ne peut pas prendre les couleurs de la marque. */
.lp-pin[b-9rfydydy29] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.6rem;
    height: 2.13rem;
    transform: translate(-50%, -100%);
    z-index: 4;
    pointer-events: none;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.35));
    transition: transform 0.12s ease;
}

.lp-pin path[b-9rfydydy29] {
    fill: var(--ps-pink-ink);
    stroke: #ffffff;
    stroke-width: 1.6;
}

.lp-pin circle[b-9rfydydy29] {
    fill: #ffffff;
}

/* Le repère se soulève pendant le glissement — l'objet suivi devient le point */
.lp-map.psmap-dragging .lp-pin[b-9rfydydy29] {
    transform: translate(-50%, -118%);
}

@media (prefers-reduced-motion: reduce) {
    .lp-pin[b-9rfydydy29] { transition: none; }
}

.lp-dot[b-9rfydydy29] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--ps-pink-ink);
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7);
}

/* Cercle de repère de 50 m autour du point */
.lp-acc[b-9rfydydy29] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
    background: rgba(89, 199, 214, 0.22);
    border: 2px solid rgba(89, 199, 214, 0.75);
}

.lp-zoom[b-9rfydydy29] {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.lp-zoom button[b-9rfydydy29],
.lp-recenter[b-9rfydydy29] {
    border: none;
    background: var(--ps-surface);
    color: var(--ps-ink);
    border-radius: 9999px;
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 2px 0 var(--ps-btn-shadow);
    font-size: 0.95rem;
    font-family: inherit;
    font-weight: 800;
}

.lp-recenter[b-9rfydydy29] {
    position: absolute;
    right: 0.6rem;
    top: 0.6rem;
    z-index: 5;
}

/* ---- Encarts d'information ---- */
.lp-info[b-9rfydydy29] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: var(--ps-cyan-soft);
    border-radius: 0.9rem;
    padding: 0.7rem 0.9rem;
    margin-top: 0.9rem;
}

.lp-info p[b-9rfydydy29] {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--ps-cyan-text);
    font-weight: 600;
}

.lp-info.warn[b-9rfydydy29] {
    background: var(--ps-peach-soft);
}

.lp-info.warn p[b-9rfydydy29] {
    color: var(--ps-on-peach);
}

/* ---- Pied ---- */
.lp-foot[b-9rfydydy29] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 1.4rem 1.3rem;
    background: var(--ps-well);
    border-top: 2px solid var(--ps-line);
    flex-wrap: wrap;
}

.lp-foot-sp[b-9rfydydy29] {
    margin-left: auto;
}

.btn-sm[b-9rfydydy29] {
    padding: 0.5rem 1rem;
    font-size: 0.78rem;
}

.btn-rose[b-9rfydydy29] {
    background: var(--ps-pink-ink);
    color: #ffffff;
}
/* ---- Deux temps : lieu puis détails ---- */

/* La carte reste montée mais cachée à l'étape 2 : la démonter perdrait le point et
   son remontage rechargerait des tuiles, donc des appels facturés pour rien. */
.lp-body.hidden[b-9rfydydy29] {
    display: none;
}

.lp-steps[b-9rfydydy29] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.7rem;
}

.lp-step[b-9rfydydy29] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--ps-muted);
}

.lp-step .n[b-9rfydydy29] {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ps-line);
    color: var(--ps-muted);
    font-size: 0.62rem;
}

.lp-step.on[b-9rfydydy29] {
    color: var(--ps-accent-ink);
}

.lp-step.on .n[b-9rfydydy29] {
    background: var(--ps-accent);
    color: #ffffff;
}

.lp-step-bar[b-9rfydydy29] {
    width: 1.4rem;
    height: 2px;
    background: var(--ps-line);
}

.lp-field[b-9rfydydy29] {
    margin-top: 0.2rem;
}

.lp-opt[b-9rfydydy29] {
    font-weight: 700;
    color: var(--ps-muted);
}

.lp-textarea[b-9rfydydy29] {
    width: 100%;
    border-radius: 0.9rem;
    border: 2px solid var(--ps-line);
    background: var(--ps-well);
    color: var(--ps-ink);
    padding: 0.6rem 0.8rem;
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.5;
    resize: vertical;
}

.lp-textarea:focus[b-9rfydydy29] {
    outline: 3px solid var(--ps-accent-soft);
    border-color: var(--ps-accent-ink);
}

/* Avertissement sur les données personnelles : rose, comme les alertes du site. */
.lp-info.danger[b-9rfydydy29] {
    background: var(--ps-pink-soft);
}

.lp-info.danger p[b-9rfydydy29] {
    color: var(--ps-pink-ink);
}

/* ── Barre d'adresse L1 (2026-08-14) : au-dessus des tuiles, pour que le panneau
   de suggestions ne soit pas rogné par la carte. ── */
.lpm-addr[b-9rfydydy29] {
    position: relative;
    z-index: 30;
    margin-bottom: 0.6rem;
}

/* « Ma position » logé DANS le champ : une commande du champ, pas un objet posé
   à côté — même règle que la barre de /lost-pets. */
.lpm-loc[b-9rfydydy29] {
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: none;
    background: transparent;
    color: var(--ps-accent-ink);
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
}

.lpm-loc svg[b-9rfydydy29] {
    width: 1.1rem;
    height: 1.1rem;
    display: block;
}
/* _content/PawSeekrWebApp/Components/NotFoundView.razor.rz.scp.css */
/* Écran « introuvable » N2 (2026-08-14). Tout aux tokens --ps-*. */

.nf[b-n75vl3vls7] {
    max-width: 30rem;
    margin: 0 auto;
    padding: 2rem 1rem 2.6rem;
    text-align: center;
}

.nf-code[b-n75vl3vls7] {
    margin: 0;
    font-size: 5.2rem;
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--ps-ink);
    user-select: none;
}

/* Le zéro en pêche : le clin d'œil chaud de la marque au milieu du marine. */
.nf-code span[b-n75vl3vls7] { color: var(--ps-peach); }

/* Polaroid : cadre blanc épais, ombre sticker, légère inclinaison — l'erreur
   devient un clin d'œil, pas un mur. */
.nf-pic[b-n75vl3vls7] {
    display: block;
    max-width: 100%;
    margin: 0.7rem auto 1rem;
    border-radius: 1.1rem;
    border: 5px solid var(--ps-surface);
    box-shadow: 0 5px 0 var(--ps-btn-shadow);
    transform: rotate(-2deg);
}

.nf-t[b-n75vl3vls7] {
    margin: 0 0 0.4rem;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--ps-ink);
}

.nf-x[b-n75vl3vls7] {
    margin: 0 0 1.1rem;
    font-size: 0.86rem;
    color: var(--ps-muted);
}

.nf-cta[b-n75vl3vls7] {
    display: inline-block;
    background: var(--ps-btn);
    color: var(--ps-btn-ink);
    border-radius: 9999px;
    padding: 0.6rem 1.4rem;
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
}
/* _content/PawSeekrWebApp/Components/Pager.razor.rz.scp.css */
.pager[b-61yvg5lut4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.pager-btn[b-61yvg5lut4] {
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
    border-radius: 0.375rem;
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.pager-btn:hover:not(:disabled)[b-61yvg5lut4] {
    background: #f3f4f6;
}

.pager-btn:disabled[b-61yvg5lut4] {
    opacity: 0.4;
    cursor: not-allowed;
}

.pager-info[b-61yvg5lut4] {
    font-size: 0.875rem;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}
/* _content/PawSeekrWebApp/Components/PetTraitsPicker.razor.rz.scp.css */
/* Sélecteur de traits — sections « intercalaires » (W2 retravaillé, 2026-08-14). */

.tp-sect[b-40ykelmt51] {
    border: 2px solid var(--ps-line);
    border-radius: 1.1rem;
    overflow: hidden;
}

.tp-sect + .tp-sect[b-40ykelmt51] { margin-top: 0.7rem; }

.tp-h[b-40ykelmt51] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: none;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}

.tp-sect.c.open[b-40ykelmt51] { border-color: var(--ps-peach-soft); }
.tp-sect.c .tp-h[b-40ykelmt51] { background: var(--ps-peach-soft); }
.tp-sect.s.open[b-40ykelmt51] { border-color: var(--ps-cyan-soft); }
.tp-sect.s .tp-h[b-40ykelmt51] { background: var(--ps-cyan-soft); }

.tp-ic[b-40ykelmt51] {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.55rem;
    background: var(--ps-surface);
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    flex: none;
}

.tp-t[b-40ykelmt51] {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--ps-ink);
}

.tp-cnt[b-40ykelmt51] {
    margin-left: auto;
    background: var(--ps-surface);
    color: var(--ps-ink);
    border-radius: 9999px;
    padding: 0.08rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 800;
    flex: none;
}

.tp-ar[b-40ykelmt51] { color: var(--ps-ink); opacity: 0.5; font-size: 0.8rem; }

.tp-b[b-40ykelmt51] {
    padding: 0.75rem 0.9rem 0.9rem;
    background: var(--ps-surface);
}

.tp-hint[b-40ykelmt51] {
    margin: 0 0 0.55rem;
    font-size: 0.72rem;
    color: var(--ps-muted-soft);
}

.tp-chips[b-40ykelmt51] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tp-chip[b-40ykelmt51] {
    border: 2px solid var(--ps-line);
    background: var(--ps-surface);
    color: var(--ps-ink);
    border-radius: 9999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.76rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.tp-chip:hover:not(:disabled)[b-40ykelmt51] { border-color: var(--ps-accent); }

.tp-chip.on[b-40ykelmt51] {
    background: var(--ps-btn);
    border-color: var(--ps-btn);
    color: var(--ps-btn-ink);
}

/* Plafond atteint : seules les chips NON choisies de la section se grisent. */
.tp-chip.off[b-40ykelmt51] {
    opacity: 0.35;
    cursor: not-allowed;
}
/* _content/PawSeekrWebApp/Components/PhotoSlot.razor.rz.scp.css */
/* ═══ Emplacement d'angle (2026-08-24, épreuve validée) — vide, c'est une invitation
   pointillée qui montre l'angle attendu ; rempli, il se referme sur la photo avec une
   coche. Le cadre garde le MÊME rapport dans les deux états : la carte ne bouge pas
   quand on remplit un côté. ═══ */

.slot[b-333lkfsukm] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    aspect-ratio: 4 / 3;
    padding: 0.8rem;
    border: 3px dashed var(--ps-dash);
    border-radius: 1.4rem;
    background: transparent;
    color: var(--ps-muted-soft);
    cursor: pointer;
    overflow: hidden;
    text-align: center;
}

.slot:hover[b-333lkfsukm] {
    border-color: var(--ps-accent);
    color: var(--ps-accent-ink);
}

.slot.busy[b-333lkfsukm] {
    cursor: default;
    opacity: 0.6;
}

/* L'input de InputFile ne porte pas l'attribut de portée : ::deep. Il couvre tout
   l'emplacement — cliquer n'importe où ouvre le sélecteur, et le glisser-déposer
   natif fonctionne. */
.slot[b-333lkfsukm]  .slot-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: inherit;
}

.sil[b-333lkfsukm] {
    width: 3.6rem;
    height: 3.6rem;
    opacity: 0.42;
}

.slot .t[b-333lkfsukm] {
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--ps-ink);
}

.slot .h[b-333lkfsukm] {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    max-width: 11rem;
}

/* Rempli : trait plein teal — l'angle est acquis, et ça se voit de loin. */
.slot.done[b-333lkfsukm] {
    border-style: solid;
    border-color: var(--ps-accent);
    background-size: cover;
    background-position: center;
    cursor: default;
}

/* Le nom de l'angle reste lisible SUR la photo : un dégradé, pas un voile plein —
   la photo doit rester jugeable. */
.slot.done .veil[b-333lkfsukm] {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.7rem;
    background: linear-gradient(to top, rgba(20, 26, 48, 0.72), rgba(20, 26, 48, 0));
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
}

.slot.done .veil svg[b-333lkfsukm] {
    width: 0.9rem;
    height: 0.9rem;
    flex: none;
}

.slot-rm[b-333lkfsukm] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9999px;
    background: rgba(20, 26, 48, 0.6);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
}

.slot-rm:hover[b-333lkfsukm] { background: rgba(20, 26, 48, 0.82); }
.slot-rm:disabled[b-333lkfsukm] { opacity: 0.5; cursor: not-allowed; }

.slot:focus-within[b-333lkfsukm],
.slot-rm:focus-visible[b-333lkfsukm] {
    outline: 2px solid var(--ps-accent);
    outline-offset: 2px;
}
/* _content/PawSeekrWebApp/Components/ProfilePhotoBlock.razor.rz.scp.css */
/* Photo de profil (2026-08-21) — placement du bloc ; les briques (ps-block,
   ps-block-foot, ps-btn) viennent du vocabulaire global. */

/* Pile centrée (2026-08-21, épreuve validée) : le portrait au centre, les actions
   dessous. Le bloc ne penche plus à gauche, et le rond passe de 6 à 8,5 rem — une
   photo de profil mérite d'être vue avant d'être remplacée. */
.pp-row[b-nrjv9bmgc3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 1.3rem;
}

.pp-ava[b-nrjv9bmgc3] {
    /* `display: block` : le cercle est un <span> depuis qu'il vit DANS le bouton —
       en ligne, sa largeur et sa hauteur seraient purement ignorées. */
    display: block;
    width: 8.5rem;
    height: 8.5rem;
    border-radius: 50%;
    overflow: hidden;
    flex: none;
    position: relative;
    border: 3px solid var(--ps-line);
    background: var(--ps-well);
}

.pp-ava img[b-nrjv9bmgc3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pp-ava.empty[b-nrjv9bmgc3] {
    display: grid;
    place-items: center;
    color: var(--ps-muted-soft);
}

.pp-ava.empty svg[b-nrjv9bmgc3] {
    width: 3.2rem;
    height: 3.2rem;
}

/* Ruban « nouvelle » : la photo mise en scène n'est PAS encore enregistrée. */
.pp-new[b-nrjv9bmgc3] {
    position: absolute;
    inset: auto 0 0 0;
    background: rgba(43, 58, 103, 0.75);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 900;
    text-align: center;
    padding: 0.15rem 0;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Les actions en RANG, centrées sous le portrait ; la règle des formats prend sa
   propre ligne (flex-basis 100 %) pour ne pas déséquilibrer la paire de boutons. */
.pp-acts[b-nrjv9bmgc3] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.pp-btn[b-nrjv9bmgc3] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 0.6rem;
    padding: 0.42rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 800;
    border: 2px solid var(--ps-line);
    background: var(--ps-well);
    color: var(--ps-ink);
    cursor: pointer;
    font-family: inherit;
    width: fit-content;
}

/* L'InputFile vit DANS le label-bouton, invisible — le label fait le clic
   (même mécanique que .adm-upl du back-office, hors de portée ici). */
.pp-btn[b-nrjv9bmgc3]  input[type="file"] {
    display: none;
}

.pp-btn svg[b-nrjv9bmgc3] {
    width: 14px;
    height: 14px;
    flex: none;
}

.pp-btn:hover[b-nrjv9bmgc3] {
    border-color: var(--ps-accent);
    background: var(--ps-accent-soft);
}

.pp-btn.danger[b-nrjv9bmgc3] {
    color: var(--ps-pink-ink);
}

.pp-hint[b-nrjv9bmgc3] {
    flex-basis: 100%;
    text-align: center;
    font-size: 0.7rem;
    color: var(--ps-muted-soft);
    margin: 0.15rem 0 0;
}

/* ── Le rond comme bouton (2026-08-21) ────────────────────────────────
   Deux gestes selon l'état : photo en attente → rouvrir l'atelier (rien
   n'est cuit) ; photo enregistrée → l'ouvrir en grand. Jamais les deux
   sens en même temps. */
/* Le BOUTON porte le geste et laisse dépasser le macaron ; le cercle intérieur
   (.pp-ava) porte la découpe de la photo. Les deux étaient confondus, donc le
   macaron — qui déborde de 2 px — se faisait rogner par le `overflow: hidden`
   du cercle. */
.pp-ava-btn[b-nrjv9bmgc3] {
    position: relative;
    flex: none;
    width: 8.5rem;
    height: 8.5rem;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: var(--ps-muted-soft);
    -webkit-appearance: none;
    appearance: none;
}

.pp-ava-btn .pp-ava[b-nrjv9bmgc3] {
    width: 100%;
    height: 100%;
}

.pp-ava-btn.zoom[b-nrjv9bmgc3] { cursor: zoom-in; }
.pp-ava-btn.framed[b-nrjv9bmgc3] { cursor: pointer; }

.pp-ava-btn:focus-visible[b-nrjv9bmgc3] {
    outline: 2px solid var(--ps-accent);
    outline-offset: 3px;
    border-radius: 50%;
}

/* Le cadrage en attente : fond positionné en POURCENTAGES (calculé en C#),
   donc juste à n'importe quelle taille de rond, sans mesurer de pixels. */
.pp-shot[b-nrjv9bmgc3] {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
}

/* Macaron d'action, même idée que le médaillon d'un article : le geste
   possible est annoncé, jamais deviné. */
.pp-badge[b-nrjv9bmgc3] {
    position: absolute;
    right: 2px;
    bottom: 2px;
    z-index: 4;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ps-surface);
    border: 2px solid var(--ps-line);
    color: var(--ps-accent-ink);
    box-shadow: 0 3px 8px var(--ps-shadow);
}

.pp-badge svg[b-nrjv9bmgc3] {
    width: 1rem;
    height: 1rem;
}

.pp-ava-btn:hover .pp-badge[b-nrjv9bmgc3] {
    border-color: var(--ps-accent);
    background: var(--ps-accent-soft);
}

/* ⚠️ L'ATELIER DE CADRAGE A DÉMÉNAGÉ dans input.css le 2026-08-25 (.pp-stage,
   .pp-back, .pp-hole, .pp-rule, .pp-zoom). Deuxième usage — l'image de tuile d'un
   produit — donc on arrête de copier, règle de la feuille globale. Les noms de classe
   n'ont PAS changé : psCrop cherche `.pp-hole` DANS la scène, et le markup d'ici
   continue de fonctionner tel quel. Le reste des `.pp-*` (le rond, ses actions, la
   visionneuse) est propre à ce bloc et reste ici. */
/* _content/PawSeekrWebApp/Components/SexPicker.razor.rz.scp.css */
/* Deux pastilles côte à côte, dans le langage « sticker » du site */

.sex-pick[b-lavzt3bewb] {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.sex-opt[b-lavzt3bewb] {
    flex: 1 1 8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    /* Même hauteur que .ps-input : les pastilles doivent s'aligner sur les autres
       champs de la grille du wizard, sinon la ligne paraît bancale. */
    height: 2.9rem;
    padding: 0 1rem;

    border: 2px solid var(--ps-line);
    border-radius: 9999px;
    background: var(--ps-surface);
    color: var(--ps-ink);

    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.12s ease, border-color 0.12s ease;
}

.sex-opt:hover:not(:disabled):not(.on)[b-lavzt3bewb] {
    border-color: var(--ps-cyan-text);
}

.sex-opt:focus-visible[b-lavzt3bewb] {
    outline: 3px solid var(--ps-cyan-text);
    outline-offset: 2px;
}

.sex-opt.on[b-lavzt3bewb] {
    background: var(--ps-cyan-soft);
    border-color: var(--ps-cyan-text);
    color: var(--ps-cyan-text);
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
    transform: translateY(-1px);
}

.sex-opt:disabled[b-lavzt3bewb] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Le signe ♂/♀ vient d'une autre fonte que le texte : il est cadré un peu plus
   grand pour retomber sur la même hauteur optique que le libellé. */
.sex-sign[b-lavzt3bewb] {
    font-size: 1.05rem;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .sex-opt[b-lavzt3bewb] {
        transition: none;
    }

    .sex-opt.on[b-lavzt3bewb] {
        transform: none;
    }
}
/* _content/PawSeekrWebApp/Components/SkeletonCards.razor.rz.scp.css */
.sk[b-n5a3wqb29o] {
    overflow: hidden;
}

.b[b-n5a3wqb29o] {
    height: 6rem;
    background: var(--ps-well);
    animation: sk-pulse-b-n5a3wqb29o 1.4s ease-in-out infinite;
}

.l[b-n5a3wqb29o] {
    height: 0.7rem;
    border-radius: 9999px;
    background: var(--ps-well);
    margin: 0.75rem 0.9rem 0;
    animation: sk-pulse-b-n5a3wqb29o 1.4s ease-in-out infinite;
}

.l.s[b-n5a3wqb29o] {
    width: 55%;
    margin-bottom: 1rem;
}

/* Silhouette latérale : le carré de 7 rem des cartes d'articles, et le texte
   centré à côté — mêmes mesures que .art-sq / .art-body. */
.sk.row[b-n5a3wqb29o] {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: center;
}

.sk.row .sq[b-n5a3wqb29o] {
    width: 7rem;
    height: 7rem;
    background: var(--ps-well);
    border-radius: 0 0 1.6rem 0;
    animation: sk-pulse-b-n5a3wqb29o 1.4s ease-in-out infinite;
}

.sk.row .txt[b-n5a3wqb29o] {
    padding: 0 0.25rem;
}

.sk.row .l.s[b-n5a3wqb29o] {
    margin-bottom: 0;
}

@keyframes sk-pulse-b-n5a3wqb29o {
    50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    .b[b-n5a3wqb29o], .l[b-n5a3wqb29o], .sk.row .sq[b-n5a3wqb29o] { animation: none; }
}
/* _content/PawSeekrWebApp/Components/TaxonomyCombobox.razor.rz.scp.css */
/* Combobox taxonomie — tokens --ps-* partout, les deux thèmes suivent. */

.combo[b-wec5sc8ip4] {
    position: relative;
}

/* Aligné sur la hauteur unique des formulaires wizard (2.9rem) ; la spécificité
   de l'attribut scoped l'emporte sur le padding du .ps-input global. */
.combo-input[b-wec5sc8ip4] {
    height: 2.9rem;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 2.5rem;
    box-sizing: border-box;
    width: 100%;
}

.combo-input:disabled[b-wec5sc8ip4] {
    opacity: 0.55;
}

.chev[b-wec5sc8ip4] {
    position: absolute;
    right: 0.85rem;
    top: 1.02rem;
    width: 0.85rem;
    height: 0.85rem;
    color: var(--ps-muted-soft);
    pointer-events: none;
    transition: transform 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
    .chev[b-wec5sc8ip4] { transition: none; }
}

.combo.open .chev[b-wec5sc8ip4] {
    transform: rotate(180deg);
}

.combo-input:disabled ~ .chev[b-wec5sc8ip4] {
    opacity: 0.5;
}

.panel[b-wec5sc8ip4] {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--ps-surface);
    border: 2px solid var(--ps-line);
    border-radius: 1rem;
    box-shadow: 0 18px 40px -18px var(--ps-shadow);
    overflow: hidden;
}

.panel-list[b-wec5sc8ip4] {
    max-height: 13.5rem;
    overflow-y: auto;
    padding: 0.35rem;
}

.opt[b-wec5sc8ip4] {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--ps-ink);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.5rem 0.7rem;
    border-radius: 0.6rem;
}

.opt:hover[b-wec5sc8ip4],
.opt.hl[b-wec5sc8ip4] {
    background: var(--ps-accent-soft);
}

.opt.selected[b-wec5sc8ip4] {
    background: var(--ps-cyan-soft);
}

.opt mark[b-wec5sc8ip4] {
    background: transparent;
    color: var(--ps-accent-ink);
    font-weight: 800;
    text-decoration: underline;
}

.panel-empty[b-wec5sc8ip4] {
    padding: 0.9rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ps-muted-soft);
    text-align: center;
}

.panel-count[b-wec5sc8ip4] {
    padding: 0.45rem 0.9rem;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--ps-muted-soft);
    border-top: 2px solid var(--ps-line);
    font-variant-numeric: tabular-nums;
}
/* _content/PawSeekrWebApp/Components/ThemeToggle.razor.rz.scp.css */
/* Bascule de thème — direction « icône nue » (2026-08-07).

   Plus de rond bordé : une icône au trait, grise, qui ne s'affirme qu'au survol.
   Le contrôle s'efface — c'est un réglage, pas une action du parcours. */

.ps-theme-toggle[b-fl8c4ieuva] {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    background: none;
    color: var(--ps-muted-soft);
    cursor: pointer;
}

.ps-theme-toggle svg[b-fl8c4ieuva] {
    width: 1.05rem;
    height: 1.05rem;
    display: block;
}

.ps-theme-toggle:hover[b-fl8c4ieuva] {
    color: var(--ps-ink);
    background: var(--ps-well);
}

.ps-theme-toggle:focus-visible[b-fl8c4ieuva] {
    outline: 2px solid var(--ps-accent);
    outline-offset: 2px;
}
/* _content/PawSeekrWebApp/Components/Toast.razor.rz.scp.css */
/* Toast global : FIXE dans le viewport (visible quel que soit le scroll — un
   « Enregistrer » en bas de page doit montrer sa confirmation), 50px du haut et
   de la droite. z-index 130 : au-dessus de la navbar (20), des tiroirs (110) et
   des lightbox/modales (100). */
.app-toast[b-wa9swzo71x] {
    position: fixed;
    top: 50px;
    right: 50px;
    z-index: 130;
}

/* Avertissement en orangé (2026-09-17) : ni le vert du succès ni le rouge de l'erreur. */
.app-toast .toast-warn[b-wa9swzo71x] {
    background: #f97316;
}

/* Information (annulation, état neutre) : la surface élevée cerclée d'une ligne forte
   (2026-09-18) — ni succès ni erreur, et lisible dans les deux thèmes (l'encre marine
   en fond devenait crème sur crème en sombre). */
.app-toast .toast-info[b-wa9swzo71x] {
    background: var(--ps-elev);
    color: var(--ps-ink);
    border: 1.5px solid var(--ps-line-strong);
}
/* _content/PawSeekrWebApp/Layout/AdminLayout.razor.rz.scp.css */
/* =====================================================================
   Back-office — langage Récré à échelle resserrée.
   Rayons ~2× plus petits que le public, ombres sticker conservées mais
   discrètes, mêmes tokens : le sombre suit sans une seule règle dupliquée.
   ===================================================================== */

.admin-shell[b-kl8uk62yw0] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--ps-bg);
    color: var(--ps-ink);
}

/* La sidebar a été retirée le 2026-08-10 : la navigation admin est le rail
   marine de NavMenu, sous la barre principale. */

.admin-content[b-kl8uk62yw0] {
    position: relative; /* ancre des pattes en filigrane */
    width: 100%;
    max-width: 80rem;             /* aligné sur la barre de navigation */
    margin: 0 auto;
    padding: 2rem 2rem 3rem;
    min-width: 0; /* laisse les tableaux larges défiler au lieu d'élargir la grille */
    /* Pousse le footer en bas de l'écran sur les pages courtes (2026-08-19) :
       .admin-shell est déjà une colonne de 100vh, il ne manquait que ça. */
    flex: 1;
    /* Colonne flex (2026-08-20) : permet à l'état vide AdmEmpty de prendre en
       flex:1 l'espace que la liste aurait occupé, et d'y centrer sa carte.
       Sans effet sur les pages pleines — les enfants restent empilés pleine
       largeur, et les pages n'utilisent que des marges hautes (mt-*), donc
       aucune fusion de marges n'est perdue. */
    display: flex;
    flex-direction: column;
}

@media (max-width: 900px) {
    .admin-content[b-kl8uk62yw0] {
        padding: 1.25rem 1rem 2rem;
    }
}

/* =====================================================================
   Composants admin (::deep : appliqués au contenu des pages enfants)
   ===================================================================== */

.admin-content[b-kl8uk62yw0]  h1 {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ps-ink);
}

.admin-content[b-kl8uk62yw0]  h2 {
    color: var(--ps-ink);
}

.admin-content[b-kl8uk62yw0]  .adm-card {
    background: var(--ps-surface);
    border-radius: 1.25rem;
    box-shadow: 0 10px 26px -20px var(--ps-shadow);
    padding: 1.35rem;
    margin-top: 1.25rem;
}

/* Bandeau de revue (fiche article, ?review=1) : pêche = décision attendue */
.admin-content[b-kl8uk62yw0]  .adm-review {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    background: var(--ps-peach-soft);
    border-radius: 1rem;
    padding: 0.7rem 1rem;
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: var(--ps-ink);
}

.admin-content[b-kl8uk62yw0]  .adm-review .racts { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Cartes de la file d'approbation : liseré pêche = en attente de signature */
.admin-content[b-kl8uk62yw0]  .adm-qcard {
    background: var(--ps-surface);
    border-radius: 1rem;
    box-shadow: 0 10px 26px -18px var(--ps-shadow);
    border-left: 4px solid var(--ps-peach);
    padding: 0.9rem 1.1rem;
    margin-top: 0.9rem;
}

.admin-content[b-kl8uk62yw0]  .adm-qcard .qtop {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    align-items: baseline;
}

.admin-content[b-kl8uk62yw0]  .adm-qcard .qtitle { font-weight: 800; font-size: 0.95rem; color: var(--ps-ink); }
.admin-content[b-kl8uk62yw0]  .adm-qcard .qmeta { font-size: 0.7rem; color: var(--ps-muted); }
.admin-content[b-kl8uk62yw0]  .adm-qcard .qwhat { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.5rem; }
.admin-content[b-kl8uk62yw0]  .adm-qcard .qacts { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.7rem; }

/* Wizard de création d'article : la grammaire du stepper maison — acquis en
   teal, étape courante en pêche, à venir en retrait. */
.admin-content[b-kl8uk62yw0]  .adm-wsteps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.admin-content[b-kl8uk62yw0]  .adm-wsteps .ws {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 9999px;
    font-weight: 800;
    font-size: 0.75rem;
    border: 2px solid var(--ps-line);
    background: var(--ps-well);
    color: var(--ps-muted-soft);
    position: relative;
}

.admin-content[b-kl8uk62yw0]  .adm-wsteps .ws em {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    font-style: normal;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--ps-muted);
    white-space: nowrap;
}

.admin-content[b-kl8uk62yw0]  .adm-wsteps .ws.done { background: var(--ps-accent-soft); border-color: var(--ps-accent); color: var(--ps-accent-ink); }
.admin-content[b-kl8uk62yw0]  .adm-wsteps .ws.now  { background: var(--ps-peach); border-color: var(--ps-peach); color: var(--ps-on-peach); }
.admin-content[b-kl8uk62yw0]  .adm-wsteps .wbar { width: 2.2rem; height: 2px; background: var(--ps-line); }
.admin-content[b-kl8uk62yw0]  .adm-wsteps .wbar.done { background: var(--ps-accent); }
.admin-content[b-kl8uk62yw0]  .adm-wsteps { margin-bottom: 1.6rem; }

/* Choix de l'image d'en-tête (étape 3) : vignettes cliquables */
.admin-content[b-kl8uk62yw0]  .adm-pick {
    border: 3px solid transparent;
    border-radius: 0.6rem;
    padding: 0;
    background: none;
    cursor: pointer;
    overflow: hidden;
}

.admin-content[b-kl8uk62yw0]  .adm-pick img {
    display: block;
    height: 6rem;
    width: 8rem;
    object-fit: cover;
}

.admin-content[b-kl8uk62yw0]  .adm-pick.on { border-color: var(--ps-accent); }

/* Le gabarit « studio split » et sa colonne d'aperçu sticky ont été retirés le
   2026-08-11 : « Prévisualiser » ouvre désormais la vraie page publique
   /articles/{id} dans un nouvel onglet (le staff voit les non-publiés). */

/* Barre d'état de l'article (brouillon / publié / en attente) + Prévisualiser */
.admin-content[b-kl8uk62yw0]  .adm-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.admin-content[b-kl8uk62yw0]  .adm-status .grow { flex: 1; }

/* Sections de contenu : un texte + ses groupes d'images. Repliée, la section
   devient une ligne saisissable au drag & drop — l'ordre à l'écran EST l'ordre
   publié. */
.admin-content[b-kl8uk62yw0]  .adm-section {
    border: 2px solid var(--ps-line);
    border-radius: 0.9rem;
    padding: 0.8rem;
    margin-top: 0.9rem;
    background: var(--ps-surface);
}

.admin-content[b-kl8uk62yw0]  .adm-section.collapsed {
    padding: 0.45rem 0.8rem;
    cursor: grab;
    border-style: dashed;
}

.admin-content[b-kl8uk62yw0]  .adm-section .shead {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Le chevron de section est un jeton .adm-icb depuis le 2026-08-20 (P3) : la
   règle locale ne garde que la rotation douce du SVG. */
.admin-content[b-kl8uk62yw0]  .adm-section .schev svg {
    transition: transform 0.15s;
}

.admin-content[b-kl8uk62yw0]  .adm-section .schev-legacy {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--ps-muted);
    padding: 0.1rem 0.3rem;
}

.admin-content[b-kl8uk62yw0]  .adm-section .stitle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    color: var(--ps-ink);
}

.admin-content[b-kl8uk62yw0]  .adm-section .ssum {
    color: var(--ps-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-content[b-kl8uk62yw0]  .adm-section .sdrag {
    cursor: grab;
    color: var(--ps-muted-soft);
    font-size: 1rem;
    padding: 0 0.2rem;
}

/* Groupe d'images attaché à une section */
.admin-content[b-kl8uk62yw0]  .adm-block {
    border: 2px solid var(--ps-line);
    border-radius: 0.8rem;
    padding: 0.8rem;
    margin-top: 0.9rem;
    background: var(--ps-well);
}

/* Zones explicites d'un groupe d'images : contenu du groupe vs ajout */
.admin-content[b-kl8uk62yw0]  .adm-block .bzone {
    border: 1.5px solid var(--ps-line);
    border-radius: 0.6rem;
    padding: 0.6rem;
    margin-top: 0.6rem;
    background: var(--ps-surface);
}

.admin-content[b-kl8uk62yw0]  .adm-block .bzone-picker {
    border-style: dashed;
    background: transparent;
}

.admin-content[b-kl8uk62yw0]  .adm-block .bzone-title {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ps-muted);
    margin-bottom: 0.4rem;
}

.admin-content[b-kl8uk62yw0]  .adm-block .bhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.admin-content[b-kl8uk62yw0]  .adm-block .btype {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ps-muted);
}

.admin-content[b-kl8uk62yw0]  .adm-block .bacts { display: flex; gap: 0.35rem; }

.admin-content[b-kl8uk62yw0]  .adm-block .bimgs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.admin-content[b-kl8uk62yw0]  .adm-block .bimg {
    position: relative;
    display: inline-block;
    border: 2px solid var(--ps-line);
    border-radius: 0.5rem;
    overflow: hidden;
    padding: 0;
    background: none;
}

.admin-content[b-kl8uk62yw0]  .adm-block .bimg img {
    display: block;
    height: 4.5rem;
    width: 6rem;
    object-fit: cover;
}

.admin-content[b-kl8uk62yw0]  .adm-block .bimg .iacts {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    gap: 0.2rem;
    background: color-mix(in srgb, var(--ps-ink) 55%, transparent);
    padding: 0.1rem 0;
}

.admin-content[b-kl8uk62yw0]  .adm-block .bimg .iacts button {
    border: none;
    background: none;
    color: var(--ps-surface);
    font-size: 0.72rem;
    cursor: pointer;
    padding: 0 0.25rem;
}

.admin-content[b-kl8uk62yw0]  .adm-block .bimg .iacts button:disabled { opacity: 0.4; cursor: not-allowed; }

.admin-content[b-kl8uk62yw0]  .adm-block .badd { cursor: pointer; }

.admin-content[b-kl8uk62yw0]  .adm-block .badd .plus {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--ps-surface);
    background: color-mix(in srgb, var(--ps-ink) 35%, transparent);
    opacity: 0;
}

.admin-content[b-kl8uk62yw0]  .adm-block .badd:hover .plus { opacity: 1; }

/* Actions de fin de section (attacher des images) : espacées du groupe précédent */
.admin-content[b-kl8uk62yw0]  .adm-section .badders {
    display: flex;
    gap: 0.4rem;
    margin-top: 1.1rem;
}

/* Insertion de section ENTRE les sections : le bouton insère là où il s'affiche */
.admin-content[b-kl8uk62yw0]  .sinsert {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
    opacity: 0.55;
}

.admin-content[b-kl8uk62yw0]  .sinsert:hover { opacity: 1; }

.admin-content[b-kl8uk62yw0]  .sinsert::before,
.admin-content[b-kl8uk62yw0]  .sinsert::after {
    content: "";
    flex: 1;
    border-top: 1px dashed var(--ps-line);
}

/* Bouton de téléversement : un vrai bouton, l'input fichier natif est caché */
.admin-content[b-kl8uk62yw0]  .adm-upl {
    cursor: pointer;
    display: inline-flex;
}

.admin-content[b-kl8uk62yw0]  .adm-upl input[type="file"] { display: none; }

/* Vignette déplaçable au drag & drop dans son groupe */
.admin-content[b-kl8uk62yw0]  .adm-block .bimg.draggable { cursor: grab; }

.admin-content[b-kl8uk62yw0]  .adm-block .bimg.dragging {
    opacity: 0.35;
    border-style: dashed;
    border-color: var(--ps-accent);
}

/* Photo du sélecteur déjà placée dans une autre section : proposable, mais marquée */
.admin-content[b-kl8uk62yw0]  .adm-block .bimg.used { opacity: 0.45; }
.admin-content[b-kl8uk62yw0]  .adm-block .bimg.used:hover { opacity: 1; }

/* Modale de confirmation des suppressions */
.admin-content[b-kl8uk62yw0]  .adm-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(26, 34, 64, 0.55);
    display: grid;
    place-items: center;
    z-index: 100;
}

.admin-content[b-kl8uk62yw0]  .adm-modal {
    background: var(--ps-surface);
    border-radius: 0.9rem;
    padding: 1.2rem 1.4rem;
    max-width: 24rem;
    margin: 1rem;
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.5);
}

.admin-content[b-kl8uk62yw0]  .adm-modal p {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--ps-ink);
}

.admin-content[b-kl8uk62yw0]  .adm-modal .macts {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
}

/* Recherche de la liste d'articles : largeur contenue, le reste de la barre suit */
.admin-content[b-kl8uk62yw0]  .adm-search { max-width: 18rem; }

/* La pagination de la galerie d'article vit désormais dans le vocabulaire
   .adm-media-pager (grille de médias, 2026-08-21). */

/* Barre d'actions collante (édition d'article) : Enregistrer reste sous la
   main, plus de scroll pour sauver. Les marges négatives épousent le padding
   de .adm-card (1.35rem) et son rayon bas. */
.admin-content[b-kl8uk62yw0]  .adm-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--ps-well);
    border-top: 1px solid var(--ps-line);
    margin: 1.25rem -1.35rem -1.35rem;
    padding: 0.7rem 1.35rem;
    border-radius: 0 0 1.25rem 1.25rem;
}

/* Les pastilles de langues .adm-lang sont mortes le 2026-08-21 avec la colonne
   Langues de la liste d'articles : les trois langues sont obligatoires à la
   création, la colonne était toujours pleine. */

/* Emplacement d'image vide (liste d'articles) : le cadre pointillé dit
   « il manque le visuel » sans casser l'alignement des vignettes. */
.admin-content[b-kl8uk62yw0]  .adm-noimg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    width: 3rem;
    border-radius: 0.375rem;
    border: 2px dashed var(--ps-line);
    color: var(--ps-muted-soft);
    font-size: 0.9rem;
}

/* Lignes éteintes (offres expirées) : présentes pour renouveler, grisées */
.admin-content[b-kl8uk62yw0]  tr.adm-dim td { opacity: 0.5; }

/* ═══ Bande d'étapes (commandes — épreuve A « Registre » validée le 2026-09-18,
   remplace les gros boutons du pipeline) : UN conteneur au vocabulaire des tableaux,
   une case par étape avec son compteur, un point de sa couleur, un filet de la même
   couleur sous l'étape active. « Payées » est l'étape chaude : compteur en teal. ═══ */
.admin-content[b-kl8uk62yw0]  .adm-strip {
    display: flex;
    margin-top: 1rem;
    background: var(--ps-surface);
    border: 1.5px solid var(--ps-line);
    border-radius: 1rem;
    overflow: hidden;
}

.admin-content[b-kl8uk62yw0]  .adm-stage {
    --c: var(--ps-ink);
    position: relative;
    flex: 1 1 0;
    min-width: 7rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    padding: 0.75rem 2rem 0.75rem 1rem; /* la place du point à droite */
    border: 0;
    border-left: 1.5px solid var(--ps-line);
    background: transparent;
    color: var(--ps-ink);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.admin-content[b-kl8uk62yw0]  .adm-stage:first-child { border-left: 0; }
.admin-content[b-kl8uk62yw0]  .adm-stage:hover,
.admin-content[b-kl8uk62yw0]  .adm-stage.on { background: var(--ps-well); }

.admin-content[b-kl8uk62yw0]  .adm-stage.on::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--c);
}

.admin-content[b-kl8uk62yw0]  .adm-stage .n {
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.admin-content[b-kl8uk62yw0]  .adm-stage .l {
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.25;
    color: var(--ps-muted);
}

.admin-content[b-kl8uk62yw0]  .adm-stage .dot {
    position: absolute;
    top: 0.8rem;
    right: 0.9rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 9999px;
    background: var(--c);
}

.admin-content[b-kl8uk62yw0]  .adm-stage.hot .n { color: var(--ps-accent-ink); }
.admin-content[b-kl8uk62yw0]  .adm-stage.s-wait { --c: var(--ps-peach); }
.admin-content[b-kl8uk62yw0]  .adm-stage.s-paid { --c: var(--ps-accent); }
.admin-content[b-kl8uk62yw0]  .adm-stage.s-prod { --c: var(--ps-cyan); }
.admin-content[b-kl8uk62yw0]  .adm-stage.s-ship { --c: var(--ps-accent-ink); }
.admin-content[b-kl8uk62yw0]  .adm-stage.s-done { --c: var(--ps-muted-soft); }
.admin-content[b-kl8uk62yw0]  .adm-stage.s-cancel { --c: var(--ps-pink-ink); }

@media (max-width: 900px) {
    .admin-content[b-kl8uk62yw0]  .adm-strip { flex-wrap: wrap; }
    .admin-content[b-kl8uk62yw0]  .adm-stage { flex: 1 1 33%; }
}

/* Sous-titre de compte à côté du h1 (« 12 commandes »). */
.admin-content[b-kl8uk62yw0]  .adm-h1-sub {
    margin-left: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ps-muted);
    letter-spacing: 0;
    text-transform: none;
    vertical-align: 0.15rem;
}

/* Petites capitales accent (P3 éditeur, 2026-08-20) : l'échelle « fiche
   détaillée » du client, appliquée à TOUS les labels de formulaire admin. */
.admin-content[b-kl8uk62yw0]  .adm-lbl {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ps-accent-ink);
    margin: 0.85rem 0 0.3rem;
}

.admin-content[b-kl8uk62yw0]  .adm-inp {
    width: 100%;
    background: var(--ps-well);
    color: var(--ps-ink);
    border: 2px solid var(--ps-line);
    border-radius: 0.7rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.875rem;
    font-family: inherit;
}

.admin-content[b-kl8uk62yw0]  .adm-inp:focus {
    border-color: var(--ps-accent);
    outline: none;
}

.admin-content[b-kl8uk62yw0]  .adm-inp::placeholder {
    color: var(--ps-muted-soft);
}

/* Sélecteurs au gabarit des champs (2026-08-21) : l'apparence native dépassait de
   2 px et son dessin dépendait du système. Apparence neutralisée = même boîte que
   .adm-inp (mesuré : 34 px, identique), chevron SVG maison à droite. Le data-URI
   ne peut pas lire les tokens : encre assourdie du clair ici, redéclarée pour le
   sombre juste dessous. */
/* Champ en LECTURE SEULE (fiche de campagne, 2026-09-15) : fond puits, encre
   assourdie, curseur neutre — un champ, pas une case de saisie. */
.admin-content[b-kl8uk62yw0]  .adm-inp[readonly],
.admin-content[b-kl8uk62yw0]  .adm-inp:disabled {
    background: var(--ps-well);
    color: var(--ps-muted);
    cursor: default;
    opacity: 1;
}

.admin-content[b-kl8uk62yw0]  select.adm-inp {
    appearance: none;
    padding-right: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354608a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 0.85rem;
    cursor: pointer;
}

:root[data-theme="dark"] .admin-content[b-kl8uk62yw0]  select.adm-inp {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D3E0E4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.admin-content[b-kl8uk62yw0]  select.adm-inp:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Bouton : même ombre pleine décalée que le public, en plus compact */
.admin-content[b-kl8uk62yw0]  .adm-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--ps-btn);
    color: var(--ps-btn-ink);
    font-weight: 750;
    font-size: 0.8rem;
    font-family: inherit;
    border: none;
    border-radius: 9999px;
    padding: 0.45rem 1rem;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.admin-content[b-kl8uk62yw0]  .adm-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 0 var(--ps-btn-shadow);
}

.admin-content[b-kl8uk62yw0]  .adm-btn:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 2px 0 var(--ps-btn-shadow);
}

.admin-content[b-kl8uk62yw0]  .adm-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.admin-content[b-kl8uk62yw0]  .adm-btn-ghost {
    background: transparent;
    color: var(--ps-ink);
    box-shadow: none;
    outline: 2px solid var(--ps-line);
    outline-offset: -2px;
}

.admin-content[b-kl8uk62yw0]  .adm-btn-ghost:hover:not(:disabled) {
    background: var(--ps-bg);
    outline-color: var(--ps-accent);
    box-shadow: none;
}

.admin-content[b-kl8uk62yw0]  .adm-btn-danger {
    background: var(--ps-danger);
    color: #ffffff;
    box-shadow: 0 3px 0 rgba(153, 27, 27, 0.35);
}

.admin-content[b-kl8uk62yw0]  .adm-btn-danger:hover:not(:disabled) {
    box-shadow: 0 4px 0 rgba(153, 27, 27, 0.35);
}

/* Danger en CREUX (2026-09-15) : le geste destructeur d'un rail d'actions, à côté
   de boutons creux — plein, il hurlerait ; creux et rose, il se voit sans dominer.
   La modale qui suit porte le plein. */
.admin-content[b-kl8uk62yw0]  .adm-btn-danger-ghost {
    background: transparent;
    color: var(--ps-pink-ink);
    box-shadow: none;
    outline: 2px solid var(--ps-pink-soft);
    outline-offset: -2px;
}

.admin-content[b-kl8uk62yw0]  .adm-btn-danger-ghost:hover:not(:disabled) {
    background: var(--ps-pink-soft);
    outline-color: var(--ps-pink-ink);
    box-shadow: none;
    transform: none;
}

/* Tableau : carte arrondie, en-têtes en petites capitales, lignes sans bordure dure */
.admin-content[b-kl8uk62yw0]  .adm-table-wrap {
    overflow-x: auto;
    margin-top: 1rem;
    border-radius: 1.25rem;
    box-shadow: 0 10px 26px -20px var(--ps-shadow);
}

.admin-content[b-kl8uk62yw0]  .adm-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--ps-surface);
    font-size: 0.85rem;
    color: var(--ps-ink);
}

/* ═══ En-tête de colonne TRIABLE (2026-09-18, épreuve validée — composant SortHeader).
   Le bouton hérite tout du th : la colonne triable ne se distingue que par sa flèche,
   grise et pâle au repos, teal et pleine sur la colonne active (pointe vers le haut =
   croissant, retournée = décroissant), plus un filet teal sous l'en-tête actif. Les
   colonnes non triables n'ont ni flèche ni survol. Remplace les pilules « Récents /
   Anciens » et « Code · Prix ↑ · Prix ↓ » des barres d'outils. ═══ */
.admin-content[b-kl8uk62yw0]  .adm-table th {
    position: relative;
}

.admin-content[b-kl8uk62yw0]  .adm-sort {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    border-radius: 0.3rem;
    transition: color 0.15s;
}

.admin-content[b-kl8uk62yw0]  .adm-sort:hover {
    color: var(--ps-ink);
}

.admin-content[b-kl8uk62yw0]  .adm-sort:focus-visible {
    outline: 2px solid var(--ps-accent);
    outline-offset: 2px;
}

.admin-content[b-kl8uk62yw0]  .adm-sort-ic {
    width: 0.8rem;
    height: 0.8rem;
    flex: none;
    opacity: 0.35;
    transition: opacity 0.15s, transform 0.15s;
}

.admin-content[b-kl8uk62yw0]  .adm-sort:hover .adm-sort-ic { opacity: 0.7; }

.admin-content[b-kl8uk62yw0]  .adm-sort.on { color: var(--ps-accent-ink); }
.admin-content[b-kl8uk62yw0]  .adm-sort.on .adm-sort-ic { opacity: 1; }
.admin-content[b-kl8uk62yw0]  .adm-sort.on.desc .adm-sort-ic { transform: scaleY(-1); }

.admin-content[b-kl8uk62yw0]  .adm-sort.on::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0;
    height: 2px;
    background: var(--ps-accent);
}

/* L'en-tête centré (étoile) garde son bouton au centre. */
.admin-content[b-kl8uk62yw0]  .adm-table th.mid .adm-sort { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
    .admin-content[b-kl8uk62yw0]  .adm-sort,
    .admin-content[b-kl8uk62yw0]  .adm-sort-ic { transition: none; }
}

.admin-content[b-kl8uk62yw0]  .adm-table th {
    text-align: left;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ps-muted-soft);
    font-weight: 800;
    background: var(--ps-well);
    padding: 0.7rem 1rem;
    white-space: nowrap;
}

.admin-content[b-kl8uk62yw0]  .adm-table td {
    padding: 0.65rem 1rem;
    border-top: 1px solid var(--ps-line);
    vertical-align: middle;
}

.admin-content[b-kl8uk62yw0]  .adm-table tbody tr:hover {
    background: var(--ps-bg);
}

/* ═══ Accroche sous le nom d'une rangée (2026-08-24) — vocabulaire commun aux
   trois listes qui en portent une : produits, articles et offres. Née locale sur
   la liste produits, promue ici dès le deuxième usage (règle de la feuille
   globale : jamais de recette locale pour un besoin qui se répète).

   UNE ligne, coupée aux points de suspension : la hauteur d'une rangée ne dépend
   jamais de la longueur d'un texte. ⚠️ La borne se pose sur le TEXTE, pas sur la
   cellule — sans elle, la cellule s'étire sur toute la phrase, le tableau dépasse
   la page et c'est `.adm-table-wrap` qui coupe, sans ellipse et en ajoutant une
   barre de défilement.

   Le filet pointillé est TOUJOURS là, transparent tant que le texte tient :
   sinon une accroche coupée serait 1 px plus haute que sa voisine et la colonne
   se mettrait à onduler. `.is-cut` est posée par psTip.mark() après MESURE
   (scrollWidth vs clientWidth), jamais d'après une longueur devinée ; c'est elle
   qui colore le filet ET qui autorise la bulle (vocabulaire .ps-tip, input.css).
   Grammaire universelle du « passe dessus, il y a la suite » — celle de `abbr` —
   et elle ne coûte pas un pixel de largeur. ═══ */
/* ═══ Depuis le 2026-08-25 la coupe vient d'ABORD du texte : AdminTeaserText.Clamp
   borne l'accroche à 25 caractères (points de suspension compris) et pose
   `data-tip-always`, qui prend le relais de la mesure de psTip. Une colonne large
   finissait quand même par tronquer, en poussant les colonnes suivantes vers la
   droite ; 25 caractères de texte courant mesurent ~9,5rem, la laisse ci-dessous
   n'est plus qu'un garde-fou (capitales, glyphes larges) et vaut le MÊME 10,5rem
   sur les trois listes. ═══ */
.admin-content[b-kl8uk62yw0]  .adm-teaser {
    display: block;
    max-width: var(--adm-tw, 10.5rem);
    font-weight: 400;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--ps-muted-soft);
}

/* Quand l'accroche est une SECONDE LIGNE sous le nom, et non une colonne : le cas
   de la liste produits, où le nom et l'accroche sont deux textes bien distincts —
   la seconde ligne n'y trompe personne. Ailleurs (articles, offres) elle a sa
   propre colonne depuis le 2026-08-24. */
.admin-content[b-kl8uk62yw0]  .adm-teaser.under { margin-top: 0.15rem; }

/* Le nom d'un élément listé quand il n'est PAS une pastille-lien (le partenaire
   d'une offre) : même laisse, à sa taille de texte normale. */
.admin-content[b-kl8uk62yw0]  .adm-name {
    display: block;
    max-width: var(--adm-nw, 12rem);
    font-weight: 600;
}

/* Le texte D'UNE PASTILLE-LIEN. La laisse se pose sur la pastille (elle porte la
   bordure) et la coupe sur le texte : l'icône « sort d'ici » doit rester visible,
   c'est elle qui dit que le nom est un lien. */
.admin-content[b-kl8uk62yw0]  .adm-name-pill { white-space: nowrap; }
.admin-content[b-kl8uk62yw0]  .adm-name-pill.bound { max-width: var(--adm-pw, 14rem); }

/* ═══ Cellule de titre ÉLASTIQUE (2026-09-17, épreuve validée). La laisse de 15 rem sur
   la pastille ne suffisait plus : avec neuf colonnes, un titre de 60 caractères qui va
   au bout de sa laisse faisait dépasser le tableau de 63 px et sortir la barre de
   défilement. `max-width: 0` retire la cellule du calcul des largeurs minimales — elle
   ne réclame rien — et `width: 100%` lui donne ce qui reste une fois les autres colonnes
   servies ; la pastille se coupe dedans, la bulle garde le titre entier. `min-width`
   pour qu'elle ne disparaisse pas. Sous ~1100 px le tableau défile encore, à cause de
   la colonne des actions : c'est le comportement voulu de .adm-table-wrap. ═══ */
.admin-content[b-kl8uk62yw0]  .adm-table td.adm-title-cell {
    width: 100%;
    max-width: 0;
    min-width: 9rem;
}

.admin-content[b-kl8uk62yw0]  .adm-table td.adm-title-cell .adm-name-pill.bound { max-width: 100%; }

/* ═══ Cellules ÉLASTIQUES à plusieurs (offres, 2026-09-17). Quand un tableau a plus de
   textes bornés que de place — offres : partenaire, titre, accroche, code —, une seule
   cellule élastique ne suffit plus : les laisses des autres (10,5 rem chacune) font
   encore dépasser le tableau de 76 px à 1280 px. `.adm-fit` retire la cellule du calcul
   des minimums (max-width: 0) et lui donne une PART de ce qui reste (`--fit`, en %) ;
   les textes bornés à l'intérieur se coupent à 100 % de la cellule au lieu de leur
   laisse. Le tableau ne défile plus jamais à cause d'un texte : il partage. ═══ */
.admin-content[b-kl8uk62yw0]  .adm-table td.adm-fit {
    max-width: 0;
    width: var(--fit, 100%);
}

.admin-content[b-kl8uk62yw0]  .adm-table td.adm-fit .adm-name,
.admin-content[b-kl8uk62yw0]  .adm-table td.adm-fit .adm-teaser,
.admin-content[b-kl8uk62yw0]  .adm-table td.adm-fit .adm-code,
.admin-content[b-kl8uk62yw0]  .adm-table td.adm-fit .adm-name-pill.bound { max-width: 100%; }

/* ═══ La grammaire des textes BORNÉS (2026-08-24) — un seul geste à connaître.
   Un tableau se partage la largeur tout seul, et rien n'y est coupable sauf du
   texte : une date, un code, une pastille imposent leur taille. Chaque colonne
   ajoutée est donc payée par les textes, qui passent à la ligne et font varier la
   hauteur des rangées. La laisse (max-width + nowrap + ellipse) leur rend une
   hauteur fixe ; le filet pointillé dit qu'il y a une suite, et psTip.mark() ne le
   pose QUE sur ce qui déborde vraiment (mesure, pas devinette). ═══ */
/* Un code promo dans une colonne (offres, 2026-09-17) : même laisse que le nom. */
.admin-content[b-kl8uk62yw0]  .adm-code {
    display: block;
    max-width: var(--adm-cw, 10.5rem);
}

.admin-content[b-kl8uk62yw0]  .adm-code,
.admin-content[b-kl8uk62yw0]  .adm-teaser,
.admin-content[b-kl8uk62yw0]  .adm-name,
.admin-content[b-kl8uk62yw0]  .adm-name-pill .np-t {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px dotted transparent;   /* toujours là : sinon la colonne ondule */
    padding-bottom: 1px;
}

.admin-content[b-kl8uk62yw0]  .adm-code.is-cut,
.admin-content[b-kl8uk62yw0]  .adm-teaser.is-cut,
.admin-content[b-kl8uk62yw0]  .adm-name.is-cut,
.admin-content[b-kl8uk62yw0]  .adm-name-pill .np-t.is-cut {
    border-bottom-color: var(--ps-muted-soft);
    cursor: help;
}

.admin-content[b-kl8uk62yw0]  .adm-teaser.is-cut {
    transition: color 0.12s ease, border-color 0.12s ease;
}

.admin-content[b-kl8uk62yw0]  .adm-teaser.is-cut:hover {
    color: var(--ps-accent-ink);
    border-bottom-color: var(--ps-accent);
}

@media (prefers-reduced-motion: reduce) {
    .admin-content[b-kl8uk62yw0]  .adm-teaser.is-cut { transition: none; }
}

/* ═══ Colonne d'un OUI/NON (2026-08-24) : « Spéciale » quitte la cellule du titre,
   où la pastille dorée tombait à la ligne et faisait grandir la rangée. Une case
   à cocher INERTE — elle dit, elle ne fait pas : la mise en avant se règle dans la
   fiche. Cochée, elle prend l'or de la marque, la couleur que le visiteur voit sur
   le coupon. `disabled` seul suffirait à la neutraliser, mais il la grise ; on la
   garde donc lisible et on retire seulement le pointeur et le focus. ═══ */
.admin-content[b-kl8uk62yw0]  .adm-flag {
    appearance: none;
    -webkit-appearance: none;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    border: 1.5px solid var(--ps-line);
    border-radius: 0.3rem;
    background: var(--ps-surface);
    display: inline-grid;
    place-content: center;
    vertical-align: middle;
    cursor: default;
}

.admin-content[b-kl8uk62yw0]  .adm-flag::before {
    content: "";
    width: 0.58rem;
    height: 0.58rem;
    transform: scale(0);
    background: var(--ps-gold-ink);
    clip-path: polygon(14% 47%, 0 61%, 40% 100%, 100% 20%, 85% 7%, 38% 71%);
}

.admin-content[b-kl8uk62yw0]  .adm-flag:checked {
    background: var(--ps-gold);
    border-color: var(--ps-gold);
}

.admin-content[b-kl8uk62yw0]  .adm-flag:checked::before { transform: scale(1); }

/* L'étoile d'en-tête : le mot « Spéciale » ne tenait pas dans le budget de la
   largeur (mesuré : 89 px de trop), et un en-tête ne se coupe jamais. L'étoile
   dorée dit déjà « mise en avant » dans toute l'application ; sa bulle donne le
   mot. */
.admin-content[b-kl8uk62yw0]  .adm-th-star {
    width: 0.95rem;
    height: 0.95rem;
    display: inline-block;
    vertical-align: middle;
    color: var(--ps-muted-soft);
    cursor: help;
}

.admin-content[b-kl8uk62yw0]  .adm-table th.mid,
.admin-content[b-kl8uk62yw0]  .adm-table td.mid { text-align: center; }

/* ═══ Fil d'Ariane des pages principales du back-office (2026-08-21) : chaque
   page du rail porte « ← Admin » au-dessus de son titre, retour au tableau de
   bord — même geste que la fiche démo. */
/* Pattes en filigrane du back-office (2026-09-18) : mêmes tailles, même inclinaison et
   même opacité que .band-paws des pages publiques, posées en haut à droite de la zone de
   contenu, sous tout le reste (z 0, le contenu est au-dessus par l'ordre du DOM). */


.admin-content[b-kl8uk62yw0]  .adm-crumb {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.admin-content[b-kl8uk62yw0]  .adm-crumb a {
    color: var(--ps-accent-ink);
    text-decoration: none;
}

.admin-content[b-kl8uk62yw0]  .adm-crumb a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ═══ Photo en grand des listes admin (2026-08-21) : clic sur la vignette
   d'une rangée = plein écran en PLEINE QUALITÉ (FullImageUrl, jamais la mini).
   Même langage que la lightbox pet-lb des pages publiques, sans navigation —
   une rangée, une photo. Consommé par les listes articles / partenaires /
   produits. */
.admin-content[b-kl8uk62yw0]  .adm-thumb-btn {
    display: inline-block;
    padding: 0;
    border: none;
    background: transparent;
    cursor: zoom-in;
    line-height: 0;
    border-radius: 0.375rem;
}

.admin-content[b-kl8uk62yw0]  .adm-thumb-btn:focus-visible {
    outline: 2px solid var(--ps-accent);
    outline-offset: 2px;
}

.admin-content[b-kl8uk62yw0]  .adm-lb {
    position: fixed;
    inset: 0;
    background: rgba(14, 18, 36, 0.88);
    display: grid;
    place-items: center;
    z-index: 100;
    cursor: zoom-out;
}

.admin-content[b-kl8uk62yw0]  .adm-lb img {
    display: block;
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 0.8rem;
    object-fit: contain;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
    cursor: default;
}

.admin-content[b-kl8uk62yw0]  .adm-lb-close {
    position: fixed;
    top: 1.3rem;
    right: 1.5rem;
    width: 2.7rem;
    height: 2.7rem;
    font-size: 1.15rem;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-radius: 9999px;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.admin-content[b-kl8uk62yw0]  .adm-lb-close:hover {
    background: rgba(255, 255, 255, 0.24);
}

/* ═══ Catégories de base épinglées (/admin/categories, épreuve validée le
   2026-08-21) : les rangées de base sont TOUJOURS en tête du listing, fond doré
   léger + liseré or ; une règle dorée épaisse portant l'étiquette « Catégories
   de base » ferme la zone — tout ce qui suit est le listing modifiable. */
.admin-content[b-kl8uk62yw0]  .adm-cat-base td {
    background: color-mix(in srgb, var(--ps-gold) 14%, transparent);
}

.admin-content[b-kl8uk62yw0]  .adm-cat-base td:first-child {
    border-left: 4px solid var(--ps-gold);
}

/* Code + badge « de base » + cadenas sur UNE ligne, centrés verticalement (2026-09-17,
   signalé : le badge flottait entre le texte et le cadenas). Un inline-flex dans la
   cellule, un seul écart — la cellule reste une cellule. */
.admin-content[b-kl8uk62yw0]  .adm-code-line {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.admin-content[b-kl8uk62yw0]  .adm-code-line .adm-cat-lock {
    margin-left: 0;
    vertical-align: 0;
}

.admin-content[b-kl8uk62yw0]  .adm-cat-lock {
    /* inline-block (2026-09-17, signalé) : le preflight Tailwind pose `svg { display: block }`,
       le cadenas passait donc SOUS « MISC de base » au lieu de rester sur la ligne du code —
       même piège que l'anneau de /shop/success. Vaut pour toute liste à éléments de base. */
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    vertical-align: -1px;
    margin-left: 0.35rem;
    color: var(--ps-ink);
    opacity: 0.65;
}

.admin-content[b-kl8uk62yw0]  .adm-catsep td {
    padding: 0;
}

.admin-content[b-kl8uk62yw0]  .adm-catsep-line {
    position: relative;
    height: 2.4rem;
    display: flex;
    align-items: center;
}

.admin-content[b-kl8uk62yw0]  .adm-catsep-line::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    background: linear-gradient(90deg, var(--ps-gold), var(--ps-gold) 55%, transparent);
    border-radius: 2px;
}

.admin-content[b-kl8uk62yw0]  .adm-catsep-lab {
    position: relative;
    margin-left: 1rem;
    background: var(--ps-gold);
    color: var(--ps-gold-ink);
    border-radius: 9999px;
    padding: 0.2rem 0.8rem;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.admin-content[b-kl8uk62yw0]  .adm-catsep-lab svg {
    width: 0.75rem;
    height: 0.75rem;
    flex: none;
}

.admin-content[b-kl8uk62yw0]  .adm-catsep-end {
    position: relative;
    margin-left: auto;
    margin-right: 1rem;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ps-muted);
    background: var(--ps-surface);
    padding: 0 0.6rem;
}

/* ═══ Studio de l'éditeur d'article (P3 validée le 2026-08-20) : carte d'état
   STICKY À GAUCHE (statut, complétude, classement, compteurs, Enregistrer
   toujours visible), contenu à droite. Un seul point de rupture : 900 px,
   aligné sur le seuil de la nav. ═══ */
.admin-content[b-kl8uk62yw0]  .adm-studio {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    margin-top: 0.5rem;
}

.admin-content[b-kl8uk62yw0]  .adm-studio-rail {
    position: sticky;
    top: 1rem;
}

.admin-content[b-kl8uk62yw0]  .adm-studio-rail .adm-card {
    margin-top: 0;
}

@media (max-width: 900px) {
    .admin-content[b-kl8uk62yw0]  .adm-studio { grid-template-columns: 1fr; }
    .admin-content[b-kl8uk62yw0]  .adm-studio-rail { position: static; }
}

.admin-content[b-kl8uk62yw0]  .adm-rail-langs {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--ps-muted);
}

.admin-content[b-kl8uk62yw0]  .adm-rail-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    background: var(--ps-peach);
}

.admin-content[b-kl8uk62yw0]  .adm-rail-dot.ok { background: var(--ps-accent); }

.admin-content[b-kl8uk62yw0]  .adm-rail-cnt {
    margin: 0;
    font-size: 0.78rem;
    color: var(--ps-muted);
}

/* Tête de carte admin : pastille d'icône qui NOMME le sujet + titre + indice —
   le langage .ps-block du client, à l'échelle du back-office. */
.admin-content[b-kl8uk62yw0]  .adm-bh {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}

.admin-content[b-kl8uk62yw0]  .adm-bh-ic {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 9999px;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.admin-content[b-kl8uk62yw0]  .adm-bh-ic svg { width: 1.1rem; height: 1.1rem; }

/* Variante d'alerte de la pastille de tête (2026-08-24, carte « Photos non
   utilisées ») : la pêche du système, pas une couleur locale. Elle ne dit pas
   « danger » mais « regarde ça » — la carte n'apparaît que s'il y a de quoi. */
.admin-content[b-kl8uk62yw0]  .adm-bh-ic.warn {
    background: var(--ps-peach-soft);
    color: var(--ps-ink);
}

.admin-content[b-kl8uk62yw0]  .adm-bh-t {
    margin: 0;
    font-weight: 800;
    font-size: 1rem;
    color: var(--ps-ink);
}

.admin-content[b-kl8uk62yw0]  .adm-bh-s {
    margin: 0.1rem 0 0;
    font-size: 0.75rem;
    color: var(--ps-muted);
}

/* Segmenté de la carte d'en-tête (2026-08-24) : le vocabulaire global
   .ps-seg-tabs, la scoped CSS ne pose QUE le placement — règle de la feuille
   globale. */
.admin-content[b-kl8uk62yw0]  .adm-hd-seg {
    margin-bottom: 0.9rem;
}

/* ═══ Mini d'en-tête dans l'état d'article (proofing validé 2026-08-20) : la
   photo étoilée en rappel, cliquable — le clic LOCALISE la rangée dans la
   galerie (saut de page + défilement + double pulsation accent). ═══ */
.admin-content[b-kl8uk62yw0]  .adm-hd-mini {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.35rem;
    padding: 0.4rem 0.55rem 0.4rem 0.4rem;
    width: 100%;
    border: 2px solid var(--ps-line);
    border-radius: 0.8rem;
    background: var(--ps-well);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.admin-content[b-kl8uk62yw0]  .adm-hd-mini:hover {
    border-color: var(--ps-accent);
    transform: translateY(-1px);
}

.admin-content[b-kl8uk62yw0]  .adm-hd-mini img {
    width: 4.6rem;
    height: 3.2rem;
    border-radius: 0.55rem;
    object-fit: cover;
    display: block;
    flex: none;
}

.admin-content[b-kl8uk62yw0]  .adm-hd-mini .st {
    position: absolute;
    top: -0.45rem;
    left: -0.45rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 9999px;
    background: var(--ps-gold);
    color: var(--ps-gold-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(20, 26, 48, 0.25);
}

.admin-content[b-kl8uk62yw0]  .adm-hd-mini .st svg { width: 0.8rem; height: 0.8rem; }

.admin-content[b-kl8uk62yw0]  .adm-hd-mini .t {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
}

.admin-content[b-kl8uk62yw0]  .adm-hd-mini .t b {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--ps-ink);
}

.admin-content[b-kl8uk62yw0]  .adm-hd-mini .t .find {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--ps-accent-ink);
}

.admin-content[b-kl8uk62yw0]  .adm-hd-mini .t .find svg { width: 0.75rem; height: 0.75rem; }

/* Rangée localisée : le halo accent pulse deux fois puis s'éteint. */
@keyframes admRowFlash-b-kl8uk62yw0 {
    0%, 100% { background: transparent; }
    35% { background: var(--ps-accent-soft); }
}

.admin-content[b-kl8uk62yw0]  .adm-table tr.flash td { animation: admRowFlash-b-kl8uk62yw0 1.1s ease 2; }

@media (prefers-reduced-motion: reduce) {
    .admin-content[b-kl8uk62yw0]  .adm-table tr.flash td {
        animation: none;
        background: var(--ps-accent-soft);
    }
}

/* Séparateur vertical entre une chip d'état global (« Tous ») et les chips
   individuelles : le filet dit « deux familles » sans consommer de place. */
.admin-content[b-kl8uk62yw0]  .adm-chip-sep {
    width: 1.5px;
    align-self: stretch;
    background: var(--ps-line);
    flex: none;
}

/* Jeton d'icône : bouton carré 1,8 rem à SVG 14 px — remplace les glyphes
   texte ↑ ↓ ✕ ▸ (émoji couleur ou dessin variable selon le poste). */
.admin-content[b-kl8uk62yw0]  .adm-icb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.55rem;
    border: 1.5px solid var(--ps-line);
    background: var(--ps-well);
    color: var(--ps-muted);
    cursor: pointer;
    flex: none;
    padding: 0;
}

.admin-content[b-kl8uk62yw0]  .adm-icb svg { width: 14px; height: 14px; }

/* ═══ Texte enrichi des sections (épreuve validée le 2026-08-24) ═══
   Barre d'outils posée SUR le champ — un seul bloc visuel, comme un éditeur —
   puis l'aperçu au gabarit du corps publié. Jetons maison, aucune couleur en dur. */
.admin-content[b-kl8uk62yw0]  .adm-tb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.35rem;
    background: var(--ps-well);
    border: 2px solid var(--ps-line);
    border-bottom: none;
    border-radius: 0.7rem 0.7rem 0 0;
}

.admin-content[b-kl8uk62yw0]  .adm-tb button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 0.45rem;
    border-radius: 0.5rem;
    border: 1.5px solid transparent;
    background: transparent;
    color: var(--ps-muted);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
}

.admin-content[b-kl8uk62yw0]  .adm-tb button:hover {
    background: var(--ps-surface);
    border-color: var(--ps-line);
    color: var(--ps-ink);
}

.admin-content[b-kl8uk62yw0]  .adm-tb button svg { width: 15px; height: 15px; }
.admin-content[b-kl8uk62yw0]  .adm-tb .b { font-weight: 900; }
.admin-content[b-kl8uk62yw0]  .adm-tb .i { font-style: italic; font-family: Georgia, serif; }

.admin-content[b-kl8uk62yw0]  .adm-tb .sep {
    width: 1.5px;
    align-self: stretch;
    background: var(--ps-line);
    margin: 0 0.2rem;
    flex: none;
}

/* Le champ se soude à la barre : coins hauts droits, et une police à chasse fixe —
   les marques (**, -, [ ]) s'alignent, on voit la structure du texte. */
.admin-content[b-kl8uk62yw0]  textarea.adm-ta {
    border-radius: 0 0 0.7rem 0.7rem;
    font-family: ui-monospace, Menlo, monospace;
    line-height: 1.65;
    resize: vertical;
}

/* Compteur de caractères sous un champ borné (2026-08-24) : une borne muette se
   découvre au refus d'enregistrement, ce qui est le pire moment. */
.admin-content[b-kl8uk62yw0]  .adm-count {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.25rem;
    font-size: 0.7rem;
    color: var(--ps-muted-soft);
    font-variant-numeric: tabular-nums;
}

.admin-content[b-kl8uk62yw0]  .adm-prev-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0.4rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ps-accent-ink);
}

.admin-content[b-kl8uk62yw0]  .adm-prev-head .line { flex: 1; height: 1.5px; background: var(--ps-line); }

/* Aperçu : les mesures RÉELLES du corps d'article (.art-body) — ce qu'on voit ici
   est ce qui sera publié, sinon l'aperçu ne sert à rien. */
.admin-content[b-kl8uk62yw0]  .adm-prev {
    background: var(--ps-surface);
    border: 2px dashed var(--ps-line);
    border-radius: 0.8rem;
    padding: 0.9rem 1.1rem;
    font-size: 1.01rem;
    line-height: 1.7;
    color: var(--ps-ink);
}

.admin-content[b-kl8uk62yw0]  .adm-prev p { margin: 0.9rem 0; }
.admin-content[b-kl8uk62yw0]  .adm-prev p:first-child { margin-top: 0; }
.admin-content[b-kl8uk62yw0]  .adm-prev p:last-child { margin-bottom: 0; }
.admin-content[b-kl8uk62yw0]  .adm-prev strong { font-weight: 800; }
.admin-content[b-kl8uk62yw0]  .adm-prev em { font-style: italic; }
.admin-content[b-kl8uk62yw0]  .adm-prev ul,
.admin-content[b-kl8uk62yw0]  .adm-prev ol { margin: 0.9rem 0; padding-left: 1.4rem; }
.admin-content[b-kl8uk62yw0]  .adm-prev ul { list-style: disc; }
.admin-content[b-kl8uk62yw0]  .adm-prev ol { list-style: decimal; }
.admin-content[b-kl8uk62yw0]  .adm-prev li { margin: 0.25rem 0; }

.admin-content[b-kl8uk62yw0]  .adm-prev a {
    color: var(--ps-cyan-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}

/* Bouton d'aide (2026-08-24) : le jeton .adm-icb, en rond et avec un « ? » — il
   ouvre le mode d'emploi de la page. Rond et non carré : ce n'est pas une action
   sur le contenu, c'est une question. */
.admin-content[b-kl8uk62yw0]  .adm-help {
    border-radius: 9999px;
    font-family: inherit;
    font-weight: 800;
    font-size: 0.82rem;
    line-height: 1;
}

.admin-content[b-kl8uk62yw0]  .adm-help:hover {
    border-color: var(--ps-accent);
    color: var(--ps-accent-ink);
}

.admin-content[b-kl8uk62yw0]  .adm-icb.danger {
    color: var(--ps-pink-ink);
    border-color: var(--ps-pink-soft);
}

.admin-content[b-kl8uk62yw0]  .adm-icb.star-on {
    color: var(--ps-gold);
    border-color: var(--ps-gold);
}

.admin-content[b-kl8uk62yw0]  .adm-icb:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Rangée de CRÉATION en tête de tableau (P3 validée le 2026-08-20, pages
   catégories) : la saisie vit là où la donnée vivra. Fond creux pour la
   distinguer des données, champs sur surface, pastille « + » qui nomme le
   geste. La création n'est pas destructrice : elle IGNORE le verrou global. */
.admin-content[b-kl8uk62yw0]  .adm-newrow td {
    background: var(--ps-well);
}

.admin-content[b-kl8uk62yw0]  .adm-newrow:hover {
    background: var(--ps-well);
}

.admin-content[b-kl8uk62yw0]  .adm-newrow .adm-inp {
    background: var(--ps-surface);
}

.admin-content[b-kl8uk62yw0]  .adm-newrow-code {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.admin-content[b-kl8uk62yw0]  .adm-newrow-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 9999px;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
    flex: none;
}

.admin-content[b-kl8uk62yw0]  .adm-newrow-plus svg {
    width: 0.9rem;
    height: 0.9rem;
}

/* Variante « éditeur pleine page » de la rangée de création (liste d'articles,
   P2 finale du 2026-08-20) : pas de champs — libellé accent dans la colonne
   Titre (RIEN à sa gauche), tirets assourdis dans les colonnes vides, bouton
   Créer dans la colonne d'actions qui ouvre l'éditeur. */
.admin-content[b-kl8uk62yw0]  .adm-newrow-label {
    color: var(--ps-accent-ink);
}

/* Le tiret dit « rien ici » : CENTRÉ dans sa colonne (2026-09-18, constat du fondateur sur
   la liste des codes promo — collés à gauche, les tirets semblaient décalés d'une colonne
   sur l'autre selon la largeur du contenu). Global : les cinq listes admin en héritent. */
.admin-content[b-kl8uk62yw0]  .adm-newrow-dash {
    color: var(--ps-muted-soft);
    text-align: center;
}

/* Rangée d'EXEMPLE en filigrane (P3 état vide, 2026-08-20) : quand la liste est
   vide, UNE rangée au vrai contenu d'exemple, estompée et cousue en pointillés,
   enseigne à quoi ressemblera une entrée réelle. Elle disparaît à la première
   création. L'étiquette « exemple » lève toute ambiguïté. */
.admin-content[b-kl8uk62yw0]  .adm-ghostrow td {
    opacity: 0.42;
    border-top-style: dashed;
}

.admin-content[b-kl8uk62yw0]  .adm-table tbody tr.adm-ghostrow:hover {
    background: transparent;
}

.admin-content[b-kl8uk62yw0]  .adm-ghost-thumb {
    display: inline-block;
    width: 3rem;
    height: 2.5rem;
    border-radius: 0.4rem;
    background: var(--ps-well);
    border: 1.5px dashed var(--ps-line);
}

.admin-content[b-kl8uk62yw0]  .adm-ghost-tag {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0 0.45rem;
    border-radius: 9999px;
    background: var(--ps-well);
    border: 1.5px dashed var(--ps-line);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--ps-muted-soft);
    text-transform: uppercase;
}

.admin-content[b-kl8uk62yw0]  .adm-badge {
    display: inline-block;
    border-radius: 9999px;
    padding: 0.18rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 800;
}

/* Pastille-lien du nom d'un élément listé (2026-08-20) : le nom EST le lien vers
   sa page publique, ouvert dans un nouvel onglet — l'icône « sort d'ici » le dit.
   Survol : liseré accent, jamais de changement de couleur du texte seul. */
.admin-content[b-kl8uk62yw0]  .adm-name-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    background: var(--ps-well);
    border: 1.5px solid var(--ps-line);
    border-radius: 9999px;
    padding: 0.22rem 0.7rem;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--ps-ink);
    text-decoration: none;
}

.admin-content[b-kl8uk62yw0]  .adm-name-pill svg {
    width: 0.75rem;
    height: 0.75rem;
    flex: none;
    color: var(--ps-accent-ink);
}

.admin-content[b-kl8uk62yw0]  .adm-name-pill:hover {
    border-color: var(--ps-accent);
    background: var(--ps-accent-soft);
}

.admin-content[b-kl8uk62yw0]  .b-green { background: var(--ps-green-soft); color: var(--ps-green-ink); }
.admin-content[b-kl8uk62yw0]  .b-amber { background: var(--ps-peach-soft); color: var(--ps-ink); }
.admin-content[b-kl8uk62yw0]  .b-blue { background: var(--ps-blue-soft); color: var(--ps-blue-ink); }
.admin-content[b-kl8uk62yw0]  .b-gray { background: var(--ps-well); color: var(--ps-muted); }
.admin-content[b-kl8uk62yw0]  .b-red { background: var(--ps-pink-soft); color: var(--ps-pink-ink); }
.admin-content[b-kl8uk62yw0]  .b-gold { background: var(--ps-gold); color: var(--ps-gold-ink); }

/* Mécanique « lot » des campagnes promo (2026-09-15) : le pendant teal du gold
   ci-dessus, les mêmes deux couleurs qu'à la création. */
.admin-content[b-kl8uk62yw0]  .b-teal { background: var(--ps-accent-soft); color: var(--ps-accent-ink); }

/* ARCHIVÉE (2026-09-15) : supprimée pour l'opérateur, gardée pour l'audit — cousue
   en pointillés comme les rangées d'exemple : « ceci n'est plus une entrée vivante ». */
.admin-content[b-kl8uk62yw0]  .b-arch {
    background: var(--ps-well);
    color: var(--ps-muted-soft);
    outline: 1.5px dashed var(--ps-line);
    outline-offset: -1.5px;
}

/* ═══ Ligne-lien d'un tableau (2026-09-15) : la ligne entière ouvre la fiche —
   les boutons qu'elle porte encore (lectures : Codes, CSV) arrêtent la
   propagation. Le survol colore le nom, pas la ligne : le fond survolé est
   déjà pris par `.adm-table tbody tr:hover`. ═══ */
.admin-content[b-kl8uk62yw0]  .adm-table tbody tr.adm-row-link { cursor: pointer; }
.admin-content[b-kl8uk62yw0]  .adm-table tbody tr.adm-row-link:hover td:first-child { color: var(--ps-accent-ink); }
.admin-content[b-kl8uk62yw0]  .adm-table tbody tr.adm-row-arch td { opacity: 0.55; }

/* ═══ Jauge utilisés / total (née sur la liste promo le 2026-08-20, promue ici le
   2026-09-15 pour la fiche de campagne). Accent en régime normal, GOLD dès 80 % :
   le lot s'épuise, penser à réimprimer. Le compteur devient un LIEN (.lnk) dès
   qu'un achat existe : pointillé sous le chiffre, jamais souligné plein. ═══ */
.admin-content[b-kl8uk62yw0]  .gauge {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 8rem;
}

.admin-content[b-kl8uk62yw0]  .gauge .bar {
    flex: 1;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--ps-well);
    border: 1px solid var(--ps-line);
    overflow: hidden;
}

.admin-content[b-kl8uk62yw0]  .gauge .fill {
    height: 100%;
    border-radius: 9999px;
    background: var(--ps-accent);
}

.admin-content[b-kl8uk62yw0]  .gauge.high .fill { background: var(--ps-gold); }

.admin-content[b-kl8uk62yw0]  .gauge .txt {
    font-size: 0.72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--ps-muted);
    white-space: nowrap;
}

.admin-content[b-kl8uk62yw0]  .gauge .txt.lnk {
    color: var(--ps-accent-ink);
    text-decoration: none;
    border-bottom: 1.5px dotted currentColor;
}

/* Les places TENUES sont assourdies : ce n'est pas une vente, seulement une
   réservation en cours qui peut encore repartir. */
.admin-content[b-kl8uk62yw0]  .gauge .txt .held {
    margin-left: 0.35rem;
    color: var(--ps-muted-soft);
    font-weight: 600;
}

/* Pastilles CATÉGORIE des listes admin (2026-08-21) : cinq teintes de la palette
   maison, attribuées par CategoryPillPalette (hash stable du code — même code,
   même couleur partout). Tokens seulement : les deux thèmes suivent. */
.admin-content[b-kl8uk62yw0]  .b-cat1 { background: var(--ps-accent-soft); color: var(--ps-accent-ink); }
.admin-content[b-kl8uk62yw0]  .b-cat2 { background: var(--ps-peach-soft); color: var(--ps-ink); }
.admin-content[b-kl8uk62yw0]  .b-cat3 { background: var(--ps-cyan-soft); color: var(--ps-cyan-text); }
.admin-content[b-kl8uk62yw0]  .b-cat4 { background: var(--ps-pink-soft); color: var(--ps-pink-ink); }
.admin-content[b-kl8uk62yw0]  .b-cat5 { background: var(--ps-gold); color: var(--ps-gold-ink); }

.admin-content[b-kl8uk62yw0]  .adm-chip {
    border: 2px solid var(--ps-line);
    background: var(--ps-surface);
    color: var(--ps-ink);
    border-radius: 9999px;
    padding: 0.25rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.admin-content[b-kl8uk62yw0]  .adm-chip:hover {
    border-color: var(--ps-accent);
}

.admin-content[b-kl8uk62yw0]  .adm-chip-on {
    background: var(--ps-btn);
    border-color: var(--ps-btn);
    color: var(--ps-btn-ink);
}

/* Tuiles de l'accueil admin : effet sticker au survol, comme les cartes publiques */
.admin-content[b-kl8uk62yw0]  .adm-tile {
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.admin-content[b-kl8uk62yw0]  .adm-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -18px var(--ps-shadow);
}

/* ═══ Grille de médias (proofing validé le 2026-08-21) : LE vocabulaire commun
   des galeries du back-office — articles (légendes + tiroir + pagination 5/5),
   produits (tuiles nues, quand shopservice aura sa galerie), offres (tuile
   unique). Gestes partout identiques : étoile gold = principale/en-tête,
   flèches = ordre, croix = retirer. La tuile pointillée d'ajout n'existe qu'à
   l'ÉTAT VIDE — dès qu'un média est là, l'ajout passe par le bouton explicite
   de l'en-tête de carte (.adm-bh-cta), TOUJOURS visible quelle que soit la
   page de la grille. ═══ */

/* Bouton d'action ancré à droite d'une tête de carte (.adm-bh est un flex). */
.admin-content[b-kl8uk62yw0]  .adm-bh-cta {
    margin-left: auto;
    flex: none;
}

.admin-content[b-kl8uk62yw0]  .adm-media-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 0.6rem;
    align-items: flex-start;
}

/* Variante paginée (articles) : UNE rangée de 5 emplacements — les tuiles
   fléchissent en largeur, la rangée jamais. */
.admin-content[b-kl8uk62yw0]  .adm-media-grid.paged {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-content[b-kl8uk62yw0]  .adm-media-tile {
    position: relative;
    width: 8.2rem;
    border: 2px solid var(--ps-line);
    border-radius: 0.8rem;
    background: var(--ps-well);
}

.admin-content[b-kl8uk62yw0]  .adm-media-grid.paged .adm-media-tile,
.admin-content[b-kl8uk62yw0]  .adm-media-grid.paged .adm-media-add {
    width: auto;
}

.admin-content[b-kl8uk62yw0]  .adm-media-tile.main-on { border-color: var(--ps-gold); }
.admin-content[b-kl8uk62yw0]  .adm-media-tile.editing { border-color: var(--ps-accent); }

/* Localisation depuis le rail (adm-hd-mini) : même double pulsation que les
   rangées de table — le @key régénéré rejoue l'animation à chaque clic. */
.admin-content[b-kl8uk62yw0]  .adm-media-tile.flash { animation: admRowFlash-b-kl8uk62yw0 1.1s ease 2; }

@media (prefers-reduced-motion: reduce) {
    .admin-content[b-kl8uk62yw0]  .adm-media-tile.flash {
        animation: none;
        background: var(--ps-accent-soft);
    }
}

.admin-content[b-kl8uk62yw0]  .adm-media-tile > img {
    display: block;
    width: 100%;
    height: 5.6rem;
    object-fit: cover;
    border-radius: 0.65rem 0.65rem 0 0;
}

.admin-content[b-kl8uk62yw0]  .adm-media-tile > img.zoom { cursor: pointer; }

/* Tuile NUE (2026-08-24) : ni légende ni rangée d'actions — la grille de pure
   désignation du choix d'en-tête. Sans rien dessous, la photo doit s'arrondir
   des quatre côtés, sinon le cadre montre deux coins carrés sous elle. */
.admin-content[b-kl8uk62yw0]  .adm-media-tile.bare > img,
.admin-content[b-kl8uk62yw0]  .adm-media-tile.bare > .adm-media-noimg {
    border-radius: 0.65rem;
}

/* Photo en attente sans aperçu (conversion best-effort échouée) : cadre neutre. */
.admin-content[b-kl8uk62yw0]  .adm-media-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5.6rem;
    border-radius: 0.65rem 0.65rem 0 0;
    color: var(--ps-muted-soft);
}

.admin-content[b-kl8uk62yw0]  .adm-media-noimg svg { width: 1.4rem; height: 1.4rem; }

.admin-content[b-kl8uk62yw0]  .adm-media-star {
    position: absolute;
    top: -0.55rem;
    left: -0.55rem;
    z-index: 2;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    background: var(--ps-well);
    color: var(--ps-muted-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(20, 26, 48, 0.25);
    padding: 0;
}

.admin-content[b-kl8uk62yw0]  .adm-media-star.on { background: var(--ps-gold); color: var(--ps-gold-ink); }

/* Pastille de coin (2026-08-21) : numéro d'ordre dans les bandes de section,
   « S1/S3 » (section d'origine) dans la galerie d'article. À DROITE — l'étoile
   occupe le coin gauche. */
.admin-content[b-kl8uk62yw0]  .adm-media-tag {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    z-index: 2;
    background: rgba(255, 255, 255, 0.92);
    color: #2B3A67;
    border-radius: 0.45rem;
    font-size: 0.62rem;
    font-weight: 900;
    padding: 0.1rem 0.4rem;
    pointer-events: none;
}
.admin-content[b-kl8uk62yw0]  .adm-media-star svg { width: 0.85rem; height: 0.85rem; }
.admin-content[b-kl8uk62yw0]  .adm-media-star:disabled { cursor: not-allowed; }

.admin-content[b-kl8uk62yw0]  .adm-media-acts {
    display: flex;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.35rem 0;
}

/* Ligne de légende (déclinaison article) : ce qui s'affiche sous la photo côté
   public s'affiche sous la tuile côté admin — la grille dit la vérité. Vide,
   elle devient l'invite « Ajouter une légende ». */
.admin-content[b-kl8uk62yw0]  .adm-media-cap {
    display: block;
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    text-align: center;
    padding: 0 0.45rem 0.45rem;
    font-size: 0.68rem;
    font-family: inherit;
    color: var(--ps-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-content[b-kl8uk62yw0]  .adm-media-cap.empty {
    color: var(--ps-accent-ink);
    font-weight: 700;
}

/* Tuile d'ajout — état vide SEULEMENT. C'est un label : l'InputFile caché vit
   dedans (adm-upl). Déclarée après .adm-upl pour que sa colonne l'emporte. */
.admin-content[b-kl8uk62yw0]  .adm-media-add {
    width: 8.2rem;
    min-height: 8rem;
    border: 2px dashed var(--ps-line);
    border-radius: 0.8rem;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
    color: var(--ps-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.admin-content[b-kl8uk62yw0]  .adm-media-add:hover { border-color: var(--ps-accent); }
.admin-content[b-kl8uk62yw0]  .adm-media-add svg { width: 1.2rem; height: 1.2rem; color: var(--ps-accent-ink); }

/* Tiroir de détails (déclinaison article) : s'ouvre SOUS la grille — photo en
   grand à gauche (clic = lightbox), champs Alt + Légende à droite. Liseré
   accent relié à la tuile sélectionnée (elle-même .editing). */
.admin-content[b-kl8uk62yw0]  .adm-media-drawer {
    border: 2px solid var(--ps-accent);
    border-radius: 0.9rem;
    background: var(--ps-well);
    padding: 0.9rem;
    margin-top: 0.7rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.admin-content[b-kl8uk62yw0]  .adm-media-drawer .dimg {
    border: none;
    background: none;
    padding: 0;
    cursor: zoom-in;
}

.admin-content[b-kl8uk62yw0]  .adm-media-drawer .dimg img {
    width: 14rem;
    max-width: 100%;
    height: 9.5rem;
    object-fit: cover;
    border-radius: 0.6rem;
    display: block;
}

.admin-content[b-kl8uk62yw0]  .adm-media-drawer .flds { flex: 1; min-width: 14rem; }

.admin-content[b-kl8uk62yw0]  .adm-media-drawer .dhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.admin-content[b-kl8uk62yw0]  .adm-media-drawer .dhead b { font-size: 0.8rem; }

.admin-content[b-kl8uk62yw0]  .adm-media-drawer .adm-lbl { margin-top: 0.6rem; }

.admin-content[b-kl8uk62yw0]  .adm-media-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.admin-content[b-kl8uk62yw0]  .adm-media-pager span {
    font-size: 0.75rem;
    color: var(--ps-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Vignette d'état dans le rail, et badge « en attente » (2026-08-25) ──────
   Recettes montées ici à leur TROISIÈME usage (produit, offre, article) : la règle
   maison est qu'on cesse de recopier au deuxième. Le placement (margin-top) reste
   local à chaque page, c'est le seul écart légitime. */
.admin-content[b-kl8uk62yw0]  .rail-img {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-content[b-kl8uk62yw0]  .rail-img img {
    width: 3.4rem;
    height: 2.4rem;
    border-radius: 0.45rem;
    object-fit: cover;
    display: block;
    border: 1.5px solid var(--ps-line);
    flex: none;
}

/* ⚠️ La vignette d'un CARRÉ cuit est carrée : la montrer dans le rectangle des
   photos la recadrerait au centre — exactement le défaut que le cadrage à la main
   vient de supprimer. Le rail doit montrer ce qui sera affiché, pas une approximation. */
.admin-content[b-kl8uk62yw0]  .rail-img img.sq {
    width: 2.6rem;
    height: 2.6rem;
}

/* Badge « en attente » : ce qui est cuit mais n'a pas encore d'entité à qui
   s'attacher. Une ligne pêche, jamais un ruban rouge — rien n'est en défaut, c'est
   une séquence. */
.admin-content[b-kl8uk62yw0]  .img-badge-wait {
    display: inline-block;
    background: var(--ps-peach-soft);
    color: var(--ps-ink);
    border-radius: 9999px;
    padding: 0.18rem 0.65rem;
    font-size: 0.68rem;
    font-weight: 800;
}

/* ═══ Rail en liste d'état (2026-09-17, épreuve validée) — l'éditeur d'article ; à
   reprendre sur les autres rails (produit, offre) au deuxième usage. Coche teal =
   complété, point pêche = manquant et requis, cercle gris = facultatif et vide. ═══ */
.admin-content[b-kl8uk62yw0]  .adm-rail-list {
    display: flex;
    flex-direction: column;
    margin-top: 0.6rem;
}

.admin-content[b-kl8uk62yw0]  .adm-rail-row {
    display: grid;
    grid-template-columns: 1.15rem minmax(0, 1fr);
    gap: 0.55rem;
    padding: 0.55rem 0;
    border-top: 1px solid var(--ps-line);
}

.admin-content[b-kl8uk62yw0]  .adm-rail-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.admin-content[b-kl8uk62yw0]  .adm-rail-row > .st {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 9999px;
    display: grid;
    place-items: center;
    margin-top: 0.05rem;
    box-sizing: border-box;
}

.admin-content[b-kl8uk62yw0]  .adm-rail-row > .st svg {
    width: 0.7rem;
    height: 0.7rem;
}

.admin-content[b-kl8uk62yw0]  .adm-rail-row.ok > .st { background: var(--ps-accent); color: #fff; }
.admin-content[b-kl8uk62yw0]  .adm-rail-row.todo > .st { background: var(--ps-peach); color: var(--ps-ink); }
.admin-content[b-kl8uk62yw0]  .adm-rail-row.opt > .st { background: var(--ps-well); border: 2px solid var(--ps-line); color: var(--ps-muted-soft); }

.admin-content[b-kl8uk62yw0]  .adm-rail-row .lbl {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-muted-soft);
}

.admin-content[b-kl8uk62yw0]  .adm-rail-row.todo .lbl { color: var(--ps-on-peach); }

.admin-content[b-kl8uk62yw0]  .adm-rail-row .lbl .req {
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.66rem;
    color: var(--ps-on-peach);
}

.admin-content[b-kl8uk62yw0]  .adm-rail-row.opt .lbl .req { color: var(--ps-muted-soft); }

.admin-content[b-kl8uk62yw0]  .adm-rail-row .val { margin-top: 0.3rem; }

.admin-content[b-kl8uk62yw0]  .adm-rail-sum {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--ps-ink);
    font-variant-numeric: tabular-nums;
}

.admin-content[b-kl8uk62yw0]  .adm-rail-sum .bar {
    flex: 1;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--ps-accent-soft);
    overflow: hidden;
}

.admin-content[b-kl8uk62yw0]  .adm-rail-sum .bar b {
    display: block;
    height: 100%;
    background: var(--ps-accent);
    border-radius: 999px;
    transition: width 0.2s;
}
/* _content/PawSeekrWebApp/Layout/BareFooter.razor.rz.scp.css */
/* Footer simplifié du layout nu — même direction « filet seul » que NavFooter,
   même échelle typographique, sans le bloc langues.

   Structure FIGÉE par mode (alignée sur NavFooter, épreuve validée le
   2026-08-21) : le pliage ne dépend jamais de la largeur des libellés — changer
   de langue ne fait plus sauter les éléments. Les liens gardent leur place
   AU-DESSUS de la marque sous 900 px (ordre du mockup F1 de 2026-08-14). */

footer[b-cx64q5ku2v] {
    width: 100%;
    background: transparent;
    padding: 0 2rem 2rem;
}

/* MOBILE (≤ 640) : les 3 liens EMPILÉS centrés — toujours trois lignes, quelle
   que soit la langue — puis la marque. Un seul écart répété. */
.bfoot-inner[b-cx64q5ku2v] {
    max-width: 58rem;   /* aligné sur la largeur de la fiche de scan */
    margin: 0 auto;
    border-top: 1px solid var(--ps-line);
    padding-top: 1.1rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    text-align: center;
}

.bfoot-links[b-cx64q5ku2v] {
    grid-row: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
    align-items: center;
}

.bfoot-brand[b-cx64q5ku2v] {
    grid-row: 2;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.6rem;
}

/* TABLETTE (641–900) : les 3 liens sur UNE ligne en 3 colonnes ÉGALES — un
   libellé long (FR/NL) se replie DANS sa colonne, les voisins ne bougent pas. */
@media (min-width: 641px) and (max-width: 900px) {
    .bfoot-inner[b-cx64q5ku2v] {
        padding-top: 1.35rem;
    }

    .bfoot-links[b-cx64q5ku2v] {
        grid-template-columns: repeat(3, 1fr);
    }

    .bfoot-links a[b-cx64q5ku2v] {
        line-height: 1.25;
    }
}

/* DESKTOP (> 900) : rangée classique marque | liens, sans repli — elle tient
   dans les trois langues au-delà de ce seuil. */
@media (min-width: 901px) {
    .bfoot-inner[b-cx64q5ku2v] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem 1.5rem;
        padding-top: 1.35rem;
        text-align: left;
    }

    .bfoot-links[b-cx64q5ku2v] {
        display: flex;
        align-items: center;
        gap: 1.1rem;
    }

    .bfoot-links a[b-cx64q5ku2v] {
        white-space: nowrap;
    }

    .bfoot-brand[b-cx64q5ku2v] {
        justify-content: flex-start;
    }
}

.bfoot-brand b[b-cx64q5ku2v] {
    color: var(--ps-ink);
    font-size: 0.875rem;
    font-weight: 800;
}

.bfoot-brand p[b-cx64q5ku2v] {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ps-muted-soft);
}

.bfoot-links a[b-cx64q5ku2v] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ps-muted);
    text-decoration: none;
}

.bfoot-links a:hover[b-cx64q5ku2v] {
    color: var(--ps-ink);
}
/* _content/PawSeekrWebApp/Layout/MainLayout.razor.rz.scp.css */
main[b-okgxm5u0u1] {
    flex-grow: 1;
}
/* _content/PawSeekrWebApp/Layout/NavFooter.razor.rz.scp.css */
/* Pied de page — direction « filet seul, contenu structuré » (2026-08-06).

   Le fond reste transparent : la barre du haut et les cartes sont déjà des
   surfaces blanches, une troisième leur ferait concurrence. Ce qui manquait,
   c'était une limite et de la matière — d'où le filet et les trois blocs.

   Recalé sur la feuille de style le 2026-08-19 (variante « filet accordé »,
   préférée au bandeau miroir : un dégradé de plus serrait la page par les deux
   bouts). Aucune taille inventée :
     0.875rem / 800  → la marque
     0.78rem  / 800  → liens (la graisse des contrôles de barre — 600 n'existe
                       plus nulle part ailleurs)
     0.74rem  / 700  → copyright, assourdi */

footer[b-73w4nc6h9v] {
    width: 100%;
    background: transparent;
    padding: 0 2rem 2rem;
}

/* Structure FIGÉE par mode (épreuve validée le 2026-08-21) : le pliage ne
   dépend plus JAMAIS de la largeur des libellés — changer de langue ne fait
   plus sauter les éléments. Desktop : rangée marque | liens | langues, sans
   flex-wrap (elle tient dans les trois langues au-delà de 900 px). */
.foot-inner[b-73w4nc6h9v] {
    max-width: 80rem;
    margin: 0 auto;
    /* Le filet est porté par le conteneur, pas par le <footer> : il s'aligne
       ainsi sur la largeur du contenu au lieu de traverser tout l'écran. */
    border-top: 1px solid var(--ps-line);
    padding-top: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}

.foot-brand[b-73w4nc6h9v] {
    display: flex;
    /* Ligne de base (2026-09-18, constat du fondateur) : « Pawseno » (0,875 rem) et
       « © 2026 » (0,74 rem) centrés sur leur boîte de ligne paraissaient décalés — deux
       corps différents ne partagent pas le même milieu. Alignés sur la ligne de base, ils
       s'assoient sur la même ligne ; la patte, sans ligne de base, garde le centre. */
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.foot-paw[b-73w4nc6h9v] {
    width: 1rem;
    height: 1rem;
    color: var(--ps-accent-ink);
    flex: none;
    align-self: center;
}

.foot-brand b[b-73w4nc6h9v] {
    color: var(--ps-ink);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.foot-inner p[b-73w4nc6h9v] {
    color: var(--ps-muted-soft);
    font-size: 0.74rem;
    font-weight: 700;
    margin: 0;
    line-height: 1;
}

.foot-brand b[b-73w4nc6h9v] { line-height: 1; }

.foot-links[b-73w4nc6h9v] {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
}

.foot-links a[b-73w4nc6h9v] {
    color: var(--ps-muted);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 800;
    /* Un libellé ne se coupe jamais en desktop : la rangée est dimensionnée
       pour la langue la plus longue, elle ne se replie pas. */
    white-space: nowrap;
}

.foot-links a:hover[b-73w4nc6h9v] {
    color: var(--ps-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.foot-links a:focus-visible[b-73w4nc6h9v] {
    outline: 2px solid var(--ps-accent);
    outline-offset: 3px;
    border-radius: 0.3rem;
}

/* TABLETTE (641–900, la plage du tiroir de nav) : les 3 liens (Contact retiré le
   2026-09-18) sur UNE ligne en 3 colonnes ÉGALES — un libellé long (FR/NL) se replie DANS sa colonne, les
   voisins ne bougent pas d'un pixel — puis marque à gauche / langues à droite,
   deux blocs dont la largeur ne varie pas avec la langue. */
@media (max-width: 900px) {
    .foot-inner[b-73w4nc6h9v] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 0.95rem 1rem;
    }

    .foot-links[b-73w4nc6h9v] {
        grid-column: 1 / -1;
        grid-row: 1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem 0.4rem;
    }

    .foot-links a[b-73w4nc6h9v] {
        white-space: normal;
        text-align: center;
        line-height: 1.25;
    }

    .foot-brand[b-73w4nc6h9v] {
        grid-row: 2;
        justify-self: start;
    }

    /* Le formulaire vient du composant LanguageSwitcher (portée scoped
       différente) — d'où le ::deep pour le placer dans la grille. */
    .foot-inner[b-73w4nc6h9v]  .lang-switcher {
        grid-row: 2;
        justify-self: end;
    }
}

/* MOBILE (≤ 640, la plage de la feuille du bas) : liens en grille 2×2 —
   toujours exactement deux lignes, quelle que soit la langue — puis marque
   centrée, puis langues centrées. Un seul écart répété. */
@media (max-width: 640px) {
    footer[b-73w4nc6h9v] {
        padding: 0 1rem 1.5rem;
    }

    .foot-inner[b-73w4nc6h9v] {
        grid-template-columns: 1fr;
    }

    .foot-links[b-73w4nc6h9v] {
        grid-column: 1;
        grid-template-columns: 1fr 1fr;
    }

    /* Trois liens sur deux colonnes : le dernier, seul sur sa ligne, prend les deux
       colonnes et se centre (2026-09-18, demande du fondateur) — sinon il restait
       collé à gauche sous « Politique de confidentialité ». */
    .foot-links a:last-child:nth-child(odd)[b-73w4nc6h9v] {
        grid-column: 1 / -1;
    }

    .foot-brand[b-73w4nc6h9v] {
        grid-row: 2;
        justify-self: center;
    }

    .foot-inner[b-73w4nc6h9v]  .lang-switcher {
        grid-row: 3;
        justify-self: center;
    }
}
/* _content/PawSeekrWebApp/Layout/NavMenu.razor.rz.scp.css */
/* Barre blanche à coins bas arrondis, posée sur le fond crème : le
   color-blocking commence dès la navigation (maquette Récré). */
header[b-1mvilrvk08] {
    position: relative;
    background: var(--ps-nav); /* la surface en clair, un lagon un cran plus profond en sombre */
    /* 1rem et non 1.6rem (2026-08-06) : rapporté à une barre de 72 px, l'ancien
       rayon creusait près d'un quart de la hauteur et faisait « bulle ». 1rem
       garde l'angle rond de la famille Récré, et c'est le rayon du menu
       déroulant qui s'ouvre juste dessous — les deux formes s'accordent. */
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 10px 30px -18px var(--ps-shadow);
}

.nav-bar[b-1mvilrvk08] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: 72px;
    padding: 0.75rem 2rem;
    max-width: 80rem;
    margin: 0 auto;
    flex-wrap: wrap;
}

/* Centrage GÉOMÉTRIQUE des liens (2026-08-19, épreuve validée) : la marque et
   la zone de droite sont deux flancs de même largeur élastique — les liens se
   centrent donc sur le vrai milieu de la barre, pas sur le milieu de l'espace
   restant (qui penchait vers la droite, la marque étant plus courte que
   bascule + pastille + avatar). */
.brand[b-1mvilrvk08] {
    display: flex;
    align-items: center;
    flex: 1 1 0;
}

/* Les règles .logo-img (éclaircissement du PNG marine en mode sombre) ont été
   retirées le 2026-08-06 avec le logo lui-même : le mot-marque est du texte,
   il suit --ps-ink et n'a besoin d'aucun filtre. */

.nav-links[b-1mvilrvk08] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.nav-links a[b-1mvilrvk08] {
    color: var(--ps-ink);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.45rem 0.85rem;
    border-radius: 9999px;
}

/* Le survol révèle la couleur de LA section survolée (2026-08-19) : l'état
   actif et le survol parlent la même langue — le crème générique ne disait
   rien. Les paires pastel/encre sont celles des pastilles actives. */
.nav-links a.acc-cyan:hover[b-1mvilrvk08]  { background: var(--ps-cyan-soft);   color: var(--ps-cyan-text); }
.nav-links a.acc-teal:hover[b-1mvilrvk08]  { background: var(--ps-accent-soft); color: var(--ps-accent-ink); }
.nav-links a.acc-pink:hover[b-1mvilrvk08]  { background: var(--ps-pink-soft);   color: var(--ps-pink-ink); }
.nav-links a.acc-peach:hover[b-1mvilrvk08] { background: var(--ps-peach-soft);  color: var(--ps-on-peach); }
.nav-links a.acc-gold:hover[b-1mvilrvk08]  { background: var(--ps-gold);        color: var(--ps-gold-ink); }

/* Accent de section (2026-08-10) : le lien actif prend la pastille teintée de
   son univers — articles cyan, animaux teal, perdus rose, partenaires pêche,
   boutique gold. La couleur dit où l'on est, à petite dose codifiée. */
.nav-links a.active.acc-cyan[b-1mvilrvk08]  { background: var(--ps-cyan-soft);   color: var(--ps-cyan-text); }
.nav-links a.active.acc-teal[b-1mvilrvk08]  { background: var(--ps-accent-soft); color: var(--ps-accent-ink); }
.nav-links a.active.acc-pink[b-1mvilrvk08]  { background: var(--ps-pink-soft);   color: var(--ps-pink-ink); }
.nav-links a.active.acc-peach[b-1mvilrvk08] { background: var(--ps-peach-soft);  color: var(--ps-on-peach); }
.nav-links a.active.acc-gold[b-1mvilrvk08]  { background: var(--ps-gold);        color: var(--ps-gold-ink); }

:root[data-theme="dark"] .nav-links a.active.acc-peach[b-1mvilrvk08] {
    color: var(--ps-peach);
}

/* Même ajustement au survol : la pêche translucide sur le lagon noie l'encre
   marine — le survol pêche suit la règle de la pastille active. */
:root[data-theme="dark"] .nav-links a.acc-peach:hover[b-1mvilrvk08] {
    color: var(--ps-peach);
}

/* ── Rail d'administration (2026-08-10, remplace l'ancien .admin-link) ──
   Marine en clair ; en sombre un lagon profond (2026-09-18) — le marine codé en dur
   tranchait contre le lagon au lieu d'appartenir à la palette. Jeton --ps-rail.
   Le rail reprend les coins bas arrondis du header. */
.admin-rail[b-1mvilrvk08] {
    background: var(--ps-rail);
    border-radius: 0 0 1rem 1rem;
}

.admin-rail-inner[b-1mvilrvk08] {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0.5rem 2rem 0.55rem;
}

/* En-tête du rail (2026-08-19) : une ligne stable — libellé à gauche, rôle et
   poignée à droite — que le rail soit ouvert ou replié. Les entrées vivent en
   dessous : sur une seule ligne avec le reste, huit libellés faisaient un magma
   dont on ne distinguait ni le début ni la fin. */
.rail-head[b-1mvilrvk08] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.rail-label[b-1mvilrvk08] {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 244, 228, 0.55);
}

.rail-body[b-1mvilrvk08] {
    padding-top: 0.5rem;
}

/* Entrées en pastilles (2026-08-19) : chacune a ses bords, on voit où finit un
   libellé. Même grammaire que les filtres du site — l'entrée ouverte prend le
   doré plein, comme une pastille active. */
.rail-links[b-1mvilrvk08] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Étiré d'un bord à l'autre (2026-08-19) : ce sont les PASTILLES qui absorbent le
   vide, pas les espaces entre elles. `space-between` avait été essayé d'abord et
   donnait le bon rendu sur une ligne pleine, mais dès qu'une deuxième ligne
   apparaissait — et elle apparaîtra, la barre est faite pour accueillir d'autres
   entrées — les trois rescapées du bas s'écartaient au maximum, une à gauche, une
   perdue au milieu, une à droite. Ici chaque ligne se remplit d'elle-même et la
   dernière reste calée à gauche.

   max-width : sans plafond, trois entrées sur la seconde ligne feraient des
   pastilles de 400 px, et un Editor — qui n'a que « Articles » — verrait un bouton
   traversant toute la barre. 12rem laisse le mot respirer sans le déformer. */
.rail-links a[b-1mvilrvk08] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    max-width: 12rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.28rem 0.7rem;
    border-radius: 9999px;
}

.rail-links a:hover[b-1mvilrvk08] {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.rail-links a.on[b-1mvilrvk08] {
    background: var(--ps-gold);
    color: var(--ps-gold-ink);
}

/* Le compteur s'inverse sur la pastille active, sinon doré sur doré. */
.rail-links a.on .rail-cnt[b-1mvilrvk08] {
    background: var(--ps-gold-ink);
    color: var(--ps-gold);
}

.rail-cnt[b-1mvilrvk08] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    margin-left: 0.3rem;
    border-radius: 9999px;
    background: var(--ps-gold);
    color: var(--ps-gold-ink);
    font-size: 0.62rem;
    font-weight: 800;
}

.rail-role[b-1mvilrvk08] {
    margin-left: auto;
    background: var(--ps-gold);
    color: var(--ps-gold-ink);
    border-radius: 9999px;
    padding: 0.12rem 0.6rem;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    /* Lien vers /admin depuis le 2026-08-21 — même habit, plus une main. */
    text-decoration: none;
    cursor: pointer;
}

.rail-role:hover[b-1mvilrvk08] {
    filter: brightness(1.06);
    box-shadow: 0 0 0 2px var(--ps-line);
}

/* Poignée de repli (2026-08-19). Le rail garde sa bande, son libellé, son
   compteur et le rôle : c'est par là qu'on le rouvre, et le badge doit continuer
   d'alerter — replier ne doit pas revenir à ne plus voir la file d'approbation.
   Ce badge n'existe que pour un Admin : GetPending lui est réservé. */
.rail-toggle[b-1mvilrvk08] {
    display: grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    margin-left: 0.2rem;
    padding: 0;
    border: none;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    cursor: pointer;
}

.rail-toggle:hover[b-1mvilrvk08] {
    background: rgba(255, 255, 255, 0.22);
}

.rail-toggle:focus-visible[b-1mvilrvk08] {
    outline: 3px solid var(--ps-gold);
    outline-offset: 2px;
}

.rail-toggle svg[b-1mvilrvk08] {
    width: 0.85rem;
    height: 0.85rem;
    transition: transform 0.2s ease;
}

/* Le compteur de la bande n'apparaît QUE replié : déplié, il est déjà sur
   l'entrée « Articles » et le répéter ferait doublon. */
.rail-cnt-head[b-1mvilrvk08] {
    display: none;
}

:root[data-rail="collapsed"] .rail-body[b-1mvilrvk08] {
    display: none;
}

:root[data-rail="collapsed"] .rail-cnt-head[b-1mvilrvk08] {
    display: inline-flex;
}

:root[data-rail="collapsed"] .rail-toggle svg[b-1mvilrvk08] {
    transform: rotate(180deg);
}

/* Pastille du rôle : la couleur du rail qu'elle remplace (--ps-rail). */
.desk-pill[b-1mvilrvk08] {
    display: none;
    align-items: center;
    gap: 0.33rem;
    /* Hauteur fixe et non un padding (2026-08-19) : à 22 px la pastille flottait
       entre un hamburger de 37 px et une bascule de 30 px — géométriquement
       centrée, mais lue comme un désalignement. 2,1 rem la met dans la même
       famille de tailles sans qu'elle domine la barre. */
    height: 2.1rem;
    padding: 0 0.72rem 0 0.58rem;
    border: none;
    border-radius: 9999px;
    background: var(--ps-rail);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.desk-pill:hover[b-1mvilrvk08] {
    background: #3a4c85;
}

.desk-pill:focus-visible[b-1mvilrvk08] {
    outline: 3px solid var(--ps-accent);
    outline-offset: 2px;
}

.desk-pill svg[b-1mvilrvk08] {
    width: 0.9rem;
    height: 0.9rem;
}

/* Le back-office ne s'ouvre qu'en vue ordinateur : au moins 901 px ET un pointeur
   de précision. Le seuil est passé de 1024 à 901 le 2026-08-19 : c'est CELUI DE LA
   NAV (au-delà de 900 px, la barre montre ses cinq sections) — entre 901 et 1023,
   la pastille « Admin » s'invitait dans une barre déjà pleine et la faisait
   sauter, alors que le rail, lui, tient très bien à ces largeurs. Un seul seuil
   pour la barre et le rail : plus rien ne change d'état au milieu. La virgule est
   un OU — trop étroit OU tactile, et le rail disparaît : un iPad paysage dépasse
   900 px mais reste tactile, c'est le second critère qui l'exclut, comme voulu.
   La règle est purement ergonomique — les droits restent vérifiés par le serveur
   à chaque appel. */
@media (max-width: 900px), (pointer: coarse) {
    .admin-rail[b-1mvilrvk08] {
        display: none;
    }

    .desk-pill[b-1mvilrvk08] {
        display: inline-flex;
    }
}

/* Explication du back-office fermé. Le [hidden] doit être redit : une règle de
   classe qui pose display bat la feuille du navigateur, et le panneau resterait
   affiché en permanence. */
.dn-scrim[hidden][b-1mvilrvk08],
.dn-modal[hidden][b-1mvilrvk08] {
    display: none;
}

.dn-scrim[b-1mvilrvk08] {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(20, 26, 48, 0.5);
}

.dn-modal[b-1mvilrvk08] {
    position: fixed;
    z-index: 121;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(24rem, calc(100vw - 2rem));
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.15rem 1.15rem 1rem;
    border-radius: 1.3rem;
    background: var(--ps-elev);
    box-shadow: 0 24px 50px -22px var(--ps-shadow);
}

.dn-ic[b-1mvilrvk08] {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.85rem;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
}

.dn-ic svg[b-1mvilrvk08] {
    width: 1.3rem;
    height: 1.3rem;
}

.dn-modal h2[b-1mvilrvk08] {
    margin: 0.15rem 0 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ps-ink);
}

.dn-modal p[b-1mvilrvk08] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ps-muted);
}

.dn-ok[b-1mvilrvk08] {
    margin-top: 0.4rem;
    padding: 0.55rem;
    border: none;
    border-radius: 0.8rem;
    background: var(--ps-cyan);
    color: var(--ps-cyan-ink);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
}

.dn-ok:focus-visible[b-1mvilrvk08] {
    outline: 3px solid var(--ps-accent);
    outline-offset: 2px;
}

.nav-end[b-1mvilrvk08] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    flex: 1 1 0;
}

/* Bloc d'entrée « liens texte » (2026-08-07) : la connexion en gris, un filet
   vertical, l'inscription en graisse avec une flèche qui avance au survol.
   La pilule pleine a quitté la barre — c'est le héros de l'accueil qui recrute. */
.nav-plain[b-1mvilrvk08] {
    color: var(--ps-muted);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.45rem 0.35rem;
}

.nav-plain:hover[b-1mvilrvk08] {
    color: var(--ps-ink);
}

.nav-sep[b-1mvilrvk08] {
    width: 1px;
    height: 1.05rem;
    background: var(--ps-line);
}

.nav-signup[b-1mvilrvk08] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--ps-ink);
    text-decoration: none;
    font-weight: 800;
    font-size: 0.875rem;
    padding: 0.45rem 0.35rem;
}

.nav-signup[b-1mvilrvk08]::after {
    content: "→";
    font-weight: 800;
    transition: transform 0.12s ease;
}

.nav-signup:hover[b-1mvilrvk08]::after {
    transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
    .nav-signup[b-1mvilrvk08]::after { transition: none; }
}

/* Menu utilisateur en <details> : fonctionne sans JS ni circuit */
.user-menu[b-1mvilrvk08] {
    position: relative;
}

.user-menu summary[b-1mvilrvk08] {
    list-style: none;
    cursor: pointer;
}

.user-menu summary[b-1mvilrvk08]::-webkit-details-marker {
    display: none;
}

.avatar[b-1mvilrvk08] {
    display: grid;
    place-items: center;
    /* Ni comprimée ni étirée par le conteneur flex qui l'accueille : un rond qui
       s'aplatit n'est plus un rond. */
    flex: none;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    background: var(--ps-accent);
    color: #ffffff;
    font-weight: 800;
    /* Photo de profil (2026-08-21) : l'image se pose PAR-DESSUS l'initiale, qui
       reste le repli — pas de photo, pas de trou. */
    position: relative;
    overflow: hidden;
}

.ps-avatar-img[b-1mvilrvk08] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.avatar.has-photo .ps-avatar-ini[b-1mvilrvk08] {
    visibility: hidden;
}

/* Menu du compte (2026-08-19, « flèche d'ancrage ») : ÉCART franc (18 px au lieu
   de 10) + flèche raccrochée à l'avatar + ombre nettement plus profonde que
   celle de la barre — sans les trois, deux surfaces blanches qui se touchent
   presque finissent par n'en faire qu'une. */
.user-dropdown[b-1mvilrvk08] {
    position: absolute;
    right: 0;
    top: calc(100% + 18px);
    display: flex;
    flex-direction: column;
    min-width: 15rem;
    background: var(--ps-elev);
    border-radius: 1.1rem;
    box-shadow: 0 22px 46px -14px rgba(20, 28, 60, 0.5);
    /* Pas de padding haut : l'en-tête teinté doit toucher les coins arrondis.
       Les lignes du corps reprennent le retrait par leurs propres marges. */
    padding: 0 0 0.4rem;
    overflow: visible;
    z-index: 30;
}

/* La flèche : un carré tourné, dont seule la moitié haute dépasse — alignée
   sous l'avatar (2,35 rem de large, à droite de la barre). */
/* La flèche est taillée dans la teinte de L'EN-TÊTE, pas dans la surface :
   c'est elle + le bandeau teinté qui rendent la confusion avec la barre
   impossible — le premier pixel du menu est coloré (2026-08-19, épreuve
   « en-tête teinté + flèche »). */
.user-dropdown[b-1mvilrvk08]::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 0.95rem;
    width: 14px;
    height: 14px;
    background: var(--ps-accent-soft);
    transform: rotate(45deg);
    border-radius: 3px 0 0 0;
}

/* En-tête d'identité : QUI est connecté, avant les actions. */
/* L'en-tête d'identité porte le dégradé des bandeaux de modales, en
   miniature : la zone « qui est connecté » est colorée, jamais du blanc
   contre le blanc de la barre. */
.dd-head[b-1mvilrvk08] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.8rem;
    margin-bottom: 0.35rem;
    border-radius: 1.1rem 1.1rem 0 0;
    background: linear-gradient(160deg, var(--ps-accent-soft), var(--ps-cyan-soft));
}

/* Pastille du menu : bouton depuis le 2026-08-21 — donc réinitialisation de
   l'apparence native, et curseur loupe SEULEMENT quand il y a une photo à
   agrandir (sinon le clic ne ferait rien, et un curseur qui promet est pire
   qu'un curseur neutre). */
.dd-avatar[b-1mvilrvk08] {
    width: 2.1rem;
    height: 2.1rem;
    cursor: default;
    padding: 0;
    border: none;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.dd-avatar.has-photo[b-1mvilrvk08] {
    cursor: zoom-in;
}

.dd-avatar:focus-visible[b-1mvilrvk08] {
    outline: 2px solid var(--ps-accent);
    outline-offset: 2px;
}

.dd-who[b-1mvilrvk08] {
    min-width: 0;
}

.dd-name[b-1mvilrvk08] {
    display: block;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--ps-ink);
}

.dd-mail[b-1mvilrvk08] {
    display: block;
    font-size: 0.72rem;
    color: var(--ps-accent-ink);
    opacity: 0.9;
    overflow-wrap: anywhere;
}

.dd-sep[b-1mvilrvk08] {
    height: 1px;
    background: var(--ps-line);
    margin: 0.35rem 0.9rem;
}

/* Sous l'en-tête teinté, un filet doublerait la coupure — masqué. */
.dd-sep-top[b-1mvilrvk08] {
    display: none;
}

.dd-ic[b-1mvilrvk08] {
    flex: none;
    display: grid;
    place-items: center;
    color: var(--ps-muted);
}

.dd-ic svg[b-1mvilrvk08] {
    width: 1.05rem;
    height: 1.05rem;
}

/* ⚠️ `:not(.dd-avatar)` — cette règle habille les LIGNES du menu (largeur pleine,
   padding, coins de 0,7 rem). Le jour où la pastille est passée de <span> à
   <button> (2026-08-21), elle s'est fait happer : largeur imposée, la photo est
   devenue un ballon de rugby. Une règle qui vise un ÉLÉMENT attrape tout ce qui
   devient cet élément — ici on l'exclut nommément. */
.user-dropdown a[b-1mvilrvk08],
.user-dropdown button:not(.dd-avatar)[b-1mvilrvk08] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-align: left;
    background: none;
    border: none;
    color: var(--ps-ink);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    font-family: inherit;
    padding: 0.55rem 0.8rem;
    border-radius: 0.7rem;
    cursor: pointer;
    width: calc(100% - 0.8rem);
    margin: 0 0.4rem;
}

.user-dropdown a:hover[b-1mvilrvk08],
.user-dropdown button:not(.dd-avatar):hover[b-1mvilrvk08] {
    background: var(--ps-accent-soft);
}

/* Quitter n'est pas une destination : l'encre le dit avant le clic. */
.dd-out[b-1mvilrvk08],
.dd-out .dd-ic[b-1mvilrvk08] {
    color: var(--ps-pink-ink);
}

.dd-out:hover[b-1mvilrvk08] {
    background: var(--ps-pink-soft);
}

@media (max-width: 640px) {
    .nav-bar[b-1mvilrvk08] {
        padding: 0.75rem 1rem;
        gap: 0.6rem;
    }

    .nav-links a[b-1mvilrvk08] {
        padding: 0.35rem 0.6rem;
        font-size: 0.8rem;
    }

    /* Le bloc d'entrée se resserre pour tenir à côté du mot-marque :
       constaté coupé à 420 px sur capture (2026-08-07). */
    .brand span[b-1mvilrvk08] {
        font-size: 1rem;
    }

    .nav-end[b-1mvilrvk08] {
        gap: 0.35rem;
    }

    .nav-plain[b-1mvilrvk08],
    .nav-signup[b-1mvilrvk08] {
        font-size: 0.8rem;
        padding: 0.4rem 0.2rem;
    }

    .nav-sep[b-1mvilrvk08] {
        display: none;
    }
}

/* ═══ Menu replié : tiroir en tablette, feuille en mobile (2026-08-19) ═══════
   Au-dessus de 900 px il n'existe pas — la barre montre ses cinq sections. En
   dessous, c'est le même <details> qui sert : seul son habillage change, pour
   n'avoir qu'un balisage à tenir. */
.nav-panel[b-1mvilrvk08] {
    display: none;
    position: relative;
}

.nav-burger[b-1mvilrvk08] {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.7rem;
    background: var(--ps-bg);
    color: var(--ps-ink);
    cursor: pointer;
    list-style: none;
}

.nav-burger[b-1mvilrvk08]::-webkit-details-marker {
    display: none;
}

.nav-burger svg[b-1mvilrvk08] {
    width: 1.15rem;
    height: 1.15rem;
}

.nav-panel[open] .nav-burger[b-1mvilrvk08] {
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
}

.nav-burger:focus-visible[b-1mvilrvk08] {
    outline: 3px solid var(--ps-accent);
    outline-offset: 2px;
}

.np-scrim[b-1mvilrvk08] {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(20, 26, 48, 0.42);
}

.np-body[b-1mvilrvk08] {
    position: fixed;
    z-index: 26;
    display: flex;
    flex-direction: column;
    padding: 0.6rem 0.5rem;
    background: var(--ps-elev);
    box-shadow: 0 18px 44px -22px var(--ps-shadow);
    overflow: auto;
}

/* Libellé et croix sur la MÊME ligne (2026-08-19) : la croix seule occupait une
   ligne entière au-dessus du menu. Le padding du bas est l'écart demandé — sans
   lui, la croix frôle le premier lien et on ferme en visant « Articles ». */
.np-head[b-1mvilrvk08] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 0.15rem 0.5rem 0;
}

.np-close[b-1mvilrvk08] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 0.6rem;
    background: var(--ps-bg);
    color: var(--ps-ink);
    cursor: pointer;
}

.np-close:hover[b-1mvilrvk08] {
    background: var(--ps-line);
}

.np-close:focus-visible[b-1mvilrvk08] {
    outline: 3px solid var(--ps-accent);
    outline-offset: 2px;
}

.np-close svg[b-1mvilrvk08] {
    width: 1.05rem;
    height: 1.05rem;
}

.np-label[b-1mvilrvk08] {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ps-muted);
    padding: 0 0.75rem;
}

.np-site[b-1mvilrvk08] {
    display: flex;
    flex-direction: column;
}

.np-links[b-1mvilrvk08] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.np-links a[b-1mvilrvk08],
.np-account a[b-1mvilrvk08],
.np-out[b-1mvilrvk08] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.62rem 0.75rem;
    border-radius: 0.8rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ps-ink);
    text-decoration: none;
}

.np-links a:hover[b-1mvilrvk08],
.np-account a:hover[b-1mvilrvk08] {
    background: var(--ps-bg);
}

/* La pastille d'univers vient du CSS et non du balisage : les liens sont les
   mêmes objets que dans la barre, où l'accent est un fond et pas un point. */
.np-links a[b-1mvilrvk08]::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    flex: none;
    border-radius: 50%;
}

.np-links a.acc-cyan[b-1mvilrvk08]::before  { background: var(--ps-cyan); }
.np-links a.acc-teal[b-1mvilrvk08]::before  { background: var(--ps-accent); }
.np-links a.acc-pink[b-1mvilrvk08]::before  { background: var(--ps-pink-ink); }
.np-links a.acc-peach[b-1mvilrvk08]::before { background: var(--ps-peach); }
.np-links a.acc-gold[b-1mvilrvk08]::before  { background: var(--ps-gold); }

.np-links a.active.acc-cyan[b-1mvilrvk08]  { background: var(--ps-cyan-soft);   color: var(--ps-cyan-text); }
.np-links a.active.acc-teal[b-1mvilrvk08]  { background: var(--ps-accent-soft); color: var(--ps-accent-ink); }
.np-links a.active.acc-pink[b-1mvilrvk08]  { background: var(--ps-pink-soft);   color: var(--ps-pink-ink); }
.np-links a.active.acc-peach[b-1mvilrvk08] { background: var(--ps-peach-soft);  color: var(--ps-on-peach); }
.np-links a.active.acc-gold[b-1mvilrvk08]  { background: var(--ps-gold);        color: var(--ps-gold-ink); }

:root[data-theme="dark"] .np-links a.active.acc-peach[b-1mvilrvk08] {
    color: var(--ps-peach);
}

.np-out[b-1mvilrvk08] {
    width: 100%;
    background: none;
    border: none;
    font-family: inherit;
    text-align: left;
    color: var(--ps-pink-ink);
    cursor: pointer;
}

.np-out:hover[b-1mvilrvk08] {
    background: var(--ps-pink-soft);
}

.np-sep[b-1mvilrvk08] {
    height: 1px;
    margin: 0.45rem 0.5rem;
    background: var(--ps-line);
}

/* Le compte ne s'affiche QUE dans la feuille mobile : en tablette, l'avatar
   garde son menu juste à côté. */
.np-account[b-1mvilrvk08] {
    display: none;
}

@media (max-width: 900px) {
    .nav-links[b-1mvilrvk08] {
        display: none;
    }

    .nav-panel[b-1mvilrvk08] {
        display: block;
        order: -1;
    }

    .np-body[b-1mvilrvk08] {
        top: 0;
        left: 0;
        bottom: 0;
        width: min(16rem, 82vw);
        border-radius: 0 1.1rem 1.1rem 0;
        animation: np-slide-in-b-1mvilrvk08 0.26s cubic-bezier(0.32, 0.72, 0, 1);
    }
}

@keyframes np-slide-in-b-1mvilrvk08 {
    from { transform: translateX(-100%); }
}

@media (max-width: 640px) {
    /* La feuille porte déjà le compte : répéter l'avatar ferait deux chemins
       pour la même chose. Le rail, lui, est déjà hors-jeu (média ci-dessus). */
    .user-menu[b-1mvilrvk08] {
        display: none;
    }

    .np-body[b-1mvilrvk08] {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-height: 86vh;
        border-radius: 1.3rem 1.3rem 0 0;
        animation: np-slide-up-b-1mvilrvk08 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    }

    /* Poignée : dit que ça vient du bas, comme une feuille d'application. La
       croix reste, elle : la poignée n'est pas une cible pour le clavier. */
    .np-body[b-1mvilrvk08]::before {
        content: "";
        width: 2.4rem;
        height: 0.25rem;
        flex: none;
        margin: 0.15rem auto 0.5rem;
        border-radius: 9999px;
        background: var(--ps-line);
    }

    .np-account[b-1mvilrvk08] {
        display: flex;
        flex-direction: column;
    }

}

@keyframes np-slide-up-b-1mvilrvk08 {
    from { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .np-body[b-1mvilrvk08] { animation: none; }
    .rail-toggle svg[b-1mvilrvk08] { transition: none; }
}
/* _content/PawSeekrWebApp/Pages/404.razor.rz.scp.css */
/* La photo n'est plus un fond de page : elle vit dans NotFoundView (polaroid).
   Ici, seulement le centrage vertical dans le layout. */
.page-404[b-p728vr6a4l] {
    width: 100%;
    flex: 1;
    align-self: stretch;
    display: grid;
    place-items: center;
    background: var(--ps-bg);
}
/* _content/PawSeekrWebApp/Pages/Admin/AdminCategories.razor.rz.scp.css */
/* Compteur discret posé dans un onglet de domaine (.ps-seg-tabs vient du
   vocabulaire global — seul ce détail est propre à la page). */
.seg-cnt[b-jp0okrkujx] {
    font-size: 0.68rem;
    opacity: 0.75;
}
/* _content/PawSeekrWebApp/Pages/Admin/AdminHome.razor.rz.scp.css */
/* Tableau de bord /admin (épreuve hybride B+C validée le 2026-08-21) — les
   recettes de PLACEMENT du dashboard ; les briques (adm-card, adm-badge,
   adm-btn) viennent du vocabulaire AdminLayout. */

.kstrip[b-nl1mqoeykr] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

.kpi[b-nl1mqoeykr] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.knum[b-nl1mqoeykr] {
    font-size: 1.7rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--ps-ink);
}

.knum.hot[b-nl1mqoeykr] { color: var(--ps-pink-ink); }

.ksub[b-nl1mqoeykr] {
    font-size: 0.7rem;
    color: var(--ps-muted-soft);
}

.cgrid[b-nl1mqoeykr] {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

.dh2[b-nl1mqoeykr] {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-muted-soft);
    font-weight: 800;
    margin: 0 0 0.7rem;
}

/* Checklist des actions */
.task[b-nl1mqoeykr] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0;
    border-bottom: 1.5px solid var(--ps-line);
    font-size: 0.82rem;
}

.task:last-child[b-nl1mqoeykr] { border-bottom: 0; }

.tgo[b-nl1mqoeykr] { margin-left: auto; }

.tbullet[b-nl1mqoeykr] {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.5rem;
    display: grid;
    place-items: center;
    flex: none;
    font-weight: 900;
    font-size: 0.7rem;
}

/* Teintes partagées puces / points / fil — tokens seulement. */
.t-gold[b-nl1mqoeykr] { background: var(--ps-gold); color: var(--ps-gold-ink); }
.t-cyan[b-nl1mqoeykr] { background: var(--ps-cyan-soft); color: var(--ps-cyan-text); }
.t-peach[b-nl1mqoeykr] { background: var(--ps-peach-soft); color: var(--ps-ink); }
.t-pink[b-nl1mqoeykr] { background: var(--ps-pink-soft); color: var(--ps-pink-ink); }
.t-teal[b-nl1mqoeykr] { background: var(--ps-accent); color: #fff; }
.t-gray[b-nl1mqoeykr] { background: var(--ps-well); color: var(--ps-muted); }

/* Fil des événements */
.ev[b-nl1mqoeykr] {
    display: flex;
    gap: 0.6rem;
    padding: 0.45rem 0;
    font-size: 0.78rem;
    border-bottom: 1.5px dashed var(--ps-line);
}

.ev:last-child[b-nl1mqoeykr] { border-bottom: 0; }

.evt[b-nl1mqoeykr] {
    color: var(--ps-muted-soft);
    flex: none;
    width: 3.2rem;
    font-variant-numeric: tabular-nums;
}

.evd[b-nl1mqoeykr] {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    margin-top: 0.3rem;
    flex: none;
}

/* Cartes par domaine */
.dgrid[b-nl1mqoeykr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}

.dcard .dh[b-nl1mqoeykr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.dot[b-nl1mqoeykr] {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
}

.dot.t-cyan[b-nl1mqoeykr] { background: var(--ps-cyan); }
.dot.t-peach[b-nl1mqoeykr] { background: var(--ps-peach); }

.ml-auto[b-nl1mqoeykr] { margin-left: auto; }

.rowline[b-nl1mqoeykr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.42rem 0;
    border-bottom: 1.5px solid var(--ps-line);
    font-size: 0.8rem;
}

.rowline:last-of-type[b-nl1mqoeykr] { border-bottom: 0; }

.dfoot[b-nl1mqoeykr] { margin-top: 0.6rem; }

@media (max-width: 900px) {
    .kstrip[b-nl1mqoeykr] { grid-template-columns: 1fr 1fr; }
    .dgrid[b-nl1mqoeykr], .cgrid[b-nl1mqoeykr] { grid-template-columns: 1fr; }
}
/* _content/PawSeekrWebApp/Pages/Admin/Articles/AdminArticleEdit.razor.rz.scp.css */
/* ---- Photo en grand (2026-08-20) : gabarit pet-lb dupliqué par page, motif
   maison — même langage que PetDetail / PetScan / LostPetDetail. ---- */

/* .adm-thumb-zoom est mort avec la table de galerie (grille de médias,
   2026-08-21) : le zoom passe par la photo du tiroir de la grille. */

.pet-lb[b-qyrdwl7rod] {
    position: fixed;
    inset: 0;
    background: rgba(14, 18, 36, 0.88);
    display: grid;
    place-items: center;
    z-index: 100;
    cursor: zoom-out;
}

.pet-lb-frame[b-qyrdwl7rod] {
    margin: 0;
    max-width: 90vw;
    max-height: 85vh;
    cursor: default;
}

.pet-lb-frame img[b-qyrdwl7rod] {
    display: block;
    max-width: 90vw;
    max-height: 82vh;
    border-radius: 0.8rem;
    object-fit: contain;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
}

.pet-lb-frame figcaption[b-qyrdwl7rod] {
    margin-top: 0.6rem;
    text-align: center;
    color: #DEE4F5;
    font-size: 0.85rem;
    font-weight: 700;
}

.pet-lb-close[b-qyrdwl7rod],
.pet-lb-nav[b-qyrdwl7rod] {
    position: fixed;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-radius: 9999px;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.pet-lb-close[b-qyrdwl7rod] {
    top: 1.3rem;
    right: 1.5rem;
    width: 2.7rem;
    height: 2.7rem;
    font-size: 1.15rem;
}

.pet-lb-nav[b-qyrdwl7rod] {
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    font-size: 1.8rem;
    line-height: 1;
}

.pet-lb-nav.prev[b-qyrdwl7rod] { left: 1.2rem; }
.pet-lb-nav.next[b-qyrdwl7rod] { right: 1.2rem; }

.pet-lb-close:hover[b-qyrdwl7rod],
.pet-lb-nav:hover[b-qyrdwl7rod] {
    background: rgba(255, 255, 255, 0.24);
}

.pet-lb-count[b-qyrdwl7rod] {
    position: fixed;
    bottom: 1.4rem;
    left: 50%;
    transform: translateX(-50%);
    color: #DEE4F5;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ═══ Bloc « Mise en avant » du rail (2026-09-18, épreuve validée) ═══ */
[b-qyrdwl7rod] .adm-feat {
    margin-top: 0.25rem;
    padding: 0.85rem 0.95rem;
    border-radius: 0.9rem;
    border: 1.5px solid var(--ps-line);
    background: var(--ps-well);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

[b-qyrdwl7rod] .adm-feat-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

[b-qyrdwl7rod] .adm-feat-t {
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ps-accent-ink);
}

[b-qyrdwl7rod] .adm-feat-cnt {
    font-size: 0.66rem;
    font-weight: 800;
    color: var(--ps-cyan-text);
    background: var(--ps-cyan-soft);
    padding: 0.1rem 0.5rem;
    border-radius: 9999px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

[b-qyrdwl7rod] .adm-feat-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--ps-ink);
    cursor: pointer;
}

[b-qyrdwl7rod] .adm-feat-row input { width: 1rem; height: 1rem; accent-color: var(--ps-accent); cursor: pointer; }
[b-qyrdwl7rod] .adm-feat-row input:disabled { cursor: not-allowed; }

[b-qyrdwl7rod] .adm-feat-hint {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--ps-muted);
}

[b-qyrdwl7rod] .adm-feat-hint.warn { color: var(--ps-pink-ink); font-weight: 700; }
/* _content/PawSeekrWebApp/Pages/Admin/Articles/AdminArticleList.razor.rz.scp.css */
/* Tiroir de filtres « Appliquer » de la liste admin des articles (2026-09-17) : copie
   des règles .flt-* de Pages/Articles/ArticleList.razor.css — motif maison, le CSS scopé
   se duplique par page. Même z (scrim 100, tiroir 110), au-dessus de la barre admin. */
.flt-scrim[b-o1qj5wpaxw] {
    position: fixed;
    inset: 0;
    background: rgba(26, 34, 64, 0.45);
    z-index: 100;
}
.flt-drawer[b-o1qj5wpaxw] {
    position: fixed;
    top: 0;
    right: -23rem;
    bottom: 0;
    width: 22rem;
    max-width: 90vw;
    background: var(--ps-elev);
    z-index: 110;
    transition: right 0.25s ease;
    display: flex;
    flex-direction: column;
}
.flt-drawer.open[b-o1qj5wpaxw] {
    right: 0;
    box-shadow: -20px 0 50px -20px rgba(0, 0, 0, 0.4);
}
.flt-head[b-o1qj5wpaxw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.4rem 0.8rem;
}
.flt-title[b-o1qj5wpaxw] {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ps-ink);
}
.flt-scroll[b-o1qj5wpaxw] {
    flex: 1;
    overflow-y: auto;
    padding: 0 1.4rem;
}
.flt-sec[b-o1qj5wpaxw] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ps-muted-soft);
    margin: 1.2rem 0 0.5rem;
}
.flt-chips[b-o1qj5wpaxw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.flt-foot[b-o1qj5wpaxw] {
    display: flex;
    gap: 0.6rem;
    padding: 1rem 1.4rem 1.3rem;
    border-top: 1px solid var(--ps-line);
    background: var(--ps-well);
}
.flt-reset[b-o1qj5wpaxw] {
    flex: 1;
    border: 1.5px solid var(--ps-line-strong);
    background: var(--ps-surface);
    color: var(--ps-muted);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.55rem;
    border-radius: 0.8rem;
    cursor: pointer;
}
.flt-apply[b-o1qj5wpaxw] {
    flex: 2;
    border: none;
    background: var(--ps-btn);
    color: var(--ps-btn-ink);
    font-family: inherit;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 0.55rem;
    border-radius: 0.8rem;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
}
/* _content/PawSeekrWebApp/Pages/Admin/Partners/AdminOfferEdit.razor.rz.scp.css */
/* ═══ Prévisualisations publiques (épreuve validée le 2026-08-21, remplace
   l'aperçu vivant B du rail) : le coupon de /partners PLEINE TAILLE et la fiche
   « Affiche », ouverts en modale depuis le rail. Les recettes sont la copie
   d'OfferList.razor.css — dupliquées par page, motif maison, tout sur tokens —
   sans les états copier/survol : l'aperçu montre, il n'agit pas. Le coupon
   reprend `ps-card` (global) comme sur la vraie liste, donc le mode sombre
   crème suit tout seul. ═══ */

/* ── Rail « État de l'offre » ── */
.rail-val[b-yn88b9zplh] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ps-ink);
    overflow-wrap: anywhere;
}

.rail-code[b-yn88b9zplh] {
    display: inline-block;
    border: 2px dashed var(--ps-accent);
    color: var(--ps-accent-ink);
    background: var(--ps-surface);
    border-radius: 0.55rem;
    padding: 0.14rem 0.4rem;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.7rem;
    font-weight: 700;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* .rail-img et .img-badge-wait ont rejoint AdminLayout le 2026-08-25 (troisième
   usage : produit, offre, article). Rien de local ne reste ici pour eux. */

/* ── Scrim commun des deux prévisualisations + carte du coupon ── */
.pvw-scrim[b-yn88b9zplh] {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(26, 34, 64, 0.55);
    display: grid;
    place-items: center;
    padding: 1rem;
}

.pvw-card[b-yn88b9zplh] {
    position: relative;
    width: min(36rem, 100%);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background: var(--ps-surface);
    border-radius: 1.4rem;
    box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.5);
    padding: 1.3rem 1.4rem 1.4rem;
}

.pvw-k[b-yn88b9zplh] {
    margin: 0 0 0.9rem;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ps-accent-ink);
}

/* Le coupon se juge sur le fond de page réel — les demi-lunes du talon
   reprennent ce même fond, comme sur la liste. */
.pvw-swatch[b-yn88b9zplh] {
    background: var(--ps-bg);
    border-radius: 1rem;
    padding: 1.4rem;
}

/* ── Coupon pleine taille (copie d'OfferList.razor.css, inerte) ──
   ⚠️ Cette copie doit rester IDENTIQUE à la liste : un aperçu qui ment sur le rendu
   public vaut moins que pas d'aperçu. Refaite le 2026-08-25 avec le billet à deux
   talons — hauteur fixe et colonne image pleine hauteur, mêmes raisons qu'en face
   (la largeur de la colonne découle de la hauteur de la carte : une hauteur libre
   boucle). */
.coupon[b-yn88b9zplh] {
    display: flex;
    height: 12.5rem;   /* copie d'OfferList : une colonne depuis le 2026-09-17 */
    overflow: hidden;
}

.coupon .main[b-yn88b9zplh] { flex: 1 1 auto; }

/* Le corps, à hauteur fixe : il ne peut plus s'étirer, donc chaque texte dit sa
   place. Le titre est BORNÉ à deux lignes (la colonne de texte est plus étroite
   qu'avant, le carré ayant pris de la largeur) et les badges tombent au bas de la
   carte — à hauteur fixe, ils s'alignent d'une carte à l'autre au lieu de flotter
   derrière un texte plus ou moins long. */
.coupon .main[b-yn88b9zplh] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.coupon .otitle[b-yn88b9zplh] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Copie d'OfferList (2026-09-17) : les quatre blocs se répartissent sur la hauteur et
   aucun ne se comprime ; la ligne des repères reste sur une ligne. */
.coupon .main[b-yn88b9zplh] {
    justify-content: space-between;
    gap: 0.45rem;
}

.coupon .pname[b-yn88b9zplh],
.coupon .otitle[b-yn88b9zplh],
.coupon .odesc[b-yn88b9zplh],
.coupon .meta[b-yn88b9zplh] { flex: none; }

.coupon .meta[b-yn88b9zplh] {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}

.coupon .meta .cats[b-yn88b9zplh] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    overflow: hidden;
    flex: 1 1 auto;
}

.coupon .meta .cats .badge-cat[b-yn88b9zplh] { flex: none; }

.badge-more[b-yn88b9zplh] {
    flex: none;
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 9999px;
    background: var(--ps-well);
    color: var(--ps-muted);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
}


/* Le carré de la vignette, pleine hauteur, avec la perforation en miroir du talon. */
.cimg[b-yn88b9zplh] {
    position: relative;
    align-self: stretch;
    aspect-ratio: 1 / 1;
    flex: none;
    overflow: hidden;
    background: var(--ps-well);
    border-right: 2px dashed var(--ps-dash);
}

.cimg[b-yn88b9zplh]::before,
.cimg[b-yn88b9zplh]::after {
    content: "";
    position: absolute;
    right: -9px;
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    background: var(--ps-bg);
    z-index: 1;
}

.cimg[b-yn88b9zplh]::before { top: -8px; }
.cimg[b-yn88b9zplh]::after  { bottom: -8px; }

.cimg img[b-yn88b9zplh] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.coupon .main[b-yn88b9zplh] {
    padding: 1.05rem 1.5rem;
    min-width: 0;
}

.pname[b-yn88b9zplh] {
    margin: 0;
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ps-accent-ink);
}

.otitle[b-yn88b9zplh] {
    font-weight: 800;
    color: var(--ps-ink);
    font-size: 1.18rem;
    line-height: 1.3;
    margin: 0;
    overflow-wrap: anywhere;
}

.odesc[b-yn88b9zplh] {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--ps-muted);
    overflow-wrap: anywhere;
}

.meta[b-yn88b9zplh] {
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.until[b-yn88b9zplh] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.65rem;
    border-radius: 9999px;
    background: var(--ps-well);
    color: var(--ps-ink);
    font-size: 0.74rem;
    font-weight: 700;
}

.until svg[b-yn88b9zplh] {
    width: 0.85rem;
    height: 0.85rem;
    flex: none;
    color: var(--ps-accent-ink);
}

.badge-exp[b-yn88b9zplh] {
    display: inline-block;
    background: var(--ps-pink-soft);
    color: var(--ps-pink-ink);
    border-radius: 9999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.64rem;
    font-weight: 800;
}

.badge-cat[b-yn88b9zplh] {
    display: inline-block;
    border-radius: 9999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.64rem;
    font-weight: 800;
}

.b-teal[b-yn88b9zplh]  { background: var(--ps-accent-soft); color: var(--ps-accent-ink); }
.b-pink[b-yn88b9zplh]  { background: var(--ps-pink-soft);   color: var(--ps-pink-ink); }
.b-peach[b-yn88b9zplh] { background: var(--ps-peach-soft);  color: var(--ps-on-peach); }
.b-cyan[b-yn88b9zplh]  { background: var(--ps-cyan-soft);   color: var(--ps-cyan-text); }

:root[data-theme="dark"] .b-peach[b-yn88b9zplh] { color: var(--ps-peach); }

.stub[b-yn88b9zplh] {
    flex: none;
    width: 10.5rem;
    border-left: 2px dashed var(--ps-dash);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 0.6rem;
    position: relative;
    text-align: center;
}

.stub[b-yn88b9zplh]::before,
.stub[b-yn88b9zplh]::after {
    content: "";
    position: absolute;
    left: -9px;
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    background: var(--ps-bg);
}

.stub[b-yn88b9zplh]::before { top: -8px; }
.stub[b-yn88b9zplh]::after  { bottom: -8px; }

.stub-teal[b-yn88b9zplh]  { background: var(--ps-accent-soft); }
.stub-pink[b-yn88b9zplh]  { background: var(--ps-pink-soft); }
.stub-peach[b-yn88b9zplh] { background: var(--ps-peach-soft); }
.stub-cyan[b-yn88b9zplh]  { background: var(--ps-cyan-soft); }
.stub-gold[b-yn88b9zplh]  { background: var(--ps-gold); color: var(--ps-gold-ink); }

.catk[b-yn88b9zplh] {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.k-teal[b-yn88b9zplh]  { color: var(--ps-accent-ink); }
.k-pink[b-yn88b9zplh]  { color: var(--ps-pink-ink); }
.k-peach[b-yn88b9zplh] { color: var(--ps-on-peach); }
.k-cyan[b-yn88b9zplh]  { color: var(--ps-cyan-text); }

:root[data-theme="dark"] .k-peach[b-yn88b9zplh] { color: var(--ps-peach); }

.pct[b-yn88b9zplh] {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.pct-star[b-yn88b9zplh] {
    width: 1.6rem;
    height: 1.6rem;
    color: var(--ps-gold-ink);
}

.code[b-yn88b9zplh] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 2px dashed var(--ps-accent);
    color: var(--ps-accent-ink);
    background: var(--ps-surface);
    border-radius: 0.7rem;
    padding: 0.24rem 0.6rem;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.code .ic[b-yn88b9zplh] {
    width: 0.9em;
    height: 0.9em;
    flex: none;
    color: var(--ps-muted-soft);
}

.code-gold[b-yn88b9zplh] {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--ps-gold-ink);
    background: rgba(28, 26, 21, 0.12);
    border-radius: 0.5rem;
    padding: 0.14rem 0.5rem;
    white-space: nowrap;
}

.go[b-yn88b9zplh] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--ps-btn);
    color: var(--ps-btn-ink);
    border-radius: 9999px;
    padding: 0.38rem 0.95rem;
    font-size: 0.74rem;
    font-weight: 800;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
    white-space: nowrap;
}

.go.on-gold[b-yn88b9zplh] {
    background: #2B3A67;
    color: #ffffff;
    box-shadow: 0 3px 0 rgba(20, 26, 48, 0.4);
}

/* Sous 640 px : la perforation pivote — talon horizontal en bas, comme la liste. */
@media (max-width: 640px) {
    .coupon[b-yn88b9zplh] {
        flex-wrap: wrap;
        height: auto;
    }

    .coupon .cimg[b-yn88b9zplh] {
        align-self: auto;
        width: 7rem;
        height: 7rem;
    }

    .coupon .stub[b-yn88b9zplh] {
        width: 100%;
    }

    .stub[b-yn88b9zplh] {
        border-left: none;
        border-top: 2px dashed var(--ps-dash);
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0.7rem 1.05rem;
    }

    .stub[b-yn88b9zplh]::before,
    .stub[b-yn88b9zplh]::after {
        top: -8px;
        bottom: auto;
    }

    .stub[b-yn88b9zplh]::before { left: -8px; }
    .stub[b-yn88b9zplh]::after  { left: auto; right: -8px; }
}

/* ── Fiche « Affiche » (copie d'OfferList.razor.css, inerte) ── */
.od-modal[b-yn88b9zplh] {
    position: relative;
    width: min(44rem, 100%);
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    background: var(--ps-surface);
    border-radius: 1.4rem;
    overflow: hidden;
    box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.5);
}

.od-x[b-yn88b9zplh] {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    z-index: 5;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 9999px;
    border: none;
    background: var(--ps-surface);
    color: var(--ps-ink);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
    font-weight: 800;
}

.od-hero[b-yn88b9zplh] {
    position: relative;
    height: 13rem;
    flex: none;
}

.od-hero img[b-yn88b9zplh] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Voile de lisibilité, uniquement quand une photo est là. */
.od-hero:not(.od-plain)[b-yn88b9zplh]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 26, 48, 0) 30%, rgba(20, 26, 48, 0.72) 100%);
}

.od-plain[b-yn88b9zplh] { height: 9rem; }

.od-plain-teal[b-yn88b9zplh]  { background: var(--ps-accent-soft); }
.od-plain-pink[b-yn88b9zplh]  { background: var(--ps-pink-soft); }
.od-plain-peach[b-yn88b9zplh] { background: var(--ps-peach-soft); }
.od-plain-cyan[b-yn88b9zplh]  { background: var(--ps-cyan-soft); }

.od-hero-txt[b-yn88b9zplh] {
    position: absolute;
    left: 1.4rem;
    right: 5.4rem;   /* réserve la place du macaron */
    bottom: 1.1rem;
    z-index: 2;
}

.od-pname[b-yn88b9zplh] {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ps-accent-ink);
}

.od-title[b-yn88b9zplh] {
    margin: 0.2rem 0 0;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--ps-ink);
    letter-spacing: -0.01em;
}

/* Sur photo : couleurs claires FIXES, le voile est toujours sombre. */
.od-hero:not(.od-plain) .od-pname[b-yn88b9zplh] { color: #FFE3BF; }
.od-hero:not(.od-plain) .od-title[b-yn88b9zplh] { color: #ffffff; }

.od-macaron[b-yn88b9zplh] {
    position: absolute;
    right: 1.3rem;
    bottom: -1.5rem;
    z-index: 3;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 9999px;
    background: var(--ps-gold);
    color: var(--ps-gold-ink);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: 0 4px 0 rgba(20, 26, 48, 0.35);
    transform: rotate(6deg);
}

.od-macaron-star[b-yn88b9zplh] {
    width: 1.7rem;
    height: 1.7rem;
    color: var(--ps-gold-ink);
}

.od-body[b-yn88b9zplh] {
    padding: 1.2rem 1.4rem 0;
    overflow-y: auto;
}

.od-desc[b-yn88b9zplh] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ps-muted);
    max-width: 38rem;
}

.od-meta[b-yn88b9zplh] {
    margin: 0.9rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.od-foot[b-yn88b9zplh] {
    margin-top: 1.2rem;
    padding: 0.95rem 1.4rem;
    flex: none;
    background: var(--ps-well);
    border-top: 1px solid var(--ps-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.od-foot-left[b-yn88b9zplh] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.od-foot .code[b-yn88b9zplh] { font-size: 0.85rem; }

.od-hint[b-yn88b9zplh] {
    font-size: 0.72rem;
    color: var(--ps-muted-soft);
}

/* Copie d'OfferList (2026-09-17) : un code long se casse sur deux lignes dans le talon. */
.stub .code[b-yn88b9zplh],
.stub .code-gold[b-yn88b9zplh] {
    font-size: 0.76rem;
    max-width: 100%;
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    line-height: 1.3;
    padding: 0.32rem 0.55rem;
}

.stub .code .ic[b-yn88b9zplh],
.stub .code-gold .ic[b-yn88b9zplh] {
    display: inline-block;
    vertical-align: -0.12em;
    margin-left: 0.3rem;
    width: 0.9rem;
    height: 0.9rem;
}

/* ═══ DÉCOR du coupon (2026-09-17, épreuves validées) — tout en CSS, sous le texte, sans
   réaction à la souris, bâti sur des gris translucides et les jetons : il suit le thème.
   Corps : un halo de la teinte d'accent près de l'image, sur un pointillé de papier qui
   s'efface vers la droite. Talon : le POINÇON de contrôle, un tampon rond en encre
   translucide penché derrière la remise et le code. Se retire d'une règle. ═══ */
.coupon .main[b-yn88b9zplh] {
    position: relative;
    background-image:
        radial-gradient(28rem 12rem at 0% 0%, var(--halo), transparent 70%),
        radial-gradient(rgba(128, 120, 110, 0.16) 0.9px, transparent 1px);
    background-size: 100% 100%, 14px 14px;
}

.coupon .main[b-yn88b9zplh]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, var(--ps-surface) 100%);
    opacity: 0.9;
    pointer-events: none;
}

.coupon .main > *[b-yn88b9zplh] { position: relative; }

.stub[b-yn88b9zplh] { position: relative; }
.stub > *[b-yn88b9zplh] { position: relative; }

.stub .stub-stamp[b-yn88b9zplh] {
    position: absolute;
    width: 9.6rem;
    height: 9.6rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-14deg);
    color: rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.stub .stub-stamp text[b-yn88b9zplh] { font-family: inherit; }

/* Le code reste LISIBLE sur le poinçon (demande du fondateur) : son fond est opaque —
   le chip doré n'est plus une teinte translucide mais la même couleur, calculée pleine. */
.stub .code-gold[b-yn88b9zplh] { background: color-mix(in srgb, var(--ps-gold) 86%, #1c1a15); }

/* Le libellé de catégorie du talon garde un fond, comme le chip du code : il ne croise
   plus les lettres du poinçon (demande du fondateur, 2026-09-17). */
.stub .catk[b-yn88b9zplh] {
    background: var(--ps-surface);
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
}

/* Le halo prend la COULEUR DU TALON (2026-09-17, épreuve A validée) : la teinte du
   morceau de droite est posée sur la carte (tint-…) et le halo la lit ; l'or est adouci
   pour rester un halo et non un aplat. Défaut lagon, pour une carte sans teinte. */
.coupon[b-yn88b9zplh] { --halo: var(--ps-accent-soft); }
.coupon.tint-teal[b-yn88b9zplh]  { --halo: var(--ps-accent-soft); }
.coupon.tint-pink[b-yn88b9zplh]  { --halo: var(--ps-pink-soft); }
.coupon.tint-peach[b-yn88b9zplh] { --halo: var(--ps-peach-soft); }
.coupon.tint-cyan[b-yn88b9zplh]  { --halo: var(--ps-cyan-soft); }
.coupon.tint-gold[b-yn88b9zplh]  { --halo: color-mix(in srgb, var(--ps-gold) 55%, transparent); }
/* _content/PawSeekrWebApp/Pages/Admin/Partners/AdminOfferList.razor.rz.scp.css */
/* Tiroir de filtres « Appliquer » de la liste admin des offres (2026-09-18) : copie
   des règles .flt-* de Pages/Articles/ArticleList.razor.css — motif maison, le CSS scopé
   se duplique par page. Même z (scrim 100, tiroir 110), au-dessus de la barre admin. */
.flt-scrim[b-uwpf8fjxr7] {
    position: fixed;
    inset: 0;
    background: rgba(26, 34, 64, 0.45);
    z-index: 100;
}
.flt-drawer[b-uwpf8fjxr7] {
    position: fixed;
    top: 0;
    right: -23rem;
    bottom: 0;
    width: 22rem;
    max-width: 90vw;
    background: var(--ps-elev);
    z-index: 110;
    transition: right 0.25s ease;
    display: flex;
    flex-direction: column;
}
.flt-drawer.open[b-uwpf8fjxr7] {
    right: 0;
    box-shadow: -20px 0 50px -20px rgba(0, 0, 0, 0.4);
}
.flt-head[b-uwpf8fjxr7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.4rem 0.8rem;
}
.flt-title[b-uwpf8fjxr7] {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ps-ink);
}
.flt-scroll[b-uwpf8fjxr7] {
    flex: 1;
    overflow-y: auto;
    padding: 0 1.4rem;
}
.flt-sec[b-uwpf8fjxr7] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ps-muted-soft);
    margin: 1.2rem 0 0.5rem;
}
.flt-chips[b-uwpf8fjxr7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.flt-foot[b-uwpf8fjxr7] {
    display: flex;
    gap: 0.6rem;
    padding: 1rem 1.4rem 1.3rem;
    border-top: 1px solid var(--ps-line);
    background: var(--ps-well);
}
.flt-reset[b-uwpf8fjxr7] {
    flex: 1;
    border: 1.5px solid var(--ps-line-strong);
    background: var(--ps-surface);
    color: var(--ps-muted);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.55rem;
    border-radius: 0.8rem;
    cursor: pointer;
}
.flt-apply[b-uwpf8fjxr7] {
    flex: 2;
    border: none;
    background: var(--ps-btn);
    color: var(--ps-btn-ink);
    font-family: inherit;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 0.55rem;
    border-radius: 0.8rem;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
}
/* _content/PawSeekrWebApp/Pages/Admin/Shop/AdminOrderList.razor.rz.scp.css */
/* ═══ Registre des commandes (épreuve A validée le 2026-09-18, remplace la file de
   cartes du 2026-08-20) : un tableau au vocabulaire des autres listes admin
   (.adm-table, en-têtes triables, .adm-row-link). Ici seulement les cellules propres
   à une commande. Tout sur tokens. ═══ */

/* Deux lignes dans une cellule : la valeur, puis un sous-texte discret. */
.ord-ref[b-mf36tvb6tu] {
    display: block;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--ps-ink);
}

.ord-sub[b-mf36tvb6tu] {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.72rem;
    color: var(--ps-muted);
}

.ord-name[b-mf36tvb6tu] {
    display: block;
    font-weight: 700;
    color: var(--ps-ink);
    overflow-wrap: anywhere;
}

/* Le client peut être long (e-mail seul) : une ligne coupée à 16 rem, jamais un mot
   cassé au milieu — l'adresse complète est sur la fiche. */
.ord-who[b-mf36tvb6tu] { max-width: 16rem; }
.ord-who .ord-name[b-mf36tvb6tu] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
}

/* Un état tient sur une ligne : le tableau a la place, la rangée garde sa hauteur. */
.ord-table .adm-badge[b-mf36tvb6tu] { white-space: nowrap; }

/* La gravure telle que le laser la coupera — même fonte que les aperçus de face
   gravée (custom.css « PS Engraving »), en étiquette puits pour se détacher du nom. */
.ord-engr[b-mf36tvb6tu] {
    display: inline-block;
    margin-top: 0.2rem;
    padding: 0.08rem 0.45rem;
    border-radius: 0.4rem;
    border: 1px solid var(--ps-line);
    background: var(--ps-well);
    font-family: "PS Engraving", ui-monospace, Menlo, monospace;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ps-muted);
    overflow-wrap: anywhere;
}

.ord-content[b-mf36tvb6tu] { min-width: 16rem; }

.ord-amt[b-mf36tvb6tu] {
    font-weight: 800;
    color: var(--ps-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

.ord-paid[b-mf36tvb6tu] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--ps-accent-ink);
    white-space: nowrap;
}

.ord-unpaid[b-mf36tvb6tu] {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--ps-pink-ink);
    white-space: nowrap;
}

.ord-acts[b-mf36tvb6tu] {
    white-space: nowrap;
    text-align: right;
}

.ord-acts .adm-btn + .adm-btn[b-mf36tvb6tu],
.ord-acts .adm-btn + a[b-mf36tvb6tu] { margin-left: 0.4rem; }

/* ═══ Trace de la campagne promo (2026-09-15) : pastille gold — la couleur des
   offres et des remises — avec le code en chasse fixe. C'est un LIEN vers la fiche
   de campagne, archivée comprise : la trace ne se perd jamais. ═══ */
.ord-promo[b-mf36tvb6tu] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.25rem;
    padding: 0.08rem 0.55rem;
    border-radius: 9999px;
    background: var(--ps-gold);
    color: var(--ps-gold-ink);
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
}

.ord-promo .c[b-mf36tvb6tu] {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: 0.05em;
}

.ord-promo:hover[b-mf36tvb6tu] { filter: brightness(0.96); }

/* Tiroir de filtres « Appliquer » de la liste admin des commandes (2026-09-18) : copie
   des règles .flt-* de Pages/Articles/ArticleList.razor.css — motif maison, le CSS scopé
   se duplique par page. Même z (scrim 100, tiroir 110), au-dessus de la barre admin. */
.flt-scrim[b-mf36tvb6tu] {
    position: fixed;
    inset: 0;
    background: rgba(26, 34, 64, 0.45);
    z-index: 100;
}
.flt-drawer[b-mf36tvb6tu] {
    position: fixed;
    top: 0;
    right: -23rem;
    bottom: 0;
    width: 22rem;
    max-width: 90vw;
    background: var(--ps-elev);
    z-index: 110;
    transition: right 0.25s ease;
    display: flex;
    flex-direction: column;
}
.flt-drawer.open[b-mf36tvb6tu] {
    right: 0;
    box-shadow: -20px 0 50px -20px rgba(0, 0, 0, 0.4);
}
.flt-head[b-mf36tvb6tu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.4rem 0.8rem;
}
.flt-title[b-mf36tvb6tu] {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ps-ink);
}
.flt-scroll[b-mf36tvb6tu] {
    flex: 1;
    overflow-y: auto;
    padding: 0 1.4rem;
}
.flt-sec[b-mf36tvb6tu] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ps-muted-soft);
    margin: 1.2rem 0 0.5rem;
}
.flt-chips[b-mf36tvb6tu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.flt-foot[b-mf36tvb6tu] {
    display: flex;
    gap: 0.6rem;
    padding: 1rem 1.4rem 1.3rem;
    border-top: 1px solid var(--ps-line);
    background: var(--ps-well);
}
.flt-reset[b-mf36tvb6tu] {
    flex: 1;
    border: 1.5px solid var(--ps-line-strong);
    background: var(--ps-surface);
    color: var(--ps-muted);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.55rem;
    border-radius: 0.8rem;
    cursor: pointer;
}
.flt-apply[b-mf36tvb6tu] {
    flex: 2;
    border: none;
    background: var(--ps-btn);
    color: var(--ps-btn-ink);
    font-family: inherit;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 0.55rem;
    border-radius: 0.8rem;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
}
/* _content/PawSeekrWebApp/Pages/Admin/Shop/AdminProduct.razor.rz.scp.css */
/* ═══ Studio produit (épreuve validée le 2026-08-21) : recettes locales du bloc
   « visuel gravé » du médaillon et de la vitrine prévisualisée (fond lagon de
   /shop). Les tuiles de photos viennent du vocabulaire adm-media-* commun
   (AdminLayout.razor.css). ═══ */

/* Placement seul : la recette du badge vit dans AdminLayout depuis le 2026-08-25. */
.img-badge-wait[b-08d6w0wr9i] {
    margin-top: 0.6rem;
}

/* ── Disponibilité (épreuve validée le 2026-08-21) : une option = une rangée
   nommée — titre + conséquence + case. Rien ne part au serveur pendant qu'on
   coche : tout se valide au Créer/Enregistrer. ── */
.opt-row[b-08d6w0wr9i] {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    border: 2px solid var(--ps-line);
    border-radius: 0.9rem;
    background: var(--ps-well);
    padding: 0.75rem 0.95rem;
    margin-top: 0.6rem;
    cursor: pointer;
}

.opt-row:hover[b-08d6w0wr9i] { border-color: var(--ps-accent); }

.opt-row input[type="checkbox"][b-08d6w0wr9i] {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.15rem;
    accent-color: var(--ps-accent);
    flex: none;
    cursor: pointer;
}

.opt-row .t[b-08d6w0wr9i] {
    font-size: 0.88rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.opt-row .s[b-08d6w0wr9i] {
    margin: 0.15rem 0 0;
    font-size: 0.74rem;
    color: var(--ps-muted);
}

/* Rupture cochée : la rangée passe au rose — l'état saute aux yeux. */
.opt-row.warn-on[b-08d6w0wr9i] {
    border-color: var(--ps-pink-ink);
    background: var(--ps-pink-soft);
}

:root[data-theme="dark"] .opt-row.warn-on .s[b-08d6w0wr9i] { color: var(--ps-ink); }

/* Panneau du suivi de stock, cousu à sa rangée (la rangée perd ses coins bas). */
.opt-row.has-panel[b-08d6w0wr9i] { border-radius: 0.9rem 0.9rem 0 0; }

.stock-panel[b-08d6w0wr9i] {
    border: 2px solid var(--ps-line);
    border-top: none;
    border-radius: 0 0 0.9rem 0.9rem;
    margin: 0 0.9rem;
    padding: 0.9rem 0.95rem;
    background: var(--ps-surface);
}

.stock-grid[b-08d6w0wr9i] { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: flex-start; }
.stock-qty[b-08d6w0wr9i] { width: 9rem; }
.stock-recap[b-08d6w0wr9i] { flex: 1; min-width: 15rem; }

.recap-line[b-08d6w0wr9i] { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.recap-line b[b-08d6w0wr9i] { font-size: 1.05rem; font-variant-numeric: tabular-nums; }

.gauge[b-08d6w0wr9i] {
    height: 0.55rem;
    border-radius: 9999px;
    background: var(--ps-line);
    overflow: hidden;
    margin-top: 0.35rem;
}

.gauge i[b-08d6w0wr9i] {
    display: block;
    height: 100%;
    background: var(--ps-accent);
    border-radius: 9999px;
    transition: width 0.2s ease;
}

.gauge i.empty[b-08d6w0wr9i] { background: var(--ps-pink-ink); }

.chips[b-08d6w0wr9i] { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.55rem; }
.chips .adm-badge[b-08d6w0wr9i] { font-variant-numeric: tabular-nums; }

/* ── Visuel gravé — SPÉCIFIQUE au médaillon : les deux faces générées, visuel de
   base de la vitrine ; les photos les complètent. ── */
.engr-block[b-08d6w0wr9i] {
    border: 2px solid var(--ps-line);
    border-radius: 0.9rem;
    background: var(--ps-well);
    padding: 0.9rem;
    margin-top: 0.2rem;
    margin-bottom: 0.6rem;
    display: flex;
    gap: 1.4rem;
    align-items: center;
    flex-wrap: wrap;
}

.engr-face[b-08d6w0wr9i] { margin: 0; text-align: center; }

.engr-face figcaption[b-08d6w0wr9i] {
    margin-top: 0.45rem;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--ps-muted);
}

/* Disque métal compact — déclinaison réduite des faces de /shop (dégradé fixe :
   le métal est le même dans les deux thèmes). */
.medal[b-08d6w0wr9i] {
    position: relative;
    width: 7.6rem;
    height: 7.6rem;
    border-radius: 9999px;
    margin: 0 auto;
    background: linear-gradient(145deg, #eceef1, #c7cbd3);
    box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.75),
                inset 0 -3px 7px rgba(20, 26, 48, 0.22),
                0 6px 14px -8px rgba(20, 26, 48, 0.5);
    display: grid;
    place-items: center;
}

.medal[b-08d6w0wr9i]::before {
    content: "";
    position: absolute;
    top: -0.6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5rem;
    height: 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    background: linear-gradient(145deg, #e4e6ea, #c2c6cf);
    z-index: -1;
}

.engr-qr[b-08d6w0wr9i] {
    width: 4.9rem;
    height: 4.9rem;
    display: block;
}

.engr-txt[b-08d6w0wr9i] {
    text-align: center;
    color: #2B3A67;
    font-family: "PS Engraving", ui-monospace, Menlo, monospace;
}

.engr-txt b[b-08d6w0wr9i] { display: block; font-size: 1.05rem; }
.engr-txt span[b-08d6w0wr9i] { font-size: 0.55rem; }

.engr-note[b-08d6w0wr9i] {
    flex: 1;
    min-width: 14rem;
    margin: 0;
    font-size: 0.78rem;
    color: var(--ps-muted);
}

/* ── Vitrine prévisualisée : la carte produit de /shop en modale. ── */
.pvw-scrim[b-08d6w0wr9i] {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(26, 34, 64, 0.55);
    display: grid;
    place-items: center;
    padding: 1rem;
}

.shop-modal[b-08d6w0wr9i] {
    position: relative;
    width: min(30rem, 100%);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--ps-surface);
    border-radius: 1.75rem;
    box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.5);
}

.pvw-k[b-08d6w0wr9i] {
    position: absolute;
    top: 0.9rem;
    left: 1.2rem;
    z-index: 5;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ps-accent-ink);
}

.od-x[b-08d6w0wr9i] {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    z-index: 5;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 9999px;
    border: none;
    background: var(--ps-surface);
    color: var(--ps-ink);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
    font-weight: 800;
}

/* Fond « lagon » — la recette .prod-visual de la vitrine. */
.sv-visual[b-08d6w0wr9i] {
    background:
        radial-gradient(16rem 10rem at 50% -2.5rem, var(--ps-cyan-soft), transparent 78%),
        linear-gradient(180deg, var(--ps-accent-soft), var(--ps-surface) 92%);
    padding: 2rem 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

.sv-faces[b-08d6w0wr9i] {
    display: flex;
    gap: 1.6rem;
    flex-wrap: wrap;
    justify-content: center;
}

.sv-hero[b-08d6w0wr9i] {
    width: 16rem;
    height: 11rem;
    border-radius: 1rem;
    object-fit: cover;
    display: block;
    box-shadow: 0 14px 30px -18px var(--ps-shadow);
}

.sv-hero-sm[b-08d6w0wr9i] { width: 13rem; height: 8.5rem; }

.sv-thumbs[b-08d6w0wr9i] {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: center;
}

.sv-thumbs button[b-08d6w0wr9i] {
    border: 2px solid var(--ps-line);
    background: none;
    border-radius: 0.55rem;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
}

.sv-thumbs button.on[b-08d6w0wr9i] { border-color: var(--ps-accent); }

.sv-thumbs img[b-08d6w0wr9i] {
    display: block;
    width: 3.6rem;
    height: 2.6rem;
    object-fit: cover;
}

.sv-body[b-08d6w0wr9i] {
    padding: 1rem 1.5rem 1.5rem;
    text-align: center;
}

.sv-name[b-08d6w0wr9i] { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
.sv-desc[b-08d6w0wr9i] { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--ps-muted); }
.sv-price[b-08d6w0wr9i] { margin: 0.8rem 0 0; font-size: 1.3rem; font-weight: 800; }
.sv-ship[b-08d6w0wr9i] { margin: 0.15rem 0 0; font-size: 0.72rem; color: var(--ps-muted-soft); }

/* Pilule CTA inerte : l'aperçu montre, il n'agit pas. */
.sv-cta[b-08d6w0wr9i] {
    margin-top: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--ps-btn);
    color: var(--ps-btn-ink);
    border-radius: 9999px;
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
}
/* _content/PawSeekrWebApp/Pages/Admin/Shop/AdminProductList.razor.rz.scp.css */
/* ═══ Pastille produit (épreuve A validée le 2026-08-20) : le disque métal du
   médaillon en rappel visuel de la fiche — plein pour un produit actif, cerclé
   pointillé pour un inactif ou l'exemple fantôme. Tout sur tokens. ═══ */

.prod-dot[b-meqxxbxv23] {
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 9999px;
    background: linear-gradient(145deg, #f3f4f6, #cfd4dc);
    box-shadow: inset 0 -2px 3px rgba(43, 58, 103, 0.25);
}

.prod-dot.ghost[b-meqxxbxv23] {
    background: var(--ps-well);
    border: 1.5px dashed var(--ps-line);
    box-shadow: none;
}

/* Tiroir de filtres « Appliquer » de la liste admin des produits (2026-09-18) : copie
   des règles .flt-* de Pages/Articles/ArticleList.razor.css — motif maison, le CSS scopé
   se duplique par page. Même z (scrim 100, tiroir 110), au-dessus de la barre admin. */
.flt-scrim[b-meqxxbxv23] {
    position: fixed;
    inset: 0;
    background: rgba(26, 34, 64, 0.45);
    z-index: 100;
}
.flt-drawer[b-meqxxbxv23] {
    position: fixed;
    top: 0;
    right: -23rem;
    bottom: 0;
    width: 22rem;
    max-width: 90vw;
    background: var(--ps-elev);
    z-index: 110;
    transition: right 0.25s ease;
    display: flex;
    flex-direction: column;
}
.flt-drawer.open[b-meqxxbxv23] {
    right: 0;
    box-shadow: -20px 0 50px -20px rgba(0, 0, 0, 0.4);
}
.flt-head[b-meqxxbxv23] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.4rem 0.8rem;
}
.flt-title[b-meqxxbxv23] {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ps-ink);
}
.flt-scroll[b-meqxxbxv23] {
    flex: 1;
    overflow-y: auto;
    padding: 0 1.4rem;
}
.flt-sec[b-meqxxbxv23] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ps-muted-soft);
    margin: 1.2rem 0 0.5rem;
}
.flt-chips[b-meqxxbxv23] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.flt-foot[b-meqxxbxv23] {
    display: flex;
    gap: 0.6rem;
    padding: 1rem 1.4rem 1.3rem;
    border-top: 1px solid var(--ps-line);
    background: var(--ps-well);
}
.flt-reset[b-meqxxbxv23] {
    flex: 1;
    border: 1.5px solid var(--ps-line-strong);
    background: var(--ps-surface);
    color: var(--ps-muted);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.55rem;
    border-radius: 0.8rem;
    cursor: pointer;
}
.flt-apply[b-meqxxbxv23] {
    flex: 2;
    border: none;
    background: var(--ps-btn);
    color: var(--ps-btn-ink);
    font-family: inherit;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 0.55rem;
    border-radius: 0.8rem;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
}
/* _content/PawSeekrWebApp/Pages/Admin/Shop/AdminPromo.razor.rz.scp.css */
/* La jauge utilisés/total vit dans AdminLayout.razor.css (::deep .gauge) depuis le
   2026-09-15 : la fiche de campagne la montre aussi dans son rail. */

/* Note d'exploitation sous le nom de campagne (2026-08-24) : seconde ligne assourdie,
   bornée pour que la colonne ne s'étire pas — la liste reste un tableau. */
/* UNE ligne, comme l'accroche des produits (2026-08-24) : la hauteur d'une rangée ne
   dépend jamais de la longueur d'un texte. Borne sur le TEXTE — voir le commentaire
   jumeau dans AdminProductList.razor.css. */
.camp-note[b-khci1td67j] {
    display: block;
    margin-top: 0.15rem;
    /* 13 rem et non 24 (2026-09-15) : mesuré headless, à 24 rem la table de huit
       colonnes débordait de 137 px à 1280 px de contenu et défilait en silence. */
    max-width: 13rem;
    font-weight: 400;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--ps-muted-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══ Mécanique et places tenues (2026-09-15) ═══ */
/* FIGÉE : cadenas à côté du nom — au moins un achat payé, la campagne ne se
   modifie plus. Le mot est dit en petites capitales assourdies, pas en pastille :
   ce n'est pas un état de la campagne, c'est une propriété de son histoire. */
.camp-frozen[b-khci1td67j] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.5rem;
    vertical-align: middle;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ps-muted-soft);
}

.camp-frozen svg[b-khci1td67j] {
    width: 0.8rem;
    height: 0.8rem;
}

.camp-code[b-khci1td67j] {
    display: inline-block;
    margin-left: 0.4rem;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* Les places TENUES sont assourdies : ce n'est pas une vente, seulement une
   réservation en cours qui peut encore repartir. */
.gauge .txt .held[b-khci1td67j] {
    margin-left: 0.35rem;
    color: var(--ps-muted-soft);
    font-weight: 600;
}

/* Tiroir de filtres « Appliquer » de la liste admin des campagnes promo (2026-09-18) : copie
   des règles .flt-* de Pages/Articles/ArticleList.razor.css — motif maison, le CSS scopé
   se duplique par page. Même z (scrim 100, tiroir 110), au-dessus de la barre admin. */
.flt-scrim[b-khci1td67j] {
    position: fixed;
    inset: 0;
    background: rgba(26, 34, 64, 0.45);
    z-index: 100;
}
.flt-drawer[b-khci1td67j] {
    position: fixed;
    top: 0;
    right: -23rem;
    bottom: 0;
    width: 22rem;
    max-width: 90vw;
    background: var(--ps-elev);
    z-index: 110;
    transition: right 0.25s ease;
    display: flex;
    flex-direction: column;
}
.flt-drawer.open[b-khci1td67j] {
    right: 0;
    box-shadow: -20px 0 50px -20px rgba(0, 0, 0, 0.4);
}
.flt-head[b-khci1td67j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.4rem 0.8rem;
}
.flt-title[b-khci1td67j] {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ps-ink);
}
.flt-scroll[b-khci1td67j] {
    flex: 1;
    overflow-y: auto;
    padding: 0 1.4rem;
}
.flt-sec[b-khci1td67j] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ps-muted-soft);
    margin: 1.2rem 0 0.5rem;
}
.flt-chips[b-khci1td67j] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.flt-foot[b-khci1td67j] {
    display: flex;
    gap: 0.6rem;
    padding: 1rem 1.4rem 1.3rem;
    border-top: 1px solid var(--ps-line);
    background: var(--ps-well);
}
.flt-reset[b-khci1td67j] {
    flex: 1;
    border: 1.5px solid var(--ps-line-strong);
    background: var(--ps-surface);
    color: var(--ps-muted);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.55rem;
    border-radius: 0.8rem;
    cursor: pointer;
}
.flt-apply[b-khci1td67j] {
    flex: 2;
    border: none;
    background: var(--ps-btn);
    color: var(--ps-btn-ink);
    font-family: inherit;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 0.55rem;
    border-radius: 0.8rem;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
}
/* _content/PawSeekrWebApp/Pages/Admin/Shop/AdminPromoCreate.razor.rz.scp.css */
/* ═══ Aperçu « ticket leaflet » (épreuve B validée le 2026-08-20) : ce que le
   leaflet imprimé dira — bord pointillé, remise en gros, code d'exemple au
   format réel. Fond pêche + bord gold quand la remise est totale (le même
   marqueur gold que les offres spéciales). Tout sur tokens. ═══ */

.pt-ticket[b-x1bi6oosp9] {
    border: 2px dashed var(--ps-accent);
    border-radius: 1rem;
    background: var(--ps-well);
    padding: 1rem 1.1rem;
    text-align: center;
}

.pt-ticket.gold[b-x1bi6oosp9] {
    border-color: var(--ps-gold);
    background: var(--ps-peach-soft);
}

.pt-brand[b-x1bi6oosp9] {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ps-accent-ink);
}

.pt-off[b-x1bi6oosp9] {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0.2rem 0 0.1rem;
    font-variant-numeric: tabular-nums;
}

.pt-ticket.gold .pt-off[b-x1bi6oosp9] { color: var(--ps-on-peach); }

.pt-scope[b-x1bi6oosp9] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ps-muted);
}

.pt-code[b-x1bi6oosp9] {
    display: inline-block;
    margin: 0.7rem 0 0.3rem;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 700;
    font-size: 0.95rem;
    background: var(--ps-surface);
    border: 2px dashed var(--ps-line);
    border-radius: 0.6rem;
    padding: 0.3rem 0.8rem;
    letter-spacing: 0.08em;
    color: var(--ps-ink);
}

.pt-valid[b-x1bi6oosp9] {
    font-size: 0.68rem;
    color: var(--ps-muted-soft);
}

/* ═══ Choix de mécanique (2026-09-15) : deux cartes, pas un menu déroulant — le
   choix commande tout le formulaire et il est définitif, il doit se voir. Teal
   pour le lot, gold pour le partagé : les mêmes couleurs que la liste. ═══ */
.pk-modes[b-x1bi6oosp9] {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 620px) {
    .pk-modes[b-x1bi6oosp9] { grid-template-columns: 1fr; }
}

.pk-mode[b-x1bi6oosp9] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    text-align: left;
    background: var(--ps-well);
    color: var(--ps-ink);
    border: 2px solid var(--ps-line);
    border-radius: 1rem;
    padding: 0.85rem 0.95rem;
    font: inherit;
    cursor: pointer;
}

.pk-mode:hover[b-x1bi6oosp9] { border-color: var(--ps-accent); }
.pk-mode[aria-pressed="true"][b-x1bi6oosp9] { border-color: var(--ps-accent); background: var(--ps-accent-soft); }
.pk-mode.gold[aria-pressed="true"][b-x1bi6oosp9] { border-color: var(--ps-gold); background: var(--ps-peach-soft); }

.pk-t[b-x1bi6oosp9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 800;
    font-size: 0.9rem;
}

.pk-pip[b-x1bi6oosp9] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--ps-accent);
    flex: none;
}

.pk-mode.gold .pk-pip[b-x1bi6oosp9] { background: var(--ps-gold); }
.pk-d[b-x1bi6oosp9] { font-size: 0.75rem; color: var(--ps-muted); }

/* Le code partagé se lit et se dicte : chasse fixe, majuscules. */
.pk-code[b-x1bi6oosp9] {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pk-check[b-x1bi6oosp9] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

/* ═══ Fiche de campagne (2026-09-15, épreuve fonctionnelle validée) ═══ */

/* Les cartes de mécanique deviennent inertes sur une fiche : la retenue garde
   sa couleur, l'autre s'estompe — on lit le choix, on ne le refait pas. */
.pk-mode:disabled[b-x1bi6oosp9] { cursor: default; }
.pk-mode:disabled:hover[b-x1bi6oosp9] { border-color: var(--ps-line); }
.pk-mode[aria-pressed="true"]:disabled:hover[b-x1bi6oosp9] { border-color: var(--ps-accent); }
.pk-mode.gold[aria-pressed="true"]:disabled:hover[b-x1bi6oosp9] { border-color: var(--ps-gold); }
.pk-mode[aria-pressed="false"]:disabled[b-x1bi6oosp9] { opacity: 0.45; }

/* Pastilles sous le titre : mécanique, état, figée, édition en cours. */
.hd-badges[b-x1bi6oosp9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.hd-frozen[b-x1bi6oosp9] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ps-muted-soft);
}

.hd-frozen svg[b-x1bi6oosp9] {
    width: 0.8rem;
    height: 0.8rem;
}

/* Le rail d'actions : boutons pleine largeur, centrés ; la raison d'un bouton
   grisé se dit juste dessous, en petit, jamais dans une bulle. */
.rail-acts .adm-btn[b-x1bi6oosp9] { justify-content: center; }

.rail-why[b-x1bi6oosp9] {
    margin: -0.15rem 0 0;
    font-size: 0.72rem;
    line-height: 1.4;
    text-align: center;
    color: var(--ps-muted-soft);
}

/* La carte en cours d'édition se cercle d'accent : on voit d'un coup d'œil ce
   qui est ouvert à la saisie. */
.adm-card.editing[b-x1bi6oosp9] {
    outline: 2px solid var(--ps-accent);
    outline-offset: -2px;
}
/* _content/PawSeekrWebApp/Pages/Admin/Support/AdminSupportList.razor.rz.scp.css */
/* ═══ Liste des tickets du back-office (épreuve validée le 2026-09-18) : le tableau au
   vocabulaire des autres listes admin, avec les cellules propres à un ticket. Les pastilles
   (.sup-pill, p-*) reprennent le vocabulaire de la page /support pour que l'équipe et le
   client lisent les mêmes couleurs. Tout sur tokens. ═══ */

.sup-mock[b-dtxi7em9z7] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    vertical-align: 0.2rem;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ps-gold-ink);
    background: var(--ps-gold);
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
}

.sup-no[b-dtxi7em9z7] {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.sup-sub[b-dtxi7em9z7] {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.72rem;
    color: var(--ps-muted);
    white-space: nowrap;
}

.sup-name[b-dtxi7em9z7] { display: block; font-weight: 700; }
.sup-who[b-dtxi7em9z7] { max-width: 14rem; }
.sup-who .sup-sub[b-dtxi7em9z7] { overflow: hidden; text-overflow: ellipsis; }

.sup-subjcell[b-dtxi7em9z7] { min-width: 16rem; }

.sup-subj[b-dtxi7em9z7] {
    display: block;
    font-weight: 700;
    max-width: 19rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sup-pills[b-dtxi7em9z7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.25rem;
}

.sup-pill[b-dtxi7em9z7] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 1.35rem;
    padding: 0 0.55rem;
    border-radius: 9999px;
    font-size: 0.64rem;
    font-weight: 800;
    white-space: nowrap;
}

.sup-pill i[b-dtxi7em9z7] {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 9999px;
    background: currentColor;
    display: inline-block;
}

.p-type[b-dtxi7em9z7] { background: var(--ps-cyan-soft); color: var(--ps-cyan-text); }
.p-code[b-dtxi7em9z7] { background: var(--ps-pink-soft); color: var(--ps-pink-ink); font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.04em; }
.p-ctx[b-dtxi7em9z7] { background: var(--ps-well); border: 1.5px solid var(--ps-line); color: var(--ps-ink); font-family: ui-monospace, Menlo, monospace; }
.p-open[b-dtxi7em9z7] { background: var(--ps-peach-soft); color: var(--ps-on-peach); }
.p-ans[b-dtxi7em9z7] { background: var(--ps-accent-soft); color: var(--ps-accent-ink); }
.p-closed[b-dtxi7em9z7] { background: var(--ps-line); color: var(--ps-muted); }
.p-demo[b-dtxi7em9z7] { background: var(--ps-gold); color: var(--ps-gold-ink); text-transform: uppercase; letter-spacing: 0.05em; }

/* « Attente » : pêche au-delà de 24 h, rose au-delà de 48 h — l'engagement de l'accusé. */
.sup-wait[b-dtxi7em9z7] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74rem;
    font-weight: 800;
    white-space: nowrap;
}

.sup-wait svg[b-dtxi7em9z7] { width: 12px; height: 12px; }
.sup-wait.ok[b-dtxi7em9z7] { color: var(--ps-muted); }
.sup-wait.due[b-dtxi7em9z7] { color: var(--ps-on-peach); }
.sup-wait.late[b-dtxi7em9z7] { color: var(--ps-pink-ink); }

.sup-last[b-dtxi7em9z7] { max-width: 15rem; }

.sup-lastwho[b-dtxi7em9z7] {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ps-muted);
    white-space: nowrap;
}

.sup-lastwho.team[b-dtxi7em9z7] { color: var(--ps-accent-ink); }

.sup-excerpt[b-dtxi7em9z7] {
    display: block;
    color: var(--ps-muted);
    font-size: 0.76rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sup-acts[b-dtxi7em9z7] { white-space: nowrap; text-align: right; }
.sup-table .sup-pill[b-dtxi7em9z7] { white-space: nowrap; }

/* Tiroir de filtres « Appliquer » de la liste admin du support (2026-09-18) : copie
   des règles .flt-* de Pages/Articles/ArticleList.razor.css — motif maison, le CSS scopé
   se duplique par page. Même z (scrim 100, tiroir 110), au-dessus de la barre admin. */
.flt-scrim[b-dtxi7em9z7] {
    position: fixed;
    inset: 0;
    background: rgba(26, 34, 64, 0.45);
    z-index: 100;
}
.flt-drawer[b-dtxi7em9z7] {
    position: fixed;
    top: 0;
    right: -23rem;
    bottom: 0;
    width: 22rem;
    max-width: 90vw;
    background: var(--ps-elev);
    z-index: 110;
    transition: right 0.25s ease;
    display: flex;
    flex-direction: column;
}
.flt-drawer.open[b-dtxi7em9z7] {
    right: 0;
    box-shadow: -20px 0 50px -20px rgba(0, 0, 0, 0.4);
}
.flt-head[b-dtxi7em9z7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.4rem 0.8rem;
}
.flt-title[b-dtxi7em9z7] {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ps-ink);
}
.flt-scroll[b-dtxi7em9z7] {
    flex: 1;
    overflow-y: auto;
    padding: 0 1.4rem;
}
.flt-sec[b-dtxi7em9z7] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ps-muted-soft);
    margin: 1.2rem 0 0.5rem;
}
.flt-chips[b-dtxi7em9z7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.flt-foot[b-dtxi7em9z7] {
    display: flex;
    gap: 0.6rem;
    padding: 1rem 1.4rem 1.3rem;
    border-top: 1px solid var(--ps-line);
    background: var(--ps-well);
}
.flt-reset[b-dtxi7em9z7] {
    flex: 1;
    border: 1.5px solid var(--ps-line-strong);
    background: var(--ps-surface);
    color: var(--ps-muted);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.55rem;
    border-radius: 0.8rem;
    cursor: pointer;
}
.flt-apply[b-dtxi7em9z7] {
    flex: 2;
    border: none;
    background: var(--ps-btn);
    color: var(--ps-btn-ink);
    font-family: inherit;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 0.55rem;
    border-radius: 0.8rem;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
}
/* _content/PawSeekrWebApp/Pages/Admin/Support/AdminSupportTicket.razor.rz.scp.css */
/* ═══ Fil d'un ticket côté équipe (épreuve validée le 2026-09-18) : le fil de /support
   INVERSÉ — l'équipe à droite en marine, le client à gauche — plus la note interne dorée.
   Les pastilles reprennent le vocabulaire de /support. Tout sur tokens. ═══ */

.sup-grid[b-m1rjsbdtip] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: 1.25rem;
    margin-top: 1rem;
}

@media (max-width: 900px) {
    .sup-grid[b-m1rjsbdtip] { grid-template-columns: 1fr; }
}

.sup-ticket[b-m1rjsbdtip] { padding: 0; overflow: hidden; }

.sup-tk-hd[b-m1rjsbdtip] {
    padding: 1rem 1.3rem;
    border-bottom: 1.5px solid var(--ps-line);
    background: linear-gradient(90deg, var(--ps-accent-soft), var(--ps-cyan-soft));
}

.sup-tk-k[b-m1rjsbdtip] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ps-muted);
}

.sup-tk-wait[b-m1rjsbdtip] { margin-left: auto; font-weight: 800; }

.sup-tk-h1[b-m1rjsbdtip] {
    margin: 0.25rem 0 0.4rem;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.sup-no[b-m1rjsbdtip] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.sup-pills[b-m1rjsbdtip] { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.sup-pill[b-m1rjsbdtip] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 1.4rem;
    padding: 0 0.55rem;
    border-radius: 9999px;
    font-size: 0.66rem;
    font-weight: 800;
    white-space: nowrap;
}

.sup-pill i[b-m1rjsbdtip] { width: 0.45rem; height: 0.45rem; border-radius: 9999px; background: currentColor; display: inline-block; }
.p-type[b-m1rjsbdtip] { background: var(--ps-cyan-soft); color: var(--ps-cyan-text); }
.p-code[b-m1rjsbdtip] { background: var(--ps-pink-soft); color: var(--ps-pink-ink); font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.04em; }
.p-ctx[b-m1rjsbdtip] { background: var(--ps-well); border: 1.5px solid var(--ps-line); color: var(--ps-ink); font-family: ui-monospace, Menlo, monospace; }
.p-open[b-m1rjsbdtip] { background: var(--ps-peach-soft); color: var(--ps-on-peach); }
.p-ans[b-m1rjsbdtip] { background: var(--ps-accent-soft); color: var(--ps-accent-ink); }
.p-closed[b-m1rjsbdtip] { background: var(--ps-line); color: var(--ps-muted); }
.p-demo[b-m1rjsbdtip] { background: var(--ps-gold); color: var(--ps-gold-ink); text-transform: uppercase; letter-spacing: 0.05em; }

.sup-thread[b-m1rjsbdtip] {
    padding: 1.1rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    background: var(--ps-well);
}

.sup-ev[b-m1rjsbdtip] {
    align-self: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ps-muted);
    background: var(--ps-surface);
    border: 2px dashed var(--ps-dash, var(--ps-line));
    border-radius: 9999px;
    padding: 0.15rem 0.8rem;
    text-align: center;
}

.sup-msg[b-m1rjsbdtip] { max-width: 78%; display: flex; flex-direction: column; gap: 0.2rem; }
.sup-msg.team[b-m1rjsbdtip] { align-self: flex-end; align-items: flex-end; }

.sup-msg .from[b-m1rjsbdtip] {
    font-size: 0.66rem;
    font-weight: 800;
    color: var(--ps-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.sup-msg .from em[b-m1rjsbdtip] { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--ps-muted-soft); }

.sup-msg .bub[b-m1rjsbdtip] {
    padding: 0.6rem 0.9rem;
    border-radius: 1rem;
    border-top-left-radius: 0.35rem;
    font-size: 0.86rem;
    line-height: 1.5;
    background: var(--ps-surface);
    border: 2px solid var(--ps-line);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.sup-msg.team .bub[b-m1rjsbdtip] {
    background: var(--ps-btn);
    color: var(--ps-btn-ink);
    border-color: transparent;
    border-top-left-radius: 1rem;
    border-top-right-radius: 0.35rem;
}

/* La note interne : dorée comme tout ce qui n'est pas « pour de vrai » à l'écran. */
.sup-msg.note .bub[b-m1rjsbdtip] { background: var(--ps-gold); color: var(--ps-gold-ink); border-color: transparent; }

.sup-msg .when[b-m1rjsbdtip] { font-size: 0.66rem; color: var(--ps-muted-soft); }

.sup-compose[b-m1rjsbdtip] {
    padding: 1rem 1.3rem;
    border-top: 1.5px solid var(--ps-line);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.sup-mode[b-m1rjsbdtip] { display: flex; gap: 0.4rem; }

.sup-area[b-m1rjsbdtip] { min-height: 4.6rem; resize: vertical; }
.sup-area.note[b-m1rjsbdtip] { background: var(--ps-peach-soft); }

.sup-actions[b-m1rjsbdtip] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.sup-actions-end[b-m1rjsbdtip] { display: flex; align-items: center; gap: 0.5rem; }
.sup-hint[b-m1rjsbdtip] { font-size: 0.74rem; color: var(--ps-muted); }

.sup-mock[b-m1rjsbdtip] {
    display: inline-flex;
    align-items: center;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ps-gold-ink);
    background: var(--ps-gold);
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
}

/* ── Rail ── */
.sup-rail[b-m1rjsbdtip] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    align-self: start;
    margin-top: 0;
}

.sup-kv[b-m1rjsbdtip] { margin: 0; display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.82rem; }
.sup-kv b[b-m1rjsbdtip] { font-weight: 700; }
.sup-kv span[b-m1rjsbdtip] { color: var(--ps-muted); font-size: 0.76rem; }
.sup-kv a[b-m1rjsbdtip] { color: var(--ps-accent-ink); font-weight: 800; font-size: 0.78rem; text-decoration: none; }
.sup-kv a:hover[b-m1rjsbdtip] { text-decoration: underline; }

.sup-others[b-m1rjsbdtip] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.sup-others a[b-m1rjsbdtip] { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; text-decoration: none; color: inherit; font-size: 0.76rem; }
.sup-others a:hover .sup-osubj[b-m1rjsbdtip] { text-decoration: underline; }
.sup-osubj[b-m1rjsbdtip] { flex-basis: 100%; color: var(--ps-muted); }

.sup-back[b-m1rjsbdtip] { justify-content: center; }
/* _content/PawSeekrWebApp/Pages/Articles/ArticleDetail.razor.rz.scp.css */
/* Page article publique — en-tête « Affiche » (validé le 2026-08-11) : la photo
   d'en-tête en fond flouté pleine largeur, titre posé dessus ancré en bas à
   gauche, macaron-loupe à droite pour ouvrir la photo nette entière en lightbox.
   Colonne de lecture étroite, lettrine, lightbox. Tokens --ps-* partout. */

/* --- Bannière d'en-tête ---
   margin-top négatif : la scène remonte DERRIÈRE les coins arrondis blancs de la
   barre de navigation (radius 1rem) — plus d'échancrures crème sur le flou. */
.art-stage[b-5pwjmzvkjr] {
    position: relative;
    min-height: 19rem;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    margin-top: -1rem;
    padding: 5.4rem 1.4rem 2rem;
}

/* Sans photo : bandeau teinté aux couleurs de la marque */
.art-stage.no-photo[b-5pwjmzvkjr] {
    background: linear-gradient(180deg, var(--ps-band-top) 0%, var(--ps-bg) 100%);
    min-height: 0;
}

/* Avant le chargement du fond, la scène est sombre et neutre : le titre crème
   reste lisible dès le premier rendu. */
.art-stage:not(.no-photo)[b-5pwjmzvkjr] { background: #232D4E; }

.art-stage-bg[b-5pwjmzvkjr] {
    position: absolute;
    inset: -8%;
    background-size: cover;
    background-position: center;
    filter: blur(18px) brightness(0.62) saturate(1.15);
    transform: scale(1.15);
    opacity: 0;
    transition: opacity 0.45s ease;
}

.art-stage-bg.loaded[b-5pwjmzvkjr] { opacity: 1; }

/* Sonde de chargement : invisible, mais le navigateur télécharge bien son src
   et déclenche `load` — c'est elle qui révèle le calque flouté. */
.art-preload[b-5pwjmzvkjr] { display: none; }

/* Retour à la liste : posé sur le bord gauche de l'affiche (la mesure du site,
   --ps-page-w, depuis l'épreuve A du 2026-09-18 — l'affiche et le retour partagent
   le même axe que l'identité des pages listes), à la même hauteur que leur kicker —
   le bandeau remonte de 1 rem comme la scène, donc 3,2 rem ici correspondent aux
   3,2 rem de padding là-bas. Le plancher vaut 1,4 rem — la marge intérieure de la
   scène plus la marge de l'affiche — pour que l'alignement tienne aussi sous la
   mesure, pas seulement au large. */
.art-back[b-5pwjmzvkjr] {
    position: absolute;
    top: 3.2rem;
    left: max(2.4rem, calc((100% - var(--ps-page-w)) / 2 + 1rem));
    z-index: 2;
    background: color-mix(in srgb, var(--ps-surface) 85%, transparent);
    color: var(--ps-ink);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.35rem 0.8rem;
    border-radius: 9999px;
    text-decoration: none;
}

/* --- Composition « affiche » : texte en bas à gauche, macaron en bas à droite --- */
/* Étirée sur la MESURE DU SITE (--ps-page-w, 68 rem — épreuve A validée le
   2026-09-18) comme les bandeaux des listes : le titre respire à gauche, le portrait
   à droite. La colonne de lecture, elle, reste plus étroite (.art-wrap) : une ligne
   de texte a une largeur de confort, un titre non. */
.art-poster[b-5pwjmzvkjr] {
    position: relative;
    width: 100%;
    max-width: var(--ps-page-w);
    margin: 0 auto;
    padding: 0 1rem; /* la marge intérieure des bandeaux de listes : même axe pour le titre */
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.6rem;
}

.art-poster-text[b-5pwjmzvkjr] {
    min-width: 0;
    /* Un mot sans espace ne peut pas casser : il sortait de l'écran (2026-09-17). La
       coupure n'intervient QUE faute d'espace, un texte normal ne bouge pas. */
    overflow-wrap: anywhere;
}

/* Sur le flou assombri, le texte est clair — dans les DEUX thèmes (le fond est
   toujours une photo assombrie, indépendante du thème). */
.art-kick[b-5pwjmzvkjr] {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #9FE3EF;
    margin: 0;
}

.art-title[b-5pwjmzvkjr] {
    font-size: clamp(1.9rem, 4.4vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.12;
    color: #FFF4E2;
    margin: 0.45rem 0 0;
    text-wrap: balance;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.art-meta[b-5pwjmzvkjr] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #C7CEE4;
    margin: 0.9rem 0 0;
}

.art-meta .d[b-5pwjmzvkjr]::before { content: "·"; }

/* Sans photo (bandeau teinté clair) : le texte repasse sur les tokens du thème */
.art-stage.no-photo .art-kick[b-5pwjmzvkjr] { color: var(--ps-cyan-text); }
.art-stage.no-photo .art-title[b-5pwjmzvkjr] { color: var(--ps-ink); text-shadow: none; }
.art-stage.no-photo .art-meta[b-5pwjmzvkjr] { color: var(--ps-muted-soft); }

/* Macaron : la photo de l'AUTEUR depuis le 2026-08-21 (proposition « Signature »),
   plus grande qu'avant — la photo d'en-tête, elle, ouvre le corps de l'article. */
.art-sign[b-5pwjmzvkjr] {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.art-by[b-5pwjmzvkjr] {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #E4E9F7;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.art-stage.no-photo .art-by[b-5pwjmzvkjr] { color: var(--ps-muted); text-shadow: none; }

.art-medal[b-5pwjmzvkjr] {
    flex: none;
    width: 5.2rem;
    height: 5.2rem;
    border-radius: 9999px;
    border: 3px solid rgba(255, 255, 255, 0.85);
    background-size: cover;
    background-position: center;
    box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.6);
    cursor: zoom-in;
    position: relative;
    padding: 0;
    transition: transform 0.2s ease;
}

.art-medal:hover[b-5pwjmzvkjr] { transform: scale(1.06); }

/* Portrait d'auteur : plus grand que l'ancien macaron, et cliquable depuis le
   2026-08-21 — il ouvre la photo en grand, donc il garde le curseur loupe et le
   léger grossissement au survol qui annoncent une porte. */
.art-medal.author[b-5pwjmzvkjr] {
    width: 6.6rem;
    height: 6.6rem;
    font: inherit;
}

/* La pastille à initiale, elle, n'ouvre rien : pas de curseur qui promette. */
.art-medal.author.initial[b-5pwjmzvkjr] { cursor: default; }
.art-medal.author.initial:hover[b-5pwjmzvkjr] { transform: none; }

/* Repli sans photo : la pastille à initiale de la barre du compte. */
.art-medal.author.initial[b-5pwjmzvkjr] {
    background: var(--ps-accent);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 2.2rem;
    font-weight: 800;
}

.art-hero-shot[b-5pwjmzvkjr] { margin-top: 1.6rem; }

.art-hero-shot .shot[b-5pwjmzvkjr] {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: var(--ps-well);
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    cursor: zoom-in;
}

.art-hero-shot .shot img[b-5pwjmzvkjr] {
    display: block;
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.art-medal .loupe[b-5pwjmzvkjr],
.art-hero-shot .loupe[b-5pwjmzvkjr] {
    position: absolute;
    right: -0.3rem;
    bottom: -0.3rem;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 9999px;
    background: var(--ps-surface);
    color: var(--ps-accent-ink);
    display: grid;
    place-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

/* Sur la photo du corps, la loupe se pose DANS le coin, pas à cheval dessus. */
.art-hero-shot .loupe[b-5pwjmzvkjr] {
    right: 0.6rem;
    bottom: 0.6rem;
    width: 2rem;
    height: 2rem;
}

.art-medal .loupe svg[b-5pwjmzvkjr],
.art-hero-shot .loupe svg[b-5pwjmzvkjr] {
    width: 0.9rem;
    height: 0.9rem;
}

/* Colonne de lecture : 52 rem (épreuve A du 2026-09-18, était 43) — avec le corps à
   1,06 rem cela fait ≈ 84 caractères par ligne, la limite haute du confort de lecture.
   Élargir davantage allongerait les lignes au-delà de ce que l'œil suit sans effort. */
.art-wrap[b-5pwjmzvkjr] {
    max-width: 52rem;
    margin: 0 auto;
    padding: 0 1.4rem;
    /* Un mot sans espace ne peut pas casser : il sortait de l'écran (2026-09-17). La
       coupure n'intervient QUE faute d'espace, un texte normal ne bouge pas. */
    overflow-wrap: anywhere;
}

.art-lead[b-5pwjmzvkjr] {
    font-size: 1.14rem;
    line-height: 1.6;
    color: var(--ps-muted);
    margin: 1.8rem 0 0;
}

.art-figone figcaption[b-5pwjmzvkjr],
.art-duo figcaption[b-5pwjmzvkjr] {
    font-size: 0.78rem;
    color: var(--ps-muted-soft);
    margin-top: 0.55rem;
}

.art-hr[b-5pwjmzvkjr] {
    border: none;
    border-top: 1px solid var(--ps-line);
    margin: 2.4rem 0;
}

/* --- Corps --- */
.art-body[b-5pwjmzvkjr] { font-size: 1.06rem; line-height: 1.7; }

.art-body p[b-5pwjmzvkjr] { margin: 1.35rem 0; }

/* Titre de section (2026-08-24) : même axe et même encre que le corps, une taille
   au-dessus. Il respire PLUS au-dessus qu'en dessous — il appartient à ce qui
   suit, pas à ce qui précède. Le premier d'un article touche l'intertitre : la
   marge haute est retirée pour ne pas doubler l'espace laissé par le filet. */
.art-h2[b-5pwjmzvkjr] {
    font-size: 1.42rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ps-ink);
    margin: 2.4rem 0 0.9rem;
    text-wrap: balance;
}

.art-body:first-of-type .art-h2:first-child[b-5pwjmzvkjr] { margin-top: 0.6rem; }

/* La lettrine se pose désormais sur le BLOC (2026-08-24, texte enrichi) : le corps
   est du HTML rendu par le service, on ne peut plus poser une classe sur le premier
   paragraphe depuis Razor. Elle ne vise que le premier paragraphe — et jamais celui
   qui suit un titre de section, qui n'ouvre pas l'article. */
.art-dropcap > p:first-child[b-5pwjmzvkjr]::first-letter,
.art-dropcap > h2 + p[b-5pwjmzvkjr]::first-letter {
    float: left;
    font-size: 3.4rem;
    line-height: 0.9;
    font-weight: 800;
    color: var(--ps-cyan-text);
    padding: 0.3rem 0.6rem 0 0;
}

/* --- Images de blocs --- */
.art-figone[b-5pwjmzvkjr] { margin: 2.2rem 0 0; }

.art-figone img[b-5pwjmzvkjr] {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 18px 40px -26px var(--ps-shadow);
    cursor: zoom-in;
}

.art-duo[b-5pwjmzvkjr] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    margin: 2.2rem 0 0;
}

.art-duo figure[b-5pwjmzvkjr] { margin: 0; }

.art-duo img[b-5pwjmzvkjr] {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0.9rem;
    cursor: zoom-in;
}

@media (max-width: 32rem) {
    .art-duo[b-5pwjmzvkjr] { grid-template-columns: 1fr; }
}

/* Mosaïque +N (3 photos et plus) : 1 grande + 4 tuiles max, « +N » au-delà.
   .flip inverse le sens (grande à droite) — alterné d'un bloc images à l'autre. */
.art-mosaic[b-5pwjmzvkjr] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-auto-rows: 7.6rem;
    gap: 0.6rem;
    margin: 2.2rem 0 0;
}

.art-mosaic .art-tile[b-5pwjmzvkjr] {
    border: none;
    padding: 0;
    border-radius: 0.8rem;
    background-size: cover;
    background-position: center;
    cursor: zoom-in;
}

.art-mosaic .art-tile:first-child[b-5pwjmzvkjr] { grid-row: span 2; }

.art-mosaic.flip[b-5pwjmzvkjr] { grid-template-columns: 1fr 1fr 2fr; }

.art-mosaic.flip .art-tile:first-child[b-5pwjmzvkjr] {
    grid-column: 3;
    grid-row: 1 / span 2;
}

.art-mosaic .art-more[b-5pwjmzvkjr] {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.art-mosaic .art-more span[b-5pwjmzvkjr] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(20, 26, 48, 0.55);
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 800;
    border-radius: 0.8rem;
}

@media (max-width: 34rem) {
    .art-mosaic[b-5pwjmzvkjr] { grid-auto-rows: 5.4rem; }
}

/* --- Lightbox --- */
.art-lb[b-5pwjmzvkjr] {
    position: fixed;
    inset: 0;
    background: rgba(14, 18, 36, 0.88);
    display: grid;
    place-items: center;
    z-index: 100;
    cursor: zoom-out;
}

.art-lb-frame[b-5pwjmzvkjr] {
    margin: 0;
    max-width: 90vw;
    max-height: 85vh;
    cursor: default;
}

.art-lb-frame img[b-5pwjmzvkjr] {
    display: block;
    max-width: 90vw;
    max-height: 78vh;
    border-radius: 0.8rem;
    object-fit: contain;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
}

.art-lb-frame figcaption[b-5pwjmzvkjr] {
    color: #DEE4F5;
    font-size: 0.85rem;
    text-align: center;
    margin-top: 0.6rem;
}

.art-lb-close[b-5pwjmzvkjr] {
    position: fixed;
    top: 1.3rem;
    right: 1.5rem;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 9999px;
    font-size: 1.15rem;
    cursor: pointer;
}

.art-lb-close:hover[b-5pwjmzvkjr] { background: rgba(255, 255, 255, 0.25); }

.art-lb-nav[b-5pwjmzvkjr] {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 9999px;
    font-size: 1.1rem;
    cursor: pointer;
}

.art-lb-nav:hover[b-5pwjmzvkjr] { background: rgba(255, 255, 255, 0.25); }
.art-lb-nav.prev[b-5pwjmzvkjr] { left: 1.2rem; }
.art-lb-nav.next[b-5pwjmzvkjr] { right: 1.2rem; }

.art-lb-count[b-5pwjmzvkjr] {
    position: fixed;
    bottom: 1.4rem;
    left: 50%;
    transform: translateX(-50%);
    color: #DEE4F5;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

/* ═══ Carte de l'auteur (2026-08-24, épreuve « A — Portrait » validée) — le portrait
   CENTRÉ, le nom sous lui, puis la mention, la bio et le lien. Elle habite le scrim et
   la carte GLOBAUX (.ps-dialog-scrim / .ps-dialog, input.css) et n'ajoute que sa
   disposition ; elle garde la largeur par défaut de .ps-dialog (24 rem).

   Une colonne flex avec UN SEUL écart répété (0,55 rem) : c'est la règle du rythme
   vertical régulier — pas de marges au cas par cas entre les lignes empilées. ═══ */

.au-card[b-5pwjmzvkjr] {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

/* Le portrait EST un bouton : il ouvre la photo en grand, d'un cran plus loin que le
   macaron d'origine. Le liseré reprend le fond des surfaces imbriquées, pour détacher
   le rond de la carte sans lui poser une bordure de couleur. */
.au-photo[b-5pwjmzvkjr] {
    width: 7.5rem;
    height: 7.5rem;
    margin: 0 auto 0.25rem;
    padding: 0;
    border: 4px solid var(--ps-well);
    border-radius: 9999px;
    background-color: var(--ps-accent-soft);
    background-position: center;
    background-size: cover;
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.6);
    cursor: zoom-in;
    display: grid;
    place-items: center;
}

/* Sans photo, la pastille à initiale de la barre du compte — inerte : elle ne promet
   rien, il n'y a pas d'image à ouvrir. */
.au-photo.initial[b-5pwjmzvkjr] {
    cursor: default;
    color: var(--ps-accent-ink);
    font-weight: 800;
    font-size: 2.6rem;
}

.au-photo:focus-visible[b-5pwjmzvkjr] {
    outline: 2px solid var(--ps-accent);
    outline-offset: 3px;
}

.au-name[b-5pwjmzvkjr] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ps-ink);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* La mention passe SOUS le nom : on lit d'abord qui, ensuite quoi. */
.au-kicker[b-5pwjmzvkjr] {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ps-accent-ink);
}

/* Bornée à 19 rem : centré, un texte tient jusqu'à quatre lignes environ — ce que
   donnent les 280 caractères du champ. La limite de saisie EST la limite de mise en
   page ; les desserrer sans toucher à cette largeur casserait la lecture. */
.au-bio[b-5pwjmzvkjr] {
    margin: 0.15rem auto 0;
    max-width: 19rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--ps-muted);
    overflow-wrap: anywhere;
}

.au-chip[b-5pwjmzvkjr] {
    align-self: center;
    margin-top: 0.35rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.38rem 0.85rem;
    border-radius: 9999px;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.au-chip svg[b-5pwjmzvkjr] {
    width: 0.85rem;
    height: 0.85rem;
    flex: none;
}

.au-chip:hover[b-5pwjmzvkjr] {
    background: var(--ps-accent);
    color: var(--ps-surface);
}

.au-close[b-5pwjmzvkjr] {
    margin-top: 1rem;
    border: 0;
    border-radius: 9999px;
    padding: 0.55rem 1rem;
    background: transparent;
    color: var(--ps-muted);
    outline: 2px solid var(--ps-line);
    outline-offset: -2px;
    font-size: 0.8rem;
    font-weight: 750;
    font-family: inherit;
    cursor: pointer;
}

.au-close:hover[b-5pwjmzvkjr] {
    color: var(--ps-ink);
    outline-color: var(--ps-accent);
}
/* _content/PawSeekrWebApp/Pages/Articles/ArticleFavorites.razor.rz.scp.css */
/* Fond de page : le même que les autres pages listes (chaque page pose le sien —
   règle du layout neutre). L'ancien fichier portait un hex en dur (#FBF6EE),
   ce qui cassait le mode sombre : token, comme partout. */
.page-bg[b-8g4p9w82nf] {
    width: 100%;
    flex: 1;
    align-self: stretch;
    display: flex;
    justify-content: center;
    background: var(--ps-bg);
}

/* ── Bandeau : le gabarit des pages listes, dupliqué par page (motif maison) ── */
.list-band[b-8g4p9w82nf] {
    position: relative;
    overflow: hidden;
    margin-top: -1rem;
    padding: 3.2rem 0 1.6rem;
    background:
        radial-gradient(24rem 10rem at 97% -4.5rem, var(--ps-accent-soft), transparent 65%),
        linear-gradient(180deg, var(--ps-band-top) 0, var(--ps-bg) 7rem);
}

.band-inner[b-8g4p9w82nf] {
    max-width: var(--ps-page-w); /* mesure commune des pages utilisateur (2026-09-18) */
    margin: 0 auto;
    padding: 0 1rem;
}

.band-id[b-8g4p9w82nf] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}



/* Identité à gauche, sticker de retour à droite — la géométrie d'/articles. */
.band-head[b-8g4p9w82nf] {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Bouton « sticker » : l'ombre pleine décalée signature Récré — le même habit
   que « Favoris » sur /articles, pour que l'aller et le retour se répondent. */
.band-fav[b-8g4p9w82nf] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--ps-surface);
    color: var(--ps-ink);
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
}

.band-fav svg[b-8g4p9w82nf] {
    width: 15px;
    height: 15px;
    flex: none;
}

/* Le kicker prend l'or des favoris — la couleur que l'étoile portait déjà
   partout (chip spéciale de /partners, étoile des cartes). */
.fav-kick[b-8g4p9w82nf] {
    color: var(--ps-gold-ink);
    opacity: 0.72;
}

/* Le compte n'est pas un bouton : même habit que les chips, sans le geste. */
.fav-count[b-8g4p9w82nf] {
    cursor: default;
}

.fav-count:hover[b-8g4p9w82nf] {
    border-color: var(--ps-line);
    color: var(--ps-muted);
}

.fav-star[b-8g4p9w82nf] {
    color: var(--ps-gold);
}

/* En sombre, l'encre or (quasi-noir chaud) se noie dans le lagon : le kicker
   passe à l'or plein — même ajustement que .ps-badge-warn et le segmenté pêche. */
:root[data-theme="dark"] .fav-kick[b-8g4p9w82nf] {
    color: var(--ps-gold);
    opacity: 0.85;
}

/* ═══ Carte d'article en VIGNETTE LATÉRALE (2026-08-25, épreuve validée) ═══
   Un carré de 7 rem collé au bord gauche, texte à droite. Le carré vient du champ
   `cardImage` : il est CUIT carré à l'envoi, donc `object-fit: cover` n'a plus rien à
   recadrer — c'est tout l'objet du champ. La grille passe à deux colonnes : une carte
   en ligne dans une colonne de tiers serait illisible. */
/* La carte est une grille d'UN élément (2026-09-17) : le lien s'étire à sa hauteur.
   Sans ça, une voisine au titre long faisait grandir la ligne, la carte suivait, mais
   le lien et son carré restaient à 7 rem — bande blanche sous l'image, et le même
   article paraissait cadré autrement d'une liste à l'autre selon son voisin. */
.art-card[b-8g4p9w82nf] {
    display: grid;
}

.art-row[b-8g4p9w82nf] {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: stretch;
}

/* Le carré hérite de .ps-photo (fond + découpe) ; seul le rayon change : la signature
   « coin bas-droit très arrondi » des cartes animal, à l'échelle de 7 rem. */
.art-sq[b-8g4p9w82nf] {
    width: 7rem;
    min-height: 7rem;
    align-self: stretch;
    border-radius: 0 0 1.6rem 0;
    position: relative;
}

/* En couverture absolue : le carré peut dépasser 7 rem de haut sur une ligne à titre
   long, l'image le remplit toujours jusqu'au bas de la carte. */
.art-sq img[b-8g4p9w82nf] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Le visuel de repli n'est pas une photo : il ne se recadre pas, il se pose. */
.art-sq img.blank[b-8g4p9w82nf] {
    object-fit: contain;
    padding: 0.6rem;
}

.art-body[b-8g4p9w82nf] {
    padding: 0.8rem 1rem;
    min-width: 0;
    align-self: center;
    /* Un mot sans espace ne peut pas casser : il sortait de l'écran (2026-09-17). La
       coupure n'intervient QUE faute d'espace, un texte normal ne bouge pas. */
    overflow-wrap: anywhere;
}

.art-title[b-8g4p9w82nf] {
    margin: 0.15rem 0 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ps-ink);
}

.art-desc[b-8g4p9w82nf] {
    margin: 0.2rem 0 0;
    font-size: 0.84rem;
    color: var(--ps-muted);
}

/* L'étoile est posée SUR le carré (choix du 2026-08-25) : au coin de la carte elle
   flotterait au-dessus du texte, sans fond pour la porter. */
.art-star[b-8g4p9w82nf] {
    position: absolute;
    left: 0.45rem;
    top: 0.45rem;
    z-index: 1;
}

/* ═══ « LA UNE » (2026-09-17, épreuve validée) — la carte d'article devient un billet large :
   une par ligne, carré cadré de 12 rem pleine hauteur, corps réparti sur la hauteur, la
   rubrique en ouverture à la couleur de la première catégorie, le titre en grand, la
   signature et le temps de lecture en pied. Le halo et le pointillé des coupons, à la
   couleur de la rubrique (tint-… posée sur la carte). ═══ */
.art-card[b-8g4p9w82nf] { min-height: 12rem; }
.art-card[b-8g4p9w82nf] { --halo: var(--ps-accent-soft); --rub: var(--ps-accent-ink); }
.art-card.tint-pink[b-8g4p9w82nf]  { --halo: var(--ps-pink-soft);  --rub: var(--ps-pink-ink); }
.art-card.tint-peach[b-8g4p9w82nf] { --halo: var(--ps-peach-soft); --rub: var(--ps-on-peach); }
.art-card.tint-cyan[b-8g4p9w82nf]  { --halo: var(--ps-cyan-soft);  --rub: var(--ps-cyan-text); }

.art-row[b-8g4p9w82nf] { grid-template-columns: 12rem minmax(0, 1fr); }

.art-sq[b-8g4p9w82nf] {
    width: 12rem;
    min-height: 12rem;
    border-radius: 0 0 2.2rem 0;
}

.art-body[b-8g4p9w82nf] {
    padding: 1.05rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.45rem;
    align-self: stretch;
    position: relative;
    background-image:
        radial-gradient(26rem 12rem at 0% 0%, var(--halo), transparent 70%),
        radial-gradient(rgba(128, 120, 110, 0.16) 0.9px, transparent 1px);
    background-size: 100% 100%, 14px 14px;
}

.art-body[b-8g4p9w82nf]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--ps-surface));
    opacity: 0.9;
    pointer-events: none;
}

.art-body > *[b-8g4p9w82nf] { position: relative; }

/* La rubrique : UNE ligne, coupée aux points de suspension quand les catégories sont
   trop nombreuses — la page de l'article les montre toutes. */
.art-rub[b-8g4p9w82nf] {
    margin: 0;
    padding-right: 2.6rem;   /* l'étoile, en haut à droite */
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.art-rub-an[b-8g4p9w82nf] { color: var(--ps-muted); letter-spacing: 0.12em; margin-left: 0.6rem; }
.art-rub-an[b-8g4p9w82nf]::before { content: "—"; margin-right: 0.6rem; }

.art-title[b-8g4p9w82nf] {
    font-size: 1.42rem;
    line-height: 1.18;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.art-desc[b-8g4p9w82nf] { font-size: 0.88rem; line-height: 1.5; }

.art-meta[b-8g4p9w82nf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    min-width: 0;
}

.art-by[b-8g4p9w82nf] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ps-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.art-medal[b-8g4p9w82nf] {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: var(--halo);
    color: var(--rub);
    font-size: 0.7rem;
    font-weight: 900;
    flex: none;
}

.art-rd[b-8g4p9w82nf] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ps-muted);
    flex: none;
}

.art-rd svg[b-8g4p9w82nf] { width: 0.85rem; height: 0.85rem; color: var(--rub); }

/* L'étoile passe en haut à droite du corps, plus sur la photo. */
.art-star[b-8g4p9w82nf] { left: auto; right: 0.6rem; top: 0.6rem; }

@media (max-width: 640px) {
    .art-row[b-8g4p9w82nf] { grid-template-columns: 8rem minmax(0, 1fr); }
    .art-sq[b-8g4p9w82nf] { width: 8rem; min-height: 8rem; border-radius: 0 0 1.6rem 0; }
    .art-card[b-8g4p9w82nf] { min-height: 8rem; }
    .art-body[b-8g4p9w82nf] { padding: 0.8rem 1rem; gap: 0.35rem; }
    .art-title[b-8g4p9w82nf] { font-size: 1.08rem; }
    .art-desc[b-8g4p9w82nf] { display: none; }   /* trop étroit pour deux lignes lisibles : la rubrique, le titre et la signature suffisent */
}

/* ═══ BUREAU (≥ 901 px, 2026-09-18, épreuve B validée) : la grille éditoriale ═══
   Deux colonnes ; sur /articles le premier de la page 1 est la « Une » sur toute la
   largeur (image à gauche 46 %, titre 1,7 rem, repère cyan). Les autres : image 16:10 en
   tête avec les catégories en pastilles blanches et l'étoile au coin, corps blanc (sans
   halo), rubrique, titre 1,28 rem, ACCROCHE EN ENTIER (bornée à 160 par la lib), signature
   calée en pied — les cartes d'une rangée s'alignent. Sous 901 px : le billet large. */
.art-pills[b-8g4p9w82nf] { display: none; }

/* Grille éditoriale (≥ 641 px, 2026-09-18) : tablette deux colonnes, bureau trois. */
@media (min-width: 901px) {
    .art-grid[b-8g4p9w82nf] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 641px) and (max-width: 900px) {
    .art-grid[b-8g4p9w82nf] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 641px) {

    .art-card[b-8g4p9w82nf] { min-height: 0; }

    .art-row[b-8g4p9w82nf] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .art-sq[b-8g4p9w82nf] {
        width: 100%;
        aspect-ratio: 16 / 9;
        min-height: 0;
        border-radius: 0;
    }

    .art-sq img.blank[b-8g4p9w82nf] { padding: 1.5rem; }

    .art-pills[b-8g4p9w82nf] {
        display: flex;
        gap: 0.35rem;
        position: absolute;
        left: 0.85rem;
        bottom: 0.85rem;
        right: 0.85rem;
        z-index: 1;
        overflow: hidden;
        flex-wrap: wrap;
        max-height: 1.6rem;
    }

    .art-pill[b-8g4p9w82nf] {
        background: var(--ps-surface);
        color: var(--rub);
        border-radius: 9999px;
        padding: 0.2rem 0.65rem;
        font-size: 0.66rem;
        font-weight: 800;
        white-space: nowrap;
        box-shadow: 0 2px 0 rgba(43, 58, 103, 0.15);
    }

    .art-body[b-8g4p9w82nf] {
        padding: 0.95rem 1.15rem 1.05rem;
        gap: 0.35rem;
        justify-content: flex-start;
        background-image: none;
    }

    .art-body[b-8g4p9w82nf]::before { display: none; }

    .art-rub[b-8g4p9w82nf] { padding-right: 0; }

    .art-title[b-8g4p9w82nf] { font-size: 1.1rem; line-height: 1.25; }

    .art-desc[b-8g4p9w82nf] {
        display: block;
        -webkit-line-clamp: unset;
        font-size: 0.86rem;
        line-height: 1.5;
    }

    .art-meta[b-8g4p9w82nf] { margin-top: auto; padding-top: 0.9rem; }

    /* L'étoile revient sur l'image, au coin haut droit de la carte. */
    .art-star[b-8g4p9w82nf] { top: 0.75rem; right: 0.75rem; }

}
/* _content/PawSeekrWebApp/Pages/Articles/ArticleList.razor.rz.scp.css */
/* Liste des articles — bandeau color-block + barre d'outils + tiroir de filtres
   « Appliquer » (validés le 2026-08-11). Tokens --ps-* partout, les deux thèmes
   suivent. */

/* --- Bandeau : même langage que la page article (pêche → crème, halo teal),
   remonté derrière les coins arrondis de la navbar. --- */
.list-band[b-xy53du9qik] {
    position: relative;
    overflow: hidden;
    margin-top: -1rem;
    padding: 3.2rem 0 1.6rem;
    background:
        radial-gradient(24rem 10rem at 97% -4.5rem, var(--ps-accent-soft), transparent 65%),
        linear-gradient(180deg, var(--ps-band-top) 0, var(--ps-bg) 7rem);
}

.band-inner[b-xy53du9qik] {
    max-width: var(--ps-page-w); /* mesure commune des pages utilisateur (2026-09-18) */
    margin: 0 auto;
    padding: 0 1rem;
}

/* Identité de la page : une seule pile, un seul écart (2026-08-19). Les trois
   lignes portaient chacune un `mt-1` de 0,25 rem — trop serré, et un réglage à
   reprendre à chaque ligne ajoutée. 0,55 rem est l'écart déjà validé sur
   l'en-tête de /q/{code} : le site n'a ainsi qu'un seul rythme vertical. */
.band-id[b-xy53du9qik] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}




.band-head[b-xy53du9qik] {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Favoris promu en bouton « sticker » : l'ombre pleine décalée signature Récré */
.band-fav[b-xy53du9qik] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--ps-surface);
    color: var(--ps-ink);
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
}

.band-fav .star[b-xy53du9qik] { color: #F59E0B; }





/* --- Tiroir --- */
/* Au-dessus de TOUT, navbar (z-20) et dropdown utilisateur compris — mêmes
   niveaux que la lightbox de la page article (z-100). */
.flt-scrim[b-xy53du9qik] {
    position: fixed;
    inset: 0;
    background: rgba(26, 34, 64, 0.45);
    z-index: 100;
}

.flt-drawer[b-xy53du9qik] {
    position: fixed;
    top: 0;
    right: -23rem;
    bottom: 0;
    width: 22rem;
    max-width: 90vw;
    background: var(--ps-elev);
    z-index: 110;
    transition: right 0.25s ease;
    display: flex;
    flex-direction: column;
}

/* L'ombre n'existe QUE tiroir ouvert (2026-08-17) : fermé, le panneau n'est
   qu'à 1rem hors écran et son ombre portée débordait de quelques pixels dans
   le viewport — un « fondu sombre » fantôme sur tout le bord droit de la page,
   visible sur le bandeau clair. */
.flt-drawer.open[b-xy53du9qik] {
    right: 0;
    box-shadow: -20px 0 50px -20px rgba(0, 0, 0, 0.4);
}

.flt-head[b-xy53du9qik] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.4rem 0.8rem;
}

.flt-title[b-xy53du9qik] {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ps-ink);
}

.flt-scroll[b-xy53du9qik] {
    flex: 1;
    overflow-y: auto;
    padding: 0 1.4rem;
}

.flt-sec[b-xy53du9qik] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ps-muted-soft);
    margin: 1.2rem 0 0.5rem;
}

.flt-chips[b-xy53du9qik] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.flt-foot[b-xy53du9qik] {
    display: flex;
    gap: 0.6rem;
    padding: 1rem 1.4rem 1.3rem;
    border-top: 1px solid var(--ps-line);
    background: var(--ps-well);
}

.flt-reset[b-xy53du9qik] {
    flex: 1;
    border: 1.5px solid var(--ps-line-strong);
    background: var(--ps-surface);
    color: var(--ps-muted);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.55rem;
    border-radius: 0.8rem;
    cursor: pointer;
}

.flt-apply[b-xy53du9qik] {
    flex: 2;
    border: none;
    background: var(--ps-btn);
    color: var(--ps-btn-ink);
    font-family: inherit;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 0.55rem;
    border-radius: 0.8rem;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
}

/* ═══ Carte d'article en VIGNETTE LATÉRALE (2026-08-25, épreuve validée) ═══
   Un carré de 7 rem collé au bord gauche, texte à droite. Le carré vient du champ
   `cardImage` : il est CUIT carré à l'envoi, donc `object-fit: cover` n'a plus rien à
   recadrer — c'est tout l'objet du champ. La grille passe à deux colonnes : une carte
   en ligne dans une colonne de tiers serait illisible. */
/* La carte est une grille d'UN élément (2026-09-17) : le lien s'étire à sa hauteur.
   Sans ça, une voisine au titre long faisait grandir la ligne, la carte suivait, mais
   le lien et son carré restaient à 7 rem — bande blanche sous l'image, et le même
   article paraissait cadré autrement d'une liste à l'autre selon son voisin. */
.art-card[b-xy53du9qik] {
    display: grid;
}

.art-row[b-xy53du9qik] {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: stretch;
}

/* Le carré hérite de .ps-photo (fond + découpe) ; seul le rayon change : la signature
   « coin bas-droit très arrondi » des cartes animal, à l'échelle de 7 rem. */
.art-sq[b-xy53du9qik] {
    width: 7rem;
    min-height: 7rem;
    align-self: stretch;
    border-radius: 0 0 1.6rem 0;
    position: relative;
}

/* En couverture absolue : le carré peut dépasser 7 rem de haut sur une ligne à titre
   long, l'image le remplit toujours jusqu'au bas de la carte. */
.art-sq img[b-xy53du9qik] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Le visuel de repli n'est pas une photo : il ne se recadre pas, il se pose. */
.art-sq img.blank[b-xy53du9qik] {
    object-fit: contain;
    padding: 0.6rem;
}

.art-body[b-xy53du9qik] {
    padding: 0.8rem 1rem;
    min-width: 0;
    align-self: center;
    /* Un mot sans espace ne peut pas casser : il sortait de l'écran (2026-09-17). La
       coupure n'intervient QUE faute d'espace, un texte normal ne bouge pas. */
    overflow-wrap: anywhere;
}

.art-title[b-xy53du9qik] {
    margin: 0.15rem 0 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ps-ink);
}

.art-desc[b-xy53du9qik] {
    margin: 0.2rem 0 0;
    font-size: 0.84rem;
    color: var(--ps-muted);
}

/* L'étoile est posée SUR le carré (choix du 2026-08-25) : au coin de la carte elle
   flotterait au-dessus du texte, sans fond pour la porter. */
.art-star[b-xy53du9qik] {
    position: absolute;
    left: 0.45rem;
    top: 0.45rem;
    z-index: 1;
}

/* ═══ « LA UNE » (2026-09-17, épreuve validée) — la carte d'article devient un billet large :
   une par ligne, carré cadré de 12 rem pleine hauteur, corps réparti sur la hauteur, la
   rubrique en ouverture à la couleur de la première catégorie, le titre en grand, la
   signature et le temps de lecture en pied. Le halo et le pointillé des coupons, à la
   couleur de la rubrique (tint-… posée sur la carte). ═══ */
.art-card[b-xy53du9qik] { min-height: 12rem; }
.art-card[b-xy53du9qik] { --halo: var(--ps-accent-soft); --rub: var(--ps-accent-ink); }
.art-card.tint-pink[b-xy53du9qik]  { --halo: var(--ps-pink-soft);  --rub: var(--ps-pink-ink); }
.art-card.tint-peach[b-xy53du9qik] { --halo: var(--ps-peach-soft); --rub: var(--ps-on-peach); }
.art-card.tint-cyan[b-xy53du9qik]  { --halo: var(--ps-cyan-soft);  --rub: var(--ps-cyan-text); }

.art-row[b-xy53du9qik] { grid-template-columns: 12rem minmax(0, 1fr); }

.art-sq[b-xy53du9qik] {
    width: 12rem;
    min-height: 12rem;
    border-radius: 0 0 2.2rem 0;
}

.art-body[b-xy53du9qik] {
    padding: 1.05rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.45rem;
    align-self: stretch;
    position: relative;
    background-image:
        radial-gradient(26rem 12rem at 0% 0%, var(--halo), transparent 70%),
        radial-gradient(rgba(128, 120, 110, 0.16) 0.9px, transparent 1px);
    background-size: 100% 100%, 14px 14px;
}

.art-body[b-xy53du9qik]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--ps-surface));
    opacity: 0.9;
    pointer-events: none;
}

.art-body > *[b-xy53du9qik] { position: relative; }

/* La rubrique : UNE ligne, coupée aux points de suspension quand les catégories sont
   trop nombreuses — la page de l'article les montre toutes. */
.art-rub[b-xy53du9qik] {
    margin: 0;
    padding-right: 2.6rem;   /* l'étoile, en haut à droite */
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.art-rub-an[b-xy53du9qik] { color: var(--ps-muted); letter-spacing: 0.12em; margin-left: 0.6rem; }
.art-rub-an[b-xy53du9qik]::before { content: "—"; margin-right: 0.6rem; }

.art-title[b-xy53du9qik] {
    font-size: 1.42rem;
    line-height: 1.18;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.art-desc[b-xy53du9qik] { font-size: 0.88rem; line-height: 1.5; }

.art-meta[b-xy53du9qik] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    min-width: 0;
}

.art-by[b-xy53du9qik] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ps-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.art-medal[b-xy53du9qik] {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: var(--halo);
    color: var(--rub);
    font-size: 0.7rem;
    font-weight: 900;
    flex: none;
}

.art-rd[b-xy53du9qik] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ps-muted);
    flex: none;
}

.art-rd svg[b-xy53du9qik] { width: 0.85rem; height: 0.85rem; color: var(--rub); }

/* L'étoile passe en haut à droite du corps, plus sur la photo. */
.art-star[b-xy53du9qik] { left: auto; right: 0.6rem; top: 0.6rem; }

@media (max-width: 640px) {
    .art-row[b-xy53du9qik] { grid-template-columns: 8rem minmax(0, 1fr); }
    .art-sq[b-xy53du9qik] { width: 8rem; min-height: 8rem; border-radius: 0 0 1.6rem 0; }
    .art-card[b-xy53du9qik] { min-height: 8rem; }
    .art-body[b-xy53du9qik] { padding: 0.8rem 1rem; gap: 0.35rem; }
    .art-title[b-xy53du9qik] { font-size: 1.08rem; }
    .art-desc[b-xy53du9qik] { display: none; }   /* trop étroit pour deux lignes lisibles : la rubrique, le titre et la signature suffisent */
}

/* ═══ BUREAU (≥ 901 px, 2026-09-18, épreuve B validée) : la grille éditoriale ═══
   Deux colonnes ; sur /articles le premier de la page 1 est la « Une » sur toute la
   largeur (image à gauche 46 %, titre 1,7 rem, repère cyan). Les autres : image 16:10 en
   tête avec les catégories en pastilles blanches et l'étoile au coin, corps blanc (sans
   halo), rubrique, titre 1,28 rem, ACCROCHE EN ENTIER (bornée à 160 par la lib), signature
   calée en pied — les cartes d'une rangée s'alignent. Sous 901 px : le billet large. */
.art-pills[b-xy53du9qik] { display: none; }

/* Repère « À la une » d'une carte de liste (tablette, mobile) : visible seulement sur
   les cartes marquées, sous 901 px — sur bureau le carrousel les porte. */
.art-une-lbl[b-xy53du9qik] {
    display: none;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ps-cyan-text);
}

.art-une-lbl i[b-xy53du9qik] { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--ps-cyan); }

.art-is-une .art-une-lbl[b-xy53du9qik] { display: inline-flex; }

/* La pastille « Afficher la Une » n'existe qu'au-dessus de 640 px (dans la barre) ;
   sous 641 px elle est rendue à part. Le carrousel, lui, s'affiche partout. */
.art-une-show[b-xy53du9qik] { display: none; }

/* ═══ GRILLE ÉDITORIALE (≥ 641 px, 2026-09-18) : tablette DEUX colonnes, bureau TROIS
   (image 16:9, accroche entière — épreuve réglée par le fondateur). Sous 641 px : le
   billet, une par ligne. ═══ */
@media (min-width: 901px) {
    .art-grid[b-xy53du9qik] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 641px) and (max-width: 900px) {
    .art-grid[b-xy53du9qik] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 641px) {

    .art-card[b-xy53du9qik] { min-height: 0; }

    .art-row[b-xy53du9qik] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .art-sq[b-xy53du9qik] {
        width: 100%;
        aspect-ratio: 16 / 9;
        min-height: 0;
        border-radius: 0;
    }

    .art-sq img.blank[b-xy53du9qik] { padding: 1.5rem; }

    .art-pills[b-xy53du9qik] {
        display: flex;
        gap: 0.35rem;
        position: absolute;
        left: 0.85rem;
        bottom: 0.85rem;
        right: 0.85rem;
        z-index: 1;
        overflow: hidden;
        flex-wrap: wrap;
        max-height: 1.6rem;
    }

    .art-pill[b-xy53du9qik] {
        background: var(--ps-surface);
        color: var(--rub);
        border-radius: 9999px;
        padding: 0.2rem 0.65rem;
        font-size: 0.66rem;
        font-weight: 800;
        white-space: nowrap;
        box-shadow: 0 2px 0 rgba(43, 58, 103, 0.15);
    }

    .art-body[b-xy53du9qik] {
        padding: 0.95rem 1.15rem 1.05rem;
        gap: 0.35rem;
        justify-content: flex-start;
        background-image: none;
    }

    .art-body[b-xy53du9qik]::before { display: none; }

    .art-rub[b-xy53du9qik] { padding-right: 0; }

    .art-title[b-xy53du9qik] { font-size: 1.1rem; line-height: 1.25; }

    .art-desc[b-xy53du9qik] {
        display: block;
        -webkit-line-clamp: unset;
        font-size: 0.86rem;
        line-height: 1.5;
    }

    .art-meta[b-xy53du9qik] { margin-top: auto; padding-top: 0.9rem; }

    /* L'étoile revient sur l'image, au coin haut droit de la carte. */
    .art-star[b-xy53du9qik] { top: 0.75rem; right: 0.75rem; }
}

/* ═══ Le carrousel « À la une » (2026-09-18, épreuves validées) — SUR TOUS LES ÉCRANS.
   Bureau et tablette : la Une compacte (image à gauche 34 %), diapositives dans une même
   cellule de grille. Mobile : la même mécanique, mais en TICKET (la carte de la liste) dans
   une bande teintée fermée d'un pointillé — voir le bloc ≤ 640 px. ═══ */
.art-is-une[b-xy53du9qik] { display: none; }          /* portée par le carrousel, pas deux fois */
.art-une-show[b-xy53du9qik] { display: inline-flex; }
.art-une-show svg[b-xy53du9qik] { width: 15px; height: 15px; color: var(--ps-cyan-text); }

    /* ═══ Le carrousel « À la une » (2026-09-18, épreuve validée) ═══ */
.art-une[b-xy53du9qik] {
    grid-column: 1 / -1;
    position: relative;
}

/* La piste : toutes les diapositives dans la même cellule, seule la « on » se voit. */
.art-une-track[b-xy53du9qik] { display: grid; }

/* Toutes les diapositives occupent la même cellule ; seule la « on » se voit. */
.art-slide[b-xy53du9qik] {
    grid-area: 1 / 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
    min-height: 0;
}

.art-slide.on[b-xy53du9qik] { opacity: 1; pointer-events: auto; }

/* COMPACTE (2026-09-18, « un chouilla trop présente » avant) : image 34 % et 12,5 rem,
   titre 1,32 rem sur deux lignes, accroche sur deux, ~13 rem de haut en tout. */
@media (min-width: 641px) {
    .art-slide .art-row[b-xy53du9qik] {
        grid-template-columns: 34% minmax(0, 1fr);
        grid-template-rows: auto;
    }

    .art-slide .art-sq[b-xy53du9qik] {
        aspect-ratio: auto;
        align-self: stretch;
        min-height: 12.5rem;
    }

    .art-slide .art-body[b-xy53du9qik] {
        padding: 1rem 1.3rem 0.9rem;
        justify-content: center;
    }

    .art-slide .art-title[b-xy53du9qik] { font-size: 1.32rem; -webkit-line-clamp: 2; }
    .art-slide .art-desc[b-xy53du9qik] {
        font-size: 0.9rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .art-slide .art-meta[b-xy53du9qik] { margin-top: 0.6rem; }
    .art-slide .art-star[b-xy53du9qik] { width: 1.9rem; height: 1.9rem; }

    /* Sur une diapositive l'image est à gauche : l'étoile passe à son coin haut gauche. */
    .art-slide .art-star[b-xy53du9qik] { right: auto; left: 0.75rem; }

    .art-slide .art-une-lbl[b-xy53du9qik] { display: inline-flex; margin-bottom: 0.5rem; }
}

/* Compteur « n / N », points-jauges (l'actif s'allonge et se remplit en 5 s),
   flèches — en pied du corps, sous un filet. */
.art-une-nav[b-xy53du9qik] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--ps-line);
}

/* « Masquer la Une » : petit, gris, à côté du compteur. */
.art-une-nav .une-hide[b-xy53du9qik] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 1.7rem;
    padding: 0 0.6rem;
    border-radius: 9999px;
    border: 1.5px solid var(--ps-line);
    background: var(--ps-well);
    color: var(--ps-muted);
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 800;
    cursor: pointer;
}

.art-une-nav .une-hide svg[b-xy53du9qik] { width: 0.8rem; height: 0.8rem; }
.art-une-nav .une-hide:hover[b-xy53du9qik] { border-color: var(--ps-accent); color: var(--ps-accent-ink); }

.art-une-nav .cnt[b-xy53du9qik] {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--ps-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.art-une-nav .dots[b-xy53du9qik] { display: flex; gap: 0.4rem; align-items: center; }

.art-une-nav .dot[b-xy53du9qik] {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 9999px;
    background: var(--ps-line);
    border: 0;
    padding: 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: width 0.3s ease;
}

.art-une-nav .dot.on[b-xy53du9qik] { width: 2.2rem; background: var(--ps-accent-soft); }

.art-une-nav .dot.on[b-xy53du9qik]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ps-accent);
    transform-origin: left;
    animation: art-une-fill-b-xy53du9qik 5s linear forwards;
}

.art-une.paused .dot.on[b-xy53du9qik]::after { animation-play-state: paused; }

@keyframes art-une-fill-b-xy53du9qik { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.art-une-nav .arr[b-xy53du9qik] { margin-left: auto; display: flex; gap: 0.35rem; }

.art-une-nav .arr button[b-xy53du9qik] {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 9999px;
    border: 1.5px solid var(--ps-line);
    background: var(--ps-well);
    color: var(--ps-ink);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.art-une-nav .arr button:hover[b-xy53du9qik] { border-color: var(--ps-accent); color: var(--ps-accent-ink); }
.art-une-nav .arr svg[b-xy53du9qik] { width: 0.85rem; height: 0.85rem; }

/* ═══ MOBILE (≤ 640 px, épreuve A validée le 2026-09-18) : la Une en TICKET — la carte de
   la liste telle quelle — dans une bande cyan très légère qui s'étend jusqu'aux bords,
   s'estompe vers le bas et se ferme d'un pointillé ; « À la une » et le compteur en tête,
   points, Masquer et flèches en pied. Les articles à la une sortent de la liste, qui
   s'ouvre sur « Tous les articles ». ═══ */
@media (max-width: 640px) {
    .art-une[b-xy53du9qik] {
        margin: 0 -1rem;
        padding: 0.9rem 1rem 1rem;
        background: linear-gradient(180deg, var(--ps-cyan-soft), transparent 92%);
        border-bottom: 2px dashed var(--ps-line);
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }

    .art-une-head[b-xy53du9qik] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.6rem;
    }

    .art-une-head .art-une-lbl[b-xy53du9qik] { display: inline-flex; margin: 0; font-size: 0.68rem; }

    .art-une-head .cnt[b-xy53du9qik] {
        font-size: 0.68rem;
        font-weight: 800;
        color: var(--ps-muted);
        font-variant-numeric: tabular-nums;
    }

    /* La diapositive EST le billet de la liste : mêmes mesures, repère caché (la bande le dit). */
    .art-slide .art-une-lbl[b-xy53du9qik] { display: none; }
    .art-slide .art-une-nav[b-xy53du9qik] { display: none; }

    .art-une-foot[b-xy53du9qik] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .art-une-foot .dots[b-xy53du9qik] { display: flex; gap: 0.4rem; align-items: center; }

    .art-une-foot .dot[b-xy53du9qik] {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 9999px;
        background: var(--ps-line);
        border: 0;
        padding: 0;
        position: relative;
        overflow: hidden;
        transition: width 0.3s ease;
    }

    .art-une-foot .dot.on[b-xy53du9qik] { width: 1.8rem; background: var(--ps-accent-soft); }

    .art-une-foot .dot.on[b-xy53du9qik]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--ps-accent);
        transform-origin: left;
        animation: art-une-fill-b-xy53du9qik 5s linear forwards;
    }

    .art-une.paused .art-une-foot .dot.on[b-xy53du9qik]::after { animation-play-state: paused; }

    .art-une-foot .une-hide[b-xy53du9qik] {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        height: 1.6rem;
        padding: 0 0.55rem;
        border-radius: 9999px;
        border: 1.5px solid var(--ps-line);
        background: var(--ps-surface);
        color: var(--ps-muted);
        font-family: inherit;
        font-size: 0.64rem;
        font-weight: 800;
        cursor: pointer;
    }

    .art-une-foot .une-hide svg[b-xy53du9qik] { width: 0.75rem; height: 0.75rem; }

    .art-une-foot .arr[b-xy53du9qik] { display: flex; gap: 0.3rem; }

    .art-une-foot .arr button[b-xy53du9qik] {
        width: 1.8rem;
        height: 1.8rem;
        border-radius: 9999px;
        border: 1.5px solid var(--ps-line);
        background: var(--ps-surface);
        color: var(--ps-ink);
        display: grid;
        place-items: center;
        cursor: pointer;
    }

    .art-une-foot .arr svg[b-xy53du9qik] { width: 0.8rem; height: 0.8rem; }

    .art-rest[b-xy53du9qik] {
        margin: 0;
        font-size: 0.64rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--ps-muted-soft);
        padding-top: 0.2rem;
    }

    /* La pastille « Afficher la Une » vit dans la barre d'outils, à toute taille. */
    .art-une-show[b-xy53du9qik] { display: inline-flex; }
}

/* Au-dessus de 640 px, l'en-tête, le pied et le titre de section mobiles n'existent pas. */
@media (min-width: 641px) {
    .art-une-head[b-xy53du9qik], .art-une-foot[b-xy53du9qik], .art-rest[b-xy53du9qik] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .art-slide[b-xy53du9qik] { transition: none; }
    .art-une-foot .dot.on[b-xy53du9qik]::after { animation: none; transform: none; }
    .art-une-nav .dot.on[b-xy53du9qik]::after { animation: none; transform: none; }
}
/* _content/PawSeekrWebApp/Pages/Auth/Login.razor.rz.scp.css */
.page-bg[b-z35psbzfvd] {
    width: 100%;
    flex: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom right, #BEDFE4 10%, #FFC482 100%);
}

/* Écran « adresse non confirmée » — même vocabulaire que /email-confirmation,
   couleurs via les tokens remappés par la carte studio. */
.confirm-swap[b-z35psbzfvd] {
    text-align: center;
}

.mascot[b-z35psbzfvd] {
    width: 4.25rem;
    height: 4.25rem;
    margin: 0 auto;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
}

.mascot svg[b-z35psbzfvd] {
    width: 2.25rem;
    height: 2.25rem;
}

/* .ps-email-pill et .ps-checklist sont des composants globaux (input.css)
   depuis le 2026-08-10 — utilisés aussi par /forgot-password et
   /email-confirmation. */

/* Renvoi du code (2026-08-18) : une ligne, pas un second bouton — le gold reste
   la seule action primaire de la carte. Le lien grisé porte son décompte. */
.resend-form[b-z35psbzfvd] {
    margin: 0;
}

.resend-row[b-z35psbzfvd] {
    margin-top: 1.15rem;
    font-size: 0.875rem;
    color: var(--ps-muted);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
}

.resend-btn[b-z35psbzfvd] {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--ps-accent-ink);
    cursor: pointer;
}

.resend-btn:hover:not(:disabled)[b-z35psbzfvd] {
    text-decoration: underline;
}

.resend-btn:disabled[b-z35psbzfvd] {
    color: var(--ps-muted-soft);
    cursor: not-allowed;
    opacity: 0.75;
    /* Les chiffres du décompte ne doivent pas faire respirer la ligne */
    font-variant-numeric: tabular-nums;
}

/* Confirmation du renvoi : elle reste affichée, la page étant statique — c'est
   la trace que le mail est reparti. */
.resent-note[b-z35psbzfvd] {
    margin: 0.8rem 0 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ps-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.resent-note svg[b-z35psbzfvd] {
    width: 1rem;
    height: 1rem;
    flex: none;
}

/* Saisie du code MFA : chiffres larges et centrés, façon ticket */
.mfa-code-input[b-z35psbzfvd] {
    text-align: center;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 1.3rem;
    letter-spacing: 0.45em;
    font-weight: 800;
}
/* _content/PawSeekrWebApp/Pages/Auth/Profile.razor.rz.scp.css */
/* Page « Mon compte » — gabarit commun des listes (2026-08-19) : elle était la
   seule du site à s'en passer, une carte étroite où identité, langue, sécurité et
   suppression s'empilaient entre des filets. */

.list-band[b-yahird3at7] {
    position: relative;
    margin-top: -1rem;
    padding: 3.2rem 0 1.6rem;
    background:
        radial-gradient(24rem 10rem at 97% -4.5rem, var(--ps-accent-soft), transparent 65%),
        linear-gradient(180deg, var(--ps-band-top) 0, var(--ps-bg) 7rem);
}

.band-inner[b-yahird3at7] {
    max-width: 44rem;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Identité de la page : une seule pile, un seul écart — 0,55 rem, l'interligne
   commun à tout le site. Page de l'espace utilisateur (règle du 2026-08-20,
   épreuve validée) : identité CENTRÉE au-dessus des onglets, bandeau
   entièrement symétrique — les pages listes « normales » restent à gauche. */
.band-id[b-yahird3at7] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    align-items: center;
    text-align: center;
}







.pf-body[b-yahird3at7] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding-top: 1.5rem;
}





















/* Demande d'adresse en cours : une attente, pas une erreur — d'où la pêche. */
.pf-pending[b-yahird3at7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.7rem;
    margin-top: 0.9rem;
    padding: 0.65rem 0.8rem;
    border-radius: 0.85rem;
    background: var(--ps-peach-soft);
    color: var(--ps-on-peach);
    font-size: 0.78rem;
    line-height: 1.45;
}

.pf-pending .acts[b-yahird3at7] {
    display: flex;
    gap: 0.9rem;
    margin-left: auto;
}

.pf-pending button[b-yahird3at7] {
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--ps-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}




/* Le déroulé d'un changement d'adresse : informatif, donc turquoise et non pêche —
   la pêche annonce une conséquence, ici on explique une marche à suivre. */
.pf-c-steps[b-yahird3at7] {
    margin: 1rem 0 0;
    padding: 0.7rem 0.85rem;
    border-radius: 0.85rem;
    background: var(--ps-accent-soft);
    color: var(--ps-ink);
    font-size: 0.78rem;
    line-height: 1.5;
}

.pf-c-steps ol[b-yahird3at7] {
    margin: 0.35rem 0 0;
    padding-left: 1.15rem;
    list-style: decimal;
}

.pf-c-steps li + li[b-yahird3at7] {
    margin-top: 0.2rem;
}

/* Le style des onglets vit dans input.css (.ps-seg-tabs — langage global des
   pages à sections). Ici, seulement sa place dans CE bandeau : sous l'identité,
   sur l'AXE CENTRAL (V2 validée sur épreuve le 2026-08-20, avec /shop/orders). */
.pf-tabs[b-yahird3at7] {
    margin-top: 1.25rem;
    display: flex;
    width: fit-content;
    margin-inline: auto;
}
/* _content/PawSeekrWebApp/Pages/Auth/Register.razor.rz.scp.css */
.page-bg[b-is5r81zyju] {
    width: 100%;
    flex: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom right, #FFC482 10%, #BEDFE4 100%);
}
/* ── Le sas d'inscription (2026-08-27) ──────────────────────────────────────
   Même grammaire que l'écran MFA de /login : pastille ronde, titre centré, un
   seul champ. Les deux écrans sont le même moment du parcours — on prouve qu'on
   a le droit d'entrer — ils doivent se ressembler. */
/* Tout est centré, comme sur l'écran MFA (.confirm-swap de /login) : c'est le
   même moment du parcours — prouver qu'on a le droit d'entrer — et un libellé
   resté à gauche pendant que le champ est centré dépareillerait. */
.gate-swap[b-is5r81zyju] {
    text-align: center;
}

.gate-mascot[b-is5r81zyju] {
    width: 4.25rem;
    height: 4.25rem;
    margin: 0 auto;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
}

.gate-mascot svg[b-is5r81zyju] {
    width: 2.25rem;
    height: 2.25rem;
}

/* Le code se lit et se dicte : chasse fixe, interlettrage large, majuscules
   imposées à l'AFFICHAGE. La normalisation reste au serveur — text-transform ne
   change pas la valeur envoyée, il ne fait que montrer la forme attendue. */
.gate-code[b-is5r81zyju] {
    text-align: center;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 1.2rem;
    letter-spacing: 0.28em;
    font-weight: 800;
    text-transform: uppercase;
}

.gate-hint[b-is5r81zyju] {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--ps-muted);
    text-align: center;
}
/* _content/PawSeekrWebApp/Pages/DeleteUserConfirmation.razor.rz.scp.css */
/* Page de suppression de compte — direction « portrait rond » (2026-08-06).

   Tout est piloté par les tokens --ps-* : le panneau suit le thème clair ou
   sombre au lieu de lui résister. Aucune couleur en dur, conformément à la règle
   du design system (voir WebApp/CLAUDE.md).

   ⚠️ STABILITÉ DE LA CARTE — la carte ne doit ni sauter ni changer de hauteur
   quand on passe de la confirmation au succès ou à l'erreur. C'est obtenu par
   `min-height` + `.del-text { flex: 1 }` : la différence de longueur du texte est
   absorbée par ce bloc élastique, donc les boutons et la mention de bas de carte
   restent exactement à la même place. Ne pas remplacer par une hauteur `auto`. */

.del-stage[b-j8ujq9ah6k] {
    display: flex;
    justify-content: center;
    /* Le haut doit laisser passer le portrait qui déborde de la carte. */
    padding: clamp(4.5rem, 10vw, 7rem) 1rem clamp(2rem, 8vw, 5rem);
}

.del-card[b-j8ujq9ah6k] {
    position: relative;
    width: 100%;
    max-width: 30rem;
    /* Calée sur l'état le plus haut (l'erreur, deux paragraphes). En dessous de
       cette valeur la carte ne rétrécit pas ; au-dessus — écrans étroits où le
       texte se replie davantage — elle grandit normalement. */
    min-height: 23rem;
    padding: 0 clamp(1.25rem, 5vw, 1.75rem) clamp(1.5rem, 5vw, 2rem);
    display: flex;
    flex-direction: column;
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-radius: 1.75rem;
    /* « Sticker adouci » : on garde le décalage vers le bas-droite du design
       system, mais flouté. Le 8px 8px 0 d'origine, sans flou, faisait lire une
       carte de 480 px comme une touche en relief. L'étalement négatif reste
       faible (-8px) pour que l'ombre garde de la présence. */
    box-shadow: 6px 8px 20px -8px var(--ps-shadow);
    text-align: center;
}

/* ── Le médaillon ──────────────────────────────────────────────────────── */

.del-medal[b-j8ujq9ah6k] {
    flex: none;
    display: grid;
    place-items: center;
    width: 6.5rem;
    height: 6.5rem;
    margin: -3.25rem auto 1rem;
    border-radius: 50%;
    overflow: hidden;
    /* L'anneau reprend la couleur de la carte : le débord fonctionne dans les
       deux thèmes sans détourage ni image alternative. */
    border: 5px solid var(--ps-surface);
    box-shadow: 0 10px 24px -14px var(--ps-shadow);
    background: var(--ps-well);
}

.del-medal img[b-j8ujq9ah6k] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Recadrage sur la tête : la photo est en 4:3, un centrage strict couperait. */
    object-position: 50% 38%;
    display: block;
}

/* Succès : le chien reste, l'anneau passe au teal. L'épaisseur ne change pas,
   donc rien ne bouge. */
.del-medal.ok[b-j8ujq9ah6k] {
    border-color: var(--ps-accent);
}

/* Échec : seul état où la photo cède la place à un signal — un chien triste
   serait ambigu quand il faut comprendre que RIEN ne s'est passé. Le cadre garde
   ses 6,5 rem, seul son contenu change : la carte ne bouge pas pour autant.

   Le rouge du triangle est un corail, plus vif que le fond rosé mais volontairement
   moins saturé que --ps-danger (#dc2626), qui est un rouge d'alerte système : ici
   il s'agit d'un contretemps, pas d'un incident. Valeur locale à cette page — ne
   pas la reprendre ailleurs sans en faire un token. */
.del-medal.error[b-j8ujq9ah6k] {
    --del-warn: #E2564C;

    background: var(--ps-pink-soft);
    border-color: var(--del-warn);
    /* Le SVG est tracé en currentColor : le conteneur décide de la teinte. */
    color: var(--del-warn);
}

/* Sur fond marine, le corail clair manque de présence : on l'éclaircit. */
:global(:root[data-theme="dark"]) .del-medal.error[b-j8ujq9ah6k] {
    --del-warn: #FF8A7E;
}

/* ── Texte : le bloc élastique qui absorbe les différences ─────────────── */

.del-text[b-j8ujq9ah6k] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.7rem;
}

.del-title[b-j8ujq9ah6k] {
    margin: 0;
    font-size: clamp(1.375rem, 4vw, 1.625rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--ps-ink);
    text-wrap: balance;
}

.del-body[b-j8ujq9ah6k] {
    margin: 0 auto;
    max-width: 38ch;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--ps-muted);
}

.del-fine[b-j8ujq9ah6k] {
    flex: none;
    margin: 1.4rem auto 0;
    padding-top: 1.05rem;
    border-top: 1px dashed var(--ps-dash);
    max-width: 40ch;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--ps-muted-soft);
}

/* ── Actions ───────────────────────────────────────────────────────────── */

.del-actions[b-j8ujq9ah6k] {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    align-items: center;
    min-height: 3rem;
    margin-top: 1.6rem;
}

.del-btn[b-j8ujq9ah6k],
.del-link[b-j8ujq9ah6k] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 9999px;
    padding: 0.65rem 1.4rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    transition: transform .12s ease, filter .12s ease;
}

.del-btn[b-j8ujq9ah6k] {
    border: 0;
    background: var(--ps-btn);
    color: var(--ps-btn-ink);
}

.del-btn:hover[b-j8ujq9ah6k] { filter: brightness(1.08); }
.del-btn:active[b-j8ujq9ah6k] { transform: translateY(1px); }

.del-link[b-j8ujq9ah6k] {
    border: 1.5px solid var(--ps-line);
    background: transparent;
    color: var(--ps-muted);
    font-weight: 700;
}

.del-link:hover[b-j8ujq9ah6k] {
    border-color: var(--ps-accent);
    color: var(--ps-ink);
}

.del-btn:focus-visible[b-j8ujq9ah6k],
.del-link:focus-visible[b-j8ujq9ah6k] {
    outline: 2px solid var(--ps-accent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .del-btn[b-j8ujq9ah6k], .del-link[b-j8ujq9ah6k] { transition: none; }
}
/* _content/PawSeekrWebApp/Pages/EmailChangeConfirmation.razor.rz.scp.css */
/* Confirmation d'e-mail, variante studio. Tout est centré : la page ne porte
   qu'un seul geste. Les couleurs viennent des tokens remappés par .auth-card
   studio (encres du héros) — aucune valeur en dur ici. */

.confirm-body[b-8kgb73iu79] {
    text-align: center;
}

/* Pastille mascotte : l'enveloppe (ou la coche en succès) dans un rond doux */
.mascot[b-8kgb73iu79] {
    width: 4.75rem;
    height: 4.75rem;
    margin: 0 auto;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
}

.mascot svg[b-8kgb73iu79] {
    width: 2.5rem;
    height: 2.5rem;
}

/* L'adresse en évidence : .ps-email-pill, composant global (input.css). */

/* Hauteur réservée : le spinner remplace le bouton sans faire sauter la carte */
.action-slot[b-8kgb73iu79] {
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hint[b-8kgb73iu79] {
    font-size: 0.8rem;
    color: var(--ps-muted-soft);
}
/* _content/PawSeekrWebApp/Pages/EmailConfirmation.razor.rz.scp.css */
/* Confirmation d'e-mail, variante studio. Tout est centré : la page ne porte
   qu'un seul geste. Les couleurs viennent des tokens remappés par .auth-card
   studio (encres du héros) — aucune valeur en dur ici. */

.confirm-body[b-yk1k8ast4z] {
    text-align: center;
}

/* Pastille mascotte : l'enveloppe (ou la coche en succès) dans un rond doux */
.mascot[b-yk1k8ast4z] {
    width: 4.75rem;
    height: 4.75rem;
    margin: 0 auto;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
}

.mascot svg[b-yk1k8ast4z] {
    width: 2.5rem;
    height: 2.5rem;
}

/* L'adresse en évidence : .ps-email-pill, composant global (input.css). */

/* Hauteur réservée au bouton ; l'attente passe par le voile du layout (2026-10-12),
   plus jamais par un spinner à sa place. */
.action-slot[b-yk1k8ast4z] {
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hint[b-yk1k8ast4z] {
    font-size: 0.8rem;
    color: var(--ps-muted-soft);
}
/* _content/PawSeekrWebApp/Pages/ForgotPassword.razor.rz.scp.css */
/* État « demande envoyée » : tout centré, la checklist et la pastille e-mail
   viennent des composants globaux (input.css). L'ancien .wrapper/.page-bg
   datait du style d'avant la refonte studio. */

.sent-swap[b-exxmqvhmkd] {
    text-align: center;
}
/* _content/PawSeekrWebApp/Pages/Home.razor.rz.scp.css */
/* Accueil — héros « studio » (validé 2026-08-06, allégé 2026-08-07).

   #9DCED2 est LA couleur du fond de studio de la photo, mesurée uniforme sur les
   quatre bords : elle prolonge l'image, elle n'est pas un choix de thème. C'est la
   seule valeur en dur légitime de ce fichier ; tout le reste passe par les tokens
   ou par les variables locales --hero-* définies ci-dessous pour les deux thèmes. */

.home[b-diue06x5cy] {
    width: 100%;
}

/* ══ Héros ═══════════════════════════════════════════════════════════════ */

.home-hero[b-diue06x5cy] {
    position: relative;
    overflow: hidden;

    /* Remonte derrière la barre de navigation (~4.5rem) : ses coins arrondis
       laissent voir le turquoise du studio, jamais le fond crème. */
    margin-top: -4.5rem;
    padding-top: 4.5rem;
    min-height: 100svh;

    /* Chien décollé du bord en 11vw et non en rem : son décalage suit la largeur
       de la fenêtre, exactement comme la carte de texte positionnée en %. À
       1440 px, 11vw ≈ l'ancien réglage de 10rem ; en rétrécissant, le chien
       glisse proportionnellement vers le bord. Le fond uni absorbe tout. */
    background: #9DCED2 url("../images/dog_glasses_background.webp") 11vw center / auto 100% no-repeat;

    /* Encres posées sur le turquoise — valables dans LES DEUX thèmes,
       le héros étant invariant (voir la note ci-dessous). */
    --hero-ink: #123A46;
    --hero-mut: #2E5A63;
    --hero-glass: rgba(255, 255, 255, 0.55);
    --hero-glass-line: rgba(255, 255, 255, 0.72);
}

/* Fondu du bas (2026-08-07) : la photo s'arrête net au bord du héros — le
   corps du chien est tranché par le cadre. Ce voile fond les derniers ~18 %
   dans le turquoise du studio, la section suivante part de cette même couleur :
   la couture disparaît. */
.home-hero[b-diue06x5cy]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 20%;
    background: linear-gradient(180deg, rgba(157, 206, 210, 0), #9DCED2);
    pointer-events: none;
    z-index: 2;
}

/* PAS de voile sombre ici (décision du 2026-08-07) : le héros est volontairement
   INVARIANT au thème. La photo de studio est le monde de cette page — l'assombrir
   la transformait en vitre teintée. Les encres --hero-* ci-dessus valent donc pour
   les deux modes ; seul le reste de la page (sections, FAQ) suit le thème.
   Le token --ps-photo-scrim reste la règle pour les photos posées sur des pages
   ordinaires (.ps-photo-band) — ce héros est l'exception, pas le précédent. */

/* ── L'accroche : carte de verre ───────────────────────────────────────── */

.hero-card[b-diue06x5cy] {
    position: absolute;
    left: 51%;
    top: 57%;
    transform: translateY(-50%);
    width: min(27rem, 45%);
    z-index: 4;
    padding: 1.6rem 1.7rem 1.75rem;
    border-radius: 1.25rem;
    background: var(--hero-glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--hero-glass-line);
}

.hero-kicker[b-diue06x5cy] {
    margin: 0 0 0.5rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--hero-ink);
    opacity: 0.75;
}

.hero-title[b-diue06x5cy] {
    margin: 0 0 0.6rem;
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.028em;
    line-height: 1.06;
    color: var(--hero-ink);
    text-wrap: balance;
}

/* Deux étages : l'amorce (chemise, lunettes) en petit et atténué, le punch
   (« un profil ») en pleine taille. Sans cette hiérarchie, l'amorce — trop
   longue pour la carte — rewrappe et le titre redevient un bloc uniforme. */
.hero-title-setup[b-diue06x5cy] {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.55em;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--hero-mut);
}

.hero-title-punch[b-diue06x5cy] {
    display: block;
}

.hero-sub[b-diue06x5cy] {
    margin: 0 0 1.15rem;
    max-width: 40ch;
    font-size: 0.95rem;
    line-height: 1.62;
    color: var(--hero-mut);
}

.hero-cta[b-diue06x5cy] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}


/* ── Repli mobile / tablette : la carte seule porte le message ──────────
   Bascule à 980 px (décision du 2026-08-07) : en dessous, la composition
   côte à côte n'a plus la place de respirer. ── */

@media (max-width: 980px) {
    .home-hero[b-diue06x5cy] {
        /* Un seul écran : le chien est CENTRÉ et posé AU BAS du viewport —
           son bas coïncide avec le bas de l'écran qui porte la carte et la
           légende. La carte de verre et la légende passent devant lui, son
           corps reste visible à travers le verre.

           Taille en svh (length, pas % : la hauteur de l'élément peut varier,
           le viewport non). Le sujet occupe ~23 % de la largeur de l'image ;
           +21svh recale son centre sur celui de l'écran (largeur d'image =
           58svh × 4/3 ≈ 77svh, décalage = 0,27 × 77 ≈ 21). */
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        background-position: calc(50% + 32svh) bottom;
        background-size: auto 88svh;
        min-height: 100svh;
    }

    .hero-card[b-diue06x5cy] {
        /* relative (et non static) pour passer au-dessus du voile de fondu —
           mais les offsets du mode desktop doivent être annulés : en relative,
           left:51% redevient un décalage réel et poussait la carte à droite. */
        position: relative;
        left: 0;
        top: 0;
        z-index: 4;
        transform: none;
        /* 600 px tant que la place le permet ; dès que les bords approchent le
           cadre, le min() cède la place à « pleine largeur moins 1,5rem de
           chaque côté » — le redimensionnement est automatique. */
        width: min(600px, calc(100% - 3rem));
        margin: 0 auto 5.5rem;
        text-align: center;
    }

    .hero-sub[b-diue06x5cy] {
        margin-left: auto;
        margin-right: auto;
    }

    /* Boutons à leur taille naturelle, centrés, côte à côte à 600 px ; le
       flex-wrap hérité de la règle de base les passe l'un au-dessus de l'autre
       dès que la carte devient trop étroite pour les deux. Jamais étirés. */
    .hero-cta[b-diue06x5cy] {
        justify-content: center;
    }
}

/* ══ Sous le pli — « continuité studio » (2026-08-07) ═══════════════════
   Le dégradé part de #9DCED2 (la couleur du studio, constante — elle prolonge
   la photo, elle ne suit pas le thème) et fond vers le fond de page, clair ou
   sombre. C'est ce qui supprime la coupure au premier défilement. */

.home-glue[b-diue06x5cy] {
    /* Départ en courbe (paliers color-mix en oklab) et non en rampe linéaire :
       une rampe qui démarre net après l'aplat du héros crée une bande de Mach —
       la « barre sombre » perçue à la couture. Le -1px recouvre la ligne de
       jointure sous-pixel entre les deux sections. */
    background: linear-gradient(180deg,
        #9DCED2,
        color-mix(in oklab, #9DCED2 84%, var(--ps-bg)) 16%,
        color-mix(in oklab, #9DCED2 55%, var(--ps-bg)) 34%,
        color-mix(in oklab, #9DCED2 26%, var(--ps-bg)) 50%,
        var(--ps-bg) 68%);
    margin-top: -1px;
    padding: calc(2.5rem + 1px) 1.25rem 0.5rem;
}

.home-feats[b-diue06x5cy] {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 1fr;
    max-width: 60rem;
    margin: 0 auto;
}

@media (min-width: 760px) {
    .home-feats[b-diue06x5cy] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Cartes de verre : le vocabulaire du héros, poursuivi. Le fond translucide
   laisse passer le dégradé — c'est voulu, elles appartiennent aux deux mondes. */
.home-feat[b-diue06x5cy] {
    border-radius: 1.1rem;
    padding: 1.05rem 1.15rem;
    background: color-mix(in srgb, var(--ps-surface) 72%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--ps-line);
}

.home-feat h2[b-diue06x5cy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--ps-ink);
}

.feat-ic[b-diue06x5cy] {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 0.5rem;
    background: var(--ps-gold);
    color: var(--ps-gold-ink);
    font-size: 0.85rem;
}

.home-feat p[b-diue06x5cy] {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--ps-muted);
}

/* ── Comment ça marche : trois étapes sur un chemin pointillé ──────────── */

.home-how[b-diue06x5cy] {
    max-width: 52rem;
    margin: 0 auto;
    padding: 2.75rem 1.25rem 0;
    text-align: center;
}

.home-how-title[b-diue06x5cy] {
    margin: 0 0 1.6rem;
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--ps-ink);
}

.home-steps[b-diue06x5cy] {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
}

/* Le chemin : un pointillé qui relie les trois numéros — l'écho du signal. */
.home-steps[b-diue06x5cy]::before {
    content: "";
    position: absolute;
    top: 1.05rem;
    left: 14%;
    right: 14%;
    border-top: 2px dashed var(--ps-dash);
}

.home-steps li[b-diue06x5cy] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.4rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ps-muted);
    text-align: center;
}

.home-step-n[b-diue06x5cy] {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--ps-gold);
    color: var(--ps-gold-ink);
    font-size: 0.85rem;
    font-weight: 800;
    /* L'anneau de fond détache le numéro du pointillé qui passe derrière. */
    box-shadow: 0 0 0 5px var(--ps-bg);
}

@media (max-width: 640px) {
    .home-steps[b-diue06x5cy] {
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 26rem;
        margin: 0 auto;
    }

    .home-steps[b-diue06x5cy]::before {
        display: none;
    }

    .home-steps li[b-diue06x5cy] {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
    }

    .home-step-n[b-diue06x5cy] {
        width: 1.7rem;
        height: 1.7rem;
        font-size: 0.75rem;
        margin-top: 0.05rem;
        box-shadow: none;
    }
}

/* ── FAQ : filets, plus de cartes ──────────────────────────────────────── */

.home-faq[b-diue06x5cy] {
    max-width: 42rem;
    margin: 0 auto;
    padding: 2.75rem 1.25rem 3.5rem;
}

.home-faq-title[b-diue06x5cy] {
    margin: 0 0 0.9rem;
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--ps-ink);
    text-align: center;
}

.faq-item[b-diue06x5cy] {
    border-bottom: 1px solid var(--ps-line);
}

.faq-item summary[b-diue06x5cy] {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem 0.2rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ps-ink);
    cursor: pointer;
}

.faq-item summary[b-diue06x5cy]::-webkit-details-marker { display: none; }

.faq-item summary[b-diue06x5cy]::after {
    content: "+";
    flex: none;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ps-cyan-text);
}

.faq-item[open] summary[b-diue06x5cy]::after { content: "−"; }

.faq-item p[b-diue06x5cy] {
    margin: 0;
    padding: 0 0.2rem 0.95rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--ps-muted);
}

.faq-item summary:focus-visible[b-diue06x5cy] {
    outline: 2px solid var(--ps-accent);
    outline-offset: 2px;
    border-radius: 0.4rem;
}

.home-end[b-diue06x5cy] {
    display: flex;
    justify-content: center;
    margin-top: 2.25rem;
}
/* _content/PawSeekrWebApp/Pages/Partners/OfferList.razor.rz.scp.css */
/* Page partenaires en coupons (maquette validée le 2026-08-10).
   Tout aux tokens ; les perforations prennent la couleur du fond de page
   (--ps-bg) pour que l'illusion tienne dans les deux thèmes. */

/* La recherche est le composant global .ps-search (input.css) depuis le
   2026-08-10 — partagé par toutes les barres d'outils. */

/* ── Bandeau : mêmes .list-band/.band-* que ArticleList, PetList et LostPets ── */
.list-band[b-gusfnbiyxb] {
    position: relative;
    overflow: hidden;
    margin-top: -1rem;
    padding: 3.2rem 0 1.6rem;
    background:
        radial-gradient(24rem 10rem at 97% -4.5rem, var(--ps-accent-soft), transparent 65%),
        linear-gradient(180deg, var(--ps-band-top) 0, var(--ps-bg) 7rem);
}

.band-inner[b-gusfnbiyxb] {
    max-width: var(--ps-page-w); /* mesure commune des pages utilisateur (2026-09-18) */
    margin: 0 auto;
    padding: 0 1rem;
}

/* Identité de la page : une seule pile, un seul écart (2026-08-19). Les trois
   lignes portaient chacune un `mt-1` de 0,25 rem — trop serré, et un réglage à
   reprendre à chaque ligne ajoutée. 0,55 rem est l'écart déjà validé sur
   l'en-tête de /q/{code} : le site n'a ainsi qu'un seul rythme vertical. */
.band-id[b-gusfnbiyxb] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}








/* ── Tiroir de filtres — copie du tiroir des articles, mêmes niveaux z. ── */
.flt-scrim[b-gusfnbiyxb] {
    position: fixed;
    inset: 0;
    background: rgba(26, 34, 64, 0.45);
    z-index: 100;
}

.flt-drawer[b-gusfnbiyxb] {
    position: fixed;
    top: 0;
    right: -23rem;
    bottom: 0;
    width: 22rem;
    max-width: 90vw;
    background: var(--ps-elev);
    z-index: 110;
    transition: right 0.25s ease;
    display: flex;
    flex-direction: column;
}

/* L'ombre n'existe QUE tiroir ouvert (2026-08-17) : fermé, le panneau n'est
   qu'à 1rem hors écran et son ombre portée débordait de quelques pixels dans
   le viewport — un « fondu sombre » fantôme sur tout le bord droit de la page,
   visible sur le bandeau clair. */
.flt-drawer.open[b-gusfnbiyxb] {
    right: 0;
    box-shadow: -20px 0 50px -20px rgba(0, 0, 0, 0.4);
}

.flt-head[b-gusfnbiyxb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.4rem 0.8rem;
}

.flt-title[b-gusfnbiyxb] {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ps-ink);
}

.flt-scroll[b-gusfnbiyxb] {
    flex: 1;
    overflow-y: auto;
    padding: 0 1.4rem;
}

.flt-sec[b-gusfnbiyxb] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ps-muted-soft);
    margin: 1.2rem 0 0.5rem;
}

.flt-chips[b-gusfnbiyxb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.flt-foot[b-gusfnbiyxb] {
    display: flex;
    gap: 0.6rem;
    padding: 1rem 1.4rem 1.3rem;
    border-top: 1px solid var(--ps-line);
    background: var(--ps-well);
}

.flt-reset[b-gusfnbiyxb] {
    flex: 1;
    border: 1.5px solid var(--ps-line-strong);
    background: var(--ps-surface);
    color: var(--ps-muted);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.55rem;
    border-radius: 0.8rem;
    cursor: pointer;
}

.flt-apply[b-gusfnbiyxb] {
    flex: 2;
    border: none;
    background: var(--ps-btn);
    color: var(--ps-btn-ink);
    font-family: inherit;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 0.55rem;
    border-radius: 0.8rem;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
}

/* ── Coupon : billet à deux talons ────────────────────────────────────── */
/* Toute la carte ouvre le modal de détail depuis le 2026-08-14.

   ⚠️ HAUTEUR FIXE depuis le 2026-08-25, et ce n'est pas cosmétique : la colonne
   image tire sa LARGEUR de la hauteur de la carte (aspect-ratio: 1 sur un élément
   étiré). Si la hauteur dépendait encore du texte, chaque pixel gagné élargirait
   l'image, rétrécirait le texte, le ferait passer à la ligne — et la carte
   grandirait encore. Mesuré à la maquette : carré géant, texte en colonne d'une
   syllabe. Une hauteur fixe coupe la boucle, et rend au passage tous les carrés
   identiques d'une carte à l'autre.

   Flex et non grid : c'est la seule façon d'obtenir une colonne dont la largeur
   découle de la hauteur (`align-self: stretch` donne la hauteur, `aspect-ratio`
   en déduit la largeur). */
.coupon[b-gusfnbiyxb] {
    display: flex;
    height: 12.5rem;   /* 9,6 rem jusqu'au 2026-09-17 : en une colonne, le coupon respire */
    /* min-width: 0 (2026-09-18) : item de grille, sa largeur mini vaut sinon son contenu
       « min-content » (repères en nowrap + talon), et la carte débordait de l'écran sur
       mobile — mesuré à 468 px pour 358 disponibles. */
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.coupon .main[b-gusfnbiyxb] { flex: 1 1 auto; overflow-wrap: anywhere; /* mot sans espace (2026-09-17) */ }

/* Le corps, à hauteur fixe : il ne peut plus s'étirer, donc chaque texte dit sa
   place. Le titre est BORNÉ à deux lignes (la colonne de texte est plus étroite
   qu'avant, le carré ayant pris de la largeur) et les badges tombent au bas de la
   carte — à hauteur fixe, ils s'alignent d'une carte à l'autre au lieu de flotter
   derrière un texte plus ou moins long. */
.coupon .main[b-gusfnbiyxb] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Aucun bloc du corps ne se COMPRIME (2026-09-17, épreuve validée) : à hauteur fixe, une
   colonne souple écrasait chaque bloc quand le contenu dépassait — titre et accroche se
   chevauchaient, la date passait sous le badge. Chaque bloc a désormais sa place ferme :
   nom une ligne, titre deux au plus, accroche deux au plus, repères une ligne. Le budget
   tient dans 12,5 rem quel que soit le contenu. */
.coupon .pname[b-gusfnbiyxb],
.coupon .otitle[b-gusfnbiyxb],
.coupon .odesc[b-gusfnbiyxb],
.coupon .meta[b-gusfnbiyxb] { flex: none; }

.coupon .meta[b-gusfnbiyxb] {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}

/* La ligne des catégories (2026-09-17, épreuve validée) : les pastilles prennent la place
   qui reste, la validité à droite est toujours visible ; psPills.fit() cache ce qui ne
   tient pas en entier et montre « … ». */
.coupon .meta .cats[b-gusfnbiyxb] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    overflow: hidden;
    flex: 1 1 auto;
}

.coupon .meta .cats .badge-cat[b-gusfnbiyxb] { flex: none; }

.badge-more[b-gusfnbiyxb] {
    flex: none;
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 9999px;
    background: var(--ps-well);
    color: var(--ps-muted);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
}

.coupon .meta .until[b-gusfnbiyxb],
.coupon .meta .badge-exp[b-gusfnbiyxb] {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.coupon .otitle[b-gusfnbiyxb] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Les quatre blocs du corps se RÉPARTISSENT sur la hauteur (2026-09-17, épreuve validée) :
   nom, titre, accroche, repères, avec 0,45 rem au moins entre eux. Une accroche courte
   ne laisse plus la ligne des repères flotter seule en bas. */
.coupon .main[b-gusfnbiyxb] {
    justify-content: space-between;
    gap: 0.45rem;
}


.coupon:hover[b-gusfnbiyxb] { transform: translateY(-2px); }

/* Le carré de la vignette, pleine hauteur, en miroir du talon (épreuve « billet à
   deux talons » validée le 2026-08-25). Il touche le haut ET le bas de la carte :
   c'est ce qui rend les deux bords symétriques. */
.cimg[b-gusfnbiyxb] {
    position: relative;
    align-self: stretch;
    aspect-ratio: 1 / 1;
    flex: none;
    overflow: hidden;
    background: var(--ps-well);
    border-right: 2px dashed var(--ps-dash);
}

/* Les demi-lunes de la perforation, exactement celles du talon mais côté image. */
.cimg[b-gusfnbiyxb]::before,
.cimg[b-gusfnbiyxb]::after {
    content: "";
    position: absolute;
    right: -9px;
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    background: var(--ps-bg);
    z-index: 1;
}

.cimg[b-gusfnbiyxb]::before { top: -8px; }
.cimg[b-gusfnbiyxb]::after  { bottom: -8px; }

.cimg img[b-gusfnbiyxb] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .coupon[b-gusfnbiyxb], .coupon:hover[b-gusfnbiyxb] { transition: none; transform: none; }
}

.coupon .main[b-gusfnbiyxb] {
    padding: 1.05rem 1.5rem;
    min-width: 0;
}

.pname[b-gusfnbiyxb] {
    font-size: 0.72rem;
    /* UNE ligne, coupée aux points de suspension (2026-09-17, épreuve validée) : sur deux
       lignes, le nom volait la place du titre et de l'accroche dans la hauteur fixe de la
       carte. La fiche le montre en entier. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ps-accent-ink);
}

.otitle[b-gusfnbiyxb] {
    /* Un mot sans espace ne peut pas casser : il sortait de l'écran (2026-09-17). La
       coupure n'intervient QUE faute d'espace, un texte normal ne bouge pas. */
    overflow-wrap: anywhere;
    font-weight: 800;
    color: var(--ps-ink);
    font-size: 1.18rem;
    line-height: 1.3;
    margin: 0.15rem 0;
}

.odesc[b-gusfnbiyxb] {
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--ps-muted);
}

.meta[b-gusfnbiyxb] {
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

/* La validité en PASTILLE (2026-09-17, épreuve validée) : fond clair, icône calendrier à
   l'accent, gras à l'encre — le même poids que la catégorie à côté d'elle. */
.until[b-gusfnbiyxb] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.65rem;
    border-radius: 9999px;
    background: var(--ps-well);
    color: var(--ps-ink);
    font-size: 0.74rem;
    font-weight: 700;
}

.until svg[b-gusfnbiyxb] {
    width: 0.85rem;
    height: 0.85rem;
    flex: none;
    color: var(--ps-accent-ink);
}

.badge-exp[b-gusfnbiyxb] {
    display: inline-block;
    background: var(--ps-pink-soft);
    color: var(--ps-pink-ink);
    border-radius: 9999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.64rem;
    font-weight: 800;
}

.badge-cat[b-gusfnbiyxb] {
    display: inline-block;
    border-radius: 9999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.64rem;
    font-weight: 800;
}

.b-teal[b-gusfnbiyxb]  { background: var(--ps-accent-soft); color: var(--ps-accent-ink); }
.b-pink[b-gusfnbiyxb]  { background: var(--ps-pink-soft);   color: var(--ps-pink-ink); }
.b-peach[b-gusfnbiyxb] { background: var(--ps-peach-soft);  color: var(--ps-on-peach); }
.b-cyan[b-gusfnbiyxb]  { background: var(--ps-cyan-soft);   color: var(--ps-cyan-text); }

:root[data-theme="dark"] .b-peach[b-gusfnbiyxb] { color: var(--ps-peach); }

/* Talon : perforation pointillée + demi-lunes couleur du fond de page */
.stub[b-gusfnbiyxb] {
    /* Largeur fixe : la carte est en flex depuis le 2026-08-25, elle ne peut plus la
       tenir en colonne de grille. 8,4 rem jusqu'au 2026-09-17, 10,5 rem depuis le passage
       en une colonne : le code y est plus lisible. */
    flex: none;
    width: 10.5rem;
    border-left: 2px dashed var(--ps-dash);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.9rem 0.7rem;
    position: relative;
    text-align: center;
}

.stub[b-gusfnbiyxb]::before,
.stub[b-gusfnbiyxb]::after {
    content: "";
    position: absolute;
    left: -9px;
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    background: var(--ps-bg);
}

.stub[b-gusfnbiyxb]::before { top: -8px; }
.stub[b-gusfnbiyxb]::after  { bottom: -8px; }

.stub-teal[b-gusfnbiyxb]  { background: var(--ps-accent-soft); }
.stub-pink[b-gusfnbiyxb]  { background: var(--ps-pink-soft); }
.stub-peach[b-gusfnbiyxb] { background: var(--ps-peach-soft); }
.stub-cyan[b-gusfnbiyxb]  { background: var(--ps-cyan-soft); }
.stub-gold[b-gusfnbiyxb]  { background: var(--ps-gold); color: var(--ps-gold-ink); }

.catk[b-gusfnbiyxb] {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.k-teal[b-gusfnbiyxb]  { color: var(--ps-accent-ink); }
.k-pink[b-gusfnbiyxb]  { color: var(--ps-pink-ink); }
.k-peach[b-gusfnbiyxb] { color: var(--ps-on-peach); }
.k-cyan[b-gusfnbiyxb]  { color: var(--ps-cyan-text); }

:root[data-theme="dark"] .k-peach[b-gusfnbiyxb] { color: var(--ps-peach); }

.code[b-gusfnbiyxb] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 2px dashed var(--ps-accent);
    color: var(--ps-accent-ink);
    background: var(--ps-surface);
    border-radius: 0.7rem;
    padding: 0.24rem 0.6rem;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

/* ── Affordance de copie (2026-08-14) : trois états au lieu d'un seul.
   Repos : l'icône « copier » accompagne le code en permanence — le bouton
   annonce sa fonction avant tout survol, utile aussi au tactile.
   Survol : pointillé plein, levée sticker, infobulle explicite.
   Copié : confirmation sur le bouton (~2 s), en plus du toast. ── */
.code[b-gusfnbiyxb], .code-gold[b-gusfnbiyxb] { position: relative; }

.code .ic[b-gusfnbiyxb], .code-gold .ic[b-gusfnbiyxb] {
    width: 0.9em;
    height: 0.9em;
    flex: none;
}

.code .ic[b-gusfnbiyxb] { color: var(--ps-muted-soft); }

.code:hover[b-gusfnbiyxb] {
    border-style: solid;
    background: var(--ps-accent-soft);
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
    transform: translateY(-1px);
}

.code:hover .ic[b-gusfnbiyxb] { color: inherit; }

.code-gold:hover[b-gusfnbiyxb] {
    background: rgba(28, 26, 21, 0.2);
    transform: translateY(-1px);
}

/* ⚠️ Ancrée sur le bord GAUCHE de la pastille, pas centrée sur elle : la modale
   et les cartes découpent (`overflow: hidden`), et une infobulle centrée sur une
   pastille elle-même collée au bord gauche débordait du conteneur — donc coupée
   net. La pastille est toujours le premier élément d'une rangée alignée à
   gauche : vers la droite, la place ne manque jamais. */
.code[data-tip]:hover[b-gusfnbiyxb]::after,
.code-gold[data-tip]:hover[b-gusfnbiyxb]::after {
    content: attr(data-tip);
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.5rem);
    background: var(--ps-ink);
    color: var(--ps-bg);
    font-family: inherit;
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
    padding: 0.3rem 0.65rem;
    border-radius: 9999px;
    pointer-events: none;
    z-index: 30;
}

/* Dans le TALON du coupon, la pastille est dans la colonne de DROITE : la bulle
   doit repartir vers la gauche, sinon elle sort de la carte — qui découpe elle
   aussi. Règle générale : ancrer du côté où il reste de la place. */
.stub .code[data-tip]:hover[b-gusfnbiyxb]::after,
.stub .code-gold[data-tip]:hover[b-gusfnbiyxb]::after {
    left: auto;
    right: 0;
}

.code.copied[b-gusfnbiyxb] {
    border-style: solid;
    border-color: var(--ps-accent);
    background: var(--ps-accent);
    color: #ffffff;
    cursor: default;
}

.code-gold.copied[b-gusfnbiyxb] {
    background: var(--ps-accent);
    color: #ffffff;
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .code:hover[b-gusfnbiyxb], .code-gold:hover[b-gusfnbiyxb] { transform: none; }
}

.go[b-gusfnbiyxb] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--ps-btn);
    color: var(--ps-btn-ink);
    border-radius: 9999px;
    padding: 0.38rem 0.95rem;
    font-size: 0.74rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
    white-space: nowrap;
}

/* Talon gold : le chiffre porte le message ; le bouton reste MARINE dans les
   deux thèmes — pêche sur gold serait illisible en sombre. */
.pct[b-gusfnbiyxb] {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.code-gold[b-gusfnbiyxb] {
    border: none;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--ps-gold-ink);
    background: rgba(28, 26, 21, 0.12);
    border-radius: 0.5rem;
    padding: 0.14rem 0.5rem;
    cursor: pointer;
    white-space: nowrap;
}

.go.on-gold[b-gusfnbiyxb] {
    background: #2B3A67;
    color: #ffffff;
    box-shadow: 0 3px 0 rgba(20, 26, 48, 0.4);
}

/* Éléments mobiles, invisibles au bureau. */
.badge-more-m[b-gusfnbiyxb], .badge-sp[b-gusfnbiyxb], .stub-bg[b-gusfnbiyxb], .stub-veil[b-gusfnbiyxb], .go-ic[b-gusfnbiyxb], .stub-open[b-gusfnbiyxb] { display: none; }

/* ═══ Sous 640 px : le TICKET DE POCHE (épreuve B validée le 2026-09-18) ═══
   Le billet garde sa silhouette de bureau — corps à gauche, talon DEBOUT à droite avec sa
   perforation — mais ramené à l'essentiel : nom, titre (deux lignes), validité et première
   catégorie (+n), code (toujours, cassé sur deux lignes s'il le faut) et un bouton rond.
   Partent : la vignette, l'accroche, le poinçon, le libellé de catégorie du talon.
   Avant : talon couché en barre + image 7 rem + accroche = une carte d'article (constat
   du fondateur). La miniature de la carte revient FLOUTÉE derrière le talon, sous un voile
   de la teinte ; tout ce qui se pose dessus garde un fond opaque (règle du poinçon). */
@media (max-width: 640px) {
    .coupon[b-gusfnbiyxb] {
        height: auto;
        min-height: 7.6rem;   /* réglé sur épreuve le 2026-09-18 */
        flex-wrap: nowrap;
    }

    .coupon .cimg[b-gusfnbiyxb] { display: none; }
    .coupon .odesc[b-gusfnbiyxb] { display: none; }

    .coupon .main[b-gusfnbiyxb] {
        padding: 0.9rem 1rem;
        gap: 0.4rem;
    }

    .coupon .otitle[b-gusfnbiyxb] { font-size: 1.05rem; }

    /* Repères : validité, pastille « Offre spéciale », UNE catégorie, « … ». La ligne se
       REPLIE sur deux si tout ne tient pas (une spéciale avec catégorie à 390 px) : la carte
       grandit de 1,4 rem plutôt que de couper — décision du fondateur, 2026-09-18. */
    .coupon .meta[b-gusfnbiyxb] {
        gap: 0.35rem 0.45rem;
        flex-wrap: wrap;
        white-space: normal;
        overflow: visible;
    }
    .coupon .meta .badge-sp[b-gusfnbiyxb] {
        order: 2;
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        flex: none;
        border-radius: 9999px;
        padding: 0.15rem 0.6rem 0.15rem 0.45rem;
        font-size: 0.64rem;
        font-weight: 800;
        white-space: nowrap;
        background: var(--ps-gold);
        color: var(--ps-gold-ink);
    }
    .coupon .meta .badge-sp svg[b-gusfnbiyxb] { width: 0.75rem; height: 0.75rem; }
    /* La PREMIÈRE catégorie s'affiche TOUJOURS (constat du fondateur, 2026-09-18) : le
       mesureur psPills.fit() est débranché ici (--pills-fit: off, lu par site.js) — il
       posait `hidden`, que le reset Tailwind rend en display:none !important dans une
       couche de cascade, imbattable depuis une règle de page. Les autres pastilles et le
       « … » du bureau sont cachés par CSS, le « +n » maison prend le relais. */
    .coupon .meta .cats[b-gusfnbiyxb] { order: 3; flex: 0 1 auto; min-width: 3rem; gap: 0.35rem; --pills-fit: off; }
    .coupon .meta .cats .badge-cat:first-child[b-gusfnbiyxb] {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .coupon .meta .cats .badge-cat:not(:first-child)[b-gusfnbiyxb],
    .coupon .meta .badge-more[b-gusfnbiyxb] { display: none; }
    .coupon .meta .until[b-gusfnbiyxb],
    .coupon .meta .badge-exp[b-gusfnbiyxb] { order: 1; flex: none; }
    /* « … » APRÈS la seule catégorie (2026-09-18) ; il ne se coupe jamais, c'est la catégorie
       qui s'abrège. Le calendrier de la date part : sur la ligne de 12 rem du mobile, chaque
       rem compte (mesuré : « Alimentation » entier ou non). */
    .coupon .meta .until svg[b-gusfnbiyxb] { display: none; }
    .coupon .meta .badge-more-m[b-gusfnbiyxb] {
        display: inline-block;
        flex: none;
        padding: 0.15rem 0.5rem;
        border-radius: 9999px;
        background: var(--ps-well);
        color: var(--ps-muted);
        font-size: 0.64rem;
        font-weight: 800;
    }
    .until-l[b-gusfnbiyxb] { display: none; }

    /* Talon debout, réduit. */
    .coupon .stub[b-gusfnbiyxb] {
        width: 8.2rem;   /* réglé sur épreuve le 2026-09-18 (7,4 trop juste avec 20 caractères) */
        gap: 0.5rem;
        padding: 0.7rem 0.5rem;
        overflow: hidden;
    }

    .stub .stub-stamp[b-gusfnbiyxb], .stub .catk[b-gusfnbiyxb], .stub .pct-star[b-gusfnbiyxb] { display: none; }

    /* Pas d'infobulle « Cliquer pour copier » au tactile (2026-09-18) : elle s'affichait
       au tap, par-dessus le talon, sans aucune utilité — l'icône copier et la confirmation
       « Copié » suffisent. */
    .code[data-tip]:hover[b-gusfnbiyxb]::after,
    .code-gold[data-tip]:hover[b-gusfnbiyxb]::after { display: none; }

    .stub .stub-bg[b-gusfnbiyxb] {
        display: block;
        position: absolute;
        inset: -12%;
        background-size: cover;
        background-position: center;
        filter: blur(8px) saturate(1.1);   /* 8 px, réglé sur épreuve le 2026-09-18 */
        transform: scale(1.15);
        z-index: 0;
    }

    /* Voile à 33 % (réglé sur épreuve le 2026-09-18) : l'image se reconnaît, et tout ce
       qui se pose dessus garde un fond opaque. */
    .stub .stub-veil[b-gusfnbiyxb] { display: block; position: absolute; inset: 0; z-index: 1; }
    .stub-teal  .stub-veil[b-gusfnbiyxb] { background: color-mix(in srgb, var(--ps-accent-soft) 33%, transparent); }
    .stub-pink  .stub-veil[b-gusfnbiyxb] { background: color-mix(in srgb, var(--ps-pink-soft) 33%, transparent); }
    .stub-peach .stub-veil[b-gusfnbiyxb] { background: color-mix(in srgb, var(--ps-peach-soft) 33%, transparent); }
    .stub-cyan  .stub-veil[b-gusfnbiyxb] { background: color-mix(in srgb, var(--ps-cyan-soft) 33%, transparent); }
    .stub-gold  .stub-veil[b-gusfnbiyxb] { background: color-mix(in srgb, var(--ps-gold) 33%, transparent); }

    /* Les demi-lunes et le contenu passent devant le fond. */
    .stub[b-gusfnbiyxb]::before, .stub[b-gusfnbiyxb]::after { z-index: 3; }
    .stub > :not(.stub-bg):not(.stub-veil)[b-gusfnbiyxb] { position: relative; z-index: 2; }

    /* Ni code ni lien sur la carte mobile (2026-09-18, décision du fondateur) : la fiche
       les porte. Le talon = le chiffre s'il existe + le rond à chevron, centrés, 0,7 rem
       entre eux, mêmes mesures sur tous les talons. */
    /* ⚠️ .coupon devant : la règle de bureau « code en bloc » (.stub .code, plus bas dans
       la feuille) est de même spécificité et rendait display:block — plus bas gagne. */
    .coupon .stub .code[b-gusfnbiyxb], .coupon .stub .code-gold[b-gusfnbiyxb], .coupon .stub .go[b-gusfnbiyxb] { display: none; }

    .coupon .stub[b-gusfnbiyxb] { gap: 0.7rem; justify-content: center; }

    /* Chiffre : pastille blanc translucide (choix du fondateur) sur le fond flouté. */
    .stub .pct[b-gusfnbiyxb] {
        font-size: 1.15rem;
        line-height: 1;
        padding: 0.32rem 0.65rem;
        border-radius: 0.65rem;
        background: rgba(255, 255, 255, 0.55);
        color: var(--ps-ink);
    }
    .stub-gold .pct[b-gusfnbiyxb] { color: var(--ps-gold-ink); }

    .stub .stub-open[b-gusfnbiyxb] {
        display: grid;
        place-items: center;
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 9999px;
        background: var(--ps-btn);
        color: var(--ps-btn-ink);
        box-shadow: 0 3px 0 var(--ps-btn-shadow);
        flex: none;
    }
    .stub-gold .stub-open[b-gusfnbiyxb] { background: #2B3A67; color: #ffffff; box-shadow: 0 3px 0 rgba(20, 26, 48, 0.4); }
    .stub .stub-open svg[b-gusfnbiyxb] { width: 1rem; height: 1rem; }
}

/* ── Modal de détail « Affiche » (maquette V2 validée le 2026-08-14) ──
   Photo pleine largeur avec le titre posé dessus (texte clair fixe sur voile
   sombre, indépendant du thème — même règle que le poster des articles),
   macaron gold quand la remise est chiffrée, barre d'action fixe en pied.
   Sans image : bande teintée par la catégorie, texte aux tokens. */
.od-scrim[b-gusfnbiyxb] {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(26, 34, 64, 0.55);
    display: grid;
    place-items: center;
    padding: 1rem;
}

.od-modal[b-gusfnbiyxb] {
    position: relative;
    width: min(44rem, 100%);
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    background: var(--ps-surface);
    border-radius: 1.4rem;
    overflow: hidden;
    box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.5);
}

.od-x[b-gusfnbiyxb] {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    z-index: 5;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 9999px;
    border: none;
    background: var(--ps-surface);
    color: var(--ps-ink);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
    font-weight: 800;
}

/* Cadre unique (2026-08-21, épreuve validée) — hauteur FIXE, photo entière au
   centre, même marge de tous les côtés, flou de la même image derrière pour
   remplir. L'ancien bandeau rognait au cadrage (13 rem en `cover`) : sur un
   coupon, le pourcentage disparaissait. La modale garde ainsi la même allure
   d'une offre à l'autre, quel que soit le format du visuel. */
.od-hero[b-gusfnbiyxb] {
    position: relative;
    height: 20rem;
    flex: none;
    overflow: hidden;
    background: #232D4E;
}

.od-hero-bg[b-gusfnbiyxb] {
    position: absolute;
    inset: -8%;
    background-size: cover;
    background-position: center;
    filter: blur(18px) brightness(0.62) saturate(1.15);
    transform: scale(1.12);
}

/* ⚠️ `margin: auto` avec `inset: 0` et des plafonds CALCULÉS : c'est la seule
   recette qui centre vraiment. Un `max-height: 100%` ne contraint pas la hauteur
   ici, et une image absolue en `width/height: auto` garde sa taille naturelle —
   les deux la faisaient déborder du cadre, donc couper en bas. */
.od-hero img[b-gusfnbiyxb] {
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 1;
    display: block;
    width: auto;
    height: auto;
    max-width: calc(100% - 2.2rem);
    max-height: calc(100% - 2.2rem);
    border-radius: 0.5rem;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.55);
}

.od-plain[b-gusfnbiyxb] { height: 9rem; background: none; }

.od-plain-teal[b-gusfnbiyxb]  { background: var(--ps-accent-soft); }
.od-plain-pink[b-gusfnbiyxb]  { background: var(--ps-pink-soft); }
.od-plain-peach[b-gusfnbiyxb] { background: var(--ps-peach-soft); }
.od-plain-cyan[b-gusfnbiyxb]  { background: var(--ps-cyan-soft); }

/* Titre sous le cadre (2026-08-21) : plus rien ne se pose sur le visuel, et le
   texte retrouve le contraste franc du fond clair. La marge droite réserve la
   place du macaron, qui déborde du cadre. */
.od-head[b-gusfnbiyxb] {
    position: relative;   /* porte le macaron (2026-09-17) */
    padding: 1.2rem 6.4rem 0 1.4rem;
}

.od-pname[b-gusfnbiyxb] {
    overflow-wrap: anywhere;   /* nom sans espace (2026-09-17) */
    margin: 0;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ps-accent-ink);
}

.od-title[b-gusfnbiyxb] {
    /* Un mot sans espace ne peut pas casser : il sortait de l'écran (2026-09-17). La
       coupure n'intervient QUE faute d'espace, un texte normal ne bouge pas. */
    overflow-wrap: anywhere;
    margin: 0.2rem 0 0;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--ps-ink);
    letter-spacing: -0.01em;
}



.od-macaron[b-gusfnbiyxb] {
    position: absolute;
    right: 1.3rem;
    top: -2.3rem;      /* à cheval sur le bord du visuel, posé DEPUIS l'en-tête (2026-09-17) */
    z-index: 3;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 9999px;
    background: var(--ps-gold);
    color: var(--ps-gold-ink);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: 0 4px 0 rgba(20, 26, 48, 0.35);
    transform: rotate(6deg);
}

.od-body[b-gusfnbiyxb] {
    /* Un mot sans espace ne peut pas casser : il sortait de l'écran (2026-09-17). La
       coupure n'intervient QUE faute d'espace, un texte normal ne bouge pas. */
    overflow-wrap: anywhere;
    padding: 0.8rem 1.4rem 1rem;   /* les repères ont quitté le corps : il ferme seul */
    overflow-y: auto;
}

/* Texte enrichi depuis le 2026-08-24 : le <p> est devenu un bloc qui contient les
   paragraphes et les listes rendus par le service. Mêmes mesures qu'avant. */
.od-desc[b-gusfnbiyxb] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ps-muted);
    max-width: 38rem;
}

.od-desc p[b-gusfnbiyxb] { margin: 0.7rem 0; }
.od-desc p:first-child[b-gusfnbiyxb] { margin-top: 0; }
.od-desc p:last-child[b-gusfnbiyxb] { margin-bottom: 0; }
.od-desc strong[b-gusfnbiyxb] { font-weight: 800; color: var(--ps-ink); }
.od-desc em[b-gusfnbiyxb] { font-style: italic; }
.od-desc ul[b-gusfnbiyxb],
.od-desc ol[b-gusfnbiyxb] { margin: 0.7rem 0; padding-left: 1.3rem; }
.od-desc ul[b-gusfnbiyxb] { list-style: disc; }
.od-desc ol[b-gusfnbiyxb] { list-style: decimal; }
.od-desc li[b-gusfnbiyxb] { margin: 0.2rem 0; }

/* La bande des repères de la fiche (2026-09-17, épreuve B validée) : ne défile pas,
   catégories à gauche, validité à droite, juste au-dessus du pied. */
.od-strip[b-gusfnbiyxb] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.6rem 1.4rem;
    border-top: 1px solid var(--ps-line);
    background: var(--ps-surface);
}

.od-strip-cats[b-gusfnbiyxb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.od-strip .until[b-gusfnbiyxb],
.od-strip .badge-exp[b-gusfnbiyxb] { flex: none; }

.od-strip + .od-foot[b-gusfnbiyxb] { margin-top: 0; }

.od-foot[b-gusfnbiyxb] {
    margin-top: 1.2rem;
    padding: 0.95rem 1.4rem;
    flex: none;
    background: var(--ps-well);
    border-top: 1px solid var(--ps-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.od-foot-left[b-gusfnbiyxb] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.od-foot .code[b-gusfnbiyxb] { font-size: 0.85rem; white-space: normal; overflow-wrap: anywhere; }

/* Le code du talon (2026-09-17, épreuve validée) : borné à 20 mais en chasse fixe, il
   peut dépasser les 10,5 rem du talon — il passe alors sur deux lignes, le talon garde sa
   largeur et la carte sa hauteur. */
.stub .code[b-gusfnbiyxb],
.stub .code-gold[b-gusfnbiyxb] {
    font-size: 0.76rem;
    max-width: 100%;
    display: block;            /* plus une rangée flex : l'icône n'est plus un bloc à part */
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    line-height: 1.3;
    padding: 0.32rem 0.55rem;
}

/* L'icône « copier » suit les derniers caractères, en suffixe de la dernière ligne —
   comme un signe de ponctuation, plus jamais à côté d'un texte replié. */
.stub .code .ic[b-gusfnbiyxb],
.stub .code-gold .ic[b-gusfnbiyxb] {
    display: inline-block;
    vertical-align: -0.12em;
    margin-left: 0.3rem;
    width: 0.9rem;
    height: 0.9rem;
}

.od-hint[b-gusfnbiyxb] {
    font-size: 0.72rem;
    color: var(--ps-muted-soft);
}

/* ── Offres spéciales (2026-08-14) ──
   Le chip de filtre porte l'étoile gold — le même marqueur que le talon et le
   macaron, pour que le lien visuel se fasse sans mot d'explication. */
.chip-special .ic-star[b-gusfnbiyxb] {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--ps-gold);
    flex: none;
}

.chip-special.on[b-gusfnbiyxb] {
    background: var(--ps-gold);
    border-color: var(--ps-gold);
    color: var(--ps-gold-ink);
}

.chip-special.on .ic-star[b-gusfnbiyxb] { color: var(--ps-gold-ink); }

/* Offre spéciale sans remise chiffrée : l'étoile remplace le chiffre. */
.pct-star[b-gusfnbiyxb] {
    width: 1.6rem;
    height: 1.6rem;
    color: var(--ps-gold-ink);
}

.od-macaron-star[b-gusfnbiyxb] {
    width: 1.7rem;
    height: 1.7rem;
    color: var(--ps-gold-ink);
}

/* ═══ DÉCOR du coupon (2026-09-17, épreuves validées) — tout en CSS, sous le texte, sans
   réaction à la souris, bâti sur des gris translucides et les jetons : il suit le thème.
   Corps : un halo de la teinte d'accent près de l'image, sur un pointillé de papier qui
   s'efface vers la droite. Talon : le POINÇON de contrôle, un tampon rond en encre
   translucide penché derrière la remise et le code. Se retire d'une règle. ═══ */
.coupon .main[b-gusfnbiyxb] {
    position: relative;
    background-image:
        radial-gradient(28rem 12rem at 0% 0%, var(--halo), transparent 70%),
        radial-gradient(rgba(128, 120, 110, 0.16) 0.9px, transparent 1px);
    background-size: 100% 100%, 14px 14px;
}

.coupon .main[b-gusfnbiyxb]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, var(--ps-surface) 100%);
    opacity: 0.9;
    pointer-events: none;
}

.coupon .main > *[b-gusfnbiyxb] { position: relative; }

.stub[b-gusfnbiyxb] { position: relative; }
.stub > *[b-gusfnbiyxb] { position: relative; }

.stub .stub-stamp[b-gusfnbiyxb] {
    position: absolute;
    width: 9.6rem;
    height: 9.6rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-14deg);
    color: rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.stub .stub-stamp text[b-gusfnbiyxb] { font-family: inherit; }

/* Le code reste LISIBLE sur le poinçon (demande du fondateur) : son fond est opaque —
   le chip doré n'est plus une teinte translucide mais la même couleur, calculée pleine. */
.stub .code-gold[b-gusfnbiyxb] { background: color-mix(in srgb, var(--ps-gold) 86%, #1c1a15); }

/* Le libellé de catégorie du talon garde un fond, comme le chip du code : il ne croise
   plus les lettres du poinçon (demande du fondateur, 2026-09-17). */
.stub .catk[b-gusfnbiyxb] {
    background: var(--ps-surface);
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
}

/* Le halo prend la COULEUR DU TALON (2026-09-17, épreuve A validée) : la teinte du
   morceau de droite est posée sur la carte (tint-…) et le halo la lit ; l'or est adouci
   pour rester un halo et non un aplat. Défaut lagon, pour une carte sans teinte. */
.coupon[b-gusfnbiyxb] { --halo: var(--ps-accent-soft); }
.coupon.tint-teal[b-gusfnbiyxb]  { --halo: var(--ps-accent-soft); }
.coupon.tint-pink[b-gusfnbiyxb]  { --halo: var(--ps-pink-soft); }
.coupon.tint-peach[b-gusfnbiyxb] { --halo: var(--ps-peach-soft); }
.coupon.tint-cyan[b-gusfnbiyxb]  { --halo: var(--ps-cyan-soft); }
.coupon.tint-gold[b-gusfnbiyxb]  { --halo: color-mix(in srgb, var(--ps-gold) 55%, transparent); }
/* _content/PawSeekrWebApp/Pages/Pets/LostPetDetail.razor.rz.scp.css */
/* Fiche animal, vue connectée — D1 traitement A (validé le 2026-08-14) :
   bandeau maison + photo à gauche, faits à droite. */

/* ── Bandeau : mêmes .list-band/.band-* que les pages listes ── */
.list-band[b-qypdae3i41] {
    position: relative;
    overflow: hidden;
    margin-top: -1rem;
    /* padding-bottom généreux : ce bandeau ne porte que le fil d'Ariane, il doit
       quand même loger les pattes PLEINE TAILLE (5,5 rem) sans les couper. */
    padding: 3.2rem 0 3rem;
    background:
        radial-gradient(24rem 10rem at 97% -4.5rem, var(--ps-accent-soft), transparent 65%),
        linear-gradient(180deg, var(--ps-band-top) 0, var(--ps-bg) 7rem);
}

.band-inner[b-qypdae3i41] {
    max-width: var(--ps-page-w); /* mesure commune des pages utilisateur (2026-09-18) */
    margin: 0 auto;
    padding: 0 1rem;
}

/* Pattes IDENTIQUES aux pages listes — la cohérence prime. C'est le bandeau qui
   s'adapte : voir son padding-bottom ci-dessus. */


/* Dégagement bandeau → fiche */
.lpd-content[b-qypdae3i41] { margin-top: 1.4rem; }

.lpd-crumb[b-qypdae3i41] {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    position: relative;   /* au-dessus des pattes en filigrane */
}

.lpd-split[b-qypdae3i41] {
    display: grid;
    /* La colonne photos est légèrement plus large : c'est l'image qui permet de
       reconnaître l'animal, le reste ne fait que confirmer. */
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 1.2rem;
}

/* ---- Colonne photos ---- */
.lpd-big[b-qypdae3i41] {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 1.2rem;
    overflow: hidden;
    border: 2px solid var(--ps-line);
    background: var(--ps-well);
}

.lpd-big img[b-qypdae3i41] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lpd-paw[b-qypdae3i41] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 3rem;
}

.lpd-lost[b-qypdae3i41] {
    position: absolute;
    left: 0.7rem;
    top: 0.7rem;
    z-index: 2;
}

.lpd-thumbs[b-qypdae3i41] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
    overflow-x: auto;
    padding-bottom: 0.3rem;
}

.lpd-thumb[b-qypdae3i41] {
    flex: none;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 0.8rem;
    overflow: hidden;
    border: 2px solid var(--ps-line);
    background: var(--ps-well);
    padding: 0;
    cursor: pointer;
}

.lpd-thumb img[b-qypdae3i41] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lpd-thumb.on[b-qypdae3i41] {
    border-color: var(--ps-accent-ink);
}

/* ---- Colonne des faits ---- */
.lpd-card[b-qypdae3i41] {
    background: var(--ps-surface);
    border: 2px solid var(--ps-line);
    border-radius: 1.1rem;
    /* Rythme P2 (2026-08-14) : la carte identité n'a plus de titre, le padding
       vertical vient des lignes elles-mêmes. */
    padding: 0.55rem 1.15rem;
}

.lpd-card + .lpd-card[b-qypdae3i41] {
    margin-top: 0.8rem;
}

/* Le signalement est d'une autre nature que l'identité : il est daté, il périme,
   il est la raison d'être de la page. La teinte rose l'isole. */
.lpd-card.alert[b-qypdae3i41] {
    background: var(--ps-pink-soft);
    border-color: var(--ps-pink-soft);
}

.lpd-h[b-qypdae3i41] {
    margin: 0 0 0.5rem;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ps-muted);
}

.lpd-card.alert .lpd-h[b-qypdae3i41] {
    color: var(--ps-pink-ink);
}

.lpd-row[b-qypdae3i41] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 0;
}

.lpd-row + .lpd-row[b-qypdae3i41] {
    border-top: 1px solid var(--ps-line);
}

.lpd-card.alert .lpd-row + .lpd-row[b-qypdae3i41] {
    border-top-color: rgba(194, 69, 94, 0.2);
}

.lpd-ic[b-qypdae3i41] {
    width: 2rem;
    height: 2rem;
    border-radius: 0.62rem;
    flex: none;
    display: grid;
    place-items: center;
    font-size: 0.92rem;
    background: var(--ps-accent-soft);
}

.lpd-ic.rose[b-qypdae3i41] { background: var(--ps-surface); }
.lpd-ic.cyan[b-qypdae3i41] { background: var(--ps-cyan-soft); }

.lpd-l[b-qypdae3i41] {
    margin: 0;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ps-muted);
    line-height: 1.35;
    margin-bottom: 0.15rem;
}

.lpd-card.alert .lpd-l[b-qypdae3i41] {
    color: var(--ps-pink-ink);
}

.lpd-v[b-qypdae3i41] {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
    /* La description conserve ses retours à la ligne (saisie textarea, fiche
       démo) ; sans effet sur les autres rangées, qui n'en contiennent pas. */
    white-space: pre-line;
}

.lpd-text[b-qypdae3i41] {
    margin: 0;
    font-size: 0.87rem;
    line-height: 1.5;
}

.lpd-actions[b-qypdae3i41] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
}

@media (max-width: 48rem) {
    .lpd-split[b-qypdae3i41] {
        grid-template-columns: 1fr;
    }
}

/* Message du propriétaire, logé dans la carte de signalement. Fond blanc translucide
   plutôt qu'une nouvelle boîte : le texte se détache du rose sans devenir une rubrique
   séparée — il fait partie de l'événement. */
.lpd-msg[b-qypdae3i41] {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 0.85rem;
    padding: 0.7rem 0.85rem;
    margin-top: 0.55rem;
}

.lpd-msg-l[b-qypdae3i41] {
    display: block;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ps-pink-ink);
    margin-bottom: 0.25rem;
}

.lpd-msg p[b-qypdae3i41] {
    margin: 0;
    font-size: 0.87rem;
    line-height: 1.5;
    /* Le texte vient d'un humain : ses retours à la ligne comptent. */
    white-space: pre-wrap;
}


/* ── Gabarit D1 (2026-08-14) : colonne droite = nom, badge, message, action,
   identité — dans l'ordre de lecture d'un scan. ── */
.lpd-side[b-qypdae3i41] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-width: 0;
}

/* Les cartes empilées par flex-gap : l'ancien margin-top entre cartes ne doit
   pas s'y ajouter. */
.lpd-side .lpd-card + .lpd-card[b-qypdae3i41] { margin-top: 0; }

.lpd-kick[b-qypdae3i41] {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ps-cyan-text);
}

.lpd-name[b-qypdae3i41] {
    /* Écarts portés par le `gap` de .lpd-head. */
    margin: 0;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--ps-ink);
}

/* Seule ligne de l'en-tête à porter un remplissage intérieur : sans correction,
   son texte partirait 0,75 rem à droite de l'axe des autres lignes. La marge le
   ramène tout en laissant la pastille en retrait du bord — même réglage que
   .scan-lost, valeur en clair et non dérivée de --lpd-gutter (choisie à l'œil). */
.lpd-badge[b-qypdae3i41] {
    display: inline-block;
    background: var(--ps-pink-soft);
    color: var(--ps-pink-ink);
    border-radius: 9999px;
    padding: 0.22rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 800;
    margin-left: -0.3rem;
}

/* Date de déclaration (2026-08-18), même retrait que sur la page de scan.
   Écart porté par le `gap` de .lpd-head. */
.lpd-date[b-qypdae3i41] {
    margin: 0;
    font-size: 0.72rem;
    color: var(--ps-muted);
}

/* Message du propriétaire : carte à liseré pêche, comme sur la vue publique —
   le même objet doit se lire pareil des deux côtés. */
.lpd-msgcard[b-qypdae3i41] {
    background: var(--ps-surface);
    border: 2px solid var(--ps-line);
    border-left: 4px solid var(--ps-peach);
    border-radius: 1.1rem;
    padding: 0.9rem 1rem;
}

.lpd-msgcard p[b-qypdae3i41] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ps-ink);
}

.lpd-cta-row[b-qypdae3i41] { display: flex; }

.lpd-cta[b-qypdae3i41] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    border-radius: 9999px;
    padding: 0.7rem 1.6rem;
    background: var(--ps-btn);
    color: var(--ps-btn-ink);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
}

.lpd-cta:disabled[b-qypdae3i41] { opacity: 0.6; cursor: default; }

.lpd-cta .ic[b-qypdae3i41] { width: 1.1rem; height: 1.1rem; flex: none; }


/* Rythme P2 (2026-08-14) : l'en-tête (kicker, nom, badge) respire davantage
   avant la suite — 1,5 rem au total avec le gap de la colonne.

   Retrait et rythme alignés sur la page de scan (2026-08-18) : mêmes 0,55 rem
   dans les deux directions, écart UNIQUE entre chaque ligne. Écrit en `gap` de
   colonne flex et non en marges — la fusion des marges adjacentes rendait les
   écarts inégaux (0,40 · 0,65 · 0,40).

   Le retrait répond au même constat qu'ailleurs : les cartes du dessous
   commencent au bord de la colonne mais leur TEXTE est repoussé par leur
   remplissage intérieur ; sans retrait, l'en-tête était le seul élément posé à
   gauche de cet axe. */
.lpd-head[b-qypdae3i41] {
    --lpd-gutter: 0.55rem;
    margin-bottom: 0.4rem;
    padding-left: var(--lpd-gutter);
    display: flex;
    flex-direction: column;
    /* Sinon la pastille s'étirerait sur toute la largeur de la colonne. */
    align-items: flex-start;
    gap: var(--lpd-gutter);
}

/* Pastilles de traits (2026-08-14) */
.lpd-traits[b-qypdae3i41] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.15rem;
}

.lpd-trait[b-qypdae3i41] {
    display: inline-block;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
    border-radius: 9999px;
    padding: 0.16rem 0.6rem;
    font-size: 0.68rem;
    font-weight: 800;
}

/* ---- Photo en grand (2026-08-17, même langage que la lightbox de PetDetail) ---- */
.lpd-zoom[b-qypdae3i41] {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
}

.pet-lb[b-qypdae3i41] {
    position: fixed;
    inset: 0;
    background: rgba(14, 18, 36, 0.88);
    display: grid;
    place-items: center;
    z-index: 100;
    cursor: zoom-out;
}

.pet-lb-frame[b-qypdae3i41] {
    margin: 0;
    max-width: 90vw;
    max-height: 85vh;
    cursor: default;
}

.pet-lb-frame img[b-qypdae3i41] {
    display: block;
    max-width: 90vw;
    max-height: 82vh;
    border-radius: 0.8rem;
    object-fit: contain;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
}

.pet-lb-close[b-qypdae3i41],
.pet-lb-nav[b-qypdae3i41] {
    position: fixed;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-radius: 9999px;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.pet-lb-close[b-qypdae3i41] {
    top: 1.3rem;
    right: 1.5rem;
    width: 2.7rem;
    height: 2.7rem;
    font-size: 1.15rem;
}

.pet-lb-nav[b-qypdae3i41] {
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    font-size: 1.8rem;
    line-height: 1;
}

.pet-lb-nav.prev[b-qypdae3i41] { left: 1.2rem; }
.pet-lb-nav.next[b-qypdae3i41] { right: 1.2rem; }

.pet-lb-close:hover[b-qypdae3i41],
.pet-lb-nav:hover[b-qypdae3i41] {
    background: rgba(255, 255, 255, 0.24);
}

.pet-lb-count[b-qypdae3i41] {
    position: fixed;
    bottom: 1.4rem;
    left: 50%;
    transform: translateX(-50%);
    color: #DEE4F5;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Encart « ceci est votre animal » (2026-08-19) — posé à la place exacte du CTA de
   position, qui n'a pas de sens sur sa propre fiche. Teal doux : c'est une
   information, pas une alerte ; le rose est réservé à la perte. */
.lpd-mine[b-qypdae3i41] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.9rem;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
}

.lpd-mine svg[b-qypdae3i41] {
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
    margin-top: 0.1rem;
}

.lpd-mine b[b-qypdae3i41] {
    display: block;
    font-size: 0.86rem;
    color: var(--ps-ink);
}

.lpd-mine span[b-qypdae3i41] {
    font-size: 0.78rem;
}

.lpd-mine a[b-qypdae3i41] {
    display: inline-block;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--ps-cyan-text);
    text-decoration: none;
}

.lpd-mine a:hover[b-qypdae3i41] {
    text-decoration: underline;
}
/* _content/PawSeekrWebApp/Pages/Pets/LostPets.razor.rz.scp.css */
/* Page « animaux perdus » — refonte du 2026-08-13.

   L'interrupteur « utiliser ma position » a disparu avec ses styles : la position du
   navigateur n'est plus une condition d'accès mais l'une des trois façons de désigner
   un lieu, à côté de la saisie et de la carte. Un interrupteur laissait entendre que
   la page ne servait à rien sans lui. */

/* ---- Bandeau : mêmes .list-band/.band-* que PetList et ArticleList ---- */
.list-band[b-jp7n2vj0np] {
    position: relative;
    /* PAS d'overflow hidden (2026-08-19) : la recherche de lieu vit maintenant dans
       le bandeau, et sa liste de suggestions le déborde — masquer le débordement la
       tranchait net. Sans danger : le fondu du bandeau se termine exactement sur
       --ps-bg, donc rien ne se voit dépasser (même raison que pour les pattes). */
    margin-top: -1rem;
    padding: 3.2rem 0 1.6rem;
    background:
        radial-gradient(24rem 10rem at 97% -4.5rem, var(--ps-accent-soft), transparent 65%),
        linear-gradient(180deg, var(--ps-band-top) 0, var(--ps-bg) 7rem);
}

.band-inner[b-jp7n2vj0np] {
    max-width: var(--ps-page-w); /* mesure commune des pages utilisateur (2026-09-18) */
    margin: 0 auto;
    padding: 0 1rem;
}

/* Identité de la page : une seule pile, un seul écart (2026-08-19). Les trois
   lignes portaient chacune un `mt-1` de 0,25 rem — trop serré, et un réglage à
   reprendre à chaque ligne ajoutée. 0,55 rem est l'écart déjà validé sur
   l'en-tête de /q/{code} : le site n'a ainsi qu'un seul rythme vertical. */
.band-id[b-jp7n2vj0np] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}




/* ---- Barre de recherche ---- */
.lp-search[b-jp7n2vj0np] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    background: var(--ps-surface);
    border: 2px solid var(--ps-line);
    border-radius: 1rem;
    padding: 0.75rem 0.85rem;
    margin-top: 1.25rem;
    /* Le panneau de suggestions déborde de la barre : il ne doit pas être rogné,
       et il doit passer AU-DESSUS du fil d'alerte qui le suit — dont les flèches
       du carrousel montent à 2, d'où le 3.

       ⚠️ PAS PLUS : à 20, la barre ÉGALAIT la navbar (z-20) et, venant après elle
       dans le DOM, passait au-dessus de tout ce que la navbar contient — feuille
       de navigation mobile ET modale d'explication admin comprises, leurs z-25/121
       ne comptant qu'À L'INTÉRIEUR du contexte d'empilement de la navbar. Règle
       maison : un élément de page reste SOUS 20 ; seuls les overlays pleine page
       (scrims, tiroirs, lightbox) ont droit à z ≥ 100, posés hors navbar. */
    position: relative;
    z-index: 3;
}

/* -- Recherche par code grave (2026-08-19) --------------------------------
   Bloc distinct de la barre de lieu, avec le lisere cyan des ecrans publics : il
   se demarque sans lui voler la vedette, la recherche geographique restant
   l'outil principal de la page. */
.lp-code[b-jp7n2vj0np] {
    margin-top: 0.9rem;
    background: var(--ps-surface);
    border: 2px solid var(--ps-line);
    border-left: 4px solid var(--ps-cyan);
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    /* Texte calé à gauche, formulaire calé à droite, l'écart absorbe la
       différence (2026-08-19) : sans space-between, la colonne de droite
       flottait au milieu et se déplaçait à chaque frappe. */
    justify-content: space-between;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.lp-code-l[b-jp7n2vj0np] {
    flex: 1 1 13rem;
    min-width: 0;
}

.lp-code-t[b-jp7n2vj0np] {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--ps-ink);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.lp-code-t svg[b-jp7n2vj0np] {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: var(--ps-cyan-text);
}

.lp-code-s[b-jp7n2vj0np] {
    margin: 0.15rem 0 0;
    font-size: 0.76rem;
    color: var(--ps-muted);
}

/* flex: none — la colonne ne s'étire ni ne se rétracte : sa largeur est celle
   du champ et du bouton, deux objets de taille fixe. */
.lp-code-r[b-jp7n2vj0np] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: none;
}

/* Chasse fixe et lettres espacees : huit caracteres recopies d'un objet grave se
   recomptent a l'oeil sur l'ecran. */
/* Hauteur et rayon du langage de barre (2,4 rem / pastille) depuis le 2026-08-19 ;
   le monospace espacé reste — c'est lui qui dit « code gravé ». */
.code-input[b-jp7n2vj0np] {
    width: 10.5rem;
    height: 2.4rem;
    background: var(--ps-well);
    color: var(--ps-ink);
    border: 2px solid var(--ps-line);
    border-radius: 9999px;
    padding: 0 0.7rem;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-align: center;
    text-transform: uppercase;
    outline: none;
}

.code-input[b-jp7n2vj0np]::placeholder {
    color: var(--ps-muted-soft);
    font-weight: 700;
}

.code-input:focus[b-jp7n2vj0np] {
    border-color: var(--ps-accent);
}

.code-input.err[b-jp7n2vj0np] {
    border-color: var(--ps-danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ps-danger) 18%, transparent);
}

.code-go[b-jp7n2vj0np] {
    border: none;
    border-radius: 9999px;
    height: 2.4rem;
    padding: 0 1.1rem;
    background: var(--ps-cyan);
    color: var(--ps-cyan-ink);
    font-family: inherit;
    font-weight: 800;
    font-size: 0.78rem;
    cursor: pointer;
    box-shadow: 0 3px 0 rgba(8, 52, 59, 0.25);
}

/* Les pattes de la résolution en cours (2026-10-12), à la couleur du bouton. */
.code-go[b-jp7n2vj0np]  .paws { margin-right: 0.3rem; }

.code-go:disabled[b-jp7n2vj0np] {
    opacity: 0.5;
    cursor: default;
    box-shadow: none;
}

/* Pleine largeur pour passer sous le champ et le bouton, et hauteur reservee :
   sans elle le bloc sautille a chaque frappe quand le message change.

   width: 0 + min-width: 100% (2026-08-19) : le message s'affiche sur toute la
   colonne mais ne compte pour RIEN dans sa largeur. C'etait la cause du
   deplacement — le texte le plus large du bloc n'est ni le champ ni le bouton,
   c'est ce message, et il change a chaque frappe (« 8 caracteres… » puis
   « 3 sur 8. » puis le message d'erreur). Les trois libelles tiennent
   desormais sur UNE ligne dans les trois langues : verifie a la modification. */
.code-hint[b-jp7n2vj0np] {
    flex-basis: 100%;
    width: 0;
    min-width: 100%;
    margin: 0.1rem 0 0;
    font-size: 0.72rem;
    color: var(--ps-muted-soft);
    min-height: 1.1rem;
}

.code-hint.bad[b-jp7n2vj0np] {
    color: var(--ps-pink-ink);
    font-weight: 700;
}

/* Boutons logés À L'INTÉRIEUR du champ : pas de bordure, ils ne doivent pas se lire
   comme des objets posés à côté mais comme des commandes du champ lui-même. */
.lp-icon[b-jp7n2vj0np] {
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: none;
    background: transparent;
    color: var(--ps-muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
}

.lp-icon svg[b-jp7n2vj0np] {
    width: 1.1rem;
    height: 1.1rem;
    display: block;
}

.lp-icon:hover:not(:disabled)[b-jp7n2vj0np] {
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
}

.lp-icon.accent[b-jp7n2vj0np] {
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
}

/* Bouton ALLUMÉ : c'est cette source qui a fourni le lieu affiché. Les deux boutons
   se comportent en bascule — allumer l'un éteint l'autre, et taper dans le champ les
   éteint tous les deux. Fond plein et non teinté, pour qu'un coup d'œil suffise. */
.lp-icon.on[b-jp7n2vj0np] {
    background: var(--ps-accent);
    color: #ffffff;
}

.lp-icon.on:hover:not(:disabled)[b-jp7n2vj0np] {
    background: var(--ps-accent-ink);
    color: #ffffff;
}

.lp-icon:disabled[b-jp7n2vj0np] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* `flex: none` : le rayon garde une largeur fixe au bout de la barre. En le laissant
   s'étirer comme le champ, les deux prenaient chacun la moitié et la barre se lisait
   comme deux colonnes — c'est ce qui coupait la page en deux. */
.lp-dist[b-jp7n2vj0np] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: none;
}

.lp-dist .dist-range[b-jp7n2vj0np] {
    width: 7rem;
}

.lp-dist label[b-jp7n2vj0np] {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--ps-muted);
    white-space: nowrap;
}

/* ---- Titres de section ---- */
.lp-sec-head[b-jp7n2vj0np] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.8rem 0 0.7rem;
}

.lp-sec-t[b-jp7n2vj0np] {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ps-pink-ink);
}

.lp-sec-t.teal[b-jp7n2vj0np] {
    color: var(--ps-accent-ink);
}

.lp-sec-n[b-jp7n2vj0np] {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ps-muted);
}

/* ---- Fil d'alerte ---- */
.lp-carou[b-jp7n2vj0np] {
    display: flex;
    gap: 0.7rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    /* Barre de défilement masquée : la bande avance seule et porte ses flèches. */
    scrollbar-width: none;
    /* Le défilement s'arrête sur une vignette entière plutôt qu'à mi-chemin. */
    scroll-snap-type: x mandatory;
}

.lp-carou[b-jp7n2vj0np]::-webkit-scrollbar {
    display: none;
}

/* En mode boucle, le calage est RETIRÉ : il se bat avec le défilement continu
   piloté image par image et rabat la bande sur la vignette la plus proche. */
.lp-carou.is-loop[b-jp7n2vj0np] {
    scroll-snap-type: none;
}

.lp-mini[b-jp7n2vj0np] {
    flex: none;
    width: 7.4rem;
    scroll-snap-align: start;
    border-radius: 1rem;
    overflow: hidden;
    border: 2px solid var(--ps-line);
    background: var(--ps-surface);
    text-decoration: none;
    color: inherit;
}

.lp-mini-ph[b-jp7n2vj0np] {
    display: block;
    height: 5.2rem;
    background: var(--ps-well);
    position: relative;
}

.lp-mini-ph img[b-jp7n2vj0np] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lp-mini-paw[b-jp7n2vj0np] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
}

.lp-mini-nm[b-jp7n2vj0np] {
    display: block;
    padding: 0.35rem 0.5rem 0.5rem;
}

.lp-mini-nm b[b-jp7n2vj0np] {
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
}

.lp-mini-nm small[b-jp7n2vj0np] {
    display: block;
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--ps-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Squelette du fil pendant le chargement */
.lp-mini-skel[b-jp7n2vj0np] {
    flex: none;
    width: 7.4rem;
    height: 7.4rem;
    border-radius: 1rem;
    background: var(--ps-well);
    border: 2px solid var(--ps-line);
}

@media (max-width: 640px) {
    .lp-search[b-jp7n2vj0np] {
        gap: 0.55rem;
    }

    /* Sous 640 px le rayon passe à la ligne et prend toute la largeur : un curseur
       de 7 rem se règle mal au doigt. */
    .lp-dist[b-jp7n2vj0np] {
        flex: 1 1 100%;
    }

    .lp-dist .dist-range[b-jp7n2vj0np] {
        flex: 1;
        width: auto;
    }
}

/* Barre de filtres animaux perdus (2026-08-10). L'ancien .page-bg datait du
   style d'avant la refonte Récré. */

.dist-range[b-jp7n2vj0np] {
    width: min(14rem, 45vw);
    accent-color: var(--ps-accent);
}

.dist-range:disabled[b-jp7n2vj0np] {
    opacity: 0.45;
}

.dist-value[b-jp7n2vj0np] {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--ps-ink);
    font-variant-numeric: tabular-nums;
    min-width: 3.6rem;
}

/* Distance au point cherché, posée sur la photo.
   En HAUT à droite, et non en bas : .ps-photo porte un `border-radius: 0 0 3.5rem 0`
   — une large échancrure au coin bas-droit — avec `overflow: hidden`. Une pastille
   posée là était rognée par la courbe. Le coin haut-droit est carré, et il fait
   pendant au badge « perdu » qui occupe le haut-gauche. */
.lp-km[b-jp7n2vj0np] {
    position: absolute;
    right: 0.65rem;
    top: 0.65rem;
    z-index: 10;
    white-space: nowrap;
    background: rgba(20, 26, 48, 0.72);
    color: #ffffff;
    border-radius: 9999px;
    padding: 0.12rem 0.6rem;
    font-size: 0.68rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.lp-sec-right[b-jp7n2vj0np] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

/* Bascule du sens de tri. Discrète : c'est un réglage secondaire, le tri par
   proximité étant celui qu'on veut dans l'immense majorité des cas. */
.lp-sort[b-jp7n2vj0np] {
    border: 2px solid var(--ps-line);
    background: var(--ps-surface);
    color: var(--ps-muted);
    border-radius: 9999px;
    padding: 0.2rem 0.7rem;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 800;
    cursor: pointer;
}

.lp-sort:hover:not(:disabled)[b-jp7n2vj0np] {
    border-color: var(--ps-accent-ink);
    color: var(--ps-accent-ink);
}

.lp-sort:disabled[b-jp7n2vj0np] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Groupe de tri : deux axes, chacun réversible. */
.lp-sortgroup[b-jp7n2vj0np] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.lp-sortlbl[b-jp7n2vj0np] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ps-muted);
    margin-right: 0.1rem;
}

.lp-sort.on[b-jp7n2vj0np] {
    background: var(--ps-accent-soft);
    border-color: var(--ps-accent-ink);
    color: var(--ps-accent-ink);
}

/* Ancienneté de l'alerte, dans le corps de la carte et non sur la photo : deux
   pastilles y sont déjà, et le coin bas-droit est mangé par l'échancrure.
   Sans icône — un émoji est dessiné par le système, et une date n'en a pas besoin. */
.lp-when[b-jp7n2vj0np] {
    margin: 0.25rem 0 0.15rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--ps-muted);
}

/* La durée porte l'accent : c'est elle qui qualifie l'alerte. La date de
   déclaration suit, en retrait — elle ancre sans concurrencer. */
.lp-when b[b-jp7n2vj0np] {
    font-weight: 800;
    color: var(--ps-pink-ink);
}

.lp-when span[b-jp7n2vj0np] {
    font-weight: 600;
    color: var(--ps-muted-soft);
}

/* ═══ Bas de page quand il n'y a rien (2026-08-19, traitement « C ») ═══════
   Deux vides de nature différente, deux traitements : le fil national vide est
   une INFORMATION — et une bonne nouvelle — donc une ligne ; l'absence de zone
   choisie est une ACTION à faire, donc un bloc avec ses boutons. Les traiter
   pareil (deux paragraphes gris) revenait à dire qu'il ne se passe rien, alors
   qu'il y a une chose à faire et une chose à savoir. */

/* Le titre de section porte son icône. En flex et non en vertical-align : la
   feuille Tailwind pose `display: block` sur tous les svg, l'icône partait donc
   sur sa propre ligne au-dessus du texte. */
.lp-sec-t[b-jp7n2vj0np] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.lp-sec-t svg[b-jp7n2vj0np] {
    width: 1rem;
    height: 1rem;
    flex: none;
}

/* « Personne n'est perdu » : teal et non gris — c'est une bonne nouvelle. */
.lp-calm[b-jp7n2vj0np] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.6rem 0.8rem;
    border-radius: 0.8rem;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
    font-size: 0.82rem;
    font-weight: 700;
}

.lp-calm svg[b-jp7n2vj0np] {
    width: 1.05rem;
    height: 1.05rem;
    flex: none;
}





/* L'outil choisi suit ses onglets d'aussi près qu'ils suivent l'en-tête. */
.lp-tabs + .lp-search[b-jp7n2vj0np],
.lp-tabs + .lp-code[b-jp7n2vj0np] {
    margin-top: 0.5rem;
}

/* Renvoi vers le champ du bandeau, à la place des boutons qui le doublaient. */
.lp-pick-above[b-jp7n2vj0np] {
    margin: 1.1rem 0 0;
    text-align: center;
    font-size: 0.78rem;
    color: var(--ps-muted);
}

/* ═══ Carrousel du fil d'alertes (2026-08-19) ═════════════════════════════ */

.lp-carou-wrap[b-jp7n2vj0np] {
    position: relative;
}

/* Le second exemplaire de la liste ne sert qu'à reboucler : tant que la bande ne
   déborde pas, il n'a rien à faire à l'écran — sans quoi deux alertes se liraient
   comme quatre. C'est le JS qui pose `is-loop` après mesure. */
.lp-carou:not(.is-loop) .lp-mini-copy[b-jp7n2vj0np] {
    display: none;
}

/* Flèches et fondus n'existent QUE si la bande défile : une flèche qui ne mène
   nulle part est un mensonge, un fondu sur une bande qui s'arrête aussi. */
.lp-carou-nav[b-jp7n2vj0np] {
    display: none;
}

.lp-carou-wrap.is-loop .lp-carou-nav[b-jp7n2vj0np] {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    transform: translateY(-50%);
    border: 2px solid var(--ps-line);
    border-radius: 9999px;
    background: var(--ps-surface);
    color: var(--ps-ink);
    cursor: pointer;
    box-shadow: 0 6px 16px -10px var(--ps-shadow);
}

.lp-carou-nav svg[b-jp7n2vj0np] {
    width: 0.95rem;
    height: 0.95rem;
}

.lp-carou-nav.prev[b-jp7n2vj0np] { left: -0.55rem; }
.lp-carou-nav.next[b-jp7n2vj0np] { right: -0.55rem; }

.lp-carou-nav:hover[b-jp7n2vj0np] { border-color: var(--ps-accent); }

.lp-carou-nav:focus-visible[b-jp7n2vj0np] {
    outline: 3px solid var(--ps-accent);
    outline-offset: 2px;
}

.lp-carou-wrap.is-loop[b-jp7n2vj0np]::before,
.lp-carou-wrap.is-loop[b-jp7n2vj0np]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1.4rem;
    pointer-events: none;
    z-index: 1;
}

.lp-carou-wrap.is-loop[b-jp7n2vj0np]::before {
    left: 0;
    background: linear-gradient(90deg, var(--ps-bg), transparent);
}

.lp-carou-wrap.is-loop[b-jp7n2vj0np]::after {
    right: 0;
    background: linear-gradient(270deg, var(--ps-bg), transparent);
}

/* Les onglets viennent du langage global .ps-seg-tabs ; ici, seulement leur
   place sous l'identité du bandeau. */
.lp-tabs[b-jp7n2vj0np] {
    margin-top: 1.25rem;
}
/* _content/PawSeekrWebApp/Pages/Pets/PetDetail.razor.rz.scp.css */
/* Fiche animal — farde à intercalaires (V1 validée le 2026-08-12).
   Quatre onglets colorés dépassent de la farde, l'actif se soude (même fond,
   liseré de sa couleur en tranche). En mobile les onglets deviennent une
   grille 2×2 de pilules détachées — aucune marge négative, aucun
   chevauchement. Tokens --ps-* partout, les deux thèmes suivent.
   Remplace l'ancien CSS pré-Récré (.card/.inp/.btn-primary). */

/* ---- Bandeau : même color-block que les listes (pêche→crème, halo teal,
   pattes en filigrane), remonté derrière la navbar. L'identité et les
   intercalaires vivent dedans. ---- */
.pet-band[b-3acgbip2ic] {
    position: relative;
    overflow: visible;
    margin-top: -1rem;
    /* 3.2rem : aligné sur le .list-band des articles (2026-08-17, un seul et
       même en-tête sur toutes les pages client). */
    padding-top: 3.2rem;
    background:
        radial-gradient(24rem 10rem at 97% -4.5rem, var(--ps-accent-soft), transparent 65%),
        linear-gradient(180deg, var(--ps-band-top) 0, var(--ps-bg) 7rem);
}



.band-inner[b-3acgbip2ic] {
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.crumb[b-3acgbip2ic] {
    margin: 0;
    font-size: 0.85rem;
}

/* ---- Rangée d'identité : portrait, colonne de texte, action à droite.
   Le retrait latéral de 1.6rem la rentre par rapport aux bords de la farde —
   l'en-tête ne s'aligne pas sur le contenu, il l'annonce. ---- */
.id-row[b-3acgbip2ic] {
    display: flex;
    align-items: center;
    gap: 1.7rem;
    margin-top: 1.2rem;
    padding: 0 1.6rem;
}

.id-main[b-3acgbip2ic] {
    flex: 1;
    min-width: 0;
}

.id-kick[b-3acgbip2ic] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
    color: var(--ps-cyan-text);
}

.id-name[b-3acgbip2ic] {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--ps-ink);
    margin: 0.3rem 0 0;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.id-subtitle[b-3acgbip2ic] {
    color: var(--ps-muted);
    font-size: 0.88rem;
    font-weight: 600;
    margin: 0.4rem 0 0;
}

.id-tags[b-3acgbip2ic] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.65rem;
    flex-wrap: wrap;
}

.tab[b-3acgbip2ic]  .tab-hex {
    width: 0.95em;
    height: 0.95em;
    flex: none;
}

/* L'action perdu/retrouvé : sticker à ombre pleine, calé sur la LIGNE DE BASE
   du bloc de gauche (bas de la rangée de chips), pas centré dans le vide. */
.act-sticker[b-3acgbip2ic] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--ps-surface);
    color: var(--ps-pink-ink);
    border: none;
    font-family: inherit;
    cursor: pointer;
    border-radius: 9999px;
    padding: 0.6rem 1.15rem;
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
    flex: none;
    align-self: flex-end;
    margin-bottom: 0.15rem;
}

.act-sticker:hover:not(:disabled)[b-3acgbip2ic] {
    box-shadow: 0 4px 0 var(--ps-btn-shadow);
}

.act-sticker:disabled[b-3acgbip2ic] {
    opacity: 0.55;
    cursor: default;
}

/* ---- Intercalaires ---- */
/* Une seule ligne, jamais de retour à la ligne : défilement horizontal
   si l'espace manque. La marge haute décolle la rangée d'identité. */
/* Jamais scrollable (2026-08-21) : deux-trois onglets courts tiennent toujours —
   l'overflow-x:auto d'origine rendait la barre glissable à la molette/trackpad
   sans aucun indice visuel (barre masquée). Repli improbable : à la ligne. */
.tabs[b-3acgbip2ic] {
    display: flex;
    gap: 0.3rem;
    margin-top: 2rem;
    padding: 0 1.2rem;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}

.tab[b-3acgbip2ic] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 800;
    border-radius: 0.85rem 0.85rem 0 0;
    padding: 0.6rem 1.1rem 0.75rem;
    margin-bottom: -0.5rem;
    position: relative;
}

.tab .cnt[b-3acgbip2ic] {
    font-size: 0.66rem;
    font-weight: 800;
    border-radius: 9999px;
    padding: 0 0.4rem;
    background: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
}

:root[data-theme="dark"] .tab .cnt[b-3acgbip2ic] {
    background: rgba(0, 0, 0, 0.18);
}

.tab.c1[b-3acgbip2ic] { background: var(--ps-peach-soft); color: var(--ps-on-peach); }
.tab.c2[b-3acgbip2ic] { background: var(--ps-cyan-soft);  color: var(--ps-cyan-text); }
.tab.c3[b-3acgbip2ic] { background: var(--ps-accent-soft); color: var(--ps-accent-ink); }

/* L'onglet ACTIF prend la surface de la farde et se soude : même fond, un
   liseré de sa couleur sur le dessus, et il recouvre l'ombre de la farde. */
.tab.on[b-3acgbip2ic] {
    background: var(--ps-surface);
    color: var(--ps-ink);
    z-index: 3;
    padding-bottom: 1.05rem;
    margin-bottom: -0.55rem;
}

.tab.c1.on[b-3acgbip2ic] { box-shadow: inset 0 3px 0 var(--ps-peach); }
.tab.c2.on[b-3acgbip2ic] { box-shadow: inset 0 3px 0 var(--ps-cyan); }
.tab.c3.on[b-3acgbip2ic] { box-shadow: inset 0 3px 0 var(--ps-accent); }

/* ---- La farde ---- */
.folder[b-3acgbip2ic] {
    position: relative;
    z-index: 2;
    background: var(--ps-surface);
    color: var(--ps-ink);
    border-radius: 1.75rem;
    padding: 1.6rem;
    box-shadow: 0 14px 34px -20px var(--ps-shadow);
}

.folder-ph[b-3acgbip2ic] {
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    border: 4px solid var(--ps-surface);
    box-shadow: 0 4px 0 var(--ps-btn-shadow);
    background: var(--ps-peach-soft);
}

.folder-ph-empty[b-3acgbip2ic] {
    display: grid;
    place-items: center;
    font-size: 3rem;
}

/* Le macaron devient un bouton : la vignette est recadrée en rond, l'original
   ne l'est pas — la loupe annonce qu'il y a mieux à voir derrière. */
.folder-ph-btn[b-3acgbip2ic] {
    padding: 0;
    position: relative;
    cursor: zoom-in;
    overflow: hidden;
}

.folder-ph-btn img[b-3acgbip2ic] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Enveloppe du macaron : elle porte la pastille, que le bouton — découpé en rond —
   ne peut pas contenir. `flex: none` doit être repris ici, sinon la ligne d'identité
   comprime l'enveloppe et le macaron avec. */
.folder-ph-wrap[b-3acgbip2ic] {
    position: relative;
    flex: none;
    line-height: 0;
}

.folder-ph-badge[b-3acgbip2ic] {
    position: absolute;
    /* 50 % + 35,4 % : le point du cercle à 45°, donc la pastille est centrée
       exactement sur l'anneau au lieu de viser un coin qui n'existe pas.
       (35,4 % = 50 % ÷ √2, la projection du rayon sur chaque axe.) */
    left: 85.4%;
    top: 85.4%;
    transform: translate(-50%, -50%);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--ps-surface);
    color: var(--ps-accent-ink);
    border: 2px solid var(--ps-surface);
    box-shadow: 0 2px 0 var(--ps-btn-shadow);
    display: grid;
    place-items: center;
    /* Décor : le clic doit traverser jusqu'au macaron, qui est la vraie cible. */
    pointer-events: none;
    transition: background 0.12s ease, color 0.12s ease;
}

/* ::deep OBLIGATOIRE : le <svg> est rendu par le composant ZoomInIcon, pas par
   cette page. Sans lui, le compilateur pose l'attribut de portée SUR le .zi, que
   l'enfant ne porte pas — la règle ne s'appliquerait jamais et l'icône sortirait à
   sa taille par défaut. */
.folder-ph-badge[b-3acgbip2ic]  .zi {
    width: 0.95rem;
    height: 0.95rem;
}

.folder-ph-wrap:hover .folder-ph-badge[b-3acgbip2ic],
.folder-ph-btn:focus-visible + .folder-ph-badge[b-3acgbip2ic] {
    background: var(--ps-accent);
    color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    .folder-ph-badge[b-3acgbip2ic] {
        transition: none;
    }
}

.badge-lost[b-3acgbip2ic] {
    display: inline-flex;
    align-items: center;
    background: var(--ps-pink-soft);
    color: var(--ps-pink-ink);
    border-radius: 9999px;
    padding: 0.18rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 800;
}

/* ---- Identité : état civil (V1 validée le 2026-08-12) ----
   Deux colonnes de rangées à pictogrammes, chaque pastille dans la couleur
   d'un onglet ; la description passe en exergue sous les deux colonnes. */
.civil[b-3acgbip2ic] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2.2rem;
}

.civil-row[b-3acgbip2ic] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 0;
    border-bottom: 2px solid var(--ps-line);
}

.civil-ic[b-3acgbip2ic] {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 0.7rem;
    flex: none;
    display: grid;
    place-items: center;
    font-size: 1rem;
    background: var(--ps-peach-soft);
}

.civil-ic.teal[b-3acgbip2ic] { background: var(--ps-accent-soft); }
.civil-ic.cyan[b-3acgbip2ic] { background: var(--ps-cyan-soft); }
.civil-ic.rose[b-3acgbip2ic] { background: var(--ps-pink-soft); }

.civil-t[b-3acgbip2ic] {
    min-width: 0;
}

.civil-lbl[b-3acgbip2ic] {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ps-muted-soft);
    margin: 0;
}

/* ::deep : le <svg> vient de HexIcon, pas de cette page. */
.civil-ic[b-3acgbip2ic]  .civil-hex {
    width: 1.05rem;
    height: 1.05rem;
}

/* Le code court se lit caractère par caractère quand on le recopie ou qu'on le
   compare à la gravure : chasse fixe et lettres espacées. */
.civil-val.mono[b-3acgbip2ic] {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.civil-val[b-3acgbip2ic] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ps-ink);
    margin: 0.1rem 0 0;
    overflow-wrap: anywhere;
}

.civil-note[b-3acgbip2ic] {
    grid-column: 1 / -1;
    margin-top: 1.4rem;
}

.sec-quiet[b-3acgbip2ic] {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ps-muted-soft);
    margin: 0 0 0.7rem;
}

.quote[b-3acgbip2ic] {
    background: var(--ps-well);
    border-left: 4px solid var(--ps-peach);
    border-radius: 0 1rem 1rem 0;
    padding: 1rem 1.2rem;
    font-size: 0.92rem;
    line-height: 1.6;
    font-weight: 500;
    color: var(--ps-ink);
    overflow-wrap: anywhere;
    /* La description conserve ses retours à la ligne (saisie textarea, fiche démo). */
    white-space: pre-line;
}

.panel-foot[b-3acgbip2ic] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 2px solid var(--ps-line);
}

.link-rose[b-3acgbip2ic] {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ps-pink-ink);
    cursor: pointer;
    padding: 0;
}

.link-rose:hover[b-3acgbip2ic] {
    text-decoration: underline;
}

.danger-box[b-3acgbip2ic] {
    margin-top: 1rem;
    border: 2px solid var(--ps-pink-ink);
    background: var(--ps-pink-soft);
    border-radius: 1rem;
    padding: 1rem 1.2rem;
}

.danger-box p[b-3acgbip2ic] {
    margin: 0 0 0.8rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ps-pink-ink);
}

.danger-actions[b-3acgbip2ic] {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.btn-rose[b-3acgbip2ic] {
    background: var(--ps-pink-ink);
    color: #ffffff;
}

/* ---- Identité : édition (mêmes règles que le wizard) ---- */
.edit-form[b-3acgbip2ic] {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.field[b-3acgbip2ic] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.grid2[b-3acgbip2ic] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.15rem 1rem;
}

.edit-form .ps-input[b-3acgbip2ic] {
    height: 2.9rem;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
}

.edit-form .ps-input[type="date"][b-3acgbip2ic] {
    -webkit-appearance: none;
    appearance: none;
}

.edit-form .edit-area[b-3acgbip2ic] {
    height: auto;
    min-height: 7rem;
    padding: 0.7rem 0.9rem;
    line-height: 1.5;
    resize: vertical;
}

.field-err[b-3acgbip2ic] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ps-pink-ink);
}

.edit-cancel[b-3acgbip2ic] {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0;
}

/* ---- Photos : mode lecture / mode sélection (V1 validée le 2026-08-12) ----
   Lecture : cliquer une photo PROPOSE le portrait (modale de confirmation).
   Sélection : les pastilles de coche apparaissent, la barre rose gère la
   suppression en lot. Aucun appel serveur sans confirmation. */
.ph-head[b-3acgbip2ic] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.ph-head-right[b-3acgbip2ic] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.btn-sm[b-3acgbip2ic] {
    padding: 0.42rem 0.9rem;
    font-size: 0.75rem;
}

.thumbs[b-3acgbip2ic] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.thumb[b-3acgbip2ic] {
    position: relative;
    aspect-ratio: 1;
    border-radius: 1rem;
    overflow: hidden;
    border: 3px solid var(--ps-line);
    background: var(--ps-well);
    box-sizing: border-box;
    cursor: pointer;
}

/* En lecture, la vignette entière ouvre la photo : le curseur l'annonce, ce qui
   remplace la loupe désormais masquée dans ce mode. */
.thumb.is-viewable[b-3acgbip2ic] {
    cursor: zoom-in;
}

.thumb img[b-3acgbip2ic] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.thumb.is-profile[b-3acgbip2ic] {
    border-color: var(--ps-accent);
    box-shadow: 0 0 0 3px var(--ps-accent-soft);
}

.thumb.is-selected[b-3acgbip2ic] {
    border-color: var(--ps-pink-ink);
}

.thumb.is-selected[b-3acgbip2ic]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(194, 69, 94, 0.16);
}

.thumb-star[b-3acgbip2ic] {
    position: absolute;
    left: 0.4rem;
    top: 0.4rem;
    z-index: 2;
    background: var(--ps-accent);
    color: #ffffff;
    border-radius: 9999px;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 0.1rem 0.5rem;
}

.thumb-chk[b-3acgbip2ic] {
    position: absolute;
    right: 0.4rem;
    top: 0.4rem;
    z-index: 3;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 2.5px solid #ffffff;
    background: rgba(26, 34, 64, 0.35);
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
}

.thumb.is-selected .thumb-chk[b-3acgbip2ic] {
    background: var(--ps-pink-ink);
}

/* ---- Mode réorganiser ---- */
.thumb[draggable="true"][b-3acgbip2ic] {
    cursor: grab;
}

.thumb.is-dragging[b-3acgbip2ic] {
    opacity: 0.35;
}

.thumb-pos[b-3acgbip2ic] {
    position: absolute;
    right: 0.4rem;
    top: 0.4rem;
    z-index: 3;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgba(26, 34, 64, 0.55);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 0.68rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.thumb-pos.pinned[b-3acgbip2ic] {
    background: var(--ps-accent);
}

.thumb-grip[b-3acgbip2ic] {
    position: absolute;
    left: 50%;
    bottom: 0.35rem;
    transform: translateX(-50%);
    z-index: 3;
    background: rgba(26, 34, 64, 0.55);
    color: #ffffff;
    border-radius: 9999px;
    padding: 0.05rem 0.55rem;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
}

.thumb-lock[b-3acgbip2ic] {
    position: absolute;
    left: 50%;
    bottom: 0.35rem;
    transform: translateX(-50%);
    z-index: 3;
    background: var(--ps-accent);
    color: #ffffff;
    border-radius: 9999px;
    padding: 0.08rem 0.5rem;
    font-size: 0.6rem;
    font-weight: 800;
    white-space: nowrap;
}

/* Barre d'enregistrement de l'ordre — pêche, comme toute action en attente */
.orderbar[b-3acgbip2ic] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
    padding: 0.7rem 1rem;
    border-radius: 1rem;
    background: var(--ps-peach-soft);
}

.orderbar-n[b-3acgbip2ic] {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--ps-on-peach);
}

.orderbar-actions[b-3acgbip2ic] {
    margin-left: auto;
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Loupe de vignette : agrandir sans déclencher le choix du portrait */
.thumb-zoom[b-3acgbip2ic] {
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
    z-index: 3;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    border: none;
    cursor: zoom-in;
    background: rgba(26, 34, 64, 0.55);
    color: #ffffff;
    display: grid;
    place-items: center;
    line-height: 1;
}

.thumb-zoom[b-3acgbip2ic]  .zi {
    width: 0.95rem;
    height: 0.95rem;
}

.thumb-zoom:hover[b-3acgbip2ic] {
    background: var(--ps-accent);
}

/* ---- Photo en grand (même langage que la lightbox de la page article) ---- */
.pet-lb[b-3acgbip2ic] {
    position: fixed;
    inset: 0;
    background: rgba(14, 18, 36, 0.88);
    display: grid;
    place-items: center;
    z-index: 100;
    cursor: zoom-out;
}

.pet-lb-frame[b-3acgbip2ic] {
    margin: 0;
    max-width: 90vw;
    max-height: 85vh;
    cursor: default;
}

.pet-lb-frame img[b-3acgbip2ic] {
    display: block;
    max-width: 90vw;
    max-height: 82vh;
    border-radius: 0.8rem;
    object-fit: contain;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
}

.pet-lb-close[b-3acgbip2ic],
.pet-lb-nav[b-3acgbip2ic] {
    position: fixed;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-radius: 9999px;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.pet-lb-close[b-3acgbip2ic] {
    top: 1.3rem;
    right: 1.5rem;
    width: 2.7rem;
    height: 2.7rem;
    font-size: 1.15rem;
}

.pet-lb-nav[b-3acgbip2ic] {
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    font-size: 1.8rem;
    line-height: 1;
}

.pet-lb-nav.prev[b-3acgbip2ic] { left: 1.2rem; }
.pet-lb-nav.next[b-3acgbip2ic] { right: 1.2rem; }

.pet-lb-close:hover[b-3acgbip2ic],
.pet-lb-nav:hover[b-3acgbip2ic] {
    background: rgba(255, 255, 255, 0.24);
}

.pet-lb-count[b-3acgbip2ic] {
    position: fixed;
    bottom: 1.4rem;
    left: 50%;
    transform: translateX(-50%);
    color: #DEE4F5;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Barre de sélection */
.selbar[b-3acgbip2ic] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
    padding: 0.7rem 1rem;
    border-radius: 1rem;
    background: var(--ps-pink-soft);
}

.selbar-n[b-3acgbip2ic] {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--ps-pink-ink);
}

.selbar-actions[b-3acgbip2ic] {
    margin-left: auto;
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Modale de confirmation — au-dessus de la navbar, comme le tiroir de filtres */
.ps-scrim[b-3acgbip2ic] {
    position: fixed;
    inset: 0;
    background: rgba(26, 34, 64, 0.45);
    display: grid;
    place-items: center;
    z-index: 100;
    padding: 1rem;
}

.ps-modal[b-3acgbip2ic] {
    background: var(--ps-surface);
    color: var(--ps-ink);
    border-radius: 1.4rem;
    padding: 1.4rem;
    max-width: 24rem;
    width: 100%;
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.5);
}

.ps-modal h3[b-3acgbip2ic] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.ps-modal p[b-3acgbip2ic] {
    margin: 0.5rem 0 0;
    font-size: 0.86rem;
    color: var(--ps-muted);
    line-height: 1.5;
}

.modal-prev[b-3acgbip2ic] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.9rem;
    flex-wrap: wrap;
}

.modal-prev img[b-3acgbip2ic] {
    width: 3rem;
    height: 3rem;
    border-radius: 0.7rem;
    object-fit: cover;
    border: 2px solid var(--ps-line);
}

/* Variante centrée : réservée à la modale du portrait, dont l'aperçu rond est
   l'élément principal. Les autres modales gardent leur alignement à gauche —
   un texte long se lit mal centré. */
.ps-modal-center[b-3acgbip2ic] {
    text-align: center;
}

.ps-modal-center .modal-actions[b-3acgbip2ic] {
    justify-content: center;
}

.portrait-hero[b-3acgbip2ic] {
    display: grid;
    place-items: center;
    margin-top: 1.2rem;
}

/* Enveloppe non découpée : elle porte l'étoile. Voir .folder-ph-wrap, même motif. */
.portrait-wrap[b-3acgbip2ic] {
    position: relative;
    line-height: 0;
}

/* Mêmes dimensions et même ombre que .folder-ph, le macaron de l'en-tête : la
   modale doit montrer l'objet final, pas une approximation. */
.portrait-disc[b-3acgbip2ic] {
    display: block;
    width: 8.5rem;
    height: 8.5rem;
    border-radius: 50%;
    border: 5px solid var(--ps-surface);
    box-shadow: 0 5px 0 var(--ps-btn-shadow);
    background: var(--ps-peach-soft);
    overflow: hidden;
}

.portrait-disc img[b-3acgbip2ic] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Posée sur l'anneau, à 45°, comme la pastille du macaron — un coin de carré
   tomberait hors du disque et serait rogné par l'overflow. */
.portrait-star[b-3acgbip2ic] {
    position: absolute;
    left: 85.4%;
    top: 85.4%;
    transform: translate(-50%, -50%);
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--ps-btn);
    color: var(--ps-btn-ink);
    border: 3px solid var(--ps-surface);
    display: grid;
    place-items: center;
    font-size: 0.9rem;
    font-weight: 800;
}

.modal-actions[b-3acgbip2ic] {
    display: flex;
    gap: 0.7rem;
    margin-top: 1.2rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Tuile d'ajout : l'InputFile invisible couvre la case (clic + drag & drop) */
.thumb-add[b-3acgbip2ic] {
    border-style: dashed;
    border-color: var(--ps-dash);
    background: transparent;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: var(--ps-muted-soft);
}

/* Le survol ne vaut que pour la tuile active : une tuile grisée qui réagit au
   pointeur promet un geste qu'elle n'offre pas. */
.thumb-add:not(.is-disabled):hover[b-3acgbip2ic] {
    border-color: var(--ps-accent);
    color: var(--ps-accent-ink);
}

/* Plafond de photos atteint. Même vocabulaire que .ps-add-tile.is-disabled sur
   /my-pets : bordure tiret, teinte éteinte, curseur neutre. Elle ne porte plus
   de champ de fichier — rien à cliquer, donc rien à désactiver. */
.thumb-add.is-disabled[b-3acgbip2ic] {
    /* Fond transparent comme la tuile active : les deux doivent se lire comme le
       MÊME objet, l'un vivant l'autre éteint — un fond plein en ferait deux
       choses différentes. */
    color: var(--ps-muted);
    opacity: 0.6;
    cursor: default;
    align-content: center;
    gap: 0.35rem;
}

.thumb-add.is-disabled .add-cap[b-3acgbip2ic] {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    padding: 0 0.4rem;
}

.thumb-add[b-3acgbip2ic]  .add-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.hint-quiet[b-3acgbip2ic] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ps-muted-soft);
}

.cnt-quiet[b-3acgbip2ic] {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--ps-muted-soft);
    font-variant-numeric: tabular-nums;
}

/* ---- Médaillon : le QR présenté comme l'objet gravé (V1 validée le
   2026-08-12), puis les 5 derniers scans ---- */
/* ── Onglet médaillon, design M5/M6 (2026-08-18) : le QR (numérique, actif dès
   la création) et le médaillon (produit physique) sont DEUX objets. Le métal
   des disques est invariant au thème — c'est le produit. ── */

/* Bloc QR sans médaillon : tuile plate, QR noir/blanc = le fichier téléchargé */
.qr-card[b-3acgbip2ic] {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    flex-wrap: wrap;
}

.qr-tile[b-3acgbip2ic] {
    width: 9rem;
    height: 9rem;
    flex: none;
    border-radius: 1.1rem;
    background: var(--ps-well);
    border: 2px solid var(--ps-line);
    display: grid;
    place-items: center;
}

/* Fond blanc gardé même en sombre : un QR se scanne noir sur blanc, point */
.qr-tile img[b-3acgbip2ic] {
    width: 7rem;
    height: 7rem;
    border-radius: 0.5rem;
    background: #ffffff;
}

.qr-info[b-3acgbip2ic] {
    flex: 1;
    min-width: 13rem;
}

.qr-dl[b-3acgbip2ic] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.8rem;
}

.qr-dl svg[b-3acgbip2ic] {
    width: 0.95rem;
    height: 0.95rem;
    flex: none;
}

/* Teaser vers la modale : le médaillon n'existe pas encore, il s'annonce */
.teaser[b-3acgbip2ic] {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-top: 1.2rem;
    padding: 0.9rem 1.1rem;
    background: var(--ps-peach-soft);
    border-radius: 1.1rem;
    flex-wrap: wrap;
}

.teaser-txt[b-3acgbip2ic] {
    flex: 1;
    min-width: 12rem;
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--ps-on-peach);
    font-weight: 600;
}

/* ── Disques métal — même vocabulaire que /shop et la page de gravure : disque
   plein, anse soudée (::before) percée (::after, peinte couleur socle). ── */
.m-disc[b-3acgbip2ic] {
    position: relative;
    width: 8.6rem;
    height: 8.6rem;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(145deg, #f3f4f6 0%, #d1d5db 45%, #9ca3af 100%);
    box-shadow: 0 8px 18px -10px rgba(43, 58, 103, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* L'anse passe DERRIÈRE le disque (z-index négatif, 2026-08-18) : devant, elle
   semblait posée sur le métal. Le trou (::after, peint après) reste sur l'anse. */
.m-disc[b-3acgbip2ic]::before {
    content: "";
    position: absolute;
    top: -0.55rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5rem;
    height: 1.1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    background: linear-gradient(145deg, #e5e7eb, #b6bcc6);
    z-index: -1;
}

.m-disc[b-3acgbip2ic]::after {
    content: "";
    position: absolute;
    top: -0.42rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--ps-surface);
    background-image: linear-gradient(var(--ps-peach-soft), var(--ps-peach-soft));
    z-index: -1;
}

/* Ratio validé à l'œil : QR 8.5 sur disque 10.5 (voir Medallion) */
.m-qr[b-3acgbip2ic] {
    width: 81%;
    height: 81%;
}

.m-disc-s[b-3acgbip2ic] {
    width: 4.6rem;
    height: 4.6rem;
}

.m-disc-s[b-3acgbip2ic]::before {
    top: -0.35rem;
    width: 0.9rem;
    height: 0.7rem;
}

.m-disc-s[b-3acgbip2ic]::after {
    top: -0.26rem;
    width: 0.32rem;
    height: 0.32rem;
}

.m-disc-m[b-3acgbip2ic] {
    width: 7.6rem;
    height: 7.6rem;
}

/* Macaron : mêmes arcs asymétriques que la page de gravure (base 38.68 / 45.25) */
.m-ring[b-3acgbip2ic] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.m-ring text[b-3acgbip2ic] {
    font-family: "PS Engraving", ui-monospace, Menlo, monospace;
    font-weight: 700;
    fill: #4b5563;
}

.m-l1[b-3acgbip2ic],
.m-l2[b-3acgbip2ic] {
    position: relative;
    z-index: 1;
    font-family: "PS Engraving", ui-monospace, Menlo, monospace;
    font-weight: 700;
    color: #4b5563;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
    max-width: 68%;
    text-align: center;
    word-break: break-word;
    line-height: 1.1;
}

.m-l2[b-3acgbip2ic] {
    font-size: 0.48rem;
    margin-top: 0.2rem;
}

/* Téléphone en pointillés dans la modale : il n'existe pas encore */
.m-l2-ghost[b-3acgbip2ic] {
    color: #9ca3af;
    text-shadow: none;
}

/* Socle pêche des faces (composé sur --ps-surface, comme le trou de l'anse) */
.faces[b-3acgbip2ic] {
    display: flex;
    justify-content: center;
    gap: 3rem;
    background: var(--ps-peach-soft);
    border-radius: 1.2rem;
    padding: 1.6rem 1rem 0.9rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.faces figure[b-3acgbip2ic] {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.faces figcaption[b-3acgbip2ic] {
    margin-top: 0.6rem;
    font-size: 0.72rem;
    font-weight: 750;
    color: var(--ps-muted);
    text-align: center;
    max-width: 11rem;
}

/* ── M6 : le médaillon commandé centralise tout. ── */
.own-head[b-3acgbip2ic] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.own-date[b-3acgbip2ic] {
    margin: 0.15rem 0 0;
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--ps-ink);
}

.own-status[b-3acgbip2ic] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.own-status .medal-pill[b-3acgbip2ic],
.own-code-row .medal-pill[b-3acgbip2ic] {
    margin-top: 0;
}

.own-link[b-3acgbip2ic] {
    font-size: 0.78rem;
    font-weight: 750;
    color: var(--ps-accent-ink);
    text-decoration: none;
}

.own-link:hover[b-3acgbip2ic] {
    text-decoration: underline;
}

/* Barre d'actions M7a : code à gauche, actions à droite, sur UNE rangée */
.own-bar[b-3acgbip2ic] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 2px dashed var(--ps-dash);
    flex-wrap: wrap;
}

/* Le margin-top de .qr-dl (pensé pour le bloc QR sans médaillon) désalignait
   les boutons de la puce code : dans la barre, tout est centré sur une ligne. */
.own-bar .qr-dl[b-3acgbip2ic] {
    margin-top: 0;
}

/* Mobile (MB1, 2026-08-18) : la barre s'empile — puce code centrée, boutons
   pleine largeur (cibles tactiles), le lien SAV dessous est déjà centré. */
@media (max-width: 30rem) {
    .own-bar[b-3acgbip2ic] {
        flex-direction: column;
        align-items: stretch;
    }

    .own-bar .code-chip[b-3acgbip2ic] {
        align-self: center;
    }

    .own-spacer[b-3acgbip2ic] {
        display: none;
    }

    .own-bar .qr-dl[b-3acgbip2ic] {
        width: 100%;
    }
}

.own-spacer[b-3acgbip2ic] {
    flex: 1;
}

.code-chip[b-3acgbip2ic] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    background: var(--ps-well);
    border: 2px solid var(--ps-line);
    border-radius: 0.75rem;
    padding: 0.42rem 0.8rem;
}

.code-lab[b-3acgbip2ic] {
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--ps-muted-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.code-val[b-3acgbip2ic] {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ps-ink);
    font-variant-numeric: tabular-nums;
}

.own-sav[b-3acgbip2ic] {
    display: block;
    margin-top: 0.75rem;
    text-align: center;
}

/* Le contour du ghost est --ps-ink ; la variante teal signe le réachat */
.own-again[b-3acgbip2ic] {
    color: var(--ps-accent-ink);
    outline-color: var(--ps-accent-ink);
}

.medal-code[b-3acgbip2ic] {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--ps-ink);
    margin: 0.15rem 0 0;
    font-variant-numeric: tabular-nums;
}

/* Deux pastilles indépendantes : l'acheminement (attente / fabrication /
   livraison) et le fonctionnement (actif / pas encore scanné). */
.pills[b-3acgbip2ic] {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
}

.medal-pill[b-3acgbip2ic] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 9999px;
    padding: 0.22rem 0.75rem;
    margin-top: 0.6rem;
    font-size: 0.72rem;
    font-weight: 800;
}

.medal-pill.pill-wait[b-3acgbip2ic] {
    background: var(--ps-well);
    color: var(--ps-muted);
    border: 2px solid var(--ps-line);
}

.medal-pill.pill-prod[b-3acgbip2ic] {
    background: var(--ps-peach-soft);
    color: var(--ps-on-peach);
}

.medal-pill.pill-ship[b-3acgbip2ic] {
    background: var(--ps-cyan-soft);
    color: var(--ps-cyan-text);
}

.medal-pill.pill-active[b-3acgbip2ic] {
    background: var(--ps-accent);
    color: #ffffff;
}

/* Expédié mais jamais scanné : en pointillés, c'est une absence, pas un état */
.medal-pill.pill-idle[b-3acgbip2ic] {
    background: var(--ps-well);
    color: var(--ps-muted-soft);
    border: 2px dashed var(--ps-dash);
}

/* Le doré, couleur d'action chaude du site, pour le geste heureux */
.btn-gold[b-3acgbip2ic] {
    background: var(--ps-gold);
    color: var(--ps-gold-ink);
}

.sav-link[b-3acgbip2ic] {
    display: inline-block;
    margin-top: 0.9rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--ps-muted-soft);
    text-decoration: underline;
}

.sav-link:hover[b-3acgbip2ic] {
    color: var(--ps-accent-ink);
}

.medal-txt[b-3acgbip2ic] {
    font-size: 0.84rem;
    color: var(--ps-muted);
    line-height: 1.5;
    margin: 0.6rem 0 0;
}

/* ── Modale d'incitation (M5m) : l'argumentaire produit ne vit qu'ici. ── */
.offer-modal[b-3acgbip2ic] {
    width: min(30rem, 92vw);
}

.offer-mhead[b-3acgbip2ic] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.offer-mhead h3[b-3acgbip2ic] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ps-ink);
}

.offer-x[b-3acgbip2ic] {
    width: 1.9rem;
    height: 1.9rem;
    flex: none;
    border: none;
    border-radius: 9999px;
    background: var(--ps-well);
    color: var(--ps-muted);
    cursor: pointer;
    display: grid;
    place-items: center;
}

.offer-x svg[b-3acgbip2ic] {
    width: 0.7rem;
    height: 0.7rem;
}

.faces-modal[b-3acgbip2ic] {
    gap: 2.2rem;
}

.offer-chips[b-3acgbip2ic] {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.offer-chips li[b-3acgbip2ic] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--ps-well);
    border: 2px solid var(--ps-line);
    border-radius: 0.8rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ps-muted);
    line-height: 1.35;
}

.offer-chips svg[b-3acgbip2ic] {
    width: 0.95rem;
    height: 0.95rem;
    flex: none;
    color: var(--ps-accent-ink);
}

.offer-mfoot[b-3acgbip2ic] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 2px dashed var(--ps-dash);
    flex-wrap: wrap;
}

.offer-price[b-3acgbip2ic] {
    font-size: 0.85rem;
    font-weight: 750;
    color: var(--ps-muted);
}

.offer-btns[b-3acgbip2ic] {
    display: flex;
    gap: 0.6rem;
    margin-left: auto;
}

.sec-t[b-3acgbip2ic] {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--ps-ink);
    margin: 1.6rem 0 0.4rem;
}

/* Carte des scans, sœur du folder (design S1) : mêmes rondeur/ombre de carte */
.scans-card[b-3acgbip2ic] {
    margin-top: 1.1rem;
    background: var(--ps-surface);
    color: var(--ps-ink);
    border-radius: 1.75rem;
    padding: 1.6rem;
    box-shadow: 0 14px 34px -20px var(--ps-shadow);
}

.scans-card .sec-t[b-3acgbip2ic] {
    margin-top: 0;
}

/* ── Rail chronologique estompé « R1f » (2026-08-18). Le rail est un dégradé
   teal → transparent ; les points (13px, bordés de la surface) sont centrés AU
   PIXEL sur la ligne de 3px : rail à left 6px ⇒ centre 7.5px ⇒ point à left
   1px (7.5 − 13/2). Le dernier scan est l'ancre : point 17px + halo pêche. ── */
.scan-head[b-3acgbip2ic] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.scan-note-line[b-3acgbip2ic] {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ps-muted-soft);
}

.scan-rail[b-3acgbip2ic] {
    position: relative;
    margin: 0.9rem 0 0 0.6rem;
}

.scan-rail[b-3acgbip2ic]::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 10px;
    bottom: 14px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--ps-accent) 0%, var(--ps-accent) 22%, transparent 100%);
}

.scan-line[b-3acgbip2ic] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    /* 0.85rem : lignes aérées (R1g, 2026-08-18) */
    padding: 0.85rem 0 0.85rem 2rem;
}

.scan-node[b-3acgbip2ic] {
    position: absolute;
    left: 1px;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    box-sizing: border-box;
    border-radius: 9999px;
    background: var(--ps-accent);
    border: 3px solid var(--ps-surface);
}

.scan-last .scan-node[b-3acgbip2ic] {
    left: -1px;
    width: 17px;
    height: 17px;
    outline: 3px solid var(--ps-peach);
}

/* Une ligne par scan : puce de date mono, adresse en ellipse, lien carte */
.scan-main[b-3acgbip2ic] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.scan-when-val[b-3acgbip2ic] {
    flex: none;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ps-ink);
    background: var(--ps-well);
    border: 2px solid var(--ps-line);
    border-radius: 0.6rem;
    padding: 0.18rem 0.6rem;
}

.scan-last .scan-when-val[b-3acgbip2ic] {
    background: var(--ps-accent-soft);
    border-color: transparent;
}

.scan-where[b-3acgbip2ic] {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    color: var(--ps-muted);
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scan-map[b-3acgbip2ic] {
    font-size: 0.76rem;
    white-space: nowrap;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.scan-map-ico[b-3acgbip2ic] {
    width: 0.9rem;
    height: 0.9rem;
    flex: none;
}

.scan-more[b-3acgbip2ic] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ps-muted-soft);
    margin: 0.9rem 0 0;
    text-align: center;
}

.scan-empty[b-3acgbip2ic] {
    text-align: center;
    padding: 1.6rem 1rem;
    border-radius: 1.1rem;
    border: 3px dashed var(--ps-dash);
    color: var(--ps-muted-soft);
}

.scan-empty .ic[b-3acgbip2ic] {
    width: 2rem;
    height: 2rem;
    display: block;
    margin: 0 auto;
}

.scan-empty p[b-3acgbip2ic] {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    font-weight: 600;
}



/* ---- Alerte ---- */
.alert-box[b-3acgbip2ic] {
    border: 2px solid var(--ps-pink-ink);
    background: var(--ps-pink-soft);
    border-radius: 1rem;
    padding: 1rem 1.2rem;
}

.alert-box p[b-3acgbip2ic] {
    margin: 0 0 0.9rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ps-pink-ink);
}

/* Faits de la déclaration (2026-08-18) : empilés sous l'alerte, avant le bouton
   « Retrouvé ». Le premier — la durée — porte l'accent, les suivants ancrent. */
.alert-facts[b-3acgbip2ic] {
    display: grid;
    gap: 0.3rem;
    margin: -0.4rem 0 0.9rem;
}

.alert-fact[b-3acgbip2ic] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ps-pink-ink);
}

.alert-fact:first-child[b-3acgbip2ic] {
    font-weight: 800;
}

.alert-fact:not(:first-child)[b-3acgbip2ic] {
    opacity: 0.82;
}

/* ---- Mobile : pilules 2×2 détachées, zéro superposition ---- */
@media (max-width: 46rem) {
    /* Trois onglets depuis la suppression d'« Alerte » (2026-08-13) : une grille
       2×2 laisserait une case vide et un onglet seul sur la deuxième rangée.
       Trois colonnes gardent une rangée pleine. */
    .tabs[b-3acgbip2ic] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.4rem;
        padding: 0 0 0.8rem;
        overflow: visible;
    }

    .tab[b-3acgbip2ic] {
        border-radius: 9999px;
        margin-bottom: 0;
        padding: 0.55rem 0.6rem;
        justify-content: center;
    }

    .tab.on[b-3acgbip2ic] {
        padding-bottom: 0.55rem;
        margin-bottom: 0;
    }

    .tab.c1.on[b-3acgbip2ic] { box-shadow: inset 0 0 0 2.5px var(--ps-peach); }
    .tab.c2.on[b-3acgbip2ic] { box-shadow: inset 0 0 0 2.5px var(--ps-cyan); }
    .tab.c3.on[b-3acgbip2ic] { box-shadow: inset 0 0 0 2.5px var(--ps-accent); }

    .folder[b-3acgbip2ic] {
        padding: 1.2rem;
    }

    /* Les pilules ne chevauchent plus la farde : le bandeau reprend un peu
       d'air avant elle */
    .pet-band[b-3acgbip2ic] {
        padding-bottom: 0.9rem;
    }

    /* L'action passe sous les chips, alignée à gauche avec le texte.
       Le retrait latéral tombe à 0.4rem : la place manque en petite largeur. */
    .id-row[b-3acgbip2ic] {
        flex-wrap: wrap;
        gap: 1.1rem;
        padding: 0 0.4rem;
    }

    .folder-ph[b-3acgbip2ic] {
        width: 5.4rem;
        height: 5.4rem;
    }

    .folder-ph-empty[b-3acgbip2ic] {
        font-size: 2.3rem;
    }

    .id-name[b-3acgbip2ic] {
        font-size: 1.5rem;
    }

    .tabs[b-3acgbip2ic] {
        margin-top: 1.5rem;
    }

    .act-sticker[b-3acgbip2ic] {
        align-self: auto;
        margin: 0.2rem 0 0;
    }

    .thumbs[b-3acgbip2ic] {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid2[b-3acgbip2ic] {
        grid-template-columns: 1fr;
    }

    .civil[b-3acgbip2ic] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .offer-list[b-3acgbip2ic] {
        grid-template-columns: 1fr;
    }
}
/* Message de règle sous le champ nom (lettres uniquement) */
.id-err[b-3acgbip2ic] {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ps-pink-ink);
}

/* ── Précision & rétention des scans (2026-08-14) ── */
/* Une idée par ligne, puces marquées : la version paragraphe était illisible
   d'un coup d'œil (retour utilisateur du 2026-08-14). */
/* ── Modal de suppression S2 « rangées à pictos » (2026-08-14) ── */
.pdel-scrim[b-3acgbip2ic] {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(26, 34, 64, 0.55);
    display: grid;
    place-items: center;
    padding: 1rem;
}

.pdel-modal[b-3acgbip2ic] {
    width: min(24rem, 100%);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background: var(--ps-surface);
    border-radius: 1.4rem;
    padding: 1.2rem 1.2rem 1.3rem;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55);
}

.pdel-band[b-3acgbip2ic] {
    margin: -1.2rem -1.2rem 0.9rem;
    padding: 0.85rem 1.2rem;
    border-radius: 1.4rem 1.4rem 0 0;
    background: linear-gradient(160deg, var(--ps-pink-soft), var(--ps-peach-soft));
    color: var(--ps-pink-ink);
    font-weight: 800;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
}

.pdel-t[b-3acgbip2ic] {
    margin: 0;
    text-align: center;
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--ps-ink);
    text-wrap: balance;
}

.pdel-rows[b-3acgbip2ic] {
    margin-top: 0.9rem;
    display: flex;
    flex-direction: column;
}

.pdel-row[b-3acgbip2ic] {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--ps-line);
}

.pdel-row:last-child[b-3acgbip2ic] { border-bottom: none; }

.pdel-ic[b-3acgbip2ic] {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.6rem;
    background: var(--ps-pink-soft);
    color: var(--ps-pink-ink);
    display: grid;
    place-items: center;
    flex: none;
}

/* Le médaillon : seule conséquence PHYSIQUE et irrattrapable — gold, pas rose. */
.pdel-ic.gold[b-3acgbip2ic] {
    background: var(--ps-gold);
    color: var(--ps-gold-ink);
}

.pdel-ic svg[b-3acgbip2ic] { width: 1rem; height: 1rem; }

.pdel-row p[b-3acgbip2ic] {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--ps-ink);
}

.pdel-row small[b-3acgbip2ic] {
    display: block;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--ps-muted-soft);
}

.pdel-l[b-3acgbip2ic] {
    display: block;
    margin: 0.9rem 0 0.3rem;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ps-muted);
}

.pdel-pwd[b-3acgbip2ic] {
    width: 100%;
    border: 2px solid var(--ps-line);
    border-radius: 0.9rem;
    background: var(--ps-well);
    padding: 0.55rem 0.8rem;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--ps-ink);
}

.pdel-pwd:focus[b-3acgbip2ic] {
    outline: none;
    border-color: var(--ps-accent);
}

.pdel-err[b-3acgbip2ic] {
    margin: 0.4rem 0 0;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ps-danger);
}

/* Annuler à gauche, Supprimer à droite — règle maison. */
.pdel-btns[b-3acgbip2ic] {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
}

.pdel-cancel[b-3acgbip2ic] {
    flex: 1;
    border: 1.5px solid var(--ps-line);
    background: var(--ps-surface);
    color: var(--ps-muted);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 0.6rem 0.4rem;
    border-radius: 0.9rem;
    cursor: pointer;
}

.pdel-del[b-3acgbip2ic] {
    flex: 1.3;
    border: none;
    background: var(--ps-pink-ink);
    color: #ffffff;
    font-family: inherit;
    font-weight: 800;
    font-size: 0.82rem;
    padding: 0.6rem 0.4rem;
    border-radius: 0.9rem;
    cursor: pointer;
    box-shadow: 0 3px 0 rgba(140, 30, 55, 0.4);
}

.pdel-del:disabled[b-3acgbip2ic] {
    opacity: 0.45;
    cursor: default;
    box-shadow: none;
}

/* Œil afficher/masquer le mot de passe (2026-08-14) : logé DANS le champ. */
.pdel-pwd-wrap[b-3acgbip2ic] { position: relative; }

.pdel-pwd-wrap .pdel-pwd[b-3acgbip2ic] { padding-right: 2.6rem; }

.pdel-eye[b-3acgbip2ic] {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    color: var(--ps-muted-soft);
    display: grid;
    place-items: center;
    cursor: pointer;
    border-radius: 9999px;
}

.pdel-eye:hover[b-3acgbip2ic] { color: var(--ps-ink); }

.pdel-eye svg[b-3acgbip2ic] { width: 1.1rem; height: 1.1rem; }

/* Pastilles de traits (2026-08-14) */
/* ---- Caractère (T3 validée le 2026-08-14) : une carte crème, une ligne par
   groupe (★ pêche / ＋ cyan) séparées d'un pointillé, sans intitulé de section. */
.char-card[b-3acgbip2ic] {
    background: var(--ps-well);
    border-radius: 1.1rem;
    padding: 1.1rem 1.2rem;
}

.char-line[b-3acgbip2ic] {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.char-line + .char-line[b-3acgbip2ic] {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 2px dashed var(--ps-dash);
}

.char-ic[b-3acgbip2ic] {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.6rem;
    flex: none;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
}

.char-ic.b[b-3acgbip2ic] { background: var(--ps-peach-soft); }

.char-ic.h[b-3acgbip2ic] {
    background: var(--ps-cyan-soft);
    color: var(--ps-cyan-text);
}

.char-lbl[b-3acgbip2ic] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ps-muted-soft);
    margin: 0 0 0.4rem;
}

.char-pills[b-3acgbip2ic] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.char-pill[b-3acgbip2ic] {
    display: inline-block;
    border-radius: 9999px;
    padding: 0.22rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 800;
}

.char-pill.b[b-3acgbip2ic] {
    background: var(--ps-peach-soft);
    color: var(--ps-ink);
}

.char-pill.h[b-3acgbip2ic] {
    background: var(--ps-cyan-soft);
    color: var(--ps-cyan-text);
}

/* ---- Mode fiche démo (/admin/demo-pet, 2026-08-17) ---- */
.demo-acts[b-3acgbip2ic] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
}

.demo-preview[b-3acgbip2ic] {
    font-size: 0.8rem;
}

/* ⚠️ Ce bloc doit rester EN FIN DE FICHIER : à spécificité égale, la dernière
   règle gagne — placé avant les règles de base des scans, il serait écrasé
   (leçon du 2026-08-18 : la pastille de rétention restait visible sur iPhone).
   ── Scans en mobile (SD1 « puits par scan » + estompe R1f) : le rail et ses
   points disparaissent, chaque scan redevient une carte-puits, la puce de date
   redevient du texte mono nu, l'adresse passe sur 2 lignes max et le lien
   carte devient un bouton icône rond. L'opacité par palier (inline) reste. */
@media (max-width: 30rem) {
    .scan-map-lab[b-3acgbip2ic] {
        display: none;
    }

    .scan-rail[b-3acgbip2ic] {
        margin-left: 0;
    }

    .scan-rail[b-3acgbip2ic]::before,
    .scan-node[b-3acgbip2ic] {
        display: none;
    }

    .scan-line[b-3acgbip2ic] {
        border: 2px solid var(--ps-line);
        background: var(--ps-well);
        border-radius: 1rem;
        padding: 0.75rem 0.9rem;
        margin-top: 0.55rem;
        gap: 0.75rem;
    }

    .scan-main[b-3acgbip2ic] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }

    .scan-when-val[b-3acgbip2ic],
    .scan-last .scan-when-val[b-3acgbip2ic] {
        background: none;
        border: none;
        padding: 0;
    }

    .scan-where[b-3acgbip2ic] {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .scan-map[b-3acgbip2ic] {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 9999px;
        background: var(--ps-surface);
        border: 2px solid var(--ps-line);
        display: grid;
        place-items: center;
    }

    .scan-map-ico[b-3acgbip2ic] {
        width: 1rem;
        height: 1rem;
        color: var(--ps-accent-ink);
    }
}

/* ---- Onglet Confidentialité (2026-08-19) ----
   Quatrième couleur de la rangée : le rose, celui de l'alerte et du signalement,
   puisque c'est de ça qu'on règle l'accès. */
.tab.c4[b-3acgbip2ic] { background: var(--ps-pink-soft); color: var(--ps-pink-ink); }
.tab.c4.on[b-3acgbip2ic] { box-shadow: inset 0 3px 0 var(--ps-pink-ink); }

.pv-row[b-3acgbip2ic] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 0;
}

.pv-row:first-child[b-3acgbip2ic] { padding-top: 0; }
.pv-row + .pv-row[b-3acgbip2ic] { border-top: 2px solid var(--ps-line); }

/* Grisé et NON masqué quand le signalement est coupé : le faire disparaître fait
   sauter la hauteur du panneau, et l'on perd de vue que le réglage existe
   toujours et sera retrouvé tel quel en rouvrant. */
.pv-row.off[b-3acgbip2ic] {
    opacity: 0.45;
}

.pv-l[b-3acgbip2ic] { flex: 1; min-width: 0; }
.pv-r[b-3acgbip2ic] { flex: none; }

.pv-t[b-3acgbip2ic] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--ps-ink);
}

.pv-s[b-3acgbip2ic] {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    color: var(--ps-muted);
}

/* ---- Interrupteur ---- */
.pv-sw[b-3acgbip2ic] {
    position: relative;
    width: 3rem;
    height: 1.7rem;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    background: var(--ps-line);
    padding: 0;
}

.pv-sw[b-3acgbip2ic]::after {
    content: "";
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 9999px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: left 0.15s ease;
}

.pv-sw.on[b-3acgbip2ic] { background: var(--ps-accent); }
.pv-sw.on[b-3acgbip2ic]::after { left: 1.5rem; }

.pv-sw:disabled[b-3acgbip2ic] { cursor: default; opacity: 0.6; }

@media (prefers-reduced-motion: reduce) {
    .pv-sw[b-3acgbip2ic]::after { transition: none; }
}

/* ---- Curseur du plafond ---- */
.pv-cap[b-3acgbip2ic] {
    margin-top: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.pv-cap input[type="range"][b-3acgbip2ic] {
    flex: 1 1 12rem;
    min-width: 8rem;
    accent-color: var(--ps-accent);
}

.pv-scale[b-3acgbip2ic] {
    font-size: 0.7rem;
    color: var(--ps-muted-soft);
    font-variant-numeric: tabular-nums;
}

.pv-val[b-3acgbip2ic] {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 1.05rem;
    min-width: 1.6rem;
    text-align: center;
}

/* Tant que cette pastille est là, la fiche suit le réglage de la plateforme et
   bougera avec lui. Dès que le propriétaire touche au curseur, elle laisse place
   au lien de retour en arrière. */
.pv-site[b-3acgbip2ic] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ps-accent-ink);
    background: var(--ps-accent-soft);
    border-radius: 9999px;
    padding: 0.15rem 0.6rem;
}

.pv-reset[b-3acgbip2ic] {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--ps-accent-ink);
    cursor: pointer;
    text-decoration: underline;
}

.pv-reset:disabled[b-3acgbip2ic] { opacity: 0.6; cursor: default; }

/* ---- Avertissement permanent quand le signalement est coupé ---- */
.pv-warn[b-3acgbip2ic] {
    margin-top: 1rem;
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    background: var(--ps-pink-soft);
    color: var(--ps-pink-ink);
    border-radius: 0.9rem;
    padding: 0.7rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.pv-warn[b-3acgbip2ic]  .ic {
    width: 1rem;
    height: 1rem;
    flex: none;
    margin-top: 0.15rem;
}

/* ---- Ce qui viendra avec la messagerie ---- */
.pv-later[b-3acgbip2ic] {
    margin-top: 1.1rem;
    padding: 1rem;
    border: 2px dashed var(--ps-line);
    border-radius: 1rem;
    color: var(--ps-muted-soft);
}

.pv-later p[b-3acgbip2ic] {
    margin: 0;
    font-size: 0.82rem;
}

.pv-soon[b-3acgbip2ic] {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    background: var(--ps-line);
    color: var(--ps-muted);
    border-radius: 9999px;
    padding: 0.1rem 0.5rem;
    margin-bottom: 0.4rem;
}

/* Pied du panneau Confidentialité (2026-08-19) : réinitialiser à gauche, enregistrer
   à droite — règle maison des formulaires. Les réglages ne partent qu'ici : Pet/Update
   est une mise à jour complète, un appel par mouvement de curseur coûtait bien trop
   cher pour quelqu'un qui cherche simplement sa valeur. */
.pv-foot[b-3acgbip2ic] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 2px solid var(--ps-line);
}

.pv-foot-r[b-3acgbip2ic] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.pv-default[b-3acgbip2ic] {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ps-muted);
    cursor: pointer;
    text-decoration: underline;
}

.pv-default:hover:not(:disabled)[b-3acgbip2ic] {
    color: var(--ps-ink);
}

.pv-default:disabled[b-3acgbip2ic] {
    opacity: 0.45;
    cursor: default;
    text-decoration: none;
}

/* La mention accompagne le bouton actif : elle dit POURQUOI il s'est allumé. */
.pv-unsaved[b-3acgbip2ic] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ps-pink-ink);
}

/* Avertissement de restriction générale (2026-08-19) — version longue de la
   pastille des vignettes : ici on explique et on donne la sortie, parce que c'est
   la page où le propriétaire vient comprendre pourquoi sa fiche ne se comporte pas
   normalement. Rose : tout ce qui restreint porte cette couleur. */
.pet-restrict-note[b-3acgbip2ic] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0 0 0.9rem;
    padding: 0.65rem 0.8rem;
    border-radius: 0.9rem;
    background: var(--ps-pink-soft);
    color: var(--ps-pink-ink);
    font-size: 0.8rem;
}

.pet-restrict-note svg[b-3acgbip2ic] {
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
    margin-top: 0.1rem;
}

.pet-restrict-note b[b-3acgbip2ic] {
    display: block;
    color: var(--ps-ink);
}

.pet-restrict-note a[b-3acgbip2ic] {
    display: inline-block;
    margin-top: 0.25rem;
    font-weight: 800;
    color: var(--ps-cyan-text);
    text-decoration: none;
}

.pet-restrict-note a:hover[b-3acgbip2ic] {
    text-decoration: underline;
}

/* Vignettes des photos à supprimer, dans la modale .ps-dialog (2026-09-15) : centrées
   sous le titre, la rangée reste celle de .modal-prev. */
.dlg-prev[b-3acgbip2ic] {
    justify-content: center;
}
/* _content/PawSeekrWebApp/Pages/Pets/PetList.razor.rz.scp.css */
/* Liste des animaux — bandeau « jumeau » de la liste des articles (piste A validée
   le 2026-08-12). Mêmes .list-band/.band-* qu'ArticleList.razor.css ; tokens --ps-*
   partout, les deux thèmes suivent. */

.list-band[b-ds2dk3npcz] {
    position: relative;
    overflow: hidden;
    margin-top: -1rem;
    padding: 3.2rem 0 1.6rem;
    background:
        radial-gradient(24rem 10rem at 97% -4.5rem, var(--ps-accent-soft), transparent 65%),
        linear-gradient(180deg, var(--ps-band-top) 0, var(--ps-bg) 7rem);
}

.band-inner[b-ds2dk3npcz] {
    max-width: var(--ps-page-w); /* mesure commune des pages utilisateur (2026-09-18) */
    margin: 0 auto;
    padding: 0 1rem;
}

/* Identité de la page : une seule pile, un seul écart (2026-08-19). Les trois
   lignes portaient chacune un `mt-1` de 0,25 rem — trop serré, et un réglage à
   reprendre à chaque ligne ajoutée. 0,55 rem est l'écart déjà validé sur
   l'en-tête de /q/{code} : le site n'a ainsi qu'un seul rythme vertical. */
.band-id[b-ds2dk3npcz] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}



.band-head[b-ds2dk3npcz] {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Ajouter promu en bouton « sticker » primaire (marine en clair, pêche en sombre) ;
   la variante ghost signale la limite MaxPets atteinte, sans être cliquable. */
.band-add[b-ds2dk3npcz] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--ps-btn);
    color: var(--ps-btn-ink);
    border-radius: 9999px;
    padding: 0.55rem 1.1rem;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
}

.band-add.ghost[b-ds2dk3npcz] {
    background: var(--ps-surface);
    color: var(--ps-muted);
}

/* Chips d'état de la meute — pas les .ps-chip de filtre : ici rien n'est un bouton,
   pas de curseur pointeur ni de survol accent (sauf la chip alerte, qui est un lien
   vers le profil quand un seul animal est perdu). */
.band-chips[b-ds2dk3npcz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.band-chip[b-ds2dk3npcz] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 2.2rem;
    padding: 0 0.9rem;
    border: 2px solid var(--ps-line);
    border-radius: 9999px;
    background: var(--ps-surface);
    color: var(--ps-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.band-chip.alert[b-ds2dk3npcz] {
    background: var(--ps-pink-soft);
    color: var(--ps-pink-ink);
    border-color: transparent;
}
/* Depuis quand l'animal est perdu (2026-08-18) : sous le nom, dans le corps de la
   carte. La durée porte le rose de l'alerte, la date suit en retrait — même
   hiérarchie que sur /lost-pets. */
.lost-line[b-ds2dk3npcz] {
    margin: 0.55rem 0 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.8rem;
}

.lost-since[b-ds2dk3npcz] {
    font-weight: 800;
    color: var(--ps-pink-ink);
}

.lost-date[b-ds2dk3npcz] {
    font-size: 0.75rem;
    color: var(--ps-muted-soft);
}

/* Pastille de restriction générale (2026-08-19) : rose comme tout ce qui restreint,
   posée en haut à DROITE pour ne pas se disputer le coin gauche avec le badge
   « perdu » — les deux peuvent coexister sur la même fiche. */
.pet-restrict[b-ds2dk3npcz] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.18rem 0.5rem;
    border-radius: 9999px;
    background: var(--ps-pink-soft);
    color: var(--ps-pink-ink);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pet-restrict svg[b-ds2dk3npcz] {
    width: 0.8rem;
    height: 0.8rem;
    flex: none;
}


/* ═══ Fiche sans photo (2026-08-24) — la création atomique a fermé la porte, mais des
   fiches d'avant restent, et d'autres clients envoient encore leurs photos à part.
   Une patte muette laissait croire à une image cassée ; on nomme l'état et on dit quoi
   faire. Le fond reprend la trame pointillée des emplacements vides de l'assistant :
   « il manque quelque chose ici » se lit sans un mot. ═══ */
.pet-noimg[b-ds2dk3npcz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    height: 100%;
    padding: 0.9rem;
    text-align: center;
    border: 2px dashed var(--ps-dash);
    border-radius: 1rem;
    color: var(--ps-muted-soft);
}

.pet-noimg[b-ds2dk3npcz]  svg {
    width: 1.9rem;
    height: 1.9rem;
    opacity: 0.5;
}

.pet-noimg .t[b-ds2dk3npcz] {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--ps-ink);
}

.pet-noimg .h[b-ds2dk3npcz] {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
}
/* _content/PawSeekrWebApp/Pages/Pets/PetRegister.razor.rz.scp.css */
/* Wizard « studio » (design validé le 2026-08-12, ronde 3) : rail d'étapes
   vertical à gauche, carte à droite ; en mobile le rail devient une barre
   compacte de 4 pas. Tokens --ps-* partout, les deux thèmes suivent.
   Remplace l'ancien CSS pré-Récré (indigo/gris en dur). */

.wiz[b-eqmp1dv0r5] {
    max-width: 56rem;
    margin: 0 auto;
    padding: 2.5rem 1.2rem;
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: 1.6rem;
    align-items: start;
}

.wiz-kick[b-eqmp1dv0r5] {
    padding: 0 0.8rem 0.5rem;
}

/* ---- Rail : mêmes états que partout — pêche = courant, teal = fait,
   pointillé = à venir (ou sauté, cas du portrait sans photo) ---- */
.wiz-rail[b-eqmp1dv0r5] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

/* Les pas sont des <button> : le rail navigue vers les étapes déjà atteintes
   (classe .nav) et reste inerte ailleurs — le curseur dit la différence. */
.wiz-step[b-eqmp1dv0r5] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.65rem 0.8rem;
    border-radius: 1rem;
    border: none;
    background: transparent;
    font-family: inherit;
    text-align: left;
    width: 100%;
    cursor: default;
    box-sizing: border-box;
}

.wiz-step.nav[b-eqmp1dv0r5] {
    cursor: pointer;
}

.wiz-step.nav:hover[b-eqmp1dv0r5] {
    background: var(--ps-well);
}

.wiz-step .n[b-eqmp1dv0r5] {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    font-size: 0.78rem;
    font-weight: 800;
    background: var(--ps-surface);
    border: 2px dashed var(--ps-dash);
    color: var(--ps-muted-soft);
    box-sizing: border-box;
}

.wiz-step.current[b-eqmp1dv0r5] {
    background: var(--ps-surface);
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
}

.wiz-step.current .n[b-eqmp1dv0r5] {
    background: var(--ps-peach);
    border: 2px solid var(--ps-peach);
    color: var(--ps-on-peach);
}

.wiz-step.done .n[b-eqmp1dv0r5] {
    background: var(--ps-accent);
    border: 2px solid var(--ps-accent);
    color: #ffffff;
}

.wiz-step .t[b-eqmp1dv0r5] {
    font-size: 0.83rem;
    font-weight: 800;
    color: var(--ps-muted-soft);
}

.wiz-step.current .t[b-eqmp1dv0r5] { color: var(--ps-ink); }
.wiz-step.done .t[b-eqmp1dv0r5] { color: var(--ps-accent-ink); }

.wiz-step .d[b-eqmp1dv0r5] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ps-muted-soft);
}

/* ---- Carte ---- */
/* Le padding vit dans une variable : le pied de carte s'étire bord à bord avec
   des marges négatives qui doivent suivre la valeur mobile. */
.wiz-card[b-eqmp1dv0r5] {
    --card-pad: 2rem;
    padding: var(--card-pad);
    min-width: 0;
}

/* Tête de carte : le titre à gauche, la porte de sortie à droite — Annuler
   n'est pas un pas de navigation, il quitte la barre du bas. */
.wiz-head[b-eqmp1dv0r5] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.wiz-exit[b-eqmp1dv0r5] {
    font-size: 0.82rem;
    white-space: nowrap;
}

.wiz-h[b-eqmp1dv0r5] {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ps-ink);
    margin: 0;
}

/* ---- Formulaire : rythme vertical par gap, hauteur unique, la description
   respire (9 rem) ---- */
.wiz-form[b-eqmp1dv0r5] {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    margin-top: 1.15rem;
}

.wiz-field[b-eqmp1dv0r5] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.wiz-grid2[b-eqmp1dv0r5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.15rem 1rem;
}

.wiz-form .ps-input[b-eqmp1dv0r5],
.wiz-form .ps-select[b-eqmp1dv0r5] {
    height: 2.9rem;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
}

.wiz-form .ps-input[type="date"][b-eqmp1dv0r5] {
    -webkit-appearance: none;
    appearance: none;
}

.wiz-form .wiz-area[b-eqmp1dv0r5] {
    height: auto;
    min-height: 9rem;
    padding: 0.7rem 0.9rem;
    line-height: 1.5;
    resize: vertical;
}

/* ---- Pied de carte : la navigation vit dans un bandeau dédié, bord à bord,
   même langage que le pied du tiroir de filtres des articles. Précédent à
   gauche, Continuer/Terminer à droite, le centre accueille sous-texte ou
   spinner. ---- */
.wiz-foot[b-eqmp1dv0r5] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 2rem calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad));
    padding: 1rem var(--card-pad) 1.1rem;
    border-top: 2px solid var(--ps-line);
    background: var(--ps-well);
    border-radius: 0 0 1.75rem 1.75rem;
}

.wiz-foot .foot-mid[b-eqmp1dv0r5] {
    flex: 1;
    text-align: center;
}

.wiz-foot .foot-right[b-eqmp1dv0r5] {
    margin-left: auto;
}

.wiz-foot .ps-btn:disabled[b-eqmp1dv0r5] {
    box-shadow: none;
}

.gate-hint[b-eqmp1dv0r5] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ps-muted-soft);
}

.wiz-err[b-eqmp1dv0r5] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ps-pink-ink);
}

/* ---- Étape 2 : zone de dépôt ---- */
/* Grande quand elle est vide, barre compacte dès la première photo, estompée
   à 5/5. L'InputFile invisible couvre toute la zone : clic n'importe où ouvre
   le sélecteur et le glisser-déposer natif tombe dessus. */
.dropzone[b-eqmp1dv0r5] {
    position: relative;
    margin-top: 1.3rem;
    border: 3px dashed var(--ps-dash);
    border-radius: 1.4rem;
    padding: 2rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    color: var(--ps-muted-soft);
    transition: padding 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .dropzone[b-eqmp1dv0r5] { transition: none; }
}

/* L'input du composant InputFile ne porte pas l'attribut de scope : ::deep */
.dropzone[b-eqmp1dv0r5]  .dz-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.dropzone[b-eqmp1dv0r5]  .dz-input:disabled {
    cursor: default;
}

.dz-ico[b-eqmp1dv0r5] {
    font-size: 2.2rem;
}

.dz-hint[b-eqmp1dv0r5] {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0;
}

/* Le bouton est décoratif : le clic traverse vers l'input invisible */
.dz-btn[b-eqmp1dv0r5] {
    pointer-events: none;
}

.dz-btn-sm[b-eqmp1dv0r5] {
    padding: 0.55rem 1.1rem;
    font-size: 0.82rem;
}

.dz-sub[b-eqmp1dv0r5] {
    font-size: 0.72rem;
    font-weight: 600;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.dropzone.compact[b-eqmp1dv0r5] {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    padding: 0.8rem 1.1rem;
    gap: 0.8rem;
}

.dropzone.compact .dz-ico[b-eqmp1dv0r5] {
    font-size: 1.4rem;
}

.dropzone.compact .dz-hint[b-eqmp1dv0r5] {
    display: none;
}

.dropzone.full[b-eqmp1dv0r5] {
    opacity: 0.55;
}

.dz-thumbs[b-eqmp1dv0r5] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.9rem;
    margin-top: 1.3rem;
}

.dz-thumb[b-eqmp1dv0r5] {
    position: relative;
    aspect-ratio: 1;
    border-radius: 1rem;
}

.dz-thumb img[b-eqmp1dv0r5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
    border: 2px solid var(--ps-line);
    box-sizing: border-box;
    display: block;
}

.dz-rm[b-eqmp1dv0r5] {
    position: absolute;
    right: -0.45rem;
    top: -0.45rem;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-weight: 800;
    font-size: 0.8rem;
    font-family: inherit;
    background: var(--ps-pink-soft);
    color: var(--ps-pink-ink);
    box-shadow: 0 2px 0 var(--ps-btn-shadow);
    display: grid;
    place-items: center;
    line-height: 1;
}

.dz-rm:hover:not(:disabled)[b-eqmp1dv0r5] {
    background: var(--ps-pink-ink);
    color: #ffffff;
}

/* ---- Étape 3 : choix du portrait ---- */
/* Sélection par bordure + halo (pas les rings Tailwind : leur ombre déborde
   sur les vignettes voisines et sur le bouton). Grand écart sous la grille
   pour que Continuer respire. */
.portrait-grid[b-eqmp1dv0r5] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 1.25rem 0 2.25rem;
}

.portrait-pick[b-eqmp1dv0r5] {
    padding: 0;
    aspect-ratio: 1;
    border: 3px solid transparent;
    border-radius: 1.1rem;
    overflow: hidden;
    cursor: pointer;
    background: var(--ps-well);
}

.portrait-pick img[b-eqmp1dv0r5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.portrait-pick:hover[b-eqmp1dv0r5] {
    border-color: var(--ps-accent-soft);
}

.portrait-pick.on[b-eqmp1dv0r5] {
    border-color: var(--ps-accent);
    box-shadow: 0 0 0 4px var(--ps-accent-soft);
}

/* ---- Étape 4 : récapitulatif ---- */
.recap-head[b-eqmp1dv0r5] {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.recap-ph[b-eqmp1dv0r5] {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    flex: none;
    overflow: hidden;
    background: var(--ps-peach-soft);
    display: grid;
    place-items: center;
    font-size: 2.4rem;
    border: 3px solid var(--ps-surface);
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
}

.recap-ph img[b-eqmp1dv0r5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recap-name[b-eqmp1dv0r5] {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--ps-ink);
    margin: 0;
}

.recap-breed[b-eqmp1dv0r5] {
    margin: 0.2rem 0 0;
}

.recap-rows[b-eqmp1dv0r5] {
    margin: 1.4rem 0 0;
    display: flex;
    flex-direction: column;
}

.recap-row[b-eqmp1dv0r5] {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 1rem;
    padding: 0.7rem 0;
    border-top: 2px solid var(--ps-line);
}

/* dt et dd n'ont ni la même taille ni la même hauteur de ligne : sans boîte de
   ligne commune, leurs premières lignes paraissent décalées. On fixe les deux
   à 1.35rem (= 0.9rem × 1.5 du contenu) pour qu'elles s'alignent. */
.recap-row dt[b-eqmp1dv0r5] {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--ps-muted);
    margin: 0;
    line-height: 1.35rem;
}

.recap-row dd[b-eqmp1dv0r5] {
    font-size: 0.9rem;
    color: var(--ps-ink);
    margin: 0;
    line-height: 1.35rem;
    overflow-wrap: anywhere;
}

.recap-thumbs[b-eqmp1dv0r5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.recap-thumb[b-eqmp1dv0r5] {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 0.9rem;
    overflow: visible;
    position: relative;
    border: 2px solid var(--ps-line);
}

.recap-thumb img[b-eqmp1dv0r5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.75rem;
}

.recap-thumb.star[b-eqmp1dv0r5] {
    border-color: var(--ps-accent);
}

/* Étoile en masque SVG (même tracé que ic-star d'IconDefs) : un pseudo-élément ne peut
   pas porter de <use>, et le glyphe ★ dépendait de la police. */
.recap-thumb.star[b-eqmp1dv0r5]::after {
    content: "";
    position: absolute;
    right: -0.4rem;
    top: -0.5rem;
    width: 0.95rem;
    height: 0.95rem;
    background: var(--ps-accent-ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.85 5.95 6.55.85-4.8 4.5 1.25 6.5L12 17.4 6.15 20.6l1.25-6.5L2.6 9.6l6.55-.85z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.85 5.95 6.55.85-4.8 4.5 1.25 6.5L12 17.4 6.15 20.6l1.25-6.5L2.6 9.6l6.55-.85z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Mobile : rail en barre compacte de 4 pas, sous-titres masqués ---- */
@media (max-width: 46rem) {
    .wiz[b-eqmp1dv0r5] {
        grid-template-columns: 1fr;
        gap: 1.1rem;
        padding: 1.8rem 1rem;
    }

    /* Le kicker deviendrait un 5e item de la barre horizontale : masqué */
    .wiz-kick[b-eqmp1dv0r5] {
        display: none;
    }

    .wiz-rail[b-eqmp1dv0r5] {
        flex-direction: row;
        align-items: stretch;
        gap: 0.3rem;
    }

    .wiz-step[b-eqmp1dv0r5] {
        flex: 1;
        flex-direction: column;
        align-items: center;
        gap: 0.35rem;
        padding: 0.55rem 0.2rem;
        text-align: center;
    }

    .wiz-step .d[b-eqmp1dv0r5] {
        display: none;
    }

    .wiz-step .t[b-eqmp1dv0r5] {
        font-size: 0.68rem;
    }

    .wiz-grid2[b-eqmp1dv0r5] {
        grid-template-columns: 1fr;
    }

    .wiz-card[b-eqmp1dv0r5] {
        --card-pad: 1.4rem;
    }

    .wiz-form .wiz-area[b-eqmp1dv0r5] {
        min-height: 7rem;
    }

    .recap-row[b-eqmp1dv0r5] {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .dz-thumbs[b-eqmp1dv0r5] {
        grid-template-columns: repeat(3, 1fr);
    }

    .portrait-grid[b-eqmp1dv0r5] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.8rem;
    }
}
/* Pastilles de traits du récapitulatif (R2, 2026-08-14) */
.recap-pills[b-eqmp1dv0r5] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.recap-pill[b-eqmp1dv0r5] {
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
    border-radius: 9999px;
    padding: 0.16rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 800;
}

/* Groupe vide : l'absence est un CHOIX visible, pas un oubli muet. */
.recap-pill.na[b-eqmp1dv0r5] {
    background: var(--ps-well);
    border: 1.5px dashed var(--ps-line);
    color: var(--ps-muted-soft);
}

/* ═══ Les deux angles (2026-08-24) — côte à côte sur ordinateur, empilés dès qu'il n'y
   a plus la place. Un seul écart, celui de la grille. ═══ */
.ph-slots[b-eqmp1dv0r5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.3rem;
}

@media (max-width: 30rem) {
    .ph-slots[b-eqmp1dv0r5] { grid-template-columns: 1fr; }
}

/* Les photos LIBRES : une bande discrète, pas un second appel à l'action — c'est un
   bonus, et le regard doit rester sur les deux angles. */
.ph-extra[b-eqmp1dv0r5] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: 0.7rem 0.9rem;
    border: 2px dashed var(--ps-dash);
    border-radius: 1rem;
    background: var(--ps-well);
}

.ph-extra:hover:not(.full)[b-eqmp1dv0r5] { border-color: var(--ps-accent); }

.ph-extra.full[b-eqmp1dv0r5] {
    opacity: 0.55;
}

.ph-extra .lbl[b-eqmp1dv0r5] {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--ps-ink);
}

.ph-extra .sub[b-eqmp1dv0r5] {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--ps-muted-soft);
}

/* La raison, dite UNE fois : une consigne, pas un rappel à l'ordre — d'où le teal de
   l'information et non la pêche de l'avertissement. */
.ph-why[b-eqmp1dv0r5] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 1.1rem 0 0;
    padding: 0.7rem 0.85rem;
    border-radius: 0.9rem;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
}

.ph-why svg[b-eqmp1dv0r5] {
    width: 1.05rem;
    height: 1.05rem;
    flex: none;
    margin-top: 0.1rem;
}
/* _content/PawSeekrWebApp/Pages/PetScan.razor.rz.scp.css */
/* Vue publique du scan — M2 « miroir des autres vues » + en-tête V-A « nom
   d'abord » (validés le 2026-08-14). Tout aux tokens --ps-*.

   Mobile-first : bandeau marque compact, en-tête (nom, sous-titre, badge),
   photo de PROFIL encadrée, vignettes, message → identité → action. PLEINE
   LARGEUR jusqu'à la bascule desktop (48 rem) — l'ancien plafond intermédiaire
   à 30 rem laissait des bandes latérales sur les grands téléphones.
   Desktop : G1 deux colonnes — photo à gauche, en-tête + faits à droite. */

.scan-page[b-lyv8musb3c] {
    display: flex;
    flex-direction: column;
    background: var(--ps-bg);
    min-height: 100%;
    flex: 1 1 auto;
}

.scan-wrap[b-lyv8musb3c] {
    width: 100%;
    padding-bottom: 2.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

/* ── Bandeau marque : visible à TOUTES les tailles (un seul endroit pour la
   marque et les pilules de langue). Compact en mobile, ample en desktop. ── */
.scan-band[b-lyv8musb3c] {
    position: relative;
    overflow: hidden;
    padding: 0.75rem 1rem 0.85rem;
    background:
        radial-gradient(24rem 10rem at 97% -30%, var(--ps-accent-soft), transparent 65%),
        linear-gradient(180deg, var(--ps-band-top) 0%, var(--ps-bg) 100%);
}

/* Pattes décoratives, dimensionnées AU bandeau : compactes sur le bandeau
   compact mobile (maquette M2), pleine taille sur le bandeau desktop. */


.scan-band-in[b-lyv8musb3c] {
    position: relative;
    z-index: 1;
    max-width: 58rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.scan-brand[b-lyv8musb3c] {
    display: inline-block;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--ps-ink);
    text-decoration: none;
}

/* La patte du mot « Pawseno » (2026-10-12) : SVG à la taille du texte, teal de la marque. */
.scan-brand[b-lyv8musb3c]  .scan-brand-paw {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    color: var(--ps-accent);
}

.scan-brand small[b-lyv8musb3c] {
    display: block;
    font-weight: 700;
    font-size: 0.66rem;
    color: var(--ps-muted);
}

.scan-brand:hover small[b-lyv8musb3c] { color: var(--ps-ink); }

/* ── En-tête V-A : le nom d'abord, l'état civil en sous-titre calme ──

   Rythme régulier (2026-08-18, validé) : UN seul écart, répété entre chacune des
   cinq lignes. Écrit en `gap` de colonne flex et non en marges — la fusion des
   marges adjacentes et le remplissage de la pastille rendaient l'égalité
   approximative, et c'est ce qui donnait l'impression de lignes mal réparties.

   `--scan-gutter` est le retrait de l'en-tête : les cartes du dessous commencent
   au bord de la colonne, leur TEXTE est repoussé par leur remplissage intérieur.
   Sans retrait, l'en-tête était le seul élément posé à gauche de cet axe et
   paraissait en porte-à-faux. 0,55 rem le décolle du bord sans le ranger dans la
   colonne des cartes. Même valeur que l'écart vertical : l'en-tête respire pareil
   dans les deux directions. */
.scan-head[b-lyv8musb3c] {
    --scan-gutter: 0.55rem;
    padding: 0.2rem 1rem 0 calc(1rem + var(--scan-gutter));
    display: flex;
    flex-direction: column;
    /* Sinon la pastille s'étirerait sur toute la largeur de la colonne. */
    align-items: flex-start;
    gap: var(--scan-gutter);
}

.scan-head-name[b-lyv8musb3c] {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--ps-ink);
}

.scan-head-sub[b-lyv8musb3c] {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ps-muted);
}

/* Seule ligne de l'en-tête à porter un remplissage intérieur : sans correction,
   son texte partirait 0,7 rem à droite de l'axe des autres lignes et décrocherait
   visiblement. La marge le ramène à 0,40 rem — sous le seuil où l'œil le
   remarque — tout en laissant la pastille à 0,25 rem du bord de la colonne : elle
   reste posée DANS l'en-tête, elle ne vient pas s'aligner sur les cartes.

   Valeur en clair et NON dérivée de --scan-gutter (2026-08-18, réglage choisi à
   l'œil) : un futur changement de gouttière ne doit pas la faire bouger seule. */
.scan-lost[b-lyv8musb3c] {
    display: inline-block;
    background: var(--ps-pink-soft);
    color: var(--ps-pink-ink);
    border-radius: 9999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.66rem;
    font-weight: 800;
    margin-left: -0.3rem;
}

/* Date de déclaration (2026-08-18) : sous la pastille et en retrait — la durée
   se lit en premier, la date confirme. Écart porté par le `gap` de .scan-head. */
.scan-date[b-lyv8musb3c] {
    margin: 0;
    font-size: 0.72rem;
    color: var(--ps-muted);
}

/* ── Photo de profil encadrée + vignettes ── */
.scan-photos[b-lyv8musb3c] {
    padding: 0 1rem;
}

.scan-hero[b-lyv8musb3c] {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 1.1rem;
    overflow: hidden;
    border: 2px solid var(--ps-line);
    background: var(--ps-well);
}

.scan-hero img[b-lyv8musb3c] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Sans photo : bande teintée aux tokens, patte en filigrane. */
.scan-hero.plain[b-lyv8musb3c] {
    background:
        radial-gradient(20rem 10rem at 80% -20%, var(--ps-accent-soft), transparent 70%),
        var(--ps-peach-soft);
}

.scan-paw[b-lyv8musb3c] {
    position: absolute;
    color: var(--ps-ink);
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 3rem;
    opacity: 0.35;
    user-select: none;
    pointer-events: none;
}

.scan-thumbs[b-lyv8musb3c] {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    margin-top: 0.55rem;
    padding-bottom: 0.2rem;
}

.scan-thumb[b-lyv8musb3c] {
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 0.7rem;
    overflow: hidden;
    border: 2px solid var(--ps-line);
    padding: 0;
    background: var(--ps-well);
    cursor: pointer;
    flex: none;
}

.scan-thumb.on[b-lyv8musb3c] { border-color: var(--ps-accent); }

.scan-thumb img[b-lyv8musb3c] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Corps : message → identité → action (rythme P2, comme partout) ── */
.scan-body[b-lyv8musb3c] {
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.scan-msg[b-lyv8musb3c] {
    background: var(--ps-surface);
    border: 2px solid var(--ps-line);
    border-left: 4px solid var(--ps-peach);
    border-radius: 1.1rem;
    padding: 0.9rem 1rem;
}

.scan-msg-l[b-lyv8musb3c] {
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ps-muted-soft);
    margin-bottom: 0.25rem;
}

.scan-msg p[b-lyv8musb3c] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ps-ink);
}

.scan-id[b-lyv8musb3c] {
    background: var(--ps-surface);
    border: 2px solid var(--ps-line);
    border-radius: 1.1rem;
    padding: 0.55rem 1.15rem;
}

.scan-row[b-lyv8musb3c] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 0;
}

.scan-row + .scan-row[b-lyv8musb3c] { border-top: 1px solid var(--ps-line); }

.scan-ic[b-lyv8musb3c] {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.62rem;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
    display: grid;
    place-items: center;
    flex: none;
    font-size: 0.85rem;
    font-weight: 800;
}

.scan-l[b-lyv8musb3c] {
    margin: 0 0 0.15rem;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ps-muted-soft);
}

.scan-v[b-lyv8musb3c] {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--ps-ink);
    /* La description conserve ses retours à la ligne (saisie textarea, fiche
       démo) ; sans effet sur les autres rangées, qui n'en contiennent pas. */
    white-space: pre-line;
}

.scan-cta[b-lyv8musb3c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    border: none;
    border-radius: 9999px;
    padding: 0.8rem 1rem;
    background: var(--ps-btn);
    color: var(--ps-btn-ink);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
}

.scan-cta:disabled[b-lyv8musb3c] { opacity: 0.6; cursor: default; }

/* La raison de l'état du bouton, dessous (2026-10-12) : deux lignes courtes, centrées,
   couleur discrète ; les heures et le compte à rebours en gras. `renew` = nouvel épisode
   de perte (pastille rose) ; `cap` = plafond du jour, en ambre, bouton fermé. */
.scan-why[b-lyv8musb3c] {
    margin: -0.25rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--ps-muted);
}
.scan-why b[b-lyv8musb3c] { color: var(--ps-ink); font-weight: 800; }
.scan-why.renew[b-lyv8musb3c] { color: var(--ps-ink); }
.scan-why.renew .tag[b-lyv8musb3c] {
    align-self: center;
    background: var(--ps-pink-soft);
    color: var(--ps-pink-ink);
    border-radius: 9999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 800;
}
.scan-why.cap[b-lyv8musb3c] { color: var(--ps-warn-ink, #8a5a00); }
.scan-why.cap b[b-lyv8musb3c] { color: inherit; }

.scan-cta .ic[b-lyv8musb3c] { width: 1.1rem; height: 1.1rem; flex: none; }

/* CTA confirmé après envoi : teal plein — un état, plus une action. */
.scan-cta.sent[b-lyv8musb3c] {
    background: var(--ps-accent);
    color: #ffffff;
    box-shadow: none;
    opacity: 1;
    cursor: default;
}

.scan-tag[b-lyv8musb3c] {
    margin: 0;
    text-align: center;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.62rem;
    color: var(--ps-muted-soft);
}

/* Le rappel médaillon vit dans l'en-tête en desktop, en pied en mobile —
   un seul des deux visible à la fois. */
.scan-tag-head[b-lyv8musb3c] { display: none; }

/* ── Pilules de langue locales : boutons du circuit, pas de rechargement ── */
.scan-langpills[b-lyv8musb3c] {
    display: inline-flex;
    gap: 0.3rem;
    align-items: center;
}

.scan-lang[b-lyv8musb3c] {
    border: 2px solid var(--ps-line);
    background: var(--ps-surface);
    color: var(--ps-ink);
    border-radius: 9999px;
    padding: 0.22rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
}

.scan-lang:hover[b-lyv8musb3c] { border-color: var(--ps-accent); }

.scan-lang.on[b-lyv8musb3c] {
    background: var(--ps-btn);
    border-color: var(--ps-btn);
    color: var(--ps-btn-ink);
}

/* ── Desktop : G1 deux colonnes (photo | en-tête + faits), bandeau ample ── */
@media (min-width: 48rem) {
    .scan-band[b-lyv8musb3c] { padding: 2.4rem 1.5rem 3.2rem; }

    /* Pattes pleine taille, identiques aux autres bandeaux desktop — le bandeau
       prend la hauteur qu'il faut pour ne jamais les rogner. */


    .scan-brand[b-lyv8musb3c] { font-size: 0.98rem; }
    .scan-brand small[b-lyv8musb3c] { font-size: 0.7rem; }

    .scan-wrap[b-lyv8musb3c] {
        max-width: 58rem;
        margin: 1.4rem auto 0;
        padding: 0 1.5rem 2.6rem;
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        grid-template-areas:
            "photos head"
            "photos body";
        align-items: start;
        gap: 0.9rem 1.5rem;
        width: 100%;
    }

    .scan-head[b-lyv8musb3c]   { grid-area: head; padding: 0 0 0 var(--scan-gutter); }
    .scan-photos[b-lyv8musb3c] { grid-area: photos; padding: 0; }
    .scan-body[b-lyv8musb3c]   { grid-area: body; padding: 0; }

    .scan-head-name[b-lyv8musb3c] { font-size: 2.4rem; }

    .scan-hero[b-lyv8musb3c] { border-radius: 1.2rem; }

    .scan-cta[b-lyv8musb3c] {
        width: auto;
        align-self: flex-start;
        padding: 0.75rem 1.7rem;
    }

    .scan-tag[b-lyv8musb3c] { text-align: left; }
    /* Écart porté par le `gap` de .scan-head, comme les autres lignes. */
    .scan-tag-head[b-lyv8musb3c] { display: block; margin-top: 0; }
    .scan-tag-foot[b-lyv8musb3c] { display: none; }
}

/* ── Modal d'accueil ── */
.scan-scrim[b-lyv8musb3c] {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(26, 34, 64, 0.55);
    display: grid;
    place-items: center;
    padding: 1rem;
}

.scan-modal[b-lyv8musb3c] {
    width: min(24rem, 100%);
    background: var(--ps-surface);
    border-radius: 1.4rem;
    padding: 1.2rem 1.2rem 1.3rem;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55);
}

.scan-modal-langs[b-lyv8musb3c] {
    display: flex;
    justify-content: center;
    margin-bottom: 0.9rem;
}

.scan-modal-ic[b-lyv8musb3c] {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 9999px;
    margin: 0 auto 0.7rem;
    background: var(--ps-cyan-soft);
    color: var(--ps-cyan-text);
    display: grid;
    place-items: center;
}

.scan-modal-ic svg[b-lyv8musb3c] { width: 1.7rem; height: 1.7rem; }

.scan-modal-t[b-lyv8musb3c] {
    margin: 0;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ps-ink);
    text-wrap: balance;
    /* Gabarit stable FR/NL/EN : 2 lignes réservées quoi qu'il arrive. */
    min-height: calc(2 * 1.5em);
}

.scan-modal-x[b-lyv8musb3c] {
    margin: 0.5rem 0 0;
    text-align: center;
    font-size: 0.84rem;
    color: var(--ps-muted);
    /* 3 lignes réservées : le texte NL est le plus long. */
    min-height: calc(3 * 1.5em);
}

.scan-modal-priv[b-lyv8musb3c] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    /* 3 lignes de 0.72rem réservées, mêmes raisons. */
    min-height: calc(3 * 0.72rem * 1.5 + 1.2rem);
    background: var(--ps-well);
    border: 1px solid var(--ps-line);
    border-radius: 0.9rem;
    padding: 0.6rem 0.8rem;
    margin-top: 0.9rem;
    font-size: 0.72rem;
    color: var(--ps-muted);
}

.scan-modal-priv svg[b-lyv8musb3c] {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: var(--ps-accent-ink);
    margin-top: 0.1rem;
}

/* Annuler à gauche, action à droite — règle maison des formulaires. */
.scan-modal-btns[b-lyv8musb3c] {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
}

.scan-skip[b-lyv8musb3c] {
    flex: 1;
    border: 1.5px solid var(--ps-line);
    background: var(--ps-surface);
    color: var(--ps-muted);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 0.6rem 0.4rem;
    border-radius: 0.9rem;
    cursor: pointer;
}

.scan-go[b-lyv8musb3c] {
    flex: 1.4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: none;
    background: var(--ps-btn);
    color: var(--ps-btn-ink);
    font-family: inherit;
    font-weight: 800;
    font-size: 0.82rem;
    padding: 0.6rem 0.4rem;
    border-radius: 0.9rem;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
}

.scan-go:disabled[b-lyv8musb3c] { opacity: 0.6; cursor: default; }

.scan-go .ic[b-lyv8musb3c] { width: 1rem; height: 1rem; flex: none; }
/* Pastilles de traits (2026-08-14) */
.scan-traits[b-lyv8musb3c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.15rem;
}

.scan-trait[b-lyv8musb3c] {
    display: inline-block;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
    border-radius: 9999px;
    padding: 0.16rem 0.6rem;
    font-size: 0.68rem;
    font-weight: 800;
}

/* ---- Photo en grand (2026-08-17, même langage que la lightbox de PetDetail) ---- */
.scan-zoom[b-lyv8musb3c] {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
}

.pet-lb[b-lyv8musb3c] {
    position: fixed;
    inset: 0;
    background: rgba(14, 18, 36, 0.88);
    display: grid;
    place-items: center;
    z-index: 100;
    cursor: zoom-out;
}

.pet-lb-frame[b-lyv8musb3c] {
    margin: 0;
    max-width: 90vw;
    max-height: 85vh;
    cursor: default;
}

.pet-lb-frame img[b-lyv8musb3c] {
    display: block;
    max-width: 90vw;
    max-height: 82vh;
    border-radius: 0.8rem;
    object-fit: contain;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
}

.pet-lb-close[b-lyv8musb3c],
.pet-lb-nav[b-lyv8musb3c] {
    position: fixed;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-radius: 9999px;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.pet-lb-close[b-lyv8musb3c] {
    top: 1.3rem;
    right: 1.5rem;
    width: 2.7rem;
    height: 2.7rem;
    font-size: 1.15rem;
}

.pet-lb-nav[b-lyv8musb3c] {
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    font-size: 1.8rem;
    line-height: 1;
}

.pet-lb-nav.prev[b-lyv8musb3c] { left: 1.2rem; }
.pet-lb-nav.next[b-lyv8musb3c] { right: 1.2rem; }

.pet-lb-close:hover[b-lyv8musb3c],
.pet-lb-nav:hover[b-lyv8musb3c] {
    background: rgba(255, 255, 255, 0.24);
}

.pet-lb-count[b-lyv8musb3c] {
    position: fixed;
    bottom: 1.4rem;
    left: 50%;
    transform: translateX(-50%);
    color: #DEE4F5;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* _content/PawSeekrWebApp/Pages/Shop/Cart.razor.rz.scp.css */
/* Panier — maquette « Écrin » (2026-08-18, remplace la maquette A du 2026-08-17
   en gardant ses deux colonnes). Tout en tokens --ps-* SAUF deux surfaces
   volontairement invariantes au thème : le métal des mini-faces (c'est le
   produit) et la carte marine du récapitulatif (un « sticker », même statut que
   le bloc titre des articles — fond toujours sombre, encres claires fixes). */

/* Bandeau unifié : mêmes longueurs fixes que partout (halo à -4.5rem, fondu
   pêche 0 → 7rem) — voir « Unified page band » dans WebApp/CLAUDE.md. */
/* PAS d'overflow hidden (2026-08-18) : le bandeau (~6.7rem) est plus court que
   la grande patte (jusqu'à ~7rem avec la rotation) — elle était coupée net en
   bas. Le fondu du bandeau se termine exactement sur --ps-bg, donc la patte
   peut déborder sur la page sans transition visible. Les dégradés sont des
   backgrounds, auto-limités : l'overflow ne coupait QUE les pattes. */
.cart-band[b-srd6mjiqf0] {
    position: relative;
    margin-top: -1rem;
    padding: 3.2rem 0 1.6rem;
    background:
        radial-gradient(24rem 10rem at 97% -4.5rem, var(--ps-accent-soft), transparent 65%),
        linear-gradient(180deg, var(--ps-band-top) 0, var(--ps-bg) 7rem);
}

/* Position UNIFIÉE (top 0.8rem / -1.6rem, comme /shop et toutes les pages) :
   sans overflow hidden, le haut qui dépasse se glisse derrière la navbar
   (z-20) et le bas déborde sur le fond identique — jamais de coupure. */


.band-bar[b-srd6mjiqf0] {
    position: relative;
    z-index: 1;
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.band-back[b-srd6mjiqf0] {
    flex: none;
}

/* Équilibre le lien retour pour garder le titre centré */
.band-spacer[b-srd6mjiqf0] {
    width: 5rem;
    flex: none;
}

.band-title[b-srd6mjiqf0] {
    margin: 0;
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ps-ink);
    text-align: center;
}

/* ── Les deux colonnes : lignes à gauche, récapitulatif collant à droite. ── */
.cart-grid[b-srd6mjiqf0] {
    display: grid;
    grid-template-columns: 1fr 18rem;
    gap: 1.2rem;
    align-items: start;
}

@media (max-width: 48rem) {
    .cart-grid[b-srd6mjiqf0] {
        grid-template-columns: 1fr;
    }
}

.cart-line[b-srd6mjiqf0] {
    display: flex;
    gap: 1.1rem;
    padding: 1.1rem 1.3rem;
    align-items: center;
}

/* Socle pêche : le médaillon est mis en scène comme dans un écrin. */
.shelf[b-srd6mjiqf0] {
    width: 7.2rem;
    height: 7.2rem;
    flex: none;
    border-radius: 1.4rem;
    background: var(--ps-peach-soft);
    display: grid;
    place-items: center;
    /* Sandwich de l'anse : le ::before en z négatif de .face reste DANS ce
       contexte d'empilement — au-dessus du socle pêche, derrière le disque. */
    isolation: isolate;
}

@media (max-width: 30rem) {
    .shelf[b-srd6mjiqf0] {
        width: 5.6rem;
        height: 5.6rem;
    }
}

/* Photo du produit sur l'étagère (2026-10-12) : la vignette carrée de la tuile, en
   couverture, sous les mêmes coins. */
.shelf img[b-srd6mjiqf0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Mini-face gravée : la relecture avant paiement. Métal invariant au thème. */
.face[b-srd6mjiqf0] {
    position: relative;
    width: 5.6rem;
    height: 5.6rem;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(145deg, #f3f4f6 0%, #d1d5db 45%, #9ca3af 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    box-shadow: 0 8px 18px -10px rgba(43, 58, 103, 0.55);
    padding: 0.45rem;
}

@media (max-width: 30rem) {
    .face[b-srd6mjiqf0] {
        width: 4.4rem;
        height: 4.4rem;
    }
}

/* Anse soudée en haut du disque — même vocabulaire que .medal::before/::after
   de la page de gravure. Le trou est peint couleur socle : pêche-soft composée
   sur la surface de la carte, pour rester juste dans les deux thèmes.
   L'anse passe DERRIÈRE le disque (z-index négatif, motif PetDetail .m-disc du
   2026-08-18) : devant, elle semblait posée sur le métal. */
.face[b-srd6mjiqf0]::before {
    content: "";
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.3rem;
    height: 0.95rem;
    border-radius: 0.45rem 0.45rem 0 0;
    background: linear-gradient(145deg, #e5e7eb, #b6bcc6);
    z-index: -1;
}

.face[b-srd6mjiqf0]::after {
    content: "";
    position: absolute;
    top: -0.36rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background-color: var(--ps-surface);
    background-image: linear-gradient(var(--ps-peach-soft), var(--ps-peach-soft));
    z-index: -1;
}

.engraved span[b-srd6mjiqf0] {
    /* Mini-face de relecture : même fonte que la gravure réelle (custom.css) */
    font-family: "PS Engraving", ui-monospace, Menlo, monospace;
    font-weight: 700;
    color: #4b5563;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
    word-break: break-word;
    text-align: center;
    line-height: 1.15;
    max-width: 100%;
    position: relative;
    z-index: 1;
}

/* Nom lisible, téléphone en petit — la hiérarchie de la vraie face gravée */
.engraved span:first-child[b-srd6mjiqf0] {
    font-size: 0.78rem;
}

.engraved span:last-child[b-srd6mjiqf0] {
    font-size: 0.45rem;
}

/* Vignette neutre des futurs produits SANS gravure (ligne sans animal). */
.cart-thumb-paw[b-srd6mjiqf0] {
    width: 2.4rem;
    height: 2.4rem;
    color: var(--ps-accent-ink);
}

.cart-info[b-srd6mjiqf0] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cart-title[b-srd6mjiqf0] {
    margin: 0;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--ps-ink);
}

/* Gravure en puces : les deux lignes telles qu'elles seront gravées */
.cart-chips[b-srd6mjiqf0] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.chip[b-srd6mjiqf0] {
    background: var(--ps-well);
    border: 2px solid var(--ps-line);
    border-radius: 0.6rem;
    padding: 0.1rem 0.55rem;
    font-family: "PS Engraving", ui-monospace, Menlo, monospace;
    font-size: 0.72rem;
    color: var(--ps-muted);
    overflow-wrap: anywhere;
}

.cart-gone[b-srd6mjiqf0] {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ps-danger);
}

/* Modifier / Retirer en pastilles — plus visibles que les liens soulignés de
   la maquette A. Retirer reste affiché même produit disparu (déblocage). */
.cart-actions[b-srd6mjiqf0] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.pill-edit[b-srd6mjiqf0] {
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
    border-radius: 9999px;
    padding: 0.28rem 0.85rem;
    font-size: 0.74rem;
    font-weight: 750;
    text-decoration: none;
    transition: transform 0.12s ease;
}

.pill-rm[b-srd6mjiqf0] {
    border: none;
    background: var(--ps-pink-soft);
    color: var(--ps-pink-ink);
    border-radius: 9999px;
    padding: 0.28rem 0.85rem;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 750;
    cursor: pointer;
    transition: transform 0.12s ease;
}

.pill-edit:hover[b-srd6mjiqf0],
.pill-rm:hover[b-srd6mjiqf0] {
    transform: translateY(-1px);
}

.cart-right[b-srd6mjiqf0] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.55rem;
    flex: none;
}

.cart-price[b-srd6mjiqf0] {
    margin: 0;
    font-weight: 800;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    color: var(--ps-ink);
}

.qty[b-srd6mjiqf0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.qty button[b-srd6mjiqf0] {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 9999px;
    border: 2px solid var(--ps-line);
    background: var(--ps-well);
    color: var(--ps-ink);
    font: inherit;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.qty button:hover:not(:disabled)[b-srd6mjiqf0] {
    border-color: var(--ps-accent);
}

.qty button:disabled[b-srd6mjiqf0] {
    opacity: 0.45;
    cursor: default;
}

.qty-n[b-srd6mjiqf0] {
    min-width: 1.3rem;
    text-align: center;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Tuile « un médaillon pour un autre animal » : même vocabulaire pointillé que la
   tuile « bientôt » du catalogue */
.add-more[b-srd6mjiqf0] {
    display: block;
    margin-top: 0.9rem;
    width: 100%;
    box-sizing: border-box;
    border: 2px dashed var(--ps-dash);
    border-radius: 1.25rem;
    color: var(--ps-muted);
    font-weight: 750;
    font-size: 0.85rem;
    padding: 0.85rem;
    text-align: center;
    text-decoration: none;
}

.add-more:hover[b-srd6mjiqf0] {
    border-color: var(--ps-accent);
    color: var(--ps-accent-ink);
}

/* ── Récapitulatif collant : carte MARINE invariante au thème (sticker). Les
   encres sont fixes — crème sur marine — comme le bloc titre des articles ;
   le bouton payer reprend le pêche/marine du bouton primaire du mode sombre.
   aside.cart-sum (élément + classe) pour primer sur le fond de .ps-card. ── */
aside.cart-sum[b-srd6mjiqf0] {
    position: sticky;
    top: 1rem;
    background: #2B3A67;
    color: #FFF1DC;
    box-shadow: 0 18px 38px -18px var(--ps-shadow);
    /* Récap empilé (R2, 2026-08-18) : à 18rem de colonne, le padding desktop de
       ps-card-pad (2.25rem) ne laissait que ~13.5rem utiles — placeholder coupé. */
    padding: 1.4rem;
}

/* Étiquette de bloc : chaque champ du récap prend toute la largeur dessous */
.sum-lab[b-srd6mjiqf0] {
    display: block;
    font-size: 0.72rem;
    font-weight: 750;
    color: #A8BFC6;
    margin: 0.85rem 0 0.35rem;
}

@media (max-width: 48rem) {
    aside.cart-sum[b-srd6mjiqf0] {
        position: static;
    }
}

.cart-sum-title[b-srd6mjiqf0] {
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: #FFF1DC;
}

.sum-row[b-srd6mjiqf0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0;
    font-size: 0.85rem;
}

.sum-label[b-srd6mjiqf0] {
    color: #D3E0E4;
}

.sum-n[b-srd6mjiqf0] {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #FFF1DC;
}

.sum-total[b-srd6mjiqf0] {
    border-top: 2px dashed rgba(255, 241, 220, 0.35);
    margin-top: 0.4rem;
    padding-top: 0.65rem;
    font-weight: 800;
    font-size: 0.95rem;
    color: #FFF1DC;
}

/* Champs posés sur le marine : puits translucides clairs, encres crème */
.cart-sum .ps-select[b-srd6mjiqf0],
.cart-sum .ps-input[b-srd6mjiqf0] {
    background-color: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.2);
    color: #FFF1DC;
}

.cart-sum .ps-input[b-srd6mjiqf0]::placeholder {
    color: rgba(255, 241, 220, 0.55);
}

.cart-sum .ps-select:focus[b-srd6mjiqf0],
.cart-sum .ps-input:focus[b-srd6mjiqf0] {
    border-color: var(--ps-accent);
}

/* Les <option> gardent le rendu système (fond clair) : encre sombre lisible */
.cart-sum .ps-select option[b-srd6mjiqf0] {
    color: #2B3A67;
}

.sum-country[b-srd6mjiqf0] {
    width: 100%;
    font-size: 0.85rem;
    padding: 0.55rem 2.2rem 0.55rem 0.75rem;
}

/* Bouton payer : pêche fixe (le primaire du mode sombre), invariant ici */
.sum-pay[b-srd6mjiqf0] {
    background: #FFC482;
    color: #22294a;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}

.sum-pay:hover:not(:disabled)[b-srd6mjiqf0] {
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35);
}

.sum-pay:active:not(:disabled)[b-srd6mjiqf0] {
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.sum-note[b-srd6mjiqf0] {
    color: rgba(255, 241, 220, 0.7);
}

.sum-continue[b-srd6mjiqf0] {
    display: block;
    margin-top: 0.8rem;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: #D3E0E4;
    text-decoration: none;
}

.sum-continue:hover[b-srd6mjiqf0] {
    color: #FFF1DC;
}

/* ── État vide « Repères » : icône en pastille, puis trois rangées d'action
   hiérarchisées — boutique en primaire (tokens bouton, donc marine en clair et
   pêche en sombre), commandes et partenaires en retrait. ── */
.empty-card[b-srd6mjiqf0] {
    max-width: 27rem;
    padding: 2.25rem 2rem;
}

.empty-head[b-srd6mjiqf0] {
    text-align: center;
}

.empty-ico[b-srd6mjiqf0] {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 9999px;
    background: var(--ps-accent-soft);
    display: inline-grid;
    place-items: center;
    color: var(--ps-ink);
}

.empty-ico svg[b-srd6mjiqf0] {
    width: 1.7rem;
    height: 1.7rem;
}

.empty-title[b-srd6mjiqf0] {
    margin: 1rem 0 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ps-ink);
}

.empty-sub[b-srd6mjiqf0] {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    color: var(--ps-muted);
}

.empty-rows[b-srd6mjiqf0] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.4rem;
}

.empty-row[b-srd6mjiqf0] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    border-radius: 1rem;
    padding: 0.85rem 1.1rem;
    text-decoration: none;
    background: var(--ps-well);
    border: 2px solid var(--ps-line);
    color: var(--ps-ink);
    transition: transform 0.12s ease, border-color 0.12s ease;
}

.empty-row:hover[b-srd6mjiqf0] {
    border-color: var(--ps-accent);
}

.empty-row .row-ico[b-srd6mjiqf0] {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    color: var(--ps-accent-ink);
}

.empty-row .row-label[b-srd6mjiqf0] {
    flex: 1;
    font-size: 0.88rem;
    font-weight: 800;
}

.empty-row .row-chev[b-srd6mjiqf0] {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: var(--ps-muted-soft);
}

.empty-row-primary[b-srd6mjiqf0] {
    background: var(--ps-btn);
    border: none;
    padding: calc(0.85rem + 2px) calc(1.1rem + 2px); /* compense la bordure absente */
    color: var(--ps-btn-ink);
    box-shadow: 0 4px 0 var(--ps-btn-shadow);
}

.empty-row-primary:hover[b-srd6mjiqf0] {
    transform: translateY(-1px);
    box-shadow: 0 5px 0 var(--ps-btn-shadow);
}

.empty-row-primary .row-ico[b-srd6mjiqf0],
.empty-row-primary .row-chev[b-srd6mjiqf0] {
    color: var(--ps-btn-ink);
}

/* ── Code promo dans le récapitulatif (2026-08-17, restylé sur marine). ── */
.promo-col[b-srd6mjiqf0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 0.3rem;
}

.promo-inp[b-srd6mjiqf0] {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.8rem;
    padding: 0.55rem 0.75rem;
    text-transform: uppercase;
    font-family: ui-monospace, Menlo, monospace;
}

/* Le contour du ghost (--ps-ink) serait marine sur marine : crème fixe ici */
.cart-sum .promo-btn[b-srd6mjiqf0] {
    align-self: flex-end;
    padding: 0.4rem 1rem;
    font-size: 0.78rem;
    color: #FFF1DC;
    outline-color: rgba(255, 241, 220, 0.55);
}

.cart-sum .promo-btn:hover:not(:disabled)[b-srd6mjiqf0] {
    background: rgba(255, 255, 255, 0.09);
}

/* Rouge éclairci : le --ps-danger se perd sur le marine */
.promo-err[b-srd6mjiqf0] {
    margin: 0.15rem 0 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #FCA5A5;
}

/* Code appliqué : tampon doré — l'or est le même token dans les deux thèmes */
.promo-pill[b-srd6mjiqf0] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(254, 201, 114, 0.16);
    color: var(--ps-gold);
    border-radius: 9999px;
    padding: 0.2rem 0.4rem 0.2rem 0.7rem;
    font-size: 0.74rem;
    font-weight: 800;
}

.promo-pill .mono[b-srd6mjiqf0] {
    font-family: ui-monospace, Menlo, monospace;
}

.promo-pill button[b-srd6mjiqf0] {
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0 0.2rem;
}

.sum-discount[b-srd6mjiqf0] {
    color: var(--ps-gold);
}

/* ═══ Tenue du code promo (2026-09-15, variante « ligne discrète » validée) ═══
   Le code est réservé pour ce compte le temps de payer, et la ligne le dit sans
   rien révéler de la campagne : ni plafond, ni places restantes. Volontairement
   muette visuellement — pas de couleur d'alerte, pas d'animation : ce n'est pas
   une minuterie de vente flash, c'est une information de service. */
.promo-hold[b-srd6mjiqf0] {
    margin: 0.4rem 0 0;
    font-size: 0.72rem;
    color: var(--ps-muted);
    font-variant-numeric: tabular-nums;
}

/* ═══ Panier en stand-by (2026-09-16, épreuve interactive validée) ═══
   Une commande attend son paiement : le panier montre CETTE commande, verrouillée.
   Bandeau pêche en tête (l'avertissement du système, pas une alerte rouge — rien n'a
   été débité), lignes sans gestes, récapitulatif marine avec le compte à rebours et
   les deux boutons. Tokens partout ; sur le marine, encres fixes comme le reste. */
.hold[b-srd6mjiqf0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 0.5rem;
    padding: 1rem 1.2rem;
    border-radius: 1.25rem;
    background: var(--ps-peach-soft);
    color: var(--ps-on-peach);
}

.hold .ic[b-srd6mjiqf0] {
    width: 2.6rem;
    height: 2.6rem;
    flex: none;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.55);
    display: grid;
    place-items: center;
}

.hold .ic svg[b-srd6mjiqf0] {
    width: 1.3rem;
    height: 1.3rem;
}

.hold .tx[b-srd6mjiqf0] {
    flex: 1;
    min-width: 14rem;
}

.hold .t[b-srd6mjiqf0] {
    margin: 0;
    font-weight: 800;
    font-size: 0.95rem;
}

.hold .s[b-srd6mjiqf0] {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
}

.hold .s[b-srd6mjiqf0]  b {
    font-variant-numeric: tabular-nums;
}

/* Lignes figées : la carte reste la même, sans stepper ni pastilles. */
.locked .cart-line[b-srd6mjiqf0] {
    opacity: 0.92;
}

.qty-locked[b-srd6mjiqf0] {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--ps-muted-soft);
}

.lockline[b-srd6mjiqf0] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.9rem 0 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ps-muted-soft);
}

.lockline[b-srd6mjiqf0]  svg {
    width: 0.85rem;
    height: 0.85rem;
}

/* Récap figé : les étiquettes s'éteignent, la valeur reste lisible. */
.cart-sum .sum-lab.dim[b-srd6mjiqf0] {
    opacity: 0.55;
}

.sum-fixed[b-srd6mjiqf0] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #FFF1DC;
}

/* Compte à rebours de l'échéance : puits pêche translucide sur le marine. */
.cart-sum .sb-count[b-srd6mjiqf0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.8rem;
    background: rgba(255, 196, 130, 0.16);
    border: 2px solid rgba(255, 196, 130, 0.45);
    font-size: 0.8rem;
    color: #FFF1DC;
}

.cart-sum .sb-count svg[b-srd6mjiqf0] {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: #FFC482;
}

.cart-sum .sb-count[b-srd6mjiqf0]  b {
    font-variant-numeric: tabular-nums;
    color: #FFC482;
}

.cart-sum .sb-acts[b-srd6mjiqf0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.cart-sum .sb-acts .ps-btn[b-srd6mjiqf0] {
    width: 100%;
    justify-content: center;
}

/* Annuler en fantôme rose sur le marine : présent, jamais concurrent de Reprendre. */
.cart-sum .sb-cancel[b-srd6mjiqf0] {
    background: transparent;
    color: #FFB3C0;
    box-shadow: none;
    outline: 2px solid rgba(255, 179, 192, 0.55);
    outline-offset: -2px;
}

.cart-sum .sb-cancel:hover:not(:disabled)[b-srd6mjiqf0] {
    background: rgba(255, 143, 163, 0.18);
}

/* Bornes atteintes (ShopLimits, 2026-09-16) : un mot sous le compteur, et la tuile
   « un autre animal » cède la place à l'avertissement quand le panier est plein. */
.qty-max[b-srd6mjiqf0] {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ps-muted);
    text-align: right;
}

/* Mot de stock (2026-10-12) : pêche = quantité ramenée au restant, rose = épuisé. */
.qty-note[b-srd6mjiqf0] {
    margin: 0;
    padding: 0.3rem 0.55rem;
    border-radius: 0.6rem;
    font-size: 0.68rem;
    font-weight: 800;
    text-align: right;
    background: var(--ps-peach-soft);
    color: var(--ps-on-peach);
}

.qty-note.gone[b-srd6mjiqf0] {
    background: var(--ps-pink-soft);
    color: var(--ps-pink-ink);
}

.cart-full[b-srd6mjiqf0] {
    margin: 0.9rem 0 0;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    background: var(--ps-peach-soft);
    color: var(--ps-on-peach);
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
}
/* _content/PawSeekrWebApp/Pages/Shop/CheckoutCancel.razor.rz.scp.css */
.page-bg[b-2q0ek28037] {
    width: 100%;
    flex: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom right, #FFC482 10%, #D7EAE9 100%);
    padding: 1rem;
}
/* _content/PawSeekrWebApp/Pages/Shop/CheckoutSuccess.razor.rz.scp.css */
.page-bg[b-skbv6r5wjx] {
    width: 100%;
    flex: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom right, #D7EAE9 10%, #FFC482 100%);
    padding: 1rem;
}

/* ── Design « Épure » (2026-08-18) : pastille + titre + texte + CTA, carte
   centrée dans la page (ps-page-centered dans le markup). Tout en tokens. ── */

/* Ancre les pattes filigrane ; pas d'overflow hidden → jamais rognées */
.cs-stage[b-skbv6r5wjx] {
    position: relative;
}

/* Même hauteur visuelle que les bandeaux : eux sont remontés de 1rem sous la
   navbar (margin-top -1rem) avec les pattes à 0.8rem — ici la page démarre au
   ras de la navbar, donc 0.8 - 1 = -0.2rem. Le dépassement passe derrière la
   navbar (z-20), comme partout. */


.cs-card[b-skbv6r5wjx] {
    width: 100%;
    max-width: 26.5rem;
}

.cs-title[b-skbv6r5wjx] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ps-ink);
}

/* Pastille d'état : teal-soft (payé, en attente) ou rose (erreur) */
.cs-ico[b-skbv6r5wjx] {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 9999px;
    display: inline-grid;
    place-items: center;
}

.cs-ico svg[b-skbv6r5wjx] {
    width: 2rem;
    height: 2rem;
}

.cs-ico-ok[b-skbv6r5wjx] {
    background: var(--ps-accent-soft);
    color: var(--ps-ink);
}

.cs-ico-err[b-skbv6r5wjx] {
    background: var(--ps-pink-soft);
    color: var(--ps-pink-ink);
}

/* Anneau animé aux tokens — remplace le spinner Flowbite bleu hors thème */
.cs-spin[b-skbv6r5wjx] {
    width: 3.5rem;
    height: 3.5rem;
    /* Le preflight Tailwind pose `svg { display: block }` : le text-align de la carte
       ne centre plus l'anneau, qui restait collé à gauche (signalé le 2026-09-16). Les
       autres pastilles sont des <span> inline-grid, elles n'avaient pas le problème. */
    display: block;
    margin: 0 auto;
}

.cs-spin-track[b-skbv6r5wjx] {
    stroke: var(--ps-accent-soft);
    stroke-width: 5;
}

.cs-spin-arc[b-skbv6r5wjx] {
    stroke: var(--ps-accent);
    stroke-width: 5;
    stroke-linecap: round;
    animation: cs-spin-b-skbv6r5wjx 1s linear infinite;
    transform-origin: 50% 50%;
}

@keyframes cs-spin-b-skbv6r5wjx {
    to {
        transform: rotate(360deg);
    }
}

/* Sortie secondaire sous le CTA (continuer mes achats / support) */
.cs-link[b-skbv6r5wjx] {
    display: block;
    margin-top: 0.9rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ps-muted);
    text-decoration: none;
}

.cs-link:hover[b-skbv6r5wjx] {
    color: var(--ps-accent-ink);
}
/* _content/PawSeekrWebApp/Pages/Shop/Medallion.razor.rz.scp.css */
/* Personnalisation du médaillon (maquette B, 2026-08-14). Tout en tokens --ps-* :
   la page suit les deux thèmes, cartes « sable pêche » comprises. */

.med-grid[b-jyxy4g4ah9] {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 780px) {
    .med-grid[b-jyxy4g4ah9] {
        grid-template-columns: 1.15fr 0.85fr;
        align-items: start;
    }
}

/* --- Sélecteur d'animal (entrée par le catalogue) — version consolidée
   (2026-08-17) : recherche toujours visible, bascule « À équiper / Déjà
   équipés », zone de liste à HAUTEUR FIXE (5 rangées de 4.3rem) et pager à
   espace réservé — la carte ne change jamais de hauteur, quel que soit
   l'onglet, la page ou la recherche. Les équipés sont sélectionnables
   (recommander est permis) : pastille gold + date de la dernière commande
   contre le doublon par oubli. --- */
.pet-search[b-jyxy4g4ah9] {
    width: 100%;
}

.pet-seg[b-jyxy4g4ah9] {
    display: flex;
    gap: 0.3rem;
    background: var(--ps-well);
    border: 2px solid var(--ps-line);
    border-radius: 9999px;
    padding: 0.22rem;
    margin-top: 0.6rem;
}

.pet-seg button[b-jyxy4g4ah9] {
    flex: 1;
    border: none;
    background: none;
    border-radius: 9999px;
    padding: 0.4rem 0.5rem;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--ps-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease, color 0.12s ease;
}

.pet-seg button.on[b-jyxy4g4ah9] {
    background: var(--ps-btn);
    color: var(--ps-btn-ink);
}

.pet-seg-cnt[b-jyxy4g4ah9] {
    font-weight: 700;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

.pet-rows[b-jyxy4g4ah9] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.8rem;
    /* 5 rangées + 4 interstices, quoi qu'il arrive. */
    height: calc(5 * 4.3rem + 4 * 0.55rem);
    overflow: hidden;
}

.pet-row[b-jyxy4g4ah9] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    height: 4.3rem;
    flex: none;
    text-align: left;
    border: 2px solid var(--ps-line);
    background: var(--ps-well);
    border-radius: 1rem;
    padding: 0.55rem 0.8rem;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.12s ease, transform 0.12s ease;
}

.pet-row:hover[b-jyxy4g4ah9] {
    border-color: var(--ps-accent);
    transform: translateY(-1px);
}

.pet-row-photo[b-jyxy4g4ah9] {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--ps-line);
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
    display: grid;
    place-items: center;
    flex: none;
}

.pet-row-photo img[b-jyxy4g4ah9] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Photo légèrement estompée côté équipés : l'état se lit avant le texte. */
.pet-row-photo.owned img[b-jyxy4g4ah9] {
    filter: grayscale(0.35);
    opacity: 0.85;
}

.pet-row-paw[b-jyxy4g4ah9] {
    width: 1.6rem;
    height: 1.6rem;
}

.pet-row-id[b-jyxy4g4ah9] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pet-row-name[b-jyxy4g4ah9] {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--ps-ink);
}

.pet-row-sub[b-jyxy4g4ah9] {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--ps-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pet-row-owncol[b-jyxy4g4ah9] {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    flex: none;
}

.pet-row-date[b-jyxy4g4ah9] {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ps-muted-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pet-row-go[b-jyxy4g4ah9] {
    margin-left: auto;
    color: var(--ps-muted-soft);
    font-size: 1.1rem;
    line-height: 1;
}

/* Quand la colonne équipé occupe déjà le flex « auto », le chevron suit. */
.pet-row-owncol + .pet-row-go[b-jyxy4g4ah9] {
    margin-left: 0.7rem;
}

.pet-row:hover .pet-row-go[b-jyxy4g4ah9] {
    color: var(--ps-accent-ink);
}

.pet-owned-chip[b-jyxy4g4ah9] {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    background: var(--ps-gold);
    color: var(--ps-gold-ink);
    border-radius: 9999px;
    padding: 0.14rem 0.6rem;
    font-size: 0.64rem;
    font-weight: 800;
    white-space: nowrap;
}

.pet-owned-hex[b-jyxy4g4ah9] {
    width: 0.7rem;
    height: 0.7rem;
}

.pet-rows-empty[b-jyxy4g4ah9] {
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1rem;
    font-size: 0.85rem;
    color: var(--ps-muted);
}

/* Pager : mêmes libellés que le composant Pager, espace toujours réservé. */
.pk-pager[b-jyxy4g4ah9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.9rem;
    height: 2.2rem;
}

.pk-pager.off[b-jyxy4g4ah9] {
    visibility: hidden;
}

.pk-btn[b-jyxy4g4ah9] {
    border: 1px solid var(--ps-line);
    background: var(--ps-surface);
    color: var(--ps-ink);
    border-radius: 0.375rem;
    padding: 0.375rem 0.875rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.pk-btn:hover:not(:disabled)[b-jyxy4g4ah9] {
    background: var(--ps-well);
}

.pk-btn:disabled[b-jyxy4g4ah9] {
    opacity: 0.4;
    cursor: not-allowed;
}

.pk-info[b-jyxy4g4ah9] {
    font-size: 0.875rem;
    color: var(--ps-muted);
    font-variant-numeric: tabular-nums;
}

/* Note contextuelle (onglet équipés) : hauteur réservée, zéro saut. */
.pet-ctxnote[b-jyxy4g4ah9] {
    margin: 0.5rem 0 0;
    min-height: 2.2em;
    font-size: 0.76rem;
    color: var(--ps-muted);
}

/* Rappel anti-doublon sur l'écran de gravure. */
.reorder-note[b-jyxy4g4ah9] {
    margin: 0.9rem 0 0;
    background: var(--ps-peach-soft);
    color: var(--ps-on-peach);
    border-radius: 0.8rem;
    padding: 0.55rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
}

/* --- En-tête animal choisi (entrée par la fiche) --- */
.pet-head[b-jyxy4g4ah9] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.pet-head-photo[b-jyxy4g4ah9] {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 9999px;
    overflow: hidden;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
}

.pet-head-photo img[b-jyxy4g4ah9] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pet-head-paw[b-jyxy4g4ah9] {
    width: 1.8rem;
    height: 1.8rem;
}

.pet-head-title[b-jyxy4g4ah9] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ps-ink);
}

.pet-head-switch[b-jyxy4g4ah9] {
    background: none;
    border: none;
    padding: 0;
    margin-top: 0.15rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ps-accent-ink);
    text-decoration: underline;
    cursor: pointer;
}

.empty-paw[b-jyxy4g4ah9] {
    width: 2.6rem;
    height: 2.6rem;
    margin: 0 auto;
    color: var(--ps-accent-ink);
}

/* --- Quantité --- */
.qty[b-jyxy4g4ah9] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.qty button[b-jyxy4g4ah9] {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: 2px solid var(--ps-line);
    background: var(--ps-well);
    color: var(--ps-ink);
    font: inherit;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.qty button:hover:not(:disabled)[b-jyxy4g4ah9] {
    border-color: var(--ps-accent);
}

.qty button:disabled[b-jyxy4g4ah9] {
    opacity: 0.45;
    cursor: default;
}

.qty-n[b-jyxy4g4ah9] {
    min-width: 1.4rem;
    text-align: center;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* --- Aperçu des deux faces --- */
@media (min-width: 780px) {
    .preview-card[b-jyxy4g4ah9] {
        position: sticky;
        top: 1rem;
    }
}

/* Faces du médaillon — disposition validée le 2026-08-17 : disque PLEIN (pas
   de trou), petite ANSE au sommet qui porte l'anneau ; face QR nue, macaron
   « PAWSENO.COM · code » sur la face contact autour du nom et du numéro. Le
   métal est volontairement identique dans les deux thèmes (c'est le produit). */
.medal[b-jyxy4g4ah9] {
    position: relative;
    width: 10.5rem;
    margin: 0.9rem auto 0;
    /* Sandwich de l'anse : les pseudos en z négatif restent DANS ce contexte
       d'empilement — au-dessus de ce qui est derrière la carte, derrière le
       disque .face. .medal n'a pas de fond propre, l'isolation est sans effet
       visuel sur lui. */
    isolation: isolate;
}

/* L'anse : languette soudée au sommet du disque… Elle passe DERRIÈRE le disque
   (z-index négatif, motif PetDetail .m-disc du 2026-08-18) : devant, elle
   semblait posée sur le métal. Le trou (::after, peint après) reste sur l'anse. */
.medal[b-jyxy4g4ah9]::before {
    content: "";
    position: absolute;
    top: -0.55rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5rem;
    height: 1.1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    background: linear-gradient(145deg, #e5e7eb, #b6bcc6);
    z-index: -1;
}

/* …percée pour l'anneau. */
.medal[b-jyxy4g4ah9]::after {
    content: "";
    position: absolute;
    top: -0.42rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--ps-surface);
    z-index: -1;
}

.face[b-jyxy4g4ah9] {
    width: 10.5rem;
    height: 10.5rem;
    border-radius: 50%;
    background: linear-gradient(145deg, #f3f4f6 0%, #d1d5db 45%, #9ca3af 100%);
    display: grid;
    place-items: center;
    box-shadow: 0 12px 26px -14px rgba(43, 58, 103, 0.55),
        inset 0 2px 5px rgba(255, 255, 255, 0.65);
    position: relative;
    z-index: 1;
}

/* Face QR nue : le PNG embarque sa zone de silence (4 modules sur 33), le carré
   SOMBRE visible fait donc ~76 % de l'image — 8.5rem d'image ≈ 6.44rem de
   modules, soit 61 % du disque. TAILLE VALIDÉE À L'ŒIL le 2026-08-17 (« le QR
   est dans la médaille sans trop toucher les bords ») ; le fichier de
   production reprend CE ratio (EngravingLayout.QrSideMm ≈ 18,4 mm sur Ø 30). */
.face-qr[b-jyxy4g4ah9] {
    width: 8.5rem;
    height: 8.5rem;
    border-radius: 0.375rem;
}

/* Macaron gravé : deux arcs de texte, en léger retrait du bord.
   ⚠️ La classe s'appelle engr-ring et PAS « ring » : « ring » est un utilitaire
   Tailwind (box-shadow d'1px) — la collision dessinait une bordure carrée
   autour du médaillon (bug corrigé le 2026-08-17). */
.face .engr-ring[b-jyxy4g4ah9] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.face .engr-ring text[b-jyxy4g4ah9] {
    font-family: "PS Engraving", ui-monospace, Menlo, monospace;
    font-weight: 700;
    fill: #4b5563;
    letter-spacing: 0.14em;
}

.face.engraved[b-jyxy4g4ah9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

/* Nom : taille pilotée par le palier automatique (style inline du composant). */
.engr-l1[b-jyxy4g4ah9] {
    font-family: "PS Engraving", ui-monospace, Menlo, monospace;
    font-weight: 700;
    color: #4b5563;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
    white-space: nowrap;
    letter-spacing: 0.04em;
    line-height: 1.2;
    min-height: 0.8rem;
    transition: font-size 0.12s ease;
}

/* Numéro : taille fixe — c'est l'information de secours, elle ne varie pas. */
.engr-l2[b-jyxy4g4ah9] {
    font-family: "PS Engraving", ui-monospace, Menlo, monospace;
    font-size: 0.74rem;
    font-weight: 700;
    color: #4b5563;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    min-height: 0.9rem;
}

/* ── Pastille de taille indicative (non cliquable) sous la ligne 1. ── */
.size-pill[b-jyxy4g4ah9] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
    border-radius: 9999px;
    padding: 0.14rem 0.6rem;
    font-size: 0.68rem;
    font-weight: 800;
    user-select: none;
    cursor: default;
}

.size-aa[b-jyxy4g4ah9] {
    font-family: ui-monospace, Menlo, monospace;
    line-height: 1;
}

/* ── Ligne 2 : bloc indicatif +32 + numéro national. ── */
.phone-row[b-jyxy4g4ah9] {
    display: flex;
    gap: 0.5rem;
}

.dial[b-jyxy4g4ah9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border: 2px solid var(--ps-line);
    background: var(--ps-well);
    border-radius: 0.8rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--ps-ink);
    flex: none;
    cursor: default;
}

.dial-chev[b-jyxy4g4ah9] {
    color: var(--ps-muted-soft);
    font-size: 0.7rem;
}

.phone-inp[b-jyxy4g4ah9] {
    flex: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}

.phone-err[b-jyxy4g4ah9] {
    color: var(--ps-pink-ink);
    font-weight: 700;
}


/* ── Modal de confirmation avant panier (2026-08-17) — pattern .ps-scrim/.ps-modal
   maison (PetDetail), élargie pour poser les deux faces côte à côte. ── */
.ps-scrim[b-jyxy4g4ah9] {
    position: fixed;
    inset: 0;
    background: rgba(26, 34, 64, 0.45);
    display: grid;
    place-items: center;
    z-index: 100;
    padding: 1rem;
    overflow-y: auto;
}

.ps-modal[b-jyxy4g4ah9] {
    background: var(--ps-surface);
    color: var(--ps-ink);
    border-radius: 1.4rem;
    padding: 1.5rem;
    width: 100%;
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.5);
}

.cfm-modal[b-jyxy4g4ah9] {
    max-width: 30rem;
}

.ps-modal h3[b-jyxy4g4ah9] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.ps-modal p[b-jyxy4g4ah9] {
    margin: 0.35rem 0 0;
    font-size: 0.84rem;
    color: var(--ps-muted);
    line-height: 1.5;
}

/* Les deux faces sur un « établi » — l'anse dépasse du disque : padding haut
   généreux pour ne pas la rogner. */
.cfm-faces[b-jyxy4g4ah9] {
    margin-top: 1rem;
    background: var(--ps-well);
    border: 1px solid var(--ps-line);
    border-radius: 1.1rem;
    padding: 0.4rem 0.8rem 1rem;
}

/* Le trou de l'anse doit reprendre le fond de l'établi, pas celui de la page. */
.cfm-faces .medal[b-jyxy4g4ah9]::after {
    background: var(--ps-well);
}

.cfm-rows[b-jyxy4g4ah9] {
    margin-top: 1rem;
    border: 1px solid var(--ps-line);
    border-radius: 1rem;
    overflow: hidden;
}

.cfm-rows div[b-jyxy4g4ah9] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
}

.cfm-rows div + div[b-jyxy4g4ah9] {
    border-top: 1px solid var(--ps-line);
}

.cfm-k[b-jyxy4g4ah9] {
    color: var(--ps-muted);
    font-weight: 700;
}

.cfm-v[b-jyxy4g4ah9] {
    font-family: "PS Engraving", ui-monospace, Menlo, monospace;
    font-weight: 700;
    font-size: 0.82rem;
    text-align: right;
    overflow-wrap: anywhere;
}

.cfm-warn[b-jyxy4g4ah9] {
    margin-top: 0.9rem;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    background: var(--ps-peach-soft);
    border-radius: 0.9rem;
    padding: 0.7rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 600;
}

.cfm-warn svg[b-jyxy4g4ah9] {
    flex: none;
    margin-top: 0.1rem;
}

.modal-actions[b-jyxy4g4ah9] {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    margin-top: 1.2rem;
}

/* ── Bandeau unifié (2026-08-17) — même dessin que le bandeau articles/shop :
   les deux couches en longueurs FIXES (halo à -4.5rem, fondu pêche 0 → 7rem),
   pattes 5.5rem + patte intérieure 3rem. Voir « Unified page band » dans
   WebApp/CLAUDE.md. ── */
/* PAS d'overflow hidden (2026-08-18) : le bandeau est plus court que la grande
   patte, qui était coupée net en bas. Le fondu se termine exactement sur
   --ps-bg, donc la patte déborde sur la page sans transition visible. */
.med-band[b-jyxy4g4ah9] {
    position: relative;
    margin-top: -1rem;
    padding: 3.2rem 0 1.6rem;
    background:
        radial-gradient(24rem 10rem at 97% -4.5rem, var(--ps-accent-soft), transparent 65%),
        linear-gradient(180deg, var(--ps-band-top) 0, var(--ps-bg) 7rem);
}

/* Position UNIFIÉE (top 0.8rem / -1.6rem, comme /shop et toutes les pages) :
   sans overflow hidden, le haut qui dépasse se glisse derrière la navbar
   (z-20) et le bas déborde sur le fond identique — jamais de coupure. */


/* Aligné sur le conteneur de contenu (max-w-4xl) : retour boutique à gauche,
   titre au centre, pastille panier à droite. */
.band-bar[b-jyxy4g4ah9] {
    position: relative;
    z-index: 1;
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.band-back[b-jyxy4g4ah9] {
    flex: none;
}

.band-title[b-jyxy4g4ah9] {
    margin: 0;
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ps-ink);
    text-align: center;
}

.band-bar[b-jyxy4g4ah9]  .ps-cart-pill {
    flex: none;
}

/* Note fixe sous la barre d'action (2026-08-17) : plusieurs exemplaires = même
   gravure, MÊME QR. Toujours visible — l'information doit précéder le stepper. */
.same-note[b-jyxy4g4ah9] {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    margin-top: 0.9rem;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
    border-radius: 0.9rem;
    padding: 0.65rem 0.85rem;
    font-size: 0.76rem;
    font-weight: 600;
}

.same-note svg[b-jyxy4g4ah9] {
    flex: none;
    margin-top: 0.1rem;
}

/* ═══ État « aucun animal » (épreuve A « chemin en trois pas », 2026-08-20) :
   pastille d'icône à l'échelle fiche détaillée, trois pas en tuiles puits, CTA
   plein + fiche d'exemple en ghost. Tout sur tokens. ═══ */

.np-icb[b-jyxy4g4ah9] {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    margin: 0 auto;
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
}

.np-paw[b-jyxy4g4ah9] {
    width: 1.5rem;
    height: 1.5rem;
}

.np-title[b-jyxy4g4ah9] {
    margin: 0.8rem 0 0.3rem;
    font-size: 1.15rem;
    font-weight: 800;
    text-wrap: balance;
}

.np-text[b-jyxy4g4ah9] {
    margin: 0 auto;
    font-size: 0.85rem;
    color: var(--ps-muted);
    line-height: 1.55;
    max-width: 32rem;
}

.np-steps[b-jyxy4g4ah9] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
    margin: 1.4rem 0 1.6rem;
}

@media (max-width: 640px) {
    .np-steps[b-jyxy4g4ah9] { grid-template-columns: 1fr; }
}

.np-step[b-jyxy4g4ah9] {
    background: var(--ps-well);
    border: 1.5px solid var(--ps-line);
    border-radius: 1.1rem;
    padding: 0.95rem 0.9rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.np-no[b-jyxy4g4ah9] {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    flex: none;
    background: var(--ps-peach);
    color: var(--ps-on-peach);
    font-size: 0.78rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.np-step svg[b-jyxy4g4ah9] {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--ps-accent-ink);
}

.np-step b[b-jyxy4g4ah9] { font-size: 0.82rem; }

.np-step p[b-jyxy4g4ah9] {
    margin: 0;
    font-size: 0.72rem;
    color: var(--ps-muted);
    line-height: 1.45;
}

.np-actions[b-jyxy4g4ah9] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: center;
}
/* _content/PawSeekrWebApp/Pages/Shop/MyOrders.razor.rz.scp.css */
/* ── Bandeau : le gabarit des pages listes, dupliqué par page (motif maison) ── */
.list-band[b-tp152ldok4] {
    position: relative;
    overflow: hidden;
    margin-top: -1rem;
    padding: 3.2rem 0 1.6rem;
    background:
        radial-gradient(24rem 10rem at 97% -4.5rem, var(--ps-accent-soft), transparent 65%),
        linear-gradient(180deg, var(--ps-band-top) 0, var(--ps-bg) 7rem);
}

.band-inner[b-tp152ldok4] {
    max-width: var(--ps-page-w); /* mesure commune des pages utilisateur (2026-09-18) */
    margin: 0 auto;
    padding: 0 1rem;
}

/* Page de l'espace utilisateur (règle du 2026-08-20, épreuve validée) :
   bandeau entièrement SYMÉTRIQUE — identité, outils et segmenté sur l'axe
   central. Le sticker « ← Boutique » et son band-head ont été retirés ce
   jour-là. Les pages listes « normales » gardent leur axe gauche. */
.band-id[b-tp152ldok4] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    align-items: center;
    text-align: center;
}



/* Le kicker à l'or de la boutique — comme celui des favoris. */
.ord-kick[b-tp152ldok4] {
    color: var(--ps-gold-ink);
    opacity: 0.72;
}

:root[data-theme="dark"] .ord-kick[b-tp152ldok4] {
    color: var(--ps-gold);
    opacity: 0.85;
}

/* Les états sous les outils : deux rangées, jamais mélangées.
   Outils sur l'AXE CENTRAL (V2 validée sur épreuve le 2026-08-20, avec
   /profile ; les autres pages listes restent à gauche en attendant la
   discussion sur les pills de filtres) : recherche + période centrées via le
   justify du .ps-toolbar ci-dessous, et le segmenté — inline-flex de nature —
   se centre en repassant flex à largeur de contenu, marges auto. */
.ord-tabs[b-tp152ldok4] {
    margin-top: 0.6rem;
    display: flex;
    width: fit-content;
    margin-inline: auto;
}

.ps-toolbar[b-tp152ldok4] {
    justify-content: center;
}







/* ── La carte registre. ── */
.reg-card[b-tp152ldok4] {
    padding: 1.4rem 1.6rem;
}















/* ── Rangées : mini-face gravée, résumé + date, statut, prix, chevron. ── */
.reg-rows[b-tp152ldok4] {
    margin-top: 0.6rem;
}

.reg-row[b-tp152ldok4] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 0.25rem;
    text-decoration: none;
    color: var(--ps-ink);
}

.reg-row-wrap[b-tp152ldok4] {
    position: relative;
}

.reg-row-wrap + .reg-row-wrap[b-tp152ldok4] {
    border-top: 2px dashed var(--ps-dash);
}

/* Paiement en attente (2026-09-16) : « Payer → » par-dessus la rangée, à la place
   du chevron ; la rangée lui réserve la place pour que rien ne se chevauche. */
.reg-row.has-pay[b-tp152ldok4] {
    padding-right: 5.6rem;
}

.reg-row.has-pay .reg-chev[b-tp152ldok4] {
    display: none;
}

.reg-pay[b-tp152ldok4] {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    background: #FFC482;
    color: #22294a;
    border-radius: 9999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.74rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}

.reg-row:hover .reg-title[b-tp152ldok4] {
    color: var(--ps-accent-ink);
}

/* Mini-face gravée (vocabulaire du panier, réduite) : métal invariant au thème */
.face[b-tp152ldok4] {
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(145deg, #f3f4f6 0%, #d1d5db 45%, #9ca3af 100%);
    box-shadow: 0 5px 12px -7px rgba(43, 58, 103, 0.55);
    display: grid;
    place-items: center;
    padding: 0.2rem;
    box-sizing: border-box;
}

.face span[b-tp152ldok4] {
    font-family: "PS Engraving", ui-monospace, Menlo, monospace;
    font-size: 0.52rem;
    font-weight: 700;
    color: #4b5563;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
    word-break: break-word;
    text-align: center;
    line-height: 1.1;
}

/* Vignette neutre : commande sans ligne gravée (futurs produits) */
.reg-thumb[b-tp152ldok4] {
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border-radius: 0.8rem;
    background: var(--ps-well);
    border: 2px solid var(--ps-line);
    display: grid;
    place-items: center;
    box-sizing: border-box;
}

.reg-thumb-paw[b-tp152ldok4] {
    width: 1.3rem;
    height: 1.3rem;
    color: var(--ps-accent-ink);
}

.reg-main[b-tp152ldok4] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.reg-title[b-tp152ldok4] {
    font-weight: 800;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reg-date[b-tp152ldok4] {
    font-size: 0.72rem;
    color: var(--ps-muted-soft);
}

.reg-price[b-tp152ldok4] {
    flex: none;
    min-width: 4.4rem;
    text-align: right;
    font-weight: 800;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.reg-chev[b-tp152ldok4] {
    width: 0.9rem;
    height: 0.9rem;
    flex: none;
    color: var(--ps-muted-soft);
}

/* Pastilles de statut aux tokens — remplacent les b-green/b-amber en hex qui
   ne suivaient pas le mode sombre. Regroupement identique aux anciens badges. */
.st[b-tp152ldok4] {
    flex: none;
    display: inline-block;
    border-radius: 9999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.68rem;
    font-weight: 800;
}

.st-ok[b-tp152ldok4] {
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
}

.st-wait[b-tp152ldok4] {
    background: var(--ps-peach-soft);
    color: var(--ps-on-peach);
}

.st-prod[b-tp152ldok4] {
    background: var(--ps-cyan-soft);
    color: var(--ps-cyan-text);
}

.st-bad[b-tp152ldok4] {
    background: var(--ps-pink-soft);
    color: var(--ps-pink-ink);
}


/* Pagination intégrée au pied du registre */
.reg-foot[b-tp152ldok4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 2px dashed var(--ps-dash);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ps-muted-soft);
}

@media (max-width: 30rem) {

    .reg-row[b-tp152ldok4] {
        flex-wrap: wrap;
    }
}
/* _content/PawSeekrWebApp/Pages/Shop/OrderDetail.razor.rz.scp.css */
/* Détail de commande — maquette « D2.2 Ticket » (2026-08-18) : la commande
   comme un reçu au bord cranté. Tout en tokens --ps-* sauf le métal des
   mini-faces (invariant : c'est le produit) et le crantage, qui doit être
   peint de la couleur de page composée (voir .tkt-scallop). */

/* ── Bandeau unifié : mêmes longueurs fixes que partout. PAS d'overflow
   hidden ; pattes en position UNIFIÉE (voir mémoire band-paws-crop-fix). ── */
.det-band[b-zbnkywebv1] {
    position: relative;
    margin-top: -1rem;
    padding: 3.2rem 0 1.6rem;
    background:
        radial-gradient(24rem 10rem at 97% -4.5rem, var(--ps-accent-soft), transparent 65%),
        linear-gradient(180deg, var(--ps-band-top) 0, var(--ps-bg) 7rem);
}



.band-bar[b-zbnkywebv1] {
    position: relative;
    z-index: 1;
    max-width: 48rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.band-back[b-zbnkywebv1] {
    flex: none;
}

/* Équilibre le lien retour pour garder le titre centré */
.band-spacer[b-zbnkywebv1] {
    width: 7rem;
    flex: none;
}

.band-title[b-zbnkywebv1] {
    margin: 0;
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ps-ink);
    text-align: center;
}

/* Colonne du ticket */
.det-col[b-zbnkywebv1] {
    max-width: 34.5rem;
}

/* ── Le ticket. L'ombre est un drop-shadow sur le WRAP : une box-shadow
   suivrait le rectangle, pas le bord cranté. ── */
.tkt-wrap[b-zbnkywebv1] {
    filter: drop-shadow(0 18px 24px rgba(43, 58, 103, 0.16));
}

.tkt[b-zbnkywebv1] {
    background: var(--ps-surface);
    border-radius: 1.75rem 1.75rem 0 0;
    padding: 1.6rem 1.75rem 1.1rem;
}

/* Bord cranté : demi-cercles couleur de PAGE mordant dans la surface. --ps-bg
   est opaque dans les deux thèmes, le raccord est invisible. */
.tkt-scallop[b-zbnkywebv1] {
    height: 1rem;
    background: radial-gradient(circle at 0.75rem 1rem, var(--ps-bg) 0.5rem, var(--ps-surface) 0.53rem);
    background-size: 1.5rem 1rem;
}

.tkt-head[b-zbnkywebv1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 2px dashed var(--ps-dash);
    padding-bottom: 0.9rem;
}

.tkt-no[b-zbnkywebv1] {
    margin: 0;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ps-muted);
}

.tkt-date[b-zbnkywebv1] {
    margin: 0.2rem 0 0;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ps-muted-soft);
}

/* Pastilles de statut aux tokens (les b-green/b-amber hex cassaient le sombre) */
.st[b-zbnkywebv1] {
    flex: none;
    display: inline-block;
    border-radius: 9999px;
    padding: 0.25rem 0.8rem;
    font-size: 0.72rem;
    font-weight: 800;
}

.st-ok[b-zbnkywebv1] {
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
}

.st-wait[b-zbnkywebv1] {
    background: var(--ps-peach-soft);
    color: var(--ps-on-peach);
}

.st-prod[b-zbnkywebv1] {
    background: var(--ps-cyan-soft);
    color: var(--ps-cyan-text);
}

.st-bad[b-zbnkywebv1] {
    background: var(--ps-pink-soft);
    color: var(--ps-pink-ink);
}

/* ── Rangée article : mini-face gravée, nom + gravure, total de ligne. ── */
.tkt-item[b-zbnkywebv1] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 0;
    border-bottom: 2px dashed var(--ps-dash);
}

/* Mini-face de relecture (vocabulaire du panier). Métal invariant au thème. */
.face[b-zbnkywebv1] {
    position: relative;
    width: 3.4rem;
    height: 3.4rem;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(145deg, #f3f4f6 0%, #d1d5db 45%, #9ca3af 100%);
    box-shadow: 0 6px 14px -8px rgba(43, 58, 103, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.25rem;
    box-sizing: border-box;
}

.face span[b-zbnkywebv1] {
    font-family: "PS Engraving", ui-monospace, Menlo, monospace;
    font-weight: 700;
    color: #4b5563;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
    word-break: break-word;
    text-align: center;
    line-height: 1.1;
    font-size: 0.6rem;
}

.face .face-l2[b-zbnkywebv1] {
    font-size: 0.29rem;
}

/* Vignette neutre : ligne sans gravure (futurs produits) */
.tkt-thumb[b-zbnkywebv1] {
    width: 3.4rem;
    height: 3.4rem;
    flex: none;
    border-radius: 0.9rem;
    background: var(--ps-well);
    border: 2px solid var(--ps-line);
    display: grid;
    place-items: center;
    box-sizing: border-box;
}

.tkt-thumb-paw[b-zbnkywebv1] {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--ps-accent-ink);
}

.tkt-item-main[b-zbnkywebv1] {
    flex: 1;
    min-width: 0;
}

.tkt-item-name[b-zbnkywebv1] {
    margin: 0;
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--ps-ink);
}

.tkt-item-engr[b-zbnkywebv1] {
    margin: 0.2rem 0 0;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.7rem;
    color: var(--ps-muted-soft);
    overflow-wrap: anywhere;
}

.tkt-item-price[b-zbnkywebv1] {
    flex: none;
    font-family: ui-monospace, Menlo, monospace;
    font-weight: 700;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--ps-ink);
}

/* ── Totaux à pointillés, total sur bandeau pêche. ── */
.tkt-sums[b-zbnkywebv1] {
    margin-top: 0.9rem;
}

.trow[b-zbnkywebv1] {
    display: flex;
    align-items: baseline;
    font-size: 0.82rem;
    color: var(--ps-muted);
    padding: 0.2rem 0;
}

.trow b[b-zbnkywebv1] {
    color: var(--ps-ink);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.leader[b-zbnkywebv1] {
    flex: 1;
    border-bottom: 2px dotted var(--ps-dash);
    margin: 0 0.5rem;
    transform: translateY(-0.2rem);
}

.tkt-total[b-zbnkywebv1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ps-peach-soft);
    color: var(--ps-on-peach);
    border-radius: 0.9rem;
    padding: 0.65rem 0.9rem;
    margin-top: 0.6rem;
    font-weight: 800;
    font-size: 0.92rem;
}

.tkt-total-n[b-zbnkywebv1] {
    font-family: ui-monospace, Menlo, monospace;
    font-weight: 700;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

/* ── Pied : adresse + suivi | historique. ── */
.tkt-foot[b-zbnkywebv1] {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 2px dashed var(--ps-dash);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 30rem) {
    .tkt-foot[b-zbnkywebv1] {
        grid-template-columns: 1fr;
    }
}

.sec[b-zbnkywebv1] {
    margin: 0 0 0.4rem;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--ps-muted-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tkt-addr[b-zbnkywebv1] {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--ps-muted);
}

/* Puce de suivi — présente seulement si l'envoi est tracké ; deviendra un
   lien quand l'admin fournira l'URL (backlog back-office). */
.tkt-track[b-zbnkywebv1] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.6rem;
    background: var(--ps-well);
    border: 2px solid var(--ps-line);
    border-radius: 0.65rem;
    padding: 0.3rem 0.7rem;
    color: var(--ps-accent-ink);
}

.tkt-track svg[b-zbnkywebv1] {
    width: 0.85rem;
    height: 0.85rem;
    flex: none;
}

.tkt-track .mono[b-zbnkywebv1] {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ps-ink);
    /* Un clic sélectionne tout le numéro : copier-coller sans viser. */
    user-select: all;
}

/* Suivi (épreuve A validée le 2026-10-12) : la puce garde le numéro et gagne l'icône
   copier ; le lien vers le transporteur est un bouton teal à part, dessous — deux
   objets, deux gestes. Sans URL, la puce reste seule, rien ne bouge. */
.track-row[b-zbnkywebv1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
}

.tkt-track .cp[b-zbnkywebv1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-left: -0.1rem;
    border: none;
    background: none;
    padding: 0;
    color: var(--ps-muted-soft);
    cursor: pointer;
    border-radius: 0.35rem;
}

.tkt-track .cp:hover[b-zbnkywebv1],
.tkt-track .cp.ok[b-zbnkywebv1] {
    color: var(--ps-accent-ink);
}

.tkt-track .cp svg[b-zbnkywebv1] {
    width: 0.85rem;
    height: 0.85rem;
}

.tkt-track .cp .ic-done[b-zbnkywebv1],
.tkt-track .cp.ok .ic-copy[b-zbnkywebv1] {
    display: none;
}

.tkt-track .cp.ok .ic-done[b-zbnkywebv1] {
    display: block;
}

/* Le teal du bouton support : une action secondaire, jamais le gold de la carte. */
.track-btn[b-zbnkywebv1] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.55rem;
    background: var(--ps-accent);
    color: #fff;
    border-radius: 9999px;
    padding: 0.42rem 0.95rem;
    font-size: 0.76rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 3px 0 rgba(18, 58, 70, 0.42);
}

.track-btn:hover[b-zbnkywebv1] {
    transform: translateY(-1px);
    box-shadow: 0 4px 0 rgba(18, 58, 70, 0.42);
}

.track-btn svg[b-zbnkywebv1] {
    width: 0.85rem;
    height: 0.85rem;
    flex: none;
}

.copied[b-zbnkywebv1] {
    min-height: 1em;
    margin-top: 0.15rem;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--ps-accent-ink);
}

@media print {
    .tkt-track .cp[b-zbnkywebv1],
    .track-btn[b-zbnkywebv1],
    .copied[b-zbnkywebv1] {
        display: none;
    }
}

.tkt-hist[b-zbnkywebv1] {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.7;
    color: var(--ps-muted-soft);
}

/* ── Actions sous le ticket : imprimer, contacter le support. ── */
.det-actions[b-zbnkywebv1] {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.4rem;
}

.act[b-zbnkywebv1] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--ps-ink);
    border: none;
    outline: 2px solid var(--ps-ink);
    outline-offset: -2px;
    border-radius: 9999px;
    padding: 0.65rem 1.1rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 750;
    cursor: pointer;
    text-decoration: none;
}

.act:hover[b-zbnkywebv1] {
    background: var(--ps-accent-soft);
}

.act svg[b-zbnkywebv1] {
    width: 1rem;
    height: 1rem;
    flex: none;
}

.act-support[b-zbnkywebv1] {
    color: var(--ps-accent-ink);
    outline-color: var(--ps-accent-ink);
}

/* ── Impression : ne garder QUE le ticket, à plat (l'export PDF passe par
   « Enregistrer en PDF » du navigateur). Le layout (nav, pied) est masqué
   globalement par custom.css. ── */
@media print {
    .det-band[b-zbnkywebv1],
    .det-actions[b-zbnkywebv1] {
        display: none;
    }

    .det-col[b-zbnkywebv1] {
        max-width: none;
    }

    .tkt-wrap[b-zbnkywebv1] {
        filter: none;
    }

    .tkt[b-zbnkywebv1] {
        border-radius: 0;
        padding: 0;
    }

    .tkt-scallop[b-zbnkywebv1] {
        display: none;
    }
}

/* ── Commande en attente de paiement (2026-09-16) : bloc pêche au-dessus du ticket,
   même vocabulaire que le bandeau de stand-by du panier. Masqué à l'impression. ── */
.pend[b-zbnkywebv1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem;
    padding: 1rem 1.2rem;
    border-radius: 1.25rem;
    background: var(--ps-peach-soft);
    color: var(--ps-on-peach);
}

.pend-ic[b-zbnkywebv1] {
    width: 2.6rem;
    height: 2.6rem;
    flex: none;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.55);
    display: grid;
    place-items: center;
}

.pend-ic svg[b-zbnkywebv1] {
    width: 1.3rem;
    height: 1.3rem;
}

.pend-tx[b-zbnkywebv1] {
    flex: 1;
    min-width: 14rem;
}

.pend-t[b-zbnkywebv1] {
    margin: 0;
    font-weight: 800;
    font-size: 0.95rem;
}

.pend-s[b-zbnkywebv1] {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
}

.pend-cta[b-zbnkywebv1] {
    flex: none;
    background: var(--ps-btn);
    color: var(--ps-btn-ink);
    border-radius: 9999px;
    padding: 0.55rem 1.1rem;
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
}

@media print {
    .pend[b-zbnkywebv1] {
        display: none;
    }
}
/* _content/PawSeekrWebApp/Pages/Shop/ShopHome.razor.rz.scp.css */
/* Boutique « fiche produit » (2026-08-14, maquette P2).
   Bandeau ALIGNÉ sur celui des articles (2026-08-17, demande utilisateur : un seul
   et même en-tête sur toutes les pages client) — l'ancien « studio turquoise »
   #9DCED2 est abandonné ici au profit du dégradé pêche→fond + halo accent commun
   à articles/pets/lost-pets/partners. */

.shop-band[b-dudenwix2d] {
    position: relative;
    overflow: hidden;
    margin-top: -1rem;
    padding: 3.2rem 0 1.6rem;
    background:
        radial-gradient(24rem 10rem at 97% -4.5rem, var(--ps-accent-soft), transparent 65%),
        linear-gradient(180deg, var(--ps-band-top) 0, var(--ps-bg) 7rem);
}

/* Pattes décoratives — mêmes .band-paws que les bandeaux articles/partners/
   lost-pets (épreuve A validée le 2026-08-14) : le motif maison. */


.band-bar[b-dudenwix2d] {
    position: relative;
    z-index: 1;
    max-width: 46rem;
    margin: 0 auto;
    /* Le retrait latéral vit ici depuis que .shop-band n'en porte plus
       (alignement sur le bandeau articles, qui n'a pas de padding horizontal). */
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: center;
}

/* Équilibre la pastille panier pour garder le titre centré */
.band-spacer[b-dudenwix2d] {
    width: 6.5rem;
    flex: none;
}

/* Encres aux tokens depuis l'alignement sur le bandeau articles (2026-08-17) :
   le fond suit le thème, les couleurs figées du studio n'ont plus lieu d'être. */
.band-title[b-dudenwix2d] {
    margin: 0;
    font-size: clamp(1.35rem, 3.5vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ps-ink);
}

.band-sub[b-dudenwix2d] {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--ps-muted);
    font-weight: 600;
}

/* La pastille panier garde son style token de base (input.css) — seul le
   comportement flex reste réglé ici. */
.band-bar[b-dudenwix2d]  .ps-cart-pill {
    flex: none;
}

/* --- La carte produit, seule et centrée. Pas de chevauchement du bandeau :
   la carte démarre sous le dégradé, ses coins arrondis restent bien visibles. --- */
.prod-card[b-dudenwix2d] {
    max-width: 27rem;
    margin: 0 auto;
    overflow: hidden;
}

/* Les deux faces côte à côte : l'argument produit le plus parlant */
/* Fond « lagon » (2026-08-19, épreuve validée) : l'aplat crème plein faisait
   tache sur la carte blanche — ni décor, ni invisible. Un dégradé turquoise qui
   FOND vers la surface de la carte, pointe cyan au sommet : les couleurs
   d'atelier du produit, froides contre la page crème, sur lesquelles le métal
   gris se détache. Tokens de bout en bout : en sombre, la carte redéfinit
   surface/accent-soft/cyan-soft dans son scope et le dégradé suit tout seul. */
.prod-visual[b-dudenwix2d] {
    background:
        radial-gradient(16rem 10rem at 50% -2.5rem, var(--ps-cyan-soft), transparent 78%),
        linear-gradient(180deg, var(--ps-accent-soft), var(--ps-surface) 92%);
    padding: 2rem 1.5rem 1.4rem;
    display: flex;
    justify-content: center;
    gap: 1.4rem;
    flex-wrap: wrap;
}

.prod-face[b-dudenwix2d] {
    margin: 0;
    text-align: center;
    /* Sandwich de l'anse : le ::before en z négatif du .medallion reste DANS ce
       contexte d'empilement — au-dessus du fond lagon de .prod-visual, derrière
       le disque. Sans l'isolation, il glisserait sous le fond et disparaîtrait. */
    isolation: isolate;
}

.prod-face figcaption[b-dudenwix2d] {
    margin-top: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ps-muted);
}

/* Médaillon stylisé — métal identique dans les deux thèmes (c'est le produit) */
.medallion[b-dudenwix2d] {
    width: 8.6rem;
    height: 8.6rem;
    border-radius: 50%;
    background: linear-gradient(145deg, #f3f4f6 0%, #d1d5db 45%, #9ca3af 100%);
    display: grid;
    place-items: center;
    box-shadow: 0 18px 40px -18px rgba(18, 58, 70, 0.6);
    position: relative;
}

/* L'anse au sommet (disposition validée le 2026-08-17 : disque PLEIN, pas de
   trou percé dedans) — languette soudée qui porte l'anneau, percée en ::after.
   Le trou reprend le fond de .prod-visual à SA hauteur : le dégradé lagon y est
   encore dans l'accent-soft, c'est donc lui qu'on voit à travers.
   L'anse passe DERRIÈRE le disque (z-index négatif, motif PetDetail .m-disc du
   2026-08-18) : devant, elle semblait posée sur le métal. */
.medallion[b-dudenwix2d]::before {
    content: "";
    position: absolute;
    top: -0.55rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5rem;
    height: 1.1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    background: linear-gradient(145deg, #e5e7eb, #b6bcc6);
    z-index: -1;
}

.medallion[b-dudenwix2d]::after {
    content: "";
    position: absolute;
    top: -0.42rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--ps-accent-soft);
    z-index: -1;
}

/* Vrai QR (/pets/DEMK22KY/qr.png?style=engraved) : modules marine, fond
   transparent — il se pose sur le métal comme une gravure, sans étiquette
   blanche. 6.95rem d'image (le PNG embarque sa zone de silence) = le ratio
   8.5/10.5 validé à l'œil sur l'aperçu de /shop/medallion le 2026-08-17,
   transposé au disque de 8.6rem — identique au fichier de production
   (EngravingLayout.QrSideMm). */
.qr-real[b-dudenwix2d] {
    width: 6.95rem;
    height: 6.95rem;
}

.medallion.engraved[b-dudenwix2d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.75rem;
}

.medallion.engraved span[b-dudenwix2d] {
    font-family: "PS Engraving", ui-monospace, Menlo, monospace;
    /* Assez petit pour que le numéro complet tienne sur UNE ligne dans le cercle */
    font-size: 0.68rem;
    font-weight: 700;
    color: #4b5563;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
}

/* Le NOM domine la gravure (2026-08-17) : ligne courte, elle peut être plus
   grande — le numéro, lui, garde sa taille pour tenir sur une ligne. */
.medallion.engraved span:first-child[b-dudenwix2d] {
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}

.prod-caption[b-dudenwix2d] {
    margin: 0;
    padding: 0.6rem 1.5rem 0;
    text-align: center;
    font-size: 0.68rem;
    color: var(--ps-muted-soft);
}

.prod-body[b-dudenwix2d] {
    padding: 1.2rem 1.8rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    align-items: center;
    text-align: center;
}

.prod-name[b-dudenwix2d] {
    /* Un mot sans espace ne peut pas casser : il sortait de l'écran (2026-09-17). La
       coupure n'intervient QUE faute d'espace, un texte normal ne bouge pas. */
    overflow-wrap: anywhere;
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ps-ink);
}

/* Texte enrichi depuis le 2026-08-24 : le <p> est devenu un bloc qui porte les
   paragraphes et les listes rendus par le service. Mêmes mesures qu'avant. */
.prod-desc[b-dudenwix2d] {
    /* Un mot sans espace ne peut pas casser : il sortait de l'écran (2026-09-17). La
       coupure n'intervient QUE faute d'espace, un texte normal ne bouge pas. */
    overflow-wrap: anywhere;
    margin: 0;
    font-size: 0.85rem;
    color: var(--ps-muted);
    line-height: 1.5;
    max-width: 36ch;
}

.prod-desc p[b-dudenwix2d] { margin: 0.6rem 0; }
.prod-desc p:first-child[b-dudenwix2d] { margin-top: 0; }
.prod-desc p:last-child[b-dudenwix2d] { margin-bottom: 0; }
.prod-desc strong[b-dudenwix2d] { font-weight: 800; color: var(--ps-ink); }
.prod-desc em[b-dudenwix2d] { font-style: italic; }
.prod-desc ul[b-dudenwix2d],
.prod-desc ol[b-dudenwix2d] { margin: 0.6rem 0; padding-left: 1.2rem; text-align: left; }
.prod-desc ul[b-dudenwix2d] { list-style: disc; }
.prod-desc ol[b-dudenwix2d] { list-style: decimal; }
.prod-desc li[b-dudenwix2d] { margin: 0.15rem 0; }

.prod-chips[b-dudenwix2d] {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: center;
}

.prod-chips span[b-dudenwix2d] {
    background: var(--ps-accent-soft);
    color: var(--ps-accent-ink);
    border-radius: 9999px;
    padding: 0.22rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 800;
}

.prod-price[b-dudenwix2d] {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.prod-price .amount[b-dudenwix2d] {
    font-size: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--ps-ink);
}

.prod-price .ship[b-dudenwix2d] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ps-muted-soft);
}

/* Bandeau de réassurance, sur le fond de page normal */
.assure[b-dudenwix2d] {
    display: flex;
    justify-content: center;
    gap: 1.6rem;
    flex-wrap: wrap;
    padding: 1.2rem 1rem 2.6rem;
}

.assure span[b-dudenwix2d] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ps-muted);
}

/* Macaron gravé de la face contact (2026-08-17) : deux arcs de texte —
   PAWSENO.COM en haut, le code court en bas — autour du nom et du numéro.
   Même dessin que l'aperçu de /shop/medallion. */
.shop-ring[b-dudenwix2d] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.shop-ring text[b-dudenwix2d] {
    font-family: "PS Engraving", ui-monospace, Menlo, monospace;
    font-weight: 700;
    fill: #4b5563;
    letter-spacing: 0.14em;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   VITRINE À PLUSIEURS PRODUITS (2026-08-25, épreuve « B — Magasin » validée)

   Tout ce qui précède sert la vitrine à UN produit et n'a pas bougé. Ce qui suit ne
   s'affiche qu'à partir du second : une grille de tuiles, et la fiche qui s'ouvre au
   clic. La barre d'outils, elle, est le vocabulaire GLOBAL (.ps-toolbar, .ps-search,
   .ps-chip, .ps-select) — seule sa mise en place vit ici, comme le veut la règle.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* En vitrine à plusieurs, le bandeau s'aligne sur la largeur de la GRILLE : la
   pastille panier doit tomber sur le bord droit des tuiles, pas 12rem avant. Le titre
   reste centré — .band-spacer équilibre toujours la pastille. */
.shop-band.wide .band-bar[b-dudenwix2d] {
    max-width: var(--ps-page-w); /* mesure commune des pages utilisateur (2026-09-18) */
}

.shop-tools[b-dudenwix2d] {
    max-width: var(--ps-page-w); /* mesure commune des pages utilisateur (2026-09-18) */
    margin: 0 auto;
    padding: 0 1.25rem;
}

.shop-tools .ps-toolbar[b-dudenwix2d] {
    margin-top: 0;
}

.shop-stage[b-dudenwix2d] {
    max-width: var(--ps-page-w); /* mesure commune des pages utilisateur (2026-09-18) */
    margin: 0 auto;
    padding: 0 1.25rem;
}

.shop-grid[b-dudenwix2d] {
    display: grid;
    gap: 1.1rem;
    margin-top: 1.25rem;
    /* 14,5 rem (était 15,5) : à la mesure commune de 66 rem, quatre tuiles par rangée
       tiennent encore (4 × 14,5 + 3 × 1,1 = 61,3 ≤ 63,5 utiles). 2026-09-18. */
    grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
}

/* ── La tuile ─────────────────────────────────────────────────────────────────
   Elle ne vend pas, elle ouvre. Le geste est UNIQUE : un bouton transparent posé sur
   toute la carte. Jamais un bouton IMBRIQUÉ dans un lien — la navigation améliorée
   traite l'ancre d'abord et la carte s'ouvrirait quand même (leçon de l'étoile des
   favoris, 2026-08-21). La pastille « Voir le produit » est donc un <span>. */
.tile[b-dudenwix2d] {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.tile:hover[b-dudenwix2d] {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -22px var(--ps-shadow);
}

.tile-open[b-dudenwix2d] {
    position: absolute;
    inset: 0;
    z-index: 4;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    border-radius: inherit;
}

/* Le focus se voit sur la CARTE, pas sur un rectangle invisible posé dessus. */
.tile:has(.tile-open:focus-visible)[b-dudenwix2d] {
    outline: 3px solid var(--ps-accent);
    outline-offset: 2px;
}

.tile-open:focus-visible[b-dudenwix2d] { outline: none; }

/* Fond « lagon » du visuel — le même dégradé que la fiche à un produit, à l'échelle
   de la tuile : tokens de bout en bout, donc le sombre suit tout seul. */
/* CARRÉE depuis le 2026-08-25 : c'est le rapport dans lequel l'Admin cadre l'image
   dédiée, donc c'est celui qu'il faut rendre. Cuire un carré et l'afficher en 4/3
   recadrerait le cadrage de l'admin — le défaut qu'on venait de corriger. Un produit
   sans image dédiée y est recadré au centre, comme avant. */
.tile-visual[b-dudenwix2d] {
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(16rem 10rem at 50% -2.5rem, var(--ps-cyan-soft), transparent 78%),
        linear-gradient(180deg, var(--ps-accent-soft), var(--ps-surface) 92%);
    /* Sandwich de l'anse du médaillon : le ::before en z négatif doit rester DANS ce
       contexte d'empilement, sinon il glisse sous le fond et disparaît. */
    isolation: isolate;
}

/* ⚠️ La photo est posée en ABSOLU, pas en `height: 100%` (2026-08-25, mesuré).
   `.tile-visual` tient sa hauteur d'un `aspect-ratio` : elle est donc CALCULÉE, pas
   déclarée, et un pourcentage de hauteur qui n'a pas de parent à hauteur définie
   retombe sur `auto`. L'image reprenait alors son rapport naturel — 457 px de haut
   mesurés dans un cadre de 193 px — et `object-fit: cover` n'avait plus rien à
   recadrer puisque la boîte épousait déjà l'image. Résultat : `overflow: hidden`
   coupait 264 px par le bas et l'on ne voyait que le sommet de la photo. `inset: 0`
   donne une boîte à hauteur définie sans dépendre du parent, et `cover` recadre alors
   au centre pour de vrai. */
.tile-visual > img[b-dudenwix2d] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Le médaillon n'a AUCUNE photo en base : ce sont ses faces qui le rendent
   reconnaissable. Même disque que la vitrine, à l'échelle de la tuile. */
.tile-medal[b-dudenwix2d] { width: 6.4rem; height: 6.4rem; }
.tile-medal .qr-real[b-dudenwix2d] { width: 5.2rem; height: 5.2rem; }

.tile-ph[b-dudenwix2d] { display: grid; place-items: center; color: var(--ps-accent-ink); opacity: 0.5; }
.tile-ph svg[b-dudenwix2d] { width: 3.2rem; height: 3.2rem; }

.tile-flag[b-dudenwix2d] { position: absolute; top: 0.7rem; left: 0.7rem; z-index: 2; }

/* La rupture se dit SUR la photo : la tuile reste en boutique (Active), c'est la
   commande qui est refusée — le distinguo InStock / Active du service. */
.tile-out[b-dudenwix2d] {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    background: rgba(20, 26, 48, 0.28);
}

.tile-body[b-dudenwix2d] {
    padding: 0.95rem 1.05rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
}

.tile-cat[b-dudenwix2d] {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ps-accent-ink);
}

.tile-name[b-dudenwix2d] {
    /* Un mot sans espace ne peut pas casser : il sortait de l'écran (2026-09-17). La
       coupure n'intervient QUE faute d'espace, un texte normal ne bouge pas. */
    overflow-wrap: anywhere;
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--ps-ink);
    letter-spacing: -0.01em;
}

/* Deux lignes, jamais trois : c'est ce qui garantit que toutes les tuiles d'une rangée
   finissent à la même hauteur. Le reste du texte est dans la fiche. */
.tile-teaser[b-dudenwix2d] {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--ps-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pied EN COLONNE : posé en ligne, « Ajouter au panier » passait sur deux lignes et
   chaque tuile prenait une hauteur différente. */
.tile-foot[b-dudenwix2d] {
    margin-top: auto;
    padding-top: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.tile-price[b-dudenwix2d] { display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; }
.tile-price .amount[b-dudenwix2d] { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ps-ink); }
.tile-price .ship[b-dudenwix2d] { font-size: 0.68rem; font-weight: 700; color: var(--ps-muted-soft); }

/* ═══ La fiche produit ═════════════════════════════════════════════════════════
   Vocabulaire de la modale d'offre (/partners, gabarit « Affiche » validé), et non
   .ps-dialog qui est réservé aux CONFIRMATIONS. Dupliqué ici comme le veut le motif
   maison des bandeaux et des tiroirs : à la troisième copie, il montera dans
   input.css. */
.pd-scrim[b-dudenwix2d] {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(26, 34, 64, 0.55);
    display: grid;
    place-items: center;
    padding: 1rem;
}

.pd-modal[b-dudenwix2d] {
    position: relative;
    width: min(44rem, 100%);
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    border-radius: 1.4rem;
    overflow: hidden;
    box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.5);
}

.pd-x[b-dudenwix2d] {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    z-index: 5;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 9999px;
    border: none;
    background: var(--ps-surface);
    color: var(--ps-ink);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ps-btn-shadow);
    font-family: inherit;
    font-weight: 800;
}

/* Cadre de hauteur FIXE : la photo entière au centre, la même marge des quatre côtés,
   un flou d'elle-même derrière pour remplir. La fiche garde ainsi la même allure d'un
   produit à l'autre, que la photo soit verticale, carrée ou panoramique. */
.pd-hero[b-dudenwix2d] {
    position: relative;
    height: 20rem;
    flex: none;
    overflow: hidden;
    background: #232D4E;
}

.pd-hero-bg[b-dudenwix2d] {
    position: absolute;
    inset: -8%;
    background-size: cover;
    background-position: center;
    filter: blur(18px) brightness(0.62) saturate(1.15);
    transform: scale(1.12);
}

/* La VIGNETTE, nette, posée exactement là où la grande photo va s'afficher (2026-08-25).
   Ouvrir la fiche demandait le fichier plein format à S3 : le cadre restait vide, un flou
   sans sujet, le temps du téléchargement. Cette couche-ci ne coûte RIEN — c'est l'URL que
   la tuile vient d'afficher, servie par le cache (S3 répond `immutable`, un an) — et la
   photo apparaît donc tout de suite, un peu douce, puis se durcit sans bouger d'un pixel.

   ⚠️ Elle doit tomber au pixel sur la grande, sinon on voit un saut. D'où `inset: 1.1rem`
   (la moitié des 2.2rem de plafond de l'image) + `contain` : dans une boîte réduite des
   mêmes 2.2rem, `contain` donne exactement ce que produisent `max-width`/`max-height` +
   `margin: auto`. Vérifié à la mesure sur la photo réelle : 160,2 × 284,8 des deux côtés.
   Cela tient parce que la vignette (400 px de grand côté) est TOUJOURS plus grande que la
   hauteur utile du cadre (284,8 px) — `contain` ne l'agrandit donc jamais. */
.pd-hero-ph[b-dudenwix2d] {
    position: absolute;
    inset: 1.1rem;
    z-index: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* ⚠️ `inset: 0` + `margin: auto` + des plafonds CALCULÉS : la seule recette qui centre
   vraiment (mesurée sur les quatre formats — marges gauche/droite et haut/bas égales
   au pixel). `max-height: 100%` ne contraint pas un enfant de grille, et une image
   absolue en width/height auto garde sa taille naturelle : les deux débordaient du
   cadre, donc se faisaient couper en silence par overflow. */
.pd-hero > img[b-dudenwix2d] {
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 2;
    display: block;
    width: auto;
    height: auto;
    max-width: calc(100% - 2.2rem);
    max-height: calc(100% - 2.2rem);
    border-radius: 0.5rem;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.55);
}

/* Sans photo : le médaillon montre ses deux faces sur le fond lagon de la vitrine. */
.pd-hero.metal[b-dudenwix2d] {
    background:
        radial-gradient(18rem 12rem at 50% -2rem, var(--ps-cyan-soft), transparent 78%),
        linear-gradient(180deg, var(--ps-accent-soft), var(--ps-surface) 92%);
}

.pd-faces[b-dudenwix2d] {
    position: absolute;
    inset: 0;
    display: flex;
    gap: 1.6rem;
    justify-content: center;
    align-items: center;
    isolation: isolate;
}

.pd-faces figure[b-dudenwix2d] { margin: 0; text-align: center; }
.pd-faces figcaption[b-dudenwix2d] { margin-top: 0.5rem; font-size: 0.7rem; font-weight: 700; color: var(--ps-muted); }

/* Les vignettes CHANGENT la photo du cadre ; elles ne l'accompagnent pas. */
.pd-thumbs[b-dudenwix2d] {
    flex: none;
    display: flex;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--ps-line);
}

.pd-thumbs button[b-dudenwix2d] {
    flex: none;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 0.8rem;
    border: 2px solid var(--ps-line);
    background: var(--ps-well);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
}

.pd-thumbs button img[b-dudenwix2d] { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumbs button[aria-pressed="true"][b-dudenwix2d] { border-color: var(--ps-accent); }
.pd-thumbs button:hover:not([aria-pressed="true"])[b-dudenwix2d] { border-color: var(--ps-accent); }

/* Le titre sous le cadre : rien ne se pose sur le visuel, et le texte retrouve le
   contraste franc de la surface claire. La marge droite épargne la croix. */
.pd-head[b-dudenwix2d] { padding: 1.2rem 3.6rem 0 1.4rem; }

.pd-kicker[b-dudenwix2d] {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ps-accent-ink);
}

.pd-title[b-dudenwix2d] {
    margin: 0.2rem 0 0;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--ps-ink);
    letter-spacing: -0.01em;
}

.pd-body[b-dudenwix2d] { padding: 0.8rem 1.4rem 0; overflow-y: auto; }

.pd-desc[b-dudenwix2d] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ps-muted);
    max-width: 38rem;
}

.pd-desc p[b-dudenwix2d] { margin: 0.7rem 0; }
.pd-desc p:first-child[b-dudenwix2d] { margin-top: 0; }
.pd-desc p:last-child[b-dudenwix2d] { margin-bottom: 0; }
.pd-desc strong[b-dudenwix2d] { font-weight: 800; color: var(--ps-ink); }
.pd-desc em[b-dudenwix2d] { font-style: italic; }
.pd-desc ul[b-dudenwix2d],
.pd-desc ol[b-dudenwix2d] { margin: 0.7rem 0; padding-left: 1.3rem; }
.pd-desc ul[b-dudenwix2d] { list-style: disc; }
.pd-desc ol[b-dudenwix2d] { list-style: decimal; }
.pd-desc li[b-dudenwix2d] { margin: 0.2rem 0; }

.pd-meta[b-dudenwix2d] { margin: 0.9rem 0 0; display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }

.pd-foot[b-dudenwix2d] {
    margin-top: 1.2rem;
    padding: 0.95rem 1.4rem;
    flex: none;
    background: var(--ps-well);
    border-top: 1px solid var(--ps-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.pd-foot .price[b-dudenwix2d] { display: flex; flex-direction: column; }
.pd-foot .amount[b-dudenwix2d] { font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ps-ink); }
.pd-foot .ship[b-dudenwix2d] { font-size: 0.72rem; font-weight: 700; color: var(--ps-muted-soft); }

.pd-actions[b-dudenwix2d] { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }

/* La quantité : MÊME vocabulaire .qty que la ligne de panier (Cart.razor.css). Deux
   endroits qui règlent le même nombre doivent se ressembler, sinon on croit régler
   deux nombres différents. */
.pd-qty[b-dudenwix2d] { display: inline-flex; align-items: center; gap: 0.5rem; }

.pd-qty button[b-dudenwix2d] {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 9999px;
    border: 2px solid var(--ps-line);
    background: var(--ps-well);
    color: var(--ps-ink);
    font: inherit;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.pd-qty button:hover:not(:disabled)[b-dudenwix2d] { border-color: var(--ps-accent); }
.pd-qty button:disabled[b-dudenwix2d] { opacity: 0.45; cursor: default; }
.pd-qty .n[b-dudenwix2d] { min-width: 1.3rem; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.pd-qty .lbl[b-dudenwix2d] { font-size: 0.72rem; font-weight: 800; color: var(--ps-muted-soft); margin-right: 0.15rem; }

@media (prefers-reduced-motion: reduce) {
    .tile[b-dudenwix2d] { transition: none; }
    .tile:hover[b-dudenwix2d] { transform: none; }
}

/* Borne atteinte dans la fiche (ShopLimits, 2026-09-16) : un mot sous la barre d'achat,
   muet quand c'est un plafond de quantité, pêche quand le panier est plein. */
.pd-limit[b-dudenwix2d] {
    flex-basis: 100%;
    margin: 0.35rem 0 0;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ps-muted);
}

.pd-limit.warn[b-dudenwix2d] {
    color: var(--ps-on-peach);
    background: var(--ps-peach-soft);
    border-radius: 0.7rem;
    padding: 0.5rem 0.75rem;
}
/* _content/PawSeekrWebApp/Pages/Support.razor.rz.scp.css */
/* Page support = ticketing (2026-09-18, épreuve validée). Bandeau color-block des
   listes, rail « Mes tickets » + zone principale (formulaire ou fil), FAQ dessous.
   Tokens --ps-* partout ; les vocabulaires globaux (.ps-block-*, .ps-btn, .ps-input)
   font le composant, ici seulement le placement et le fil de chat. */

.sup-band[b-naywp6tv40] {
    position: relative;
    overflow: hidden;
    margin-top: -1rem;
    padding: 3.2rem 0 1.6rem;
    background:
        radial-gradient(24rem 10rem at 97% -4.5rem, var(--ps-accent-soft), transparent 65%),
        linear-gradient(180deg, var(--ps-band-top) 0, var(--ps-bg) 7rem);
}



.sup-inner[b-naywp6tv40] {
    max-width: var(--ps-page-w); /* mesure commune des pages utilisateur (2026-09-18) */
    margin: 0 auto;
    padding: 0 1rem;
}

.sup-title-row[b-naywp6tv40] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

/* Le « ? » du mode d'emploi : la COPIE EXACTE du bouton adm-help des éditeurs admin
   (1,8 rem, filet 1,5 px, crème, encre grisée, teal au survol) — même geste, même
   apparence sur tout le site. Première version « ronde à ombre qui pulse » retirée
   le 2026-09-18 à la demande du fondateur. */
.sup-help[b-naywp6tv40] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    margin-top: 0.25rem;
    border-radius: 9999px;
    border: 1.5px solid var(--ps-line);
    background: var(--ps-well);
    color: var(--ps-muted);
    cursor: pointer;
    flex: none;
    padding: 0;
    font-family: inherit;
    font-weight: 800;
    font-size: 0.82rem;
    line-height: 1;
}

.sup-help:hover[b-naywp6tv40] {
    border-color: var(--ps-accent);
    color: var(--ps-accent-ink);
}

.sup-help:focus-visible[b-naywp6tv40] {
    outline: 3px solid var(--ps-accent);
    outline-offset: 2px;
}

.sup-grid[b-naywp6tv40] {
    display: grid;
    grid-template-columns: 17rem 1fr;
    gap: 1.25rem;
    padding-top: 1.25rem;
}

@media (max-width: 900px) {
    .sup-grid[b-naywp6tv40] {
        grid-template-columns: 1fr;
    }
}

/* ── Rail ── */
.sup-rail[b-naywp6tv40] {
    padding: 1.35rem 1.4rem;
    box-shadow: none;
    border: 2px solid var(--ps-line);
    align-self: start;
}

.sup-rail-empty[b-naywp6tv40] {
    margin: 0.9rem 0 0;
    font-size: 0.82rem;
    color: var(--ps-muted);
}

.sup-tlist[b-naywp6tv40] {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sup-tlist a[b-naywp6tv40] {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 2px solid var(--ps-line);
    border-radius: 1rem;
    padding: 0.6rem 0.75rem;
    background: var(--ps-well);
}

.sup-tlist a:hover[b-naywp6tv40] {
    border-color: var(--ps-accent);
}

.sup-tlist a.cur[b-naywp6tv40] {
    border-color: var(--ps-accent);
    background: var(--ps-accent-soft);
}

.sup-tlist .r1[b-naywp6tv40] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: var(--ps-muted);
}

.sup-tlist .r2[b-naywp6tv40] {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sup-tlist .r3[b-naywp6tv40] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: var(--ps-muted-soft);
}

.sup-newbtn[b-naywp6tv40] {
    margin-top: 0.9rem;
    width: 100%;
}

.sup-no[b-naywp6tv40] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
}

/* ── Pastilles d'état et de type ── */
.sup-pill[b-naywp6tv40] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 1.5rem;
    padding: 0 0.6rem;
    border-radius: 9999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.sup-pill i[b-naywp6tv40] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: currentColor;
    display: inline-block;
}

.p-open[b-naywp6tv40] { background: var(--ps-accent-soft); color: var(--ps-accent-ink); }
.p-wait[b-naywp6tv40] { background: var(--ps-peach-soft); color: var(--ps-on-peach); }
.p-closed[b-naywp6tv40] { background: var(--ps-line); color: var(--ps-muted); }
.p-type[b-naywp6tv40] { background: var(--ps-cyan-soft); color: var(--ps-cyan-text); }

.p-code[b-naywp6tv40] {
    background: var(--ps-pink-soft);
    color: var(--ps-pink-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.04em;
}

/* ── Formulaire ── */
.sup-main[b-naywp6tv40] {
    padding: 1.35rem 1.4rem;
}

.sup-missing[b-naywp6tv40] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

.sup-form[b-naywp6tv40] {
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
    margin-top: 1rem;
}

.sup-row2[b-naywp6tv40] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 640px) {
    .sup-row2[b-naywp6tv40] {
        grid-template-columns: 1fr;
    }
}

.sup-field[b-naywp6tv40] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.sup-field .ps-select[b-naywp6tv40] {
    height: 2.9rem;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
}

.sup-opt[b-naywp6tv40] {
    font-weight: 600;
    color: var(--ps-muted-soft);
}

.sup-mono[b-naywp6tv40] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

.sup-locked[b-naywp6tv40] {
    background: transparent;
    border-style: dashed;
    color: var(--ps-muted);
    cursor: default;
}

.sup-lock[b-naywp6tv40] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--ps-muted-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-left: 0.4rem;
}

.sup-lock svg[b-naywp6tv40] {
    width: 0.8rem;
    height: 0.8rem;
}

.sup-area[b-naywp6tv40] {
    min-height: 8rem;
    line-height: 1.5;
    resize: vertical;
}

.sup-area-s[b-naywp6tv40] {
    min-height: 5rem;
}

.sup-cnt[b-naywp6tv40] {
    font-size: 0.72rem;
    color: var(--ps-muted-soft);
    text-align: right;
}

.sup-ctx[b-naywp6tv40] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.78rem;
    color: var(--ps-muted);
}

.sup-chip[b-naywp6tv40] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 1.7rem;
    padding: 0 0.7rem;
    border-radius: 9999px;
    background: var(--ps-well);
    border: 2px solid var(--ps-line);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--ps-ink);
    font-variant-numeric: tabular-nums;
}

.sup-chip[b-naywp6tv40]  .hex {
    width: 0.95em;
    height: 0.95em;
    flex: none;
    color: var(--ps-accent-ink);
}

.sup-actions[b-naywp6tv40] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.sup-actions-end[b-naywp6tv40] {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.sup-hint[b-naywp6tv40] {
    font-size: 0.78rem;
    color: var(--ps-muted);
}

/* Étiquette « maquette » : dorée, retirée avec le mock. */
.sup-mock[b-naywp6tv40] {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ps-gold-ink);
    background: var(--ps-gold);
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    cursor: help;
}

.sup-ghost[b-naywp6tv40] {
    background: transparent;
    color: var(--ps-ink);
    border: 2px solid var(--ps-line);
    box-shadow: none;
    padding: 0.6rem 1.3rem;
}

.sup-ghost.on-surface[b-naywp6tv40] {
    background: var(--ps-surface);
}

/* ── Fil du ticket ── */
.sup-ticket[b-naywp6tv40] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sup-tk-hd[b-naywp6tv40] {
    padding: 1.1rem 1.4rem;
    border-bottom: 2px solid var(--ps-line);
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
    /* Le même dégradé que les bandeaux de modales : le premier pixel dit « fil ». */
    background: linear-gradient(90deg, var(--ps-accent-soft), var(--ps-cyan-soft));
}

.sup-tk-who[b-naywp6tv40] {
    flex: 1 1 16rem;
    min-width: 0;
}

.sup-tk-k[b-naywp6tv40] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ps-accent-ink);
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.sup-tk-hd h2[b-naywp6tv40] {
    margin: 0.25rem 0 0.4rem;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.sup-tk-meta[b-naywp6tv40] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.sup-tk-meta .sup-chip[b-naywp6tv40] {
    height: 1.5rem;
    font-size: 0.68rem;
}

.sup-tk-act[b-naywp6tv40] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.sup-thread[b-naywp6tv40] {
    padding: 1.2rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: var(--ps-well);
    max-height: 32rem;
    overflow: auto;
}

.sup-ev[b-naywp6tv40] {
    align-self: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ps-muted);
    background: var(--ps-surface);
    border: 2px dashed var(--ps-dash);
    border-radius: 9999px;
    padding: 0.2rem 0.8rem;
    text-align: center;
}

.sup-msg[b-naywp6tv40] {
    max-width: 78%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sup-msg.me[b-naywp6tv40] {
    align-self: flex-end;
    align-items: flex-end;
}

.sup-msg .from[b-naywp6tv40] {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--ps-muted);
    display: flex;
    gap: 0.35rem;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sup-msg .from svg[b-naywp6tv40] {
    width: 0.85rem;
    height: 0.85rem;
}

.sup-msg .from em[b-naywp6tv40] {
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
    color: var(--ps-muted-soft);
}

.sup-msg .bub[b-naywp6tv40] {
    padding: 0.7rem 0.95rem;
    border-radius: 1.1rem;
    border-top-left-radius: 0.35rem;
    font-size: 0.92rem;
    line-height: 1.5;
    background: var(--ps-surface);
    border: 2px solid var(--ps-line);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.sup-msg.me .bub[b-naywp6tv40] {
    background: var(--ps-btn);
    color: var(--ps-btn-ink);
    border-color: transparent;
    border-top-left-radius: 1.1rem;
    border-top-right-radius: 0.35rem;
}

.sup-msg.team .bub[b-naywp6tv40] {
    border-color: var(--ps-accent);
    border-left-width: 4px;
}

.sup-msg .when[b-naywp6tv40] {
    font-size: 0.68rem;
    color: var(--ps-muted-soft);
}

.sup-compose[b-naywp6tv40] {
    padding: 1rem 1.4rem 1.2rem;
    border-top: 2px solid var(--ps-line);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.sup-closedbar[b-naywp6tv40] {
    padding: 1.1rem 1.4rem;
    border-top: 2px solid var(--ps-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--ps-peach-soft);
}

.sup-closedbar p[b-naywp6tv40] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ps-on-peach);
}

/* ═══ Ticket d'exemple (2026-09-18, épreuve validée) : la marque « exemple » dans le
   rail, l'encart doré en tête du fil, et « L'équipe écrit… » pendant la réponse
   simulée. Or = la couleur des maquettes (.sup-mock), pour dire la même chose. ═══ */
.sup-newbtn-cur[b-naywp6tv40] {
    opacity: 0.55;
    cursor: default;
    box-shadow: none;
}

.sup-tlist .r3[b-naywp6tv40] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.sup-demo-tag[b-naywp6tv40] {
    display: inline-flex;
    align-items: center;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ps-gold-ink);
    background: var(--ps-gold);
    padding: 0.12rem 0.45rem;
    border-radius: 9999px;
}

.sup-demo-note[b-naywp6tv40] {
    margin: 1rem 1.4rem 0;
    padding: 0.6rem 0.9rem;
    border-radius: 0.8rem;
    background: var(--ps-gold);
    color: var(--ps-gold-ink);
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.sup-demo-note svg[b-naywp6tv40] {
    width: 15px;
    height: 15px;
    flex: none;
}

.sup-typing .bub[b-naywp6tv40] {
    display: inline-flex;
    gap: 0.3rem;
    padding: 0.7rem 0.9rem;
}

.sup-typing .bub i[b-naywp6tv40] {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 9999px;
    background: var(--ps-accent);
    animation: supDot-b-naywp6tv40 1s infinite ease-in-out;
}

.sup-typing .bub i:nth-child(2)[b-naywp6tv40] { animation-delay: 0.15s; }
.sup-typing .bub i:nth-child(3)[b-naywp6tv40] { animation-delay: 0.3s; }

@keyframes supDot-b-naywp6tv40 {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-3px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .sup-typing .bub i[b-naywp6tv40] { animation: none; opacity: 0.7; }
}
/* _content/PawSeekrWebApp/Pages/SupportUndelivered.razor.rz.scp.css */
/* Copie de Support.razor.css (motif maison : le CSS scopé se duplique par page) —
   variante « mail non remis » (2026-09-16). À refondre avec le futur support / ticketing. */
/* Page support — même bandeau color-block que les listes, formulaire dans une
   carte, tokens --ps-* partout. */

.sup-band[b-0l2nxknav7] {
    position: relative;
    overflow: hidden;
    margin-top: -1rem;
    /* Aligné sur le .list-band des articles (2026-08-17). */
    padding: 3.2rem 0 1.6rem;
    background:
        radial-gradient(24rem 10rem at 97% -4.5rem, var(--ps-accent-soft), transparent 65%),
        linear-gradient(180deg, var(--ps-band-top) 0, var(--ps-bg) 7rem);
}



.sup-inner[b-0l2nxknav7] {
    max-width: 44rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.sup-body[b-0l2nxknav7] {
    padding-bottom: 3rem;
}

.sup-card[b-0l2nxknav7] {
    padding: 1.6rem;
    margin-top: 1.6rem;
}

.sup-form[b-0l2nxknav7] {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.sup-field[b-0l2nxknav7] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.sup-form .ps-select[b-0l2nxknav7] {
    height: 2.9rem;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
}

.sup-area[b-0l2nxknav7] {
    min-height: 9rem;
    padding: 0.7rem 0.9rem;
    line-height: 1.5;
    resize: vertical;
}

.sup-err[b-0l2nxknav7] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ps-pink-ink);
}

/* Contexte technique embarqué : montré, jamais saisissable */
.sup-context[b-0l2nxknav7] {
    background: var(--ps-well);
    border: 2px solid var(--ps-line);
    border-radius: 1rem;
    padding: 0.9rem 1rem;
}

.sup-context-t[b-0l2nxknav7] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ps-muted-soft);
    margin: 0 0 0.5rem;
}

.sup-chips[b-0l2nxknav7] {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.sup-chip[b-0l2nxknav7] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--ps-surface);
    border: 2px solid var(--ps-line);
    border-radius: 9999px;
    padding: 0.16rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--ps-muted);
    font-variant-numeric: tabular-nums;
}

/* Hexagone du médaillon : SVG et non le glyphe ⬡, absent de la pile arrondie du
   site — le repli système décalait l'icône par rapport au texte (cf. HexIcon).
   ::deep parce que le <svg> est rendu par le composant enfant, pas par cette page. */
.sup-chip[b-0l2nxknav7]  .hex {
    width: 0.95em;
    height: 0.95em;
    flex: none;
    color: var(--ps-accent-ink);
}

.sup-actions[b-0l2nxknav7] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.3rem;
}

.sup-hint[b-0l2nxknav7] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ps-muted-soft);
}

.sup-foot[b-0l2nxknav7] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ps-muted-soft);
    text-align: center;
    margin: 1.2rem 0 0;
}

/* Accusé de réception */
.sup-done[b-0l2nxknav7] {
    text-align: center;
}

.sup-done-ic[b-0l2nxknav7] {
    font-size: 3rem;
    margin: 0;
    line-height: 1;
}

.sup-done-t[b-0l2nxknav7] {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--ps-ink);
    margin: 0.7rem 0 0;
}

.sup-done-p[b-0l2nxknav7] {
    font-size: 0.9rem;
    color: var(--ps-muted);
    line-height: 1.55;
    margin: 0.6rem 0 0;
}

/* Champs figés : adresse et motif viennent du suivi, jamais de la saisie. */
.sup-form .ps-input[readonly][b-0l2nxknav7] {
    background: var(--ps-well);
    color: var(--ps-muted);
    cursor: default;
}

.sup-done-svg[b-0l2nxknav7] {
    width: 3rem;
    height: 3rem;
    color: var(--ps-accent-ink);
}
/* _content/PawSeekrWebApp/Pages/TooManyRequests.razor.rz.scp.css */
/* Même centrage vertical que /404 : la mise en scène vit dans NotFoundView. */
.page-429[b-0zsjxkt1ry] {
    width: 100%;
    flex: 1;
    align-self: stretch;
    display: grid;
    place-items: center;
    background: var(--ps-bg);
}
/* _content/PawSeekrWebApp/Pages/UpdatePassword.razor.rz.scp.css */
/* État « mot de passe changé », épreuve cadenas teal (2026-08-10).
   L'ancien .wrapper/.page-bg datait du style d'avant la refonte studio. */

.success-swap[b-jyeghohzib] {
    text-align: center;
}

/* Pastille cadenas : teal plein, encre crème du monde studio — invariante au
   thème, même précédent assumé que les couleurs en dur d'AuthShell.razor.css. */
.mascot-lock[b-jyeghohzib] {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ps-accent);
    color: #FFF4E4;
    box-shadow: 0 4px 0 rgba(8, 52, 59, 0.25);
}

.mascot-lock svg[b-jyeghohzib] {
    width: 2.15rem;
    height: 2.15rem;
}

.hint[b-jyeghohzib] {
    font-size: 0.8rem;
    color: var(--ps-muted-soft);
}