/*PAGE ACCUEIL Recherche et liste)*/

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #ffffff; /* Fond blanc pur comme sur ton design */
}

/* --- La barre tout en haut --- */
.barre-navigation {
  display: flex;
  justify-content: space-between; /* Astuce magique : pousse le logo à gauche et les icônes à droite ! */
  align-items: center;
  padding: 15px 40px;
  background: white;
  margin-bottom: 20px;  /* Ajouté pour espacer du contenu principal */
}

.action-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icones-profil {
  display: flex;
  gap: 5px;
  font-size: 1.5rem;
}

.logo-texte {
  color: #284196;
  font-family: 'Times New Roman', serif;
  font-size: 3rem;
}

.icones-profil span {
  font-size: 1.8rem;
  margin-left: 15px;
  cursor: pointer;
  align-items: end;
}

.icones-profil {
    display: flex;
    gap: 15px; /* Pour mettre un bel espace entre le bonhomme et la roue dentée */
    align-items: center;
}

.lien-icone {
    text-decoration: none; /* Retire le soulignement natif des liens */
    display: inline-block;
    transition: transform 0.2s ease; /* Prépare l'animation douce */
    cursor: pointer; /* Affiche la petite main au survol */
}

/* Le petit effet "Sanarca" au survol */
.lien-icone:hover {
    transform: scale(1.15); /* Fait très légèrement grossir l'emoji */
}

/* --- Le bloc central --- */
.recherche-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100px; /* On descend la barre au milieu de l'écran */
}

h2 {
  color: #284196;
  font-family: 'Times New Roman', serif;
  font-size: 2.2rem;
  font-weight: normal;
  margin-bottom: 20px;
  align-items: center;
}

/* --- La ligne avec le champ et le bouton --- */
.search-container {
  display: flex;
  gap: 10px; /* L'espace entre la barre bleue et le bouton vert */
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.barre-recherche-groupe input {
  width: 450px;
  padding: 15px;
  border: 2px solid #284196;
  border-radius: 20px; /* Ton côté lisse */
  font-size: 1.2rem;
  color: #284196;
  outline: none;
}

/* L'esthétique de ton bouton de recherche */
.bouton-chercher {
  background-color: #9cd871; /* Le beau vert de ta maquette Figma */
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0 40px;
  height: 40px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: 0.3s;
}

.bouton-chercher:hover {
  background-color: #8bc760; /* Un peu plus foncé quand on passe la souris */
}

.search-wrapper {
  position: relative;
  flex: 1;
}

.menu-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  z-index: 1000;
  border: 1px solid #284196;
  border-top: none;
  border-radius: 0 0 15px 15px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  max-height: 200px;
  overflow-y: auto;
}
body {
  margin: 0;
  font-family: 'Quicksand', sans-serif; /* On change la police ici */
  background-color: #ffffff;
}

/* On l'applique aussi spécifiquement aux titres si besoin */
h2, .logo-texte, .bouton-vert {
  font-family: 'Quicksand', sans-serif;
  font-weight: 600; /* Un peu plus épais pour les titres */
}
.form-container {
  width: 550px;
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
  align-items: self-end;
}
.bouton-ajouter {
  background-color: #284196;
  color: white;
  text-decoration: none;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s, trasnform 0.2s;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bouton-ajouter:hover {
  background-color: #1e3274;
  transform: scale(1.02);
}

.plus {
  font-size: 1.4rem;
  line-height: 0;
  margin-bottom: 2px;
}

/*PAGE AJOUT PATIENT (formulaire et anamnèse)*/

* { box-sizing: border-box; }

body { 
    background-color: #f4f7ff; 
    font-family: 'Quicksand', sans-serif; 
    padding: 0; 
    margin: 0;
}

/* LA BOÎTE GÉANTE */
.form-container {
    width: 95% !important; /* Prend presque tout l'écran */
    margin: 0 auto; /* Centre la boîte */
    background: white;
    padding: 40px;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* LE FORMULAIRE QUI S'ÉTIRE */
form { 
    width: 100%; 
}

.champ {
    width: 100%;
    margin-bottom: 25px;
}

.champ input,
.champ textarea {
    width: 100%; /* LA CASE PREND TOUTE LA PLACE */
    padding: 12px;
    border: 1.5px solid #e0e6f5;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.champ input:focus,
.champ textarea:focus {
    border-color: #284196;
    outline: none;
}

label { 
    display: block; 
    color: #284196; 
    font-weight: 600; 
    margin-bottom: 8px; 
}

.section-titre { 
    color: #284196; 
    border-bottom: 2px solid #f4f7ff; 
    padding-bottom: 8px; 
    margin-top: 30px; 
    margin-bottom: 20px;
}

/* LES TITRES DANS LA BOÎTE */
.titre-page {
    color: #284196;
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 2rem;
}

.sous-titre-page {
    color: #6b7280;
    font-size: 1.1rem;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 30px;
}

/* --- LES BOUTONS D'ACTION --- */

.groupe-bouton {
    display: flex;
    justify-content: flex-end; /* Magique : pousse les boutons tout à droite ! */
    gap: 20px; /* L'espace entre Annuler et Créer */
    margin-top: 40px; /* On les détache bien du reste du formulaire */
    padding-top: 20px;
    border-top: 2px solid #f4f7ff; /* Une petite ligne douce pour séparer */
}

/* Le bouton Annuler (Discret mais chic) */
.btn-annuler {
    background-color: transparent;
    color: #6b7280; /* Un gris doux */
    border: 2px solid #e0e6f5; /* Une bordure légère */
    padding: 12px 28px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none; /* Enlève le soulignement du lien */
    display: flex;
    align-items: center;
    transition: all 0.3s ease; /* Rend les animations fluides */
}

/* L'effet quand on survole "Annuler" */
.btn-annuler:hover {
    background-color: #f4f7ff;
    color: #284196; /* Le texte devient bleu */
    border-color: #f4f7ff;
}

/* Le bouton Créer (Celui qui doit attirer l'œil) */
.btn-valider {
    background-color: #284196; /* Ton bleu principal */
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(40, 65, 150, 0.2); /* Une petite ombre bleutée */
    transition: all 0.3s ease;
}

/* L'effet quand on survole "Créer" */
.btn-valider:hover {
    background-color: #1e3275; /* Un bleu un peu plus foncé */
    box-shadow: 0 6px 20px rgba(40, 65, 150, 0.35); /* L'ombre s'agrandit */
    transform: translateY(-2px); /* Le bouton se soulève légèrement, effet garanti ! */
}

/* =========================================
   PAGE FICHE PATIENT
   ========================================= */
.titre-page {
  color: #284196;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 30px;
  text-align: left;
}

.sous-titre-page {
  color: #6b7280;
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 30px;
  margin-top: -20px;
  text-align: left;
}

.contenu-fiche {
    display: block;
    max-width: 1600px;
    margin: 0 auto;
    padding: 30px;
    position: left;
    box-sizing: border-box;
}

.entete-patient {
    display: flex;
    align-items: center;  /* Changé de 'top' à 'center' pour un meilleur alignement */
    gap:0 10px;  /* Réduit l'espace entre les éléments */
    margin-top: 30px;
    color: #284196;
    flex-wrap: wrap;  /* Permet aux éléments de passer à la ligne si nécessaire */
}

.badge-status {
    background-color: #6b8658; /* Ton vert ! */
    color: white;
    padding: 3px 8px !important;  /* Réduit le padding horizontal pour le rendre moins large */
    border-radius: 15px;
    font-size: 0.75rem;  /* Légèrement réduit la taille de police */
    font-weight: 600;
    justify-content: center;    display: inline-block;  /* Permet au padding vertical d'affecter la hauteur */
}

.grille-dossier {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 20px;
}

.bloc-info {
    background: white;
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    border: 1px solid #e0e6f5;
}

.bloc-info h3 {
    margin-top: 0;
    color: #284196;
    border-bottom: 2px solid #f4f7ff;
    padding-bottom: 10px;
}

.timeline {
    margin-top: 40px;
}

.seance-card {
    background: #f9fbff;
    padding: 15px;
    border-left: 4px solid #284196;
    border-radius: 10px;
    margin-bottom: 15px;
}

.date-seance {
    font-weight: 600;
    color: #284196;
    font-size: 0.9rem;
}

.suggestion-item {
  display: block;
  text-decoration: none;
  padding: 12px 20px;
  transition: 0.2s;
}

.suggestion-item:hover {
  background-color: #f4f7ff;
}

.btn-retour-bulle {
  font-family: 'Quicksand', sans-serif; /* Pour garder l'harmonie avec le reste du projet */
  background-color: transparent; /* Fond transparent pour la légèreté */
  color: #6b7280; /* Un gris doux pour le texte */
  border: 1px solid #d1d5db; /* Une bordure fine et discrète */
  padding: 8px 20px; /* Un peu d'espace pour qu'il respire */
  border-radius: 20px; /* Des bords bien arrondis, sans angles agressifs */
  font-size: 0.875rem; /* Légèrement plus petit que les autres boutons pour le différencier */
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease; /* Animation fluide au survol */
  text-decoration: none;
  /* Retiré transform pour que margin-top fonctionne mieux */
  margin-top: 60px;  /* Réduit maintenant que la barre a un margin-bottom */
  margin-bottom: 10px;
}

.btn-retour-bulle:hover {
  background-color: #f3f4f6; /* Un léger fond au survol pour indiquer que c'est cliquable */
  color: #374151; /* Le texte devient bleu pour plus de visibilité */
  border-color: #9ca3af; /* La bordure s'efface pour un look plus doux */
  ;
}

.mode-prive .bloc-info p,
.mode-prive .note-seance {
    filter: blur(5px);
}

.btn-action-discret {
    padding: 6px 10px;  /* Réduit le padding horizontal pour rendre les boutons moins larges */
    border: none;
    border-radius: 20px;
    background-color: #e0f2fe;
    color: #0369a1;
    font-family: 'Quicksand', sans-serif;
    cursor: pointer;
    font-size: 0.85em;  /* Légèrement réduit la taille de police */
    margin-left: 15px;
    transition: all 0.2s;
}

.btn-action-discret:hover {
    background-color: #05537e;
}

/* --- STYLE DU MODE ÉDITION (MODIFIER) --- */

/* Style pour tous les champs de saisie dans les blocs d'info */
.bloc-info input[type="text"],
.bloc-info input[type="date"],
.bloc-info textarea {
    width: 100%;
    padding: 10px 12px;
    margin: 8px 0;
    display: inline-block;
    border: 1.5px solid #e0e6f5; /* Bleu très clair */
    border-radius: 8px;
    font-family: 'Quicksand', sans-serif;
    font-size: 0.95rem;
    color: #333;
    background-color: #fff;
    box-sizing: border-box; /* Pour que le padding ne dépasse pas */
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Effet quand on clique dans une case */
.bloc-info input:focus,
.bloc-info textarea:focus {
    outline: none;
    border-color: #4a90e2; /* Bleu Sanarca */
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

/* Style spécifique pour les étiquettes dans le mode édition */
.bloc-info p {
    font-weight: 600;
    color: #555;
    margin-bottom: 5px;
}

/* Séparateur dans l'anamnèse */
.bloc-info hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 15px 0;
}

/* Style pour le bouton Sauvegarder (quand le texte change) */
#btn-modifier {
    transition: all 0.3s ease;
}

/* Petit changement de couleur quand on est en mode "Sauvegarder" */
#btn-modifier:contains("Sauvegarder") {
    background-color: #27ae60;
    color: white;
}

/* Style des champs de saisie en mode édition */
.bloc-info input, .bloc-info textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #d1d9e6;
    border-radius: 8px;
    font-family: 'Quicksand', sans-serif;
    font-size: 0.875rem;
    background: #fdfdfd;
}

.bloc-info textarea {
    resize: vertical;
    min-height: 80px;
}

/* Style de la timeline (historique) */
.seance-card {
    background: white;
    border: 1px solid #e0e6f5;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 10px;
    border-left: 4px solid #4a90e2; /* Petite barre bleue sur le côté */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.date-seance {
    font-weight: 600;
    color: #4a90e2;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.note-seance {
    color: #333;
    font-size: 0.95rem;
    line-height: 1.4;
    margin-top: 5px;
}

.nouvelle-saisie {
    border: 2px dashed #4a90e2 !important; /* Bordure pointillée pour montrer qu'on édite */
    background: #f0f7ff !important;
}

#champ-note-seance {
    width: 100%;
    min-height: 100px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    font-family: inherit;
    margin: 10px 0;
    resize: vertical;
}

.btn-valider {
    background-color: #27ae60;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
}

.btn-annuler {
    background: none;
    color: #666;
    border: none;
    text-decoration: underline;
    cursor: pointer;
    margin-left: 10px;
}

#liste-fichiers li {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 5px;
    transition: background 0.2s;
}

#liste-fichiers li:hover {
    background: #f1f5f9;
}

/* --- INSCRIPTION --- */
/* --- Styles spécifiques à la création de compte & Login --- */

.form-container {
    max-width: 500px;
    margin: 50px auto;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    font-family: 'Quicksand', sans-serif;
}

.titre-page {
    color: #284196; /* Le bleu Sanarca */
    text-align: center;
    margin-bottom: 10px;
    font-size: 1.8rem;
}

.sous-titre-page {
    text-align: center;
    color: #64748b;
    font-size: 1rem;
    margin-bottom: 30px;
    font-weight: 400;
}

.champ {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.champ label {
    margin-bottom: 8px;
    font-weight: 600;
    color: #334155;
}

.champ input {
    padding: 12px;
    border: 2px solid #f1f5f9;
    border-radius: 10px;
    font-family: 'Quicksand', sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.champ input:focus {
    outline: none;
    border-color: #284196;
    background-color: #f8fafc;
}

.champ-checkbox {
    background-color: #f0f9ff;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #bae6fd;
}

.btn-valider {
    width: 100%;
    padding: 15px;
    background-color: #284196;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}

.btn-valider:hover {
    background-color: #284196;
    transform: translateY(-2px);
}

.btn-valider:active {
    transform: translateY(0);
}

/* --- FOOTER COMMUN À TOUTES LES PAGES --- */
footer {
    margin-top: 40px;
    padding: 20px;
    text-align: center;
    font-family: 'Quicksand', sans-serif;
}

footer a {
    color: #4a90e2;
    text-decoration: none;
    font-weight: 600;
}

footer a:hover {
    text-decoration: underline;
}

/* --- ADAPTATION MOBILE (Écrans < 768px) --- */
@media (max-width: 768px) {
    /* Navigation : on empile le logo et les icônes */
    .barre-navigation {
        flex-direction: column;
        gap: 15px;
        padding: 15px 20px;
    }

    .logo-texte {
        font-size: 2.2rem; /* Plus petit pour mobile */
    }

    /* Barre de recherche : on passe en colonne */
    .search-container {
        flex-direction: column;
        width: 90%;
    }

    /* Le champ de recherche devient fluide (100%) au lieu de 450px */
    .barre-recherche-groupe input {
        width: 100%;
        box-sizing: border-box; /* Empêche le débordement avec le padding */
    }

    .bouton-chercher {
        width: 100%; /* Le bouton prend toute la largeur sous la barre */
        margin-top: 10px;
    }

    /* Boîte de formulaire (qui était fixée à 550px) */
    .form-container {
        width: 95% !important;
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }

    /* Grille des dossiers patients : on force 1 seule colonne */
    .grille-dossier {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   ADAPTATION GLOBALE POUR TÉLÉPHONES MOBILES
   (Se déclenche si l'écran fait moins de 768px de large)
   ========================================= */
@media screen and (max-width: 768px) {
    
    /* 1. Pour empêcher le site de "flotter" de gauche à droite */
    body {
        overflow-x: hidden;
    }

    /* 2. Empiler les boutons d'en-tête (Se connecter, Nouveau Patient...) */
    .action-header { 
        display: flex;
        flex-direction: column; 
        align-items: center;    
        gap: 15px;              
        width: 100%;
        margin-top: 15px;
    }
    .action-header a, 
    .action-header button {
        width: 100%;
        max-width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    /* 3. Empiler la barre de recherche et son bouton sur l'accueil */
    .barre-recherche-groupe {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    #barre-nom {
        width: 100% !important;
        border-radius: 8px !important;
    }
    .bouton-chercher {
        width: 100%;
        border-radius: 8px !important;
    }

    /* 4. Empiler les 3 blocs "Informations / Anamnèse / Santé" de la fiche patient */
    .grille-dossier {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px;
    }
    .bloc-info {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 5. Ajuster le menu de langue pour qu'il reste joli */
    .icones-profil {
        justify-content: center;
        width: 100%;
        margin-top: 10px;
    }
}