:root {
    /* Valeur de repli avant que le JS ne mesure la vraie hauteur du footer (voir ajusterHauteurFooter) */
    --footer-height: 90px;
}

html {
    scroll-behavior: smooth;
}

html, body {
    overflow-x: hidden;
    margin: 0;
}

body {
    font-family: Arial, sans-serif;
    /* Laisse toujours la place au footer fixe, pour qu'il ne recouvre jamais le bas du contenu */
    padding-bottom: var(--footer-height);
}

/* Bloc "carte plein écran" : header + contrôles + carte occupent exactement la hauteur visible
   au chargement, moins la place réservée au footer fixe (toujours visible en bas). Le contenu qui
   suit (statistiques, futures sections) est du flux normal de page, révélé simplement en scrollant. */
.map-view {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--footer-height));
    height: calc(100svh - var(--footer-height)); /* tient compte des barres d'interface mobiles quand le navigateur le supporte */
    position: relative;
}

#map {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
}

/* Bouton plein écran : injecté par script.js comme un vrai contrôle Leaflet (même famille que
   le zoom et le sélecteur Plan/Satellite), donc son positionnement/empilement dans le coin de la
   carte et son style de boîte (fond blanc, bordure) sont déjà gérés par Leaflet lui-même. */
#fullscreenBtn {
    display: flex;
    align-items: center;
    justify-content: center;
}

#fullscreenBtn .btn-icon {
    width: 16px;
    height: 16px;
}

/* Mode plein écran : la carte (avec ses contrôles de recherche) occupe tout le viewport, header et
   liens "Ajouter un terrain" masqués. z-index 1060 : au-dessus du footer fixe (1050) pour le
   recouvrir entièrement, mais sous les panneaux menu/info/partage (1100+) au cas où l'un d'eux
   était resté ouvert. */
.map-view.fullscreen-active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh !important;
    height: 100svh !important;
    z-index: 1060;
    background: white;
}

.map-view.fullscreen-active .header,
.map-view.fullscreen-active #browseListBtn,
.map-view.fullscreen-active .add-terrain-link-wrapper,
.map-view.fullscreen-active .search-error {
    display: none;
}

.map-view.fullscreen-active #map {
    height: 100%;
}

/* Empêche la page de scroller derrière la carte tant que le plein écran est actif */
body.fullscreen-lock {
    overflow: hidden;
}

/* Section statistiques, sous le bloc carte : contenu normal, toujours affiché */
#stats-section {
    scroll-margin-top: 10px;
    background-color: #f7f9f6;
    padding: 50px 20px 60px;
}

.stats-container {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.stats-container h2 {
    margin: 0 0 28px;
    font-size: 26px;
    color: #333;
}

.stats-headline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 24px;
}

.stats-headline-number {
    font-weight: 700;
    font-size: 56px;
    color: #74C15A;
    line-height: 1;
}

.stats-headline-label {
    font-size: 15px;
    color: #555;
}

/* Tuiles résumé des 3 régions, au-dessus de l'entonnoir */
.stats-regions-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}

.stats-region-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 127px;
    text-decoration: none;
    background: white;
    border: 1px solid #e2e6de;
    border-radius: 12px;
    padding: 16px 8px;
    transition: border-color 0.15s ease, transform 0.15s ease;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.stats-region-tile-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 92%;
    height: 92%;
    transform: translate(-50%, -50%);
    color: #000;
    opacity: 0.05;
    pointer-events: none;
}

.stats-region-tile-number,
.stats-region-tile-name,
.stats-region-tile-density {
    position: relative;
    z-index: 1;
}

.stats-region-tile-density {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}

.stats-region-tile:hover {
    border-color: #74C15A;
    transform: translateY(-2px);
}

.stats-region-tile-number {
    font-weight: 700;
    font-size: 24px;
    color: #333;
    line-height: 1;
}

.stats-region-tile-name {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

/* Entonnoir région > province > commune, en accordéons imbriqués (même pattern que la FAQ) */
#stats-geo-tree {
    text-align: left;
}

.stats-geo-loading,
.stats-geo-error {
    font-size: 13px;
    font-style: italic;
    color: #999;
    text-align: center;
}

.stats-region-details {
    background: white;
    border: 1px solid #e2e6de;
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
}

.stats-region-details summary,
.stats-province-details summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding: 12px 28px 12px 16px;
    font-weight: bold;
    font-size: 14px;
    color: #444;
}

.stats-province-details summary {
    padding-left: 4px;
    font-size: 13px;
}

.stats-region-details summary::-webkit-details-marker,
.stats-province-details summary::-webkit-details-marker {
    display: none;
}

.stats-region-details > summary::after,
.stats-province-details > summary::after {
    content: "+";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #74C15A;
    transition: transform 0.2s ease;
}

.stats-province-details > summary::after {
    right: 0;
}

.stats-region-details[open] > summary::after,
.stats-province-details[open] > summary::after {
    transform: translateY(-50%) rotate(45deg);
}

.stats-details-count {
    font-size: 12px;
    color: #999;
    font-weight: normal;
}

.stats-region-content {
    padding: 0 16px 12px;
}

.stats-province-details {
    border-top: 1px solid #eee;
    padding: 4px 0;
}

.stats-province-details:first-child {
    border-top: none;
}

.stats-commune-list-wrapper {
    padding: 8px 4px 4px;
}

.stats-commune-search {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 12px;
    border: 1px solid #ddd;
    border-radius: 16px;
    font-size: 12px;
    margin-bottom: 8px;
}

.stats-commune-list {
    max-height: 280px;
    overflow-y: auto;
}

.stats-commune-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #f2f2f2;
}

.stats-commune-row:last-child {
    border-bottom: none;
}

.stats-commune-link {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 4px;
    font-size: 12px;
    color: #555;
    text-decoration: none;
    cursor: pointer;
}

.stats-commune-link:hover {
    color: #74C15A;
}

.stats-commune-toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: none;
    color: #999;
    cursor: pointer;
}

.stats-commune-toggle svg {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
}

.stats-commune-toggle.open svg {
    transform: rotate(180deg);
}

.stats-commune-toggle:hover {
    color: #74C15A;
}

.stats-terrain-list {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 0 6px 16px;
}

.stats-terrain-link {
    font-size: 11px;
    color: #888;
    text-decoration: none;
    padding: 3px 0;
    cursor: pointer;
}

.stats-terrain-link:hover {
    color: #74C15A;
    text-decoration: underline;
}

.stats-commune-no-result {
    font-size: 12px;
    font-style: italic;
    color: #999;
    text-align: center;
    padding: 8px 0;
}

@media (max-width: 600px) {
    .stats-regions-tiles {
        gap: 6px;
    }

    .stats-region-tile {
        padding: 12px 4px;
        min-height: 110px;
    }

    .stats-region-tile-number {
        font-size: 20px;
    }
}

/* Flèche indiquant la direction du terrain le plus proche, quand aucun n'est visible à l'écran */
.nearest-arrow {
    position: absolute;
    z-index: 900;
    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;
    gap: 6px;

    background: #74C15A;
    color: white;
    padding: 8px 14px 8px 10px;
    border-radius: 20px;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);

    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    cursor: pointer;
}

.nearest-arrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}

.nearest-arrow-icon svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 600px) {
    .nearest-arrow-label {
        display: none;
    }

    .nearest-arrow {
        padding: 10px;
        border-radius: 50%;
    }
}

/* En-tête : grille à 3 colonnes symétriques (langue | titre | nav) en desktop, empilée sur mobile.
   La grille garantit un centrage réel du titre, même si langue et nav n'ont pas la même largeur. */
.header {
    display: flex;
    flex-direction: column;
    padding: 20px 30px 8px;
    flex: 0 0 auto;
}

.header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.brand-link {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    flex-shrink: 0;
}

.logo {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.brand {
    font-family: 'Quicksand', Arial, sans-serif;
    font-weight: 700;
    font-size: 27.6px;
    color: #333;
}

.brand-tld {
    color: #999;
    font-weight: 400;
}

.logo {
    height: 2.07em;
    width: auto;
    display: block;
}

/* Grand titre au-dessus des contrôles de recherche, inspiré d'AllTrails */
.hero-headline {
    text-align: center;
    font-weight: 700;
    font-size: 32px;
    color: #333;
    margin: 32px 0 4px;
    line-height: 1.25;
}

/* Navigation desktop : liens directs vers le panneau d'info + sélecteur de langue discret */
#desktop-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Sélecteur de langue discret (repli manuel ; la détection automatique suffit dans l'immense
   majorité des cas, donc pas besoin d'un bouton bien visible comme avant) */
#lang-switcher-inline {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 6px;
    padding-left: 10px;
    border-left: 1px solid #e2e2e2;
}

.lang-link {
    border: none;
    background: none;
    padding: 6px 8px;
    font-size: 12px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    border-radius: 12px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.lang-link:hover {
    color: #74C15A;
}

.lang-link.active {
    color: #74C15A;
    background: rgba(116, 193, 90, 0.1);
}

.info-nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: none;
    text-decoration: none;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: bold;
    color: #444;
    cursor: pointer;
    border-radius: 20px;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.info-nav-trigger:hover {
    background: rgba(116, 193, 90, 0.1);
    color: #74C15A;
}

/* Barre de liens vers les sections de contenu sous la carte (Statistiques, puis d'autres),
   alignée à gauche, juste au-dessus de la bordure haute de la carte.
   Réutilisée aussi pour le lien "Revenir en haut" juste sous cette bordure. */
/* Menu burger : masqué en desktop, réservé au mobile */
#menu-button {
    display: none;
}

@media (max-width: 1024px) {

    .header {
        padding: 14px 15px 8px;
    }

    .brand {
        font-size: 23px;
    }

    .logo {
        width: 28.75px;
        height: 28.75px;
    }

    .hero-headline {
        font-size: 22px;
        margin: 22px 0 4px;
    }

    /* La navigation desktop (incluant le sélecteur de langue) cède la place au menu burger */
    #desktop-nav {
        display: none;
    }

    #menu-button {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        width: 40px;
        height: 40px;

        border: none;
        border-radius: 50%;
        background: white;
        font-size: 22px;
        cursor: pointer;

        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
}

.subtitle {
    text-align: center;
}

/* Jeu de mots Map + (p)étanque dans le titre */
.brand-map {
    font-weight: 700;
    color: #74C15A;
}

/* Bouton de localisation */
#locateBtn,
#browseListBtn {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px auto;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    background-color: #74C15A;
    color: white;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
}

#locateBtn .btn-icon,
#browseListBtn .btn-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

#locateBtn:hover,
#browseListBtn:hover {
    background-color: #56A03D;
}

/* Barre de contrôles : bouton localiser + recherche d'adresse */
.controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    margin: 10px auto;
    padding: 0 15px;
}

.controls #locateBtn,
.controls #browseListBtn {
    margin: 0;
}

.search-form {
    position: relative;
    display: flex;
    align-items: center;
}

.search-form input {
    padding: 12px 16px 12px 42px;
    border: 1px solid #ccc;
    border-radius: 24px;
    font-size: 15px;
    width: 240px;
    max-width: 60vw;
    box-sizing: border-box;
}

.search-form input:focus {
    outline: none;
    border-color: #74C15A;
}

.search-form button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    padding: 0;
    color: #888;
    cursor: pointer;
}

.search-form button svg {
    width: 18px;
    height: 18px;
}

.search-form button:hover {
    color: #56A03D;
}

.add-terrain-link-wrapper {
    text-align: center;
    margin: 20px 0 6px;
    flex: 0 0 auto;
}

#add-terrain-link {
    color: #56A03D;
    font-size: 14px;
    font-weight: bold;
    text-decoration: underline;
}

#add-terrain-link:hover {
    color: #74C15A;
}

.search-error {
    text-align: center;
    color: #c62828;
    font-size: 14px;
    margin: 0 0 6px;
    min-height: 6px;
    flex: 0 0 auto;
}

@media (max-width: 600px) {
    .search-form input {
        width: 180px;
        max-width: 55vw;
    }
}

/* Panneau de partage (modal centré) */
#share-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1400;
}

#share-overlay.visible {
    display: block;
}

#share-panel {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1450;

    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    padding: 25px;
    width: 300px;
    max-width: 85vw;
}

#share-panel.open {
    display: block;
}

#share-close {
    float: right;
    border: none;
    background: none;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
}

.share-title {
    font-weight: bold;
    font-size: 16px;
    margin: 0 0 18px;
    clear: both;
    padding-top: 4px;
}

.share-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.share-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    font-size: 15px;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.share-link:hover {
    background: #f0f4f9;
}

.share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    color: #555;
}

.share-icon svg {
    width: 18px;
    height: 18px;
}

/* Liens dans les popups de terrain (itinéraire, partager) :
   seul le texte est souligné, pas l'icône ni l'espace qui le sépare du texte */
.leaflet-popup-content a {
    text-decoration: none;
}

.popup-link-text {
    text-decoration: underline;
}

/* Icônes SVG dans les popups de terrain (accès, distance, itinéraire, partager) */
.popup-icon,
.popup-link-icon {
    display: inline-flex;
    vertical-align: middle;
    color: #666;
}

.popup-icon svg,
.popup-link-icon svg {
    width: 14px;
    height: 14px;
    vertical-align: middle;
}

.popup-link-icon {
    color: #74C15A;
}

/* Photo du terrain dans le popup (issue d'un tag OSM image=/wikimedia_commons=/mapillary=,
   voir resoudre_photo() dans update_terrains.py) */
.popup-photo {
    display: block;
    width: 100%;
    max-height: 140px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 4px;
}

.popup-photo-credit {
    font-size: 11px;
    color: #999;
}

/* Marqueur de position utilisateur */
/* Marqueur de terrain (pin vert) : ombre portée pour se détacher de tous les fonds de carte */
.terrain-marker-icon {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.user-location {
    background: transparent;
    border: none;
}

.user-location div {
    width: 18px;
    height: 18px;
    background: #1976d2;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0,0,0,0.4);
}

/* Menu latéral */
#side-menu {
    position: fixed;
    top: 0;
    right: -300px;

    width: 280px;
    height: 100%;
    box-sizing: border-box;

    background: white;
    z-index: 1200;

    padding: 25px;

    transition: right 0.3s ease;

    box-shadow: -3px 0 10px rgba(0,0,0,0.2);
}

#side-menu.open {
    right: 0;
}

#side-menu ul {
    list-style: none;
    padding: 50px 0 0;
}

#side-menu li {
    margin: 25px 0;
}

#side-menu a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
}

/* Sélecteur de langue discret en bas du menu burger */
#side-menu-lang {
    display: flex;
    gap: 6px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

#side-menu-lang .lang-link {
    font-size: 14px;
    padding: 8px 12px;
    background: #f5f5f5;
}

#side-menu-lang .lang-link.active {
    background: #74C15A;
    color: white;
}

/* Bouton fermeture */
#close-menu {
    float: right;
    border: none;
    background: none;
    font-size: 25px;
    cursor: pointer;
}

/* Fond sombre derrière le menu */
#menu-overlay {
    display: none;

    position: fixed;
    inset: 0;

    background: rgba(0,0,0,0.3);
    z-index: 1100;
}

#menu-overlay.visible {
    display: block;
}

/* Panneau d'info coulissant */
#info-panel {
    position: fixed;
    top: 0;
    right: -500px;
    width: 475px;
    max-width: 85vw;
    height: 100%;

    background-color: white;
    z-index: 1300;

    padding: 30px 25px;
    box-sizing: border-box;
    overflow-y: auto;

    transition: right 0.3s ease;
    box-shadow: -3px 0 10px rgba(0,0,0,0.2);
}

#info-panel.open {
    right: 0;
}

#info-content {
    margin-top: 18px;
}

/* Chaque page (À propos / FAQ / Contact) est construite une seule fois au chargement ;
   seule celle correspondant à l'onglet actif est affichée. */
.info-page {
    display: none;
}

.info-page.active {
    display: block;
}

/* Mini-navigation en haut du panneau (À propos / Contact / FAQ) */
#info-nav {
    display: flex;
    gap: 6px;
    clear: both;
    padding-top: 15px;
    border-bottom: 1px solid #e0e0e0;
}

.info-nav-link {
    flex: 1;
    border: none;
    background: none;
    padding: 10px 4px;
    font-size: 14px;
    font-weight: bold;
    color: #777;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.info-nav-link:hover {
    color: #74C15A;
}

.info-nav-link.active {
    color: #74C15A;
    border-bottom-color: #74C15A;
}

#info-panel p {
    line-height: 1.6;
    color: #333;
}

/* FAQ en accordéon */
.faq-item {
    border-bottom: 1px solid #e0e0e0;
    padding: 12px 0;
}

.faq-item summary {
    cursor: pointer;
    font-weight: bold;
    font-size: 15px;
    color: #1a1a1a;
    list-style: none;
    position: relative;
    padding-right: 24px;
    line-height: 1.4;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 0;
    font-size: 20px;
    color: #74C15A;
    transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
    content: "+";
    transform: rotate(45deg);
}

.faq-item p {
    margin: 10px 0 0;
    color: #555;
    font-size: 14px;
}

#close-info {
    float: right;
    border: none;
    background: none;
    font-size: 25px;
    cursor: pointer;
}

#info-overlay {
    display: none;

    position: fixed;
    inset: 0;

    background: rgba(0,0,0,0.3);
    z-index: 1250;
}

#info-overlay.visible {
    display: block;
}

@media (max-width: 600px) {
    #info-panel {
        width: 100%;
        max-width: 100vw;
    }
}

/* Pied de page */
footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Doit passer au-dessus des contrôles Leaflet (zoom, attribution, calques), qui ont un
       z-index de 1000 par défaut — sinon l'attribution "Leaflet | © OpenStreetMap" en bas à
       droite de la carte peut chevaucher le footer. Reste sous les panneaux de l'app (menu,
       info, partage), qui commencent à 1100. */
    z-index: 1050;

    /* Hauteur fixe choisie pour rester compacte tout en laissant assez de place au texte
       + aux icônes de partage sur une seule ligne, y compris en mobile */
    height: 44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 30px;
    background: #f5f5f5;
    color: #444;
    font-size: 14px;
    line-height: 1.6;
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex: 1;
    min-width: 0;
    gap: 12px;
}

@media (max-width:600px) {
    footer {
        padding: 0 15px;
        font-size: 13px;
    }

    .footer-content {
        justify-content: center;
    }
}

footer h3 {
    margin-top: 0;
}

footer a {
    color: #74C15A;
    text-decoration: none;
}

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

.footer-small {
    font-size: 13px;
    color: #777;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.footer-stats-icon {
    display: inline-flex;
    vertical-align: middle;
    color: #999;
}

.footer-stats-icon svg {
    width: 13px;
    height: 13px;
    vertical-align: middle;
}

/* Icônes de partage du site, dans le footer */
.footer-share {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.footer-share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #999;
    border: none;
    background: none;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.footer-share-icon svg {
    width: 14px;
    height: 14px;
}

.footer-share-icon:hover {
    color: #74C15A;
    background: rgba(116, 193, 90, 0.1);
    text-decoration: none;
}

.footer-share-copied {
    color: #74C15A !important;
}

/* Bulle de confirmation "Lien copié !" au-dessus de l'icône */
.footer-share-copy-wrapper {
    position: relative;
    display: inline-flex;
}

.copy-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);

    background: #74C15A;
    color: white;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 6px;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.copy-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #74C15A;
}

.copy-tooltip.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}