:root {
            --bg-color: #FBF9F6;      /* Crème lin très doux */
            --primary: #E8A793;       /* Terracotta pastel / Pêche chaude */
            --secondary: #A3B899;     /* Vert sauge tendre */
            --accent: #F4D35E;        /* Jaune beurre doux */
            --text-dark: #4A4E4D;     /* Gris-brun doux */
            --card-bg: #FFFFFF;
            
            /* Couleurs pour le bandeau de dispo */
            --dispo-bg: #EDF4EE;      /* Vert très clair pour dispo */
            --dispo-text: #3D6646;    /* Vert foncé text */
        }

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

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-dark);
            line-height: 1.6;
            padding: 30px 20px;
        }

        .container {
            max-width: 850px;
            margin: 0 auto;
            background: var(--card-bg);
            padding: 45px 35px;
            border-radius: 32px;
            box-shadow: 0 8px 24px rgba(212, 192, 178, 0.15);
        }

        header {
            text-align: center;
            margin-bottom: 30px;
        }


/* En-tête avec illustration à droite */
.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
}

.header-text {
    flex: 1;
    min-width: 0;
}

.header-text h1 {
    font-size: 2rem;
    line-height: 1.35;
}

.header-text .subtitle {
    margin-bottom: 0;
}

.header-image {
    flex: 0 0 250px;
    max-width:250px;
}

.header-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    border: 3px solid #F1ECE6;
    box-shadow: 0 5px 18px rgba(74, 78, 77, 0.10);
}

/* Adaptation aux écrans mobiles */
@media (max-width: 600px) {
    .header-content {
        flex-direction: column-reverse;
        text-align: center;
        gap: 18px;
    }

    .header-image {
        flex-basis: auto;
        width: 150px;
        max-width: 150px;
    }

    .header-text h1 {
        font-size: 1.7rem;
    }
}




        h1 {
            font-family: 'Comfortaa', cursive;
            color: var(--primary);
            font-size: 2.4rem;
            margin-bottom: 8px;
            font-weight: 700;
        }

        .subtitle {
            font-size: 1.15rem;
            color: var(--secondary);
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .dispo-badge {
            background-color: var(--secondary);
            color: white;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .intro-text {
            font-size: 1.05rem;
            text-align: center;
            max-width: 680px;
            margin: 0 auto 40px auto;
            /* color: #6C706E; */
            /* font-style: italic; */

			margin: 0 0 14px;
			padding: 0 5px;

			color: #A96F5B;
			font-family: 'Comfortaa', cursive;
			font-size: 1.08rem;
			font-weight: 700;
			line-height: 1.6;

        }

        .section {
            margin-bottom: 35px;
            padding: 30px;
            border-radius: 24px;
            background-color: #FDFDFD;
            border: 1px solid #F1ECE6;
            transition: transform 0.2s ease;
        }

        .section:hover {
            transform: translateY(-2px);
        }

        h2 {
            font-family: 'Comfortaa', cursive;
            font-size: 1.4rem;
            margin-bottom: 18px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .section:nth-child(odd) h2 { color: var(--secondary); }
        .section:nth-child(even) h2 { color: var(--primary); }

        p {
            margin-bottom: 15px;
        }

        .highlight-box {
            background-color: #E8EFE5;
            border-left: 4px solid var(--secondary);
            border-radius: 12px;
            padding: 20px;
            margin-top: 20px;
            font-size: 0.98rem;
        }

        .highlight-box.alt {
            background-color: #FDF5F2;
            border-left-color: var(--primary);
        }

        footer {
            text-align: center;
            margin-top: 50px;
            font-size: 0.9rem;
            color: #A3B899;
            font-family: 'Comfortaa', cursive;
        }

        @media (max-width: 600px) {
            body { padding: 15px 10px; }
            .container { padding: 30px 20px; }
            h1 { font-size: 1.9rem; }
            .section { padding: 20px; }
            .highlight-box { flex-direction: column; gap: 5px; padding: 12px; }
        }

/* ==========================================
   CARTES DES 3 PILIERS
   Style : Nature, douceur et végétal
   ========================================== */

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
    align-items: stretch;
}

/* Carte au repos */
.feature-card {
    position: relative;
    min-width: 0;
    padding: 28px 24px 22px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(163, 184, 153, 0.10),
            transparent 42%
        ),
        #FFFFFF;

    border: 1px solid #E9EDE5;
    border-top: 4px solid #A3B899;
    border-radius: 18px;

    box-shadow: 0 5px 18px rgba(74, 78, 77, 0.045);

    text-align: center;

    transition:
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        background-color 0.25s ease;
}

/* Petit détail végétal décoratif */
.feature-card::after {
    content: "✿";
    position: absolute;
    top: 10px;
    right: 14px;

    color: #A3B899;
    opacity: 0.35;
    font-size: 19px;

    pointer-events: none;
}

/* Survol de la carte */
.feature-card:hover {
    border-color: #DCE5D7;
    border-top-color: #E8A793;
    box-shadow: 0 10px 26px rgba(74, 78, 77, 0.09);
}

/* Titres */
.feature-card h3 {
    margin: 0 0 14px;
    padding: 0 5px;

    color: #526C53;
    font-family: 'Comfortaa', cursive;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.6;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Texte replié : 2 lignes maximum */
.feature-card .feature-description {
    margin: 0 0 14px;

    color: #686C67;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.94rem;
    line-height: 1.8;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;

    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Lien Voir plus / Voir moins */
.feature-card .toggle-description {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 7px 0;
    border: none;
    border-radius: 4px;

    background: transparent;
    color: #A96F5B;

    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;

    cursor: pointer;

    transition: color 0.2s ease;
}

.feature-card .toggle-description:hover {
    color: #80503F;
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* Liens du pied de page harmonisés avec Voir plus */
footer .footer-link {
    display: inline-block;
    color: #A96F5B;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Effet au survol identique à Voir plus */
footer .footer-link:hover {
    color: #80503F;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Accessibilité au clavier */
footer .footer-link:focus-visible {
    outline: 2px solid #A3B899;
    outline-offset: 4px;
}


.feature-card .toggle-description:focus-visible {
    outline: 2px solid #A3B899;
    outline-offset: 4px;
}

/* ==========================================
   CARTE DÉPLIÉE
   ========================================== */

.feature-card.is-expanded {
    grid-column: 1 / -1;
    grid-row: 1;

    padding: 30px 34px;
    overflow: visible;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(232, 167, 147, 0.12),
            transparent 38%
        ),
        #FFFFFF;

    border: 1px solid #E8D7CE;
    border-top: 5px solid #E8A793;
    border-radius: 20px;

    text-align: left;

    box-shadow: 0 12px 30px rgba(115, 91, 76, 0.10);
}

/* Titre complet de la carte ouverte */
.feature-card.is-expanded h3 {
    margin-bottom: 16px;
    padding-right: 24px;

    color: #9D6A57;
    font-size: 1.3rem;

    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

/* Affichage du texte complet */
.feature-card .feature-description.expanded {
    display: block;

    -webkit-line-clamp: unset;
    line-clamp: unset;

    overflow: visible;

    max-width: 100%;
    margin-bottom: 18px;

    color: #555D56;
    font-size: 0.97rem;
    line-height: 1.9;
}

/* Bouton de fermeture de la carte */
.feature-card.is-expanded .toggle-description {
    color: #698568;
}

/* ==========================================
   RESPONSIVE : TABLETTES ET MOBILES
   ========================================== */

@media (max-width: 600px) {
    .features-grid {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .feature-card {
        padding: 24px 21px 19px;
        border-radius: 16px;
    }

    .feature-card h3 {
        font-size: 1.02rem;
    }

    /*.feature-card.is-expanded {
        grid-column: 1 / -1;
        padding: 25px 22px;
    }*/

    .feature-card.is-expanded h3 {
        font-size: 1.15rem;
    }

/* La carte dépliée reste à sa place dans la grille */
.feature-card.is-expanded {
    grid-row: auto;
    scroll-margin-top: 20px;
}
}

/* Tablettes et téléphones */
@media (max-width: 768px) {
    .feature-card.is-expanded {
        grid-column: 1 / -1;
        grid-row: auto;
        padding: 25px 22px;
    }

    .feature-card.is-expanded .feature-description.expanded {
        overflow-wrap: anywhere;
    }
}


/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
    .feature-card,
    .feature-card .toggle-description {
        transition: none;
    }
}

/* === Mise en page de l'introduction === */

header {
    margin-bottom: 10px;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
}

.header-text {
    flex: 1 1 auto;
    min-width: 0;
}

.header-image {
    flex: 0 0 250px;
    max-width: 250px;
}

.header-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
}

/* Bloc contenant les deux paragraphes */
.intro-block {
    width: 100%;
    max-width: none;
    margin: 8px 0 20px;
    text-align: left;
}

.intro-block p {
    margin: 0 0 14px;
    color: #4A4E4D;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
}

.intro-block p:last-child {
    margin-bottom: 0;
}

/* Bandeau de disponibilité */
.highlight-box {
    margin-top: 0;
    margin-bottom: 0;
}

/* Phrase sur les coordonnées */
.intro-text {
    max-width: none;
    margin: 0 0 14px;
    padding: 0 5px;
    text-align: center;
    color: #A96F5B;
    font-family: 'Comfortaa', cursive;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.6;
}

@media (max-width: 600px) {
    .header-content {
        flex-direction: column-reverse;
        text-align: center;
        gap: 16px;
    }

    .header-image {
        flex: 0 1 auto;
        width: 180px;
        max-width: 100%;
    }

    .header-text h1 {
        font-size: 1.7rem;
    }

    .intro-block p {
        font-size: 0.96rem;
    }
}