@font-face {
    font-family: 'Tipo Movin CDMX BI';
    src: url('../media/typos/Tipo Movin CDMX Bold Italic.otf');
}

@font-face {
    font-family: 'Tipo Movin CDMX Light';
    src: url('../media/typos/Tipo Movin CDMX Light.otf');
}

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Prévention du débordement horizontal */
    overflow-x: hidden; 
}

/*
 * === HEADER RESPONSIVE ===
 * J'ai remplacé la combinaison grid/position absolue par Flexbox.
 * C'est beaucoup plus fiable pour centrer verticalement et horizontalement
 * le contenu, quelle que soit la taille de l'écran.
*/
header {
    position: relative; /* Contexte pour l'image en fond */
    min-height: 100vh;
    display: flex; /* Utilisation de Flexbox */
    flex-direction: column; /* Pour empiler h1 et p */
    justify-content: center; /* Centrage vertical */
    align-items: center; /* Centrage horizontal */
    padding: 20px;
    box-sizing: border-box; /* Le padding est inclus dans les 100vh */
    text-align: center;
    overflow: hidden;
}

/*
 * L'image est maintenant un véritable "fond" en position absolue
 * avec object-fit: cover pour remplir l'espace sans se déformer.
*/
header img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Clé de la responsivité de l'image */
    filter: blur(3px);
    z-index: -1; /* Placé derrière le contenu */
}

header h1 {
    /* Plus besoin de position: absolute ou top: 100px */
    text-shadow: 0px 0px 16px rgba(255, 255, 255, 1);
    font-family: 'Tipo Movin CDMX BI';
    color: rgb(77, 103, 219);
    margin: 0 0 15px 0; /* Marge en bas pour espacer du texte */
    padding: 10px;
    font-size: clamp(3rem, 10vw, 5rem); /* Taille de police fluide */
    line-height: 1.1;
}

.heroText {
    /* Plus besoin de position: absolute ou top: 500px */
    text-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
    color: white;
    margin: 0;
    padding: 15px;
    font-size: clamp(1rem, 3vw, 1.4rem); /* Taille de police fluide */
    line-height: 1.5;
    width: 90%; /* Largeur relative */
    max-width: 900px; /* Limite de largeur sur grands écrans */
    background-color: rgba(0, 0, 0, 0.65); /* Opacité plus propre */
    border-radius: 10px;
}

/* === MAIN CONTENT === */
main {
    display: flex;
    justify-content: center;
    background-color: #eaeaea;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.selectionVille_title {
    font-family: 'Tipo Movin CDMX BI';
    font-size: 1.8rem;
    color: rgb(77, 103, 219);
    margin-bottom: 10px;
    text-align: center;
}

/*
 * === SÉLECTION VILLE RESPONSIVE ===
 * Mobile-first : 1 colonne par défaut.
 * Les inputs s'empilent.
*/
.selectionVille {
    margin: 20px 0;
    width: 90%;
    max-width: 700px; /* Limite de largeur */
    display: grid;
    grid-template-columns: 1fr; /* 1 colonne sur mobile */
    grid-gap: 12px;
}

.selectionVille input {
    border-radius: 10px;
    border: none;
    text-align: center;
    outline: none;
    padding: 12px; /* Ajout de padding */
    font-size: 1.1rem; /* Augmentation de la taille */
}

.selectionVille input::placeholder {
    font-family: 'Tipo Movin CDMX Light';
    font-size: 1.1rem;
    text-align: center;
}

.selectionVille button {
    font-family: 'Tipo Movin CDMX Light';
    font-weight: bold;
    letter-spacing: 2px;
    background-color: rgb(97, 117, 207);
    /* grid-column: span 2; -> Inutile sur mobile */
    color: white;
    padding: 12px 20px; /* Padding ajusté */
    font-size: 1.2rem;
    border-radius: 10px;
    border: none;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.30);
    transition: all 0.3s ease;
    cursor: pointer;
}

.selectionVille button p {
    margin: 0;
}

.selectionVille button:hover {
    background-color: #e7e5e5;
    color: #000; /* La couleur doit être sur le bouton */
    transition: all 0.3s ease;
}
/* Style au clic */
.selectionVille button:active {
    background-color: #d8d8d8;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20);
    transform: translateY(1px);
    transition: all 0.1s ease;
}

/*
 * === RÉSULTATS ===
 * C'était déjà parfaitement responsive !
 * grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 * est une excellente pratique. Je n'ai rien changé.
*/
.resultats {
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    width: 90%;
    max-width: 1200px;
    margin: 20px auto 0;
    box-sizing: border-box;
}

.resultats div {
    font-family: 'Tipo Movin CDMX Light';
    flex-direction: column;
    margin: 0;
    padding: 15px; /* Padding augmenté */
    border-radius: 10px;
    background-color: #f5f5f5;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/*
 * === STATS & CHARTS ===
 * J'ai donné une largeur aux conteneurs de graphiques
 * et supprimé le min-width: 95vw sur les canvas,
 * qui forçait un débordement.
*/
.stats {
    margin-top: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stats h2 {
    font-size: 1.8rem;
    display: flex;
    justify-content: center;
    font-family: 'Tipo Movin CDMX BI';
    color: rgb(179, 96, 96);
    text-align: center;
}

.chart1,
.chart2,
.chart3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 95%; /* Largeur relative */
    max-width: 1000px; /* Limite de largeur */
    margin-bottom: 30px; /* Espacement entre les graphiques */
}

.chart1 h3,
.chart2 h3,
.chart3 h3 {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2rem; /* Taille augmentée */
    margin-bottom: 15px;
}

/*
 * C'est le correctif majeur pour les graphiques.
 * Le canvas prend 100% de son parent (qui est limité en largeur),
 * au lieu de 95% de la fenêtre (vw).
*/
.chart1 canvas,
.chart2 canvas,
.chart3 canvas {
    max-width: 100%; /* Le canvas ne doit pas déborder */
    height: auto; /* Chart.js gère la hauteur */
}

.chart1 p,
.chart2 p,
.chart3 p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1rem; /* Taille harmonisée */
    line-height: 1.6;
    text-align: left; /* Plus lisible sur mobile que justifié */
    width: 100%; /* Prend la largeur du parent */
    margin-top: 15px;
}

.chart3 .sources,
.chart2 .sources,
.chart1 .sources {
    font-size: 0.8rem;
    text-align: center;
    margin-top: 10px;
    width: 100%;
}

/*
 * === MEDIA QUERIES (Desktop) ===
 * À partir de 550px, on passe la sélection de ville sur 2 colonnes.
*/
@media screen and (min-width: 550px) {
    .selectionVille {
        grid-template-columns: 1fr 1fr; /* 2 colonnes */
    }

    .selectionVille button {
        grid-column: span 2; /* Le bouton prend les 2 colonnes */
    }

    /* On peut re-justifier le texte sur les grands écrans */
    .chart1 p,
    .chart2 p,
    .chart3 p {
        text-align: justify;
    }
}

/*
 * L'ancienne media query pour 426px a été supprimée
 * car les nouveaux styles du header la rendent inutile.
*/


/*
 * === STYLES AUTOCOMPLETE ===
 * (Inchangés, ils sont fonctionnels)
*/
.autocomplete-list {
    position: absolute;
    z-index: 9999;
    max-height: 240px;
    overflow: auto;
    margin: 0;
    padding: 6px 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .14);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    border-radius: 6px;
    font: 14px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #111;
}

.autocomplete-item {
    display: block;
    padding: 8px 12px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .12s;
    background: transparent;
    color: inherit;
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background: #f2f2f2;
}

.autocomplete-highlight {
    font-weight: 700;
    color: #000;
}

.autocomplete-empty {
    padding: 10px 12px;
    color: #444;
    font-size: 13px;
}

footer {
    background: linear-gradient(180deg, #f7f7f9, #eceeef);
    padding: 24px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

footer p {
    margin: 0;
    font-family: 'Tipo Movin CDMX Light', Arial, Helvetica, sans-serif;
    color: #333;
    font-size: clamp(0.9rem, 1.6vw, 1rem);
    line-height: 1.4;
    text-align: center;
    max-width: 1100px;
    padding: 0 12px;
}