.hero-section {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 2fr 1fr;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('ressources/2151907652.jpg');
    background-size: cover;
    background-position: 65% 0%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    z-index: 0;
}

.hero-left {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px 60px 80px 100px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
}

.hero-right {
    position: relative;
    z-index: 1;
}

.hero-right img {
    display: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: left;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, 0.9);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 28px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-desc {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 460px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 48px;
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    border-radius: 50px;
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    font-weight: 700;
    background: var(--sage);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
}

.btn-hero-primary:hover {
    background: var(--sage-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.btn-hero-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 30px;
    border-radius: 50px;
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
}

.btn-hero-outline:hover {
    background: rgba(255, 255, 255, 0.2);
}

.hero-title {
    font-size: clamp(48px, 5vw, 72px);
    line-height: 1.3;
    margin-bottom: 16px;
    color: var(--warm-white);
}

.hero-trust {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
}

.trust-icon {
    font-size: 16px;
}

.hero-scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hero-scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
    animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
    0%, 100% {
        opacity: 0.4;
        transform: scaleY(1);
    }
    50% {
        opacity: 1;
        transform: scaleY(0.6);
    }
}

.hero-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: linear-gradient(to bottom, transparent 0%, var(--cream) 100%);
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.hero-section.hero-fading::after {
    opacity: 1;
}

.offres-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: stretch;
    margin-top: 8px;
}

.offre-card {
    display: flex;
    flex-direction: column;
    background: var(--warm-white);
    border: 1px solid var(--sand);
    border-top: 4px solid var(--sage);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 0.25s, box-shadow 0.25s;
}

.offre-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.offre-card--exam {
    border-top-color: var(--terracotta);
}

.offre-card--medical {
    border-top-color: var(--sage);
}

.offre-card--daily {
    border-top-color: var(--sand-dark);
}

.offre-card-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 30px 28px 28px;
}

.offre-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    background: var(--sage-pale);
    border-radius: 16px;
    margin-bottom: 18px;
}

.offre-card--exam .offre-icon {
    background: #f6e7dd;
}

.offre-card--daily .offre-icon {
    background: var(--sand);
}

.offre-card-title {
    font-family: 'Amatic SC', cursive;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.05;
    color: var(--sage-dark);
    margin-bottom: 12px;
}

.offre-card-intro {
    font-size: 15px;
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 20px;
}

.offre-lead {
    font-weight: 700;
    color: var(--text);
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 14px;
}

.offre-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}

.offre-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14.5px;
    color: var(--text);
    line-height: 1.5;
}

.offre-list li::before {
    content: '✓';
    color: var(--sage);
    font-weight: 700;
    flex-shrink: 0;
}

.offre-note {
    font-style: italic;
    font-size: 13.5px;
    color: var(--text-light);
    line-height: 1.6;
    border-top: 1px solid var(--sand);
    padding-top: 16px;
    margin-top: auto;

    a {
        color: var(--sage);
    }
}

/* Tout ce qui précède la note : flux naturel, hauteurs libres. */
.offre-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Aligner le trait de séparation des notes d'une carte à l'autre.
   Les listes n'ont pas le même nombre de puces et les notes pas le même nombre
   de lignes : le trait se retrouvait donc 65 px plus bas sur la carte du milieu.
   Deux rangées en sous-grille suffisent (corps, puis note) : la rangée de la
   note prend la hauteur de la note la plus longue et démarre au même niveau
   partout. Aligner les six rangées une à une donnerait le même résultat en
   ajoutant 230 px de vide, d'où ce découpage en deux.
   Ce bloc vient après les règles ci-dessus pour l'emporter sur leur display:flex,
   qui sert de repli aux navigateurs sans sous-grille. */
@supports (grid-template-rows: subgrid) {
    .offres-grid {
        grid-template-rows: auto auto;
    }

    .offre-card,
    .offre-card-inner {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
    }

    /* La rangée fait déjà la hauteur voulue : ne pas repousser la note vers le
       bas, sinon son trait redescend et l'alignement est perdu. */
    .offre-card-inner > .offre-note {
        margin-top: 0;
        align-self: start;
    }
}

.offres-cta {
    text-align: center;
    margin-top: 44px;
}

.offres-cta p {
    font-size: 16px;
    color: var(--text-light);
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .offres-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin: 0 auto;
    }
}

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

.pourquoi-grid {
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    gap: 64px;
    align-items: center;
}

.pourquoi-visual {
    position: relative;
}

.pourquoi-photo-frame {
    position: relative;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 4 / 5;
    margin: 0 auto;
}

.pourquoi-photo-bg {
    position: absolute;
    inset: 26px -26px -26px 26px;
    background: var(--sage-pale);
    border: 1px solid var(--sage-light);
    border-radius: 26px;
    z-index: 0;
}

/* Sur les très petits écrans, le cadre photo occupe toute la largeur utile :
   le décor décalé de 26 px vers la droite sortait alors du viewport et
   provoquait un défilement horizontal. On réduit le décalage. */
@media (max-width: 420px) {
    .pourquoi-photo-bg {
        inset: 18px -12px -18px 18px;
    }
}

.pourquoi-photo-ph {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Amatic SC', cursive;
    font-size: 130px;
    font-weight: 700;
    color: var(--sage);
    background: linear-gradient(140deg, var(--sage-pale), var(--sand));
    border-radius: 22px;
}

.pourquoi-photo {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: var(--shadow-lg);
    display: block;
}

.pourquoi-signature {
    position: absolute;
    right: -14px;
    bottom: 30px;
    z-index: 3;
    background: #fff;
    color: var(--sage-dark);
    font-family: 'Amatic SC', cursive;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    padding: 10px 20px;
    border-radius: 50px;
    box-shadow: var(--shadow);
}

/* ===== Lecteur audio personnalisé (Pourquoi moi) ===== */
.audio-player {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 8px 0 0;
    padding: 16px 22px 16px 16px;
    background: #fff;
    border: 1px solid var(--sage-pale);
    border-radius: 24px;
    box-shadow: var(--shadow);
    max-width: 440px;
}

.ap-btn {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--sage);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ap-btn:hover {
    background: var(--sage-dark);
    box-shadow: var(--shadow);
}

.ap-btn:focus-visible {
    outline: 3px solid var(--sage-light);
    outline-offset: 2px;
}

.ap-ic {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

/* Bascule des icônes lecture / pause */
.ap-ic-pause { display: none; }
.audio-player.is-playing .ap-ic-play { display: none; }
.audio-player.is-playing .ap-ic-pause { display: block; }

.ap-main {
    flex: 1 1 auto;
    min-width: 0;
}

.ap-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* Égaliseur animé : barres qui ondulent pendant la lecture */
.ap-eq {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 18px;
    flex: 0 0 auto;
}

.ap-eq span {
    width: 3px;
    height: 100%;
    border-radius: 3px;
    background: var(--sage);
    transform: scaleY(0.22);
    transform-origin: bottom center;
    animation: apEq 0.9s ease-in-out infinite;
    animation-play-state: paused;
}

.audio-player.is-playing .ap-eq span { animation-play-state: running; }

/* Rythmes désynchronisés pour un mouvement organique */
.ap-eq span:nth-child(1) { animation-duration: 0.82s; animation-delay: -0.30s; }
.ap-eq span:nth-child(2) { animation-duration: 1.05s; animation-delay: -0.65s; }
.ap-eq span:nth-child(3) { animation-duration: 0.74s; animation-delay: -0.15s; }
.ap-eq span:nth-child(4) { animation-duration: 1.18s; animation-delay: -0.50s; }
.ap-eq span:nth-child(5) { animation-duration: 0.90s; animation-delay: -0.80s; }
.ap-eq span:nth-child(6) { animation-duration: 0.68s; animation-delay: -0.25s; }
.ap-eq span:nth-child(7) { animation-duration: 1.00s; animation-delay: -0.55s; }

@keyframes apEq {
    0%, 100% { transform: scaleY(0.22); }
    50%      { transform: scaleY(1); }
}

.ap-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Barre de progression : input range natif (accessible clavier) restylé */
.ap-seek {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 50px;
    cursor: pointer;
    background: linear-gradient(to right, var(--sage) var(--ap-pct, 0%), var(--sand) var(--ap-pct, 0%));
}

.ap-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--sage-dark);
    border: 2px solid #fff;
    box-shadow: var(--shadow);
    cursor: pointer;
}

.ap-seek::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--sage-dark);
    border: 2px solid #fff;
    box-shadow: var(--shadow);
    cursor: pointer;
}

.ap-seek:focus-visible {
    outline: 3px solid var(--sage-light);
    outline-offset: 3px;
}

.ap-time {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-xlight);
}

@media (prefers-reduced-motion: reduce) {
    .ap-eq span,
    .audio-player.is-playing .ap-eq span {
        animation: none;
        transform: scaleY(0.5);
    }
    .ap-btn { transition: none; }

    /* L'indicateur de défilement s'animait encore en continu : il reste
       affiché, simplement immobile. */
    .hero-scroll-line { animation: none; }
}

.pourquoi-quote {
    position: relative;
    max-width: 340px;
    margin: 40px auto 0;
    text-align: center;
    font-style: italic;
    color: var(--text-light);
    font-size: 15px;
    line-height: 1.7;
}

.pourquoi-quote::before {
    content: '\201C';
    display: block;
    font-family: 'Amatic SC', cursive;
    font-size: 64px;
    line-height: 0.6;
    color: var(--sage-light);
    margin-bottom: 6px;
}

.pourquoi-values {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 8px 0 32px;
}

.pourquoi-value {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.pourquoi-value-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sage-pale);
    border-radius: 12px;
    font-size: 20px;
}

.pourquoi-value-title {
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}

.pourquoi-value-text {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.6;
}

@media (max-width: 900px) {
    .pourquoi-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .pourquoi-content {
        order: -1;
    }

    .pourquoi-photo-frame {
        max-width: 320px;
    }
}

.calendar-wrap {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    max-width: 900px;
    margin: 48px auto 0;
}

.calendar-header {
    background: var(--sage);
    color: #fff;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cal-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cal-nav button {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.cal-nav button:hover {
    background: rgba(255, 255, 255, 0.35);
}

.cal-month {
    font-family: 'Amatic SC', cursive;
    font-size: 26px;
    font-weight: 700;
}

.cal-types {
    display: flex;
    gap: 12px;
}

.cal-type-btn {
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.cal-type-btn.active, .cal-type-btn:hover {
    background: #fff;
    color: var(--sage-dark);
    border-color: #fff;
}

.calendar-body {
    padding: 24px 32px;
}

.cal-days-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.cal-day-name {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-xlight);
    padding: 8px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.cal-cell {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    gap: 3px;
}

.cal-cell:hover:not(.empty):not(.past) {
    background: var(--sage-pale);
}

.cal-cell.empty {
    cursor: default;
}

.cal-cell.past {
    color: var(--text-xlight);
    cursor: default;
}

.cal-cell.has-slots .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sage);
}

.cal-cell.today {
    background: var(--sage-pale);
    font-weight: 700;
    color: var(--sage-dark);
}

.cal-cell.selected {
    background: var(--sage);
    color: #fff;
}

.cal-cell.selected .dot {
    background: rgba(255, 255, 255, 0.6);
}

.cal-cell.full .dot {
    background: var(--sand-dark);
}

.slots-panel {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--sand);
}

.slots-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 16px;
}

.slots-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.slot {
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid var(--sage-light);
    color: var(--sage-dark);
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}

.slot:hover, .slot.selected {
    background: var(--sage);
    color: #fff;
    border-color: var(--sage);
}

.slot.full {
    background: var(--cream);
    color: var(--text-xlight);
    border-color: var(--sand);
    cursor: default;
    text-decoration: line-through;
}

.booking-form {
    margin-top: 24px;
    padding: 24px;
    background: var(--sage-pale);
    border-radius: var(--radius);
    display: none;
}

.booking-form.visible {
    display: block;
}

.booking-form-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 16px;
    color: var(--sage-dark);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.form-group input, .form-group select, .form-group textarea {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1.5px solid var(--sand);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    background: #fff;
    color: var(--text);
    transition: border-color 0.2s;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--sage);
}

/* Sujet déjà choisi parce que le visiteur arrive depuis un bouton précis
   (page tarifs, Reiki animaux…). Le liseré vert signale que le champ est
   rempli pour lui, sans l'empêcher d'en changer. */
.form-group select.is-prefilled {
    border-color: var(--sage-light);
    background: var(--sage-pale);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 60px;
    align-items: start;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.contact-item-icon {
    width: 44px;
    height: 44px;
    background: var(--sage-pale);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

/* Survol des coordonnées : la pastille se soulève et s'assombrit légèrement,
   et le bloc glisse de 3 px vers la droite. Le mouvement reste dans le même
   registre que la respiration du site, juste un peu plus vif puisqu'il
   répond à un geste. Réservé aux appareils à pointeur : sur écran tactile,
   l'état de survol resterait « collé » après l'appui. */
@media (hover: hover) {
    .contact-item {
        transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .contact-item:hover {
        transform: translateX(3px);
    }

    .contact-item-icon {
        transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
                    background-color 0.3s ease;
    }

    .contact-item:hover .contact-item-icon {
        transform: translateY(-3px) scale(1.06);
        background: var(--sage-light);
    }

    .contact-item-value {
        transition: color 0.25s ease;
    }

    .contact-item:hover .contact-item-value {
        color: var(--sage-dark);
    }
}

.contact-item-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-xlight);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.contact-item-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.contact-form-wrap {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 36px;
    box-shadow: var(--shadow);
}

.contact-form-title {
    font-family: 'Amatic SC', cursive;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 24px;
}

.contact-form .form-group {
    margin-bottom: 16px;
}

.contact-form textarea {
    resize: vertical;
    min-height: 100px;
}

.form-consent .consent-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--text-light);
    line-height: 1.5;
    cursor: pointer;
}

.form-consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    padding: 0;
    border: none;
    flex-shrink: 0;
    accent-color: var(--sage);
    cursor: pointer;
}

.form-consent .consent-label a {
    color: var(--sage-dark);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.25s ease, color 0.25s ease;
}

/* Le soulignement est déjà en place mais transparent : il se révèle sans
   décaler le texte, contrairement à une bordure ajoutée au survol. */
.form-consent .consent-label a:hover,
.form-consent .consent-label a:focus-visible {
    color: var(--sage);
    text-decoration-color: currentColor;
}

.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
    border-color: #d9534f;
    background: #fdf3f2;
}

.field-error {
    display: none;
    color: #d9534f;
    font-size: 12.5px;
    line-height: 1.4;
    margin-top: 6px;
}

.form-group.has-error .field-error {
    display: block;
}

.form-success {
    display: none;
    margin-top: 16px;
    background: var(--sage-pale);
    border: 1px solid var(--sage-light);
    color: var(--sage-dark);
    border-radius: 12px;
    padding: 20px 22px;
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
}

/* Message d'échec d'envoi (serveur injoignable, erreur Brevo). */
.form-error {
    display: none;
    margin-top: 16px;
    background: #fdf2f2;
    border: 1px solid #e9c4c4;
    color: #9b3b3b;
    border-radius: 12px;
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

/* Champ piège à robots : retiré du flux sans display:none ni visibility,
   que certains automates savent détecter. */
.form-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 768px) {

    .hero-section {
        grid-template-columns: 1fr;
        min-height: 100svh;
    }

    .hero-section::before {
        background-attachment: scroll;
        background-position: 55% 22%;
    }

    .hero-left {
        padding: 100px 24px 60px;
        background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.60) 40%,
        rgba(0, 0, 0, 0.45) 70%,
        rgba(0, 0, 0, 0.25) 100%);
    }

    .hero-right {
        display: none;
    }

    .hero-content {
        text-align: center;
    }

    .hero-title {
        font-size: clamp(48px, 13vw, 72px);
        color: #fff;
        line-height: 1.4;
    }

    .hero-desc {
        font-size: 15px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-eyebrow {
        font-size: 12px;
        padding: 6px 14px;
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(8px);
        border-color: rgba(255, 255, 255, 0.3);
    }

    .hero-actions {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-bottom: 36px;
    }

    .btn-hero-primary, .btn-hero-outline {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    .hero-trust {
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .trust-item {
        font-size: 12px;
    }

    .hero-scroll {
        display: none;
    }

    .hero-section::after {
        height: 80px;
    }

    .calendar-wrap {
        margin-top: 32px;
    }

    .calendar-header {
        padding: 16px;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .cal-types {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .cal-type-btn {
        font-size: 12px;
        padding: 5px 12px;
    }

    .calendar-body {
        padding: 12px;
    }

    .cal-day-name {
        font-size: 10px;
    }

    .cal-cell {
        font-size: 12px;
        border-radius: 6px;
    }

    .slots-grid {
        gap: 8px;
    }

    .slot {
        padding: 7px 14px;
        font-size: 13px;
    }

    .booking-form {
        padding: 16px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

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

    .contact-form-wrap {
        padding: 24px;
    }

    .contact-info {
        gap: 16px;
    }

    .contact-item-icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .contact-item-value {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: clamp(42px, 12vw, 60px);
        margin-bottom: 20px;
    }
    .cal-cell {
        font-size: 11px;
    }
}

/* Entrée douce du héro au chargement */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}

.hero-eyebrow { animation: heroFadeUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero-title   { animation: heroFadeUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s both; }
.hero-desc    { animation: heroFadeUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.24s both; }
.hero-actions { animation: heroFadeUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.36s both; }
.hero-trust   { animation: heroFadeUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.48s both; }

@media (prefers-reduced-motion: reduce) {
    .hero-eyebrow, .hero-title, .hero-desc, .hero-actions, .hero-trust {
        animation: none;
    }
}