/****************************************************
 * 0. VARIABLES & CONFIG
 ****************************************************/

/****************************************************
 * 🟦 1. LAYOUT GLOBAL (mobile-first)
 ****************************************************/

html {
  margin: 0;
  padding: 0;
  background-color: #F3F3FF;
}

/* Pas de scroll horizontal sur les pages */
html, body {
    overflow-x: hidden !important;
}

/****************************************************
 * 🟪 SIDEBAR / DOCK — VARIABLES + POSITION FIXE
 ****************************************************/

/* Config du dock : tout se règle ici */
.analysis-sidebar {
  /* Largeurs (fermé / ouvert) */
  --dock-collapsed: 30px;        /* largeur dock fermé */
  --dock-expanded: 210px;        /* largeur dock ouvert */

  /* Style */
  --dock-radius: 35px;
  --dock-bg: #00C2CB;            /* couleur turquoise du dock */
  --dock-fg: #ffffff;            /* couleur du texte/icônes */

  /* Position sur l'écran */
  --dock-top: 250px;             /* distance du haut */
  --dock-left: 5px;             /* distance du bord gauche */

  /* Position relative de la flèche par rapport au dock */
  --arrow-offset-top: -55px;   /* comme ton ancien margin-top */
  --arrow-offset-left: 0px;    /* offset horizontal fin si besoin */

  position: fixed !important;
  top: var(--dock-top);
  left: var(--dock-left);
  z-index: 9999 !important;

  /* On laisse passer les clics derrière */
  pointer-events: none !important;

  overflow-x: visible;
}


/* Seuls ces éléments peuvent recevoir des clics */
.analysis-sidebar .dock,
.analysis-sidebar .fleche-icon,
.analysis-sidebar .dock-tooltip {
  pointer-events: auto !important;
}
/****************************************************
 * 🟩 DOCK TOOLTIP
 ****************************************************/

.dock-tooltip {
  position: fixed;

  /* 1️⃣ Alignement vertical avec la flèche */
  top: calc(var(--dock-top) + var(--arrow-offset-top) );

  /* 2️⃣ Positionnement à droite de la flèche */
  left: calc(var(--dock-left) + var(--dock-collapsed) + 17px);

  background: #ffffff;
  color: #00C2CB;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 1.1rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 9999;
  max-width: 175px;
  white-space: normal;
  line-height: 1.3;
}

/* visible = visible */
.dock-tooltip.visible {
  opacity: 1;
}


/* Texte desktop / mobile */
.dock-tooltip-desktop {
  display: none;
}
.dock-tooltip-mobile {
  display: inline;
}



/****************************************************
 * 🟨 FLECHE (toggle du dock)
 ****************************************************/
.fleche-icon {
  position: fixed;
  /* position = position du dock + offsets */
  top: calc(var(--dock-top) + var(--arrow-offset-top));
  left: calc(var(--dock-left) + var(--arrow-offset-left));

  font-size: 35px;     /* taille de la flèche */
  line-height: 1;
  text-align: center;
  opacity: .95;

  color: #00C2CB;
  z-index: 10000;

  cursor: pointer;
  animation: arrowBlink 2.5s ease-in-out infinite;
}



@keyframes arrowBlink {
  0%, 100% { opacity: 0.8; transform: translateY(0); }
  50% { opacity: 0.2; transform: translateY(4px); }
}


/****************************************************
 * 🟥 DOCK
 ****************************************************/

.dock {
  width: var(--dock-collapsed);
  background: var(--dock-bg);
  color: var(--dock-fg);
  border-radius: var(--dock-radius);

  border: none;
  outline: none;
  box-shadow: none;

  padding: 10px 8px;
  transition: width .18s ease;
  overflow: hidden;
}

.dock:hover,
.dock.dock-open {
  width: var(--dock-expanded);
}

/****************************************************
 * 🟧 NAVIGATION DU DOCK
 ****************************************************/

.dock-nav,
.dock-nav ul,
.dock-nav li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.dock-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--dock-fg);
  border-radius: 10px;

  transition: background .15s ease, transform .12s ease;
}

.dock-nav a:hover {
  background: rgba(255,255,255,0.12);
  transform: translateX(2px);
}

.dock-nav a.active {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Icônes + labels */
.dock-icon {
  width: 28px;
  min-width: 28px;
  font-size: 1.5rem;
  text-align: center;
  opacity: .95;
}

.dock-label {
  opacity: 0;
  transform: translateX(-6px);
  pointer-events: none;

  margin-left: 12px;
  font-size: 1rem;

  transition: opacity .15s ease, transform .15s ease;
}

.dock:hover .dock-label,
.dock.dock-open .dock-label {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
/****************************************************
 * 🟪 MODAL – CENTRÉE & STYLÉE (logout + flash)
 ****************************************************/
/* === BACKDROP === */
.modal {
    position: fixed;
    inset: 0; /* remplace top/left/width/height */
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;          /* indispensable : empêche l’écrasement sur mobile */
    z-index: 999999;
    box-sizing: border-box; /* évite tout débordement */
}

/* === FENÊTRE MODAL ADAPTATIVE === */
.modal-content {
    background-color: #6fd3f7;
    width: 70%;              /* prend toute la largeur dispo */
    max-width: 500px;         /* limite pour desktop, mais reste large */
    max-height: 30%;         /* ne dépasse jamais l'écran */
    overflow-y: auto;         /* scroll interne propre si contenu trop long */
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    box-sizing: border-box;   /* IMPORTANT */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* === TITRE === */
.modal-title-register {
    margin-bottom: 12px;
    color: #ffffff;
    font-size: 1rem!important;
    font-weight: 700;
}

/* === BOUTONS === */
.btn-confirm,
.btn-cancel {
    display: block;
    width: 65%;
    border: none;
    border-radius: 6px;
    padding: 12px;
    font-size: 1rem!important;
    color: white;
    cursor: pointer;
    margin: 5px auto;
    background: rgba(0,0,0,0.25);
}


/* Oui = vert */
.btn-confirm {
    background-color: #28a745 !important;
}

/* Annuler = rouge */
.btn-cancel {
    background-color: #dc3545 !important;
}

/* classe pour cacher le modal */
.hidden { display: none !important; }

/****************************************************
 * 🟦 GENERAL LAYOUT & BODY
 ****************************************************/

body {
  margin: 0;
  padding: 0;
  background-color: var(--mic-bg);
  color: var(--mic-text);
  font-family: "Baloo 2", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;

  width: 100%;
  max-width: none;

  /* ✅ pour coller le footer en bas si le contenu est court */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main#page-content {
  flex: 1 0 auto;
}

.page-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;

  /* padding top/bottom = 16px, gauche = 16px, droite = variable */
  padding: 16px var(--mic-content-right-padding) 16px 16px;
}

.analysis-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;

  /* décale tout le contenu pour libérer le dock à gauche
     et ajouter un peu d'espace à droite */
  margin-left: var(--mic-content-left-offset);
  margin-right: var(--mic-content-right-offset);
}


.analysis-content {
  width: 100%;
  flex-grow: 1;
}
/****************************************************
 * 🟦 HEADER (mobile-first) – .mic-header
 ****************************************************/

/* Variables du header (on jouera sur elles dans les media queries) */
:root {
  --primary-color : white;
  --mic-header-bg: #F3F3FF;
  --mic-header-text: #0F1B2B;
  --mic-header-shadow: 0 2px 6px rgba(15, 27, 43, 0.06);
  --mic-header-padding-y: 8px;
  --mic-header-padding-x: 12px;
  --mic-header-logo-width: 150px;
  --mic-header-gap: 10px;
  --mic-header-logo-offset-y: 2px;
  --mic-header-right-gap: 14px;


  /* marge à gauche pour ne pas être sous le dock */
  --mic-content-left-offset: 60px;

  /* marge à droite pour laisser respirer le contenu */
  --mic-content-right-offset: 5px;  /* tu pourras passer à 20/24 plus tard */
}


/* Conteneur global du header */
.mic-header {
  position: sticky;
  top: 0;
  z-index: 9000;
  background-color: var(--mic-header-bg);
  color: var(--mic-header-text);
  box-shadow: var(--mic-header-shadow);

}

/* Ligne du haut : logo + burger */
.mic-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mic-header-padding-y) var(--mic-header-padding-x);
  gap: var(--mic-header-gap);
}

.mic-header-logo img {
  display: block;
  width: var(--mic-header-logo-width);
  max-width: 100%;
  height: auto;
  transform: translateY(var(--mic-header-logo-offset-y));
}


/* Conteneur à droite : langue + abonnement + initiale + burger */
.mic-header-right {
  display: flex;
  align-items: center;
  gap: var(--mic-header-right-gap);
}

.mic-header-burger {
  background: transparent;
  border: none;
  font-size: 1.9rem;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--mic-header-text);
}


/* Style commun pour tous les panneaux déroulants du header (burger, langue, user) */
.mic-header-panel,
.lang-menu,
.user-dropdown {
  margin-top: 4px;
  padding: 6px 0;
  background-color: #ffffff;
  border-radius: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 8px 18px rgba(15, 27, 43, 0.12);
}


/* Panel déroulant : menu + langue + user */
.mic-header-panel {
  display: none;

  position: absolute;
  top: 110%;
  right: 25px;
  min-width: 220px;
  z-index: 1000;
}



.mic-header.open .mic-header-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}



/* ===== Menu du site ===== */

.mic-header-menu {
  width: 100%;

}

.mic-header-nav {
  list-style: none;
  margin: 0;
  padding: 0;

}

.mic-header-nav-link {
  display: block;
  padding: 6px 10px;
  color: var(--mic-header-text);
  text-decoration: none;
  font-size: 0.85rem;
  text-align: left !important;
  background-color: #ffffff;
}


.mic-header-nav li {
  width: 100%;
}

.mic-header-nav li + li {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.mic-header-nav-link:hover {
  background-color: #f1f5fb;  /* on garde le même hover que les dropdowns */
}

.mic-header-nav-link.active {
  background-color: #00C2CB;
  color: #ffffff;
}


/* Dropdown Connexion */
.menu-account .dropdown-menu {
  display: none;
  margin-top: 4px;
  padding: 6px 8px;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 27, 43, 0.12);
}

.menu-account.open .dropdown-menu {
  display: block;
}

.menu-account .dropdown-menu a {
  display: block;
  padding: 4px 6px;
  text-decoration: none;
  color: var(--mic-header-text);
  font-size: 0.85rem;
}

.menu-account .dropdown-menu a:hover {
  background-color: #f1f5fb;
}


/* Langues */
.lang-switch {
  position: relative;      /* le dropdown sera ancré sur FR */
  display: inline-block;
}



.lang-btn {
  padding: 0;
  border: none;
  background: transparent;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--mic-header-text);
}

.lang-menu {
  display: none;
  position: absolute;
  top: 167%;      /* on descend un peu plus sous le bouton FR */
  left: 0;
  right: auto;
  list-style: none;
  margin: 0;      /* on laisse la gestion de l’espace au top:120% */
  min-width: 140px;
}


.lang-menu li a {
  display: block;
  padding: 6px 10px;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--mic-header-text);
}

.lang-menu li a:hover {
  background-color: #f1f5fb;
}

/* Utilisateur */
.user-plan {
  padding: 6px 10px;
  border-radius: 999px;
  background-color: #00C2CB;
  color: #F3F3FF;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.user-menu-wrapper {
  position: static;
}

.user-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #00C2CB;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.user-badge,
.user-expiry {
  padding: 6px 10px;                         /* alignement comme les autres lignes */
  font-size: 0.85rem;                        /* même taille que les liens */
  color: var(--mic-header-text);
}

/* Ligne de séparation avant le badge d'abonnement */
.user-badge {
  font-weight: 600;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* Ligne de séparation sous "Expire le ..." */
.user-expiry {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* Dropdown utilisateur */
.user-dropdown {
  position: absolute;
  top: 110%;
  right: 25px;

  min-width: 220px;
  font-size: 0.85rem;
}


.user-dropdown.hidden {
  display: none;
}

.user-dropdown p {
  margin: 0;
  padding: 6px 10px;               /* même padding que les lignes */
  font-size: 0.85rem;
  font-weight: 600;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}


.user-dropdown a {
  display: block;
  padding: 6px 10px;               /* comme les autres menus */
  margin: 0;                       /* on retire le margin-top:4px */
  font-size: 0.85rem;              /* identique aux autres */
  text-decoration: none;
  color: var(--mic-header-text);

}

.user-dropdown a + a {
  border-top: 1px solid rgba(0, 0, 0, 0.12);   /* même que burger */
}


.user-dropdown a:hover {
  background-color: #f1f5fb;
}

/* Harmonise le lien 'Se déconnecter' avec les autres lignes du menu user */
.user-dropdown .mic-header-nav-link {
  padding: 6px 10px;              /* même padding que .user-dropdown a */
  font-size: 0.85rem;             /* même taille */
  text-align: left;
  background-color: #ffffff;
}

/* Même effet hover que les autres liens du menu user */
.user-dropdown .mic-header-nav-link:hover {
  background-color: #f1f5fb;
}

/* Neutralise le CSS global nav ul li pour le header */
.mic-header nav ul li {
    margin: 0 !important;
    padding: 0;
    display: block;
}

/****************************************************
 * 🟦 FOOTER – MyImmoCheck
 ****************************************************/

.mic-footer {
  margin-top: 32px;
  padding: 16px 16px 24px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--mic-header-text);
  background-color: #0F1B2B;
  border-top: 1px solid rgba(15, 27, 43, 0.08);
  flex-shrink: 0;
}

.mic-footer a {
  color: #ffffff;      /* liens blancs */
  text-decoration: none;
  white-space: nowrap;
}

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


/* Petit espace autour des | sans toucher au HTML */
.mic-footer a + span,
.mic-footer a + a {
  margin-left: 4px;
}

  .footer-social-links {
  display: flex;
  justify-content: center;   /* centre horizontalement */
  align-items: center;       /* centre verticalement */
  gap: 22px;                 /* espace entre les icônes */

  margin-top: 17px;
}

.footer-social-link {
  display: inline-block;
  transition: transform 0.18s, filter 0.18s;
}

.footer-social-link:hover .footer-social-icon {
  transform: scale(1.18) rotate(-6deg);
  filter: brightness(1.1);
}

.footer-social-icon {
  height: 28px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1) grayscale(1) opacity(0.92);
  transition: transform 0.18s, filter 0.18s;
}

/****************************************************
 * 🟦 BOUTON "RETOUR EN HAUT"
 ****************************************************/

.mic-scroll-top {
  position: fixed;
  bottom: 16px;          /* distance du bas (mobile-first) */
  right: 12px;           /* distance du bord droit */

  width: 44px;
  height: 44px;

  display: none;         /* caché par défaut, ton script gère block/none */

  background-color: transparent;
  color: #ffffff;
  border: none;
  border-radius: 50%;

  font-size: 1.4rem;
  line-height: 44px;     /* centre la flèche verticalement */
  text-align: center;    /* centre horizontalement */

  padding: 0;            /* neutralise le padding des styles globaux */
  margin: 0;             /* neutralise margin: 20px auto des styles globaux */
  box-sizing: border-box;

  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  cursor: pointer;
  z-index: 9999;
}

/****************************************************
 * 🟥 MEDIA QUERIES (mobile-first)
 ****************************************************/

@media (min-width: 480px) {
  :root {
    /* un peu plus d'espace à droite dès que l'écran est moins serré */
    --mic-content-right-offset: 12px;
  }

}
@media (min-width: 500px) {
    .modal-content {
        width: 50%
    }
}
@media (min-width: 600px) {
    .modal-content {
        width: 40%
    }
}

@media (min-width: 768px) {
  :root {
    /* le contenu peut respirer davantage */
    --mic-content-right-offset: 20px;

    /* on peut élargir légèrement le logo */
    --mic-header-logo-width: 170px;

    /* espace à gauche si tu veux encore éloigner du dock (facultatif) */
    --mic-content-left-offset: 70px;

    /* écarter un peu les icônes / langues / user */
    --mic-header-right-gap: 18px;
  }
  .modal-content {
    max-height: 30%;
  }
}
@media (min-width: 1000px) {
    .modal-content {
        width: 25%
    }
}

@media (min-width: 1060px) {

  /* 1️⃣ Le header devient une grille : [logo] [menu] [FR / Business / C] */
  .mic-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }

  /* On “aplatit” mic-header-top : ses enfants deviennent des éléments de la grille */
  .mic-header-top {
    display: contents;

  }

  /* Logo dans la première colonne */
  .mic-header-logo {
    grid-column: 1;
    grid-row: 1;   /* ✅ logo = ligne 1 */
  }

  /* Bloc de droite (FR / Business / C) dans la 3e colonne */
  .mic-header-right {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mic-header-right-gap);
    margin-right: 24px;  /* ajuste 16 / 20 / 24 selon ce qui te plaît visuellement */
  }

  /* 2️⃣ On cache le burger en desktop */
  .mic-header-burger {
    display: none;
  }

  /* 3️⃣ Le panneau du menu devient la colonne centrale du header */
  .mic-header-panel {
    grid-column: 2;
    grid-row: 1;          /* ✅ menu = ligne 1, colonne 2 */
    position: static;
    top: auto;
    right: auto;
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    display: block;
    z-index: auto;
        /* 🟢 nouveau : alignement vertical + largeur à la taille du menu */
    align-self: center;
    justify-self: center;
  }

  /* Le menu est toujours visible en desktop */
  .mic-header-menu {
    display: block;
    width: auto;              /* 🟢 le menu ne prend plus toute la largeur */
    background: transparent;  /* au cas où il gardait un fond blanc */
    margin: 0;
    padding: 0;
    box-shadow: none;
    border: none;
  }

  .mic-header-nav {
    display: flex;
    flex-direction: row;
    justify-content: center;  /* le groupe est centré */
    gap: 18px;                /* 🟢 un peu moins d'espace entre les items */
    margin: 0;
    padding: 0;
    background-color:   #F3F3FF;

  }


  .mic-header-nav li {
    border: none;
    width: auto;
  }

  .mic-header-nav-link {
    background: transparent;
    padding: 0;
    font-size: 0.95rem;

  }

  .mic-header-nav-link:hover {
    background: transparent;
    text-decoration: underline;
  }

  /* La classe .open ne change plus l'affichage du menu en desktop */
  .mic-header.open .mic-header-panel {
    display: block;
  }
   /* Supprimer les bordures du menu horizontal */
  .mic-header-nav li + li {
    border-top: none !important;
  }

  .mic-header-nav-link {
    background: transparent;
    padding: 0 12px; /* léger padding horizontal */
    font-weight: 700;

  }
  .fleche-icon {
    font-size: 36px;        /* au lieu de 35px */
    top: calc(var(--dock-top) - 65px); /* descend/repositionne légèrement */
  }
  .dock-tooltip {
    top: calc(var(--dock-top) + var(--arrow-offset-top) - 20px); /* ajuste 20px comme tu veux */
  }
}



@media (min-width: 1366px) {
  .mic-header-nav-link {
    font-size: 1rem;
    padding: 8px 14px;
  }
  .mic-header-right {
    gap: 24px;
  }
  .page-container {
    max-width: 1600px;
  }
  .analysis-layout {
    margin-left: calc(var(--mic-content-left-offset) + 20px);
    margin-right: calc(var(--mic-content-right-offset) + 20px);
  }
}

@media (min-width: 1400px) {
    .modal-content {
        width: 20%
    }
}