/* =====================================================================
   REGLE ABSOLUE DE CE FICHIER : ON N'ANIME AUCUNE COULEUR.

   Une propriete nommee dans une transition reste FIGEE sur la valeur de
   l'ancien theme quand on bascule clair / sombre avec le bouton, sans
   recharger la page. Mesure du 2026-08-25 sur le Studio Flux : les boutons
   de la barre tombaient a 1,93 : 1 apres un clic (4,98 : 1 au chargement),
   et a 2,92 : 1 dans l'autre sens (7,53 : 1 au chargement). Le minimum
   legal est 4,5 : 1.

   Six temoins poses dans la page le meme jour ont montre que le gel touche
   EXACTEMENT les proprietes nommees : 'transition: color' fige la couleur,
   'transition: background-color' fige le fond, 'transition: border-color'
   fige la bordure, 'transition: all' fige les trois. Nommer les proprietes
   ne suffit donc pas : il faut ne pas les animer du tout.

   SEULES PROPRIETES AUTORISEES ICI : transform, opacity, box-shadow,
   max-height. Elles ne portent aucune couleur de theme.

   Un controle automatique le verifie : assets/tests/transitions.mjs
   ===================================================================== */

:root {
  --primary: #70BD95;
  --primary-dim: #5a9a7a;
  --primary-glow: rgba(112,189,149,.15);
  --primary-rgb: 112,189,149;
  --secondary: #1e3a8a;

  --bg-dark: #0f1923;
  --bg-sidebar: #1e2a38;
  --bg-panel: #253446;
  --bg-canvas: #2a3648;

  --text-light: #e8ecf1;
  --text-dim: #8899aa;

  --border: #2e4058;
  --border-light: #3a5068;

  --danger: #e74c3c;
  --warning: #f39c12;
  --info: #3498db;
  --success: #27ae60;

  --font: 'Segoe UI', system-ui, sans-serif;
  --radius: 6px;
  --shadow: 0 2px 12px rgba(0,0,0,.3);
  --tr: .15s ease;
}

[data-theme="light"] {
  --bg-dark: #f0f2f5;
  --bg-sidebar: #ffffff;
  --bg-panel: #e8ecf1;
  --bg-canvas: #dde3ea;

  --text-light: #1a2332;
  --text-dim: #4a5568;

  --border: #cbd5e0;
  --border-light: #a0aec0;

  --shadow: 0 2px 12px rgba(0,0,0,.08);
  --primary-glow: rgba(112,189,149,.12);
}

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

/* TAILLE DE POLICE · corrige le 2026-08-27.
 *
 * AVANT : « html, body { font-size: 14px } ». Une taille en pixels sur la
 * racine ECRASE la taille de police choisie par le visiteur dans son
 * navigateur : quelqu'un qui a regle 20 px parce qu'il voit mal en recevait
 * quand meme 14. C'est le defaut d'accessibilite le plus courant du web.
 *
 * MAINTENANT : la racine vaut 100 %, c'est-a-dire EXACTEMENT ce que le
 * visiteur a demande (16 px par defaut). Le corps est ramene a 0.875rem,
 * soit 14 px pour un reglage par defaut : a l'ecran, rien ne change. Mais
 * si le visiteur a choisi 20 px, le texte suit et vaut 17,5 px.
 *
 * Les tailles ecrites en pixels ailleurs dans le site ne suivent pas d'elles-
 * memes : c'est le facteur d'agrandissement de a11y.css qui s'en charge. */
html {
  font-size: 100%;
}

/* La taille de reference du site : 14 px pour un navigateur regle par defaut.
   Elle est posee sur BODY et sur lui seul · sur l'element racine, « rem » se
   calcule contre la valeur initiale (16 px) et non contre html lui-meme, si
   bien qu'ecrire cette regle sur « html, body » donnait 12,25 px au lieu de 14. */
body {
  font-size: 0.875rem;
}

html, body {
  width: 100%;
  min-height: 100vh;
  font-family: var(--font);
  background: var(--bg-dark);
  color: var(--text-light);
  line-height: 1.6;
  background-image:
    radial-gradient(ellipse 80% 50% at 15% 0%, rgba(112,189,149,.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 85% 100%, rgba(30,58,138,.07) 0%, transparent 55%);
}
[data-theme="light"] body {
  background-image:
    radial-gradient(ellipse 80% 50% at 15% 0%, rgba(112,189,149,.1) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 85% 100%, rgba(30,58,138,.06) 0%, transparent 55%);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dim); text-decoration: underline; }

.pe-header {
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.pe-header .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-light);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}

.pe-header .logo img { height: 40px; }
/* Pas de transition sur 'filter' : le filtre du logo est DIFFERENT selon le
   theme (voir les deux regles juste en dessous), il tombe donc sous la regle
   de l'en-tete. Prudence assumee : le gel n'a PAS ete mesure sur 'filter'
   (brightness(0) invert(1) et brightness(1) ne s'interpolent pas, le
   navigateur saute donc directement d'une valeur a l'autre). On n'anime
   simplement rien qui depende du theme. */

.pe-header .logo img { filter: brightness(0) invert(1); }

[data-theme="light"] .pe-header .logo img { filter: brightness(1); }
.pe-header .logo span { color: var(--primary); }

.pe-header nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.pe-header nav a {
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--text-dim);
  text-decoration: none;
}
.pe-header nav a:hover { background: var(--primary-glow); color: var(--primary); text-decoration: none; }
.pe-header nav a.active { background: var(--primary-glow); color: var(--primary); font-weight: 600; }

.search-wrap { position: relative; display: flex; align-items: center; }
.search-wrap .search-box { padding-right: 28px; }
.search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-dim); font-size: 15px;
  cursor: pointer; padding: 2px 4px; line-height: 1; display: none;
  border-radius: 3px;
}
.search-clear:hover { color: var(--danger, #e74c3c); }

.pe-header .search-box {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 10px;
  color: var(--text-light);
  font-family: var(--font);
  font-size: 12px;
  width: 200px;
}
.pe-header .search-box:focus { border-color: var(--primary); outline: none; }

.pe-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 24px 60px;
}

.pe-main > h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
}

.pe-main > .subtitle {
  color: var(--text-dim);
  font-size: 13px;
  margin-bottom: 28px;
}

.url-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.url-card {
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  /* Le survol garde son mouvement et son ombre ; le fond (--bg-sidebar) et la
     bordure (--border) viennent du theme, ils changent d'un coup. */
  transition: transform var(--tr), box-shadow var(--tr);
  opacity: 1;
  transform: translateY(0) scale(1);
  position: relative;
}

.url-card:hover {
  border-color: var(--primary);
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 16px 48px rgba(0,0,0,.35),
    0 0 0 1px rgba(112,189,149,.25),
    0 0 80px -15px rgba(112,189,149,.2);
  backdrop-filter: blur(20px) saturate(180%);
  background: rgba(30, 42, 56, .55);
}

[data-theme="light"] .url-card:hover {
  background: var(--bg-sidebar);
  backdrop-filter: none;
  box-shadow:
    0 12px 36px rgba(0,0,0,.10),
    0 0 0 1px rgba(112,189,149,.3),
    0 0 60px -15px rgba(112,189,149,.12);
}

.url-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.url-card .url-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 14px;
}

.url-card .url-item img { width: 20px; height: 20px; flex-shrink: 0; }

.url-card .url-item a {
  color: var(--primary);
  text-decoration: none;
}
.url-card .url-item a:hover { text-decoration: underline; }

.url-card .url-detail {
  font-size: 12px;
  color: var(--text-dim);
  padding-left: 28px;
  word-break: break-all;
  user-select: all;
  cursor: help;
}

.url-card .url-label {
  font-size: 13px;
  color: var(--text-dim);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 12px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--bg-panel); color: var(--text-light); text-decoration: none; }
.btn.primary { background: var(--primary); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--primary-dim); }

.pe-section {
  margin-bottom: 16px;
}

.pe-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-light);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.pe-section-title:hover { border-color: var(--primary); }

.pe-section-title::after {
  content: '\25BC';
  font-size: 10px;
  color: var(--text-dim);
  transition: transform .3s;
}

.pe-section.open .pe-section-title::after { transform: rotate(180deg); }
.pe-section.open .pe-section-title { border-color: var(--primary); background: var(--primary-glow); color: var(--primary); }

.pe-section-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease-out;
}

.pe-section.open .pe-section-content { max-height: 9999px; }

.app-item {
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 8px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.app-item:hover { border-color: var(--border-light); }

.app-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-light);
}

.app-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.app-buttons button,
.app-buttons select {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 11px;
  font-family: var(--font);
  font-weight: 600;
  min-width: 60px;
}

.app-buttons button:hover,
.app-buttons select:hover { background: var(--primary-dim); }

.app-buttons select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='18' viewBox='0 0 24 24' width='18' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  padding-right: 26px;
}

.app-buttons select option {
  color: var(--text-light);
  background: var(--bg-sidebar);
  padding: 6px;
}

.pe-two-cols {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.pe-col-left {
  flex: 1;
  min-width: 300px;
}

.pe-col-right {
  flex: 2;
  min-width: 400px;
  position: sticky;
  top: 76px;
  align-self: flex-start;
  height: fit-content;
}

.pe-card {
  background: var(--bg-sidebar);
  padding: 20px;
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.pe-card img { width: 100%; border-radius: 8px; }

.pe-card .description {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.7;
  margin-top: 10px;
}

.pe-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 100vh;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 20px 0;
  z-index: 100;
}

.pe-sidebar-title {
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 0 20px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

.pe-sidebar a {
  display: block;
  color: var(--text-dim);
  text-decoration: none;
  padding: 8px 20px;
  font-size: 12px;
  border-left: 3px solid transparent;
  line-height: 1.4;
}
.pe-sidebar a:hover,
.pe-sidebar a.active {
  color: var(--text-light);
  background: var(--primary-glow);
  border-left-color: var(--primary);
  text-decoration: none;
}

.pe-sidebar-main {
  margin-left: 240px;
  padding: 32px 40px 60px;
  max-width: 1100px;
}

.code-wrapper {
  position: relative;
  background: #282c34;
  border-radius: 8px;
  margin-bottom: 16px;
}

.code-wrapper pre {
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
  padding: 16px 18px !important;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #ccc;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font);
  z-index: 10;
}
.copy-btn:hover { background: rgba(255,255,255,.25); color: #fff; }
.copy-btn.copied { background: rgba(112,189,149,.35); color: var(--primary); border-color: var(--primary); }

.doc-section {
  margin-bottom: 48px;
  scroll-margin-top: 80px;
}

.doc-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
}

.doc-section h2 {
  font-size: 16px;
  font-weight: 700;
}

.doc-badge {
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.doc-steps {
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.9;
}

.doc-steps .warn {
  display: inline-block;
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.3);
  color: var(--warning);
  border-radius: var(--radius);
  padding: 3px 10px;
  font-size: 12px;
}

.doc-tag {
  background: var(--primary-glow);
  color: var(--primary);
  border: 1px solid rgba(112,189,149,.3);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
}
.doc-tag.danger  { background: rgba(231,76,60,.1);  color: var(--danger);  border-color: rgba(231,76,60,.3); }
.doc-tag.warning { background: rgba(243,156,18,.1); color: var(--warning); border-color: rgba(243,156,18,.3); }

code:not(.hljs) {
  background: var(--primary-glow);
  color: var(--primary);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
  font-family: 'Consolas', monospace;
}

.pe-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.pe-modal-overlay.active { opacity: 1; pointer-events: all; }

.pe-modal {
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 90%;
  height: 90%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
  transform: scale(.9);
  transition: transform .3s;
}
.pe-modal-overlay.active .pe-modal { transform: scale(1); }

.pe-modal .close-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 28px;
  color: var(--text-dim);
  cursor: pointer;
  background: none;
  border: none;
  z-index: 10;
}
.pe-modal .close-btn:hover { color: var(--danger); }

.pe-modal iframe { flex: 1; width: 100%; border: none; border-radius: 0 0 10px 10px; }

.red-bordered {
  border: 2px solid var(--danger);
  padding: 10px;
  border-radius: 10px;
  margin-top: 16px;
}

.page-title {
  font-size: 1.3125rem;   /* 1.5rem quand la racine valait 14px */
  font-weight: 700;
  margin-bottom: 6px;
}

.page-subtitle {
  color: var(--text-dim);
  font-size: 13px;
  margin-bottom: 32px;
}

#date-du-jour { color: var(--warning); font-weight: bold; }

.pe-footer {
  margin-top: auto;
  padding: 20px;
  text-align: center;
  font-size: 10px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
}

.fav-star { margin-left: auto; cursor: pointer; font-size: 14px; opacity: 0; transition: opacity .15s, transform .2s; color: var(--text-dim); background: none; border: none; padding: 0 2px; flex-shrink: 0; line-height: 1; }
.draggable-line:hover .fav-star, .fav-star.active { opacity: 1; }
.fav-star.active { color: #ffd700; }
.fav-star:hover { transform: scale(1.3); color: #ffd700; }

#favorites-section { background: var(--bg-sidebar); border: 2px solid #ffd700; border-radius: 10px; padding: 16px 18px; box-shadow: 0 0 24px rgba(255,215,0,.08); order: -1; }
#favorites-section .fav-header { font-size: 13px; font-weight: 700; color: #ffd700; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 2px solid rgba(255,215,0,.3); display: flex; align-items: center; gap: 8px; }
#favorites-section .fav-trash-all { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 14px; color: var(--danger, #e74c3c); opacity: .7; transition: opacity .15s, transform .15s; }
#favorites-section .fav-trash-all:hover { opacity: 1; transform: scale(1.15); }
#favorites-section .fav-item { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 12px; }
#favorites-section .fav-item a { color: var(--primary); text-decoration: none; }
#favorites-section .fav-item a:hover { text-decoration: underline; }
#favorites-section .fav-item img { width: 16px; height: 16px; flex-shrink: 0; }
#favorites-section .fav-trash { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 12px; opacity: 0; color: var(--text-dim); transition: opacity .15s; }
#favorites-section .fav-item:hover .fav-trash { opacity: 1; color: var(--danger, #e74c3c); }
#favorites-section .fav-origin { font-size: 10px; color: var(--text-dim); margin-left: 4px; white-space: nowrap; }

@media (max-width: 768px) {
  .pe-sidebar { display: none; }
  .pe-sidebar-main { margin-left: 0; padding: 20px; }
  .pe-two-cols { flex-direction: column; }
  .pe-col-right { position: static; min-width: 0; }
  .pe-header nav { display: none; }
  /* Audit du 2026-09-06 : sur un petit ecran, l'en-tete a le droit de passer sur
     deux lignes au lieu de deborder a droite. Le cas se produit quand le visiteur
     a choisi une grande taille de police (facteur --pref-zoom de a11y.css) : le
     logo, le fil d'Ariane, la barre d'outils et le choix de langue, tous en
     pixels, ne tiennent plus dans les 412 px d'un telephone, la page devenait plus
     large que l'ecran et le navigateur mobile la dezoomait. flex-wrap ne change
     RIEN tant que tout tient sur une ligne (hauteur inchangee : min-height 56px). */
  .pe-header { flex-wrap: wrap; height: auto; min-height: 56px; padding: 0 16px; gap: 12px; }
}

@media (max-width: 600px) {
  .url-grid { grid-template-columns: 1fr; }
  .app-item { flex-direction: column; align-items: flex-start; }
}