:root {
    --sage: #7a9e7e;
    --sage-dark: #5a7d5e;
    --sage-light: #a8c5ab;
    --sage-pale: #eaf2eb;
    --cream: #faf7f2;
    --warm-white: #fffdf9;
    --sand: #e8ddd0;
    --sand-dark: #c9b99f;
    --terracotta: #c17f5a;
    --text: #2d2d2d;
    --text-light: #6b6b6b;
    --text-xlight: #9a9a9a;
    --radius: 12px;
    --radius-lg: 20px;
    --shadow: 0 4px 24px rgba(90, 125, 94, 0.10);
    --shadow-lg: 0 8px 40px rgba(90, 125, 94, 0.15);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Nunito', sans-serif;
    background: var(--warm-white);
    color: var(--text);
    line-height: 1.7;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 80px 0;
}

.section-cream {
    background: var(--cream);
}

.section-sage {
    background: var(--sage-pale);
}

.tag {
    display: inline-block;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sage-dark);
    margin-bottom: 12px;
}

.section-title {
    font-family: 'Amatic SC', cursive;
    font-size: clamp(36px, 5vw, 54px);
    font-weight: 700;
    color: var(--text);
    line-height: 1.15;
    margin-bottom: 16px;
}

.section-intro {
    font-size: 16px;
    color: var(--text-light);
    max-width: 560px;
    margin-bottom: 48px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 50px;
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
}

.btn-primary {
    background: var(--sage);
    color: #fff;
}

.btn-primary:hover {
    background: var(--sage-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.btn-outline {
    background: transparent;
    color: var(--sage-dark);
    border: 2px solid var(--sage);
}

.btn-outline:hover {
    background: var(--sage-pale);
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    backdrop-filter: blur(0px);
    border-bottom: 1px solid transparent;
    transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
}

header.scrolled {
    background: rgba(255, 253, 249, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--sand);
}

header nav a {
    transition: color 0.3s ease;
}

header .header-tel {
    transition: color 0.4s ease, background 0.35s ease,
    box-shadow 0.35s ease, transform 0.25s ease;
}

header:not(.scrolled) .logo-name {
    color: #fff;
}

header:not(.scrolled) .logo-sub {
    color: rgba(255, 255, 255, 0.6);
}

header:not(.scrolled) nav a {
    color: rgba(255, 255, 255, 0.85);
}

header:not(.scrolled) .header-tel {
    color: rgba(255, 255, 255, 0.9);
}

/* Survol en haut de page (header transparent sur la photo) : une pastille
   translucide apparaît en fondu. Le liseré est fait en box-shadow « inset »
   plutôt qu'en border, pour ne provoquer aucun décalage de mise en page. */
header:not(.scrolled) .header-tel:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 6px 18px rgba(0, 0, 0, 0.14);
    transform: translateY(-1px);
}

header.scrolled .header-tel {
    background: var(--sage);
    color: #fff;
    box-shadow: 0 2px 10px rgba(90, 125, 94, 0.25);
}

header.scrolled .header-tel:hover {
    background: var(--sage-dark);
    box-shadow: 0 4px 16px rgba(90, 125, 94, 0.32);
    transform: translateY(-1px);
}

header:not(.scrolled) .btn-primary {
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    max-width: 1300px;
    margin: 0 auto;
}

.logo {
    display: flex;
    flex-direction: column;
}

.logo-name {
    font-family: 'Amatic SC', cursive;
    font-size: 48px;
    font-weight: 700;
    color: var(--sage-dark);
    line-height: 1;
    letter-spacing: 1px;
}

.logo-sub {
    font-size: 11px;
    color: var(--text-xlight);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 2px;
}

header .logo-name {
    transform: scale(1.4167);
    transform-origin: left center;
}

header .logo-sub {
    display: block;
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
}

header.logo-collapsed .logo-name {
    transform: scale(1);
}

header.logo-collapsed .logo-sub {
    opacity: 1;
    max-height: 48px;
    margin-top: 2px;
}

header.logo-anim .logo-name {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s ease;
}

header.logo-anim .logo-sub {
    transition: opacity 0.3s ease, max-height 0.4s ease, margin-top 0.4s ease, color 0.4s ease;
}

nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

nav a {
    font-size: 16px;
    color: var(--text-light);
    font-weight: 600;
    transition: color 0.2s;
    position: relative;
}

nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--sage-dark);
    border-radius: 2px;
    transition: width 0.25s ease;
}

nav a:hover {
    color: var(--sage-dark);
}

nav a:hover::after {
    width: 100%;
}

header:not(.scrolled) nav a::after {
    background: rgba(255, 255, 255, 0.75);
}

header:not(.scrolled) nav a:hover {
    color: #fff;
}

nav a[aria-current="page"] {
    color: var(--sage-dark);
}

nav a[aria-current="page"]::after {
    width: 100%;
}

header:not(.scrolled) nav a[aria-current="page"] {
    color: #fff;
}

header:not(.scrolled) nav a[aria-current="page"]::after {
    width: 100%;
    background: rgba(255, 255, 255, 0.75);
}

.header-cta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-tel {
    font-size: 14px;
    font-weight: 600;
    color: var(--sage-dark);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    border-radius: 50px;
}

.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
}

.burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: all 0.3s;
}

header:not(.scrolled) .burger span {
    background: #fff;
}

.drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 200;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.drawer-overlay.open {
    display: block;
    opacity: 1;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 80vw;
    max-width: 340px;
    height: 100dvh;
    background: var(--warm-white);
    z-index: 300;
    display: flex;
    flex-direction: column;
    padding: 80px 32px 40px;
    gap: 4px;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
}

.mobile-menu.open {
    transform: translateX(0);
}

.mobile-menu a {
    font-family: 'Amatic SC', cursive;
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    padding: 10px 0;
    border-bottom: 1px solid var(--sand);
    transition: color 0.2s;
}

.mobile-menu a:hover {
    color: var(--sage-dark);
}

.mobile-menu a:last-child {
    border-bottom: none;
}

.mobile-menu .mobile-tel {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--sage-dark);
    padding: 16px 0 0;
    margin-top: 8px;
    border-bottom: none !important;
}

.drawer-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-light);
    padding: 8px;
    line-height: 1;
}

.title-accent {
    font-style: italic;
    color: var(--sage-dark);
}

.section-text {
    color: var(--text-light);
    font-size: 16px;
    line-height: 1.8;
}

.mb-8 {
    margin-bottom: 8px;
}

.mb-28 {
    margin-bottom: 28px;
}

.cta-center {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: center;
}

.btn-lg {
    font-size: 15px;
    padding: 16px 36px;
}

.btn-block {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
}

.link-sage {
    color: var(--sage-dark);
}

.tag-light {
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 2px;
}

.title-light {
    color: #fff;
    margin-bottom: 24px;
}

.sophrologie-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.sophrologie-visual {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 3/4;
    background: var(--sage-pale);
}

.sophrologie-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sophrologie-content {
}

.what-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
}

.what-card {
    display: flex;
    gap: 16px;
    background: #fff;
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    border-left: 3px solid var(--sage-light);
}

.what-card-icon {
    font-size: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.what-card-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 4px;
}

.what-card-desc {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.5;
}

.services-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 48px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.service-card {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.25s, box-shadow 0.25s;
}

/* Les effets de survol sont réservés aux appareils dotés d'un vrai pointeur.
   Sur écran tactile, le navigateur simule un survol « collant » au premier
   appui : le bouton « En savoir plus » restait grisé après un premier tap, et
   iOS consomme ce premier appui, d'où la nécessité de taper deux fois. */
@media (hover: hover) {
    html:not(.is-touch) .service-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
    }

    html:not(.is-touch) .service-card:hover .service-card-img img {
        transform: scale(1.03);
    }
}

.service-card-img {
    aspect-ratio: 16/9;
    background: var(--sage-pale);
    overflow: hidden;
}

.service-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.service-card-body {
    padding: 24px;
}

.service-card-icon {
    font-size: 28px;
    margin-bottom: 12px;
}

.service-card-title {
    font-family: 'Amatic SC', cursive;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 8px;
}

.service-card-desc {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 16px;
}

.service-card-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--sage-dark);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.3s;
}

@media (hover: hover) {
    html:not(.is-touch) a.service-card-link:hover,
    html:not(.is-touch) button.service-card-link:hover {
        opacity: 0.6;
    }
}

/* Le lien « En savoir plus » peut être un <button> (ouverture de modale) :
   on réinitialise l'apparence par défaut du bouton. */
button.service-card-link {
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
    /* supprime le délai d'attente du double-tap-zoom : l'appui est pris en
       compte immédiatement */
    touch-action: manipulation;
    /* zone de touche confortable au doigt sans décaler la mise en page */
    padding-block: 6px;
    margin-block: -6px;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 48px;
    align-items: stretch;
}

.testimonial-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow);
    position: relative;
    display: flex;
    flex-direction: column;
}

.testimonial-card::before {
    content: '"';
    font-family: 'Amatic SC', cursive;
    font-size: 100px;
    color: var(--sage-pale);
    position: absolute;
    top: 8px;
    left: 20px;
    line-height: 1;
}

.testimonial-stars {
    color: #f4b942;
    font-size: 14px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.testimonial-text {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 20px;
    font-style: italic;
    position: relative;
    z-index: 1;
    flex-grow: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-top: auto;
}

.author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sage-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.author-name {
    font-weight: 600;
    font-size: 14px;
}

.author-detail {
    font-size: 12px;
    color: var(--text-xlight);
}

.animaux-section {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
}

.animaux-bg {
    position: absolute;
    inset: 0;
    background-image: url('ressources/animaux.jpg');
    background-size: cover;
    background-position: center 40%;
    background-attachment: fixed;
    z-index: 0;
}

.animaux-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(20, 15, 10, 0.20) 0%, rgba(30, 20, 10, 0.5) 100%);
    z-index: 1;
}

.animaux-content {
    position: relative;
    z-index: 2;
}

.animaux-inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.animaux-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 16px;
}

.animaux-text-sm {
    color: rgba(255, 255, 255, 0.75);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 40px;
}

.badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-bottom: 40px;
}

.animaux-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    padding: 10px 20px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

footer {
    background: #1e2820;
    color: #fff;
    padding: 64px 0 0;
}

.footer-inner {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-brand .logo-name {
    color: var(--sage-light);
    font-size: 26px;
}

.footer-brand .logo-sub {
    color: rgba(255, 255, 255, 0.35);
    font-size: 10px;
}

.footer-tagline {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.7;
    margin-top: 16px;
    max-width: 280px;
}

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.2s;
    text-decoration: none;
}

.footer-social a:hover {
    border-color: var(--sage-light);
    color: var(--sage-light);
}

.footer-col-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sage-light);
    margin-bottom: 20px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.2s;
    text-decoration: none;
}

.footer-links a:hover {
    color: #fff;
}

.footer-bottom {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.25);
    flex-wrap: wrap;
    gap: 8px;
}

.footer-bottom a {
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.2s;
}

.footer-bottom a:hover {
    color: var(--sage-light);
}

@media (min-width: 769px) and (max-width: 1100px) {
    .header-inner {
        padding: 14px 16px;
    }

    .logo-name {
        font-size: 22px;
    }

    .logo-sub {
        font-size: 9px;
        letter-spacing: 1px;
    }

    nav {
        gap: 18px;
    }

    nav a {
        font-size: 13px;
    }

    .header-tel {
        font-size: 12px;
        gap: 4px;
    }

    .header-cta .btn {
        font-size: 12px !important;
        padding: 8px 14px !important;
    }
}

@media (max-width: 900px) {
    nav, .header-tel {
        display: none;
    }

    .burger {
        display: flex;
    }

    .header-cta .btn {
        display: none;
    }
}

@media (max-width: 768px) {
    .section {
        padding: 56px 0;
    }

    .container {
        padding: 0 16px;
    }

    .section-intro {
        font-size: 15px;
    }

    .sophrologie-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sophrologie-visual {
        display: none;
    }

    .what-card {
        padding: 14px 16px;
    }

    .what-card-icon {
        font-size: 20px;
    }

    .services-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 32px;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .service-card-img {
        aspect-ratio: 16/7;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .testimonial-card {
        padding: 22px;
    }

    .animaux-section {
        padding: 80px 0 !important;
    }

    .animaux-section .badges-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .animaux-section .badges-row .animaux-badge {
        justify-content: center;
    }

    footer {
        padding: 40px 0 0;
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 32px 24px;
        padding-bottom: 32px;
    }

    .footer-brand {
        grid-column: 1 / -1;
        padding-bottom: 24px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .footer-contact {
        grid-column: 1 / -1;
    }

    .footer-tagline {
        max-width: 100%;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: clamp(32px, 9vw, 44px);
    }
}

/* Déroulement d'une séance (page sophrologie) : parcours en étapes
   Grandes cartes souples décalées à gauche/droite ; un pointillé sinueux (tracé
   en SVG par main.js) relie le bas de chaque carte au haut de la suivante. Le
   numéro d'étape est un pastille placée en haut, à l'intérieur de la carte. */
.deroulement-path {
    position: relative;
    max-width: 900px;
    margin: 48px auto 0;
}

/* Le chemin : courbes lisses en pointillés dessinées dans les intervalles
   entre les cartes. Le tracé (d) est calculé dynamiquement (main.js). */
.deroulement-trail {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 0;
    pointer-events: none;
}

/* Le fil est désormais fait de <circle> individuels, posés le long de la
   courbe par main.js, pour pouvoir s'allumer un par un. Le tracé qui servait
   à le dessiner d'un bloc n'existe plus : il ne reste qu'un tracé de mesure,
   rangé dans <defs> et donc jamais rendu. On ne lui applique volontairement
   aucun style, une règle « .deroulement-trail path » l'atteindrait aussi. */
.deroulement-point {
    fill: var(--sage);
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.deroulement-fil.est-visible .deroulement-point {
    opacity: 1;
}

html:not(.js-anim) .deroulement-point {
    opacity: 1;
    transition: none;
}

.deroulement-step {
    position: relative;
    display: flex;
    z-index: 1;
}

.deroulement-step + .deroulement-step {
    margin-top: 120px;
}

/* Grande carte souple et arrondie, décalée d'un côté */
.deroulement-card {
    position: relative;
    width: calc(50% - 12px);
    background: #fff;
    border: 1px solid var(--sage-pale);
    border-radius: 28px;
    padding: 30px 34px 32px;
    box-shadow: var(--shadow);
    z-index: 2;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.deroulement-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg, 0 18px 40px rgba(94, 116, 90, 0.16));
}

.deroulement-step--left .deroulement-card {
    margin-right: auto;
}

.deroulement-step--right .deroulement-card {
    margin-left: auto;
}

/* En-tête de carte : le numéro et l'intitulé sur une même ligne */
.deroulement-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

/* Pastille numérotée : taille/graisse plus marquées que l'intitulé
   pour que le chiffre ressorte bien. */
.deroulement-badge {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--sage-pale);
    border: 2px solid var(--sage);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Amatic SC', cursive;
    font-size: 32px;
    font-weight: 700;
    color: var(--sage-dark);
    margin: 0;
}

.deroulement-step-title {
    font-family: 'Amatic SC', cursive;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text);
    margin-bottom: 0;
}

.deroulement-step-text {
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

ul.deroulement-step-text {
    padding-left: 18px;
}

ul.deroulement-step-text li + li {
    margin-top: 4px;
}

.deroulement-note {
    background: var(--sage-pale);
    border-radius: 28px;
    padding: 24px 28px;
    margin-top: 40px;
}

.deroulement-note p {
    color: var(--text);
    font-size: 14px;
    line-height: 1.7;
}

.deroulement-note p + p {
    margin-top: 10px;
}

/* En mobile : cartes pleine largeur empilées, le pointillé devient
   un simple trait vertical d'une carte à l'autre. */
@media (max-width: 720px) {
    .deroulement-step + .deroulement-step {
        margin-top: 56px;
    }

    .deroulement-card,
    .deroulement-step--left .deroulement-card,
    .deroulement-step--right .deroulement-card {
        width: 100%;
        margin: 0;
    }
}

/* Modale (élément <dialog> natif) : réutilisable sur tout le site.
   La <dialog> occupe tout l'écran et porte elle-même le voile sombre, au lieu
   de s'en remettre au ::backdrop natif : sur mobile, quand la barre du
   navigateur se replie après l'ouverture, la zone visible s'agrandit et le
   ::backdrop ne suivait pas, une bande de page restait non assombrie en bas.
   Un élément fixe calé sur les quatre bords, lui, se réajuste. */
.modal {
    position: fixed;
    inset: 0;
    z-index: 900;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 12px;
    border: none;
    overflow: hidden;
    background: rgba(45, 55, 45, 0.55);
}

.modal[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Le voile étant porté par la modale, le ::backdrop reste transparent :
   sans quoi les deux se cumuleraient et l'arrière-plan serait trop sombre. */
.modal::backdrop {
    background: transparent;
}

/* Ossature fixe : en-tête et bouton d'action restent en place, seul le corps
   du texte défile. « max-height: 100% » se cale sur la modale plein écran,
   donc s'ajuste tout seul si la zone visible change. */
.modal-box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    max-height: 100%;
    overflow: hidden;
    background: #fff;
    border-radius: 28px;
    padding: 40px 40px 36px;
    box-shadow: 0 30px 80px rgba(45, 55, 45, 0.28);
    text-align: center;
}

.modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: var(--sage-pale);
    color: var(--sage-dark);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    touch-action: manipulation;
}

@media (hover: hover) {
    html:not(.is-touch) .modal-close:hover {
        background: var(--sage);
        color: #fff;
        transform: rotate(90deg);
    }
}

/* En-tête et pied : hauteur fixe, ils ne se compriment pas et ne défilent pas */
.modal-icon {
    flex-shrink: 0;
    font-size: 40px;
    margin-bottom: 10px;
}

.modal-title {
    flex-shrink: 0;
    font-family: 'Amatic SC', cursive;
    font-size: 38px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 18px;
}

/* Seul élément qui défile quand la place manque. « min-height: 0 » est
   indispensable : sans lui, un élément flex refuse de descendre sous la
   taille de son contenu et c'est toute la modale qui déborderait. */
.modal-body {
    text-align: left;
    overflow-y: auto;
    min-height: 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.modal-body p {
    color: var(--text-light);
    font-size: 15px;
    line-height: 1.75;
}

.modal-body p + p {
    margin-top: 14px;
}

/* .modal-box est en flex-column : sans cela le bouton s'étirerait sur
   toute la largeur au lieu de rester centré. */
.modal-cta {
    flex-shrink: 0;
    align-self: center;
    margin-top: 28px;
}

/* Ouverture animée : fondu du fond + apparition douce de la boîte */
.modal[open] {
    animation: modal-fade 0.25s ease;
}

.modal[open] .modal-box {
    animation: modal-pop 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.modal[open]::backdrop {
    animation: modal-fade 0.25s ease;
}

@keyframes modal-fade {
    from {
        opacity: 0;
    }
}

@keyframes modal-pop {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }
}

/* Fermeture animée : le voile et la boîte disparaissent en fondu au lieu de
   s'effacer d'un coup. La classe .modal--closing est posée par main.js le
   temps de l'animation, puis la <dialog> est réellement fermée. Placé après
   les règles d'ouverture pour l'emporter tant que [open] est encore présent. */
.modal.modal--closing {
    animation: modal-fade-out 0.22s ease forwards;
}

.modal.modal--closing .modal-box {
    animation: modal-pop-out 0.22s ease forwards;
}

@keyframes modal-fade-out {
    to {
        opacity: 0;
    }
}

@keyframes modal-pop-out {
    to {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
}

/* Verrou de défilement de la page quand une modale est ouverte.
   La compensation (posée par main.js) remplace la largeur de la barre de
   défilement qui disparaît : sans elle, toute la page se décalait
   latéralement à l'ouverture, ce qui donnait un effet de saut. */
html.modal-open,
body.modal-open {
    overflow: hidden;
}

html.modal-open {
    padding-right: var(--compensation-barre, 0px);
}

@media (max-width: 560px) {
    /* Sur téléphone, on resserre l'ensemble pour que la modale tienne d'un
       seul écran, sans défilement. */
    .modal-box {
        padding: 24px 20px 22px;
        border-radius: 24px;
    }

    /* La fleur est purement décorative : elle coûte de la hauteur pour rien */
    .modal-icon {
        display: none;
    }

    /* Interligne resserré : c'est le principal gain de hauteur */
    .modal-body p {
        font-size: 14.5px;
        line-height: 1.5;
    }

    .modal-body p + p {
        margin-top: 10px;
    }

    .modal-cta {
        margin-top: 18px;
    }

    .modal-close {
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
    }

    /* Marge symétrique : le titre reste centré tout en dégageant la croix */
    .modal-title {
        font-size: 28px;
        margin-bottom: 12px;
        padding: 0 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal[open],
    .modal[open] .modal-box,
    .modal[open]::backdrop,
    .modal.modal--closing,
    .modal.modal--closing .modal-box {
        animation: none;
    }
}

/* Apparitions douces au scroll : cibles masquées jusqu'à .is-visible (posé par main.js).
   Masquage conditionné à .js-anim (ajouté en <head> avant le 1er rendu) -> aucun clignotement ;
   un filet de sécurité (event load) réaffiche tout si le JS ne s'exécute pas. */
html.js-anim :is(
    .tag, .section-title, .section-intro, .section-text,
    .what-card, .service-card, .offre-card, .testimonial-card,
    .price-card, .giftcard, .podcast-card, .pricing-note,
    .sophrologie-visual, .pourquoi-visual, .pourquoi-quote,
    .contact-form-wrap, .contact-item, .animaux-inner, .animaux-badge,
    .cta-center, .offres-cta, .podcast-platforms,
    .mercredis-cards > div, .mercredis-themes > div,
    .deroulement-note,
    .reiki-pillar, .reiki-benefit,
    .reiki-preceptes li,
    .legal h2, .legal p, .legal ul,
    section[style*="140px"] p,
    .podcasts-grid p, .podcasts-grid > div > div > div,
    .podcasts-grid .service-card-link, .section-sage [style*="background:#fff"]
) {
    opacity: 0;
    /* Le léger retrait d'échelle fait que l'élément se « pose » au lieu de
       glisser : associé à une courbe qui décélère longuement, on retrouve le
       mouvement d'une expiration qui s'achève. */
    transform: translateY(22px) scale(0.985);
    transition: opacity 0.9s cubic-bezier(0.16, 0.68, 0.32, 1),
                transform 0.9s cubic-bezier(0.16, 0.68, 0.32, 1);
}

html.js-anim .is-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* ============================================================
   RESPIRATION
   Vocabulaire de mouvement commun à tout le site. Le parti pris
   est celui de la sophrologie : des cycles lents (6 à 10 s), de
   très faibles amplitudes, et des courbes symétriques qui évoquent
   l'inspiration puis l'expiration. Rien ne doit attirer l'oeil
   volontairement : le mouvement se remarque seulement si on le
   cherche. Uniquement transform et opacity, pour rester composité
   par le navigateur et ne provoquer aucun recalcul de mise en page.
   ============================================================ */

/* Inspiration / expiration : dilatation à peine perceptible. */
@keyframes respiration {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.045); }
}

/* Flottement : léger soulèvement, comme un souffle qui porte. */
@keyframes flottement {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

/* Halo : auréole douce qui s'écarte puis revient. L'animation porte sur
   l'opacité et l'échelle d'un calque dédié, jamais sur box-shadow : une ombre
   animée se repeint à chaque image, alors qu'opacité et transform restent
   à la charge du compositeur. */
@keyframes halo-doux {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50%      { opacity: 0.75; transform: scale(1.06); }
}

/* --- Pastilles et icônes ---------------------------------------
   Le décalage par nth-child évite que tout respire à l'unisson,
   ce qui ferait mécanique. Les durées légèrement différentes d'un
   groupe à l'autre entretiennent ce désynchronisme dans la durée. */
.what-card-icon,
.offre-icon,
.service-card-icon,
.reiki-benefit-icon,
.pricing-note-icon,
.mercredis-theme-icon,
.deroulement-badge,
.modal-icon {
    animation: respiration 6.5s ease-in-out infinite;
}

/* Les 6 thèmes des mercredis sont côte à côte : sans décalage, ils
   respireraient d'un seul bloc. Le pas de 1,1 s les fait onduler. */
.mercredis-themes > div:nth-child(2) .mercredis-theme-icon { animation-delay: -1.1s; }
.mercredis-themes > div:nth-child(3) .mercredis-theme-icon { animation-delay: -2.2s; }
.mercredis-themes > div:nth-child(4) .mercredis-theme-icon { animation-delay: -3.3s; }
.mercredis-themes > div:nth-child(5) .mercredis-theme-icon { animation-delay: -4.4s; }
.mercredis-themes > div:nth-child(6) .mercredis-theme-icon { animation-delay: -5.5s; }

.what-card:nth-child(2) .what-card-icon,
.offre-card:nth-child(2) .offre-icon,
.service-card:nth-child(2) .service-card-icon,
.reiki-benefit:nth-child(2) .reiki-benefit-icon,
.pricing-note:nth-child(2) .pricing-note-icon { animation-delay: -2.1s; }

.what-card:nth-child(3) .what-card-icon,
.offre-card:nth-child(3) .offre-icon,
.service-card:nth-child(3) .service-card-icon,
.reiki-benefit:nth-child(3) .reiki-benefit-icon,
.pricing-note:nth-child(3) .pricing-note-icon { animation-delay: -4.3s; }

.reiki-benefit:nth-child(4) .reiki-benefit-icon { animation-delay: -1.2s; }
.reiki-benefit:nth-child(5) .reiki-benefit-icon { animation-delay: -3.4s; }

/* Les jalons du parcours de séance : cycle plus long, décalage plus
   marqué, pour accompagner la lecture d'une étape à la suivante. */
.deroulement-card:nth-child(2) .deroulement-badge { animation-delay: -1.6s; }
.deroulement-card:nth-child(3) .deroulement-badge { animation-delay: -3.2s; }
.deroulement-card:nth-child(4) .deroulement-badge { animation-delay: -4.8s; }

/* --- Visuels ----------------------------------------------------
   L'animation porte sur l'image, jamais sur son conteneur : celui-ci
   est piloté par l'apparition au défilement, qui impose transform:none. */
.sophrologie-visual img,
.pourquoi-visual img {
    animation: flottement 9s ease-in-out infinite;
}

.pourquoi-visual img { animation-delay: -3s; }

/* --- Appel à l'action principal ---------------------------------
   Seul le bouton du haut de page respire : un unique point d'appel,
   sinon la page entière clignote. Le halo est un calque posé derrière
   le bouton, sans incidence sur la mise en page ni sur les clics. */
/* Pas de isolation:isolate ici : cela créerait un contexte d'empilement, et le
   calque en z-index négatif se peindrait alors PAR-DESSUS le fond du bouton au
   lieu de passer derrière. En restant en z-index automatique, le halo file bien
   sous le bouton. */
.btn-hero-primary {
    position: relative;
}


/* --- Mouvement réduit -------------------------------------------
   Un visiteur qui demande moins d'animation (réglage système, souvent
   posé pour cause de vertiges ou de migraines) ne doit plus rien voir
   bouger en continu. L'apparition au défilement, elle, est déjà
   neutralisée côté JavaScript : le contenu s'affiche directement. */
@media (prefers-reduced-motion: reduce) {
    .what-card-icon,
    .offre-icon,
    .service-card-icon,
    .reiki-benefit-icon,
    .pricing-note-icon,
    .mercredis-theme-icon,
    .deroulement-badge,
    .modal-icon,
    .sophrologie-visual img,
    .pourquoi-visual img,
    .btn-hero-primary::before {
        animation: none;
    }
}

/* --- Cheminement d'une séance -----------------------------------
   Mise en scène : chaque étape reste en retrait tant que le fil ne
   l'a pas rejointe. La classe est-visible est posée par main.js au
   rythme du tracé. L'apparition porte sur l'étape et le flottement
   sur la carte : deux éléments distincts, sinon l'un écraserait la
   transformation de l'autre. */
.deroulement-step {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.75s cubic-bezier(0.16, 0.68, 0.32, 1),
                transform 0.75s cubic-bezier(0.16, 0.68, 0.32, 1);
}

.deroulement-step.est-visible {
    opacity: 1;
    transform: none;
}

/* Sans JavaScript, rien ne poserait est-visible : le filet de sécurité
   du <head> retire js-anim et tout redevient lisible. */
html:not(.js-anim) .deroulement-step {
    opacity: 1;
    transform: none;
}

/* Dérive très lente, façon nuage : un léger va-et-vient vertical doublé
   d'un souffle horizontal, sur des durées volontairement différentes pour
   que le mouvement ne se répète jamais tout à fait à l'identique. */
@keyframes derive-nuage {
    0%, 100% { transform: translate3d(0, 0, 0); }
    30%      { transform: translate3d(2px, -5px, 0); }
    65%      { transform: translate3d(-2px, -7px, 0); }
}

/* Uniquement sur grand écran : en colonne unique, ce balancement
   n'apporterait rien et gênerait la lecture. */
@media (min-width: 721px) {
    .deroulement-card {
        animation: derive-nuage 14s ease-in-out infinite;
    }

    /* nth-of-type et non nth-child : le <svg> du fil est le premier enfant du
       conteneur, il décalerait tout le comptage d'un rang. */
    .deroulement-step:nth-of-type(2) .deroulement-card { animation-delay: -3.5s; }
    .deroulement-step:nth-of-type(3) .deroulement-card { animation-delay: -7s; }
    .deroulement-step:nth-of-type(4) .deroulement-card { animation-delay: -10.5s; }

    /* La carte dérive déjà : au survol, on renforce l'ombre et le liseré
       plutôt que d'ajouter une translation, qui serait écrasée par
       l'animation en cours. */
    .deroulement-card:hover {
        transform: none;
        border-color: var(--sage-light);
        box-shadow: var(--shadow-lg, 0 18px 40px rgba(94, 116, 90, 0.16));
    }
}

@media (prefers-reduced-motion: reduce) {
    .deroulement-card { animation: none; }

    .deroulement-step {
        opacity: 1;
        transform: none;
        transition: none;
    }

    /* Le fil s'affiche d'emblée, sans se dessiner. */
    .deroulement-point {
        opacity: 1;
        transition: none;
    }
}