.custom_youtube_modal_container_unique {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 99999;
}

.custom_youtube_modal_inner_box_specific {
    position: absolute;
    top: 45%; /* Légèrement plus haut pour une meilleure visibilité */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85vw; /* Utilisation de vw au lieu de % */
    height: 80vh; /* Ajout d'une hauteur en vh */
    min-height: 480px;
    max-height: 90vh;
    padding: 0; /* Suppression du padding */
}

.custom_youtube_modal_close_btn_unique {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 36px;
    font-weight: bold;
    cursor: pointer;
    z-index: 100000;
}

#youtube_player_container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Styles spécifiques pour l'iframe */
#youtube_player_container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Ajustements pour différentes tailles d'écran */
@media screen and (max-width: 768px) {
    .custom_youtube_modal_inner_box_specific {
        width: 95vw;
        height: 40vh;
    }
}

@media screen and (min-width: 1600px) {
    .custom_youtube_modal_inner_box_specific {
        width: 75vw;
        height: 85vh;
    }
}


.etherealNotificationCard {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 30px 40px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1),
                0 8px 20px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 480px;
    text-align: center;
    animation: crystallineEntrance 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(22, 93, 255, 0.15);
}

.luminousBackdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(3px);
    z-index: 999;
    animation: nebulousAppear 0.3s ease-out;
}

@keyframes nebulousAppear {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes crystallineEntrance {
    0% { 
        opacity: 0;
        transform: translate(-50%, -45%);
    }
    100% { 
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.etherealNotificationCard h3 {
    margin: 0 0 15px 0;
    font-size: 1.8em;
    font-weight: 700;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.3;
}

.etherealNotificationCard p {
    margin: 0;
    line-height: 1.7;
    font-size: 1.1em;
    color: #374151;
    font-weight: 400;
}

.celestialDismissButton {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.06);
    border: none;
    color: #4b5563;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.2s ease;
}

.celestialDismissButton:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(1.1);
}

.notificationContent {
    position: relative;
    padding: 10px;
}

.etherealNotificationCard::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.5), rgba(79, 70, 229, 0.5));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

@media (max-width: 640px) {
    .etherealNotificationCard {
        width: 90%;
        padding: 25px 20px;
    }
    
    .etherealNotificationCard h3 {
        font-size: 1.5em;
    }
    
    .etherealNotificationCard p {
        font-size: 1em;
    }
}




.crystallineCard {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 30px 40px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1),
                0 8px 20px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 480px;
    text-align: center;
    animation: aetherealFloat 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(22, 93, 255, 0.15);
}

.mistVeil {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(3px);
    z-index: 999;
    animation: vaporize 0.3s ease-out;
}

@keyframes vaporize {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes aetherealFloat {
    0% { 
        opacity: 0;
        transform: translate(-50%, -45%);
    }
    100% { 
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.crystallineCard h3 {
    margin: 0 0 15px 0;
    font-size: 1.8em;
    font-weight: 700;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.3;
}

.crystallineCard p {
    margin: 0;
    line-height: 1.7;
    font-size: 1.1em;
    color: #374151;
    font-weight: 400;
}

.prismClose {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.06);
    border: none;
    color: #4b5563;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.2s ease;
}

.prismClose:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(1.1);
}

.notificationContent {
    position: relative;
    padding: 10px;
}

.crystallineCard::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.5), rgba(79, 70, 229, 0.5));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

@media (max-width: 640px) {
    .crystallineCard {
        width: 90%;
        padding: 25px 20px;
    }
    
    .crystallineCard h3 {
        font-size: 1.5em;
    }
    
    .crystallineCard p {
        font-size: 1em;
    }
}
#quote-content {
    padding: 25px;
    border-radius: 15px;
    margin: 20px 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
    backdrop-filter: brightness(0.95);
}

#quote-content:hover {
    transform: translateY(-5px);
}

#quote-content p {
    color: white;
    text-shadow: 
        2px 2px 4px rgba(0,0,0,0.3),
        -1px -1px 0 rgba(0,0,0,0.3),
        1px -1px 0 rgba(0,0,0,0.3),
        -1px 1px 0 rgba(0,0,0,0.3);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
    margin: 0;
    padding: 15px;
    letter-spacing: 0.3px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

#quote-content::before {
    content: '"';
    font-size: 4rem;
    position: absolute;
    left: 20px;
    top: 0;
    color: rgba(255,255,255,0.2);
    font-family: Georgia, serif;
}

#quote-content::after {
    content: '"';
    font-size: 4rem;
    position: absolute;
    right: 20px;
    bottom: 0;
    color: rgba(255,255,255,0.2);
    font-family: Georgia, serif;
}

#quote-title {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
#quote-content {
    /* ... autres styles existants ... */
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}
.quote-carousel {
    position: relative;
}

.quote-dots {
    text-align: center;
    margin-top: 10px;
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 0 5px;
    cursor: pointer;
}

.dot.active {
    background-color: white;
}

#quote-content {
    transition: opacity 0.3s ease;
}
.mascot {
    position: fixed;
    top: 130px;
    right: 80px;
    z-index: 1000;
    cursor: pointer;
    animation: bouncemas 2s infinite, fadeOutmas 1s ease 5s forwards;
    font-size: 30px;
    display: flex; /* Ajouté */
    flex-direction: column; /* Ajouté */
    align-items: flex-end; /* Ajouté */
    width: auto; /* Ajouté */
}

.mascot-speech {
    position: relative; /* Changé de absolute à relative */
    background-color: #fff;
    padding: 8px;
    border-radius: 10px;
    font-size: 12px;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    margin-bottom: 10px; /* Ajouté */
    min-width: 150px; /* Ajouté */
    text-align: center; /* Ajouté */
}

.mascot-speech:after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 20px;
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #fff transparent transparent;
}

@keyframes bouncemas {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes fadeOutmas {
    to { opacity: 0; visibility: hidden; }
}



.aaino_notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  color: #2d3436;
  padding: 2.5rem;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.1),
              0 4px 12px rgba(0,0,0,0.05),
              0 0 0 1px rgba(0,0,0,0.03);
  max-width: 90%;
  width: 450px;
  text-align: center;
  animation: aainoSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
  border: 1px solid rgba(255,255,255,0.1);
}

.aaino_notification h4 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  background: linear-gradient(135deg, #2B2F77 0%, #1E69FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}

.aaino_notification p {
  font-size: 1.15rem;
  line-height: 1.7;
  margin-bottom: 2rem;
  color: #4a4a4a;
  font-weight: 400;
}

.aaino_close_btn {
  background: linear-gradient(135deg, #1E69FF 0%, #2B2F77 100%);
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 100px;
  color: white;
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(30, 105, 255, 0.3);
}

.aaino_close_btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(30, 105, 255, 0.4);
}

.aaino_close_btn:active {
  transform: translateY(0);
}

@keyframes aainoSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -45%);
  } 
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* Ajout de l'overlay pour fermer en cliquant ailleurs */
.aaino_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(3px);
  z-index: 999;
  animation: fadeInaaino 0.3s ease;
}

@keyframes fadeInaaino {
  from {opacity: 0;}
  to {opacity: 1;}
}


.ethereal-email-link {
    display: inline-flex;
    align-items: center;
    margin-top: 20px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.ethereal-email-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
}

.email-icon {
    margin-right: 8px;
    font-size: 1.1em;
}

.etherealNotificationCard p {
    white-space: pre-line;
    margin-bottom: 5px;
}
.etherealNotificationCard {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 30px 40px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1),
                0 8px 20px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 480px;
    text-align: center;
    animation: crystallineEntrance 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(22, 93, 255, 0.15);
}

.luminousBackdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(3px);
    z-index: 999;
    animation: nebulousAppear 0.3s ease-out;
}

@keyframes nebulousAppear {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes crystallineEntrance {
    0% { 
        opacity: 0;
        transform: translate(-50%, -45%);
    }
    100% { 
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.etherealNotificationCard h3 {
    margin: 0 0 15px 0;
    font-size: 1.8em;
    font-weight: 700;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.3;
}

.etherealNotificationCard p {
    margin: 0;
    line-height: 1.7;
    font-size: 1.1em;
    color: #374151;
    font-weight: 400;
}

.celestialDismissButton {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.06);
    border: none;
    color: #4b5563;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.2s ease;
}

.celestialDismissButton:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(1.1);
}

.notificationContent {
    position: relative;
    padding: 10px;
}

.etherealNotificationCard::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.5), rgba(79, 70, 229, 0.5));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

@media (max-width: 640px) {
    .etherealNotificationCard {
        width: 90%;
        padding: 25px 20px;
    }
    
    .etherealNotificationCard h3 {
        font-size: 1.5em;
    }
    
    .etherealNotificationCard p {
        font-size: 1em;
    }
}

.ethereal-email-link {
    display: inline-flex;
    align-items: center;
    margin-top: 20px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.ethereal-email-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
}

.email-icon {
    margin-right: 8px;
    font-size: 1.1em;
}

.etherealNotificationCard p {
    white-space: pre-line;
    margin-bottom: 5px;
}
.celestialEmailLink {
    display: inline-flex;
    align-items: center;
    margin-top: 25px;
    padding: 12px 25px;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    border-radius: 30px;
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.2);
}

.celestialEmailLink:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
}

.emailIcon {
    margin-right: 10px;
    font-size: 1.2em;
}

.emailText {
    font-size: 1.1em;
    letter-spacing: 0.5px;
}

@media (max-width: 640px) {
    .celestialEmailLink {
        padding: 10px 20px;
    }
    
    .emailText {
        font-size: 1em;
    }
}





#hideControl {
    position: fixed;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: none;
    cursor: pointer;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 8px;
}

#hideControl:hover {
    transform: translateY(-50%) scale(1.1);
    background: rgba(0, 0, 0, 0.7);
}

#hideControl img {
    width: 20px;
    height: 20px;
    transition: all 0.3s ease;
    filter: invert(1);
}

.elements-hidden .division1,
.elements-hidden .division2,
.elements-hidden .contact-icons,
.elements-hidden .mascot,
.elements-hidden .floating-publish-button,
.elements-hidden #language-selector {
    display: none !important;
}


.auth-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.auth-modal-content {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
}



.auth-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-buttons button {
    padding: 0.8rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.email-auth {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.email-auth input {
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.user-status {
    color: #00aa00;
    font-size: 0.8rem;
}

#floating-publish-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.publish-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #007bff;
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: transform 0.3s;
}

.publish-button:hover {
    transform: scale(1.1);
}

.publish-menu {
    position: absolute;
    bottom: 70px;
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: none;
    min-width: 200px;
}

.menu-item {
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.3s;
}

.menu-item:hover {
    background: #f0f0f0;
}

.show-menu {
    display: block;
}
.floating-publish-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #007bff;
  color: white;
  border: none;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 1000;
}

.publish-menu {
  position: fixed;
  bottom: 90px;
  right: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 999;
}

.publish-menu button {
  padding: 8px 16px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
}

.publish-menu button:hover {
  background: #f0f0f0;
}

.hidden {
  display: none;
}

.author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}

.author-link {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: inherit;
}

.author-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.publication-date {
    color: #666;
    font-size: 0.9em;
}

.manage-publication {
    position: relative;
    margin-left: auto;
}

.manage-btn {
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.6;
    font-size: 20px;
    padding: 5px;
}

.manage-options {
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.manage-options.hidden {
    display: none;
}

.manage-options button {
    padding: 8px 16px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
}

.manage-options button:hover {
    background: #f5f5f5;
}

.delete-btn {
    color: #dc3545;
}


/* Style général des liens de contact */
.contact-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin: 5px 0;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* Icônes des contacts */
.contact-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}

/* Couleurs spécifiques pour chaque plateforme */
.contact-link.mail .contact-icon {
  background-color: #D44638;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23FFFFFF" viewBox="0 0 24 24"><path d="M12 13.5l-9-6V18h18V7.5l-9 6zm0-2.83L21 6H3l9 4.67z"/></svg>');
}

.contact-link.facebook .contact-icon {
  background-color: #1877F2;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23FFFFFF" viewBox="0 0 24 24"><path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.99 3.66 9.13 8.44 9.88v-6.99H8.9v-2.89h1.54V9.88c0-1.54.94-2.39 2.31-2.39.66 0 1.35.12 1.35.12v1.49h-.76c-.75 0-.99.46-.99.93v1.11h1.69l-.27 2.89h-1.42V22C18.34 21.13 22 16.99 22 12z"/></svg>');
}

.contact-link.twitter .contact-icon {
  background-color: #1DA1F2;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23FFFFFF" viewBox="0 0 24 24"><path d="M23 3a10.9 10.9 0 01-3.14 1.53A4.48 4.48 0 0012 6a4.48 4.48 0 00-4.47 4.47c0 .35.04.7.1 1.03A12.94 12.94 0 011.64 4.16a4.48 4.48 0 00-.61 2.25 4.48 4.48 0 001.98 3.73 4.47 4.47 0 01-2.03-.56v.06a4.48 4.48 0 003.57 4.39 4.48 4.48 0 01-2.02.08 4.48 4.48 0 004.18 3.1 9.01 9.01 0 01-5.57 1.92A12.93 12.93 0 0012 21a12.93 12.93 0 0012.93-12.93c0-.2-.01-.4-.02-.6A9.22 9.22 0 0023 3z"/></svg>');
}

.contact-link.github .contact-icon {
  background-color: #24292E;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23FFFFFF" viewBox="0 0 24 24"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.757-1.333-1.757-1.087-.744.084-.729.084-.729 1.205.084 1.84 1.236 1.84 1.236 1.07 1.835 2.807 1.305 3.495.998.107-.775.417-1.305.76-1.605-2.665-.3-5.467-1.332-5.467-5.93 0-1.31.47-2.38 1.235-3.22-.123-.303-.535-1.523.117-3.176 0 0 1.008-.322 3.3 1.23a11.484 11.484 0 013.003-.404c1.018.005 2.043.138 3.003.404 2.29-1.552 3.3-1.23 3.3-1.23.653 1.653.24 2.873.118 3.176.765.84 1.235 1.91 1.235 3.22 0 4.61-2.807 5.625-5.478 5.92.43.372.823 1.1.823 2.22 0 1.606-.014 2.898-.014 3.293 0 .322.216.694.825.576C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>');
}

.contact-link.whatsapp .contact-icon {
  background-color: #25D366;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23FFFFFF" viewBox="0 0 24 24"><path d="M20.52 3.478a11.84 11.84 0 00-16.777 0c-3.27 3.27-4.053 8.297-1.886 12.307l-1.306 4.772 4.88-1.282a11.84 11.84 0 005.98 1.595h.006c6.568 0 11.924-5.356 11.924-11.924 0-3.194-1.245-6.197-3.52-8.472zm-8.4 18.212h-.006a10.394 10.394 0 01-5.458-1.54l-.392-.246-3.036.797.793-3.01-.256-.395a10.394 10.394 0 011.54-5.458A10.45 10.45 0 0112.12 2.6c2.79 0 5.41 1.086 7.39 3.066a10.45 10.45 0 013.066 7.39c0 5.79-4.715 10.505-10.505 10.505zm5.615-7.422c-.303-.152-1.79-.883-2.067-.985-.277-.101-.48-.153-.683.152-.203.304-.783.985-.96 1.188-.177.203-.355.228-.658.076-.303-.152-1.28-.47-2.44-1.497-.902-.8-1.51-1.78-1.688-2.083-.177-.304-.019-.468.133-.62.137-.136.303-.355.455-.532.152-.177.203-.304.303-.507.101-.203.05-.38-.025-.532-.075-.152-.683-1.643-.937-2.253-.246-.59-.496-.506-.683-.506h-.582c-.203 0-.532.076-.812.38-.278.304-1.067 1.04-1.067 2.536s1.093 2.944 1.243 3.15c.152.203 2.15 3.288 5.215 4.609.73.314 1.3.501 1.744.639.732.228 1.397.196 1.922.118.586-.089 1.79-.73 2.045-1.432.252-.701.252-1.302.177-1.432-.075-.127-.277-.202-.58-.355z"/></svg>');
}

.contact-link.telegram .contact-icon {
  background-color: #0088CC;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23FFFFFF" viewBox="0 0 24 24"><path d="M9.85 17.11L9.2 20.39c.485.07.693-.213.96-.46l2.3-2.2 4.77 3.5c.87.478 1.5.23 1.71-.8l3.1-14.58c.27-1.25-.43-1.75-1.3-1.48L2.28 9.127C1.08 9.54 1.1 10.3 2 10.6l4.62 1.44 10.7-5.67c.5-.27.96-.12.58.15"/></svg>');
}

.contact-link.phone .contact-icon {
  background-color: #4CAF50;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23FFFFFF" viewBox="0 0 24 24"><path d="M6.62 10.79a15.466 15.466 0 006.59 6.59l2.2-2.2a1 1 0 011.07-.21c1.12.45 2.33.71 3.59.71a1 1 0 011 1v3.5a1 1 0 01-1 1C10.95 21 3 13.05 3 3.5a1 1 0 011-1H7.5a1 1 0 011 1c0 1.26.26 2.47.71 3.59a1 1 0 01-.21 1.07l-2.2 2.2z"/></svg>');
}

/* Animation et hover */
.contact-link:hover {
  transform: translateX(5px);
  text-decoration: underline;
}


.contact-info-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: #444;
  margin-bottom: 10px;
}
.connect-section {
  margin: 12px 0;
  padding: 8px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-size: 0.9em;
}

.connect-label {
  color: #666;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  display: inline-block;
}

.connect-details {
  color: #333;
  line-height: 1.4;
}
.connect-section {
  margin: 12px 0;
  padding: 8px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-size: 0.9em;
}

.connect-label {
  color: #666;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  display: inline-block;
}

.connect-details {
  color: #333;
  line-height: 1.4;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.connect-details > * {
  flex: 0 1 auto;
}


.action-icon {
  cursor: pointer;
  font-size: 18px;
  position: relative;
}

.action-menu {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  right: 0;
  top: 20px;
  display: none;
  z-index: 10;
}

.action-menu button {
  display: block;
  padding: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}

.action-menu button:hover {
  background: #f5f5f5;
}

.action-menu.hidden {
  display: none;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.edit-section-name {
  cursor: pointer;
  font-size: 16px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.edit-section-name:hover {
  opacity: 1;
}



.prompt-tip {
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
    text-align: center;
    margin: 0.5rem 0;
}