:root {
    --primary-blue: #0A2342;
    --primary-blue-light: #14346B;
    --primary-yellow: #FFD700;
    --gold: #F2B705;
    --bg-color: #F8F9FA;
    --red: #E63946;
    --cream: #FEFCF5;
    --stone: #E4D9C4;
    --olive: #7C8156;
    --ink: #1C1C1C;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Nunito', sans-serif; }
html, body { height: 100%; }
body {
    background-color: var(--bg-color);
    color: var(--primary-blue);
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* ==================================================================
   EN-TÊTE — carte postale sobre : fond bleu nuit, wordmark "indice jaune"
   ================================================================== */
.app-header {
    background-color: var(--primary-blue);
    background-image: linear-gradient(160deg, var(--primary-blue-light) 0%, var(--primary-blue) 60%);
    padding: 16px 20px 22px;
    text-align: center;
    z-index: 10;
    position: relative;
}
.header-inner { position: relative; z-index: 1; }
.brand { display: flex; align-items: center; justify-content: center; gap: 8px; background: none; border: none; padding: 0; cursor: pointer; width: fit-content; margin: 0 auto; }
.brand:active { opacity: 0.8; }
.brand-sun {
    color: var(--primary-yellow);
    font-size: 18px;
    transform: rotate(-10deg);
    text-shadow: 0 0 10px rgba(255,215,0,0.5);
}
.app-header h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-transform: lowercase;
    color: var(--cream);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.app-header h1 span {
    font-weight: 900;
    font-size: 22px;
    color: var(--primary-blue);
    text-transform: lowercase;
    background: var(--primary-yellow);
    padding: 3px 12px 4px;
    border-radius: 999px;
    display: inline-block;
    transform: rotate(-2deg);
}
.baseline {
    font-family: 'Patrick Hand', cursive;
    font-weight: 400;
    font-size: 14px;
    opacity: 0.85;
    color: var(--cream);
    margin-top: 4px;
}
/* Vaguelette façon carte postale au bas du header */
.header-wave {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    width: 100%; height: 16px;
    display: block;
}
.header-wave path { fill: var(--bg-color); }

.app-topbar { flex-shrink: 0; }

/* Bannière « installe l'app » — clin d'œil doodle (comme la page Règles) sous le header, refermable */
.install-banner {
    background-color: #FEFCF5;
    background-image: radial-gradient(#D3D3D3 1px, transparent 1px);
    background-size: 16px 16px;
    border-bottom: 3px dashed var(--primary-blue);
    box-shadow: 0 6px 14px rgba(10,35,66,0.18);
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    position: relative; z-index: 600;
}
.install-banner-tag {
    font-family: 'Permanent Marker', cursive; font-size: 15px;
    background: var(--primary-yellow); color: var(--primary-blue);
    padding: 5px 12px; border-radius: 8px;
    transform: rotate(-3deg); box-shadow: 2px 2px 0 var(--primary-blue);
    flex-shrink: 0; white-space: nowrap;
}
.install-banner-text { font-family: 'Patrick Hand', cursive; font-size: 19px; color: var(--primary-blue); flex: 1; min-width: 0; }
.install-banner-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
@keyframes install-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.install-banner-btn {
    font-family: 'Patrick Hand', cursive; font-weight: 700;
    background: var(--primary-blue); color: var(--primary-yellow); border: 2px solid var(--primary-blue);
    padding: 8px 18px; border-radius: 999px; font-size: 17px; cursor: pointer;
    white-space: nowrap;
    animation: install-pulse 1.8s ease-in-out infinite;
}
.install-banner-close { background: none; border: none; color: var(--primary-blue); font-size: 22px; font-weight: 900; line-height: 1; cursor: pointer; opacity: 0.6; }
.install-banner-close:hover { opacity: 1; }

.app-content { flex: 1; position: relative; min-height: 0; }
.tab-content { display: none; height: 100%; width: 100%; overflow-y: auto; overflow-x: hidden; position: relative; }
.tab-content.active { display: block; }

/* ==================================================================
   CARTE — vue "carte postale", propre et lisible
   ================================================================== */
#map { height: 100%; width: 100%; z-index: 1; background: var(--stone); }
#locating-overlay {
    position: absolute; inset: 0; z-index: 900;
    background: var(--primary-blue);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    color: var(--cream);
    transition: opacity 0.3s;
}
#locating-overlay.hidden { opacity: 0; pointer-events: none; }
#locating-overlay > i { font-size: 34px; color: var(--primary-yellow); animation: locating-pulse 1.4s ease-in-out infinite; }
#locating-overlay p { font-family: 'Patrick Hand', cursive; font-size: 18px; margin: 0; }

.locate-btn {
    background: var(--primary-yellow); color: var(--primary-blue); border: none;
    padding: 12px 20px; border-radius: 999px; font-size: 15px; font-weight: 800;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25); cursor: pointer;
    display: flex; align-items: center; gap: 8px; margin-top: 6px;
}
.locate-btn i { font-size: 15px; }

.skip-locate-btn {
    background: none; border: none; color: rgba(254,252,245,0.7); font-size: 13px;
    text-decoration: underline; cursor: pointer; margin-top: 2px;
}
.locate-btn i { color: var(--primary-yellow); }
.locate-btn:active { transform: scale(0.96); }
@keyframes locating-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.7; } }
.custom-glass { background: transparent; border: none; }

.map-search {
    position: absolute;
    top: 14px; left: 14px; right: 14px;
    z-index: 500;
    background: var(--cream);
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(10,35,66,0.28);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border: 2px solid var(--primary-blue);
}
.map-search i { color: var(--primary-blue); opacity: 0.6; font-size: 15px; }
.map-search input {
    border: none; outline: none; background: transparent;
    font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 15px;
    color: var(--primary-blue); width: 100%;
}
.map-search input::placeholder { color: rgba(10,35,66,0.45); font-weight: 700; }

.map-legend {
    position: absolute;
    bottom: 94px; left: 14px; top: auto;
    z-index: 500;
    display: flex; gap: 8px; flex-wrap: wrap;
}
.legend-item {
    background: rgba(254,252,245,0.95);
    border-radius: 999px;
    padding: 5px 10px 5px 6px;
    font-size: 11px; font-weight: 800; color: var(--primary-blue);
    display: inline-flex; align-items: center; gap: 5px;
    box-shadow: 0 3px 8px rgba(10,35,66,0.18);
}
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-ok { background: var(--primary-yellow); border: 1px solid var(--primary-blue); }
.dot-flag { background: var(--red); border: 1px solid var(--primary-blue); }
.dot-new { background: #D3D3D3; border: 1px solid var(--primary-blue); }

/* Popups des bars — clean/carte postale, lisibles d'un coup d'œil */
.leaflet-popup-content-wrapper { border-radius: 16px; padding: 2px; box-shadow: 0 8px 24px rgba(10,35,66,0.3); }
.leaflet-popup-content { margin: 14px 16px; }
.bar-popup { font-family: 'Nunito', sans-serif; min-width: 160px; }
.bar-popup .bar-name { display: block; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 900; color: var(--primary-blue); margin-bottom: 6px; }
.bar-popup .bar-status { display: inline-block; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 20px; margin-bottom: 6px; letter-spacing: 0.2px; }
.bar-popup .bar-status.ok { color: #8A6D00; background: #FFF3C4; }
.bar-popup .bar-status.flag { color: #A3212B; background: #FCE1E3; }
.bar-popup .bar-score { display: block; font-size: 13px; font-weight: 700; color: #57657A; }
.bar-popup .bar-empty { display: block; font-size: 12px; color: #888; margin-bottom: 8px; }
.bar-popup .inspect-btn {
    background: var(--primary-yellow); border: 2px solid var(--primary-blue); color: var(--primary-blue);
    padding: 8px 18px; border-radius: 20px; font-weight: 900; font-family: 'Nunito', sans-serif;
    cursor: pointer; font-size: 13px; margin-top: 6px; transition: transform 0.15s;
}
.bar-popup .inspect-btn:active { transform: scale(0.95); }
.bar-popup.centered { text-align: center; }
.bar-popup .bar-score small { font-weight: 400; color: #8A98AC; }
.bar-popup .reviews-toggle {
    background: none; border: none; color: var(--primary-blue-light); font-weight: 800;
    font-size: 12px; padding: 6px 0 0; cursor: pointer; text-decoration: underline;
}
.bar-popup .reviews-list { display: none; max-height: 160px; overflow-y: auto; margin-top: 6px; }
.bar-popup .reviews-list.open { display: block; }
.bar-popup .review-item { border-top: 1px solid #EEE; padding: 6px 0; }
.bar-popup .review-head { display: block; font-size: 12px; color: var(--primary-blue); }
.bar-popup .review-comment { font-size: 12px; color: #57657A; margin-top: 2px; }
.bar-popup .review-empty { font-size: 12px; color: #888; }
.bar-popup .review-owner-actions { display: flex; gap: 10px; margin-top: 4px; }
.bar-popup .review-owner-btn { background: none; border: none; padding: 0; font-size: 11px; font-weight: 800; color: var(--primary-blue-light); cursor: pointer; text-decoration: underline; }

/* ==================================================================
   RÈGLES — esprit doodle / croquis, pour le fun
   ================================================================== */
.doodle-bg {
    background-color: #FEFCF5;
    background-image: radial-gradient(#D3D3D3 1px, transparent 1px);
    background-size: 20px 20px;
}
.info-container { padding: 20px 20px 110px; max-width: 900px; margin: 0 auto; }
.marker-font { font-family: 'Permanent Marker', cursive; font-size: 28px; letter-spacing: 2px; color: var(--primary-blue); }
.hand-font { font-family: 'Patrick Hand', cursive; font-size: 20px; color: var(--primary-blue); line-height: 1.4; }
.highlight { background-color: var(--primary-yellow); padding: 0 8px; transform: rotate(-3deg); display: inline-block; box-shadow: 2px 2px 0 var(--primary-blue); }

/* Bandeau "carte postale" propre en tête de la page règles */
.postcard-hero {
    background: linear-gradient(160deg, var(--primary-blue-light), var(--primary-blue));
    color: var(--cream);
    border-radius: 22px;
    padding: 28px 24px;
    text-align: center;
    margin: 4px auto 30px;
    max-width: 560px;
    box-shadow: 0 10px 26px rgba(10,35,66,0.35);
}
.postcard-tag {
    display: inline-block;
    background: var(--primary-yellow);
    color: var(--primary-blue);
    font-weight: 900;
    font-size: 12px;
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
    letter-spacing: 0.3px;
}
.postcard-hero h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.35;
    margin-bottom: 10px;
}
.postcard-hero p {
    font-family: 'Nunito', sans-serif;
    font-size: 14.5px;
    opacity: 0.85;
    max-width: 420px;
    margin: 0 auto;
}

.doodle-grid { text-align: center; }

/* Cartes Croquis */
.sketch-card {
    background: white;
    border: 3px solid var(--primary-blue);
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    padding: 20px;
    margin: 30px auto;
    width: 95%;
    max-width: 400px;
    box-shadow: 6px 6px 0px var(--primary-yellow);
    transform: rotate(-1deg);
    transition: 0.3s;
}
.sketch-card:nth-of-type(even) { transform: rotate(1.5deg); box-shadow: 6px 6px 0px var(--primary-blue); }
.sketch-card.alert-sketch { border-color: var(--red); box-shadow: 6px 6px 0px var(--red); }
.sketch-card.alert-sketch h3 { color: var(--red); }

/* Carte classement/stats */
.stats-card { max-width: 480px; text-align: left; }
.stats-card h3 { text-align: center; margin-bottom: 14px; }
.stats-content { font-size: 18px; }
.stats-row { padding: 8px 0; border-bottom: 1px dashed rgba(10,35,66,0.2); }
.stats-row:last-child { border-bottom: none; }

/* Carte profil */
.sketch-card.hidden { display: none; }
.profile-card { max-width: 420px; text-align: center; }
.profile-avatar-wrap { position: relative; width: 96px; margin: 0 auto 6px; }
.profile-avatar {
    width: 96px; height: 96px; line-height: 90px; text-align: center;
    font-size: 52px; background: var(--primary-yellow); border: 3px solid var(--primary-blue);
    border-radius: 50%; overflow: hidden; box-shadow: 4px 4px 0 var(--primary-blue);
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-avatar .hidden { display: none; }
.profile-avatar-edit {
    position: absolute; right: -2px; bottom: 4px; width: 28px; height: 28px; line-height: 26px;
    background: var(--primary-blue); color: var(--primary-yellow); border-radius: 50%;
    border: 2px solid var(--cream); text-align: center; font-size: 14px; cursor: pointer;
}
#avatar-file-input { display: none; }
.profile-avatar-remove { display: block; margin: 4px auto 14px; font-size: 13px; }
.profile-avatar-remove.hidden { display: none; }
.profile-email-line { margin-top: 14px; font-size: 17px; }
.profile-logout-btn {
    display: block; margin: 18px auto 0; background: none; border: none;
    color: var(--red); font-weight: 700; font-size: 16px; text-decoration: underline; cursor: pointer;
}
.stats-loading, .stats-empty { text-align: center; opacity: 0.7; }

/* Annotations & Tête de mort */
.doodle-annotation { font-family: 'Patrick Hand', cursive; font-size: 18px; color: var(--primary-blue); font-weight: bold; margin: 20px 0; }
.doodle-annotation.right-align { text-align: right; margin-right: 20px; }
.doodle-annotation.left-align { text-align: left; margin-left: 20px; }
.doodle-annotation i { color: var(--primary-yellow); font-size: 24px; text-shadow: 1px 1px 0 var(--primary-blue); }

.skull-doodle { margin: 40px auto; font-size: 60px; color: var(--primary-blue); position: relative; display: inline-block; }
.skull-doodle .hat { background: var(--primary-yellow); color: var(--primary-blue); font-family: 'Permanent Marker', cursive; font-size: 14px; padding: 5px 10px; border: 3px solid var(--primary-blue); position: absolute; top: -25px; left: -15px; transform: rotate(-15deg); border-radius: 10px 10px 0 0; }
.skull-doodle .arrow-text { font-family: 'Patrick Hand', cursive; font-size: 16px; position: absolute; bottom: -30px; left: -60px; white-space: nowrap; transform: rotate(5deg); }

/* ==================================================================
   MODAL — carte postale propre : formulaire d'inspection
   ================================================================== */
.modal {
    display: flex; position: fixed; inset: 0;
    background: rgba(10, 35, 66, 0.78);
    backdrop-filter: blur(3px);
    z-index: 2000; align-items: center; justify-content: center;
    opacity: 1; transition: opacity 0.25s;
    padding: 20px;
}
.modal.hidden { opacity: 0; pointer-events: none; }
.modal-content {
    background: var(--cream);
    border-radius: 24px;
    width: 100%;
    max-width: 420px;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.modal-banner {
    background: linear-gradient(160deg, var(--primary-blue-light), var(--primary-blue));
    color: var(--cream);
    padding: 22px 24px 20px;
    border-radius: 24px 24px 0 0;
    position: relative;
    text-align: center;
}
.modal-banner h2 { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 24px; }
.modal-banner p { font-family: 'Patrick Hand', cursive; font-size: 15px; opacity: 0.85; margin-top: 4px; }
.close-btn { position: absolute; right: 16px; top: 12px; font-size: 26px; cursor: pointer; color: var(--cream); font-weight: 900; line-height: 1; }

/* Modal d'installation — doodle, comme la page Règles (exception assumée à la règle carte postale/doodle) */
.install-modal-content {
    background-color: #FEFCF5;
    background-image: radial-gradient(#D3D3D3 1px, transparent 1px);
    background-size: 18px 18px;
}
.install-modal-header { position: relative; padding: 26px 24px 4px; text-align: center; }
.install-modal-header .close-btn { color: var(--primary-blue); }
.install-modal-header h2 { font-size: 26px; }
.install-modal-header p { font-size: 16px; margin-top: 6px; }
.install-steps { padding: 6px 20px 26px; text-align: left; }
.install-os-card { margin: 18px auto; width: 100%; }
.install-os-card h3 { font-size: 20px; margin-bottom: 10px; text-align: center; }
.install-list { margin: 0; padding-left: 22px; font-size: 17px; line-height: 1.55; color: var(--primary-blue); }
.install-list li { margin-bottom: 6px; }
.ios-share-icon { display: inline-block; transform: scaleY(-1); }
.install-cta {
    display: block; width: 100%; background: var(--primary-yellow); color: var(--primary-blue);
    border: 3px solid var(--primary-blue); border-radius: 999px; padding: 11px; margin-bottom: 12px;
    font-size: 18px; cursor: pointer;
}
.install-cta:active { transform: translateY(1px); }

#rating-form { padding: 22px 24px 26px; }
.posting-as { font-size: 13px; font-weight: 700; color: var(--primary-blue-light); opacity: 0.8; text-align: center; }

/* Modal connexion/inscription — doodle, comme la page Règles (exception assumée, cf. install-modal) */
.auth-modal-content {
    background-color: #FEFCF5;
    background-image: radial-gradient(#D3D3D3 1px, transparent 1px);
    background-size: 18px 18px;
}
.auth-modal-header { position: relative; padding: 26px 24px 4px; text-align: center; }
.auth-modal-header .close-btn { color: var(--primary-blue); }
.auth-modal-header h2 { font-size: 26px; color: var(--primary-blue); }
.auth-modal-header p { font-size: 16px; margin-top: 6px; }

.auth-form { padding: 18px 24px 26px; }
.auth-form.hidden { display: none; }
.auth-form label { font-family: 'Patrick Hand', cursive; font-size: 19px; }
.auth-error { min-height: 18px; font-size: 13px; font-weight: 700; color: var(--red); margin-top: 10px; text-align: left; }
.auth-message { min-height: 18px; font-size: 15px; font-weight: 700; color: var(--primary-blue); margin-top: 10px; text-align: left; font-family: 'Patrick Hand', cursive; }
.auth-switch { font-family: 'Patrick Hand', cursive; text-align: center; font-size: 16px; color: var(--primary-blue); margin-top: 16px; }
.auth-switch.forgot-link { text-align: right; margin-top: 8px; font-size: 14px; }
.auth-switch-btn { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: var(--primary-blue); text-decoration: underline; cursor: pointer; }

.niveau-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.auth-form .niveau-choice {
    display: flex; align-items: center; gap: 10px;
    border: 2px solid var(--primary-blue); border-radius: 14px;
    padding: 10px 14px; cursor: pointer; background: #fff;
    font-family: 'Patrick Hand', cursive; font-size: 17px; color: var(--primary-blue);
    transition: 0.15s;
}
.niveau-choice input { accent-color: var(--primary-blue); width: 18px; height: 18px; flex-shrink: 0; }
.niveau-choice:has(input:checked) { background: var(--primary-yellow); box-shadow: 3px 3px 0 var(--primary-blue); transform: translate(-1px, -1px); }
label { display: block; font-weight: 700; margin-top: 15px; margin-bottom: 8px; color: var(--primary-blue); font-size: 15px; text-align: left;}
input[type="number"], input[type="text"], input[type="password"], input[type="email"], select, textarea { width: 100%; padding: 14px; border: 2px solid var(--primary-blue); border-radius: 12px; font-size: 16px; background: #fff; font-weight: 700; color: var(--primary-blue); }
textarea { font-family: 'Nunito', sans-serif; font-weight: 400; resize: vertical; }
.field-hint { font-weight: 400; font-size: 12px; color: var(--primary-blue-light); opacity: 0.8; margin-top: 6px; text-align: left; }
.osm-contribute-link {
    display: block; margin-top: 8px; font-size: 12.5px; font-weight: 800;
    color: var(--primary-blue); text-decoration: underline; text-align: left;
}
.osm-contribute-link.hidden { display: none; }

.bar-name-wrap { position: relative; }
.bar-suggestions {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px);
    background: #fff; border: 2px solid var(--primary-blue); border-radius: 14px;
    max-height: 220px; overflow-y: auto; z-index: 20;
    box-shadow: 0 10px 24px rgba(10,35,66,0.28);
}
.bar-suggestions.open { display: block; }
.bar-suggestion-item {
    padding: 12px 16px; cursor: pointer; font-weight: 700; font-size: 14px;
    color: var(--primary-blue); border-bottom: 1px solid #F0F0F0;
}
.bar-suggestion-item:last-child { border-bottom: none; }
.bar-suggestion-item:hover, .bar-suggestion-item:active { background: #FFF6D9; }
.bar-suggestion-empty { padding: 12px 16px; font-size: 13px; color: #888; font-weight: 400; }
input[type="range"] { width: 100%; margin-top: 10px; accent-color: var(--primary-blue); }
.range-val { text-align: center; font-weight: 900; margin-top: 5px; font-size: 18px; color: var(--primary-blue); }

.red-flag { margin-top: 25px; background-color: #FFEAEB; padding: 15px; }
.sketch-border { border: 2px dashed var(--red); border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; transform: rotate(-1deg); }
.red-flag label { color: var(--red); margin: 0; cursor: pointer; display: flex; align-items: center; font-size: 15px; font-weight: 900;}
.red-flag input { margin-right: 12px; transform: scale(1.6); accent-color: var(--red);}

#submit-btn {
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    background: var(--primary-yellow); color: var(--primary-blue); border: 3px solid var(--primary-blue);
    padding: 14px; font-size: 20px; font-weight: 900;
    border-radius: 999px; margin-top: 25px; cursor: pointer;
    box-shadow: 4px 4px 0 rgba(10, 35, 66, 1); transition: 0.2s;
}
#submit-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(10, 35, 66, 1); }

/* ==================================================================
   NAVIGATION — barre basse en mobile, barre haute en desktop
   ================================================================== */
.bottom-nav {
    display: flex; justify-content: space-around; align-items: center;
    background: var(--primary-blue);
    padding: 18px 0;
    /* max() plutôt que le fallback de env() : sur les téléphones sans geste bas (nav 3 boutons),
       env(safe-area-inset-bottom) vaut 0 (pas "non supporté"), donc le fallback de env() ne
       s'applique jamais et on perd tout le coussin sans max(). */
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000;
    box-shadow: 0 -4px 14px rgba(10,35,66,0.25);
}
.nav-item { background: none; border: none; color: rgba(255,255,255,0.6); display: flex; flex-direction: column; align-items: center; font-size: 12px; cursor: pointer; transition: 0.3s; flex: 1; gap: 6px; min-width: 0; }
.nav-item i { font-size: 21px; }
.nav-item span { font-weight: 700; white-space: nowrap; }
.nav-item.active { color: var(--primary-yellow); }
#account-nav-label { display: block; min-width: 0; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bulle "+" flottante, indépendante de la nav (plus de crowding sur mobile) */
.fab-add {
    background: var(--primary-yellow); border: 3px solid var(--bg-color);
    width: 58px; height: 58px; border-radius: 50%;
    position: fixed; right: 18px; bottom: 100px; z-index: 1001;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(10,35,66,0.4);
    cursor: pointer; transition: transform 0.2s;
}
.fab-add:active { transform: scale(0.92); }
.fab-add .add-btn-glass { width: 26px; height: auto; display: block; }
.fab-add .add-btn-plus {
    position: absolute; top: -2px; right: -2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--primary-blue); color: var(--primary-yellow);
    border: 2px solid var(--bg-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 900; line-height: 1;
}

/* ==================================================================
   RESPONSIVE — tablette / desktop : l'appli doit rester confortable
   au clavier+souris, pas juste un mobile agrandi.
   ================================================================== */
@media (min-width: 720px) {
    .info-container { padding: 32px 32px 60px; }
    .doodle-grid { columns: 2 260px; column-gap: 28px; }
    .doodle-grid > * { break-inside: avoid; }
    .skull-doodle { display: block; margin-left: auto; margin-right: auto; }
}

@media (min-width: 960px) {
    .app-header { padding: 18px 32px 22px; }
    .header-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; text-align: left; }
    .brand { justify-content: flex-start; width: auto; margin: 0; }
    .baseline { margin-top: 0; }

    /* La nav reste en bas d'écran, mais flotte en pilule centrée plutôt qu'en barre bord à bord (mobile) */
    .bottom-nav {
        bottom: 24px; left: 50%; right: auto;
        transform: translateX(-50%);
        width: auto; max-width: calc(100% - 48px);
        justify-content: center; gap: 28px;
        padding: 10px 30px;
        border-radius: 999px;
        box-shadow: 0 10px 28px rgba(10,35,66,0.35);
    }
    .nav-item { width: auto; flex: none; flex-direction: row; font-size: 14px; }
    .nav-item i { font-size: 17px; }

    .fab-add { bottom: 24px; right: 24px; }

    .map-search { max-width: 420px; left: 24px; right: auto; }
    .map-legend { top: auto; bottom: 20px; left: 24px; }

    .modal-content { max-width: 460px; }
}