/* --- Définition de la police Material Symbols (Hors Ligne avec TTF Variable) --- */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700; /* La police variable TTF supporte cette plage de poids */
    font-display: block;  /* Assure que l'icône est rendue dès que possible */
    /* Assurez-vous que le nom du fichier ici correspond EXACTEMENT au nom de votre fichier TTF */
    src: url('fonts/MaterialSymbolsOutlined-VariableFont_FILL,GRAD,opsz,wght.ttf') format('truetype');
  }
  
  /* --- Styles de base pour Material Symbols --- */
  /* Cette section reste la même que dans ma réponse précédente, 
     elle utilise la police définie ci-dessus. */
  .material-symbols-outlined {
    font-family: 'Material Symbols Outlined'; /* Utilise la police locale définie ci-dessus */
    font-weight: normal; 
    font-style: normal;
    font-size: 24px;  
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility; 
  
    /* Paramètres de variation par défaut (style "Outlined" classique) */
    font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24;
  }
  
  /* ... tout le reste de votre fichier style.css ... */
/* --- Réinitialisation et Base --- */
*, *::before, *::after {
    box-sizing: border-box;
}
  
  html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background-color: #000;
      -webkit-tap-highlight-color: transparent;
  }
  
  .mobile-container {
      width: 100%;
      max-width: 100vw;
      height: 100%;
      max-height: 100vh;
      background-color: #1c1c1e;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
  }
  
  .screen {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      color: #fff;
      width: 100%;
  }
  
  .icon-button {
      background: none;
      border: none;
      color: #007aff;
      padding: 8px;
      cursor: pointer;
  }
  .icon-button .material-symbols-outlined { /* Cible les icônes dans les icon-button */
      font-size: 26px; /* Ajuster si besoin pour les boutons d'icône spécifiques */
      font-variation-settings: 'opsz' 26; /* Ajuster la taille optique aussi */
  }
  
  /* --- Écran d'accueil (#home-screen) --- */
  #home-screen {
      position: relative;
      padding: 0;
      overflow: hidden;
      background-image: url("homeScreenJaime.jpg");
      background-size: cover;       /* Assure que l'image couvre toute la zone */
      background-position: center;  /* Centre l'image */
      background-repeat: no-repeat; /* Empêche la répétition de l'image si elle est plus petite que l'écran */
  }
  
  #home-screen .status-bar {
      padding: 10px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 1em;
      color: #fff;
      background-color: rgba(0,0,0,0.25);
      position: relative;
  }
  #home-screen .status-bar .status-icons .material-symbols-outlined {
      margin-left: 8px;
      font-size: 30px; /* Taille pour les icônes de la barre de statut */
      font-variation-settings: 'opsz' 20;
  }
  
  
  #home-screen .app-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px;
      padding: 20px;
      flex-grow: 1;
      align-content: flex-start;
      overflow-y: auto;
      position: relative;
  }
  
  #home-screen .app-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: rgba(0, 0, 0, 0.5); /* OPACITÉ AUGMENTÉE (par exemple à 0.3) */
    border-radius: 22%;
    cursor: pointer;
    transition: background-color 0.2s;
    padding: 5px;
}
#home-screen .app-icon:hover {
    background-color: rgba(255, 255, 255, 0.45); /* OPACITÉ AUGMENTÉE POUR LE SURVOL (par exemple à 0.45) */
}
  #home-screen .app-icon .material-symbols-outlined {
      font-size: clamp(38px, 7vw, 42px); /* Taille responsive des icônes d'apps */
      font-variation-settings: 'opsz' clamp(30, 7vw, 42); /* Opsz suit la font-size */
      color: #fff;
  }
  
  /* --- Dock avec Glassmorphisme --- */
  #home-screen .dock {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 12px 15px 18px 15px;

    background-color: rgba(255, 255, 255, 0.1); /* COULEUR DE FOND ACTUELLE */
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 -2px 15px rgba(0,0,0,0.1);

    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    flex-shrink: 0;
    position: relative;
}

#home-screen .dock-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Suppression de la hauteur fixe pour que l'aspect-ratio fonctionne avec la largeur de la grille */
    /* height: 64px; */ 
    
    aspect-ratio: 1.1 / 1; /* Largeur est 1.1 fois la hauteur. Si vous voulez plus haut que large, mettez 1 / 1.1 */
    
    background-color: rgba(70, 70, 70, 0.6); /* Exemple: un gris foncé semi-transparent pour le fond */
    border-radius: 16px; /* Rayon pour les coins arrondis. Ajustez selon votre préférence. Ex: 22% pour un style "squircle" */
    
    padding: 8px; /* Espace entre le bord de l'icône et le glyphe à l'intérieur */
    cursor: pointer;
    transition: transform 0.2s ease-out, background-color 0.2s ease-out; /* Ajout de transition pour le fond */
    overflow: hidden; /* Au cas où l'icône interne serait trop grande */
}

#home-screen .dock-icon:hover {
    /* background-color: rgba(90, 90, 90, 0.7); */ /* Optionnel: léger changement de fond au survol */
    transform: translateY(-2px) scale(1.05); /* Maintenir l'effet de survol et ajouter un léger scale */
}

/* La taille de l'icône (glyphe) à l'intérieur reste contrôlée par cette règle : */
#home-screen .dock-icon .material-symbols-outlined { 
    font-size: clamp(38px, 7vw, 45px);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' clamp(38, 7vw, 45);
    color: #fff;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
    text-shadow: 
        -1px -1px 0 rgba(0, 0, 0, 0.4),
         1px -1px 0 rgba(0, 0, 0, 0.4),
        -1px  1px 0 rgba(0, 0, 0, 0.4),
         1px  1px 0 rgba(0, 0, 0, 0.4),
         0px  0px 1px rgba(0, 0, 0, 0.2);
}
  
  /* --- Écran du clavier téléphonique (#dialer-screen) --- */
  #dialer-screen {
      background-color: #1c1c1e;
      padding: 15px;
      justify-content: space-between;
      overflow: hidden;
  }
  
  .dialer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      flex-shrink: 0;
  }
  .dialer-header .icon-button .material-symbols-outlined {
      font-size: 28px; /* Taille pour les icônes de l'entête du dialer */
      font-variation-settings: 'opsz' 28;
      color: #007aff;
  }
  .dialer-header .icon-button#dialer-delete-char .material-symbols-outlined {
      color: #8e8e93;
  }
  
  
  .dialer-display {
      flex-grow: 1;
      font-size: clamp(2em, 8vw, 3em);
      text-align: center;
      color: #fff;
      min-height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: 1px;
      padding: 0 5px;
      word-break: break-all;
      overflow-wrap: break-word;
      line-height: 1.2;
      flex-shrink: 1;
      overflow-y: auto;
  }
  
  .keypad {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(8px, 2vw, 12px);
      padding: 15px 0px;
      flex-shrink: 0;
  }
  
  .keypad-button {
    aspect-ratio: 1 / 1; /* Pour des boutons parfaitement ronds (carrés avant border-radius) */
    width: clamp(65px, 18vw, 80px); /* Taille des boutons, réactive. Ajustez min/max si besoin. */
    /* min-width et max-width ne sont plus nécessaires si width est bien défini */
    height: auto; /* La hauteur sera déterminée par la largeur et l'aspect-ratio */
    margin: 0 auto; /* Centrer les boutons dans leur cellule de grille */
    border-radius: 50%; /* Assure qu'ils sont ronds */
    border: none;
    background-color: #3a3a3c;
    color: #fff;
    font-size: clamp(1.8em, 6vw, 2.5em); /* Taille de la police augmentée */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: background-color 0.1s;
    position: relative;
    padding: 5px; /* Garder un petit padding si nécessaire */
}
.keypad-button:active {
    background-color: #5c5c5e;
}
.keypad-subtext { /* Ajuster la position du subtext si les boutons grandissent */
    font-size: clamp(0.3em, 1.5vw, 0.38em); /* Légère adaptation si besoin */
    /* ... autres styles du subtext ... */
    bottom: 15%; /* Peut nécessiter un ajustement en fonction de la nouvelle taille */
}
/* ... (style pour keypad-button[data-value="0"] .keypad-subtext) ... */
  
  
  .dialer-actions {
      display: flex;
      justify-content: center;
      padding: 15px 0 5px 0;
      flex-shrink: 0;
  }
  
.fab-button {
    width: clamp(60px, 15vw, 70px);
    height: clamp(60px, 15vw, 70px);
    border-radius: 50%;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    /* MODIFIÉ : Ajout de 'transform' à la transition et ajustement de la durée si souhaité */
    transition: background-color 0.15s ease-out, transform 0.15s ease-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.fab-button .material-symbols-outlined {
    font-size: clamp(28px, 7vw, 34px); /* Taille des icônes dans les FABs */
    font-variation-settings: 'opsz' clamp(28, 7vw, 34);
}
  
  .call-button {
      background-color: #34c759;
  }
  .call-button:active {
      background-color: #2aa14a;
  }
  
  /* --- Écran en cours d'appel (#in-call-screen) --- */
  #in-call-screen {
      background-color: #1c1c1e;
      color: white;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      overflow: hidden;
  }
  
  .in-call-info {
      text-align: center;
      margin-top: clamp(5vh, 10vh, 10vh);
      flex-shrink: 0;
      width: 100%;
  }
  .in-call-status {
      font-size: 0.9em;
      color: #8e8e93;
      margin-bottom: 5px;
  }
  .in-call-number {
      font-size: clamp(1.8em, 7vw, 2.5em);
      letter-spacing: 1px;
      margin-bottom: 10px;
      word-break: break-all;
      overflow-wrap: break-word;
  }
  .in-call-timer {
      font-size: 1em;
      color: #8e8e93;
  }
  
  .in-call-options {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(15px, 4vw, 20px);
      width: 100%;
      max-width: 360px;
      padding: 20px 0;
      margin: auto 0;
      flex-grow: 1;
      align-content: center;
      overflow-y: auto;
  }
  
  .in-call-option-button {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #3a3a3c;
      border-radius: 15px;
      padding: clamp(10px, 3vw, 15px) 5px;
      cursor: pointer;
      transition: background-color 0.2s;
      text-align: center;
      aspect-ratio: 1 / 1;
      min-height: 70px;
  }
  .in-call-option-button:active {
      background-color: #5c5c5e;
  }
  .in-call-option-button .material-symbols-outlined {
      font-size: clamp(26px, 6vw, 32px); /* Icônes des options d'appel */
      font-variation-settings: 'opsz' clamp(26, 6vw, 32);
      margin-bottom: 5px;
  }
  .in-call-option-button span {
      font-size: clamp(0.7em, 2.5vw, 0.8em);
      line-height: 1.2;
  }
  
  .in-call-actions {
      display: flex;
      justify-content: center;
      padding: 10px 0 20px 0;
      width: 100%;
      flex-shrink: 0;
  }
  
  .hang-up-button {
      background-color: #ff3b30;
  }
  .hang-up-button:active {
      background-color: #d92c23;
  }
  /* --- Écran des Contacts (#contacts-screen) --- */
  #contacts-screen {
    background-color: #f2f2f7; /* Fond clair typique pour listes */
    color: #000;
    padding: 0; 
    /* display: flex; et flex-direction: column; sont hérités de .screen */
    /* Retirez overflow: hidden; pour voir si la liste apparaît. */
    /* overflow: hidden; */ 
    /* Si la liste doit scroller, c'est .contacts-list qui a overflow-y: auto */
    /* Assurons-nous que la hauteur est bien gérée par flexbox */
    height: 100%; /* Force l'écran à prendre la hauteur de son conteneur flex (.mobile-container) */
}

.contacts-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #d1d1d6;
    position: sticky; /* Pour que le header reste en haut lors du scroll de la liste */
    top: 0;
    z-index: 10;
    flex-shrink: 0; /* Empêche le header de rétrécir */
}
.contacts-header h2 {
    margin: 0 auto 0 15px; /* Marge à gauche du bouton retour, et centrage horizontal si pas de bouton retour */
    font-size: 1.1em;
    font-weight: 600;
}
.contacts-header .icon-button .material-symbols-outlined {
    font-size: 28px;
    color: #007aff;
}
/* Si vous ajoutez un champ de recherche plus tard :
#contact-search {
    width: 100%;
    padding: 8px 12px;
    margin: 10px 15px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 1em;
}
*/

.contacts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto; /* Permet le défilement de la liste des contacts */
    flex-grow: 1; /* Prend l'espace restant */
    /* Ajoutez une couleur de fond temporaire pour déboguer si la liste est vide mais prend de la place */
    /* background-color: lightblue; */ /* À supprimer après test */
}

.contact-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid #e5e5ea;
    cursor: default; /* Le curseur sera sur le bouton d'appel */
}
.contact-item:last-child {
    border-bottom: none;
}
.contact-item .contact-info {
    display: flex;
    flex-direction: column;
}
.contact-item .contact-name {
    font-size: 1em;
    font-weight: 500;
    margin-bottom: 2px;
}
.contact-item .contact-phone {
    font-size: 0.85em;
    color: #666;
}
.contact-item .call-contact-button {
    background-color: #34c759; /* Vert comme le bouton d'appel */
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
}
.contact-item .call-contact-button:hover {
    background-color: #2aa14a;
}
.contact-item .call-contact-button .material-symbols-outlined {
    font-size: 22px;
}


/* --- Styles pour le Pop-up --- */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fond semi-transparent */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Au-dessus de tout */
}

.popup-content {
    background-color: #fff;
    color: #000;
    padding: 25px 30px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    max-width: 80%;
}
.popup-content p {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.1em;
}
.popup-content button {
    background-color: #007aff;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s;
}
.popup-content button:hover {
    background-color: #005bb5;
}
/* ... styles existants pour .contacts-header h2 ... */

.contacts-header #contact-search-input {
    flex-grow: 1; /* Prend l'espace restant dans le header */
    margin-left: 15px; /* Espace après le titre "Contacts" */
    padding: 8px 12px;
    border-radius: 20px; /* Coins arrondis */
    border: 1px solid #d1d1d6; /* Bordure subtile */
    font-size: 0.9em;
    outline: none; /* Supprime le contour bleu au focus sur certains navigateurs */
}
.contacts-header #contact-search-input:focus {
    border-color: #007aff; /* Change la couleur de la bordure au focus */
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2); /* Léger halo au focus */
}

/* Ajustement pour que le titre et la recherche cohabitent bien */
.contacts-header {
    /* ... vos styles existants ... */
    padding: 10px; /* Ajuster le padding si besoin */
}
.contacts-header h2 {
    /* margin: 0 auto 0 15px; */ /* L'ancien margin pourrait ne plus être idéal */
    margin: 0 10px 0 10px; /* Espacement autour du titre */
    white-space: nowrap; /* Empêche le titre de passer à la ligne */
}

/*###derniers ajouts*/
#home-screen .status-bar .network-name {
    font-weight: 500; /* Un peu plus gras pour se distinguer */
    margin-right: 10px; /* Ajoute un petit espace avant les icônes si elles étaient trop proches */
    /* Pour gérer les noms de réseau potentiellement longs sur de petits écrans : */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Vous pouvez ajouter une largeur maximale si nécessaire, mais flexbox devrait aider */
    /* max-width: 150px; */ /* Exemple de largeur maximale */
}

#home-screen .status-bar .status-icons {
    /* S'assurer que ce groupe d'icônes ne prend pas toute la place si le nom est court */
    flex-shrink: 0; 
}

/* Ajustement du conteneur .status-bar si besoin pour que flexbox fonctionne bien
   avec le nouveau contenu. Normalement, les styles existants devraient suffire. */
#home-screen .status-bar {
    padding: 10px 12px; /* Ajuster légèrement le padding horizontal si besoin */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.80em; /* Légère réduction pour accommoder plus de texte */
    color: #fff;
    background-color: rgba(0,0,0,0.25);
    position: relative;
}
/* --- Animation de chargement pour l'appel (Petits Cercles) --- */
.loading-dots {
    display: flex; /* Caché/Affiché par JS en changeant cette propriété */
    justify-content: center;
    align-items: center;
    margin-top: 15px; /* Espace sous le nom/numéro de l'appelant */
    height: 20px;     /* Hauteur pour contenir les points */
}

.loading-dots .dot {
    height: 10px; /* Taille des cercles */
    width: 10px;  /* Taille des cercles */
    margin: 0 4px; /* Espacement entre les cercles */
    background-color: #8e8e93; /* Couleur des cercles */
    border-radius: 50%; /* Pour faire des cercles parfaits */
    display: inline-block;
    animation: loading-dots-bounce 1.4s infinite ease-in-out both;
}

/* Animation décalée pour chaque point */
.loading-dots .dot:nth-child(1) {
    animation-delay: -0.32s;
}

.loading-dots .dot:nth-child(2) {
    animation-delay: -0.16s;
}

/* Keyframes pour l'animation de "rebond" ou de "pulsation" */
@keyframes loading-dots-bounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  } 40% {
    transform: scale(1.0);
    opacity: 1;
  }
}

/* --- Styles for Active Speaker Button --- */
.in-call-option-button.speaker-active {
    background-color: #fff; /* Example: White background when active */
    color: #3a3a3c; /* Example: Dark icon/text color when active */
}

.in-call-option-button.speaker-active .material-symbols-outlined {
    color: #3a3a3c; /* Ensure icon color also inverts */
}

/* Optional: If you want the text below the icon to also change color */
.in-call-option-button.speaker-active span {
    color: #3a3a3c;
}
/* Classe pour l'état pressé du bouton raccrocher, gérée par JavaScript */
.hang-up-button-pressed {
    background-color: #9c1a13; /* Un rouge légèrement plus foncé ou la couleur de votre choix */
    transform: scale(1.05);    /* Agrandissement au clic */
    /* Vous pouvez ajouter d'autres effets si vous le souhaitez, par exemple : */
    /* opacity: 0.8; */
}
.popup-content button
{
    background-color: #9c1a13;
}
#nosignal
{
    font-size: 50px;
}