/* =====================================================================================
   Accueil — section « respiration » (entre le carrousel et « Parcourir par région »)
   Fichier ADDITIF : style.css n'est pas modifié (même convention que style-beaux-terrains.css).
   Une accroche, le nombre de terrains, deux boutons vers la page carte, et une carte illustrée
   (images/accueil-carte-parc.webp) avec le marqueur du site et des pastilles qui ouvrent la
   carte filtrée. En filigrane autour du texte, quelques pictos du site aux couleurs de la charte.
   ===================================================================================== */

/* Gris clair des bandes de l'accueil (#f7f9f6) : l'accueil alterne blanc et gris, entre le
   carrousel blanc au-dessus et « Parcourir par région » blanc en dessous. */
.respiration {
    background: #f7f9f6;
    /* Un peu plus que les autres bandes de l'accueil (40px en haut, 56px en bas, voir
       #regions-section) : le banc au-dessus de l'accroche et l'ampoule sous les boutons gardent
       de l'air jusqu'aux bords de la bande. */
    padding: 78px 20px 64px;
    overflow: hidden;
    color: #1D2619;
}

.respiration-contenu {
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(48px, 6vw, 88px);
}

/* ---- Colonne de texte ----
   z-index: 0 en fait un contexte d'empilement : les pictos en filigrane (z-index: -1) passent
   derrière le texte et les boutons sans passer derrière le fond blanc de la section. */
.respiration-texte {
    flex: 1 1 360px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 0;
}

/* Pictos en filigrane : au trait, comme ailleurs sur le site, mais agrandis (57 px, trait
   affiné pour rester léger) et à demi transparents. Placés dans les vides autour du texte (au-
   dessus de l'accroche, gouttière de droite, sous les boutons), jamais dessous. Positions en %
   de la colonne de texte, choisies sur la maquette (maquettes/zone-respiration-v2/). */
.respiration-pictos {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.respiration-picto {
    position: absolute;
    width: 57px;
    height: 57px;
    opacity: 0.5;
}
.respiration-picto svg { display: block; width: 100%; height: 100%; stroke-width: 1.4; }
.respiration-picto.vert { color: #74C15A; }
.respiration-picto.feuillage { color: #3D7A2A; }
.respiration-picto.terre { color: #B5502E; }
/* 11/10/2026 (Rémy) : parapluie et vélo retirés, le banc à l'ancienne place du parapluie mais
   plus bas, l'ampoule remontée : rien n'est plus coupé depuis que la section est moins haute. */
.respiration-picto.p1 { left: 46%;   top: -19%; transform: rotate(-12deg); }
.respiration-picto.p3 { left: 93.5%; top: -9%;  transform: rotate(-6deg); }
.respiration-picto.p4 { left: 102%;  top: 69%;  transform: rotate(14deg); }
.respiration-picto.p5 { left: 64%;   top: 97%; transform: rotate(-10deg); }

.respiration-accroche {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    line-height: 1.1;
    color: #3D7A2A;
}

.respiration-accroche {
    margin: 0;
    font-size: 30px;
    transform: rotate(-2deg);
    transform-origin: left center;
}

.respiration-titre {
    margin: 0;
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.12;
    color: #1D2619;
}

.respiration-intro {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
    color: #56604F;
    max-width: 32em;
}

.respiration-boutons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

/* Mêmes couleurs et arrondi que le bouton « Me localiser » (#locateBtn dans style.css). */
.respiration-bouton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px;
    box-sizing: border-box;
    border-radius: 20px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
}
.respiration-bouton svg { width: 18px; height: 18px; flex: none; }
.respiration-bouton.principal { background: #74C15A; color: #fff; }
.respiration-bouton.principal:hover { background: #56A03D; }
.respiration-bouton.secondaire {
    padding: 0 20px;
    border: 1px solid #74C15A;
    background: #fff;
    color: #3d7a2a;
}
.respiration-bouton.secondaire:hover { background: #E7F4E1; }

/* ---- Colonne de la carte ---- */
.respiration-visuel {
    flex: 1.25 1 440px;
    min-width: 0;
}

.respiration-cadre {
    position: relative;
    background: #fff;
    padding: 8px;
    border: 1px solid #e2e6de;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(30, 50, 20, 0.16);
    transform: rotate(-1.5deg);
}

.respiration-carte {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #eceee9;
}
/* Carte recadrée en bandeau (2:1 au lieu de 4:3) pour qu'elle ne dépasse plus de loin la colonne
   de texte. object-position reprend la hauteur du marqueur (53 %) : le recadrage se fait autour
   de lui, et sa position en % reste juste. */
.respiration-carte > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: 50% 53%;
}

/* Même pin que terrainMarkerIcon (script.js), un peu agrandi ; la pointe est sur le point. */
.respiration-marqueur {
    position: absolute;
    left: 66.5%;
    top: 53%;
    width: 40px;
    height: 62px;
    transform: translate(-50%, -96%);
    filter: drop-shadow(0 3px 4px rgba(20, 40, 10, 0.35));
}

/* ---- Pastilles : mêmes que les filtres de la carte (.filtre-pastille dans style.css) ----
   Deux lignes de trois sur ordinateur (largeur maximale), à cheval sur le bas du cadre. */
.respiration-pastilles {
    position: relative;
    z-index: 2;
    max-width: 390px;
    margin: -20px auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.respiration-pastille {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid #d6dccf;
    border-radius: 999px;
    background: #fff;
    color: #1D2619;
    font-size: 13.5px;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.respiration-pastille svg { width: 16px; height: 16px; flex: none; color: #3d7a2a; }
.respiration-pastille:hover { border-color: #74C15A; }
/* Pastille mise en avant (celle qui correspond à la carte illustrée) : l'aspect d'un filtre actif. */
.respiration-pastille.en-avant { background: #74C15A; border-color: #74C15A; color: #fff; font-weight: bold; }
.respiration-pastille.en-avant svg { color: #fff; }

.respiration a:focus-visible { outline: 2px solid #74C15A; outline-offset: 2px; }

/* Même retrait latéral que le carrousel sur téléphone (voir style-beaux-terrains.css). */
@media (max-width: 640px) {
    .respiration {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Le texte prend toute la largeur : le banc et l'eau dans la bande libre au-dessus de
       l'accroche, la feuille et l'ampoule à droite des deux boutons (placés depuis le bas de la
       colonne, où sont les boutons). */
    .respiration-texte { margin-top: 48px; }
    .respiration-picto { width: 44px; height: 44px; }
    .respiration-picto.p1 { left: 72%; top: -56px; }
    .respiration-picto.p3 { left: 34%; top: -50px; }
    .respiration-picto.p4 { left: 80%; top: auto; bottom: 62px; }
    .respiration-picto.p5 { left: 64%; top: auto; bottom: -2px; }

    /* Sur téléphone, ni carte illustrée (elle doublait la hauteur de la section) ni pastilles :
       restent le texte et les deux boutons vers la carte. */
    .respiration { padding-top: 32px; padding-bottom: 40px; }
    .respiration-intro { font-size: 16px; line-height: 1.55; }
    .respiration-visuel { display: none; }
}