/* ============================================================
   Randonnée.net — main.css
   Palette : bleu #2E7BB5, or #F0A500
   ============================================================ */

:root {
    --bleu:        #2E7BB5;
    --bleu-fonce:  #1f5a8a;
    --bleu-clair:  #e8f2fb;
    --or:          #F0A500;
    --or-clair:    #fef5e0;
    --texte:       #2C3E50;
    --texte-doux:  #6c7a89;
    --bg:          #F5F7FA;
    --surface:     #ffffff;
    --bordure:     #dde4ee;
    --radius:      8px;
    --radius-lg:   14px;
    --ombre:       0 2px 12px rgba(46,123,181,.08);
    --ombre-md:    0 4px 24px rgba(46,123,181,.13);
}

/* -- Reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 15px; line-height: 1.6;
    color: var(--texte); background: var(--bg);
}
img { max-width: 100%; display: block; }
a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* -- Header ------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 1000;
    background: var(--surface);
    border-bottom: 2px solid var(--bleu);
    box-shadow: var(--ombre);
}
.header-inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; gap: 24px;
    padding: 0 20px; height: 80px;
}

/* Logo */
.logo {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none; flex-shrink: 0;
}
.logo-icon {
    width: 44px; height: 47px; flex-shrink: 0;
    object-fit: contain;
}
.logo-wordmark {
    display: flex; flex-direction: column; line-height: 1.1;
}
.logo-nom {
    font-size: 22px; font-weight: 300; color: var(--bleu); letter-spacing: -.01em;
}
.logo-nom strong { font-weight: 700; }
.logo-tag {
    font-size: 11px; color: var(--or); font-style: italic; letter-spacing: .02em;
}

/* Nav */
.header-nav { display: flex; gap: 4px; flex: 1; }
.nav-lien {
    padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 500;
    color: var(--texte-doux); transition: all .15s;
}
.nav-lien:hover { background: var(--bleu-clair); color: var(--bleu); text-decoration: none; }
.nav-admin { color: var(--or); }

/* Actions */
.header-actions { display: flex; gap: 8px; margin-left: auto; align-items: center; }

/* -- Boutons ------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 20px; border-radius: 24px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: all .15s; border: 2px solid transparent;
    text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary   { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.btn-primary:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); }
.btn-secondary { background: var(--surface); color: var(--texte); border-color: var(--bordure); }
.btn-secondary:hover { border-color: var(--bleu); color: var(--bleu); }
.btn-ghost  { background: transparent; color: var(--texte-doux); border-color: transparent; }
.btn-ghost:hover { background: var(--bg); color: var(--bleu); }
.btn-or     { background: var(--or); color: #fff; border-color: var(--or); }
.btn-or:hover { background: #d4920a; }
.btn-lg  { padding: 12px 28px; font-size: 15px; }
.btn-sm  { padding: 6px 14px; font-size: 13px; }
.btn-xs  { padding: 3px 10px; font-size: 12px; border-radius: 12px; }
.btn-block { width: 100%; justify-content: center; }

/* -- Main --------------------------------------------------- */
.site-main { min-height: calc(100vh - 64px - 160px); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* -- Hero --------------------------------------------------- */
.hero {
    background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu-fonce) 100%);
    color: #fff; padding: 24px 20px;
    position: relative; overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute; top: -60px; right: -60px;
    width: 280px; height: 280px; border-radius: 50%;
    background: rgba(240,165,0,.10);
}
.hero::after {
    content: '';
    position: absolute; bottom: -40px; left: -40px;
    width: 160px; height: 160px; border-radius: 50%;
    background: rgba(255,255,255,.05);
}
.hero-inner {
    max-width: 900px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 32px; position: relative; z-index: 1;
}
.hero-texte { flex: 1; }
.hero h1 {
    font-size: clamp(18px, 2.5vw, 26px); font-weight: 300;
    line-height: 1.3; margin-bottom: 4px; letter-spacing: -.02em;
}
.hero h1 strong { font-weight: 700; color: var(--or); }
.hero p { font-size: 13px; opacity: .8; margin: 0; }
.hero-stats {
    display: flex; gap: 24px; flex-shrink: 0;
}
.hero-stats .stat { text-align: center; }
.hero-stats .stat strong { display: block; font-size: 20px; font-weight: 700; color: var(--or); }
.hero-stats .stat span { font-size: 11px; opacity: .75; }

/* -- Section annuaire (index) ------------------------------- */
.section-annuaire { padding: 48px 0; }
.annuaire-top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px;
}
.annuaire-top .section-titre { margin-bottom: 0; }
.section-categories { padding: 60px 0; }
.section-titre {
    font-size: 22px; font-weight: 300; color: var(--texte);
    margin-bottom: 28px; letter-spacing: -.01em;
}
.section-titre strong { font-weight: 700; color: var(--bleu); }
.categories-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.cat-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 24px 16px; background: var(--surface);
    border: 2px solid var(--bordure); border-radius: var(--radius-lg);
    text-align: center; text-decoration: none; color: var(--texte);
    transition: all .2s;
}
.cat-card:hover {
    border-color: var(--bleu); background: var(--bleu-clair);
    transform: translateY(-2px); box-shadow: var(--ombre-md);
    text-decoration: none; color: var(--bleu);
}
.cat-icone { font-size: 28px; line-height: 1; }
.cat-nom   { font-size: 13px; font-weight: 600; }
.cat-nb    { font-size: 11px; color: var(--texte-doux); }
.cat-card:hover .cat-nb { color: var(--bleu); opacity: .7; }

/* -- Section ressources ------------------------------------- */
.section-dernieres { padding: 60px 0; background: var(--surface); }
.ressources-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px; margin-bottom: 32px;
}
.ressource-card {
    background: var(--bg); border: 1px solid var(--bordure);
    border-radius: var(--radius-lg); padding: 20px;
    display: flex; flex-direction: column; gap: 10px;
    transition: all .2s;
}
.ressource-card:hover { border-color: var(--bleu); box-shadow: var(--ombre-md); }
.ressource-cat { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texte-doux); }
.ressource-nom a { font-size: 16px; font-weight: 600; color: var(--texte); }
.ressource-nom a:hover { color: var(--bleu); text-decoration: none; }
.ressource-desc { font-size: 13px; color: var(--texte-doux); line-height: 1.5; flex: 1; }
.ressource-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.ressource-footer {
    display: flex; align-items: center; gap: 10px;
    padding-top: 10px; border-top: 1px solid var(--bordure);
    font-size: 12px; color: var(--texte-doux);
}
.section-voir-plus { text-align: center; }

/* -- Badges ------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600;
}
.badge-fr      { background: #e8f2fb; color: var(--bleu); }
.badge-partial { background: #fff8e6; color: #b07800; }
.badge-other   { background: #f0f0f0; color: #666; }
.badge-perimetre { background: var(--bg); color: var(--texte-doux); border: 1px solid var(--bordure); }
.badge-tag { background: var(--bg); color: var(--texte-doux); border: 1px solid var(--bordure); padding: 2px 7px; border-radius: 10px; font-size: 11px; }
.badge-mort { background: #fdf0cd; color: #b07800; border: 1px solid #f0a500; padding: 3px 8px; border-radius: 12px; font-size:11px; font-weight:600; }
.badge-verifie { font-size: 11px; color: #2d6a4f; }

/* -- CTA ---------------------------------------------------- */
.section-cta { padding: 60px 0; }
.cta-box {
    background: linear-gradient(135deg, var(--or-clair), #fffbf0);
    border: 2px solid var(--or); border-radius: var(--radius-lg);
    padding: 48px; text-align: center;
}
.cta-box h2 { font-size: 24px; font-weight: 300; margin-bottom: 12px; }
.cta-box h2 strong { font-weight: 700; color: var(--or); }
.cta-box p { color: var(--texte-doux); margin-bottom: 24px; }

/* -- Page ressources ---------------------------------------- */
.page-ressources { padding: 32px 0; }
.page-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-header h1 { font-size: 24px; font-weight: 300; }
.page-header h1 .count { font-size: 16px; color: var(--texte-doux); font-weight: 400; }
.barre-recherche { display: flex; gap: 8px; flex: 1; max-width: 400px; }
.barre-recherche input {
    flex: 1; padding: 9px 16px; border: 2px solid var(--bordure);
    border-radius: 24px; font-size: 14px; outline: none; transition: border-color .15s;
}
.barre-recherche input:focus { border-color: var(--bleu); }

.layout-filtre-liste { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }

/* Sidebar filtres */
.sidebar-filtres {
    position: sticky; top: 80px;
    background: var(--surface); border: 1px solid var(--bordure);
    border-radius: var(--radius-lg); padding: 20px;
}
.filtre-bloc { margin-bottom: 20px; }
.filtre-bloc:last-child { margin-bottom: 0; }
.filtre-bloc h3 {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--texte-doux); margin-bottom: 10px;
}
.radio-lbl {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; cursor: pointer; padding: 5px 8px;
    border-radius: 6px; transition: background .12s; color: var(--texte-doux);
}
.radio-lbl:hover { background: var(--bg); }
.radio-lbl.actif { background: var(--bleu-clair); color: var(--bleu); font-weight: 600; }
.radio-lbl input { accent-color: var(--bleu); }
.checkbox-lbl {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; cursor: pointer; padding: 5px 8px;
    border-radius: 6px; color: var(--texte-doux);
}
.checkbox-lbl input { accent-color: var(--bleu); }

/* Liste ressources */
.barre-tri {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 16px; flex-wrap: wrap;
}
.tri-label { font-size: 12px; color: var(--texte-doux); }
.tri-lien {
    font-size: 13px; padding: 4px 12px; border-radius: 14px;
    color: var(--texte-doux); border: 1px solid transparent;
    transition: all .12s;
}
.tri-lien:hover { background: var(--bg); text-decoration: none; }
.tri-lien.actif { background: var(--bleu); color: #fff; text-decoration: none; }

.ressource-ligne {
    background: var(--surface); border: 1px solid var(--bordure);
    border-radius: var(--radius); padding: 16px 20px;
    margin-bottom: 12px; transition: all .15s;
    border-left: 3px solid transparent;
}
.ressource-ligne:hover { border-left-color: var(--bleu); box-shadow: var(--ombre); }
.ressource-ligne-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.ressource-ligne-nom { font-size: 16px; font-weight: 600; color: var(--texte); }
.ressource-ligne-nom:hover { color: var(--bleu); text-decoration: none; }
.ressource-cat-badge { font-size: 11px; color: var(--texte-doux); margin-left: auto; }
.ressource-ligne-desc { font-size: 13px; color: var(--texte-doux); margin-bottom: 10px; line-height: 1.5; }
.ressource-ligne-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ressource-ligne-footer {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding-top: 10px; border-top: 1px solid var(--bordure); font-size: 12px;
}
.vote-barre { display: flex; align-items: center; gap: 6px; }
.vote-pct { font-weight: 600; }
.vote-pct.bon { color: #2d6a4f; }
.vote-pct.moyen { color: var(--or); }
.vote-pct.bas { color: #e74c3c; }
.vote-nb { color: var(--texte-doux); }
.ressource-commentaires { color: var(--texte-doux); }

/* -- Fiche ressource ---------------------------------------- */
.page-fiche { padding: 24px 0 48px; }
.fil-ariane { font-size: 13px; color: var(--texte-doux); margin-bottom: 20px; }
.fil-ariane a { color: var(--texte-doux); }
.fil-ariane a:hover { color: var(--bleu); }
.fiche-layout { display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: start; }
.fiche-header { margin-bottom: 20px; }
.fiche-cat { font-size: 12px; color: var(--texte-doux); margin-bottom: 8px; }
.fiche-titre { font-size: 28px; font-weight: 300; margin-bottom: 16px; letter-spacing: -.02em; }
.fiche-titre strong { font-weight: 700; }
.fiche-url { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.url-texte { font-size: 13px; color: var(--texte-doux); }
.fiche-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.fiche-description { font-size: 15px; line-height: 1.7; color: var(--texte); margin-bottom: 32px; }

/* Votes */
.fiche-votes { background: var(--bg); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 32px; }
.fiche-votes h2 { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.vote-barre-large {
    height: 8px; background: var(--bordure); border-radius: 4px;
    overflow: hidden; margin-bottom: 8px;
}
.vote-progress { height: 100%; background: var(--bleu); border-radius: 4px; transition: width .5s ease; }
.vote-chiffres { display: flex; justify-content: space-between; font-size: 13px; color: var(--texte-doux); margin-bottom: 16px; }
.vote-pct-label { font-weight: 700; color: var(--bleu); }
.vote-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn-vote {
    padding: 8px 20px; border-radius: 24px; border: 2px solid var(--bordure);
    font-size: 14px; font-weight: 600; cursor: pointer;
    background: var(--surface); color: var(--texte); transition: all .15s;
}
.btn-vote:hover { border-color: var(--bleu); color: var(--bleu); }
.btn-vote.actif { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.vote-deja { font-size: 12px; color: var(--texte-doux); }

/* Commentaires */
.fiche-commentaires { margin-bottom: 32px; }
.fiche-commentaires h2 { font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.commentaire {
    background: var(--bg); border-radius: var(--radius);
    padding: 16px; margin-bottom: 12px; border-left: 3px solid var(--bleu-clair);
}
.commentaire-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.commentaire-date { color: var(--texte-doux); margin-left: auto; }
.commentaire-contenu { font-size: 14px; line-height: 1.6; }
.visite-verif {
    background: var(--or-clair); border: 1px solid var(--or);
    border-radius: var(--radius); padding: 14px; margin-bottom: 16px; font-size: 13px;
}
.commentaire-form { background: var(--bg); border-radius: var(--radius-lg); padding: 24px; }
.commentaire-form h3 { font-size: 16px; font-weight: 600; margin-bottom: 16px; }

/* Sidebar fiche */
.fiche-sidebar { position: sticky; top: 80px; }
.sidebar-bloc {
    background: var(--surface); border: 1px solid var(--bordure);
    border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px;
}
.sidebar-bloc h3 { font-size: 13px; font-weight: 700; color: var(--texte-doux); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.info-liste { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; }
.info-liste dt { color: var(--texte-doux); font-weight: 600; }
.info-liste dd { color: var(--texte); }
.form-select {
    width: 100%; padding: 7px 10px; border: 1px solid var(--bordure);
    border-radius: var(--radius); font-size: 13px; background: var(--bg);
    margin-bottom: 6px;
}

/* -- Formulaires -------------------------------------------- */
.form-groupe { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.form-groupe label { font-size: 13px; font-weight: 600; color: var(--texte-doux); }
.form-groupe small { font-size: 11px; color: var(--texte-doux); }
.form-groupe input,
.form-groupe select,
.form-groupe textarea {
    padding: 10px 14px; border: 2px solid var(--bordure);
    border-radius: var(--radius); font-size: 14px;
    color: var(--texte); background: var(--surface); transition: border-color .15s;
}
.form-groupe input:focus,
.form-groupe select:focus,
.form-groupe textarea:focus { outline: none; border-color: var(--bleu); }
.form-groupe textarea { resize: vertical; }
.form-grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-inline { flex-direction: row; align-items: center; justify-content: space-between; }
.lien-doux { font-size: 13px; color: var(--texte-doux); }
.checkbox-grille { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.checkbox-lbl-form {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border: 2px solid var(--bordure);
    border-radius: var(--radius); cursor: pointer; font-size: 14px; transition: border-color .15s;
}
.checkbox-lbl-form:hover { border-color: var(--bleu); }
.checkbox-lbl-form input { accent-color: var(--bleu); width: 16px; height: 16px; }
.form-actions { display: flex; gap: 10px; }

/* -- Auth --------------------------------------------------- */
.page-etroite { max-width: 480px; margin: 48px auto; padding: 0 20px; }
.page-etroite-large { max-width: 680px; margin: 32px auto; padding: 0 20px; }
.auth-box {
    background: var(--surface); border: 1px solid var(--bordure);
    border-radius: var(--radius-lg); padding: 40px;
    box-shadow: var(--ombre-md);
}
.auth-logo { font-size: 40px; text-align: center; margin-bottom: 12px; }
.auth-box h1 { font-size: 22px; font-weight: 300; text-align: center; margin-bottom: 6px; }
.auth-sub { text-align: center; color: var(--texte-doux); font-size: 14px; margin-bottom: 24px; }
.auth-lien { text-align: center; font-size: 13px; color: var(--texte-doux); margin-top: 20px; }
.auth-form { display: flex; flex-direction: column; }

/* -- Alertes ------------------------------------------------ */
.alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 20px; font-size: 14px; }
.alert-ok     { background: #d4f5e2; color: #1a7a44; border: 1px solid #a8e6c1; }
.alert-erreur { background: #fadbd8; color: #78281f; border: 1px solid #f1948a; }

/* -- Vide --------------------------------------------------- */
.vide-bloc {
    background: var(--surface); border: 2px dashed var(--bordure);
    border-radius: var(--radius-lg); padding: 48px; text-align: center;
}
.vide-bloc p { color: var(--texte-doux); margin-bottom: 20px; font-size: 15px; }

/* -- Pagination --------------------------------------------- */
.pagination { display: flex; gap: 6px; margin-top: 24px; }
.page-lien {
    padding: 7px 14px; border: 2px solid var(--bordure);
    border-radius: 20px; font-size: 14px; color: var(--texte);
    transition: all .12s;
}
.page-lien.actif { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.page-lien:hover { border-color: var(--bleu); text-decoration: none; }

/* -- Footer ------------------------------------------------- */
.site-footer {
    background: var(--texte); color: rgba(255,255,255,.7);
    padding: 40px 20px; margin-top: 60px;
}
.footer-inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.footer-logo { font-size: 20px; font-weight: 300; color: #fff; margin-bottom: 8px; }
.footer-logo strong { font-weight: 700; color: var(--or); }
.footer-desc { font-size: 13px; margin-bottom: 16px; }
.footer-nav { display: flex; justify-content: center; gap: 20px; margin-bottom: 16px; }
.footer-nav a { font-size: 13px; color: rgba(255,255,255,.6); }
.footer-nav a:hover { color: #fff; }
.footer-copy { font-size: 12px; opacity: .5; }

/* -- Page soumettre ----------------------------------------- */
.page-etroite-large h1 { font-size: 26px; font-weight: 300; margin-bottom: 8px; }
.page-etroite-large > p { color: var(--texte-doux); margin-bottom: 28px; }
.form-soumettre { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--radius-lg); padding: 32px; }

/* -- Responsive --------------------------------------------- */
@media (max-width: 900px) {
    .layout-filtre-liste { grid-template-columns: 1fr; }
    .sidebar-filtres { position: static; }
    .fiche-layout { grid-template-columns: 1fr; }
    .fiche-sidebar { position: static; }
    .form-grille-2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .header-inner { padding: 0 12px; gap: 12px; }
    .logo-tag { display: none; }
    .header-nav { display: none; }
    .hero { padding: 48px 16px; }
    .hero-stats { gap: 20px; }
    .categories-grille { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .ressources-grille { grid-template-columns: 1fr; }
    .page-header { flex-direction: column; align-items: flex-start; }
    .barre-recherche { max-width: 100%; width: 100%; }
    .cta-box { padding: 28px 20px; }
}

/* -- Burger mobile (placeholder) ---------------------------- */
.burger { display: none; flex-direction: column; gap: 5px; padding: 4px; }
.burger span { display: block; width: 22px; height: 2px; background: var(--texte); border-radius: 2px; }
@media (max-width: 600px) { .burger { display: flex; } }

/* -- Badges accès ------------------------------------------- */
.badge-gratuit  { background: #d4f5e2; color: #1a7a44; }
.badge-libre    { background: #dbeafe; color: #1e40af; }
.badge-freemium { background: #fef3c7; color: #92400e; }
.badge-payant   { background: #fee2e2; color: #991b1b; }

/* -- Page annuaire racine — style DMOZ ---------------------- */
.page-annuaire { padding: 32px 0 60px; }

.annuaire-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; margin-bottom: 32px; flex-wrap: wrap;
    padding-bottom: 20px; border-bottom: 2px solid var(--bordure);
}
.annuaire-header-texte h1 { font-size: 24px; font-weight: 300; margin-bottom: 4px; }
.annuaire-header-texte p  { font-size: 14px; }

/* Grille DMOZ : 3 colonnes */
.annuaire-dmoz {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.dmoz-bloc {
    padding: 20px 24px 24px;
    border-right: 1px solid var(--bordure);
    border-bottom: 1px solid var(--bordure);
}
/* Pas de bordure droite sur la 3ème colonne */
.dmoz-bloc:nth-child(3n) { border-right: none; }
/* Pas de bordure basse sur la dernière ligne */
.dmoz-bloc:nth-last-child(-n+3) { border-bottom: none; }

.dmoz-racine {
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 10px;
}
.dmoz-racine-lien {
    display: flex; align-items: center; gap: 8px;
    text-decoration: none; font-size: 15px; font-weight: 700;
    color: var(--bleu); transition: color .12s;
}
.dmoz-racine-lien:hover { color: var(--bleu-fonce); text-decoration: underline; }
.dmoz-icone { font-size: 18px; flex-shrink: 0; }
.dmoz-total {
    font-size: 12px; color: var(--texte-doux);
    font-weight: 400; margin-left: 2px;
}

.dmoz-sous-cats {
    list-style: none;
    display: flex; flex-wrap: wrap;
    gap: 2px 0;
    margin: 0; padding: 0;
}
.dmoz-sous-cats li {
    width: 100%;
}
.dmoz-sous-cats li a {
    font-size: 13px; color: var(--texte);
    text-decoration: none; display: flex;
    align-items: baseline; gap: 5px;
    padding: 2px 0;
    border-bottom: 1px solid transparent;
    transition: color .1s;
}
.dmoz-sous-cats li a:hover { color: var(--bleu); text-decoration: none; }
.dmoz-nb {
    font-size: 11px; color: var(--texte-doux);
    font-weight: 400;
}
.dmoz-voir-plus a {
    color: var(--or) !important; font-style: italic; font-size: 12px !important;
}

@media (max-width: 900px) {
    .annuaire-dmoz { grid-template-columns: repeat(2, 1fr); }
    .dmoz-bloc:nth-child(3n)  { border-right: 1px solid var(--bordure); }
    .dmoz-bloc:nth-child(2n)  { border-right: none; }
    .dmoz-bloc:nth-last-child(-n+3) { border-bottom: 1px solid var(--bordure); }
    .dmoz-bloc:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 600px) {
    .annuaire-dmoz { grid-template-columns: 1fr; }
    .dmoz-bloc { border-right: none !important; }
    .dmoz-bloc:last-child { border-bottom: none; }
}

/* -- Page catégorie ----------------------------------------- */
.page-categorie { padding: 24px 0 48px; max-width: 900px; margin: 0 auto; }

.cat-header {
    display: flex; align-items: flex-start; gap: 14px;
    margin-bottom: 24px; padding-bottom: 20px;
    border-bottom: 2px solid var(--bordure);
}
.cat-icone-lg { font-size: 36px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.cat-header-info { flex: 1; }
.cat-header h1 { font-size: 24px; font-weight: 300; margin-bottom: 4px; }
.cat-description { color: var(--texte-doux); font-size: 14px; margin-bottom: 6px; }
.cat-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; }
.cat-editeur { color: var(--bleu); }

/* Demande éditeur inline */
.demande-editeur-inline summary {
    font-size: 12px; color: var(--or); cursor: pointer;
    list-style: none; font-weight: 600;
}
.demande-editeur-inline summary::-webkit-details-marker { display: none; }
.demande-editeur-form {
    display: flex; gap: 8px; align-items: flex-start; margin-top: 8px;
}
.demande-editeur-form textarea {
    flex: 1; padding: 6px 10px; border: 1px solid var(--bordure);
    border-radius: var(--radius); font: inherit; font-size: 12px;
    resize: none; min-height: 52px;
}

/* Sous-catégories DMOZ compact */
.sous-categories-dmoz {
    background: var(--surface); border: 1px solid var(--bordure);
    border-radius: var(--radius-lg); padding: 16px 20px;
    margin-bottom: 20px;
}
.sous-cat-dmoz-grille {
    display: flex; flex-wrap: wrap; gap: 4px 0;
    column-count: 3; column-gap: 0;
}
.sous-cat-dmoz {
    display: flex; align-items: baseline; gap: 6px;
    padding: 4px 16px 4px 0; text-decoration: none;
    color: var(--texte); break-inside: avoid;
    width: 33.33%;
}
.sous-cat-dmoz:hover { color: var(--bleu); text-decoration: none; }
.sous-cat-dmoz-icone { font-size: 13px; flex-shrink: 0; }
.sous-cat-dmoz-nom { font-size: 13px; font-weight: 600; color: var(--bleu); }
.sous-cat-dmoz:hover .sous-cat-dmoz-nom { text-decoration: underline; }
.sous-cat-dmoz-nb { font-size: 11px; color: var(--texte-doux); }

/* Barre de filtres horizontale */
.filtres-barre {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: wrap;
    padding: 10px 14px; background: var(--surface);
    border: 1px solid var(--bordure); border-radius: var(--radius);
    margin-bottom: 12px;
}
.filtres-barre-gauche { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filtres-label { font-size: 12px; color: var(--texte-doux); font-weight: 600; }
.filtre-pill {
    padding: 4px 12px; border-radius: 14px; font-size: 12px;
    color: var(--texte-doux); border: 1px solid transparent;
    text-decoration: none; transition: all .12s;
}
.filtre-pill:hover { background: var(--bg); text-decoration: none; }
.filtre-pill.actif { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.filtres-sep { color: var(--bordure); }
.filtres-count { font-size: 12px; color: var(--texte-doux); white-space: nowrap; }

.ressources-liste { display: flex; flex-direction: column; gap: 0; }

/* Catégories sœurs */
.categories-soeurs {
    margin-top: 36px; padding-top: 24px;
    border-top: 2px solid var(--bordure);
}
.categories-soeurs h2 { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--texte-doux); }
.categories-soeurs h2 a { color: var(--bleu); }
.soeurs-grille { display: flex; flex-wrap: wrap; gap: 8px; }
.soeur-lien {
    padding: 5px 12px; background: var(--bg);
    border: 1px solid var(--bordure); border-radius: 16px;
    font-size: 13px; color: var(--texte); transition: all .15s;
}
.soeur-lien:hover { border-color: var(--bleu); color: var(--bleu); text-decoration: none; }

@media (max-width: 700px) {
    .sous-cat-dmoz { width: 50%; }
    .filtres-barre { flex-direction: column; align-items: flex-start; }
}

/* -- Formulaire soumettre ----------------------------------- */
.form-section {
    background: var(--surface); border: 1px solid var(--bordure);
    border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px;
}
.form-section h2 {
    font-size: 13px; font-weight: 700; color: var(--texte-doux);
    text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px;
    padding-bottom: 10px; border-bottom: 1px solid var(--bordure);
}

/* Accès cards */
.acces-grille {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.acces-card {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 16px 10px; border: 2px solid var(--bordure);
    border-radius: var(--radius); cursor: pointer; text-align: center;
    transition: all .15s;
}
.acces-card input { display: none; }
.acces-card:hover { border-color: var(--bleu); }
.acces-card.actif { border-color: var(--bleu); background: var(--bleu-clair); }
.acces-ico  { font-size: 24px; }
.acces-lbl  { font-size: 13px; font-weight: 700; }
.acces-desc { font-size: 11px; color: var(--texte-doux); }

/* Fonctionnalités cards */
.fonc-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.fonc-card {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border: 2px solid var(--bordure);
    border-radius: var(--radius); cursor: pointer; font-size: 14px;
    transition: all .15s;
}
.fonc-card input { display: none; }
.fonc-card:hover { border-color: var(--bleu); }
.fonc-card.actif { border-color: var(--bleu); background: var(--bleu-clair); }

/* Autres ressources sidebar */
.autres-liste { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.autres-liste li a { font-size: 13px; font-weight: 600; color: var(--texte); }
.autres-liste li a:hover { color: var(--bleu); }
.autres-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; }

@media (max-width: 600px) {
    .acces-grille { grid-template-columns: repeat(2, 1fr); }
    .fonc-grille  { grid-template-columns: 1fr; }
}

/* -- Page profil -------------------------------------------- */
.page-profil { padding: 32px 0 48px; }
.profil-layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }

.profil-sidebar { position: sticky; top: 80px; }
.profil-carte {
    background: var(--surface); border: 1px solid var(--bordure);
    border-radius: var(--radius-lg); padding: 28px; text-align: center;
    margin-bottom: 14px;
}
.profil-avatar {
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--bleu); color: #fff;
    font-size: 32px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
}
.profil-pseudo { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.profil-role { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.badge-role-admin      { background: #fadbd8; color: #78281f; }
.badge-role-moderateur { background: #d0eaf8; color: #1a5276; }
.badge-role-editeur    { background: #fef5e0; color: #b07800; }
.badge-role-membre     { background: var(--bg); color: var(--texte-doux); }
.profil-date { font-size: 12px; margin-bottom: 10px; }
.profil-bio  { font-size: 13px; line-height: 1.5; color: var(--texte-doux); }

.profil-stats-bloc {
    background: var(--surface); border: 1px solid var(--bordure);
    border-radius: var(--radius-lg); padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
}
.profil-stat { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.profil-stat strong { font-size: 18px; font-weight: 700; color: var(--bleu); }

/* Onglets */
.profil-onglets {
    display: flex; gap: 4px; flex-wrap: wrap;
    border-bottom: 2px solid var(--bordure); margin-bottom: 24px;
}
.onglet {
    padding: 10px 16px; font-size: 14px; color: var(--texte-doux);
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: all .15s; text-decoration: none; display: flex; align-items: center; gap: 6px;
}
.onglet:hover { color: var(--bleu); text-decoration: none; }
.onglet.actif { color: var(--bleu); border-bottom-color: var(--bleu); font-weight: 600; }
.onglet-nb {
    background: var(--bg); color: var(--texte-doux);
    font-size: 11px; padding: 1px 6px; border-radius: 10px;
}
.onglet.actif .onglet-nb { background: var(--bleu-clair); color: var(--bleu); }

.onglet-contenu { }
.onglet-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.onglet-header h2 { font-size: 18px; font-weight: 600; }

/* Statut badges dans profil */
.statut-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.statut-valide  { background: #d4f5e2; color: #1a7a44; }
.statut-attente { background: #fef3c7; color: #92400e; }
.statut-rejete  { background: #fee2e2; color: #991b1b; }

/* Vote badge */
.vote-badge { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.vote-badge.utile   { background: #d4f5e2; color: #1a7a44; }
.vote-badge.inutile { background: #fee2e2; color: #991b1b; }

.form-profil { max-width: 560px; }

/* -- Admin stats grille étendue ----------------------------- */
.stats-grid-7 { grid-template-columns: repeat(7, 1fr); }

@media (max-width: 900px) {
    .profil-layout { grid-template-columns: 1fr; }
    .profil-sidebar { position: static; }
}
@media (max-width: 600px) {
    .profil-onglets { gap: 0; }
    .onglet { padding: 8px 10px; font-size: 12px; }
}

/* -- Page À propos ------------------------------------------ */
.page-apropos { padding: 0 0 60px; }

.apropos-hero {
    text-align: center; padding: 56px 20px 48px;
    border-bottom: 1px solid var(--bordure); margin-bottom: 48px;
}
.apropos-logo { margin-bottom: 16px; display: flex; justify-content: center; }
.apropos-hero h1 {
    font-size: 36px; font-weight: 300; color: var(--bleu);
    margin-bottom: 8px; letter-spacing: -.02em;
}
.apropos-hero h1 strong { font-weight: 700; }
.apropos-tagline { font-size: 16px; color: var(--texte-doux); margin-bottom: 32px; }
.apropos-stats { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; }
.astat { text-align: center; }
.astat strong { display: block; font-size: 32px; font-weight: 700; color: var(--bleu); }
.astat span { font-size: 13px; color: var(--texte-doux); }

.apropos-contenu { max-width: 760px; margin: 0 auto; }

.apropos-section {
    margin-bottom: 48px; padding-bottom: 48px;
    border-bottom: 1px solid var(--bordure);
}
.apropos-section:last-child { border-bottom: none; }
.apropos-section h2 {
    font-size: 22px; font-weight: 300; color: var(--texte);
    margin-bottom: 16px; letter-spacing: -.01em;
}
.apropos-section h2 strong { font-weight: 700; color: var(--bleu); }
.apropos-section p { color: var(--texte-doux); line-height: 1.7; margin-bottom: 12px; }
.apropos-section p:last-child { margin-bottom: 0; }
.apropos-section a { color: var(--bleu); }

/* Accès types */
.apropos-acces-grille {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px;
}
.apropos-acces-card {
    background: var(--surface); border: 1px solid var(--bordure);
    border-radius: var(--radius); padding: 16px; text-align: center;
}
.apropos-acces-ico { font-size: 24px; display: block; margin-bottom: 8px; }
.apropos-acces-card strong { display: block; font-size: 14px; margin-bottom: 6px; }
.apropos-acces-card p { font-size: 12px; color: var(--texte-doux); margin: 0; }

/* Étapes */
.apropos-etapes { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.etape { display: flex; gap: 16px; align-items: flex-start; }
.etape-num {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--bleu); color: #fff;
    font-size: 14px; font-weight: 700; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.etape-texte strong { display: block; font-size: 14px; margin-bottom: 3px; }
.etape-texte p { font-size: 13px; color: var(--texte-doux); margin: 0; }

/* Contribuer */
.apropos-cta { background: var(--bg); border-radius: var(--radius-lg); padding: 32px; border: none; }
.apropos-contrib-grille {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px;
}
.contrib-card {
    background: var(--surface); border: 2px solid var(--bordure);
    border-radius: var(--radius-lg); padding: 20px;
    text-align: center; text-decoration: none; color: var(--texte);
    transition: all .2s; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.contrib-card:hover { border-color: var(--bleu); transform: translateY(-2px); text-decoration: none; }
.contrib-card span { font-size: 28px; }
.contrib-card strong { font-size: 14px; font-weight: 700; color: var(--bleu); }
.contrib-card p { font-size: 12px; color: var(--texte-doux); margin: 0; }

@media (max-width: 700px) {
    .apropos-acces-grille { grid-template-columns: repeat(2, 1fr); }
    .apropos-contrib-grille { grid-template-columns: 1fr; }
    .apropos-stats { gap: 20px; }
}

/* -- Ressources -------------------------------------------- */
.ressources-liste { display: flex; flex-direction: column; }

.ri {
    padding: 16px 0;
    border-bottom: 1px solid var(--bordure);
}
.ri:last-child { border-bottom: none; }

/* Ligne titre */
.ri-head {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin-bottom: 3px;
}
.ri-nom {
    font-size: 16px; font-weight: 600; color: var(--bleu);
    text-decoration: none;
}
.ri-nom:hover { text-decoration: underline; }
.ri-host {
    font-size: 12px; color: #188038;
    margin-left: 4px;
}

/* Description */
.ri-desc {
    font-size: 14px; line-height: 1.55; color: var(--texte);
    margin-bottom: 8px; max-width: 680px;
}

/* Barre cliquable */
.ri-barre {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 6px 10px;
    background: var(--bg); border-radius: 6px;
    cursor: pointer; transition: background .12s;
    flex-wrap: wrap;
}
.ri-barre:hover { background: var(--bleu-clair); }
.ri-barre-gauche { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ri-barre-droite {
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0; font-size: 13px;
}
.ri-score { font-weight: 600; font-size: 13px; }
.ri-score.bon    { color: #1a7a44; }
.ri-score.moyen  { color: #b07800; }
.ri-score.bas    { color: #cc0000; }
.ri-nb-avis { color: var(--texte-doux); font-size: 13px; }
.ri-toggle-hint {
    font-size: 11px; color: var(--bleu); font-weight: 600;
    white-space: nowrap;
}

/* Détail accordéon */
.ri-detail {
    background: var(--bg); border-radius: 0 0 6px 6px;
    padding: 14px 14px 10px; border: 1px solid var(--bordure);
    border-top: none;
}
.ri-detail-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.ri-detail-votes {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 12px; padding-bottom: 10px;
    border-bottom: 1px solid var(--bordure);
}
.btn-vote-pill {
    padding: 4px 12px; border-radius: 14px;
    border: 1px solid var(--bordure); background: var(--surface);
    font-size: 13px; cursor: pointer; transition: all .12s;
}
.btn-vote-pill:hover { border-color: var(--bleu); background: var(--bleu-clair); }

/* Commentaires */
.ri-comms-zone { margin-bottom: 10px; }
.comms-liste { display: flex; flex-direction: column; gap: 8px; }
.comm-item {
    background: var(--surface); border-radius: var(--radius);
    padding: 10px 12px; border-left: 3px solid var(--bleu);
}
.comm-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; margin-bottom: 4px;
}
.comm-texte { font-size: 13px; line-height: 1.5; }

.ri-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* -- Modales ------------------------------------------------ */
.modale-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.5); z-index: 2000;
    align-items: center; justify-content: center; padding: 20px;
}
.modale {
    background: var(--surface); border-radius: var(--radius-lg);
    width: 100%; max-width: 480px; box-shadow: 0 20px 60px rgba(0,0,0,.25);
    animation: modale-in .18s ease;
}
@keyframes modale-in {
    from { transform: translateY(-16px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
.modale-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 14px; border-bottom: 1px solid var(--bordure);
}
.modale-header h3 { font-size: 16px; font-weight: 600; }
.modale-fermer {
    background: none; border: none; font-size: 18px; cursor: pointer;
    color: var(--texte-doux); line-height: 1; padding: 2px 6px;
    border-radius: 4px;
}
.modale-fermer:hover { background: var(--bg); }
.modale-body { padding: 16px 20px; }
.modale-footer {
    display: flex; gap: 10px; padding: 12px 20px 18px;
    border-top: 1px solid var(--bordure);
}
.modale-alert {
    margin-top: 10px; padding: 8px 12px; border-radius: var(--radius);
    font-size: 13px; display: none;
}
.modale-alert:not(:empty) { display: block; }
.modale-alert.ok     { background: #d4f5e2; color: #1a7a44; }
.modale-alert.erreur { background: #fadbd8; color: #78281f; }
.visite-verif-mini {
    background: var(--or-clair); border: 1px solid var(--or);
    border-radius: var(--radius); padding: 10px 12px;
    font-size: 12px; margin-bottom: 12px; line-height: 1.5;
}
.modale-body .form-groupe textarea,
.modale-body .form-groupe input,
.modale-body .form-groupe select {
    width: 100%; padding: 8px 12px; border: 1px solid var(--bordure);
    border-radius: var(--radius); font: inherit; font-size: 13px;
}
.modale-body .form-groupe textarea:focus,
.modale-body .form-groupe input:focus,
.modale-body .form-groupe select:focus {
    outline: none; border-color: var(--bleu);
}

/* -- Highlight ressource ciblée par ancre -------------------- */
.ri:target {
    animation: highlight-ri 2s ease;
}
@keyframes highlight-ri {
    0%, 30%   { background: var(--or-clair); border-radius: var(--radius); }
    100%      { background: transparent; }
}

/* -- Anti-spam honeypot -------------------------------------- */
/* Masqué visuellement mais pas en display:none (les bots le détectent) */
.as-piege {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}