/* 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; }
/* « Résilience » : un bouton à contour parmi les liens de navigation. */
.entete__nav a.entete__resilience {
    padding: .3rem .85rem; border: 1.5px solid var(--px-primaire); border-radius: 999px;
    color: var(--px-primaire); font-weight: 600; white-space: nowrap;
}
.entete__nav a.entete__resilience:hover, .entete__nav a.entete__resilience[aria-current] {
    background: var(--px-primaire); color: var(--px-primaire-texte); text-decoration: none;
}
.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); }

/* ETREBIL : « ETRE » (le cartouche) puis, empilés à sa droite, trois mots qui commencent par B, I et L et que
   js/etrebil.js fait changer. Lus de haut en bas, les initiales complètent le nom : ETRE + B + I + L. */
.marque__mots {
    display: flex; flex-direction: column; justify-content: center;
    font-size: .76rem; line-height: 1.2; font-weight: 500; letter-spacing: .01em;
    color: var(--px-texte-secondaire);
}
.fente { display: block; overflow: hidden; white-space: nowrap; }
.mot { display: inline-block; }
.mot b { font-weight: 800; color: var(--px-primaire); }
@media (prefers-reduced-motion: no-preference) {
    .mot { transition: opacity .23s ease, transform .23s ease; }
    .mot.sort { opacity: 0; transform: translateY(-55%); }
    .mot.entre { opacity: 0; transform: translateY(55%); transition: none; }
}
/* La statue de la Liberté à droite d'ETREBIL : une feuille de 4 images de 39 × 52 px (img/liberte.png), jouées par
   steps(4) ; seule la flamme change d'une image à l'autre. Fixe si la personne demande moins d'animation, et en
   pause tant que la souris ou le clavier est sur la marque, comme le défilement des mots (WCAG 2.2.2). */
.marque__liberte {
    flex: none; width: 39px; height: 52px;
    background: var(--liberte) 0 0 / 156px 52px no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
    .marque__liberte { animation: flamme-liberte .9s steps(4) infinite; }
    .marque:hover .marque__liberte, .marque:focus-visible .marque__liberte { animation-play-state: paused; }
}
@keyframes flamme-liberte { to { background-position: -156px 0; } }
.pied__definition { margin: .5rem 0 0; max-width: 38ch; font-size: .85rem; opacity: .85; }

@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: start;
}
.hero__slogan { margin: 0 0 .9rem; font-size: 1.25rem; font-weight: 700; color: var(--px-anis); }
.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); }
.mur__lien { color: var(--px-anis); }

/* 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; flex: 1 1 auto; }
.ligne-app__vignette {
    flex: 0 0 auto; width: 7.5rem; height: 4.7rem; object-fit: cover; object-position: top left;
    border-radius: calc(var(--rayon) / 2); border: 1px solid var(--px-bordure);
}
@media (max-width: 480px) { .ligne-app__vignette { display: none; } }
.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; }

/* Application Windows sans système coché : une mention sobre, à la couleur du texte qui l'entoure.
   Dès qu'un système est coché, les logos (.systemes) la remplacent. */
.mention-windows {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .85rem; font-weight: 600; white-space: nowrap;
}
.mention-windows::before { content: ""; width: .6rem; height: .5rem; border: 1.5px solid currentColor; border-top-width: 3px; border-radius: 1px; }
.mention-windows--grande { font-size: 1rem; color: var(--px-encre); }

/* Systèmes où l'application s'installe : logos Windows, Linux, Android (wwwroot/img/systemes.svg), à la
   couleur du texte autour. */
.systemes { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.systemes__logo { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 600; }
.systemes__logo svg { width: 1rem; height: 1rem; flex: none; }
.systemes--grand { gap: .8rem; color: var(--px-encre); }
.systemes--grand .systemes__logo { font-size: 1rem; }
.systemes--grand .systemes__logo svg { width: 1.25rem; height: 1.25rem; }
.fiche__aussi { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-weight: 600; color: var(--px-encre); }
.choix__titre { font-weight: 600; }

/* ------------------------------------------------------------------ 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, .bandeau-ouverture { 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__plateforme { border-left: 3px solid var(--px-turquoise); padding-left: 1rem; font-weight: 550; }
.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; }

/* ------------------------------------------------------------------ Téléphone : administration */

@media (max-width: 860px) {
    /* `.tableau` coupe son débordement (coins arrondis) : sans défilement propre, les colonnes
       restantes (ordre, application, état, actions) dépassent 375 px et sont rognées. */
    .tableau { display: block; overflow-x: auto; }
    .bouton-icone { width: 2.75rem; height: 2.75rem; }
}

/* ------------------------------------------------------------------ Langues, recherche, fonctionnalités */

/* Un attribut « hidden » doit gagner sur les « display » des composants (filtre, lignes, groupes). */
[hidden] { display: none !important; }

mark {
    background: color-mix(in srgb, var(--px-anis) 70%, transparent); color: inherit;
    border-radius: 3px; padding: 0 .12em;
}

/* Sélecteur de langue : cinq codes, la langue en cours soulignée. */
.langues { display: flex; gap: .15rem; font-size: .85rem; font-weight: 600; letter-spacing: .03em; }
.langues a {
    padding: .25rem .45rem; border-radius: 6px; text-decoration: none; color: var(--px-texte-secondaire);
}
.langues a:hover { color: var(--px-primaire); background: var(--px-violet-clair); }
.langues a[aria-current="true"] { color: var(--px-primaire-texte); background: var(--px-primaire); }

@media (max-width: 560px) {
    .entete__actions { gap: .6rem; }
    .entete__actions .lien-discret { display: none; }
    .langues a { padding: .25rem .3rem; }
}

/* Ce que le nom de l'application veut dire dans la langue : sous le nom, en plus discret. */
.fiche__sens { margin: .15rem 0 0; font-size: 1.15rem; font-weight: 550; letter-spacing: -.01em; opacity: .85; }
.ligne-app__sens { margin: 0 0 .25rem; font-size: .9rem; font-weight: 600; color: var(--ligne-secondaire); }

/* Formulaire de recherche (accueil et page de recherche). */
.recherche { margin-top: 1.75rem; max-width: 36rem; }
.recherche__etiquette { display: block; font-weight: 650; margin-bottom: .45rem; }
.recherche__champ { display: flex; gap: .5rem; }
.recherche__champ input[type="search"] {
    flex: 1; min-width: 0; font: inherit; padding: .7rem .9rem; border-radius: var(--rayon);
    border: 1px solid var(--px-bordure); background: var(--px-surface); color: var(--px-texte);
}
.recherche__champ input[type="search"]:focus { outline: 2px solid var(--px-primaire); outline-offset: 0; border-color: var(--px-primaire); }
.recherche__aide { margin: .5rem 0 0; font-size: .92rem; color: var(--px-texte-secondaire); }
.recherche--hero { margin-top: 1.5rem; }
.recherche--hero .recherche__etiquette { color: var(--px-grege); }
.recherche--hero input[type="search"] { border-color: transparent; background: white; color: var(--px-encre); }
.recherche--hero input[type="search"]:focus { outline-color: var(--px-anis); }

.recherche-page h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.02em; margin-bottom: .6rem; }
.recherche-page__chapeau { max-width: 44rem; color: var(--px-texte-secondaire); font-size: 1.1rem; }
.recherche-page__invite, .recherche-page__aucun { margin-top: 2rem; color: var(--px-texte-secondaire); }
.recherche-page__compte { font-size: 1.15rem; margin: 2.25rem 0 1rem; }

.resultats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.resultat {
    border: 1px solid var(--px-bordure); border-left: 6px solid var(--teinte); border-radius: var(--rayon);
    background: var(--px-surface); padding: 1rem 1.25rem;
}
.resultat__entete { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.resultat__entete > div { margin-right: auto; }
.resultat__nom { margin: 0; font-size: 1.2rem; }
.resultat__nom a { text-decoration: none; }
.resultat__nom a:hover { text-decoration: underline; }
.resultat__sens { margin: 0; font-size: .92rem; font-weight: 600; color: var(--px-texte-secondaire); }
.resultat__accroche { margin: .6rem 0 0; color: var(--px-texte-secondaire); }
.resultat__fonctions { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .1rem; }
.resultat__fonctions a {
    display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; gap: .25rem 1rem; padding: .4rem .5rem;
    border-radius: 6px; text-decoration: none; color: inherit;
}
.resultat__fonctions a:hover { background: var(--px-violet-clair); }
.resultat__groupe { font-size: .85rem; font-weight: 650; color: var(--px-texte-secondaire); }
.resultat__autres { margin: .5rem 0 0 .5rem; font-size: .92rem; }

@media (max-width: 560px) {
    .recherche__champ { flex-direction: column; }
    .resultat__fonctions a { grid-template-columns: 1fr; }
}

/* Liste complète des fonctionnalités sur la fiche. */
.fiche__complet { padding-block: 0 clamp(2.5rem, 6vw, 4rem); scroll-margin-top: 5rem; }
.fiche__complet h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.02em; margin-bottom: .4rem; }
.fiche__complet-intro { margin: 0 0 1.25rem; color: var(--px-texte-secondaire); }
.fiche__complet-repli { margin: 0 0 1.25rem; padding-left: 1rem; border-left: 3px dashed var(--px-lilas); color: var(--px-texte-secondaire); }

.filtre-fonctionnalites { margin-bottom: 1.25rem; max-width: 34rem; }
.filtre-fonctionnalites label { display: block; font-weight: 650; margin-bottom: .35rem; }
.filtre-fonctionnalites input[type="search"] {
    width: 100%; font: inherit; padding: .65rem .85rem; border-radius: var(--rayon);
    border: 1px solid var(--px-bordure); background: var(--px-surface); color: var(--px-texte);
}
.filtre-fonctionnalites input[type="search"]:focus { outline: 2px solid var(--px-primaire); outline-offset: 0; border-color: var(--px-primaire); }
.filtre-fonctionnalites__compte { margin: .4rem 0 0; min-height: 1.4em; font-size: .92rem; color: var(--px-texte-secondaire); }

.fiche__sommaire ul { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.fiche__sommaire li {
    display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem;
    border: 1px solid var(--teinte); border-radius: 999px; background: var(--teinte-claire); color: var(--px-encre);
    font-size: .92rem;
}
.fiche__sommaire a { text-decoration: none; color: inherit; font-weight: 600; }
.fiche__sommaire a:hover { text-decoration: underline; }
.fiche__sommaire span { font-size: .8rem; opacity: .7; }

.fiche__groupes { columns: 22rem 3; column-gap: 2rem; }
.groupe-fonct {
    break-inside: avoid; margin: 0 0 1.75rem; padding-top: .9rem; border-top: 4px solid var(--teinte); scroll-margin-top: 5rem;
}
.groupe-fonct h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
.groupe-fonct ul { list-style: none; margin: 0; padding: 0; }
.groupe-fonct li { padding: .4rem 0 .4rem 1.5rem; border-bottom: 1px solid var(--px-bordure); position: relative; font-size: .98rem; }
.groupe-fonct li::before {
    content: ""; position: absolute; left: .15rem; top: .8rem;
    width: .6rem; height: .32rem; border-left: 2px solid var(--px-primaire); border-bottom: 2px solid var(--px-primaire);
    transform: rotate(-45deg);
}
.groupe-fonct:target { outline: 2px solid var(--px-primaire); outline-offset: 6px; border-radius: 4px; }

@media (prefers-color-scheme: dark) {
    .fiche__sommaire li { background: var(--px-surface); color: var(--px-texte); }
}

/* ------------------------------------------------------------------ Conditions générales et protection des données */

.legal { max-width: 52rem; }
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.02em; margin-bottom: 1rem; }
.legal__officielle {
    border-left: 3px solid var(--px-lilas); padding: .6rem 1rem; background: var(--px-surface);
    border-radius: 0 var(--rayon) var(--rayon) 0; font-weight: 550;
}
.legal__sommaire { margin: 1.5rem 0 2rem; padding: 1rem 1.25rem; border: 1px solid var(--px-bordure); border-radius: var(--rayon); background: var(--px-surface); }
.legal__sommaire-titre { margin: 0 0 .5rem; font-weight: 700; }
.legal__sommaire ol { margin: 0; padding-left: 1.25rem; columns: 2 18rem; column-gap: 2rem; }
.legal__sommaire li { margin: .15rem 0; break-inside: avoid; }
.legal__texte h2 { font-size: 1.35rem; margin: 2.25rem 0 .75rem; scroll-margin-top: 5rem; }
.legal__texte h3 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; scroll-margin-top: 5rem; }
.legal__texte p, .legal__texte li { line-height: 1.65; }
.legal__texte ul { padding-left: 1.3rem; }
.legal__texte li { margin: .3rem 0; }
.legal__identite { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: .35rem 1.25rem; margin: 1rem 0; }
.legal__identite dt { font-weight: 650; color: var(--px-texte-secondaire); }
.legal__identite dd { margin: 0; }
@media (max-width: 560px) { .legal__identite { grid-template-columns: 1fr; } .legal__identite dd { margin-bottom: .5rem; } }

/* ---- Mon assurance résilience (/resilience) : réutilise .legal, ajoute l'ouverture et le bloc de suite ---- */
.resilience__intro { margin: 1rem 0 0; font-size: 1.1rem; line-height: 1.65; }
.resilience__suite { margin: 3rem 0 0; padding: 1.5rem 1.5rem 1.25rem; border: 1px solid var(--px-bordure); border-radius: var(--rayon); background: var(--px-surface); }
.resilience__suite h2 { margin: 0 0 .5rem; font-size: 1.35rem; }
.resilience__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 1rem 0 1.5rem; }
.resilience__fiches-titre { margin: 0 0 .5rem; font-weight: 650; color: var(--px-texte-secondaire); }
.resilience__fiches { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: 0; padding: 0; list-style: none; }
.resilience__fiches a { display: inline-block; padding: .25rem .7rem; border: 1px solid var(--px-bordure); border-radius: 999px; text-decoration: none; }
.resilience__fiches a:hover { border-color: var(--px-primaire); }