/* ============================================================
   granet.org — thème "atelier nocturne pastel" : fond noir,
   cartes graphite, accent vert pastel, logo façon graffiti.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --bg: #0B0B0C;
    --panel: #3A3A3A;
    --panel-empty: #333333;
    --panel-raised: #202020;
    --ink: #E7DE93;
    --ink-soft: #D8CE78;
    --ink-faint: #B0A75E;
    --accent: #A9D18E;
    --accent-deep: #8BB96E;
    --accent-dim: #6F8F5F;
    --accent-tint: rgba(169, 209, 142, 0.14);
    --accent-glow: rgba(169, 209, 142, 0.22);
    --line: #2A2B2D;
    --line-soft: rgba(237, 237, 230, 0.08);
    --danger: #E0685C;
    --danger-tint: rgba(224, 104, 92, 0.14);
}

* { box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--ink);
    margin: 0;
    padding: 0;
    font-size: 15px;
}

.mark {
    width: 1.05em;
    height: 1.05em;
    flex-shrink: 0;
    vertical-align: -0.15em;
    color: var(--accent);
    filter: drop-shadow(0 0 5px var(--accent-glow));
}

/* ---------- Bandeau du haut : mode édition | rubriques | déconnexion ---------- */

.topbar {
    position: relative;
    z-index: 10; /* garde le bandeau (et le menu déroulant des rubriques) au-dessus du contenu de la page, quel que soit le z-index local utilisé plus bas (ex. les photos) */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 0.9rem 2rem;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
}

button {
    cursor: pointer;
    border: none;
    border-radius: 6px;
    padding: 0.6rem 1rem;
    background: var(--panel-raised);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}
button:hover { background: #26282A; }

#edit-mode-toggle {
    flex: 0 0 auto;
    width: auto;
    max-width: 270px; /* ne dépasse jamais la largeur de la colonne marque-pages */
    background: transparent;
    border: 1.5px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.85rem;
}
#edit-mode-toggle:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
body.edit-mode #edit-mode-toggle {
    background: var(--accent-tint);
    border-color: var(--accent);
    color: var(--accent);
}

.topbar .logout {
    flex-shrink: 0;
    color: var(--ink-faint);
    text-decoration: none;
    font-size: 0.88rem;
}
.topbar .logout:hover { color: var(--accent); }

/* ---------- Rubriques rapides (dans le bandeau du haut) ---------- */

.quicklinks {
    position: absolute;
    top: 50%;
    /* left + transform: translate(-50%,-50%) sont calculés en JS pour aligner
       le centre du bandeau sur le centre réel de la colonne du milieu. */
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
    max-width: 90%;
}

.qmenu { position: relative; }

.qmenu-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1.5px solid var(--accent-dim);
    color: var(--accent);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
}
.qmenu-btn:hover { border-color: var(--accent); color: #CFE8BD; background: transparent; }
.qmenu-btn .arrow { font-size: 0.6rem; transition: transform 0.15s; }
.qmenu.open .qmenu-btn .arrow { transform: rotate(90deg); }

.qmenu-drop {
    display: none;
    flex-direction: column;
    gap: 0.4rem;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.5rem;
    padding: 0.7rem;
    min-width: 220px;
    background: var(--panel-raised);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    z-index: 20;
}
.qmenu.open .qmenu-drop { display: flex; }

#add-quicklink-btn {
    display: flex;
    align-items: center;
    background: transparent;
    border: 1.5px dashed var(--accent-dim);
    color: var(--accent);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
}
#add-quicklink-btn:hover { border-color: var(--accent); background: transparent; }

.qmenu-rename-form {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}
.qmenu-rename-form input {
    flex: 1;
    min-width: 0;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.78rem;
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--ink);
}
.qmenu-rename-form input:focus { outline: none; border-color: var(--accent); }
.qmenu-rename-form button {
    padding: 0.3rem 0.55rem;
    font-size: 0.75rem;
    background: var(--accent);
    color: #0B0B0C;
    font-weight: 600;
    flex-shrink: 0;
}
.qmenu-rename-form button:hover { background: var(--accent-deep); }

.qmenu-links {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.qmenu-link-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    border: 1.5px solid var(--accent-dim);
    border-radius: 6px;
    padding: 0.15rem 0.3rem 0.15rem 0.9rem;
}
.qmenu-link-row a {
    flex: 1;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.3rem 0;
}
.qmenu-link-row a:hover { color: #EFE7AE; }

.qmenu-link-actions { display: flex; gap: 0.1rem; flex-shrink: 0; }
.qmenu-link-actions button {
    background: transparent;
    color: var(--ink-faint);
    padding: 0.1rem 0.35rem;
    font-size: 0.75rem;
}
.qmenu-link-actions button:hover { color: var(--accent); background: transparent; }
.qmenu-link-actions button:last-child:hover { color: var(--danger); }

.qmenu-link-edit-form {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}
.qmenu-link-edit-form input {
    flex: 1;
    min-width: 90px;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.78rem;
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--ink);
}
.qmenu-link-edit-form input:focus { outline: none; border-color: var(--accent); }
.qmenu-link-edit-form button {
    padding: 0.3rem 0.55rem;
    font-size: 0.75rem;
    flex-shrink: 0;
}
.qmenu-link-edit-form button[type="submit"] { background: var(--accent); color: #0B0B0C; font-weight: 600; }
.qmenu-link-edit-form button[type="submit"]:hover { background: var(--accent-deep); }
.qmenu-link-edit-form button[type="button"] { background: var(--line-soft); color: var(--ink-soft); }
.qmenu-link-edit-form button[type="button"]:hover { background: var(--panel-raised); }

.qmenu-add-link-form {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.5rem;
}
.qmenu-add-link-form input {
    flex: 1;
    min-width: 0;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.78rem;
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--ink);
}
.qmenu-add-link-form input:focus { outline: none; border-color: var(--accent); }
.qmenu-add-link-form button {
    padding: 0.3rem 0.55rem;
    font-size: 0.78rem;
    background: var(--accent);
    color: #0B0B0C;
    font-weight: 600;
    flex-shrink: 0;
}
.qmenu-add-link-form button:hover { background: var(--accent-deep); }

.qmenu-delete-btn {
    margin-top: 0.5rem;
    align-self: flex-start;
    background: transparent;
    border: 1px solid var(--danger-tint);
    color: var(--danger);
    font-size: 0.72rem;
    padding: 0.3rem 0.5rem;
}
.qmenu-delete-btn:hover { background: var(--danger-tint); }

/* ---------- Layout deux colonnes ---------- */

.layout {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin: 1.5rem 0;
    padding: 0 2rem;
    gap: 1.2rem;
}

#sidebar {
    width: 270px; /* valeur de départ ; ajustée dynamiquement en JS au nom de rubrique le plus long affiché */
    flex-shrink: 0;
    overflow-x: hidden; /* filet de sécurité : un contenu trop large est tronqué plutôt que de déborder sous #main-panel */
}

#sidebar > h2 {
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    color: var(--ink-soft);
    margin: 0 0 0.7rem 0.2rem;
    text-transform: uppercase;
}

#main-panel {
    flex: 1;
    min-width: 0;
}

/* ---------- Grille centrale 3 colonnes x 2 rangées ---------- */

.grid3x2 {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
}

.grid-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.cell {
    background: var(--panel);
    border-radius: 10px;
    padding: 1.1rem 1.2rem;
    min-height: 150px;
}

.cell.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-empty);
    color: var(--ink-faint);
    font-size: 0.85rem;
    font-style: italic;
    min-height: 230px;
}

.rss-cell { min-height: 230px; }

.popular-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.6rem;
}

.popular-grid a {
    flex: 1 1 calc(50% - 0.6rem);
    text-align: center;
    border: 1.5px solid var(--accent-dim);
    border-radius: 6px;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.5rem 0.6rem;
}
.popular-grid a:hover { border-color: var(--accent); color: #EFE7AE; }

.popular-link-clicks {
    opacity: 0.75;
    font-weight: 500;
}

.popular-grid .empty-hint {
    color: var(--ink-faint);
    font-size: 0.82rem;
    font-style: italic;
    padding: 0.4rem 0;
}

.popular-count-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
    flex-wrap: wrap;
}
.popular-count-form label {
    font-size: 0.78rem;
    color: var(--ink-soft);
}
.popular-count-form input {
    width: 4.2rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.82rem;
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--ink);
}
.popular-count-form input:focus { outline: none; border-color: var(--accent); }
.popular-count-form button {
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
    background: var(--accent);
    color: #0B0B0C;
    font-weight: 600;
}
.popular-count-form button:hover { background: var(--accent-deep); }

.rss-font-size-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
    flex-wrap: wrap;
}
.rss-font-size-label {
    font-size: 0.78rem;
    color: var(--ink-soft);
}
.rss-font-size-buttons {
    display: flex;
    gap: 0.3rem;
}
.rss-font-btn {
    padding: 0.25rem 0.55rem;
    font-size: 0.76rem;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-soft);
}
.rss-font-btn:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
.rss-font-btn.active {
    background: var(--accent-tint);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

/* ---------- Titre du site, sous les photos ---------- */

.site-title {
    text-align: center;
    margin-top: 0.9rem;
}
.site-title h1 {
    margin: 0;
    font-family: 'Bungee', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    letter-spacing: 0.5px;
    color: var(--bg);
    -webkit-text-stroke: 1.5px var(--accent);
    text-shadow: 0 0 2px var(--accent), 0 0 14px var(--accent-glow);
    transform: rotate(-1deg);
}
.site-title .tagline {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-soft);
}
.site-title-account {
    display: inline-block;
    font-family: 'Bungee', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    letter-spacing: 0.5px;
    margin-left: 0.35rem;
    vertical-align: baseline;
    color: var(--bg);
    -webkit-text-stroke: 1.5px var(--accent);
    text-shadow: 0 0 2px var(--accent), 0 0 14px var(--accent-glow);
}

/* ---------- Cellules "flux RSS" (colonnes 1, 2 et 3) ---------- */

.rss-cell {
    display: flex;
    flex-direction: column;
    padding: 0.6rem 0.7rem;
    overflow: hidden;
    /* Même gris que le cadre milieu-haut (.cell utilise déjà var(--panel), on le garde) */
}

.rss-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 0.4rem;
}
body:not(.edit-mode) .rss-header { margin-bottom: 0; min-height: 0; }
.rss-edit-toggle {
    padding: 0.15rem 0.45rem;
    font-size: 0.72rem;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    border-radius: 5px;
}
.rss-edit-toggle:hover { border-color: var(--accent); color: var(--accent); }

.rss-edit-form {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    padding: 0.5rem;
    background: var(--panel-raised);
    border-radius: 6px;
}
.rss-edit-form.open { display: flex; }
.rss-feed-config {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.rss-edit-form .rss-url-input {
    flex: 1;
    min-width: 120px;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.78rem;
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--ink);
}
.rss-edit-form .rss-url-input:focus { outline: none; border-color: var(--accent); }
.rss-count-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    color: var(--ink-soft);
    flex-shrink: 0;
}
.rss-count-input {
    width: 3.6rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.78rem;
    background: var(--bg);
    color: var(--ink);
}
.rss-edit-form button[type="submit"] {
    align-self: flex-start;
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
    background: var(--accent);
    color: #0B0B0C;
    font-weight: 600;
}
.rss-edit-form button[type="submit"]:hover { background: var(--accent-deep); }

.rss-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.rss-block-title {
    color: var(--accent);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    margin-bottom: 0.45rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--line-soft);
    text-align: center;
}
.rss-block-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.rss-block-items li { display: flex; align-items: baseline; gap: 0.5rem; line-height: 1.4; }
.rss-block-items a {
    color: var(--ink);
    font-size: 0.88rem;
    text-decoration: none;
}
.rss-block-items a:hover { color: var(--accent); text-decoration: underline; }
.rss-block-items .rss-item-date {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--accent); /* vert pâle, pour détacher la date du reste de la ligne */
}
.rss-body .empty-hint {
    color: var(--ink-faint);
    font-size: 0.82rem;
    font-style: italic;
    padding: 0.4rem 0;
}

/* Taille du texte des flux RSS : "medium" reprend les valeurs ci-dessus
   (valeur par défaut/historique), "small" et "large" les ajustent. */
.grid3x2.rss-font-small .rss-block-title { font-size: 0.78rem; }
.grid3x2.rss-font-small .rss-block-items a { font-size: 0.74rem; }
.grid3x2.rss-font-small .rss-block-items .rss-item-date { font-size: 0.6rem; }
.grid3x2.rss-font-small .rss-body .empty-hint { font-size: 0.7rem; }

.grid3x2.rss-font-large .rss-block-title { font-size: 1.08rem; }
.grid3x2.rss-font-large .rss-block-items a { font-size: 1.04rem; }
.grid3x2.rss-font-large .rss-block-items .rss-item-date { font-size: 0.82rem; }
.grid3x2.rss-font-large .rss-body .empty-hint { font-size: 0.96rem; }

.kids-photo {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0;
    margin-top: 1.1rem;
    padding: 0.4rem 0 0.6rem;
}

/* Cadre façon "vieille photo abîmée" : bord irrégulier (papier déchiré/usé),
   plus de pointillé "dentelle" façon timbre-poste. */
.photo-stamp {
    background: #C7AD82;
    padding: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
    position: relative;
    clip-path: polygon(0.0% 0%, 10.0% -0.78%, 20.0% -1.54%, 30.0% 0.66%, 40.0% -1.88%, 50.0% 0.16%, 60.0% -0.59%, 70.0% -1.94%, 80.0% 0.03%, 90.0% -2.04%, 100% 0.0%, 99.71% 10.0%, 98.11% 20.0%, 98.2% 30.0%, 99.67% 40.0%, 101.44% 50.0%, 98.34% 60.0%, 98.78% 70.0%, 100.56% 80.0%, 101.97% 90.0%, 100.0% 100%, 90.0% 100.34%, 80.0% 99.55%, 70.0% 102.1%, 60.0% 98.0%, 50.0% 101.58%, 40.0% 99.07%, 30.0% 98.43%, 20.0% 98.32%, 10.0% 99.16%, 0% 100.0%, 1.39% 90.0%, -1.4% 80.0%, 0.36% 70.0%, 0.61% 60.0%, -0.56% 50.0%, 0.21% 40.0%, -1.92% 30.0%, -1.94% 20.0%, -1.29% 10.0%);
}
.photo-stamp img {
    display: block;
    width: 125px; /* +15% par rapport à 109px, hauteur inchangée grâce au recadrage des sources */
    height: auto;
}

/* Léger "V" entre les deux photos, chevauchement réduit au minimum */
.photo-stamp.tilt-left { transform: rotate(-6deg); margin-right: -4px; z-index: 1; }
.photo-stamp.tilt-right { transform: rotate(6deg); z-index: 2; }

/* ---------- Effet "vieille photo retrouvée" : sépia + grain + petites usures ---------- */

/* Teinte sépia sur l'image elle-même */
.kids-photo img {
    filter: sepia(0.88) saturate(1.25) contrast(0.94) brightness(1.08) hue-rotate(-6deg);
}

/* Grain, halo de vieillissement et griffures, posés par-dessus l'image
   (le pseudo-élément est positionné et peint donc au-dessus de l'<img> statique) */
.photo-stamp::before {
    content: '';
    position: absolute;
    inset: 8px; /* correspond au padding, donc calé exactement sur la photo */
    pointer-events: none;
    background-image:
        /* petites griffures fines, deux orientations */
        repeating-linear-gradient(112deg, rgba(255,250,235,0.10) 0px, rgba(255,250,235,0.10) 1px, transparent 1px, transparent 70px),
        repeating-linear-gradient(28deg, rgba(255,250,235,0.07) 0px, rgba(255,250,235,0.07) 1px, transparent 1px, transparent 95px),
        /* halo brun qui mange légèrement les bords, comme une photo abîmée par le temps */
        radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 50%, rgba(74,52,28,0.45) 100%),
        /* grain photographique */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode: overlay;
    opacity: 0.5;
}
/* Une petite tache plus marquée dans un coin, façon photo qui a traîné dans un tiroir */
.photo-stamp.tilt-left::before {
    background-image:
        radial-gradient(circle at 82% 12%, rgba(74,52,28,0.5) 0%, rgba(74,52,28,0) 22%),
        repeating-linear-gradient(112deg, rgba(255,250,235,0.10) 0px, rgba(255,250,235,0.10) 1px, transparent 1px, transparent 70px),
        repeating-linear-gradient(28deg, rgba(255,250,235,0.07) 0px, rgba(255,250,235,0.07) 1px, transparent 1px, transparent 95px),
        radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 50%, rgba(74,52,28,0.45) 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Contrôles d'édition masqués tant que le mode édition n'est pas actif */
body:not(.edit-mode) .add-category-form,
body:not(.edit-mode) .cat-icon-btn,
body:not(.edit-mode) .tree-link-actions,
body:not(.edit-mode) .tree-link-clicks,
body:not(.edit-mode) .add-link-form-tree,
body:not(.edit-mode) .inline-add-form,
body:not(.edit-mode) .edit-link-form-tree,
body:not(.edit-mode) .qmenu-rename-form,
body:not(.edit-mode) .qmenu-link-actions,
body:not(.edit-mode) .qmenu-add-link-form,
body:not(.edit-mode) .qmenu-link-edit-form,
body:not(.edit-mode) .qmenu-delete-btn,
body:not(.edit-mode) #add-quicklink-btn,
body:not(.edit-mode) .popular-count-form,
body:not(.edit-mode) .popular-link-clicks,
body:not(.edit-mode) .rss-edit-toggle,
body:not(.edit-mode) .rss-font-size-control {
    display: none !important;
}

/* ---------- Formulaire "nouvelle catégorie" racine ---------- */

.add-category-form {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.add-category-form input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.88rem;
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--ink);
}
.add-category-form input::placeholder { color: var(--ink-faint); }
.add-category-form input:focus {
    outline: none;
    border-color: var(--accent);
}

.add-category-form button {
    padding: 0.5rem 0.8rem;
    background: var(--accent);
    color: #0B0B0C;
    font-weight: 600;
}
.add-category-form button:hover { background: var(--accent-deep); }

/* ---------- Arbre de catégories ---------- */

/* Chaque catégorie racine est encadrée, comme un bloc de favoris */
.category-box {
    border: 1.5px solid var(--accent-dim);
    border-radius: 8px;
    padding: 0.3rem 0.3rem 0.4rem;
    margin-bottom: 0.6rem;
    overflow: hidden;
}

.cat-node { width: 100%; }

.cat-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.4rem;
    border-radius: 5px;
    cursor: default;
}
.cat-row:hover { background: var(--line-soft); }

.cat-toggle {
    width: 1rem;
    flex-shrink: 0;
    text-align: center;
    color: var(--accent);
    cursor: pointer;
    font-size: 0.8rem;
}

.cat-name {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-icon-btn {
    flex-shrink: 0;
    background: transparent;
    color: var(--ink-faint);
    padding: 0.1rem 0.4rem;
    font-size: 0.8rem;
}
.cat-icon-btn:hover { background: var(--line-soft); color: var(--accent); }
.cat-icon-btn.cat-delete:hover { color: var(--danger); }

.inline-add-form {
    display: flex;
    gap: 0.3rem;
    padding: 0.3rem;
    align-items: center;
}

.inline-add-input {
    flex: 1;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--ink);
}
.inline-add-input:focus {
    outline: none;
    border-color: var(--accent);
}

.inline-add-confirm, .inline-add-cancel {
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.inline-add-confirm { background: var(--accent); color: #0B0B0C; font-weight: 600; }
.inline-add-confirm:hover { background: var(--accent-deep); }
.inline-add-cancel { background: var(--line-soft); color: var(--ink-soft); }
.inline-add-cancel:hover { background: var(--panel-raised); }

/* ---------- Liens dans l'arborescence ---------- */

.tree-links {
    list-style: none;
    margin: 0.1rem 0 0.3rem;
    padding-left: 0;
    border-left: 1px solid var(--line);
}

.tree-link-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.4rem;
    border-radius: 5px;
}
.tree-link-item:hover { background: var(--line-soft); }

.tree-link-anchor {
    flex: 1;
    min-width: 0;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tree-link-anchor::before {
    content: '–';
    color: var(--ink-soft);
    margin-right: 0.4rem;
    font-weight: 700;
}
.tree-link-anchor:hover { color: var(--ink); text-decoration: underline; }

.tree-link-clicks {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
    min-width: 0.9rem;
    text-align: right;
}

.tree-link-actions {
    display: flex;
    gap: 0.1rem;
    flex-shrink: 0;
}

.edit-link, .delete-link {
    background: transparent;
    color: var(--ink-faint);
    padding: 0.1rem 0.35rem;
    font-size: 0.78rem;
}
.edit-link:hover { color: var(--accent); background: transparent; }
.delete-link:hover { color: var(--danger); background: transparent; }

.tree-link-item-editing { display: block; }

.edit-link-form-tree {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    width: 100%;
}

.edit-link-form-tree input {
    flex: 1;
    min-width: 100px;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.82rem;
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--ink);
}
.edit-link-form-tree input:focus {
    outline: none;
    border-color: var(--accent);
}

.edit-link-form-tree .edit-actions {
    display: flex;
    gap: 0.3rem;
}

.edit-link-form-tree .edit-actions button[type="submit"] {
    background: var(--accent);
    color: #0B0B0C;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
}
.edit-link-form-tree .edit-actions button[type="submit"]:hover { background: var(--accent-deep); }

.edit-link-form-tree .cancel-edit {
    background: var(--line-soft);
    color: var(--ink-soft);
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
}
.edit-link-form-tree .cancel-edit:hover { background: var(--panel-raised); }

/* ---------- Formulaire d'ajout de lien (dans l'arbre) ---------- */

.add-link-form-tree {
    display: flex;
    gap: 0.3rem;
    padding: 0.2rem 0.4rem 0.5rem;
    align-items: center;
}

.add-link-form-tree input {
    flex: 1;
    min-width: 0;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--ink);
}
.add-link-form-tree input:focus {
    outline: none;
    border-color: var(--accent);
}

.add-link-form-tree button {
    padding: 0.3rem 0.55rem;
    font-size: 0.8rem;
    background: var(--accent);
    color: #0B0B0C;
    font-weight: 600;
    flex-shrink: 0;
}
.add-link-form-tree button:hover { background: var(--accent-deep); }

/* ---------- Page de connexion ---------- */

.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: var(--bg);
}

.login-box {
    background: var(--panel);
    padding: 2.2rem 2.4rem;
    border-radius: 10px;
    text-align: center;
    width: 100%;
    max-width: 320px;
}

.login-box h1 {
    margin-top: 0;
    font-family: 'Bungee', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    color: var(--bg);
    -webkit-text-stroke: 1.5px var(--accent);
    text-shadow: 0 0 2px var(--accent), 0 0 14px var(--accent-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.login-box input {
    display: block;
    width: 100%;
    padding: 0.65rem 0.8rem;
    margin: 1.1rem 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    background: var(--bg);
    color: var(--ink);
}
.login-box input:focus {
    outline: none;
    border-color: var(--accent);
}

.login-box button { width: 100%; background: var(--accent); color: #0B0B0C; font-weight: 600; }
.login-box button:hover { background: var(--accent-deep); }

.error { color: var(--danger); font-size: 0.88rem; }

/* Case "se souvenir de moi" */
.remember-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--ink-soft);
    margin: -0.3rem 0 1.1rem;
}
.remember-row input {
    width: auto;
    margin: 0;
    accent-color: var(--accent);
}

/* Pop-up "Qui se connecte ?" (choix Pascal / Julie après le mot de passe) */
.account-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}
.account-modal {
    background: var(--panel);
    padding: 2rem 2.2rem;
    border-radius: 10px;
    text-align: center;
    width: 100%;
    max-width: 300px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.account-modal-title {
    margin: 0 0 1.2rem;
    color: var(--ink-soft);
    font-size: 0.95rem;
}
.account-modal-buttons {
    display: flex;
    gap: 1rem;
}
.account-modal-buttons form { flex: 1; margin: 0; }
.account-btn {
    width: 100%;
    padding: 1.1rem 0;
    border-radius: 8px;
    font-family: 'Bungee', sans-serif;
    font-weight: 400;
    font-size: 1.7rem;
    background: var(--panel-raised);
    border: 1.5px solid var(--accent-dim);
    color: var(--accent);
}
.account-btn:hover { background: var(--accent); color: #0B0B0C; border-color: var(--accent); }

/* ---------- Version mobile : rubriques + marque-pages + liens populaires ---------- */

@media (max-width: 900px) {
    .grid3x2 { flex-direction: column; }
}

@media (max-width: 720px) {
    .topbar { flex-wrap: wrap; padding: 0.8rem 1rem; }
    .quicklinks { position: static; transform: none; justify-content: center; max-width: none; margin: 0.4rem 0; flex-basis: 100%; }
    /* Le mode édition n'est pas accessible sur mobile : consultation seule. */
    #edit-mode-toggle { display: none !important; }
    .layout { flex-direction: column; padding: 0 1rem; }
    #sidebar { width: 100% !important; }
    /* Seuls les liens populaires restent visibles dans le panneau central :
       flux RSS, photos et titre du site disparaissent. */
    .rss-cell { display: none; }
    .col2-top {
        background: transparent;
        padding: 0;
        min-height: 0;
    }
    .col2-top .kids-photo,
    .col2-top .site-title {
        display: none;
    }
}