/* =====================================================================
   SITE — feuille commune a toutes les vues sauf l accueil
   =====================================================================

   Chargee apres style.css et apres accueil.css.

   L accueil a sa propre feuille, entierement portee sous « #view-home ».
   Celle-ci prend tout le reste : fonctions, boutique, panneau, guide,
   support, fil de discussion, compte, administration, connexion, et les
   fenetres superposees (panier, achat, paiement, confirmation).

   Trois principes, les memes que pour l accueil :

   - on n enleve rien de style.css. Les 226 ko restent en place ; les
     regles d ici passent devant parce qu elles arrivent apres, a
     specificite egale, ou parce qu elles ajoutent un cran de specificite
     quand la regle visee en avait deja un ;
   - les jetons d abord. Le site entier lit « --text », « --muted »,
     « --panel », « --border », « --radius » : les redefinir au niveau de
     « :root » refait la moitie du travail sur toutes les vues d un coup,
     sans toucher a un seul selecteur de composant ;
   - l accueil parle fort, le reste du site parle juste. Meme palette,
     meme famille d affichage, memes rayons, mais une densite d ecran
     d outil et non de page de vente.

   Plan du fichier :
     1.  Jetons
     2.  Decor de fond et couloir des vues
     3.  Surfaces du navigateur
     4.  Typographie et tetes de section
     5.  Boutons
     6.  Champs et formulaires
     7.  Cartes, panneaux, pastilles
     8.  Tableaux
     9.  Barre superieure, navigation, pied
     10. Fenetres superposees
     11. Vue Fonctions
     12. Vue Boutique
     13. Vue Guide
     14. Vue Support
     15. Vue Fil de discussion
     16. Vue Compte
     17. Vue Panneau
     18. Vue Administration
     19. Connexion
     20. Ecrans etroits
     21. Reglages d affichage
     22. Mouvement reduit
   ===================================================================== */


/* ---------------------------------------------------------------- 1.
   Jetons

   style.css posait un seul etage de surface (--panel) et un seul niveau
   de texte secondaire (--muted, #a78bfa). Deux manques se voyaient
   partout : les cartes posees sur un panneau se confondaient avec lui,
   et le violet du texte secondaire, trop sature, tombait a 4,9:1 sur le
   fond de page — juste au-dessus du seuil, mais illisible des que la
   taille descendait a 11 px, ce qui est le cas de la moitie des libelles
   du panneau.

   On passe donc a trois etages de surface et trois niveaux de texte,
   repris mot pour mot de l accueil pour que les deux moities du site
   racontent la meme chose. Contrastes mesures sur --v-900 :
   texte 15,8:1, second niveau 9,9:1, troisieme 6,1:1.
--------------------------------------------------------------------- */

:root {
  --v-900: #08040f;
  --v-800: #0d0620;
  --v-700: #170b2f;
  --v-600: #241048;
  --v-500: #4c1d95;
  --v-400: #7c3aed;
  --v-300: #a855f7;
  --v-200: #c084fc;
  --v-100: #ede4ff;

  --accent: #d946ef;
  --ok:   #4ade80;
  --warn: #fbbf24;
  --err:  #fb7185;

  --text:    #f4efff;
  --muted:   #c3b2e8;
  --muted-2: #9a86c7;

  /* Trois etages. Le vide, la dalle, la carte posee sur la dalle. */
  --fond:   #08040f;
  --dalle:  rgba(17, 9, 36, 0.72);
  --panel:  rgba(17, 9, 36, 0.72);
  --carte:  rgba(124, 58, 237, 0.07);
  --carte-haut: rgba(255, 255, 255, 0.055);

  --border:      rgba(168, 85, 247, 0.16);
  --border-fort: rgba(192, 132, 252, 0.34);

  /* Le degrade s arrete a #c026d3 et non au rose de marque : sur
     #d946ef, du blanc ne depasse pas 3,4:1. */
  --plein: linear-gradient(135deg, #7c3aed 0%, #9333ea 48%, #c026d3 100%);

  /* Une ombre porte un deplacement et un flou. Le halo colore sans
     deplacement n est pas de la profondeur, c est de la decoration : il
     reste disponible, mais nomme a part et reserve aux elements qui
     doivent vraiment emettre de la lumiere. */
  --ombre-1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 10px 26px -14px rgba(0, 0, 0, 0.75);
  --ombre-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 28px 64px -28px rgba(0, 0, 0, 0.88);
  --ombre-neon: 0 10px 30px -12px rgba(168, 85, 247, 0.75);
  --glow: 0 28px 80px -34px rgba(168, 85, 247, 0.8);

  --radius: 18px;
  --r-s: 12px;
  --r-m: 18px;
  --r-l: 26px;

  --shell: 1180px;
  --trans: 0.2s cubic-bezier(0.22, 0.7, 0.3, 1);

  --affiche: "Bricolage Grotesque", "Outfit", system-ui, sans-serif;
}


/* ---------------------------------------------------------------- 2.
   Decor de fond et couloir des vues

   Trois elements fixes vivent derriere tout le site : une aurore, une
   trame, et le logo en volume. Ils ont ete regles pour l accueil, ou ils
   accompagnent un texte court et tres espace. Sous un tableau de bord,
   ils deviennent du bruit : la capture du panneau montrait le « B » de
   trois metres traversant la carte de telechargement, et les particules
   passant devant les libelles.

   On ne les supprime pas — ils font l identite — on les recule.
--------------------------------------------------------------------- */

/* logo3d.js ecrit directement dans « style.opacity » pendant son
   intro ; seul « !important » peut reprendre la main depuis la feuille.
   L accueil garde son fondu au defilement, pilote par app.js. */
body:not(.vue-accueil) #logo3d { opacity: 0 !important; }

body:not(.vue-accueil) .aurora { opacity: 0.4; }
body:not(.vue-accueil) #particles { opacity: 0.26; }
body:not(.vue-accueil) .grid-overlay { opacity: 0.6; }

/* Un degrade de haut de page : il ancre la barre superieure sur une
   valeur plus claire que le corps, et donne au couloir un debut. */
body:not(.vue-accueil)::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 420px;
  z-index: -3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(76, 29, 149, 0.30), transparent 78%);
}

.views { padding: 40px 34px 76px; }

/* L animation d entree de style.css deplace la vue de 16 px vers le
   haut depuis « opacity: 0 ». Sur une vue longue, l oeil voit la page
   sauter. On garde le fondu, on reduit le deplacement, on ralentit la
   sortie de course. */
.view.active { animation: vue-entree 0.42s cubic-bezier(0.22, 0.7, 0.3, 1) both; }

@keyframes vue-entree {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}


/* ---------------------------------------------------------------- 3.
   Surfaces du navigateur

   Selection, curseur de saisie, ascenseurs, anneau de focus, chiffres
   des tableaux : rien de tout cela n etait defini. Ce sont les parties
   qu on ne dessine pas et qui trahissent le plus surement une page
   assemblee plutot que construite — elles arrivaient en bleu systeme au
   milieu d un site violet.
--------------------------------------------------------------------- */

::selection {
  background: rgba(168, 85, 247, 0.38);
  color: #fff;
}

body { caret-color: var(--v-200); }

/* Un seul anneau de focus pour tout le site, pose sur « :focus-visible »
   pour qu il n apparaisse pas au clic a la souris. Deux couches : un
   liseré sombre qui le detache des surfaces claires, l anneau violet
   par-dessus. */
:focus-visible {
  outline: 2px solid var(--v-200);
  outline-offset: 2px;
  border-radius: 6px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--v-200);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(168, 85, 247, 0.22);
}

/* La barre superieure est collante : sans ce retrait, une tabulation
   amene l element focalise juste dessous, a moitie cache. */
html { scroll-padding-top: 96px; }

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.45) transparent;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.45);
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover { background: rgba(168, 85, 247, 0.72); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

input[type="checkbox"],
input[type="radio"],
progress { accent-color: var(--v-400); }

a { color: var(--v-200); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--v-100); }

/* Les chiffres d Outfit sont proportionnels : dans un tableau ou un
   compteur qui se rafraichit, les colonnes dansent a chaque mise a
   jour. */
table, .stat-value, .buybar-price, .pay-eur, .wallet-solde,
.admin-counts, .order-table, .user-table, .compare-table,
.trust-item b, time, .mono {
  font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------------- 4.
   Typographie et tetes de section

   Chaque vue s ouvrait sur le meme bloc : une pastille bordee en
   majuscules, un titre de 34 px, un paragraphe. La pastille est la
   premiere chose que l oeil rencontre sur six vues differentes, et elle
   ne dit rien. On la degonfle en simple surtitre, prolonge d un filet,
   comme sur l accueil ; le titre recupere le poids qu elle lui prenait
   et passe a la fonte d affichage.
--------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--v-300);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.6;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 26px;
  height: 1px;
  margin-top: 0.75em;
  background: currentColor;
  opacity: 0.6;
}

.section-head { margin-bottom: clamp(26px, 3vw, 40px); }

/* La boutique centre sa tete. Un surtitre prolonge d un seul filet, a
   gauche, y pend de travers : il lui en faut un de chaque cote. */
.shop-head .eyebrow::after {
  content: "";
  flex: none;
  width: 26px;
  height: 1px;
  margin-top: 0.75em;
  background: currentColor;
  opacity: 0.6;
}

.section-head h2 {
  font-family: var(--affiche);
  font-variation-settings: "opsz" 40;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  text-wrap: balance;
}

.section-head p {
  color: var(--muted);
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.68;
}

.lead { color: var(--muted); line-height: 1.68; max-width: 70ch; }

.compare-title {
  font-family: var(--affiche);
  font-variation-settings: "opsz" 24;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Une mesure de ligne. Les paragraphes explicatifs du panneau et du
   compte heritaient de la largeur de leur panneau — jusqu a 1056 px,
   soit pres de 140 signes par ligne : l oeil perd le debut de la ligne
   suivante. 72 signes est la limite haute du confort de lecture. */
.hint { font-size: 12px; line-height: 1.55; color: var(--muted-2); margin-top: 7px; max-width: 74ch; }
.account-note, .panel > p, .support-faq-sous { max-width: 74ch; }
.support-faq-sous { font-size: 15px; }
.small { font-size: 12.5px; }

.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* Un plancher de 11,5 px.

   Le site descendait a 9,5 px sur l etiquette de la fenetre de
   previsualisation, et dix-sept libelles tenaient entre 10 et 11 px.
   Sous 11,5 px, un texte gris sur fond sombre cesse d etre lu : il est
   devine. Comme ce sont presque tous des libelles en majuscules
   espacees, on compense le gain de taille en resserrant legerement
   l interlettre, et l encombrement ne bouge pas.

   Les selecteurs sont nommes un a un plutot que balayes : seul
   l inventaire mesure dans le navigateur dit lesquels passaient
   reellement sous le seuil, et une regle large toucherait aussi les
   libelles deja corrects. */
.plan-flag,
.account-role,
.account-section,
.chat-sub span,
.chat-ecrit span,
.run-bar-sub,
.run-account-label,
.dm-num,
.filtre-texte i,
.memoire-compte,
.dm-compose-compteur span,
.dm-preview-label,
.dm-fenetre-tag,
.dm-bubble-time,
.dm-test-tete i,
.run-meta-label,
.log-filter,
.compare-table thead th em,
.cart-tag,
.pay-badge,
.pwd-rules li {
  font-size: 11.5px;
}

.plan-flag,
.account-section,
.run-account-label,
.dm-preview-label,
.run-meta-label { letter-spacing: 0.1em; }

/* 15 px de haut pour « Changer la photo » et « Retirer » : au doigt, la
   cible etait trois fois trop petite. Le texte ne grossit pas, c est la
   zone cliquable qui s etend. */
.avatar-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-inline: 2px;
}

@media (pointer: coarse) {
  .avatar-link { min-height: 44px; }
}


/* ---------------------------------------------------------------- 5.
   Boutons

   Deux corrections.

   La premiere est une question de marque : le bouton principal etait au
   bleu Discord (#5865f2) sur toutes les vues, alors que l accueil
   appelle a l action en violet. Deux boutons principaux de deux couleurs
   differentes sur le meme site, c est une hesitation lisible. Le
   blurple reste, mais la ou il veut dire quelque chose : le bouton
   Discord de la barre superieure et les boutons de connexion Discord.

   La seconde est une question de bruit : « .btn::after » faisait
   traverser un eclat blanc en biais a chaque survol, sur tous les
   boutons, y compris les boutons secondaires d un tableau
   d administration. Un mouvement qui ne veut rien dire, repete cent
   fois par ecran. On le retire et on garde l elevation.
--------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 11px 20px;
  border: 1px solid var(--border-fort);
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.14);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: var(--ombre-1);
  transition: transform 0.16s cubic-bezier(0.22, 0.7, 0.3, 1),
              background 0.16s, border-color 0.16s, box-shadow 0.16s, opacity 0.16s;
}

.btn::after { content: none; }

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  background: rgba(168, 85, 247, 0.26);
  border-color: var(--v-300);
  box-shadow: var(--ombre-1), 0 10px 26px -14px rgba(168, 85, 247, 0.9);
}

.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

.btn.primary {
  background: var(--plein);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 10px 30px -12px rgba(168, 85, 247, 0.9);
}

.btn.primary:hover:not(:disabled) {
  background: var(--plein);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 16px 40px -12px rgba(192, 38, 211, 0.95);
}

.btn.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
  box-shadow: none;
}

.btn.ghost:hover:not(:disabled) {
  background: rgba(168, 85, 247, 0.12);
  border-color: var(--border-fort);
  color: var(--v-100);
  box-shadow: none;
}

.btn.danger {
  background: rgba(251, 113, 133, 0.14);
  border-color: rgba(251, 113, 133, 0.42);
  color: #ffd9df;
}

.btn.danger:hover:not(:disabled) {
  background: rgba(251, 113, 133, 0.26);
  border-color: rgba(251, 113, 133, 0.7);
  box-shadow: var(--ombre-1), 0 10px 26px -14px rgba(251, 113, 133, 0.8);
}

/* 42 px suffisent a la souris ; au doigt, la cible doit faire 44. */
.btn.small { min-height: 36px; padding: 8px 15px; font-size: 13px; }
.btn.lg { min-height: 52px; padding: 15px 30px; font-size: 15.5px; }

@media (pointer: coarse) {
  .btn.small { min-height: 44px; padding-inline: 18px; }
}


/* ---------------------------------------------------------------- 6.
   Champs et formulaires

   Les libelles etaient en majuscules espacees a 12 px : une etiquette
   de tableau de bord, pas un libelle de formulaire. Au-dessus d un
   champ, la casse normale se lit plus vite et laisse la majuscule
   espacee aux surtitres, ou elle veut dire « section ».

   Le texte indicatif heritait de « --muted » : sur une saisie sombre,
   il arrivait a 9,9:1, soit plus fort que le texte reellement saisi.
   On le descend sous le texte, sans passer sous 4,5:1.
--------------------------------------------------------------------- */

.field { margin-bottom: 20px; }

.field label,
.field-label {
  display: block;
  margin-bottom: 7px;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

input, select, textarea {
  padding: 12px 14px;
  border-radius: var(--r-s);
  border: 1px solid var(--border);
  background: rgba(8, 4, 15, 0.66);
  color: var(--text);
  font-size: 14.5px;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) { border-color: var(--border-fort); }

input:focus, select:focus, textarea:focus {
  border-color: var(--v-300);
  background: rgba(13, 6, 32, 0.9);
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.2);
}

input::placeholder, textarea::placeholder { color: var(--muted-2); opacity: 1; }
input:disabled, select:disabled, textarea:disabled { opacity: 0.5; cursor: not-allowed; }

select {
  appearance: none;
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--v-200) 50%),
                    linear-gradient(135deg, var(--v-200) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

select option { background: #140a2a; color: var(--text); }

input[type="range"] { box-shadow: none; }


/* ---------------------------------------------------------------- 7.
   Cartes, panneaux, pastilles

   Une carte et un panneau partageaient exactement le meme fond, la meme
   bordure et la meme ombre. Posee dans un panneau, une carte
   disparaissait. On separe les deux etages : le panneau porte la dalle
   et l ombre longue, la carte porte un voile violet plus clair et une
   ombre courte. La difference se lit meme en vision peripherique.
--------------------------------------------------------------------- */

.panel {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 180px),
    var(--dalle);
  box-shadow: var(--ombre-2);
  backdrop-filter: blur(20px);
}

/* Le filet lumineux du haut partait de 12 % et s arretait avant le
   bord : sur un panneau etroit il ressemblait a un defaut d affichage.
   Il court maintenant sur toute la largeur en s eteignant aux deux
   extremites. */
.panel::before {
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-fort) 22%, var(--border-fort) 78%, transparent);
}

.panel-head {
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.panel-head h2 {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--v-300);
}

.card {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  background: linear-gradient(180deg, var(--carte-haut), transparent 56%), var(--carte);
  box-shadow: var(--ombre-1);
  backdrop-filter: blur(14px);
  transition: transform var(--trans), border-color var(--trans), box-shadow var(--trans), background var(--trans);
}

.card:hover {
  transform: translateY(-2px);
  border-color: var(--border-fort);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 56%), rgba(124, 58, 237, 0.13);
  box-shadow: var(--ombre-2), 0 20px 50px -30px rgba(168, 85, 247, 0.9);
}

.card h3 {
  font-family: var(--affiche);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.card p { font-size: 14.5px; line-height: 1.7; color: var(--muted); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid transparent;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  background: var(--plein);
}

.badge.soft {
  background: rgba(168, 85, 247, 0.16);
  border-color: var(--border-fort);
  color: var(--v-100);
}

.progress-track { height: 8px; background: rgba(8, 4, 15, 0.8); }
.progress-fill { box-shadow: 0 0 18px -4px rgba(168, 85, 247, 0.9); }


/* ---------------------------------------------------------------- 8.
   Tableaux

   Trois tableaux sur le site : le comparatif des formules, la liste des
   comptes et la liste des commandes de l administration. Les trois
   avaient des bordures sur chaque cellule, ce qui dessine une grille et
   non une lecture. On retire les verticales, on garde une horizontale
   tres fine, on tient l en-tete en haut au defilement et on allume la
   ligne survolee : l oeil suit alors la ligne, qui est l unite de sens.
--------------------------------------------------------------------- */

.compare-scroll,
.user-table-wrap,
.orders-list {
  border-radius: var(--r-m);
  border: 1px solid var(--border);
  background: var(--dalle);
  box-shadow: var(--ombre-1);
  overflow: auto;
  overscroll-behavior-x: contain;
}

.compare-table,
.user-table,
.order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.compare-table thead th,
.user-table thead th,
.order-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--border-fort);
  background: linear-gradient(180deg, #1a0d36, #150a2d);
  color: var(--v-200);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.compare-table td,
.user-table td,
.order-table td {
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid rgba(168, 85, 247, 0.1);
  color: var(--muted);
  vertical-align: middle;
}

.compare-table tbody tr:last-child td,
.user-table tbody tr:last-child td,
.order-table tbody tr:last-child td { border-bottom: 0; }

.compare-table tbody tr,
.user-table tbody tr,
.order-table tbody tr { transition: background 0.15s; }

.compare-table tbody tr:hover,
.user-table tbody tr:hover,
.order-table tbody tr:hover { background: rgba(168, 85, 247, 0.07); }

.compare-table th:first-child,
.compare-table td:first-child { color: var(--text); font-weight: 600; }


/* ---------------------------------------------------------------- 9.
   Barre superieure, navigation, pied
--------------------------------------------------------------------- */

.topbar {
  padding: 13px 34px;
  background: rgba(8, 4, 15, 0.72);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(22px) saturate(1.3);
}

.footer {
  padding: 26px 34px 32px;
  color: var(--muted-2);
  border-top: 1px solid var(--border);
}


/* ---------------------------------------------------------------- 10.
   Fenetres superposees

   Panier, achat, paiement, confirmation, recadrage d avatar : cinq
   feuilles qui s ouvrent par-dessus la page. Elles arrivaient avec une
   bordure pleine « var(--v-500) », un violet opaque qui dessinait un
   rectangle dur autour du contenu. On la remplace par la bordure du
   reste du site et on confie la separation a l ombre, qui est le role
   d une ombre.
--------------------------------------------------------------------- */

.modal-backdrop,
.cart-backdrop,
.pay-backdrop,
.ask-backdrop,
.crop-backdrop {
  background: rgba(5, 2, 10, 0.78);
  backdrop-filter: blur(10px) saturate(0.9);
}

.modal,
.cart-sheet,
.pay-sheet,
.ask-sheet,
.crop-sheet {
  border: 1px solid var(--border-fort);
  border-radius: var(--r-l);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 200px),
    linear-gradient(170deg, #1c0e3a, #0d0620);
  box-shadow: var(--ombre-2), var(--glow);
}


/* ---------------------------------------------------------------- 11.
   Vue Fonctions

   C etait six cartes identiques — carre d icone, titre, paragraphe —
   posees en grille reguliere. La grille de cartes jumelles est le
   contenant par defaut : elle range, mais elle n ordonne pas. Rien ne
   disait quelles fonctions comptent, et le lecteur devait lire les six
   pour le savoir.

   On passe a une mosaique : les deux fonctions qui portent la promesse
   du produit — la repartition multi-comptes et la reprise apres limite —
   prennent deux colonnes et s ouvrent sur une ligne d exemple concrete ;
   les quatre autres restent en format normal. La hierarchie devient
   visible avant d etre lue.

   Les icones etaient des caracteres Unicode (↯ ◷ ◈ ⌁ ◉ ⛨) : leur dessin
   change d une machine a l autre, et certaines manquent purement et
   simplement sur les systemes sans police de symboles. Elles sont
   remplacees dans le balisage par des traces SVG d un meme trait.
--------------------------------------------------------------------- */

#view-features .cards-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (min-width: 900px) {
  #view-features .cards-2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #view-features .card.majeure { grid-column: span 2; }
}

#view-features .card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 26px 24px 24px;
  overflow: hidden;
}

#view-features .card-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border: 1px solid var(--border-fort);
  border-radius: 13px;
  background: radial-gradient(120% 120% at 30% 10%, rgba(192, 132, 252, 0.3), rgba(124, 58, 237, 0.14));
  color: var(--v-100);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

#view-features .card-icon svg { width: 22px; height: 22px; display: block; }

#view-features .card p { margin-bottom: 0; }

/* La ligne d exemple des deux cartes majeures : une donnee, pas une
   decoration. Elle est repoussee en bas pour que les deux cartes
   larges s alignent entre elles quel que soit le nombre de lignes du
   paragraphe. */
#view-features .feat-exemple {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted-2);
}

#view-features .feat-exemple b {
  font-family: var(--affiche);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--v-100);
}

#view-features .feat-exemple i { font-style: normal; }


/* ---------------------------------------------------------------- 12.
   Vue Boutique

   La vue fonctionnait deja : cinq formules, un comparatif, des
   temoignages, des questions. Elle manquait de respiration entre ses
   cinq blocs, et sa bande de chiffres ressemblait a quatre boutons.
--------------------------------------------------------------------- */

#view-shop > * + * { margin-top: clamp(44px, 5vw, 72px); }
#view-shop .plans { margin-top: clamp(32px, 4vw, 48px); }
#view-shop .plans-note { margin-top: 20px; color: var(--muted-2); font-size: 13px; text-align: center; }

.promo-bar {
  border: 1px solid var(--border-fort);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(217, 70, 239, 0.16), rgba(124, 58, 237, 0.1));
  box-shadow: var(--ombre-1);
}

.promo-tag {
  background: var(--plein);
  box-shadow: 0 6px 18px -8px rgba(192, 38, 211, 0.9);
}

.promo-timer { font-variant-numeric: tabular-nums; color: var(--v-100); }

.trust-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  background: var(--dalle);
  box-shadow: var(--ombre-1);
  overflow: hidden;
}

.trust-item {
  padding: 22px 18px;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}

.trust-item:first-child { border-left: 0; }

.trust-item b {
  display: block;
  margin-bottom: 6px;
  font-family: var(--affiche);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--v-100);
}

.trust-item span {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
}

.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 26px 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  background: linear-gradient(180deg, var(--carte-haut), transparent 60%), var(--carte);
  box-shadow: var(--ombre-1);
  overflow: hidden;
}

/* Le guillemet ouvrant de Bricolage est une masse pleine : a 110 px et
   16 % d opacite il passait pour une salissure dans le coin de la carte.
   Plus petit, plus pale, et cale sur la ligne de texte, il redevient une
   ponctuation. */
.quote::before {
  content: "\201C";
  position: absolute;
  top: 10px;
  right: 20px;
  font-family: var(--affiche);
  font-size: 76px;
  line-height: 1;
  color: rgba(168, 85, 247, 0.11);
  pointer-events: none;
}

.quote blockquote {
  position: relative;
  margin-bottom: 18px;
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--text);
}

.quote figcaption {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.quote figcaption b { display: block; font-size: 14px; font-weight: 700; color: var(--v-100); }
.quote figcaption span { font-size: 12.5px; color: var(--muted-2); }

/* La mesure de 880 px garde les questions lisibles — au-dela, l oeil
   perd la ligne entre le libelle a gauche et le chevron a droite. Mais
   le bloc reste cale a gauche : centre, son titre partait 115 px plus a
   droite que tous les autres titres de la page, et la colonne entiere
   paraissait de travers. */
.faq { max-width: 880px; margin-inline: 0; }

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  background: var(--dalle);
  margin-top: 10px;
  overflow: hidden;
  transition: border-color var(--trans), background var(--trans);
}

.faq-item:hover { border-color: var(--border-fort); }
.faq-item[open] { border-color: var(--border-fort); background: rgba(124, 58, 237, 0.1); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }

.faq-item summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--v-300);
  border-bottom: 2px solid var(--v-300);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.24s cubic-bezier(0.22, 0.7, 0.3, 1);
}

.faq-item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }

.faq-item p {
  padding: 0 20px 19px;
  max-width: 68ch;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}

.cta {
  position: relative;
  padding: clamp(34px, 4vw, 54px) clamp(24px, 4vw, 48px);
  border: 1px solid var(--border-fort);
  border-radius: var(--r-l);
  background:
    radial-gradient(90% 150% at 50% 0%, rgba(124, 58, 237, 0.3), transparent 70%),
    var(--dalle);
  box-shadow: var(--ombre-2);
  text-align: center;
  overflow: hidden;
}

.cta h3 {
  font-family: var(--affiche);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}

.cta p { max-width: 54ch; margin: 0 auto 24px; color: var(--muted); line-height: 1.7; }


/* ---------------------------------------------------------------- 13.
   Vue Guide

   Quatre etapes numerotees, posees les unes sous les autres sans lien
   visible. On relie les pastilles par un filet vertical : la suite
   devient une progression et non une liste.
--------------------------------------------------------------------- */

#view-guide .steps,
#view-support .support-steps {
  position: relative;
  display: grid;
  gap: 4px;
  max-width: 820px;
}

#view-guide .step,
#view-support .support-steps .step {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0 20px;
  padding: 0 0 26px 0;
  border: 0;
  background: none;
  box-shadow: none;
}

#view-guide .step:last-child,
#view-support .support-steps .step:last-child { padding-bottom: 0; }

/* Le filet qui relie les pastilles. Il part du bas de la pastille et
   s arrete au haut de la suivante ; la derniere etape n en porte pas. */
#view-guide .step::before,
#view-support .support-steps .step::before {
  content: "";
  position: absolute;
  top: 46px;
  bottom: 6px;
  left: 21px;
  width: 1px;
  background: linear-gradient(180deg, var(--border-fort), rgba(168, 85, 247, 0.06));
}

#view-guide .step:last-child::before,
#view-support .support-steps .step:last-child::before { content: none; }

#view-guide .step-num,
#view-support .support-steps .step-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 1px solid var(--border-fort);
  border-radius: 50%;
  background: linear-gradient(160deg, #241048, #120826);
  color: var(--v-100);
  font-family: var(--affiche);
  font-size: 17px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--ombre-1);
}

#view-guide .step h3,
#view-support .support-steps .step h3 {
  font-family: var(--affiche);
  font-size: 18.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 10px 0 8px;
}

#view-guide .step p,
#view-support .support-steps .step p {
  max-width: 68ch;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}


/* ---------------------------------------------------------------- 14.
   Vue Support
--------------------------------------------------------------------- */

#view-support .support-grid { gap: 22px; align-items: start; }

#view-support .prio-banner,
#view-support .dedie-banner {
  border: 1px solid var(--border-fort);
  border-radius: var(--r-m);
  background: linear-gradient(100deg, rgba(251, 191, 36, 0.13), rgba(124, 58, 237, 0.09));
  box-shadow: var(--ombre-1);
}

#view-support .ticket-list { display: grid; gap: 10px; }

#view-support .ticket-empty {
  padding: 34px 24px;
  border: 1px dashed var(--border-fort);
  border-radius: var(--r-m);
  background: rgba(124, 58, 237, 0.05);
  color: var(--muted-2);
  text-align: center;
}


/* ---------------------------------------------------------------- 15.
   Vue Fil de discussion

   Une messagerie. Les deux colonnes se lisent mieux si la conversation
   porte la surface claire et la colonne laterale la surface sombre :
   l oeil se pose sur ce qui compte.
--------------------------------------------------------------------- */

#view-thread .chat {
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  background: var(--dalle);
  box-shadow: var(--ombre-2);
  overflow: hidden;
}

#view-thread .chat-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
}

#view-thread .chat-side { background: rgba(8, 4, 15, 0.42); }

#view-thread .chat-compose {
  padding: 16px 18px;
  border-top: 1px solid var(--border);
  background: rgba(8, 4, 15, 0.46);
}

/* En dessous de 560 px, l en-tete du fil tenait sur une seule ligne non
   secable : l etiquette de priorite et le bouton « Supprimer » sortaient
   de .chat-main, dont le « overflow: hidden » les rendait non seulement
   invisibles mais inatteignables. Les actions passent a la ligne. */
@media (max-width: 560px) {
  #view-thread .chat-head { flex-wrap: wrap; }
  #view-thread .chat-head-text { flex: 1 1 100%; }
  #view-thread .chat-head-tags { flex-wrap: wrap; flex-shrink: 1; width: 100%; }
}

#view-thread .state-tag,
#view-thread .prio-tag {
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ---------------------------------------------------------------- 16.
   Vue Compte

   La vue la plus longue du site : fiche, portefeuille, fidelite,
   commandes, reglages, zone de danger. Elle manquait d un decoupage
   lisible — tout etait au meme niveau de gris.
--------------------------------------------------------------------- */

#view-account .account-grid { gap: 22px; align-items: start; }

#view-account .account-card,
#view-account .wallet-card,
#view-account .set-card {
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 160px),
    var(--dalle);
  box-shadow: var(--ombre-2);
}

#view-account .account-head h2,
#view-account .account-section h3 {
  font-family: var(--affiche);
  font-weight: 700;
  letter-spacing: -0.01em;
}

#view-account .account-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(168, 85, 247, 0.1);
}

#view-account .account-lines > .account-line:last-child { border-bottom: 0; }

#view-account .wallet-solde {
  font-family: var(--affiche);
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--v-100);
}

#view-account .set-tabs {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(8, 4, 15, 0.55);
}

#view-account .set-tab { border-radius: 999px; font-size: 13.5px; }
#view-account .set-tab-glider { border-radius: 999px; background: var(--plein); }

/* La zone de danger doit se voir comme une zone, pas comme un bouton
   rouge perdu en bas d une carte violette. */
#view-account .account-danger {
  padding: 22px 24px;
  border: 1px solid rgba(251, 113, 133, 0.34);
  border-radius: var(--r-m);
  background: rgba(251, 113, 133, 0.06);
}

#view-account .loyalty-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(8, 4, 15, 0.8);
  border: 1px solid var(--border);
  overflow: hidden;
}

#view-account .loyalty-fill {
  background: var(--plein);
  box-shadow: 0 0 20px -5px rgba(192, 38, 211, 0.9);
}


/* ---------------------------------------------------------------- 17.
   Vue Panneau

   L outil lui-meme. Tout y est dense par nature : on ne cherche pas a
   l aerer, on cherche a le rendre lisible. Les cartes de
   telechargement, la carte d envoi, le journal et la file d attente
   recoivent la meme grammaire de surface que le reste du site.
--------------------------------------------------------------------- */

#view-panel .panel-grid { gap: 20px; align-items: start; }

#view-panel .dl-card,
#view-panel .dm-card,
#view-panel .queue-card,
#view-panel .lock-screen {
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 170px),
    var(--dalle);
  box-shadow: var(--ombre-2);
}

#view-panel .lock-screen { padding: 44px 32px; text-align: center; }

/* Le glyphe ⛔ manquait aux trois polices du site et arrivait en
   rectangle vide. C est desormais un trace, pose dans un disque pour
   qu il porte le meme poids visuel que l ancien caractere de 40 px. */
.lock-icon, .dl-lock-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border: 1px solid var(--border-fort);
  border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 10%, rgba(192, 132, 252, 0.26), rgba(124, 58, 237, 0.1));
  color: var(--v-100);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.lock-icon svg, .dl-lock-icon svg { width: 27px; height: 27px; display: block; }

#view-panel .lock-screen h3 {
  font-family: var(--affiche);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

#view-panel .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  background: rgba(8, 4, 15, 0.45);
  overflow: hidden;
}

#view-panel .stat {
  padding: 16px 14px;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#view-panel .stat:first-child { border-left: 0; }

#view-panel .stat-value {
  font-family: var(--affiche);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--v-100);
}

#view-panel .stat-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}

#view-panel .log-box {
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  background: rgba(4, 2, 8, 0.78);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.7;
}

#view-panel .log-empty { color: var(--muted-2); }

#view-panel .dl-os-btn {
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(8, 4, 15, 0.5);
  transition: border-color var(--trans), background var(--trans), transform 0.16s;
}

#view-panel .dl-os-btn:hover { transform: translateY(-1px); border-color: var(--border-fort); background: rgba(168, 85, 247, 0.14); }
#view-panel .dl-os-btn.is-on { border-color: var(--v-300); background: rgba(168, 85, 247, 0.2); color: var(--text); }

#view-panel .run-bar {
  border: 1px solid var(--border-fort);
  border-radius: var(--r-m);
  background: linear-gradient(100deg, rgba(124, 58, 237, 0.16), rgba(13, 6, 32, 0.9));
  box-shadow: var(--ombre-1);
}

#view-panel .run-bar-pct {
  font-family: var(--affiche);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.02em;
}


/* ---------------------------------------------------------------- 18.
   Vue Administration
--------------------------------------------------------------------- */

#view-admin .admin-bar,
#view-admin .admin-tools {
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  background: var(--dalle);
  box-shadow: var(--ombre-1);
}

#view-admin .admin-counts {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 13px;
}

#view-admin .role-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border: 1px solid var(--border-fort);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}


/* ---------------------------------------------------------------- 19.
   Connexion

   Une seule carte au milieu de l ecran. Elle portait la meme ombre
   plate que tout le reste ; c est le seul endroit du site ou un objet
   est reellement seul en scene, et il peut donc se permettre la
   profondeur complete.
--------------------------------------------------------------------- */

.auth-card {
  border: 1px solid var(--border-fort);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 220px),
    linear-gradient(170deg, #1c0e3a, #0b0518);
  box-shadow: var(--ombre-2), var(--glow);
}

.auth-head h1 { font-family: var(--affiche); }
.auth-sub { color: var(--muted); }

.auth-tabs {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(8, 4, 15, 0.55);
}

.auth-tab { border-radius: 999px; }

.field-hint { font-size: 12px; color: var(--muted-2); }

.code-input {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5em;
  text-align: center;
  font-size: 22px;
}

.auth-foot { color: var(--muted-2); }


/* ---------------------------------------------------------------- 20.
   Ecrans etroits
--------------------------------------------------------------------- */

@media (max-width: 760px) {
  .views { padding: 28px 18px 60px; }
  .topbar { padding: 11px 18px; }
  .footer { padding: 22px 18px 26px; }

  .trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-item { border-left: 0; border-top: 1px solid var(--border); }
  .trust-item:nth-child(-n + 2) { border-top: 0; }
  .trust-item:nth-child(odd) { border-right: 1px solid var(--border); }

  #view-panel .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-panel .stat { border-left: 0; border-top: 1px solid var(--border); }
  #view-panel .stat:nth-child(-n + 2) { border-top: 0; }
  #view-panel .stat:nth-child(odd) { border-right: 1px solid var(--border); }

  #view-features .cards-2 { grid-template-columns: minmax(0, 1fr); }

  .cta { padding: 30px 20px; }
}

/* Au doigt, les cibles doivent faire 44 px et etre separees. */
@media (pointer: coarse) {
  .faq-item summary { min-height: 52px; }
  .set-tab, .auth-tab { min-height: 44px; }
  select, input, textarea { font-size: 16px; } /* en dessous, iOS zoome */
}


/* --------------------------------------------------------------- 21.
   Reglages d affichage

   prefs.js pose quatre attributs sur <html>. Trois agissent deja par
   les jetons redefinis plus haut ; le contraste renforce doit etre
   redecline, puisqu il visait les anciennes valeurs.
--------------------------------------------------------------------- */

html[data-contraste="fort"] {
  --text: #ffffff;
  --muted: #e9ddff;
  --muted-2: #d0bdf5;
  --border: rgba(196, 132, 252, 0.45);
  --border-fort: rgba(216, 180, 254, 0.78);
  --dalle: rgba(17, 9, 36, 0.94);
  --panel: rgba(17, 9, 36, 0.94);
}

html[data-contraste="fort"] .hint,
html[data-contraste="fort"] .lead,
html[data-contraste="fort"] .account-note { color: var(--muted); }
html[data-contraste="fort"] .btn { border-width: 2px; }
html[data-contraste="fort"] body:not(.vue-accueil) #particles { opacity: 0.12; }
html[data-contraste="fort"] body:not(.vue-accueil) .aurora { opacity: 0.22; }

html[data-densite="compact"] .panel,
html[data-densite="compact"] .card { padding: 16px 18px; }
html[data-densite="aere"] .panel,
html[data-densite="aere"] .card { padding: 32px 34px; }


/* --------------------------------------------------------------- 22.
   Mouvement reduit

   Le reglage « animations : non » du panneau est deja traite par
   style.css. Ceci couvre la preference declaree au niveau du systeme,
   que le site ne lisait pas.
--------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .view.active { animation: none; }
  .btn:hover:not(:disabled),
  .card:hover,
  #view-panel .dl-os-btn:hover { transform: none; }
  .aurora { animation: none; }
  html { scroll-behavior: auto; }
}