/* === Styles pour la Section Profil Étendu Sur la page Profil de GUILDE === */
.guild-extended-profile-section {
    /* Styles généraux de la carte déjà appliqués */
}

.guild-extended-profile-section h2 { /* Si vous voulez un titre pour cette section */
    /* Styles de titre de carte existants */
}

/* Vidéo YouTube */
.guild-youtube-video-container {
    position: relative;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000; /* Fond noir pendant le chargement */
    margin-bottom: 20px; /* Espace après la vidéo */
    border-radius: 6px; /* Coins arrondis pour le conteneur vidéo */
}
.guild-youtube-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* S'assurer qu'il n'y a pas de bordure par défaut sur l'iframe */
}

/* Liens Sociaux */
.guild-social-links-container {
    margin-top: 15px;
    text-align: center; /* Centrer les icônes/liens */
}
.guild-social-links-container h4 {
    font-size: 1.1em;
    color: #ddd;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.social-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Aligner les icônes horizontalement */
    justify-content: center; /* Centrer le groupe d'icônes */
    flex-wrap: wrap; /* Passer à la ligne si trop d'icônes */
    gap: 15px; /* Espace entre les icônes */
}
.social-links-list li {
    /* Pas de style nécessaire sur le li directement si display:flex sur ul */
}
.social-link-item {
    display: inline-block;
    transition: transform 0.2s ease-in-out;
}
.social-link-item:hover {
    transform: scale(1.15);
}
.social-icon {
    width: 48px;  /* Taille des icônes sociales */
    height: 48px;
    vertical-align: middle;
    border-radius: 4px; /* Coins légèrement arrondis pour les icônes */
}

/* === Styles pour la Section Profil Étendu Sur la page de gestion des reseaux === */

.manage-guild-social-page-container .management-section { 
margin-bottom: 25px; 
}


.current-large-logo-preview, .current-banner-preview { 
/* Réutiliser les styles de manage_guild_page.php si besoin */
    max-width: 300px; 
	max-height: 150px; 
	display:block; 
	margin-top:5px; 
	border: 1px solid #555;
}

.guild-logo-large-default.manage-preview {
    /* Styles pour le placeholder de logo dans la page de gestion */
    width: 150px; 
	height: 100px; 
	background-color: #272727; 
	display: flex; 
	flex-direction: column;
    align-items: center; 
	justify-content: center; 
	border-radius: 4px; 
	border: 1px solid #444;
    margin-top: 5px;
}

.guild-logo-large-default.manage-preview span { 
font-size: 2.5em; 
color: #4a4a4a; 
}

.manage-guild-social-page-container .management-section.card {
    /* Styles de base pour les sections/cartes (vous en avez peut-être déjà) */
    background-color: #2e2e2e;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    border: 1px solid #404040;
}
.manage-guild-social-page-container .management-section.card h2 {
    margin-top: 0;
    color: #4CAF50;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Grille pour les cartes des liens sociaux */
.social-links-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Cartes responsives */
    gap: 20px; /* Espace entre les cartes de liens sociaux */
}

/* Style pour chaque carte de lien social dans le formulaire */
.form-group.social-management-card {
    background-color: #3a3a3a; /* Fond un peu plus clair pour la carte interne */
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #505050;
    /* Retirer la marge du bas si c'est une carte de la grille */
    margin-bottom: 0; 
}

.social-card-label {
    display: flex; /* Pour aligner icône et texte du label */
    align-items: center;
    font-weight: bold;
    margin-bottom: 8px;
    color: #ddd;
}
.social-config-icon { /* Déjà défini, juste pour rappel */
	width: 48px; 
	height: 48px; 
    vertical-align: middle;
    margin-right: 8px;
}

/* Style pour les champs input dans ces cartes */
.form-group.social-management-card input[type="text"],
.form-group.social-management-card input[type="url"],
.manage-guild-social-page-container input[type="text"]#youtube_video_id { /* Cibler aussi l'ID YouTube */
    width: 100%;
    padding: 10px;
    border: 1px solid #555;
    background-color: #222;
    color: #eee;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
    margin-bottom: 5px; /* Espace avant le <small> */
}
.form-group.social-management-card input[type="text"]:focus,
.form-group.social-management-card input[type="url"]:focus,
.manage-guild-social-page-container input[type="text"]#youtube_video_id:focus {
    border-color: #4CAF50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
    outline: none;
}

.form-group.social-management-card small,
.manage-guild-social-page-container .form-group small { /* Cibler aussi l'aide YouTube */
    font-size: 0.85em;
    color: #aaa;
    display: block; /* Assurer qu'elle est sur sa propre ligne */
    margin-top: 3px;
}

/* Actions du formulaire principal */
.manage-guild-social-page-container .form-actions {
    text-align: right;
    margin-top: 20px;
}