/* Prophetix — vitrine des applications.

   Tout vient de la charte (charte/prophetix-charte.css, chargée avant cette feuille) : couleurs
   --px-*, police Inter, cartouche. Le violet porte la marque (en-tête, mur, boutons) ; turquoise,
   lilas, anis et grège sont des fonds, en alternance d'une application à l'autre (classes
   teinte--…), sur lesquels on écrit à l'encre. Chaque application se reconnaît à son cartouche. */

:root {
    --rayon: 10px;
    --largeur: 1180px;

    /* Couleurs d'état : hors palette de marque, qui n'a ni vert ni rouge. Choisies pour se lire
       en texte (4,5:1 au moins) sur le blanc comme sur les fonds clairs de la charte. */
    --etat-succes: #1D6B3A;
    --etat-danger: #A12C2C;
    --etat-attention: #7A5C00;

    color-scheme: light;
}

/* Thème sombre, sur la préférence du système. La charte le rattache à un attribut
   (data-px-theme="sombre") ; une vitrine sans script ne peut pas le poser, d'où la reprise ici des
   rôles de ce bloc, valeurs de la charte comprises. Une retouche du thème sombre de la charte se
   reporte donc aussi dans ce bloc. */
@media (prefers-color-scheme: dark) {
    :root {
        --px-fond: var(--px-nuit);
        --px-surface: var(--px-nuit-surface);
        --px-bordure: var(--px-nuit-bordure);
        --px-texte: var(--px-grege);
        --px-texte-secondaire: #AFA8C2;
        --px-primaire: var(--px-lilas);
        --px-primaire-survol: #CDB6D9;
        --px-primaire-texte: var(--px-nuit);
        --px-violet-clair: #2D2552;
        --px-focus: rgba(188, 158, 203, .45);

        --etat-succes: #7ED29A;
        --etat-danger: #F08080;
        --etat-attention: #E3C766;

        color-scheme: dark;
    }

    .px-cartouche:not(.px-cartouche--anis) { box-shadow: inset 0 0 0 1px var(--px-lilas); }
}

/* Les fonds des cartes : une teinte pleine et sa version claire, posées par le serveur
   (Modele/Teintes). */
.teinte--turquoise { --teinte: var(--px-turquoise); --teinte-claire: var(--px-turquoise-clair); }
.teinte--lilas     { --teinte: var(--px-lilas);     --teinte-claire: var(--px-lilas-clair); }
.teinte--anis      { --teinte: var(--px-anis);      --teinte-claire: var(--px-anis-clair); }
.teinte--grege     { --teinte: var(--px-grege);     --teinte-claire: var(--px-grege-clair); }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
    margin: 0;
    background: var(--px-fond);
    color: var(--px-texte);
    font-family: var(--px-police);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

h1, h2, h3, h4 { line-height: 1.15; margin: 0; font-weight: 700; }

p { margin: 0 0 1em; }

/* Violet sur les fonds clairs ; sur le violet de l'en-tête du mur et de l'appel final, l'anis
   prend le relais (voir plus bas), sans quoi le contour se perdrait. */
:focus-visible { outline: 3px solid var(--px-primaire); outline-offset: 3px; border-radius: 4px; }

/* Le titre reçoit le focus à chaque navigation (FocusOnNavigate), pour les lecteurs d'écran : ce
   focus programmatique n'a pas à se dessiner. */
h1:focus, h1:focus-visible { outline: none; }

.largeur { width: min(100% - 2.5rem, var(--largeur)); margin-inline: auto; }

.visuellement-cache {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

.evitement {
    position: absolute; left: 1rem; top: -4rem; z-index: 20;
    background: var(--px-anis); color: var(--px-nuit); padding: .5rem 1rem; border-radius: var(--rayon);
}
.evitement:focus { top: 1rem; }

/* ------------------------------------------------------------------ Boutons */

.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .6rem 1.1rem; border-radius: 999px; border: 2px solid transparent;
    font: inherit; font-weight: 650; font-size: .98rem; line-height: 1.2;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color .15s, border-color .15s, color .15s;
}
.bouton--grand { padding: .85rem 1.5rem; font-size: 1.05rem; }
.bouton--primaire { background: var(--px-primaire); color: var(--px-primaire-texte); }
.bouton--primaire:hover { background: var(--px-primaire-survol); }
/* Action principale posée sur le violet : l'anis, « mise en avant ponctuelle » de la charte. */
.bouton--anis { background: var(--px-anis); color: var(--px-nuit); }
.bouton--anis:hover { background: color-mix(in srgb, var(--px-anis) 75%, white); }
.bouton--contour { border-color: color-mix(in srgb, white 55%, transparent); color: white; }
.bouton--contour:hover { border-color: white; background: color-mix(in srgb, white 8%, transparent); }
/* Sur une teinte claire, fixe quel que soit le thème : l'encre, jamais le texte du thème. */
.bouton--contour-encre { border-color: color-mix(in srgb, var(--px-encre) 45%, transparent); color: var(--px-encre); }
.bouton--contour-encre:hover { border-color: var(--px-encre); }
.bouton--neutre { border-color: var(--px-bordure); color: var(--px-texte); background: var(--px-surface); }
.bouton--neutre:hover { border-color: var(--px-texte-secondaire); }
.bouton--danger { background: var(--etat-danger); color: white; }
.bouton[disabled] { opacity: .6; cursor: default; }

@media (prefers-color-scheme: dark) {
    .bouton--danger { color: var(--px-nuit); }
}

.lien-discret {
    background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
    text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 3px;
}
.lien-discret:hover { text-decoration-color: currentColor; }
.lien-discret--danger { color: var(--etat-danger); }

/* ------------------------------------------------------------------ En-tête */

.entete {
    position: sticky; top: 0; z-index: 10;
    background: var(--px-surface); color: var(--px-texte);
    border-bottom: 1px solid var(--px-bordure);
}
.entete__barre { display: flex; align-items: center; gap: 2rem; min-height: 68px; }
.entete__nav { display: flex; gap: 1.5rem; margin-right: auto; font-size: .98rem; }
.entete__nav a { text-decoration: none; color: var(--px-texte-secondaire); }
.entete__nav a:hover { color: var(--px-primaire); text-decoration: underline; }
.entete__actions { display: flex; align-items: center; gap: 1.25rem; font-size: .98rem; }

.marque { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: inherit; }
.marque__nom { font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; }
.marque__suffixe { font-weight: 450; color: var(--px-texte-secondaire); }

@media (max-width: 860px) {
    .entete__nav { display: none; }
    .entete__barre { justify-content: space-between; gap: 1rem; }
    .marque__suffixe { display: none; }
}

@media (max-width: 420px) {
    .entete__actions .lien-discret { display: none; }
}

/* ------------------------------------------------------------------ Hero : le mur des applications */

.hero {
    background: var(--px-violet);
    color: white;
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem);
    overflow: hidden;
}
.hero :focus-visible, .appel :focus-visible { outline-color: var(--px-anis); }
.hero__grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.hero h1 {
    font-size: clamp(2.4rem, 5.2vw, 4.1rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.02;
    margin-bottom: 1.5rem;
    max-width: 13ch;
}
.hero__chapeau { font-size: 1.15rem; line-height: 1.55; max-width: 34em; color: var(--px-grege); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.mur { margin: 0; }
.mur__cases {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem;
}
.mur__legende { margin-top: 1.1rem; font-size: .95rem; color: var(--px-grege); }

/* Chaque case porte le cartouche de son application, sur une teinte de la charte : le texte y est
   à l'encre, quel que soit le thème. */
.case {
    position: relative;
    display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
    aspect-ratio: 1;
    padding: .8rem;
    border-radius: 14px;
    text-decoration: none;
    overflow: hidden;
    color: var(--px-encre);
}
.case__pied { display: grid; gap: .15rem; }
.case__nom { font-weight: 700; font-size: .95rem; line-height: 1.15; }
/* À l'encre et non à l'encre douce : sur le lilas plein, l'encre douce tombe sous 4,5:1. */
.case__etat { font-size: .78rem; }

/* Une application ouverte est pleine et cernée de clair : elle se lit d'un coup d'œil. */
.case--ouverte {
    background: var(--teinte);
    border: 2px solid white;
    box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--px-nuit) 70%, transparent);
}
.case--ouverte .case__etat { font-weight: 650; }

/* Une application annoncée garde sa teinte, éclaircie, et un contour en tirets. */
.case--attendue {
    background: var(--teinte-claire);
    border: 2px dashed var(--teinte);
}
.case--ouverte:hover, .case--attendue:hover { transform: translateY(-2px); }
.case--attendue:hover { border-color: var(--px-anis); }

.case--suite {
    border: 2px dashed var(--px-anis);
    color: var(--px-anis);
}
.case__plus { font-size: 2.1rem; font-weight: 300; line-height: 1; }

/* Une seule entrée orchestrée : les cases se posent l'une après l'autre au chargement. */
@media (prefers-reduced-motion: no-preference) {
    .mur__cases li { animation: pose .5s cubic-bezier(.2, .7, .2, 1) both; }
    .mur__cases li:nth-child(1) { animation-delay: .05s; }
    .mur__cases li:nth-child(2) { animation-delay: .1s; }
    .mur__cases li:nth-child(3) { animation-delay: .15s; }
    .mur__cases li:nth-child(4) { animation-delay: .2s; }
    .mur__cases li:nth-child(5) { animation-delay: .25s; }
    .mur__cases li:nth-child(6) { animation-delay: .3s; }
    .mur__cases li:nth-child(7) { animation-delay: .35s; }
    .mur__cases li:nth-child(8) { animation-delay: .4s; }
    .mur__cases li:nth-child(9) { animation-delay: .45s; }
    .mur__cases li:nth-child(10) { animation-delay: .5s; }
    .mur__cases li:nth-child(11) { animation-delay: .55s; }
    .mur__cases li:nth-child(n+12) { animation-delay: .6s; }
    .case { transition: transform .15s, border-color .15s, background-color .15s; }
}
@keyframes pose { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

@media (max-width: 960px) {
    .hero__grille { grid-template-columns: 1fr; }
    .hero h1 { max-width: 16ch; }
}
@media (max-width: 560px) {
    .mur__cases { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
    .case { padding: .6rem; border-radius: 12px; }
    .case .px-cartouche { min-width: 0; font-size: .7rem; }
    .case__nom { font-size: .85rem; }
    .case__etat { display: none; }
}

/* ------------------------------------------------------------------ Cartouches et icônes */

/* Cartouche de l'application en tête de sa fiche : le même, en plus grand. */
.cartouche--grand { font-size: clamp(1.3rem, 3vw, 1.8rem); }

/* Icône déposée dans l'administration, seulement sur la fiche. */
.icone {
    display: inline-grid; place-items: center; flex: none;
    border-radius: 22%;
    overflow: hidden;
}
.icone img { width: 100%; height: 100%; object-fit: cover; }
.icone--fiche { width: 72px; height: 72px; }

/* ------------------------------------------------------------------ Sections */

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section__titre { font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -.02em; margin-bottom: 1.75rem; }

.etapes {
    list-style: none; margin: 0; padding: 0; counter-reset: etape;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem;
}
.etape { counter-increment: etape; border-top: 2px solid var(--px-texte); padding-top: 1.1rem; }
.etape::before {
    content: counter(etape);
    display: block; font-size: 3rem; font-weight: 800; line-height: 1; color: var(--px-primaire);
    margin-bottom: .75rem; letter-spacing: -.04em;
}
.etape h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.etape p { color: var(--px-texte-secondaire); max-width: 30em; }

@media (max-width: 760px) {
    .etapes { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ------------------------------------------------------------------ Catalogue */

.section--catalogue { background: var(--px-surface); border-block: 1px solid var(--px-bordure); }
.catalogue__entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1rem; }
.catalogue__entete .section__titre { margin-bottom: 0; }
.catalogue__groupe { font-size: 1.15rem; margin: 2.25rem 0 .75rem; }
.catalogue__note { color: var(--px-texte-secondaire); margin: -.4rem 0 .9rem; }
.catalogue__vide { color: var(--px-texte-secondaire); margin-top: 2rem; }

.filtres { display: flex; flex-wrap: wrap; gap: .4rem; }
.filtre {
    padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--px-bordure);
    text-decoration: none; font-size: .92rem; color: var(--px-texte-secondaire);
}
.filtre:hover { border-color: var(--px-texte-secondaire); color: var(--px-texte); }
.filtre[aria-current="true"] { background: var(--px-primaire); border-color: var(--px-primaire); color: var(--px-primaire-texte); }

.liste-apps {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem;
}

/* Une carte par application : son cartouche, puis son nom et son accroche, sur la version claire
   de sa teinte. Fond clair fixe : le texte y reste à l'encre dans les deux thèmes. */
.ligne-app {
    position: relative;
    display: flex; gap: 1.1rem; align-items: flex-start;
    padding: 1.15rem 1.25rem;
    border-radius: var(--rayon);
    background: var(--teinte-claire);
    border: 1px solid var(--teinte);
    color: var(--px-encre);
    --ligne-secondaire: var(--px-encre-douce);
    --ligne-lien: var(--px-violet);
}
.ligne-app .px-cartouche { margin-top: .15rem; }
.ligne-app__texte { min-width: 0; }
.ligne-app__nom { font-size: 1.15rem; margin-bottom: .2rem; }
.ligne-app__nom a { text-decoration: none; }
.ligne-app__nom a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rayon); }
.ligne-app:hover .ligne-app__nom a { text-decoration: underline; text-decoration-color: var(--ligne-lien); text-decoration-thickness: 2px; }
.ligne-app__accroche { color: var(--ligne-secondaire); margin: 0 0 .45rem; }
.ligne-app__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin: 0; font-size: .88rem; color: var(--ligne-secondaire); }

/* En thème sombre, une carte claire éblouirait : la surface du thème, la teinte en liseré. */
@media (prefers-color-scheme: dark) {
    .ligne-app {
        background: var(--px-surface);
        border-color: var(--px-bordure);
        border-left: 4px solid var(--teinte);
        color: var(--px-texte);
        --ligne-secondaire: var(--px-texte-secondaire);
        --ligne-lien: var(--px-primaire);
    }
}

@media (max-width: 760px) {
    .liste-apps { grid-template-columns: 1fr; }
}

/* État d'une application : le texte reste à la couleur du texte courant, la pastille porte l'état. */
.statut {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .85rem; font-weight: 600; white-space: nowrap;
}
.statut::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; }
.statut--disponible { color: var(--etat-succes); }
.statut--disponible::before { background: currentColor; }
.statut--enpreparation { color: var(--px-primaire); }
.statut--enpreparation::before { border: 2px dashed currentColor; width: .7rem; height: .7rem; }
.statut--brouillon { color: var(--px-texte-secondaire); }
.statut--brouillon::before { border: 1.5px solid currentColor; }

/* ------------------------------------------------------------------ Questions */

.questions__liste { max-width: 780px; border-top: 1px solid var(--px-bordure); }
.questions details { border-bottom: 1px solid var(--px-bordure); }
.questions summary {
    cursor: pointer; list-style: none;
    padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
    font-weight: 650; font-size: 1.08rem;
}
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after {
    content: ""; position: absolute; right: .4rem; top: 50%;
    width: .6rem; height: .6rem; margin-top: -.45rem;
    border-right: 2px solid var(--px-primaire); border-bottom: 2px solid var(--px-primaire);
    transform: rotate(45deg); transition: transform .2s;
}
.questions details[open] summary::after { transform: rotate(-135deg); margin-top: -.1rem; }
.questions details p { color: var(--px-texte-secondaire); max-width: 62ch; padding-bottom: .6rem; }

/* ------------------------------------------------------------------ Appel final et pied */

.appel { background: var(--px-violet); color: white; padding-block: clamp(2.5rem, 6vw, 4rem); }
.appel__contenu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.appel h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); letter-spacing: -.02em; max-width: 20ch; }

/* La nuit de la charte : le violet poussé au noir, fond sombre dans les deux thèmes. */
.pied { background: var(--px-nuit); color: var(--px-grege); border-top: 1px solid var(--px-nuit-bordure); font-size: .95rem; }
.pied :focus-visible { outline-color: var(--px-lilas); }
.pied__contenu { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 2rem; padding-block: 2.5rem; align-items: start; }
.pied__marque p { max-width: 32ch; }
.pied__marque strong { color: white; font-size: 1.05rem; }
.pied__liens { display: grid; gap: .35rem; }
.pied__liens a { text-decoration: none; }
.pied__liens a:hover { text-decoration: underline; }
.pied__mention { margin: 0; }

@media (max-width: 760px) {
    .pied__contenu { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ Fiche d'une application */

.bandeau-brouillon { margin: 0; padding: .7rem 1.25rem; background: var(--px-anis); color: var(--px-nuit); text-align: center; font-weight: 600; }

/* L'en-tête de la fiche prend la teinte de l'application : fond clair fixe, texte à l'encre. */
.fiche__entete { background: var(--teinte); color: var(--px-encre); padding: 2rem 0 clamp(2.5rem, 5vw, 3.5rem); }
.fiche__entete :focus-visible { outline-color: var(--px-violet); }
.fiche__retour { display: inline-block; font-size: .95rem; margin-bottom: 1.75rem; }
.fiche__retour::before { content: "‹ "; }
.fiche__retour--admin { color: var(--px-texte-secondaire); margin-bottom: 1rem; }
.fiche__identite { display: flex; gap: 1.25rem; align-items: center; }
.fiche__identite h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); letter-spacing: -.035em; font-weight: 800; }
.fiche__accroche { font-size: 1.2rem; margin: .5rem 0 0; max-width: 38em; }
.fiche__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem; margin-top: 2rem; }
.fiche__actions .statut { color: var(--px-encre); font-size: 1rem; }
/* Le violet de la charte, fixe : le lilas du thème sombre se confondrait avec la teinte. */
.fiche__entete .bouton--primaire { background: var(--px-violet); color: white; }
.fiche__entete .bouton--primaire:hover { background: var(--px-violet-fonce); }

.fiche__corps {
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem); padding-block: clamp(2.5rem, 6vw, 4rem);
}
.fiche__texte { font-size: 1.12rem; max-width: 64ch; }
.fiche__texte ul { padding-left: 1.2rem; }
.fiche__annonce { border-left: 3px dashed var(--px-lilas); padding-left: 1rem; color: var(--px-texte-secondaire); }
.fiche__points { align-self: start; border-top: 4px solid var(--teinte); padding-top: 1.1rem; }
.fiche__points h2 { font-size: 1.1rem; margin-bottom: .75rem; }
.fiche__points ul { list-style: none; margin: 0; padding: 0; }
.fiche__points li { padding: .55rem 0 .55rem 1.6rem; border-bottom: 1px solid var(--px-bordure); position: relative; }
.fiche__points li::before {
    content: ""; position: absolute; left: .15rem; top: 1.05rem;
    width: .7rem; height: .38rem; border-left: 2px solid var(--px-primaire); border-bottom: 2px solid var(--px-primaire);
    transform: rotate(-45deg);
}
.fiche__capture { margin-top: 0; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.fiche__capture img {
    border-radius: var(--rayon); border: 1px solid var(--px-bordure);
    box-shadow: 0 20px 50px -25px color-mix(in srgb, var(--px-encre) 35%, transparent);
}

.autres { border-top: 1px solid var(--px-bordure); }
.autres__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.autre {
    display: inline-flex; align-items: center; gap: .6rem; padding: .35rem .9rem .35rem .35rem;
    border: 1px solid var(--teinte); border-radius: 999px; text-decoration: none;
    background: var(--teinte-claire); color: var(--px-encre);
}
.autre .px-cartouche { border-radius: 999px; }
.autre:hover { border-color: var(--px-violet); }

@media (prefers-color-scheme: dark) {
    .autre { background: var(--px-surface); color: var(--px-texte); }
    .autre:hover { border-color: var(--px-primaire); }
}

@media (max-width: 760px) {
    .fiche__corps { grid-template-columns: 1fr; }
    .fiche__identite { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .icone--fiche { width: 56px; height: 56px; }
}

.page-simple { max-width: 640px; }
.page-simple h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 1rem; letter-spacing: -.02em; }

/* ------------------------------------------------------------------ Administration */

.admin-entete { background: var(--px-surface); border-bottom: 1px solid var(--px-bordure); }
.admin-entete__barre { display: flex; align-items: center; gap: 2rem; min-height: 60px; flex-wrap: wrap; }
.admin-entete__nav { display: flex; gap: 1.25rem; margin-right: auto; font-size: .95rem; }
.admin-entete__compte { display: flex; align-items: center; gap: 1rem; font-size: .92rem; }
.admin-entete__compte form { margin: 0; }
.admin-entete__qui { display: grid; line-height: 1.25; text-align: right; }
.admin-entete__qui small { color: var(--px-texte-secondaire); }

.admin-principal { padding-bottom: 4rem; }
.admin-page { padding-top: 2rem; }
.admin-page h1 { font-size: 1.9rem; letter-spacing: -.02em; margin-bottom: 1.25rem; }
.admin-page__entete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.admin-page__entete h1 { margin-bottom: .3rem; }
.admin-page__resume { color: var(--px-texte-secondaire); margin: 0; }
.admin-vide { padding-block: 3rem; max-width: 620px; }
.admin-vide h1 { font-size: 1.8rem; margin-bottom: 1rem; }

.message { border-radius: var(--rayon); padding: .8rem 1rem; margin: 0 0 1.25rem; }
.message p { margin: 0; }
.message ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.message--succes { background: color-mix(in srgb, var(--etat-succes) 12%, var(--px-surface)); color: var(--etat-succes); border: 1px solid color-mix(in srgb, var(--etat-succes) 35%, transparent); }
.message--erreur { background: color-mix(in srgb, var(--etat-danger) 10%, var(--px-surface)); color: var(--etat-danger); border: 1px solid color-mix(in srgb, var(--etat-danger) 35%, transparent); }

.tableau { width: 100%; border-collapse: collapse; background: var(--px-surface); border: 1px solid var(--px-bordure); border-radius: var(--rayon); overflow: hidden; font-size: .95rem; }
.tableau th { text-align: left; font-weight: 600; color: var(--px-texte-secondaire); padding: .7rem .9rem; border-bottom: 1px solid var(--px-bordure); font-size: .88rem; }
.tableau td { padding: .75rem .9rem; border-bottom: 1px solid var(--px-bordure); vertical-align: middle; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau__ordre { width: 1%; white-space: nowrap; }
.tableau__app { display: flex; gap: .8rem; align-items: center; }
.tableau__app a { text-decoration: none; }
.tableau__app a:hover { text-decoration: underline; }
.tableau__accroche { color: var(--px-texte-secondaire); font-size: .88rem; max-width: 52ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tableau__actions { white-space: nowrap; text-align: right; }
.tableau__actions a + a { margin-left: .9rem; }

@media (max-width: 860px) {
    .tableau th:nth-child(4), .tableau td:nth-child(4),
    .tableau th:nth-child(5), .tableau td:nth-child(5) { display: none; }
    .tableau__accroche { max-width: 28ch; }
}

.bouton-icone {
    width: 1.9rem; height: 1.9rem; border-radius: 6px; border: 1px solid var(--px-bordure);
    background: var(--px-surface); color: var(--px-texte-secondaire); cursor: pointer; font-size: .7rem;
}
.bouton-icone:hover:not([disabled]) { border-color: var(--px-texte-secondaire); color: var(--px-texte); }
.bouton-icone[disabled] { opacity: .35; cursor: default; }

.formulaire__colonnes { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .formulaire__colonnes { grid-template-columns: 1fr; } }

.groupe { border: 1px solid var(--px-bordure); border-radius: var(--rayon); background: var(--px-surface); padding: 1.1rem 1.25rem .4rem; margin: 0 0 1.5rem; min-width: 0; }
.groupe legend { font-weight: 700; padding: 0 .4rem; margin-left: -.4rem; }

.champ { margin-bottom: 1.1rem; }
.champ label, .champ__libelle { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .35rem; }
.champ input[type="text"], .champ input[type="url"], .champ input:not([type]), .champ textarea {
    width: 100%; font: inherit; font-size: 1rem; color: var(--px-texte);
    background: var(--px-fond); border: 1px solid var(--px-bordure); border-radius: 8px; padding: .55rem .7rem;
}
.champ textarea { resize: vertical; line-height: 1.5; }
.champ input:focus, .champ textarea:focus { outline: 2px solid var(--px-primaire); outline-offset: 0; border-color: var(--px-primaire); }
.champ__aide { font-size: .85rem; color: var(--px-texte-secondaire); margin: .35rem 0 0; }
.champ__aide--attention { color: var(--etat-attention); }
.champ__prefixe { display: flex; align-items: stretch; }
.champ__prefixe span { display: flex; align-items: center; padding: 0 .6rem; background: var(--px-bordure); border-radius: 8px 0 0 8px; font-size: .9rem; color: var(--px-texte-secondaire); }
.champ__prefixe input { border-radius: 0 8px 8px 0 !important; }
/* Saisie du cartouche : capitales à l'écran, comme à l'enregistrement. */
.champ input.champ__cartouche { max-width: 9rem; text-transform: uppercase; letter-spacing: .08em; }

.champ--image { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; align-items: start; }
.champ--image .champ__libelle { grid-column: 1 / -1; }
.image-apercu { display: grid; place-items: center; border: 1px dashed var(--px-bordure); border-radius: 12px; overflow: hidden; background: var(--px-fond); }
.image-apercu--icone { width: 72px; height: 72px; }
.image-apercu--icone img { width: 100%; height: 100%; object-fit: cover; }
.image-apercu--capture { width: 160px; aspect-ratio: 16 / 10; }
.image-apercu--capture img { width: 100%; height: 100%; object-fit: cover; }
.image-apercu__vide { font-size: .85rem; color: var(--px-texte-secondaire); }

.choix { display: grid; gap: .5rem; margin-bottom: 1.1rem; }
.choix label { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; font-weight: 600; cursor: pointer; padding: .55rem .7rem; border: 1px solid var(--px-bordure); border-radius: 8px; }
.choix label:has(input:checked) { border-color: var(--px-primaire); background: var(--px-violet-clair); }
.choix input { grid-row: span 2; margin-top: .3rem; accent-color: var(--px-primaire); }
.choix small { font-weight: 400; color: var(--px-texte-secondaire); }

.apercu-ligne { border: 1px solid var(--px-bordure); border-radius: var(--rayon); background: var(--px-surface); padding: 1rem 1.25rem 1.25rem; }
.liste-apps--apercu { grid-template-columns: 1fr; }

.formulaire__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; padding-top: .5rem; }
.formulaire__suppression { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }

/* ------------------------------------------------------------------ Erreur Blazor */

#blazor-error-ui {
    display: none; position: fixed; inset: auto 0 0 0; z-index: 1000;
    padding: .8rem 1.25rem; background: var(--px-anis); color: var(--px-nuit); font-weight: 600;
}
#blazor-error-ui .reload { margin-left: .5rem; }