/* --- 1. BASE & COULEURS --- */
    /* Couleurs de la Ferme : Vert Forêt, Terre, et Fond crème léger */
    body { 
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
        background: #f9fbf9; 
        margin: 0; padding: 0; 
        color: #2c3e50; 
        display: flex; flex-direction: column; min-height: 100vh; 
    }

    /* --- 2. HEADER --- */
    header { 
        width: 100%; padding: 40px 0; text-align: center; 
        background: #F9FBF9; border-bottom: 3px solid #4a7c59; 
        box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
    }

    header h1 {
        color: #4a7c59; /* Le vert de la ferme */
        margin: 0 0 20px 0;
        font-size: 2.2em;
        font-variant: small-caps;
        letter-spacing: 1px;
    }

    .login-btn {   
        display: inline-block; background: #4a7c59; color: white; padding: 15px 35px;   
        text-decoration: none; border-radius: 8px; font-weight: bold; font-size: 1.2em;
        transition: 0.3s; box-shadow: 0 4px 0 #355e42; border: none;
    }
    .login-btn:hover { background: #3d664a; transform: translateY(1px); box-shadow: 0 2px 0 #355e42; }

    /* --- 3. CONTENU & COLONNES --- */
    .container { flex: 1; display: flex; width: 98%; max-width: 1250px; margin: 40px auto; gap: 20px; }

    .column { 
        flex: 1; background: white; padding: 25px; border-radius: 12px; 
        box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid #e1e8e1; 
        position: relative; overflow: hidden; 
    }

    /* Décoration "Sillon de terre" au sommet des colonnes */
    .column::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: #8d6e63; }

    .column.future { opacity: 0.6; filter: grayscale(40%); transition: 0.4s; background: #fafafa; }
    .column.future:hover { opacity: 1; filter: grayscale(0%); }

    h2 { 
        border-bottom: 2px solid #4a7c59; padding-bottom: 10px; margin-top: 0; 
        color: #4a7c59; font-size: 1.3em; font-variant: small-caps; 
        display: flex; align-items: center; gap: 10px; 
    }
    .column.future h2 { border-bottom-color: #999; color: #777; }

    ul { list-style: none; padding: 0; margin-top: 15px; }
    li { margin: 18px 0; padding-left: 15px; border-left: 3px solid #cbd5cb; transition: 0.2s; }

    /* 1. On retire le hover générique vert pour le rendre dynamique */
li.item {
    transition: 0.3s;
}

/* 2. Logique pour la section "UTILISATION LIBRE" (Signal Blue) */
/* On cible tous les .item qui suivent un .section-label contenant .signal-blue */
li.section-label:has(.signal-blue) ~ li.item:hover {
    border-left-color: #1565c0; /* Le bleu de ton badge */
}

/* 3. Logique pour la section "CONNEXION PERIPHERIA" (Signal Ready / Vert) */
li.section-label:has(.signal-ready) ~ li.item:hover {
    border-left-color: #2e7d32; /* Le vert de ton badge */
}

/* 4. Logique pour la section "COMPTE À LA DEMANDE" (Signal Dark) */
li.section-label:has(.signal-dark) ~ li.item:hover {
    border-left-color: #455a64; /* Le gris de ton badge */
}

/* 5. Sécurité : Empêcher le bleu de déborder sur le vert */
/* Quand un nouveau label arrive, il "réinitialise" la règle pour les suivants */
li.section-label ~ li.section-label ~ li.item:hover {
    /* Le CSS gère cela naturellement par l'ordre d'apparition, 
       mais assure-toi que tes blocs sont bien dans l'ordre du HTML */
}

/* --- GESTION DES COULEURS AU SURVOL (Badges internes) --- */

/* 1. Cas "Connexion Peripheria" (Vert) */
ul li:has(.signal-ready):hover {
    border-left-color: #2e7d32;
}

/* 2. Cas "En attente de semis" ou "Chantier" (Orange #e65100) */
/* On cible la classe .signal-work que tu as définie pour l'orange */
ul li:has(.signal-work):hover {
    border-left-color: #e65100;
}

/* 3. Optionnel : Accentuer le lien au survol pour plus de clarté */
ul li:has(.signal-work):hover a {
    color: #e65100;
}

/* OU alors, si tu veux être très précis sans toucher au HTML */
li.item:has(span.no-link):hover {
    /* Si "Le Trousseau" est le seul avec .no-link dans cette colonne */
    border-left-color: #2e7d32;
}

.user-icon {
    filter: brightness(0) invert(1); /* Transforme l'icône noire/couleur en blanc pur */
    margin-right: 8px;
    display: inline-block;
    vertical-align: middle;
}

/* --- COULEURS DES BARRES AU SURVRE (HOVER) --- */

/* Si l'item a la classe bleu, au survol la barre devient bleue */
li.item.signal-blues:hover {
    background:none; border:none; border-left: 3px solid #1565c0;
}

/* Si l'item a la classe ready (vert), au survol la barre devient verte */
li.item.signal-readys:hover {
    border-left-color: #2e7d32 !important;
}

/* Si l'item a la classe dark (noir/gris), au survol la barre devient sombre */
li.item.signal-darks:hover {
    border-left-color: #455a64 !important;
}

/* On garde l'effet de survol pour que l'item ressorte un peu */
li.item:hover {
    background-color: rgba(74, 124, 89, 0.03); /* Un très léger voile vert Peripheria */
}

/* Supprimez ou commentez l'ancien ::before */
.fediverse-link::before {
    content: none !important;
}

.fediverse-link {
    color: #595aff;
    font-weight: 600;
    display: inline-flex; /* Aligne l'icône et le texte proprement */
    align-items: center;
}

.fediverse-link svg {
    color: #a2a2ff; /* Couleur spécifique pour l'icône */
    flex-shrink: 0;
}

    a { color: #91d5a2; text-decoration: none;}
    li a { color: #2e5a39; text-decoration: none; font-size: 1.1em; font-weight: 600; }
    li a:hover { color: #4a7c59; text-decoration: underline; }

    .desc { display: block; font-size: 0.85em; color: #5d6d5d; margin-top: 4px; line-height: 1.4; }

    .sso-badge { 
        display: inline-block; background: #edf7ed; color: #4a7c59; 
        font-size: 0.75em; padding: 3px 8px; border-radius: 20px; 
        margin-top: 8px; font-weight: bold; border: 1px solid #c8e6c9; 
    }

    /* --- 4. FOOTER (STRUCTURE EN GRILLE) --- */
    footer { 
        background: #2d3436; 
        color: #ecf0f1; 
        padding: 60px 0; /* Plus d'espace vertical */
        margin-top: 40px; 
        border-top: 6px solid #8d6e63; 
        width: 100%;
    }

    .footer-grid { 
        display: flex; 
        flex-direction: row; /* Force l'alignement en ligne sur PC */
        justify-content: center; /* Centre les colonnes dans la page */
        align-items: flex-start; /* Aligne le haut des blocs */
        flex-wrap: wrap; 
        max-width: 1250px; 
        margin: 0 auto; 
        gap: 40px; 
        padding: 0 20px;
    }

    .footer-block { 
        flex: 1; 
        min-width: 300px; /* Empêche les colonnes d'être trop étroites */
        max-width: 400px; /* Évite qu'elles ne s'étalent trop sur très grand écran */
        text-align: center; 
    }

    .footer-block h4 { 
        color: #4a7c59; 
        margin: 0 0 20px 0; 
        text-transform: uppercase; 
        font-size: 1em; 
        letter-spacing: 1px; 
        font-weight: bold;
    }

    /* Conteneur pour le snippet blanc */
    #stats-placeholder { 
        display: block; 
        margin: 0 auto;
        width: 100%;
    }

    .policy-text { 
        font-size: 0.9em; 
        line-height: 1.6; 
        color: #bdc3c7; 
        margin: 0;
    }

    .future .no-link {
       font-weight: bold;
       color: #555; /* Un gris un peu plus sombre que le texte de description */
       cursor: default;
    }

    /* --- 5. RESPONSIVE --- */
    @media (max-width: 1024px) { 
        .container { flex-direction: column; align-items: center; } 
        .column { width: 92%; } 
    }

    @media (max-width: 850px) { /* Seuil mobile/tablette */
        .footer-grid { 
            flex-direction: column; 
            align-items: center; 
            text-align: center;
        }
        .footer-block { 
            width: 100%; 
            max-width: 100%;
            border-bottom: 1px solid #444; 
            padding-bottom: 30px; 
        }
        .footer-block:last-child { border-bottom: none; }
    }
    
    /* --- ACCORDÉON MENTIONS LÉGALES --- */
.mentions-wrapper {
    max-width: 1250px;
    margin: 20px auto;
    width: 98%;
}

.mentions-trigger {
    background: none;
    border: none;
    color: #4a7c59;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.9em;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
    transition: 0.3s;
    opacity: 0.8;
}

.mentions-trigger:hover { opacity: 1; text-decoration: underline; }

.mentions-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background: white;
    border-radius: 8px;
    border: 1px solid transparent;
}

.mentions-content.active {
    max-height: 1000px; /* Assez grand pour le contenu */
    border: 1px solid #e1e8e1;
    margin-top: 10px;
    padding: 20px;
}

.mentions-inner {
    font-size: 0.85em;
    line-height: 1.5;
    color: #5d6d5d;
    column-count: 2; /* Optionnel : affiche sur deux colonnes pour gagner de la place */
    column-gap: 30px;
}

@media (max-width: 768px) { .mentions-inner { column-count: 1; } }

#privacy-modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0; top: 0; 
    width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(3px);
}

.modal-content {
    background-color: white;
    margin: 10% auto;
    padding: 30px;
    border-radius: 12px;
    width: 80%;
    max-width: 500px;
    box-shadow: 0 5px 30px rgba(0,0,0,0.3);
}

/* --- GESTION VISUELLE DES VOTES --- */

/* 1. Le bouton de vote par défaut */
.vote-btn {     
    display: inline-block;  
    cursor: pointer;     
    margin-left: 8px;
    filter: grayscale(1);
    transition: 0.2s;
    opacity: 0.8;
    user-select: none;
}

/* État quand l'utilisateur a déjà voté (Vert et actif) */
.vote-btn.voted {
    filter: none !important;  
    opacity: 1 !important;    
    transform: scale(1.3);    
    color: #4a7c59;          
}

/* 2. L'invitation à voter (masquée par défaut) */
.vote-requirement {
    display: none;
    font-size: 0.75em;
    color: #8d6e63;
    text-decoration: underline;
    margin-left: 5px;
    cursor: pointer;
}

/* 3. CAS : NON CONNECTÉ (Si le body n'a PAS .is-logged) */
body:not(.is-logged) .vote-btn, 
body:not(.is-logged) .vote-count {
    display: none !important;
}

body:not(.is-logged) .vote-requirement {
    display: inline-block !important;
}

/* 4. CAS : CONNECTÉ (Si le body A .is-logged) */
body.is-logged .vote-btn,
body.is-logged .vote-count {
    display: inline-block !important;
}

body.is-logged .vote-requirement {
    display: none !important;
}

.no-link {
    font-weight: bold;
    color: #555;
    cursor: default;
    font-size: 1.1em;
    font-weight: 600;
}

/* Style de base du badge (sans le point vert forcé) */
.badge-federated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

/* Le point lumineux : il prend la couleur du texte (currentColor) */
.badge-federated::before {
    content: "";
    width: 8px;
    height: 8px;
    background-color: currentColor; /* Magie : prend la couleur du texte du badge */
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 5px currentColor; /* Halo de la même couleur */
}

/* --- TES VARIANTES DE COULEURS --- */

/* Vert (Prêt / Connecté) - Par défaut */
.signal-ready { 
    background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; 
}

/* Bleu (Libre) */
.signal-blue { 
    background: #e3f2fd; color: #1565c0; border: 1px solid #bbdefb; 
}

/* Orange (Chantier / Work) */
.signal-work { 
    background: #fffde7;
    color: #827717;
    border: 1px solid #fff59d;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Foncé (Demande) - Version Gris Minéral plus léger */
.signal-dark { 
    background: #cfd8dc; /* Gris bleuté très clair pour le fond */
    color: #455a64;      /* Gris ardoise soutenu pour le texte et le point */
    border: 1px solid #b0bec5; 
}
/* --- ACCORDÉON SEMIS (FORMULAIRE) --- */
.semis-wrapper {
    max-width: 600px;
    margin: 15px auto 0 auto;
}

.semis-trigger {
    background: #8d6e63; /* Couleur terre pour le semis */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
    transition: 0.3s;
    box-shadow: 0 3px 0 #6d5249;
}

.semis-trigger:hover { background: #7a5e54; transform: translateY(1px); box-shadow: 0 1px 0 #6d5249; }

.semis-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    background: white;
    border-radius: 12px;
    margin-top: 15px;
}

.semis-content.active {
    max-height: 700px; /* Assez pour l'iframe */
    border: 2px solid #8d6e63;
    padding: 10px;
}

.semis-iframe {
    width: 100%;
    height: 600px;
    border: none;
    border-radius: 8px;
}

/* Conteneur pour mettre les éléments en ligne */
.parent-federated {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 0.85rem;
}

/* Style spécifique pour le lien IndieWeb */
.indieweb-link {
  display: flex;
  align-items: center;
  color: #f09128;
  text-decoration: none;
}

/* Gestion de l'image pour éviter les déformations */
.img-indieweb {
  height: 15px;
  width: auto;
  margin-right: 5px;
  vertical-align: middle;
}

/* Gestion de l'image pour éviter les déformations */
.img-partenaires {
  height: 25px;
  width: auto;
  margin-right: 5px;
  vertical-align: middle;
}

/* AGENDA */
/* Conteneur principal centré */
.agenda-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre horizontalement le contenu du bloc */
    width: 100%;
    margin: 15px 0;
    font-size: 0.85em;
    color: #5d4037;
}

.agenda-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block; /* Permet au bloc de ne prendre que la largeur nécessaire */
    text-align: left; /* Garde le texte aligné à gauche à l'intérieur du bloc centré */
}

.agenda-list li {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center; /* Centre les éléments à l'intérieur de la ligne */
    gap: 10px;
}

.agenda-time {
    font-family: monospace;
    background: rgba(141, 110, 99, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    color: #8d6e63;
    font-weight: bold;
    white-space: nowrap;
}

.agenda-link {
    color: #3e2723;
    text-decoration: none;
    border-bottom: 1px dotted rgba(62, 39, 35, 0.4);
    transition: all 0.2s;
}

.agenda-link:hover {
    color: #1b5e20;
    border-bottom-style: solid;
}