@import url('https://fonts.googleapis.com/css2?family=Oleo+Script&family=Playfair+Display&display=swap');

/* ============================================ */
/* CSS MOBILE - VERSION CORRIGÉE POUR 425px */
/* Force les styles mobiles avec !important */
/* ============================================ */

/* ============================================ */
/* BASE MOBILE */
/* ============================================ */

body {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background-image: url(tree-gadee1280X814.webp) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: center center !important;
    width: 100vw !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
}

header {
    width: 100% !important;
    height: auto !important;
}

/* ============================================ */
/* MASQUER TITRE DESKTOP */
/* ============================================ */

h1.titre {
    display: none !important;
}

/* ============================================ */
/* EN-TÊTE MOBILE */
/* ============================================ */

h1.titremob {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 12px !important;
    margin: 0 !important;
    font-family: 'Playfair Display', serif !important;
    font-style: oblique !important;
    font-size: 0.9em !important;
    color: black !important;
    text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.8) !important;
    gap: 10px !important;
    height: auto !important;
}

div.colonne {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

p.tel {
    font-size: 0.8em !important;
    margin: 0 !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
    background: rgba(255, 255, 255, 0.8) !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
}

span.petit {
    font-size: 0.7em !important;
    margin-top: 3px !important;
}

/* ============================================ */
/* NAVIGATION MOBILE */
/* ============================================ */

nav {
    width: 100% !important;
    height: auto !important;
    padding: 12px 8px !important;
    background-image: url(tree1920X1221_phrase_arbre.jpg) !important;
    background-size: cover !important;
    background-position: center !important;
}

nav ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100% !important;
}

ul li {
    width: 100% !important;
    list-style: none !important;
    margin: 0 !important;
}

li.bulle {
    list-style-image: url(bullereelle20X20.png) !important;
    list-style-position: inside !important;
    text-shadow: 2px 2px 1px white !important;
    font-size: 1.1em !important;
    height: auto !important;
}

nav a {
    display: block !important;
    padding: 12px 18px !important;
    margin: 0 !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 0.95em !important;
    font-style: italic !important;
    font-weight: bold !important;
    color: black !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border-radius: 8px !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.9) !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
}

a {
    color: black !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 1em !important;
    text-decoration: none !important;
    font-style: italic !important;
    font-weight: bold !important;
}

a.blanc {
    color: black !important;
}

a:hover {
    text-shadow: 2px 2px 1px white !important;
    font-size: 1em !important;
}

/* ============================================ */
/* CONTENU PRINCIPAL */
/* ============================================ */

section.suite {
    height: auto !important;
    margin-top: 0 !important;
    padding: 15px 10px !important;
}

section.ensemble {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
}

/* ============================================ */
/* PAGE ACCUEIL - PHRASE D'ACCROCHE */
/* ============================================ */

p.accroche-home {
    background-image: url("tree1920X1042degrade.webp") !important;
    opacity: 0.9 !important;
    padding: 15px 18px !important;
    border-radius: 15px !important;
    font-size: 0.95em !important;
    text-align: center !important;
    margin: 15px auto !important;
    width: 88% !important;
    max-width: 380px !important;
    font-style: italic !important;
    color: #1a3a0f !important;
    font-weight: 500 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
}

/* ============================================ */
/* CARTES DE SERVICE */
/* ============================================ */

.services-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 15px auto !important;
    padding: 0 12px !important;
    width: 100% !important;
    max-width: 380px !important;
}

.service-card {
    background-image: url("tree1920X1042degrade.webp") !important;
    opacity: 0.9 !important;
    padding: 18px 15px !important;
    border-radius: 12px !important;
    text-align: center !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
}

.service-icon {
    font-size: 2.2em !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.service-card h3 {
    font-family: 'Playfair Display', serif !important;
    color: #1a3a0f !important;
    margin: 8px 0 !important;
    font-size: 1.05em !important;
    background: none !important;
    height: auto !important;
    padding: 0 !important;
    position: static !important;
    text-shadow: none !important;
    width: auto !important;
}

.service-card p {
    color: #2d2d2d !important;
    font-size: 0.88em !important;
    line-height: 1.5 !important;
    margin: 5px 0 0 0 !important;
}

/* ============================================ */
/* BOUTON CTA */
/* ============================================ */

a.cta-button {
    display: block !important;
    background: linear-gradient(135deg, #4a7c2c 0%, #2d5016 100%) !important;
    color: white !important;
    padding: 14px 30px !important;
    border-radius: 50px !important;
    font-size: 1.15em !important;
    font-family: 'Playfair Display', serif !important;
    text-decoration: none !important;
    margin: 25px auto !important;
    width: fit-content !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    min-height: 44px !important;
    text-shadow: none !important;
}

/* ============================================ */
/* FLÈCHES DE NAVIGATION */
/* ============================================ */

.scroll-arrow-down,
.scroll-arrow-up {
    text-align: center !important;
    margin: 25px auto !important;
}

.scroll-arrow-down a,
.scroll-arrow-up a {
    display: inline-flex !important;
    width: 48px !important;
    height: 48px !important;
    background: linear-gradient(135deg, #4a7c2c 0%, #2d5016 100%) !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.scroll-arrow-down a i,
.scroll-arrow-up a i {
    color: white !important;
    font-size: 1.4em !important;
}

/* ============================================ */
/* SECTION PARCOURS - PAGE ACCUEIL */
/* ============================================ */

section.parcours-home {
    padding: 35px 12px 25px 12px !important;
    margin-top: 20px !important;
    position: relative !important;
}

h3.parcours-bubble {
    font-family: 'Playfair Display', serif !important;
    font-size: 1.3em !important;
    color: white !important;
    text-shadow: 3px 3px 5px black !important;
    width: 150px !important;
    height: 150px !important;
    padding-top: 60px !important;
    background-image: url("bullereelle150X151.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    text-align: center !important;
    margin: 0 auto 20px auto !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
}

.parcours-home-content {
    background-image: url("tree1920X1042degrade.webp") !important;
    border-radius: 12px !important;
    padding: 18px !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2) !important;
    margin: 0 !important;
    position: static !important;
}

.parcours-home-photo {
    display: block !important;
    width: 100px !important;
    height: auto !important;
    border-radius: 10px !important;
    margin: 0 auto 18px auto !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important;
    float: none !important;
}

.parcours-home-text {
    overflow: auto !important;
}

.parcours-home-title {
    font-family: 'Playfair Display', serif !important;
    color: #1a3a0f !important;
    font-size: 1.05em !important;
    font-weight: 600 !important;
    margin-top: 15px !important;
    margin-bottom: 8px !important;
    padding-bottom: 5px !important;
    border-bottom: 2px solid rgba(26, 58, 15, 0.3) !important;
}

.parcours-home-title:first-of-type {
    margin-top: 0 !important;
}

.parcours-home-text p {
    color: #2d2d2d !important;
    font-size: 0.88em !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
    text-align: justify !important;
}

.parcours-home-text p.parcours-home-highlight {
    background: rgba(255, 255, 255, 0.7) !important;
    padding: 10px 12px !important;
    border-left: 3px solid #4a7c2c !important;
    border-radius: 5px !important;
    font-style: italic !important;
    margin: 12px 0 !important;
}

.parcours-home-text p.parcours-home-mission {
    background: linear-gradient(135deg, rgba(74, 124, 44, 0.5) 0%, rgba(45, 80, 22, 0.5) 100%) !important;
    padding: 12px !important;
    border: 2px solid #4a7c2c !important;
    border-radius: 8px !important;
    font-size: 0.95em !important;
    font-weight: 600 !important;
    text-align: center !important;
    margin: 15px 0 !important;
    color: #1a3a0f !important;
    line-height: 1.6 !important;
}

.parcours-home-cta {
    text-align: center !important;
    margin-top: 20px !important;
    clear: both !important;
}

.btn-parcours-contact {
    display: inline-block !important;
    background: linear-gradient(135deg, #4a7c2c 0%, #2d5016 100%) !important;
    color: white !important;
    padding: 12px 28px !important;
    border-radius: 50px !important;
    font-size: 1em !important;
    font-family: 'Playfair Display', serif !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    min-height: 44px !important;
    text-shadow: none !important;
}

/* ============================================ */
/* SECTION ACTU */
/* ============================================ */

div.actu {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 20px 12px !important;
    margin-top: 25px !important;
    height: auto !important;
    width: 100% !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
}

h3.actu {
    font-family: 'Playfair Display', serif !important;
    font-size: 1.3em !important;
    color: white !important;
    text-shadow: 3px 3px 5px black !important;
    width: 150px !important;
    height: 150px !important;
    padding-top: 60px !important;
    background-image: url("bullereelle150X151.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    text-align: center !important;
    margin: 0 auto 20px auto !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
}

.facebook-widget {
    width: 95% !important;
    max-width: 480px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 12px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
}

p.actu {
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    width: 90% !important;
    font-size: 0.85em !important;
    margin: 15px auto !important;
    padding: 12px !important;
    left: auto !important;
    top: auto !important;
}

/* ============================================ */
/* IMAGES */
/* ============================================ */

img {
    font-family: 'Oleo Script', cursive !important;
    float: none !important;
    width: auto !important;
}

img.atelier1,
img.atelier2,
img.atelier1-1 {
    width: 85% !important;
    height: auto !important;
    margin: 10px auto !important;
    display: block !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
    float: none !important;
    position: static !important;
}

img.atelier1a {
    width: 85% !important;
    margin: 10px auto !important;
}

div.cote {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
    margin: 12px 0 !important;
}

div.acote {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
}

/* ============================================ */
/* SECTIONS GÉNÉRALES */
/* ============================================ */

section.audrey,
section.sophro,
section.deroule,
section.champs,
section.groupes {
    padding: 25px 12px !important;
    font-family: 'Oleo Script', cursive !important;
    height: auto !important;
    width: 100% !important;
    position: static !important;
}

section.audrey {
    display: flex !important;
    flex-direction: column !important;
}

h3.audrey,
h3.sophro,
h3.deroule,
h3.champs,
h3.deroulegroupe,
h3.galerie {
    font-family: 'Playfair Display', serif !important;
    font-size: 1.2em !important;
    color: white !important;
    text-shadow: 3px 3px 5px black !important;
    width: 140px !important;
    height: 140px !important;
    padding-top: 55px !important;
    background-image: url("bullereelle150X151.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    text-align: center !important;
    margin: 0 auto 18px auto !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
}

/* PARAGRAPHES */
p {
    font-family: sans-serif !important;
    font-size: 0.88em !important;
    line-height: 1.6 !important;
    margin: 0 5px 12px 5px !important;
    padding: 0 !important;
}

p.audrey,
p.duree,
p.pratiques,
p.outils,
p.lieu,
p.organisees,
p.objectif,
p.adultes,
p.enfants,
p.duo,
p.domicile,
p.amelioration,
p.accompagnement,
p.preparation,
p.maitrise,
p.cabinetdecou,
p.entretabli {
    padding: 16px !important;
    font-size: 0.88em !important;
    line-height: 1.6 !important;
    background-image: url("tree1920X1042degrade.webp") !important;
    opacity: 0.9 !important;
    border-radius: 10px !important;
    margin: 12px auto !important;
    width: 88% !important;
    max-width: 450px !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
}

p.audrey {
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

dd.sophro {
    padding: 18px !important;
    font-size: 0.88em !important;
    line-height: 1.6 !important;
    background-image: url("tree1920X1042degrade.webp") !important;
    opacity: 0.9 !important;
    border-radius: 10px !important;
    margin: 18px 10px !important;
    position: static !important;
    width: auto !important;
}

/* ============================================ */
/* FORMULAIRE */
/* ============================================ */

div.formulaire {
    margin: 18px auto !important;
    width: 88% !important;
    max-width: 450px !important;
    position: static !important;
    top: auto !important;
}

p.form {
    font-family: 'Playfair Display', serif !important;
    font-size: 0.85em !important;
}

form {
    color: black !important;
    width: 100% !important;
    padding: 18px !important;
    font-size: 0.85em !important;
    background-image: url("tree1920X1042degrade.webp") !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}

fieldset {
    font-size: 0.85em !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin: 8px 0 !important;
}

/* ============================================ */
/* SECTION CONTACT */
/* ============================================ */

section.contact {
    display: flex !important;
    flex-direction: column !important;
    padding: 20px 12px !important;
    height: auto !important;
    min-height: auto !important;
}

div.vertical {
    width: 100% !important;
}

h3.phone,
h3.adresse {
    font-family: 'Playfair Display', serif !important;
    font-size: 1em !important;
    color: white !important;
    text-shadow: 2px 2px 3px black !important;
    width: 130px !important;
    height: 130px !important;
    padding-top: 50px !important;
    background-image: url("bullereelle150X151.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    text-align: center !important;
    margin: 15px auto !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
}

address {
    color: black !important;
    font-size: 0.95em !important;
    text-align: center !important;
    margin: 12px 0 !important;
}

p.indic {
    width: 88% !important;
    max-width: 400px !important;
    margin: 18px auto !important;
    padding: 12px !important;
    color: black !important;
    font-size: 0.85em !important;
    background-image: url("tree1920X1042degrade.webp") !important;
    opacity: 0.9 !important;
    border-radius: 12px !important;
    text-align: center !important;
    line-height: 1.6 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
}

p.contact {
    margin: 18px auto !important;
    width: 88% !important;
    max-width: 400px !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
}

/* ============================================ */
/* GALERIE */
/* ============================================ */

div.grille {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    padding: 18px 12px !important;
    width: 100% !important;
    grid-template-columns: none !important;
}

.card {
    width: 90% !important;
    max-width: 380px !important;
    margin: 0 auto !important;
    border: 2px solid lightgrey !important;
    padding: 5px !important;
    box-shadow: 2px 2px 5px lightgrey !important;
    border-radius: 8px !important;
}

img.galerie_h,
img.galerie_v {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    float: none !important;
}

/* ============================================ */
/* FOOTER MOBILE */
/* ============================================ */

footer {
    position: relative !important;
    padding: 18px 10px !important;
    margin-top: 25px !important;
    text-align: center !important;
    height: auto !important;
    min-height: 110px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    background-image: url(tree639X157.jpg) !important;
    background-size: cover !important;
    background-position: center !important;
    gap: 12px !important;
    top: 0 !important;
}

div.pc {
    display: none !important;
}

div.mobile {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 12px 10px !important;
    height: auto !important;
    background: none !important;
}

div.accueil {
    display: flex !important;
    width: auto !important;
    min-height: 44px !important;
    height: auto !important;
    border-radius: 20px !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 10px 22px !important;
    background: rgba(255, 255, 255, 0.8) !important;
}

a.accueil {
    text-decoration: none !important;
    text-shadow: 1px 1px 2px white !important;
    font-size: 0.9em !important;
    color: black !important;
    font-weight: 600 !important;
    background: none !important;
}

p.copy,
p.copyright {
    font-family: 'Playfair Display', serif !important;
    font-size: 0.75em !important;
    text-shadow: 2px 2px 2px white !important;
    margin: 5px 0 !important;
    text-align: center !important;
    width: auto !important;
}

/* ============================================ */
/* RÉSEAUX SOCIAUX */
/* ============================================ */

div.rescontmob {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-top: 25px !important;
    padding: 0 !important;
    width: 100% !important;
    background: none !important;
}

p.retr {
    text-align: center !important;
    font-size: 0.75em !important;
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    margin-bottom: 0 !important;
    width: auto !important;
}

div.reseauxcontact {
    font-size: 0.8em !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: rgba(224, 224, 224, 0.9) !important;
    text-align: center !important;
    height: auto !important;
}

ul.reseauxcontact {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    padding-left: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
    height: auto !important;
    width: auto !important;
}

ul.reseauxcontact li {
    width: 42px !important;
    height: 42px !important;
    font-size: 1.3em !important;
    border-radius: 50% !important;
    background: #e0e0e0 !important;
    box-shadow: 5px 5px 10px #c3c3c3, -5px -5px 10px #fdfdfd !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 4px !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
    margin-bottom: 20px !important;
}

ul.reseauxcontact li:nth-child(1) i {
    color: rgb(36, 129, 233) !important;
    font-size: 0.8em !important;
}

ul.reseauxcontact li:nth-child(2) i {
    color: rgb(77, 204, 91) !important;
    font-size: 0.9em !important;
}

ul.reseauxcontact li:nth-child(3) i {
    color: rgb(215, 51, 137) !important;
    font-size: 0.9em !important;
}

ul.reseauxcontact li:nth-child(4) i {
    color: rgb(27, 159, 241) !important;
    font-size: 0.9em !important;
}

/* ============================================ */
/* DIVERS */
/* ============================================ */

em.decale {
    margin-left: 0 !important;
}

div.retrait {
    margin-left: 12px !important;
}

span.underline {
    text-decoration: underline !important;
}

section.flex {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
}

p.relax {
    width: 88% !important;
    max-width: 450px !important;
    margin: 18px auto !important;
    padding: 16px !important;
    border-radius: 20px !important;
    background-image: url("tree1920X1042degrade.webp") !important;
    opacity: 0.9 !important;
    font-size: 0.9em !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

section.bas {
    margin-top: 20px !important;
}

section.groupe {
    padding: 15px !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    margin-left: 5% !important;
    border-radius: 10px !important;
    text-align: center !important;
    width: 88% !important;
    font-family: "Nunito", serif !important;
    color: black !important;
    font-size: 1em !important;
    background-image: url("tree1920X1042degrade.webp") !important;
    opacity: 0.8 !important;
    position: static !important;
    top: auto !important;
}

p.seantretabli {
    display: none !important;
}

h2 {
    margin-left: 20px !important;
}

div.gauche,
div.droite,
div.gauche_groupe {
    background-image: url(tree1920X1042degrade.webp) !important;
    opacity: 0.9 !important;
    border-radius: 10px !important;
    position: static !important;
    bottom: auto !important;
    top: auto !important;
    height: auto !important;
}

div.bas {
    min-height: auto !important;
    padding-top: 15px !important;
    height: auto !important;
}

div.colonne {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

em.petit {
    font-size: 0.8em !important;
}

/* ============================================ */
/* AJUSTEMENTS POUR TRÈS PETITS ÉCRANS */
/* ============================================ */

@media screen and (max-width: 380px) {
    h1.titremob {
        font-size: 0.8em !important;
        padding: 12px 8px !important;
    }
    
    p.tel {
        font-size: 0.7em !important;
        padding: 5px 8px !important;
    }
    
    nav a {
        padding: 10px 15px !important;
        font-size: 0.9em !important;
    }
    
    .service-card,
    p.audrey,
    dd.sophro {
        padding: 14px !important;
        font-size: 0.82em !important;
    }
    
    h3.parcours-bubble,
    h3.actu,
    h3.audrey,
    h3.sophro {
        width: 120px !important;
        height: 120px !important;
        font-size: 1.1em !important;
        padding-top: 45px !important;
        background-image: url("bullereelle100X101.webp") !important;
    }
}