/*
 * Material32 : theme sombre modere pour links.echosystem.fr
 * Base : Shaarli Material (kalvn) v0.16.5, surcharge chargee apres bundle.css.
 * Toutes les couleurs sont dans :root, a retoucher ici en priorite.
 */

:root {
  color-scheme: dark;

  /* fonds, du plus profond au plus clair */
  --m32-bg:         #262c34;
  --m32-header:     #1f242b;
  --m32-surface:    #313944;
  --m32-surface-2:  #3a4350;
  --m32-surface-3:  #45505e;
  --m32-border:     #4a5563;
  --m32-border-soft:#3b4451;

  /* textes */
  --m32-text:       #dfe5ec;
  --m32-text-2:     #b8c2ce;
  --m32-muted:      #8d9aaa;

  /* accents */
  --m32-accent:       #5aa9e6;
  --m32-accent-hover: #7bbcee;
  --m32-accent-soft:  rgba(90, 169, 230, .16);
  --m32-title:        #9ccbff;
  --m32-title-hover:  #c6e1ff;
  --m32-url:          #6fc7b3;
  --m32-pin:          #f0b860;
  --m32-shadow-h:     0 8px 24px rgba(0,0,0,.34);
  --m32-danger:       #e57373;
  --m32-warning:      #f0a95a;
  --m32-success:      #7cc98a;

  --m32-radius:   8px;
  --m32-radius-s: 6px;
  --m32-shadow:   0 1px 2px rgba(0,0,0,.25), 0 4px 14px rgba(0,0,0,.22);
  --m32-shadow-l: 0 10px 34px rgba(0,0,0,.45);
  --m32-ring:     0 0 0 3px rgba(90, 169, 230, .28);
}

/* ===== base ===== */
html, body { background: var(--m32-bg); color: var(--m32-text); }
body { font-size: 16px; }
a { color: var(--m32-accent); }
a:focus, a:hover { color: var(--m32-accent-hover); }
a:active { color: var(--m32-accent); }
::selection { background: var(--m32-accent); color: #fff; }
hr, hr.darker { border-top-color: var(--m32-border); }
legend { color: var(--m32-text); border-bottom-color: var(--m32-border); }
.text-warning { color: var(--m32-warning); }
.text-success { color: var(--m32-success); }
.text-error, p.highlight { color: var(--m32-danger); }
.nothing-found, .light-heading, .link-counter { color: var(--m32-muted); }
.search-highlight { background: rgba(242, 205, 92, .35); color: inherit; border-radius: 3px; }

* { scrollbar-color: var(--m32-surface-3) var(--m32-bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--m32-bg); }
::-webkit-scrollbar-thumb { background: var(--m32-surface-3); border-radius: 10px; border: 2px solid var(--m32-bg); }

/* ===== largeur : pleine page ===== */
.container { width: auto; max-width: none; padding-left: 2vw; padding-right: 2vw; }
@media (min-width: 768px)  { .container { width: auto; } }
@media (min-width: 1200px) { .container { width: auto; } }

/* ===== en-tete ===== */
.header-main {
  background-color: var(--m32-header);
  border-bottom: 2px solid var(--m32-accent);
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.header-main a.header-brand { font-weight: 400; letter-spacing: .02em; }
.header-main a.header-brand:hover,
.header-main .header-middle a:hover,
.icon-header:focus, .icon-header:hover { background-color: rgba(255,255,255,.08); }
.header-main .toolbar-link { border-radius: var(--m32-radius-s); }
.icon-header.filter-on { color: var(--m32-danger); }

/* ===== menus deroulants (popups) ===== */
.popup {
  background: var(--m32-surface-2);
  color: var(--m32-text);
  border: 1px solid var(--m32-border);
  border-radius: var(--m32-radius);
  box-shadow: var(--m32-shadow-l);
  overflow: hidden;
}
.popup-title {
  background-color: var(--m32-surface-3);
  color: var(--m32-text);
  font-weight: 600;
  letter-spacing: .02em;
}
.popup h2, .popup label { color: var(--m32-muted); }
.popup-close:hover { background-color: rgba(255,255,255,.1); }
.header-main .popup a, .header-main .popup a:hover { color: var(--m32-text); }
.popup ul li a { border-radius: var(--m32-radius-s); transition: background-color .15s; }
.popup ul li a:hover { background-color: var(--m32-accent-soft); }

/* autocompletion des tags */
.awesomplete ul, div.awesomplete > ul {
  background: var(--m32-surface-2);
  border: 1px solid var(--m32-border);
  border-radius: var(--m32-radius);
  box-shadow: var(--m32-shadow-l);
  overflow: hidden;
}
div.awesomplete > ul > li { background-color: transparent; color: var(--m32-text); }
div.awesomplete > ul > li:hover { background-color: var(--m32-surface-3); }
div.awesomplete li:hover mark, div.awesomplete mark { background-color: rgba(242,205,92,.3); color: inherit; }
div.awesomplete > ul > li[aria-selected=true] { background-color: var(--m32-accent); color: #fff; }
div.awesomplete > ul > li[aria-selected=true]:hover { background-color: var(--m32-accent-hover); }

/* ===== champs de formulaire ===== */
input[type=number], input[type=password], input[type=search], input[type=text],
input[type=url], input[type=email], textarea, select {
  background: var(--m32-surface-2);
  color: var(--m32-text);
  border: 1px solid var(--m32-border);
  border-radius: var(--m32-radius-s);
  padding: 9px 12px;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
input[type=number]:hover, input[type=password]:hover, input[type=search]:hover, input[type=text]:hover,
input[type=url]:hover, input[type=email]:hover, textarea:hover, select:hover {
  border-color: var(--m32-surface-3);
  background-color: var(--m32-surface-3);
}
input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=text]:focus,
input[type=url]:focus, input[type=email]:focus, textarea:focus, select:focus {
  border-color: var(--m32-accent);
  box-shadow: var(--m32-ring);
  background-color: var(--m32-surface-2);
  outline: 0;
}
input::placeholder, textarea::placeholder { color: var(--m32-muted); opacity: 1; }

select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 38px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238d9aaa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
select:hover, select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235aa9e6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
select option, select optgroup { background: var(--m32-surface-2); color: var(--m32-text); }

label { color: var(--m32-text-2); }
label.active, .form-entry:focus-within label { color: var(--m32-accent); }
.sublabel { color: var(--m32-muted); }

/* grand champ de recherche */
input.input-big {
  background: var(--m32-surface);
  color: var(--m32-text);
  border: 1px solid var(--m32-border);
  border-radius: var(--m32-radius);
}
input.input-big:focus { border-color: var(--m32-accent); box-shadow: var(--m32-ring); }
.card-search input[type=search] { background-color: var(--m32-surface-2); }
.fullscreen, .overlay { background-color: rgba(15, 18, 23, .82); backdrop-filter: blur(3px); }

/* cases a cocher, boutons radio, interrupteurs */
[type=checkbox] + label, [type=radio] + label { color: var(--m32-text); }
[type=checkbox] + label:before,
[type=checkbox].filled-in:not(:checked) + label:after,
[type=radio]:not(:checked) + label:before,
[type=radio]:not(:checked) + label:after { border-color: var(--m32-muted); }
[type=checkbox]:checked + label:before { border-top-color: transparent; border-left-color: transparent; border-right-color: var(--m32-accent); border-bottom-color: var(--m32-accent); }
[type=checkbox].filled-in:checked + label:before { border-right-color: #fff; border-bottom-color: #fff; }
[type=checkbox].filled-in:checked + label:after,
[type=radio]:checked + label:after,
[type=radio].with-gap:checked + label:after { border-color: var(--m32-accent); background-color: var(--m32-accent); }
[type=radio].with-gap:checked + label:before { border-color: var(--m32-accent); }
.switch label .lever { background-color: var(--m32-surface-3); }
.switch label .lever:after { background-color: var(--m32-text-2); }
.switch label input[type=checkbox]:checked + .lever { background-color: rgba(90,169,230,.45); }
.switch label input[type=checkbox]:checked + .lever:after { background-color: var(--m32-accent); }

/* ===== boutons ===== */
.button, .button-base, .button-inverse, .button-raised { border-radius: var(--m32-radius-s); }
.button { color: var(--m32-text); }
.button:focus, .button:hover { background-color: rgba(255,255,255,.08); color: var(--m32-text); }
.button-raised { background-color: var(--m32-surface-3); color: var(--m32-text); }
.button-raised:focus, .button-raised:hover { background-color: #52606f; color: #fff; }
.button-primary { background-color: var(--m32-accent); color: #fff; }
.button-primary:focus, .button-primary:hover { background-color: var(--m32-accent-hover); color: #fff; }
.button-primary:active { background-color: #4a96d0; }
.button-alert { background-color: #d35f5f; }
.button-alert:focus, .button-alert:hover { background-color: var(--m32-danger); }
.button-floating { background-color: var(--m32-accent); box-shadow: var(--m32-shadow-l); }
.large-icon-button { color: var(--m32-text); border-radius: var(--m32-radius); }
.large-icon-button:focus, .large-icon-button:hover { background-color: var(--m32-surface-3); color: var(--m32-text); }
.bookmarklet { background-color: var(--m32-surface-2); border-color: var(--m32-border); color: var(--m32-text); border-radius: var(--m32-radius-s); }
.bookmarklet:focus, .bookmarklet:hover { color: var(--m32-text); background-color: var(--m32-surface-3); }

/* ===== cartes et liens ===== */
.card, .link-outer {
  background: var(--m32-surface);
  border: 1px solid var(--m32-border-soft);
  border-radius: var(--m32-radius);
  box-shadow: var(--m32-shadow);
}
.link-outer:hover { border-color: var(--m32-border); }
.card-overlay { background-color: rgba(38, 44, 52, .85); }
.card-header, .card-title, h1.card-header { border-bottom-color: var(--m32-border-soft); color: var(--m32-text); }
.link-header { border-bottom: none; }
.card-subheader { color: var(--m32-muted); }

/* carte d'un lien : relief doux, barre d'accent a gauche au survol */
.link-outer {
  margin: 14px 0;
  background: linear-gradient(180deg, var(--m32-surface) 0%, #2d353f 100%);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.link-outer:hover {
  border-color: var(--m32-border);
  box-shadow: inset 3px 0 0 var(--m32-accent), var(--m32-shadow-h);
  transform: translateY(-1px);
}
.link-header { padding: 16px 20px 4px 20px; }

a.link-title {
  color: var(--m32-title);
  font-size: 1.14rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .005em;
  transition: color .15s;
}
a.link-title:focus, a.link-title:hover { color: var(--m32-title-hover); }
a.link-title:active { color: var(--m32-title); }
a.link-title .mdi-note { color: var(--m32-muted); margin-right: 4px; }

a.link-url {
  margin-top: 4px;
  color: var(--m32-url);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .76rem;
  opacity: .8;
  transition: opacity .15s, color .15s;
}
a.link-url:focus, a.link-url:hover { color: var(--m32-url); opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

.private a.link-title { color: #f2a0a0; }
.private:before { border-right-color: #c0504d; }
.link-outer.private:hover { box-shadow: inset 3px 0 0 #c0504d, var(--m32-shadow-h); }

/* date en pastille */
.link-date { color: var(--m32-muted); font-size: .72rem; }
.link-date a, .link-date .link-archive { color: var(--m32-muted); transition: color .15s, background-color .15s; }
.link-date a.link-actual-date {
  display: inline-block;
  padding: 3px 11px;
  color: #b3b9f2;
  background: rgba(150, 160, 240, .10);
  border: 1px solid rgba(150, 160, 240, .28);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.link-date a.link-actual-date::before { content: "\25F7"; margin-right: 5px; opacity: .8; }
.link-date .link-archive:focus, .link-date .link-archive:hover,
.link-date a:focus, .link-date a:hover { color: var(--m32-text); }
.link-date a.link-actual-date:hover { color: #d4d8ff; background: rgba(150, 160, 240, .2); border-color: rgba(150, 160, 240, .5); }
.link-date .link-plugin a { color: #8fa5b8; }
.link-date .link-plugin a:hover { color: var(--m32-url); }

/* description : longueur de ligne limitee pour rester lisible en pleine largeur */
.link-description { padding: 6px 20px 8px 20px; font-size: .95rem; }
.link-description, .markdown { color: var(--m32-text-2); line-height: 1.6; }
.link-description > * { max-width: 120ch; }
.link-description a { color: var(--m32-accent-hover); }
.thumb img { border-radius: var(--m32-radius-s); box-shadow: 0 2px 8px rgba(0,0,0,.35); }

/* pied de carte : tags et actions */
.link-footer {
  padding: 10px 20px 14px 20px;
  margin-top: 6px;
  border-top: 1px solid var(--m32-border-soft);
}
.link-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.link-tag a {
  padding: 3px 11px;
  font-size: .74rem;
  color: var(--m32-text-2);
  background-color: var(--m32-surface-2);
  border: 1px solid var(--m32-border-soft);
  border-radius: 999px;
  transition: background-color .15s, color .15s, border-color .15s;
}
.link-tag a::before { content: "#"; color: var(--m32-accent); opacity: .75; margin-right: 1px; }
.link-tag a:focus, .link-tag a:hover { background-color: var(--m32-accent-soft); border-color: var(--m32-accent); color: var(--m32-text); }
.link-tag a:active { background-color: var(--m32-surface-3); }
.link-tag-filter { color: var(--m32-text); background-color: var(--m32-surface-2); border-color: var(--m32-border); }
.link-tag-filter:focus, .link-tag-filter:hover, .link-tag-filter:active { color: var(--m32-text); background-color: var(--m32-surface-3); }
.link-tag-filter .remove { background-color: var(--m32-surface-3); }

.link-actions { height: 30px; gap: 2px; }
.link-actions > * { width: 30px; height: 30px; margin-left: 2px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
/* icones d'action : une couleur par role, discretes au repos, vives au survol */
.link-actions a, .link-actions span { font-size: 17px; opacity: .78; transition: color .15s, background-color .15s, opacity .15s; }
.link-actions a:focus, .link-actions a:hover { opacity: 1; }
.link-actions a.qrcode                  { color: #8fb3d9; }
.link-actions a.qrcode:hover            { background-color: rgba(143,179,217,.16); }
.link-actions a[href*="/admin/shaare/"]:not(.button-delete):not([href*="/pin"]) { color: #7fc4f0; }
.link-actions a[href*="/admin/shaare/"]:not(.button-delete):not([href*="/pin"]):hover { background-color: rgba(127,196,240,.16); }
.link-actions a.button-delete           { color: #d98b8b; }
.link-actions a.button-delete:hover     { color: var(--m32-danger); background-color: rgba(229,115,115,.16); }
.link-actions a[href*="/pin"]           { color: #a99c86; }
.link-actions a[href*="/pin"]:hover     { color: var(--m32-pin); background-color: rgba(240,184,96,.16); }
.link-actions a.is-pinned, .link-actions span .mdi-pin { color: var(--m32-pin); opacity: 1; }
a.link-title .mdi-note { color: #c9a6f0; }

.tag { background-color: var(--m32-surface-2); color: var(--m32-text-2); }
.thumbnail-placeholder { background-color: var(--m32-surface-2); }
.links-list.is-selectable .link-overlay:hover { background-color: rgba(90,169,230,.12); }
.links-list.is-selectable .is-selected .link-overlay { background-color: rgba(229,115,115,.3); }

/* ===== listes (outils, config, plugins, tags) ===== */
.list-item-flex, .key-value-item { background: transparent; border-color: var(--m32-border-soft); }
.list-action .list-item, .list-side-right .list-item, .list-item-flex,
.list-action .list-item:last-child, .list-item-flex:last-child,
.list-side-right .list-item:last-child { border-color: var(--m32-border-soft); color: var(--m32-text); }
.list-action .list-item:focus, .list-action .list-item:hover,
.is-highlighted-hover:hover { background-color: var(--m32-surface-2); }
.list-action .list-item .list-item-label, .list-label,
.list-side-right .list-item-label, .list-sortable .list-item-label { color: var(--m32-text); }
.list-action .list-item .list-item-sublabel, .list-side-right .list-item-sublabel,
.list-sortable .list-item-sublabel, .list-sublabel, .list-action.list-big .list-item-sublabel { color: var(--m32-muted); }
.list-item-controls .list-item-control { color: var(--m32-muted); }
.list-item-controls .list-item-control:focus, .list-item-controls .list-item-control:hover { background-color: var(--m32-surface-3); color: var(--m32-text); }
ul.is-bordered li { background-color: var(--m32-surface-2); border-color: var(--m32-border-soft); }
ul.is-bordered li:last-child { border-bottom-color: var(--m32-border-soft); }
.round-image-container { background-color: var(--m32-surface-2); }
.sortable-chosen { background: var(--m32-surface-2); }
.sortable-ghost { background: var(--m32-accent-soft); }

/* ===== pagination, pied de page ===== */
.paging .paging-links, .paging .paging-links a { color: var(--m32-muted); }
.paging .paging-links a:focus, .paging .paging-links a:hover { background-color: var(--m32-surface-2); color: var(--m32-text); }
.paging .paging-links a:active { background-color: var(--m32-surface-3); }
/* pied de page toujours en bas : body en colonne, le footer prend la place restante au-dessus de lui */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > div:not(.notifications), body > form { width: 100%; flex-shrink: 0; }
body > #footer {
  margin-top: auto;
  margin-bottom: 0;
  padding: 18px 2vw;
  border-top: 1px solid var(--m32-border-soft);
  background: var(--m32-header);
  color: var(--m32-muted);
  font-size: .8rem;
  line-height: 1.7;
}
#footer { color: var(--m32-muted); }
#footer a { color: var(--m32-text-2); }
#footer a:hover { color: var(--m32-accent-hover); }
/* espace entre le contenu et le pied de page */
body > div:nth-last-of-type(2):not(.fullscreen):not(.overlay) { margin-bottom: 40px; }

/* ===== markdown ===== */
pre, .markdown pre {
  background: #1d2228; color: var(--m32-text);
  border: 1px solid var(--m32-border-soft); border-radius: var(--m32-radius-s);
}
code, .markdown code { background: #1d2228; color: #e8c07d; padding: 1px 5px; border-radius: 4px; }
pre code, .markdown pre code { background: transparent; padding: 0; color: inherit; }
.markdown blockquote { background-color: var(--m32-surface-2); border-left-color: var(--m32-accent); color: var(--m32-text-2); border-radius: 0 var(--m32-radius-s) var(--m32-radius-s) 0; }
.markdown table td, .markdown table th { border-color: var(--m32-border); }

/* ===== quotidien ===== */
.daily-header-subtitle { color: var(--m32-muted); }
.daily-card { border-radius: var(--m32-radius); overflow: hidden; box-shadow: var(--m32-shadow); }
.daily-item-header, .daily-item-footer { background-color: var(--m32-surface-2); color: var(--m32-text-2); border-top-color: var(--m32-border-soft); }
.daily-item-header:focus, .daily-item-header:hover { background-color: var(--m32-surface-3); color: var(--m32-text); }
.daily-item-body { background-color: var(--m32-surface); color: var(--m32-text-2); }
.daily-item-footer-subtitle { color: var(--m32-muted); }
.daily-item-footer-subtitle:hover { color: var(--m32-text); }

/* ===== mur d'images, fenetres, barre d'actions ===== */
.picwall-link { background-color: rgba(31, 36, 43, .8); }
.picwall-pictureframe { border-radius: var(--m32-radius-s); }
.modal { background: var(--m32-surface); color: var(--m32-text); border-radius: var(--m32-radius); box-shadow: var(--m32-shadow-l); }
.modal-body { color: var(--m32-text-2); }
.actionbar { background: var(--m32-surface-2); border-top: 1px solid var(--m32-border); }
.search-overlay-actions button { box-shadow: none; }

/* ===== largeur reglable (selecteur dans le pied de page, voir material32.js) ===== */
:root { --m32-page-width: 100%; }
.container { max-width: var(--m32-page-width); margin-left: auto; margin-right: auto; }
body > #footer.container { max-width: none; }
.m32-width { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; }
.m32-width label { margin: 0; color: var(--m32-muted); font-size: .78rem; }
.m32-width select { width: auto; padding: 4px 34px 4px 10px; font-size: .78rem; background-position: right 12px center; }