/* Identite visuelle PostsDeck : la couche au dessus de design.css.

   Chargee APRES design.css et pico.min.css, elle reprend les jetons de la
   marque et les surfaces, sans redefinir les composants un par un : la meme
   methode que design.css applique a Pico, un niveau plus haut.

   Deux principes, tenus ici et nulle part ailleurs :

   - LE VERT EST L'ACCENT. #34d399 porte la marque, les etats positifs et les
     focus. En theme clair il descend a #059669 pour le TEXTE, ou il faut
     atteindre 4,5:1 ; l'aplat du bouton garde le degrade vif, ou le texte pose
     dessus est sombre.
   - LE VERRE EST RARE. Il n'existe que sur trois surfaces : le rail, les
     panneaux en surcouche, et la connexion. Une liste de cartes translucides
     fatigue l'oeil et baisse le contraste ; c'est mesure et assume.

   Les valeurs de contraste sont calibrees sur les fonds REELLEMENT rendus.
   La methode est celle de design.css, voir son en-tete. */

:root {
  --pd-vert: #34d399;
  --pd-vert-vif: #4ade80;
  --pd-vert-profond: #059669;
  --pd-vert-texte: #047857;

  --pd-rayon-carte: 16px;
  --pd-rayon-champ: 12px;
  --pd-ombre-carte: 0 18px 40px -24px rgba(0, 0, 0, 0.55);
  --pd-ombre-surcouche:
    0 40px 80px -30px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
}

/* --- Theme clair : variante claire de la meme famille --- */
:root:not([data-theme="dark"]) {
  --pd-fond: #f7f9f8;
  --pd-fond-degrade:
    radial-gradient(52rem 52rem at 10% 0%, rgba(52, 211, 153, 0.10), transparent 60%),
    radial-gradient(46rem 46rem at 92% 8%, rgba(5, 150, 105, 0.08), transparent 60%),
    linear-gradient(170deg, #fbfdfc, #f2f6f4 60%, #eef3f1);
  --pd-surface: #ffffff;
  --pd-surface-2: #f2f5f4;
  --pd-texte: #10161a;
  --pd-doux: #5b6b66;
  --pd-bord: rgba(16, 22, 26, 0.10);
  --pd-bord-fort: rgba(16, 22, 26, 0.16);
  --pd-survol: rgba(5, 150, 105, 0.07);
  --pd-verre: rgba(255, 255, 255, 0.72);
  --pd-accent: var(--pd-vert-texte);
  --pd-accent-fond: rgba(5, 150, 105, 0.10);
  --pd-accent-bord: rgba(5, 150, 105, 0.30);

  /* L'accent de Pico suit : c'est ce qui fait passer les liens, les focus et
     les bordures de champ au vert sans les reprendre un par un. */
  --pico-primary: #047857;
  --pico-primary-hover: #035c41;
  --pico-primary-background: #059669;
  --pico-primary-hover-background: #047857;
  --pico-primary-focus: rgba(5, 150, 105, 0.22);
  --pico-primary-inverse: #ffffff;
}

/* --- Theme sombre : la direction validee --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pd-fond: #05070a;
    --pd-fond-degrade:
      radial-gradient(60rem 60rem at 15% 20%, rgba(52, 211, 153, 0.16), transparent 60%),
      radial-gradient(50rem 50rem at 85% 30%, rgba(5, 150, 105, 0.14), transparent 60%),
      radial-gradient(70rem 70rem at 50% 110%, rgba(74, 222, 128, 0.11), transparent 65%),
      linear-gradient(160deg, #05070a, #0a0f14 60%, #060b0e);
    --pd-surface: rgba(255, 255, 255, 0.045);
    --pd-surface-2: rgba(255, 255, 255, 0.075);
    --pd-texte: #eef2f0;
    --pd-doux: #9fb0ab;
    --pd-bord: rgba(255, 255, 255, 0.09);
    --pd-bord-fort: rgba(255, 255, 255, 0.14);
    --pd-survol: rgba(52, 211, 153, 0.10);
    --pd-verre: rgba(255, 255, 255, 0.055);
    --pd-accent: var(--pd-vert);
    --pd-accent-fond: rgba(52, 211, 153, 0.12);
    --pd-accent-bord: rgba(52, 211, 153, 0.30);

    --pico-primary: #4ade80;
    --pico-primary-hover: #6ee7a0;
    --pico-primary-background: #059669;
    --pico-primary-hover-background: #047857;
    --pico-primary-focus: rgba(52, 211, 153, 0.25);
    --pico-primary-inverse: #04120c;
  }
}

[data-theme="dark"] {
  --pd-fond: #05070a;
  --pd-fond-degrade:
    radial-gradient(60rem 60rem at 15% 20%, rgba(52, 211, 153, 0.16), transparent 60%),
    radial-gradient(50rem 50rem at 85% 30%, rgba(5, 150, 105, 0.14), transparent 60%),
    radial-gradient(70rem 70rem at 50% 110%, rgba(74, 222, 128, 0.11), transparent 65%),
    linear-gradient(160deg, #05070a, #0a0f14 60%, #060b0e);
  --pd-surface: rgba(255, 255, 255, 0.045);
  --pd-surface-2: rgba(255, 255, 255, 0.075);
  --pd-texte: #eef2f0;
  --pd-doux: #9fb0ab;
  --pd-bord: rgba(255, 255, 255, 0.09);
  --pd-bord-fort: rgba(255, 255, 255, 0.14);
  --pd-survol: rgba(52, 211, 153, 0.10);
  --pd-verre: rgba(255, 255, 255, 0.055);
  --pd-accent: var(--pd-vert);
  --pd-accent-fond: rgba(52, 211, 153, 0.12);
  --pd-accent-bord: rgba(52, 211, 153, 0.30);

  --pico-primary: #4ade80;
  --pico-primary-hover: #6ee7a0;
  --pico-primary-background: #059669;
  --pico-primary-hover-background: #047857;
  --pico-primary-focus: rgba(52, 211, 153, 0.25);
  --pico-primary-inverse: #04120c;
}

/* --- Le fond vivant, sur les pages qui en portent (l'application) ---
   Le degrade vit sur le <body> et non sur `.appli` : c'est ce qui laisse les
   halos, peints en z-index -1, apparaitre entre le fond et le contenu. Un
   degrade pose sur `.appli` les recouvrirait, puisqu'il serait peint apres. */
.page-identite {
  background: var(--pd-fond-degrade);
  background-attachment: fixed;
  color: var(--pd-texte);
}
.page-identite .appli { background: transparent; }

/* Deux halos qui derivent lentement. Discrets (35 pour cent d'opacite, 90px de
   flou) : c'est une profondeur, pas un feu d'artifice. La maquette validee les
   porte, le mouvement est coupe si le systeme le demande. */
.page-identite::before,
.page-identite::after {
  content: "";
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  pointer-events: none;
  will-change: transform;
}
.page-identite::before {
  width: 28rem; height: 28rem; left: -6rem; top: -6rem;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.5), transparent 70%);
  animation: pd-halo-1 34s ease-in-out infinite;
}
.page-identite::after {
  width: 32rem; height: 32rem; right: -8rem; bottom: -10rem;
  background: radial-gradient(circle, rgba(5, 150, 105, 0.45), transparent 70%);
  animation: pd-halo-2 40s ease-in-out infinite;
}
@keyframes pd-halo-1 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(3rem, 2rem, 0) scale(1.1); }
}
@keyframes pd-halo-2 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-2rem, -3rem, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .page-identite::before,
  .page-identite::after { animation: none; }
}

/* --- Le rail : une des trois surfaces en verre --- */
.page-identite .barre-laterale {
  background: var(--pd-verre);
  border-right: 1px solid var(--pd-bord);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}
.page-identite .barre-nav a { color: var(--pd-doux); }
.page-identite .barre-nav a:hover { background: var(--pd-survol); color: var(--pd-texte); }
.page-identite .barre-nav a[aria-current="page"] {
  color: var(--pd-texte);
  background: var(--pd-accent-fond);
  border-left-color: var(--pd-vert);
}

/* --- Les surfaces de travail : opaques, pas de verre ---
   Le rail, le panneau de detail et la connexion portent le verre ; les cartes,
   les compteurs et la file d'attente, non. C'est le choix qui garde l'ecran
   lisible pendant des heures, et il est assume dans la maquette.

   On remappe les jetons de la base plutot que de reprendre chaque composant un
   par un : design.css construit ses cartes, ses compteurs et ses champs sur
   `--pico-card-background-color`, `--pico-card-border-color` et
   `--pico-muted-color`, donc les deplacer ici les fait tous suivre. */
.page-identite {
  --pico-card-background-color: var(--pd-surface);
  --pico-card-border-color: var(--pd-bord);
  --pico-card-box-shadow: none;
  --pico-muted-border-color: var(--pd-bord);
  --pico-muted-color: var(--pd-doux);
  --pico-color: var(--pd-texte);
}

.page-identite .carte,
.page-identite .publication,
.page-identite .compteur {
  background: var(--pd-surface);
  border: 1px solid var(--pd-bord);
  border-radius: var(--pd-rayon-carte);
  box-shadow: none;
}

/* --- Les cartes de publication --- */
.page-identite .publication {
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.page-identite .publication:hover {
  background: var(--pd-surface-2);
  border-color: var(--pd-accent-bord);
  transform: translateX(2px);
}
.page-identite .publication-titre { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }

/* --- Le bandeau de compteurs --- */
.page-identite .compteur { padding: 0.9rem 1rem; border-radius: 15px; }
.page-identite .compteur:hover {
  background: var(--pd-surface-2);
  border-color: var(--pd-bord-fort);
  transform: translateY(-1px);
}
.page-identite .compteur--actif {
  border-color: var(--pd-accent-bord);
  box-shadow: none;
}
.page-identite .compteur-nombre {
  font-size: 1.7rem; font-weight: 640; letter-spacing: -0.03em;
}
.page-identite .compteur-libelle { color: var(--pd-doux); }
/* La bordure reste neutre : c'est le nombre qui porte le statut, comme dans la
   maquette. Sept bordures colorees cote a cote faisaient un arc-en-ciel. */
.page-identite .compteur--brouillon,
.page-identite .compteur--a-relire,
.page-identite .compteur--pret,
.page-identite .compteur--programme,
.page-identite .compteur--publie,
.page-identite .compteur--a-reprogrammer { border-color: var(--pd-bord); }
.page-identite .compteur--actif { border-color: var(--pd-accent-bord); }

/* --- Le sous-titre et les puces de filtre --- */
.page-identite .sous-titre { color: var(--pd-doux); }
.page-identite .puce-filtre { border-color: var(--pd-bord); color: var(--pd-doux); }
.page-identite .puce-filtre:hover {
  background: var(--pd-surface-2);
  border-color: var(--pd-bord-fort);
  color: var(--pd-texte);
}
.page-identite .puce-filtre--actif {
  color: var(--pd-accent);
  border-color: var(--pd-accent-bord);
  background: var(--pd-accent-fond);
}

/* --- Les boutons --- */
.page-identite .bouton {
  border-radius: 10px;
  font-weight: 600;
  padding: 0.6rem 1rem;
  font-size: 0.87rem;
}
.page-identite .bouton:not(.secondaire):not(.sensible):not(.destructif) {
  background: linear-gradient(180deg, var(--pd-vert-vif), var(--pd-vert-profond));
  border-color: transparent;
  color: #04120c;
  box-shadow: 0 8px 20px -8px rgba(52, 211, 153, 0.5);
}
.page-identite .bouton:not(.secondaire):not(.sensible):not(.destructif):hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.page-identite .bouton.secondaire {
  background: var(--pd-surface);
  border-color: var(--pd-bord-fort);
  color: var(--pd-texte);
}
.page-identite .bouton.secondaire:hover {
  background: var(--pd-surface-2);
  border-color: var(--pd-bord-fort);
  color: var(--pd-texte);
}

/* --- Les menus en icone (filtre, ajout) --- */
.page-identite .menu-icone-bouton {
  border-radius: 10px;
  background: var(--pd-surface);
  border-color: var(--pd-bord-fort);
  color: var(--pd-texte);
}
.page-identite .menu-icone-bouton:hover { background: var(--pd-surface-2); }
.page-identite .menu-icone-bouton--actif {
  border-color: var(--pd-accent-bord);
  color: var(--pd-vert);
}
.page-identite .menu-icone-panneau {
  background: var(--pd-surface-2);
  border-color: var(--pd-bord-fort);
  border-radius: var(--pd-rayon-carte);
  box-shadow: var(--pd-ombre-surcouche);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

/* --- Les actions en icone d'une carte ---
   `border: 1px solid transparent` n'est pas un ornement : le bouton
   « ouvrir le detail » est un `<button>`, et la base lui pose une bordure que
   la classe `.action-icone` de design.css ne neutralisait pas. Le crayon, lui,
   est un `<a>`, sans bordure. Les deux voisins se rendaient donc differemment,
   le bouton cercle d'un contour vert que l'oeil lisait comme un etat. */
.page-identite .action-icone {
  color: var(--pd-doux);
  border: 1px solid transparent;
  border-radius: 10px;
}
.page-identite .action-icone:hover { background: var(--pd-surface-2); color: var(--pd-texte); }
.page-identite .action-icone:focus-visible { border-color: var(--pd-accent-bord); }

/* --- La file d'attente --- */
.page-identite .file-entree {
  background: var(--pd-surface);
  border: 1px solid var(--pd-bord);
  border-radius: 12px;
}
.page-identite .file-entree:hover {
  background: var(--pd-surface-2);
  border-color: var(--pd-accent-bord);
}

/* --- Le panneau de detail : verre, parce qu'il est en surcouche --- */
.page-identite .tableau-bord--detail aside {
  background: var(--pd-verre);
  border-color: var(--pd-bord-fort);
  backdrop-filter: blur(30px) saturate(160%);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
}
/* Le panneau et la carte ouverte marquaient leur lien par un contour vert vif
   (`--pico-primary`) et un anneau de la meme couleur. Le repere reste, adouci :
   trois contours vifs sur le meme ecran (bouton, carte, panneau) faisaient
   clignoter la page. */
.page-identite .panneau-detail { border-color: var(--pd-accent-bord); }
.page-identite .publication--ouverte {
  border-color: var(--pd-accent-bord);
  box-shadow: 0 0 0 1px var(--pd-accent-bord);
}

/* --- Les titres --- */
.page-identite .contenu h1 { font-size: 1.5rem; letter-spacing: -0.025em; }
.page-identite .titre-liste { letter-spacing: -0.02em; }