/* ============================================================
   map.css
   ------------------------------------------------------------
   Styles de la carte Leaflet, des marqueurs, du popup-fruit,
   de la tige SVG et des particules de fermeture.
   ============================================================ */

/* ============================================================
   MAP WRAPPER
   ------------------------------------------------------------
   Conteneur global placé dans le module Code Divi.
   Il contient #festival-map et éventuellement les éléments overlay.
   ============================================================ */
#map-wrapper{
    position:relative;              /* permet aux enfants absolus de se référer à ce bloc */
    width:100%;                     /* pleine largeur du parent Divi */
    height:80vh;                    /* hauteur dynamique : 80% de la hauteur écran */
    min-height:700px;               /* garde une carte confortable sur desktop */
    overflow:hidden;                /* masque les débordements visuels de la carte */
    border-radius:28px;             /* arrondi esthétique du bloc carte */
    background:#f7f5f0;             /* couleur de fond douce si les tuiles chargent lentement */
    box-shadow:0 25px 80px rgba(0,0,0,0.12); /* profondeur douce */
}

/* Conteneur réel utilisé par Leaflet pour initialiser la carte. */
#festival-map{
    width:100%;
    height:100%;                    /* indispensable : Leaflet a besoin d'une hauteur réelle */
}

/* ============================================================
   LEAFLET
   ------------------------------------------------------------
   Ajustements visuels du rendu Leaflet standard.
   ============================================================ */
.leaflet-container{
    background:#f7f5f0;
    font-family:inherit;            /* hérite de la typo du site */
}

/* Rend le fond CARTO plus doux et moins technique. */
.leaflet-tile{
    filter:saturate(0.75) contrast(1.03) brightness(1.02);
}

/* Attribution plus discrète, tout en restant visible. */
.leaflet-control-attribution{
    opacity:0.45;
    font-size:10px;
}

/* ============================================================
   SVG GROWTH
   ------------------------------------------------------------
   Couche SVG créée par map.js dans le pane Leaflet overlayPane.
   Elle contient la tige, les branches et les fleurs/feuilles.
   ============================================================ */
#growth-layer{
    overflow:visible;               /* autorise les éléments SVG à dépasser légèrement */
}

/* Tige principale. */
.growth-path{
    opacity:0.95;
    filter:
        drop-shadow(0 0 4px rgba(126,217,87,0.45))
        drop-shadow(0 0 10px rgba(126,217,87,0.25));
}

/* Nœuds décoratifs au bout des branches. */
.growth-node{
    transform-origin:center center;
    filter:drop-shadow(0 0 6px rgba(255,180,120,0.45));
}

/* ============================================================
   MARKERS
   ------------------------------------------------------------
   Marqueurs Leaflet custom via L.divIcon.
   Chaque marker contient :
   - .dot : point rond coloré visible au repos
   - .sprout : pousse visible au survol
   ============================================================ */
.festival-marker{
    background:transparent !important;
    border:none !important;
}

/* Zone interne du marqueur. */
.marker-inner{
    position:relative;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:auto;            /* garantit que le marker reste cliquable */
}

/* Point rond initial. */
.dot{
    position:absolute;
    width:14px;
    height:14px;
    border-radius:50%;
    box-shadow:0 0 12px rgba(0,0,0,0.15);
    transition:transform 0.45s ease, opacity 0.45s ease;
    transform-origin:center center;
}

/* Pousse masquée au repos. */
.sprout{
    position:absolute;
    font-size:18px;
    opacity:0;
    transform:scale(0.25) translateY(8px);
    transition:transform 0.5s ease, opacity 0.45s ease;
    filter:drop-shadow(0 0 8px rgba(126,217,87,0.6));
    transform-origin:center center;
}

/* Au hover : le point se rétracte. */
.marker-inner.hover .dot{
    transform:scale(0.15);
    opacity:0;
}

/* Au hover : la pousse apparaît et grandit. */
.marker-inner.hover .sprout{
    opacity:1;
    transform:scale(1.15) translateY(-8px);
}

/* ============================================================
   POPUP
   ------------------------------------------------------------
   Nettoyage du style Leaflet par défaut afin que le fruit-popup
   soit seul visuellement.
   ============================================================ */
.organic-popup .leaflet-popup-content-wrapper{
    background:transparent;
    box-shadow:none;
    overflow:visible;
}

.organic-popup .leaflet-popup-content{
    margin:0;
}

.organic-popup .leaflet-popup-tip{
    display:none;                   /* supprime la petite pointe Leaflet */
}

/* ============================================================
   FRUIT POPUP
   ------------------------------------------------------------
   Fruit circulaire contenant les infos du festival.
   ============================================================ */
.fruit-popup{
    width:280px;
    min-height:280px;
    border-radius:50%;
    padding:34px;
    background:radial-gradient(circle at top left,#ffe29a,#ffb347);
    color:white;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    position:relative;
    z-index:1000;                   /* reste au-dessus de la tige */
    transform-origin:center center;
    box-shadow:0 30px 80px rgba(0,0,0,0.28);
    animation:fruitBreathing 5s ease-in-out infinite;
}

/* Halo doux autour du fruit. */
.fruit-popup::before{
    content:'';
    position:absolute;
    inset:-18px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
    z-index:-1;
    animation:fruitGlow 4s ease-in-out infinite;
}

/* Emoji fruit principal. */
.fruit-emoji{
    font-size:58px;
    margin-bottom:12px;
    filter:drop-shadow(0 4px 10px rgba(0,0,0,0.15));
}

/* Titre du festival. */
.fruit-popup h2{
    font-size:20px;
    margin:0 0 8px 0;
}

/* Ancienne classe meta, gardée si on revient à une ligne pays/date combinée. */
.fruit-popup .meta{
    font-size:15px;
    opacity:0.85;
    margin-top:6px;
    margin-bottom:6px;
}

/* Pays affiché dans le popup. */
.fruit-country{
    font-size:20px;
    font-weight:bold;
}

/* Date affichée dans le popup. */
.fruit-date{
    font-size:20px;
    font-weight:bold;
    color:#00B1D2;
}

/* Description courte. */
.fruit-popup p{
    font-size:14px;
    line-height:1.45;
    margin:0;
    opacity:0.96;
}

/* Note : .festival-button est utilisé dans le HTML mais n'est pas encore stylé ici.
   On pourra ajouter son style dans une prochaine passe. */
.fruit-button {
    display: inline-block;
    padding: 10px 18px;
    background: white;
    color: #ff8f00;
    border-radius: 999px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
}

.fruit-button:hover {
    transform: scale(1.05);
    background: #fff8e1;
}

/* ============================================================
   PETALS
   ------------------------------------------------------------
   Particules HTML créées au moment de la fermeture du fruit.
   ============================================================ */
.petal{
    position:fixed;                 /* coordonnées viewport, car les pétales sont ajoutés au body */
    width:12px;
    height:12px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,190,230,0.25));
    pointer-events:none;
    z-index:999999;
    filter:blur(0.5px);
    will-change:transform,opacity;  /* optimisation animation */
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fruitBreathing{
    0%{transform:scale(1);}
    50%{transform:scale(1.025);}
    100%{transform:scale(1);}
}

@keyframes fruitGlow{
    0%{opacity:0.4; transform:scale(0.96);}
    50%{opacity:0.75; transform:scale(1.04);}
    100%{opacity:0.4; transform:scale(0.96);}
}

/* ============================================================
   RESPONSIVE
   ------------------------------------------------------------
   Ajustements mobile/tablette.
   ============================================================ */
@media (max-width:768px){
    #map-wrapper{
        height:75vh;
        min-height:600px;
    }

    .fruit-popup{
        width:220px;
        min-height:220px;
        padding:24px;
    }

    .fruit-popup h2{font-size:18px;}
    .fruit-popup p{font-size:13px;}
    .fruit-emoji{font-size:44px;}
}