/* ============================================================
   SECTIONS DE L'ACCUEIL — disciplines & savoir-faire
   ------------------------------------------------------------
   Chargée uniquement sur la page d'accueil, APRÈS style.css et
   corrections.css : rien n'est modifié dans les feuilles d'origine.

   Pourquoi : ces deux blocs étaient trop nus. Cinq petites cartes
   blanches avec un émoji et une ligne de texte, puis trois autres
   cartes blanches avec une ligne chacune, le tout posé sur un fond
   crème uni. Beaucoup de vide, peu de matière.

   Ce qui change :
   - les cinq disciplines deviennent de vraies cartes photo, avec un
     numéro, un filet doré et deux lignes de texte au lieu d'une ;
   - la section reçoit un fond dégradé et un semis botanique ;
   - le savoir-faire gagne une photo de l'atelier à côté de la citation,
     une signature, et des descriptions écrites au lieu de résumées.
   ============================================================ */

/* ------------------------------------------------------------
   1. Section « Cinq chemins vers l'équilibre »
   ------------------------------------------------------------ */

.disciplines-section--v2 {
    position: relative;
    padding: clamp(5rem, 9vh, 7.5rem) 5% clamp(5.5rem, 10vh, 8rem);
    background:
        radial-gradient(900px 520px at 10% 0%,   rgba(155, 126, 164, 0.11), transparent 62%),
        radial-gradient(780px 500px at 92% 100%, rgba(201, 169, 110, 0.13), transparent 64%),
        linear-gradient(180deg, #FCFAF5 0%, #F6F3EB 52%, #F0F3EA 100%);
    overflow: hidden;
}

/* Semis botanique — le même motif que la boutique. */
.disciplines-section--v2::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.13;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460' viewBox='0 0 460 460'%3E%3Cg fill='none' stroke='%237E9A7B' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M58 128c22-30 42-37 64-33'/%3E%3Cpath d='M74 112c-7-14 1-26 12-29 4 14-1 25-12 29z'/%3E%3Cpath d='M96 101c-3-15 7-25 18-26 1 14-6 23-18 26z'/%3E%3Cpath d='M338 344c-22-30-42-37-64-33'/%3E%3Cpath d='M322 328c7-14-1-26-12-29-4 14 1 25 12 29z'/%3E%3Cpath d='M300 317c3-15-7-25-18-26-1 14 6 23 18 26z'/%3E%3Cpath d='M250 60c13 11 16 25 10 38'/%3E%3Cpath d='M180 380c-13-11-16-25-10-38'/%3E%3Ccircle cx='404' cy='96' r='2.4'/%3E%3Ccircle cx='52' cy='300' r='2.4'/%3E%3Ccircle cx='226' cy='230' r='1.9'/%3E%3Ccircle cx='400' cy='268' r='1.7'/%3E%3Ccircle cx='128' cy='52' r='1.7'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 460px 460px;
}

.disciplines-section--v2 > * { position: relative; z-index: 1; }

.disciplines-section--v2 .section-header {
    max-width: 44rem;
    margin: 0 auto clamp(3rem, 5vh, 4.2rem);
    text-align: center;
}

.disciplines-section--v2 .section-intro {
    margin: 1.4rem auto 0;
    max-width: 38rem;
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-muted, #5A7361);
}

.disciplines-section--v2 .disciplines-grid {
    max-width: 1340px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.25rem;
}

/* --- La carte --- */

.discipline-card--v2 {
    position: relative;
    display: block;
    align-items: stretch;
    padding: 0;
    height: clamp(370px, 29vw, 450px);
    border-radius: 18px;
    border: 1px solid rgba(201, 169, 110, 0.28);
    background: var(--forest, #0A1C10);
    box-shadow: 0 18px 44px rgba(13, 26, 17, 0.14);
    overflow: hidden;
    text-align: left;
    text-decoration: none;
    transition: transform 0.5s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
                box-shadow 0.5s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
                border-color 0.5s ease;
}
.discipline-card--v2:hover {
    transform: translateY(-8px);
    border-color: rgba(212, 184, 122, 0.7);
    box-shadow: 0 30px 60px rgba(13, 26, 17, 0.24);
}

.discipline-card__media {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
}
.discipline-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.discipline-card--v2:hover .discipline-card__media img { transform: scale(1.07); }

/* Voile : dense en bas pour porter le texte, léger en haut pour
   laisser voir la photo. */
.discipline-card--v2::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(6, 16, 10, 0.06) 0%,
        rgba(6, 16, 10, 0.18) 30%,
        rgba(6, 16, 10, 0.58) 55%,
        rgba(6, 16, 10, 0.80) 72%,
        rgba(6, 16, 10, 0.92) 100%);
}

/* Pastille de numérotation, comme sur une planche d'herbier.
   Une simple couleur dorée posée sur la photo tombait à 2:1 sur les
   clichés clairs ; le fond opaque garantit le contraste quelle que
   soit l'image. */
.discipline-card__num {
    position: absolute;
    top: 1.05rem;
    left: 1.05rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(212, 184, 122, 0.5);
    background: rgba(6, 16, 10, 0.78);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    font-family: var(--font-display, 'Marcellus', serif);
    font-size: 0.78rem;
    letter-spacing: 1px;
    text-indent: 1px;
    color: var(--gold-bright, #D4B87A);
}

.discipline-card__body {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 1.5rem 1.4rem 1.6rem;
}

.discipline-card--v2 h3 {
    font-family: var(--font-display, 'Marcellus', serif);
    font-size: 1.28rem;
    line-height: 1.2;
    color: #FFFFFF;
    margin: 0;
    text-shadow: 0 2px 14px rgba(6, 16, 10, 0.7);
}

.discipline-card__rule {
    display: block;
    width: 44px;
    height: 1px;
    margin: 0.75rem 0 0.8rem;
    background: linear-gradient(90deg, rgba(212, 184, 122, 0.95), rgba(212, 184, 122, 0));
    transition: width 0.5s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.discipline-card--v2:hover .discipline-card__rule { width: 76px; }

.discipline-card__text {
    display: block;
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-size: 0.99rem;
    line-height: 1.55;
    color: rgba(250, 248, 243, 0.92);
    text-shadow: 0 2px 12px rgba(6, 16, 10, 0.8);
}

.discipline-card--v2 .discipline-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.05rem;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.66rem;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--gold-bright, #D4B87A);
    text-shadow: 0 2px 10px rgba(6, 16, 10, 0.85);
}
.discipline-card--v2 .discipline-arrow i {
    transition: transform 0.4s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.discipline-card--v2:hover .discipline-arrow i { transform: translateX(6px); }

/* ------------------------------------------------------------
   2. Section « L'art des plantes médicinales »
   ------------------------------------------------------------ */

.nature-section {
    position: relative;
    background:
        radial-gradient(760px 480px at 88% 6%, rgba(201, 169, 110, 0.10), transparent 62%),
        radial-gradient(680px 460px at 6% 92%, rgba(143, 169, 140, 0.14), transparent 64%),
        linear-gradient(180deg, #FFFDF8 0%, #FBF9F3 60%, #F7F5EE 100%);
    overflow: hidden;
}

.nature-container { position: relative; z-index: 1; }

/* --- Photo de l'atelier + citation --- */

.nature-showcase {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: clamp(2.2rem, 4.5vw, 4.5rem);
    align-items: center;
    max-width: 1100px;
    margin: 0 auto clamp(3.5rem, 6vh, 5rem);
}

.nature-showcase__media {
    position: relative;
    margin: 0;
}
/* Filet doré décalé derrière la photo, pour la profondeur. */
.nature-showcase__media::before {
    content: '';
    position: absolute;
    inset: 18px -18px -18px 18px;
    border: 1px solid rgba(201, 169, 110, 0.55);
    border-radius: 20px;
    pointer-events: none;
}
.nature-showcase__media img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 26px 60px rgba(13, 26, 17, 0.18);
}
/* 2,4rem : le filet doré déborde de 18 px sous la photo, la légende
   doit passer en dessous et non par-dessus. */
.nature-showcase__media figcaption {
    position: relative;
    margin-top: 2.4rem;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.64rem;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--text-muted, #5A7361);
}

.nature-showcase__text { text-align: left; }

/* La citation reprend son habillage d'origine, alignée à gauche. */
.nature-showcase .nature-quote {
    margin: 0;
    max-width: none;
    text-align: left;
}
.nature-showcase .nature-quote p { text-align: left; }

.nature-signature {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 1.6rem 0 0;
    padding-left: 1.6rem;
}
.nature-signature__name {
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-style: italic;
    font-size: 1.24rem;
    color: var(--forest-soft, #204C2E);
}
.nature-signature__role {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.63rem;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--text-muted, #5A7361);
}

.nature-showcase__note {
    margin: 1.8rem 0 0;
    padding-left: 1.6rem;
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-size: 1.04rem;
    line-height: 1.75;
    color: var(--text-mid, #1E3324);
}

/* --- Les trois étapes --- */

.nature-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.2rem, 2vw, 1.8rem);
    max-width: 1180px;
    margin: 0 auto;
}

.nature-feature {
    position: relative;
    padding: 2.8rem 2rem 2.4rem;
    background: #FFFFFF;
    border: 1px solid rgba(201, 169, 110, 0.24);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(13, 26, 17, 0.06);
    text-align: left;
    transition: transform 0.5s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
                box-shadow 0.5s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.nature-feature:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 54px rgba(13, 26, 17, 0.11);
}
/* Filet doré en haut de carte. */
.nature-feature::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2rem;
    right: 2rem;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg,
        rgba(201, 169, 110, 0), var(--gold, #C9A96E), rgba(201, 169, 110, 0));
}

.nature-feature .feature-num {
    position: absolute;
    top: 1.5rem;
    right: 1.7rem;
    font-family: var(--font-display, 'Marcellus', serif);
    font-size: 1.9rem;
    line-height: 1;
    color: rgba(201, 169, 110, 0.3);
}

.nature-feature .feature-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 0 0 1.4rem;
    border-radius: 50%;
    border: 1px solid rgba(201, 169, 110, 0.45);
    background: linear-gradient(160deg, #FDFBF6 0%, #F3F0E6 100%);
    color: var(--forest-soft, #204C2E);
}
.nature-feature .feature-icon { width: 25px; height: 25px; }

.nature-feature h3 {
    font-family: var(--font-display, 'Marcellus', serif);
    font-size: 1.18rem;
    color: var(--forest, #0A1C10);
    margin: 0;
}

.nature-feature .feature-line {
    width: 40px;
    height: 1px;
    margin: 0.8rem 0 0.9rem;
    background: linear-gradient(90deg, rgba(201, 169, 110, 0.9), rgba(201, 169, 110, 0));
}

.nature-feature p {
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-size: 1rem;
    line-height: 1.68;
    color: var(--text-mid, #1E3324);
    margin: 0;
}

/* ------------------------------------------------------------
   3. Tablette
   ------------------------------------------------------------ */

@media (max-width: 1180px) {
    .disciplines-section--v2 .disciplines-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.1rem;
    }
    .discipline-card--v2 { height: clamp(340px, 40vw, 420px); }
}

@media (max-width: 900px) {
    .nature-showcase {
        grid-template-columns: 1fr;
        gap: 2.2rem;
        max-width: 560px;
    }
    .nature-showcase__media { max-width: 420px; margin: 0 auto; }
    .nature-showcase__media::before { inset: 14px -14px -14px 14px; }
    .nature-features { grid-template-columns: 1fr; max-width: 560px; }
    .nature-feature { padding: 2.2rem 1.8rem 2rem; }
}

/* ------------------------------------------------------------
   4. Mobile — les disciplines défilent latéralement
   ------------------------------------------------------------
   Cinq cartes empilées feraient une colonne interminable ; on
   reprend le principe du carrousel de la galerie.
   ------------------------------------------------------------ */

@media (max-width: 768px) {
    .disciplines-section--v2 { padding-left: 0; padding-right: 0; }
    .disciplines-section--v2 .section-header { padding: 0 6%; }
    .disciplines-section--v2 .section-intro { font-size: 1.02rem; }

    .disciplines-section--v2 .disciplines-grid {
        display: flex;
        grid-template-columns: none;
        gap: 0.9rem;
        padding: 0.5rem 6% 1.4rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .disciplines-section--v2 .disciplines-grid::-webkit-scrollbar { display: none; }

    .discipline-card--v2 {
        flex: 0 0 74%;
        max-width: 300px;
        height: 400px;
        scroll-snap-align: center;
    }

    .nature-showcase { margin-bottom: 3rem; }
    .nature-showcase__media { max-width: 100%; }
    .nature-signature,
    .nature-showcase__note { padding-left: 1.2rem; }
    .nature-feature .feature-num { font-size: 1.6rem; top: 1.3rem; right: 1.4rem; }
}

@media (max-width: 420px) {
    .discipline-card--v2 { flex-basis: 80%; height: 370px; }
    .discipline-card--v2 h3 { font-size: 1.18rem; }
    .discipline-card__text { font-size: 0.95rem; }
}

/* ------------------------------------------------------------
   5. Mouvement réduit
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .discipline-card--v2,
    .discipline-card__media img,
    .discipline-card__rule,
    .nature-feature,
    .discipline-card--v2 .discipline-arrow i { transition: none; }
    .discipline-card--v2:hover { transform: none; }
    .discipline-card--v2:hover .discipline-card__media img { transform: none; }
    .nature-feature:hover { transform: none; }
}