/* ═══════════════════════════════════════════════════════════
   Randozone — Annuaire de liens (liens/index-bs5.php)
   Migré de liens/index.php (BS3) vers Bootstrap 5.
   Composants adaptés aux tokens globaux de rz-bs5.css (--rz-*).
   Hero photo : voir hero-photo.css (réutilisé).
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens locaux (dérivés des tokens globaux) ──────────────────────────
   Déclarés sur :root pour rester disponibles dans la colonne principale ET
   dans le <aside> (le panneau sidebar n'est pas descendant de .li-main).
   La CSS n'est chargée que sur cette page : aucun conflit avec les --rz-*. */
:root {
  --li-line:        var(--rz-border);
  --li-surface:     var(--rz-surface);
  --li-surface-2:   var(--rz-page);
  --li-primary:     var(--rz-primary);
  --li-primary-bg:  var(--rz-primary-bg);
  --li-primary-line:var(--rz-primary-line);
  --li-gold:        var(--rz-amber);
  --li-gold-bg:     var(--rz-amber-bg);
  --li-gold-line:   color-mix(in oklch, var(--rz-amber) 28%, white);
}

.li-main {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* ── Pastille « eyebrow » de section ── */
.li-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .7rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--li-primary);
}
.li-eyebrow .rz-ico { width: 1rem; height: 1rem; }

/* ── Monogramme (pastille à initiales) ── */
.li-mono {
  flex-shrink: 0; border-radius: .7rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; letter-spacing: -.02em; line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

/* ── Host (nom de domaine) ── */
.li-host {
  font-size: .75rem; color: var(--rz-inksoft);
  display: inline-flex; align-items: center; gap: .3rem;
}
.li-host .rz-ico { width: .85rem; height: .85rem; }

/* ════════════════════════════════════════════════════════════
   Bandeau « Recommandés par Randozone »
   ════════════════════════════════════════════════════════════ */
.li-reco-band {
  background: var(--li-gold-bg);
  border: 1px solid var(--li-gold-line);
  border-radius: 1rem;
  padding: 1.5rem;
}
.li-reco-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--li-gold);
}
.li-reco-badge .rz-ico { width: 1rem; height: 1rem; }
.li-reco-sub { font-size: .875rem; color: var(--rz-inksoft); margin-top: .15rem; }

.li-reco-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem;
  margin-top: 1.25rem;
}
.li-reco-card {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem .9rem; text-decoration: none;
  background: var(--li-surface);
  border: 1px solid var(--li-gold-line);
  border-radius: .75rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.li-reco-card:hover {
  border-color: var(--li-gold);
  box-shadow: 0 6px 18px color-mix(in oklch, var(--rz-amber) 22%, transparent);
}
.li-reco-card .li-mono { width: 42px; height: 42px; font-size: 1.05rem; }
.li-reco-card .txt { min-width: 0; }
.li-reco-card .nm {
  display: block; font-size: .9375rem; font-weight: 700;
  color: var(--rz-ink); line-height: 1.25;
}
.li-reco-card:hover .nm { color: var(--li-primary); }

/* ════════════════════════════════════════════════════════════
   Section « À la une » — grille de cartes de liens
   ════════════════════════════════════════════════════════════ */
.li-sechead { margin-bottom: 1.25rem; }
.li-sechead h2 {
  font-size: 1.5rem; margin: .35rem 0 0;
  display: flex; align-items: center; gap: .5rem; color: var(--rz-ink);
}
.li-sechead h2 .rz-ico { width: 1.4rem; height: 1.4rem; color: var(--rz-amber); }
.li-sechead .sub { font-size: .875rem; color: var(--rz-inksoft); margin-top: .35rem; }

.li-link-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 560px) {
  .li-link-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

.li-link-card {
  position: relative;
  background: var(--li-surface);
  border: 1px solid var(--li-line);
  border-radius: .875rem;
  padding: 1.15rem 1.2rem;
  display: flex; flex-direction: column; gap: .7rem;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.li-link-card:hover {
  border-color: var(--li-primary-line);
  box-shadow: 0 10px 30px color-mix(in oklch, var(--rz-ink) 12%, transparent);
  transform: translateY(-2px);
}
.li-link-top { display: flex; gap: .85rem; align-items: flex-start; }
.li-link-card .li-mono { width: 50px; height: 50px; font-size: 1.25rem; }
.li-link-hd { min-width: 0; }
.li-link-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.25; margin: 0; }
.li-link-title a { text-decoration: none; color: var(--rz-ink); }
.li-link-card:hover .li-link-title a { color: var(--li-primary); }
.li-link-host { margin-top: .2rem; }

.li-cat-chip {
  display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start;
  font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--li-primary); background: var(--li-primary-bg);
  border-radius: 999px; padding: .28rem .65rem;
}
.li-cat-chip .rz-ico { width: .8rem; height: .8rem; }

.li-link-desc {
  font-size: .9rem; color: var(--rz-inksoft); line-height: 1.55; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Variante avec capture (bandeau image 432×288) ── */
.li-link-card.has-img { overflow: hidden; }
.li-card-shot {
  display: block;
  margin: -1.15rem -1.2rem .95rem;     /* débord jusqu'aux bords de la carte */
  aspect-ratio: 432 / 288;
  overflow: hidden; line-height: 0;
  background: var(--li-surface-2);
  border-bottom: 1px solid var(--li-line);
}
.li-card-shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.li-link-card.has-img:hover .li-card-shot img { transform: scale(1.05); }

.li-link-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--li-line);
}
.li-link-date {
  font-size: .75rem; color: var(--rz-inksoft);
  display: inline-flex; align-items: center; gap: .35rem;
}
.li-link-date .rz-ico { width: .85rem; height: .85rem; }
.li-visit {
  font-size: .8125rem; font-weight: 700; text-decoration: none; color: var(--li-primary);
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
}
.li-visit .rz-ico { width: 1rem; height: 1rem; }

/* Carte recommandée (mise en avant or) */
.li-link-card.is-reco {
  border-color: var(--li-gold-line);
  background: linear-gradient(180deg, var(--li-gold-bg), var(--li-surface) 55%);
}
.li-flag-reco {
  position: absolute; top: 1.1rem; right: 1.1rem;
  color: var(--li-gold);
}
.li-flag-reco .rz-ico { width: 1.1rem; height: 1.1rem; }

/* ════════════════════════════════════════════════════════════
   CTA inscription
   ════════════════════════════════════════════════════════════ */
.li-inscription {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  border: 1px dashed var(--li-primary-line);
  background: var(--li-primary-bg);
  border-radius: 1rem;
  padding: 1.5rem;
}
.li-inscription .ico { color: var(--li-primary); }
.li-inscription .ico .rz-ico { width: 2rem; height: 2rem; }
.li-inscription .hd { font-size: 1.05rem; font-weight: 700; color: var(--rz-ink); }
.li-inscription .ds { color: var(--rz-inksoft); font-size: .9rem; }

/* ════════════════════════════════════════════════════════════
   Sidebar — panneau « Rubriques »
   ════════════════════════════════════════════════════════════ */
.li-panel {
  background: var(--li-surface);
  border: 1px solid var(--li-line);
  border-radius: 1rem;
  padding: 1.4rem;
}
.li-panel-title {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rz-inksoft); font-weight: 800;
  display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
}
.li-panel-title .rz-ico { width: 1rem; height: 1rem; color: var(--li-primary); }
.li-rub-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.li-rub-list a {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  text-decoration: none; padding: .55rem .6rem; border-radius: .5rem;
  font-size: .9rem; font-weight: 600; color: var(--rz-ink);
  transition: background .12s ease, color .12s ease;
}
.li-rub-list a:hover { background: var(--li-surface-2); color: var(--li-primary); }
.li-rub-list a.active { color: var(--li-primary); background: var(--li-primary-bg); }
.li-rub-list a .rz-ico { width: .85rem; height: .85rem; color: var(--rz-inksoft); }
.li-rub-list a:hover .rz-ico,
.li-rub-list a.active .rz-ico { color: var(--li-primary); }

/* ════════════════════════════════════════════════════════════════════════
   PAGE CATÉGORIE (liste-bs5.php) — réutilise .li-link-card, .li-mono…
   ════════════════════════════════════════════════════════════════════════ */

/* ── En-tête de rubrique ── */
.li-cat-head { margin-bottom: 1.5rem; }
.li-cat-head .li-eyebrow { margin-bottom: .4rem; }
.li-cat-head h1 {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.1;
  font-weight: 700; color: var(--rz-ink); margin: 0;
}
.li-cat-head .intro {
  margin: .6rem 0 0; color: var(--rz-inksoft);
  font-size: 1.0625rem; line-height: 1.6; max-width: 62ch;
}

/* ── Onglets rubriques (filtres pleine largeur) ── */
.li-rubriques { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.li-rubrique {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .95rem; border-radius: 999px;
  font-size: .8125rem; font-weight: 600; text-decoration: none;
  color: var(--rz-inksoft); background: var(--li-surface);
  border: 1px solid var(--li-line); white-space: nowrap;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.li-rubrique:hover { color: var(--li-primary); border-color: var(--li-primary-line); }
.li-rubrique.active { background: var(--li-primary); border-color: var(--li-primary); color: #fff; }
.li-rubrique .rz-ico { width: .85rem; height: .85rem; }
.li-rubrique .count { font-size: .6875rem; opacity: .75; font-variant-numeric: tabular-nums; }

/* ── Barre d'outils : filtre + compteur ── */
.li-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.li-filter {
  flex: 1 1 240px; display: flex; align-items: center; gap: .6rem;
  background: var(--li-surface); border: 1px solid var(--li-line);
  border-radius: .625rem; padding: .6rem .9rem;
}
.li-filter .rz-ico { width: 1rem; height: 1rem; color: var(--rz-inksoft); flex-shrink: 0; }
.li-filter input {
  border: 0; outline: 0; background: transparent; width: 100%;
  font-size: .9375rem; color: var(--rz-ink); font-family: inherit;
}
.li-filter input::placeholder { color: var(--rz-inksoft); }
.li-count-pill { font-size: .8125rem; font-weight: 600; color: var(--rz-inksoft); white-space: nowrap; }
.li-count-pill b { color: var(--rz-ink); font-variant-numeric: tabular-nums; }

/* ── Barre A-Z ── */
.li-az { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1.5rem; }
.li-az a {
  width: 30px; height: 30px; border-radius: .45rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8125rem; font-weight: 700; text-decoration: none;
  color: var(--rz-inksoft); background: var(--li-surface); border: 1px solid var(--li-line);
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.li-az a:hover { color: #fff; background: var(--li-primary); border-color: var(--li-primary); }
.li-az a.active { color: #fff; background: var(--li-primary); border-color: var(--li-primary); }
.li-az a.disabled { opacity: .35; pointer-events: none; }
.li-az a.all { width: auto; padding: 0 .7rem; }

/* ── Badge de langue (pied de carte) ── */
.li-lang-badge {
  font-size: .75rem; color: var(--rz-inksoft); font-weight: 600;
  display: inline-flex; align-items: center; gap: .4rem;
}
.li-lang-badge .fi { font-size: .95rem; line-height: 1; }

/* ── Ligne admin compacte ── */
.li-admin-line {
  font-size: .72rem; color: var(--rz-inksoft);
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: -.2rem;
}
.li-admin-line a { color: var(--li-primary); text-decoration: none; }
.li-admin-line .nohttps { color: var(--rz-hard); font-weight: 600; }

/* ── Aucun résultat ── */
.li-no-results {
  display: none; text-align: center; padding: 3rem 1rem; color: var(--rz-inksoft);
}
.li-no-results.show { display: block; }
.li-no-results .rz-ico { width: 2rem; height: 2rem; }

/* ════════════════════════════════════════════════════════════════════════
   FORMULAIRE (add-link.php)
   ════════════════════════════════════════════════════════════════════════ */
.li-form { max-width: 760px; margin-inline: auto; }

/* En-tête */
.li-form-head { margin-bottom: 1.5rem; }
.li-form-head .li-eyebrow { margin-bottom: .5rem; }
.li-form-head h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; color: var(--rz-ink); margin: 0; }
.li-form-head .sub { color: var(--rz-inksoft); font-size: 1.0625rem; line-height: 1.55; margin: .55rem 0 0; }

/* Alertes (réutilise .alert BS5) */
.li-form .alert { border-radius: .8rem; font-size: .9rem; }

/* Carte formulaire */
.li-form-card {
  background: var(--li-surface);
  border: 1px solid var(--li-line);
  border-radius: 1.1rem;
  padding: 1.5rem;
  box-shadow: 0 16px 40px -28px color-mix(in oklch, var(--rz-ink) 70%, transparent);
}
@media (min-width: 768px) { .li-form-card { padding: 2rem 2.1rem; } }

/* Sections */
.li-form-sec + .li-form-sec { margin-top: 1.9rem; padding-top: 1.7rem; border-top: 1px solid var(--li-line); }
.li-form-sec-head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.15rem; }
.li-form-sec-head .ic {
  width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--li-primary-bg); color: var(--li-primary); border: 1px solid var(--li-primary-line);
}
.li-form-sec-head .ic .rz-ico { width: 1.1rem; height: 1.1rem; }
.li-form-sec-head h2 { font-size: 1.05rem; font-weight: 700; color: var(--rz-ink); margin: 0; line-height: 1.2; }
.li-form-sec-head small { display: block; color: var(--rz-inksoft); font-size: .8rem; font-weight: 500; margin-top: .1rem; }

/* Lignes / grille */
.li-form-row { margin-bottom: 1.1rem; }
.li-form-row:last-child { margin-bottom: 0; }
.li-form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 560px) { .li-form-grid { grid-template-columns: 1fr 1fr; } }

/* Champs */
.li-form .form-label { font-weight: 600; color: var(--rz-ink); margin-bottom: .35rem; font-size: .9rem; }
.li-form .form-label .req { color: var(--rz-hard); }
.li-form .form-label .opt { color: var(--rz-inksoft); font-weight: 500; }
.li-form .form-control,
.li-form .form-select {
  border-radius: .65rem; border-color: var(--li-line); padding: .6rem .85rem; font-size: .95rem;
}
.li-form .form-control:focus,
.li-form .form-select:focus {
  border-color: var(--li-primary-line);
  box-shadow: 0 0 0 .2rem color-mix(in oklch, var(--rz-primary) 16%, transparent);
}
.li-form .form-text { color: var(--rz-inksoft); }

/* Champ avec icône en tête */
.li-field { position: relative; }
.li-field > .rz-ico {
  position: absolute; left: .85rem; top: .72rem; width: 1.05rem; height: 1.05rem;
  color: var(--rz-inksoft); pointer-events: none;
}
.li-field .form-control { padding-left: 2.5rem; }

/* Dropzone upload */
.li-dropzone {
  position: relative; display: flex; align-items: center; gap: 1rem;
  border: 2px dashed var(--li-primary-line); border-radius: .9rem;
  background: var(--li-primary-bg); padding: 1.1rem 1.2rem; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.li-dropzone:hover { border-color: var(--li-primary); }
.li-dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.li-dropzone .dz-ic {
  width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--li-surface); color: var(--li-primary); border: 1px solid var(--li-primary-line);
}
.li-dropzone .dz-ic .rz-ico { width: 1.45rem; height: 1.45rem; }
.li-dropzone .dz-txt b { display: block; color: var(--rz-ink); font-weight: 700; font-size: .95rem; }
.li-dropzone .dz-txt span { color: var(--rz-inksoft); font-size: .82rem; }

/* Aperçu capture (existante ou nouvelle sélection) */
.li-form-shot { margin: .9rem 0 1.25rem; display: flex; align-items: center; gap: .85rem; }
.li-form-shot img { display: block; width: 150px; height: auto; border: 1px solid var(--li-line); border-radius: .55rem; }
.li-form-shot .cap { font-size: .82rem; color: var(--rz-inksoft); }

/* Pied de formulaire */
.li-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.9rem; }
.li-form-foot .btn { padding: .72rem 1.6rem; font-weight: 700; }
.li-form-foot .btn .rz-ico { width: 1.05rem; height: 1.05rem; vertical-align: -3px; margin-left: .45rem; }
.li-form-foot .note { font-size: .82rem; color: var(--rz-inksoft); max-width: 32ch; }

/* ════════════════════════════════════════════════════════════════════════
   FICHE D'UN LIEN (lien-bs5.php)
   ════════════════════════════════════════════════════════════════════════ */
.li-detail { display: flex; flex-direction: column; gap: 1.25rem; }

/* Capture (cliquable → site) */
.li-shot {
  display: block; line-height: 0; overflow: hidden;
  background: var(--li-surface); border: 1px solid var(--li-line); border-radius: .875rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.li-shot:hover {
  border-color: var(--li-primary-line);
  box-shadow: 0 10px 30px color-mix(in oklch, var(--rz-ink) 12%, transparent);
}
.li-shot img { width: 100%; height: auto; display: block; }

/* Ligne méta (domaine + langue) */
.li-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; }
.li-detail-meta .li-host .rz-ico { width: .9rem; height: .9rem; }

/* Texte éditorial (description / info) */
.li-prose { color: var(--rz-ink); line-height: 1.65; font-size: 1rem; }
.li-prose > :last-child { margin-bottom: 0; }

/* Bouton principal « Ouvrir le site » */
.li-open-btn { align-self: flex-start; }
.li-open-btn .rz-ico { width: 1rem; height: 1rem; vertical-align: -2px; margin-left: .35rem; }

/* Carte CTA sidebar « Proposer un site » */
.li-cta {
  background: var(--li-primary-bg); border: 1px solid var(--li-primary-line);
  border-radius: 1rem; padding: 1.25rem;
}
.li-cta h3 { font-size: 1rem; font-weight: 700; color: var(--rz-ink); margin: 0 0 .35rem; }
.li-cta p  { font-size: .875rem; color: var(--rz-inksoft); margin: 0 0 .9rem; }

/* Outils admin sidebar */
.li-admin-tools {
  font-size: .8rem; color: var(--rz-inksoft);
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem;
}
.li-admin-tools a { color: var(--li-primary); text-decoration: none; }
.li-admin-tools a:hover { text-decoration: underline; }