/* =========================================================
   ALLIANZ NATURE
   Feuille de style principale
   ========================================================= */


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

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    color: var(--nature-text);
    font-family: "Segoe UI", Arial, sans-serif;
    background: #FFFFFF;
}

main {
    flex: 1;
}

:root {
    --nature-forest: #193D2D;
    --nature-green: #456B4E;
    --nature-light-green: #E8EFE5;
    --nature-cream: #F8F5ED;
    --nature-gold: #C4A36B;
    --nature-text: #27332C;
    --nature-muted: #6B756D;
    --nature-border: #E7EAE3;
    --nature-soft-border: #E3E7DF;
    --nature-soft-bg: #FAFAF7;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #FFFFFF, 0 0 0 0.25rem var(--nature-gold);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}


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

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nature-navbar {
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid #EAECE6;
    box-shadow: 0 3px 18px rgba(25, 61, 45, 0.05);
}

.site-header .navbar {
    min-height: 92px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.brand-wordmark {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 10px;
    text-decoration: none;
}

.brand-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border: 1px solid var(--nature-gold);
    border-radius: 50%;
    color: var(--nature-forest);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
}

.brand-name {
    color: var(--nature-forest);
    font-size: 20px;
    letter-spacing: -0.5px;
}

    .brand-name strong {
        color: var(--nature-green);
    }

.brand-logo {
    display: block;
    width: 270px !important;
    height: auto !important;
    max-width: min(270px, 52vw) !important;
    max-height: 72px !important;
    object-fit: contain;
}

.nature-navbar .nav-link {
    color: var(--nature-text);
    font-size: 14px;
    font-weight: 500;
    padding: 10px 14px;
}

    .nature-navbar .nav-link:hover {
        color: var(--nature-green);
    }

.nature-navbar .nav-contact {
    background: var(--nature-forest);
    color: #FFFFFF;
    border-radius: 24px;
    padding-left: 22px;
    padding-right: 22px;
}

    .nature-navbar .nav-contact:hover {
        background: var(--nature-green);
        color: #FFFFFF;
    }

.nature-navbar .nav-logout-button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    color: var(--nature-text);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

    .nature-navbar .nav-logout-button:hover {
        color: var(--nature-green);
    }


/* =========================================================
   BOUTONS GÉNÉRAUX
   ========================================================= */

.btn-nature {
    background: var(--nature-forest);
    border: 1px solid var(--nature-forest);
    border-radius: 30px;
    color: #FFFFFF;
    padding: 13px 22px;
    font-size: 14px;
}

    .btn-nature:hover {
        background: var(--nature-green);
        border-color: var(--nature-green);
        color: #FFFFFF;
    }

.btn-outline-nature {
    border: 1px solid #BCC9B8;
    border-radius: 30px;
    color: var(--nature-forest);
    padding: 13px 22px;
    font-size: 14px;
}

    .btn-outline-nature:hover {
        background: #FFFFFF;
        color: var(--nature-forest);
    }


/* =========================================================
   PAGE D'ACCUEIL — HERO
   ========================================================= */

.hero-section {
    overflow: hidden;
    background: radial-gradient( circle at 83% 40%, rgba(196, 163, 107, 0.18), transparent 28% ), linear-gradient( 120deg, #F8F5ED, #EEF2E9 );
}

.hero-layout {
    min-height: 550px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 48px;
    padding-top: 64px;
    padding-bottom: 64px;
}

.hero-copy {
    max-width: 610px;
}

.eyebrow {
    color: var(--nature-green);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    margin-bottom: 22px;
}

.hero-copy h1 {
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 5vw, 66px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -1.5px;
    margin-bottom: 24px;
}

    .hero-copy h1 span {
        display: block;
        color: var(--nature-green);
        font-style: italic;
    }

.hero-description {
    max-width: 490px;
    color: var(--nature-muted);
    font-size: 16px;
    line-height: 1.9;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.hero-signature {
    margin-top: 30px;
    color: var(--nature-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-style: italic;
}


/* =========================================================
   ILLUSTRATION HERO
   ========================================================= */

.hero-art {
    position: relative;
    min-height: 380px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.art-orbit {
    position: absolute;
    border: 1px solid rgba(69, 107, 78, 0.18);
    border-radius: 50%;
}

.art-orbit-one {
    width: 340px;
    height: 340px;
}

.art-orbit-two {
    width: 280px;
    height: 280px;
}

.art-card {
    position: relative;
    z-index: 2;
    width: min(290px, 85%);
    min-height: 285px;
    padding: 42px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(145deg, #FFFFFF, #F2EBDD);
    border: 1px solid rgba(196, 163, 107, 0.5);
    border-radius: 145px 145px 22px 22px;
    box-shadow: 0 25px 60px rgba(25, 61, 45, 0.12);
}

.art-brand {
    color: var(--nature-forest);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

.art-divider {
    width: 45px;
    height: 1px;
    background: var(--nature-gold);
    margin: 24px 0;
}

.art-title {
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    line-height: 1.3;
}

    .art-title span {
        display: block;
        color: var(--nature-green);
        font-style: italic;
    }

.art-subtitle {
    color: var(--nature-muted);
    font-size: 11px;
    letter-spacing: 1px;
    margin-top: 12px;
}

.art-leaf {
    position: absolute;
    z-index: 1;
    width: 65px;
    height: 115px;
    background: rgba(69, 107, 78, 0.55);
    border-radius: 100% 0 100% 0;
}

.art-leaf-one {
    top: 30px;
    right: 14%;
    transform: rotate(25deg);
}

.art-leaf-two {
    bottom: 34px;
    left: 12%;
    width: 48px;
    height: 85px;
    background: rgba(196, 163, 107, 0.55);
    transform: rotate(-65deg);
}

.art-caption {
    position: absolute;
    bottom: 0;
    color: var(--nature-muted);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-style: italic;
}


/* =========================================================
   PRÉSENTATION DE LA MARQUE
   ========================================================= */

.brand-section {
    padding: 85px 0;
}

.section-heading {
    max-width: 680px;
    margin: 0 auto 48px;
    text-align: center;
}

    .section-heading h2,
    .catalogue-heading h2,
    .contact-content h2 {
        color: var(--nature-forest);
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(30px, 4vw, 42px);
        margin-bottom: 20px;
    }

    .section-heading > p:last-child {
        color: var(--nature-muted);
        line-height: 1.9;
    }

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.value-card {
    padding: 30px;
    border: 1px solid var(--nature-border);
    border-radius: 12px;
    background: #FFFFFF;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .value-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(25, 61, 45, 0.07);
    }

.value-number {
    color: var(--nature-gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
}

.value-card h3 {
    margin: 22px 0 12px;
    color: var(--nature-forest);
    font-size: 19px;
}

.value-card p {
    color: var(--nature-muted);
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 0;
}


/* =========================================================
   CATÉGORIES — ACCUEIL
   ========================================================= */

.catalogue-section {
    background: var(--nature-cream);
    padding: 85px 0;
}

.catalogue-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 32px;
}

    .catalogue-heading .eyebrow {
        margin-bottom: 14px;
    }

    .catalogue-heading h2 {
        margin-bottom: 0;
    }

.catalogue-intro {
    max-width: 360px;
    color: var(--nature-muted);
    line-height: 1.8;
    font-size: 14px;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.category-card {
    min-height: 275px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px;
    overflow: hidden;
    border-radius: 12px;
    background: #E8EFE5;
}

.category-cream {
    background: linear-gradient(145deg, #EAE7D9, #D8E2D1);
}

.category-soap {
    background: linear-gradient(145deg, #F2E5D5, #E4D1B7);
}

.category-lips {
    background: linear-gradient(145deg, #E8D9D5, #DCC5BC);
}

.category-index {
    align-self: flex-end;
    color: rgba(25, 61, 45, 0.6);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 29px;
}

.category-label {
    color: var(--nature-green);
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 700;
}

.category-card h3 {
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
}

.category-card div > p:last-child {
    max-width: 260px;
    color: #4F5C51;
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 0;
}

.category-detail-link {
    display: inline-block;
    margin-top: 16px;
    color: var(--nature-forest);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

    .category-detail-link:hover {
        color: var(--nature-green);
        text-decoration: underline;
    }

.catalogue-notice {
    color: var(--nature-muted);
    font-size: 12px;
    line-height: 1.7;
    margin-top: 25px;
}


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

.contact-section {
    padding: 75px 0;
    text-align: center;
    background: #FFFFFF;
}

.contact-content {
    max-width: 650px;
}

    .contact-content h2 {
        margin-bottom: 18px;
    }

    .contact-content > p:last-child {
        color: var(--nature-muted);
        line-height: 1.8;
    }


/* =========================================================
   CATALOGUE DYNAMIQUE
   ========================================================= */

.products-section {
    padding: 80px 0;
    background: #FFFFFF;
}

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

.product-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--nature-border);
    border-radius: 12px;
    background: #FFFFFF;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

    .product-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(25, 61, 45, 0.08);
    }

.product-image {
    height: 250px;
    overflow: hidden;
    background: #F3F0E7;
}

    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.product-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #68776A;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
}

.product-content {
    padding: 24px;
}

.product-category {
    color: var(--nature-green);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.product-content h3 {
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
}

.product-title-link {
    color: var(--nature-forest);
    text-decoration: none;
}

    .product-title-link:hover {
        color: var(--nature-green);
    }

.product-description {
    color: var(--nature-muted);
    font-size: 14px;
    line-height: 1.7;
}

.product-size {
    margin-top: -4px;
    color: var(--nature-muted);
    font-size: 13px;
}

.product-price {
    color: var(--nature-forest);
    font-size: 19px;
    font-weight: 700;
    margin-top: 18px;
    margin-bottom: 0;
}

.product-detail-link {
    display: inline-block;
    margin-top: 18px;
    color: var(--nature-green);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

    .product-detail-link:hover {
        color: var(--nature-forest);
        text-decoration: underline;
    }

.product-image-link {
    display: block;
    text-decoration: none;
}

.catalogue-empty {
    padding: 35px 25px;
    border: 1px dashed #C7D2C4;
    border-radius: 12px;
    color: var(--nature-muted);
    text-align: center;
    line-height: 1.8;
}


/* =========================================================
   FILTRES DU CATALOGUE
   ========================================================= */

.catalogue-filter-form {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 16px;
    padding: 22px;
    margin-bottom: 32px;
    border: 1px solid var(--nature-border);
    border-radius: 12px;
    background: #FFFFFF;
}

.catalogue-filter-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--nature-forest);
    font-size: 13px;
    font-weight: 600;
}

.catalogue-filter-field .form-control,
.catalogue-filter-field .form-select {
    min-height: 44px;
}

.catalogue-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.catalogue-results-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

    .catalogue-results-heading h2 {
        color: var(--nature-forest);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 30px;
    }

    .catalogue-results-heading p {
        color: var(--nature-muted);
        font-size: 13px;
    }


/* =========================================================
   FICHE PRODUIT
   ========================================================= */

.product-details-section {
    padding: 55px 0 85px;
}

.product-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 32px;
    color: var(--nature-muted);
    font-size: 13px;
}

    .product-breadcrumb a {
        color: var(--nature-green);
        text-decoration: none;
    }

        .product-breadcrumb a:hover {
            text-decoration: underline;
        }

.product-details-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: start;
    gap: 48px;
}

.product-details-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--nature-cream);
}

    .product-details-image img {
        display: block;
        width: 100%;
        max-height: 600px;
        object-fit: contain;
    }

.product-details-content {
    padding-top: 16px;
}

    .product-details-content h1 {
        color: var(--nature-forest);
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(34px, 4vw, 46px);
        line-height: 1.2;
    }

.product-detail-size {
    margin-top: 16px;
    color: var(--nature-muted);
}

.product-details-price {
    margin: 26px 0;
    color: var(--nature-forest);
    font-size: 28px;
    font-weight: 700;
}

.product-details-description {
    padding-top: 22px;
    border-top: 1px solid var(--nature-border);
}

    .product-details-description h2 {
        color: var(--nature-forest);
        font-size: 18px;
    }

    .product-details-description p {
        color: #5E6A60;
        line-height: 1.9;
        white-space: pre-line;
    }

.product-details-actions {
    margin-top: 28px;
}

.product-details-note {
    margin-top: 22px;
    color: var(--nature-muted);
    font-size: 12px;
    line-height: 1.7;
}

.product-add-form {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
}

    .product-add-form input[type="number"] {
        width: 95px;
    }


/* =========================================================
   PANIER
   ========================================================= */

.cart-empty {
    padding: 55px 24px;
    text-align: center;
    border: 1px dashed #C7D2C4;
    border-radius: 14px;
    background: var(--nature-soft-bg);
}

    .cart-empty h2 {
        color: var(--nature-forest);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 30px;
    }

    .cart-empty p {
        color: var(--nature-muted);
        margin: 16px 0 24px;
    }

.cart-product-image {
    width: 65px;
    height: 65px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--nature-cream);
}

.cart-quantity-form {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 170px;
}

.cart-quantity-input {
    width: 78px;
    min-width: 65px;
}

.cart-summary {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 25px;
}

.cart-total {
    text-align: right;
}

    .cart-total span {
        display: block;
        color: var(--nature-muted);
        font-size: 13px;
    }

    .cart-total strong {
        display: block;
        margin-top: 5px;
        color: var(--nature-forest);
        font-size: 26px;
    }

    .cart-total p {
        max-width: 360px;
        margin-top: 8px;
        color: var(--nature-muted);
        font-size: 12px;
        line-height: 1.7;
    }


/* =========================================================
   COMMANDE / CHECKOUT
   ========================================================= */

.checkout-line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 15px 0;
    border-bottom: 1px solid var(--nature-border);
}

.checkout-total,
.order-confirmation-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding-top: 20px;
    margin-top: 10px;
}

    .checkout-total span,
    .order-confirmation-total span {
        color: var(--nature-muted);
        font-size: 14px;
    }

    .checkout-total strong,
    .order-confirmation-total strong {
        color: var(--nature-forest);
        font-size: 22px;
        text-align: right;
    }

.order-confirmation {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 36px;
    border: 1px solid var(--nature-border);
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 12px 35px rgba(25, 61, 45, 0.05);
}

.order-confirmation-icon {
    color: var(--nature-green);
    margin-bottom: 24px;
}

.order-confirmation h1 {
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(30px, 4vw, 42px);
    margin-bottom: 18px;
}

.order-reference {
    padding: 20px;
    margin-top: 28px;
    border: 1px dashed #C7D2C4;
    border-radius: 10px;
    background: var(--nature-cream);
}

    .order-reference span,
    .order-reference strong {
        display: block;
    }

    .order-reference span {
        color: var(--nature-muted);
        font-size: 13px;
        margin-bottom: 8px;
    }

    .order-reference strong {
        color: var(--nature-forest);
        font-size: 20px;
        overflow-wrap: anywhere;
    }

.order-confirmation-items {
    margin-top: 32px;
}

    .order-confirmation-items h2 {
        color: var(--nature-forest);
    }

.order-whatsapp {
    padding: 24px;
    margin-top: 30px;
    border-radius: 12px;
    background: #F3F6EF;
}

    .order-whatsapp h2 {
        color: var(--nature-forest);
    }

    .order-whatsapp p {
        color: #5E6A60;
        line-height: 1.8;
    }


/* =========================================================
   ADMINISTRATION — PHOTOS PRODUITS
   ========================================================= */

.admin-product-thumb {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    background: #F3F0E7;
    border: 1px solid var(--nature-border);
}

.admin-product-preview {
    display: block;
    max-width: 100%;
    width: 240px;
    max-height: 260px;
    object-fit: contain;
    border-radius: 10px;
    padding: 8px;
    background: var(--nature-cream);
    border: 1px solid var(--nature-border);
}


/* =========================================================
   ADMINISTRATION — COMMANDES
   ========================================================= */

.order-info-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
}

    .order-info-list dt {
        margin-top: 12px;
        color: var(--nature-muted);
        font-size: 12px;
        font-weight: 600;
    }

    .order-info-list dd {
        margin-bottom: 0;
        color: var(--nature-text);
        overflow-wrap: anywhere;
    }

    .order-info-list a {
        color: var(--nature-green);
        text-decoration: none;
    }

        .order-info-list a:hover {
            text-decoration: underline;
        }

.order-customer-message {
    padding: 12px;
    border-radius: 8px;
    background: var(--nature-cream);
    white-space: pre-line;
}

.order-admin-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    border-top: 1px solid var(--nature-border);
    margin-top: 16px;
    padding-top: 18px;
}

    .order-admin-total span {
        color: var(--nature-muted);
        font-size: 14px;
    }

    .order-admin-total strong {
        color: var(--nature-forest);
        font-size: 23px;
    }


/* =========================================================
   ADMINISTRATION — TABLEAU DE BORD
   ========================================================= */

.admin-dashboard-card {
    height: 100%;
    border: 1px solid var(--nature-border);
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 5px 20px rgba(25, 61, 45, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .admin-dashboard-card:hover {
        transform: translateY(-3px);
        border-color: #D1DCCF;
        box-shadow: 0 12px 28px rgba(25, 61, 45, 0.09);
    }

    .admin-dashboard-card .card-body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

        .admin-dashboard-card .card-body > p {
            flex-grow: 1;
            width: 100%;
        }

    .admin-dashboard-card .btn-admin-card {
        margin-top: auto !important;
        align-self: flex-start;
    }

.admin-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 22px;
    border: 1px solid #D8E2D1;
    border-radius: 50%;
    background: #F3F6EF;
    color: var(--nature-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
}

.admin-dashboard-card h2 {
    color: var(--nature-forest);
}

.admin-dashboard-card p {
    min-height: 48px;
    font-size: 14px;
    line-height: 1.7;
}

.admin-dashboard-card .btn-admin-card {
    margin-top: 8px;
}


/* =========================================================
   ADMINISTRATION — BOUTONS
   ========================================================= */

.btn-admin-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 11px 18px;
    border: 1px solid var(--nature-forest);
    border-radius: 28px;
    background: var(--nature-forest);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .btn-admin-card:hover {
        background: var(--nature-green);
        border-color: var(--nature-green);
        color: #FFFFFF;
        box-shadow: 0 5px 14px rgba(25, 61, 45, 0.15);
        transform: translateY(-1px);
    }

    .btn-admin-card:focus-visible {
        outline: 3px solid var(--nature-gold);
        outline-offset: 3px;
    }

    .btn-admin-card span {
        font-size: 17px;
        transition: transform 0.2s ease;
    }

    .btn-admin-card:hover span {
        transform: translateX(3px);
    }


/* =========================================================
   FOOTER ALLIANZ NATURE
   ========================================================= */

.site-footer {
    margin-top: auto;
    padding: 38px 0 22px;
    background: #F7F6F0;
    border-top: 1px solid var(--nature-soft-border);
}

.footer-main {
    display: grid;
    grid-template-columns: 1.3fr 1fr auto;
    align-items: center;
    gap: 40px;
    padding-bottom: 20px;
}

.footer-brand {
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
}

    .footer-brand:hover {
        color: var(--nature-green);
    }

.footer-tagline {
    margin: 5px 0 0;
    color: var(--nature-muted);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    font-style: italic;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 5px;
    text-align: center;
}

    .footer-contact .footer-label,
    .footer-contact .footer-phone {
        display: block;
        width: 100%;
        text-align: center;
    }

.footer-label {
    color: var(--nature-green);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.footer-phone {
    color: var(--nature-forest) !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

    .footer-phone:hover {
        color: var(--nature-green) !important;
        text-decoration: underline;
    }

.footer-navigation {
    text-align: right;
}

.footer-link {
    color: var(--nature-green);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

    .footer-link:hover {
        color: var(--nature-forest);
        text-decoration: underline;
    }

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--nature-soft-border);
}

    .footer-bottom p {
        margin: 0;
    }

.copyright {
    color: var(--nature-muted);
    font-size: 11px;
}

.footer-developer {
    color: var(--nature-muted);
    font-size: 11px;
    white-space: nowrap;
}

    .footer-developer a {
        color: var(--nature-forest);
        text-decoration: none;
    }

        .footer-developer a strong {
            font-weight: 700;
        }

        .footer-developer a:hover {
            color: var(--nature-green);
            text-decoration: underline;
        }


/* =========================================================
   RESPONSIVE — TABLETTES
   ========================================================= */

@media (max-width: 991px) {

    .hero-layout {
        grid-template-columns: 1fr;
        gap: 25px;
        padding-top: 60px;
        padding-bottom: 45px;
    }

    .hero-copy {
        max-width: 700px;
    }

    .hero-art {
        min-height: 360px;
    }

    .catalogue-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .catalogue-filter-form {
        grid-template-columns: 1fr 1fr;
    }

    .catalogue-filter-actions {
        grid-column: 1 / -1;
    }

    .product-details-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .product-details-image {
        min-height: 320px;
        max-height: 520px;
    }

    .nature-navbar .nav-logout-button {
        padding: 10px 14px;
    }
}


/* =========================================================
   RESPONSIVE — MOBILES
   ========================================================= */

@media (max-width: 767px) {

    .hero-copy h1 {
        font-size: 43px;
    }

    .values-grid,
    .categories-grid {
        grid-template-columns: 1fr;
    }

    .brand-section,
    .catalogue-section {
        padding: 60px 0;
    }

    .value-card {
        padding: 25px;
    }

    .category-card {
        min-height: 235px;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .product-image {
        height: 270px;
    }

    .products-section {
        padding: 60px 0;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .footer-navigation {
        text-align: left;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .footer-contact {
        align-items: center;
        text-align: center;
    }

    .admin-dashboard-card p {
        min-height: auto;
    }

    .admin-dashboard-card .btn-admin-card {
        width: 100%;
    }
}


/* =========================================================
   RESPONSIVE — PETITS ÉCRANS
   ========================================================= */

@media (max-width: 575px) {

    .site-header .brand-logo {
        width: 210px !important;
        max-width: 52vw !important;
        max-height: 58px !important;
    }

    .site-header .navbar {
        min-height: 76px;
    }

    .catalogue-filter-form {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .catalogue-filter-actions {
        grid-column: auto;
    }

    .catalogue-results-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .product-details-section {
        padding-top: 35px;
    }

    .product-details-image {
        min-height: 260px;
    }

    .cart-summary {
        flex-direction: column;
    }

    .cart-total {
        width: 100%;
        text-align: left;
    }

    .product-add-form {
        align-items: stretch;
        flex-direction: column;
    }

        .product-add-form input[type="number"] {
            width: 100%;
        }

    .order-confirmation {
        padding: 22px;
    }

    .checkout-line {
        gap: 10px;
        font-size: 14px;
    }

    .checkout-total strong,
    .order-confirmation-total strong {
        font-size: 19px;
    }

    .order-admin-total {
        align-items: flex-start;
        flex-direction: column;
    }
}



/* =========================================================
   PAGE ACCUEIL — ALLIANZNATURE
   ========================================================= */

.home-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 82% 45%, rgba(196, 163, 107, 0.20), transparent 28%), linear-gradient(120deg, #F8F5ED 0%, #EEF2E9 100%);
}

.home-hero-grid {
    min-height: 650px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(400px, 0.92fr);
    align-items: center;
    gap: 65px;
    padding: 70px 0;
}

.home-hero-copy {
    max-width: 650px;
}

    .home-hero-copy h1 {
        margin: 0 0 25px;
        color: var(--nature-forest);
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(48px, 6vw, 78px);
        font-weight: 400;
        line-height: 1.03;
        letter-spacing: -2px;
    }

        .home-hero-copy h1 span {
            display: block;
            color: var(--nature-green);
            font-style: italic;
        }

.home-hero-lead {
    max-width: 620px;
    margin-bottom: 18px;
    color: var(--nature-text);
    font-size: 20px;
    line-height: 1.7;
}

.home-hero-text {
    max-width: 575px;
    color: var(--nature-muted);
    font-size: 15px;
    line-height: 1.9;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.home-hero-signature {
    margin-top: 30px;
    color: var(--nature-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-style: italic;
}

.home-hero-visual {
    min-height: 500px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-organic-shape {
    position: absolute;
    border: 1px solid rgba(69, 107, 78, 0.18);
    border-radius: 50%;
}

.hero-organic-shape-one {
    width: 410px;
    height: 410px;
}

.hero-organic-shape-two {
    width: 320px;
    height: 320px;
    border-color: rgba(196, 163, 107, 0.35);
}

.hero-nature-card {
    position: relative;
    z-index: 3;
    width: min(365px, 80%);
    min-height: 405px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 45px 35px;
    text-align: center;
    background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(242,235,221,0.97));
    border: 1px solid rgba(196, 163, 107, 0.48);
    border-radius: 190px 190px 35px 35px;
    box-shadow: 0 25px 65px rgba(25, 61, 45, 0.14);
}

.hero-card-label {
    color: var(--nature-green);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

.hero-card-line {
    width: 55px;
    height: 1px;
    margin: 26px 0;
    background: var(--nature-gold);
}

.hero-card-title {
    margin: 0;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 34px;
    line-height: 1.25;
}

    .hero-card-title span {
        display: block;
        color: var(--nature-green);
        font-style: italic;
    }

.hero-card-text {
    max-width: 230px;
    margin: 18px 0 0;
    color: var(--nature-muted);
    font-size: 13px;
    line-height: 1.8;
}

.hero-card-leaves {
    display: flex;
    gap: 12px;
    margin-top: 30px;
    color: var(--nature-gold);
    font-size: 22px;
}

.hero-floating-note {
    position: absolute;
    z-index: 4;
    padding: 10px 16px;
    border: 1px solid rgba(69, 107, 78, 0.16);
    border-radius: 30px;
    background: rgba(255,255,255,0.85);
    color: var(--nature-green);
    font-size: 11px;
    box-shadow: 0 8px 25px rgba(25,61,45,0.06);
}

.hero-floating-note-one {
    top: 80px;
    right: 2%;
}

.hero-floating-note-two {
    bottom: 75px;
    left: 0;
}


/* =========================================================
   PEAUX FONCÉES ET MÉTISSÉES
   ========================================================= */

.skin-section {
    padding: 90px 0;
    background: #FFFFFF;
}

.skin-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 80px;
    align-items: start;
}

.skin-intro h2,
.vision-header h2,
.resources-preview-heading h2,
.formulation-copy h2,
.diagnostic-copy h2,
.carnet-copy h2 {
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(36px, 4.5vw, 54px);
    font-weight: 400;
    line-height: 1.15;
}

    .skin-intro h2 span,
    .vision-header h2 span,
    .resources-preview-heading h2 span,
    .formulation-copy h2 span,
    .diagnostic-copy h2 span,
    .carnet-copy h2 span {
        display: block;
        color: var(--nature-green);
        font-style: italic;
    }

.skin-content {
    padding-top: 10px;
}

    .skin-content p {
        margin-bottom: 20px;
        color: var(--nature-muted);
        font-size: 15px;
        line-height: 1.9;
    }


/* =========================================================
   VISION
   ========================================================= */

.vision-section {
    padding: 100px 0;
    background: var(--nature-cream);
}

.vision-header {
    max-width: 820px;
    margin: 0 auto 55px;
    text-align: center;
}

    .vision-header > p:last-child {
        max-width: 720px;
        margin: 25px auto 0;
        color: var(--nature-muted);
        font-size: 15px;
        line-height: 1.9;
    }

.vision-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.vision-card {
    min-height: 250px;
    padding: 28px;
    border: 1px solid #E4E7DF;
    border-radius: 14px;
    background: #FFFFFF;
}

.vision-number {
    color: var(--nature-gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
}

.vision-card h3 {
    margin: 22px 0 13px;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
}

.vision-card p {
    margin: 0;
    color: var(--nature-muted);
    font-size: 13px;
    line-height: 1.8;
}

.vision-signature {
    margin-top: 55px;
    text-align: center;
}

    .vision-signature p {
        margin-bottom: 8px;
        color: var(--nature-muted);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 16px;
        font-style: italic;
    }

    .vision-signature strong {
        color: var(--nature-green);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 21px;
    }


/* =========================================================
   RESSOURCES
   ========================================================= */

.resources-preview-section {
    padding: 95px 0;
    background: #FFFFFF;
}

.resources-preview-heading {
    margin-bottom: 55px;
}

    .resources-preview-heading > p:last-child {
        max-width: 680px;
        margin: 0 auto;
        color: var(--nature-muted);
        line-height: 1.9;
    }

.resources-list {
    max-width: 930px;
    margin: 0 auto;
}

.resource-item {
    display: grid;
    grid-template-columns: 75px 1fr;
    gap: 25px;
    align-items: start;
    padding: 25px 0;
    border-bottom: 1px solid #E7EAE3;
}

    .resource-item:last-child {
        border-bottom: 0;
    }

.resource-index {
    color: var(--nature-gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
}

.resource-item h3 {
    margin: 0 0 7px;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
}

.resource-item p {
    max-width: 650px;
    margin: 0;
    color: var(--nature-muted);
    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   FORMULATION
   ========================================================= */

.formulation-section {
    padding: 95px 0;
    background: #F7F8F4;
}

.formulation-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.8fr);
    gap: 90px;
    align-items: center;
}

.formulation-copy p:not(.eyebrow) {
    max-width: 650px;
    color: var(--nature-muted);
    font-size: 15px;
    line-height: 1.9;
}

.formulation-pillars {
    display: grid;
    gap: 14px;
}

.formulation-pillar {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 21px 22px;
    border: 1px solid #E1E6DE;
    border-radius: 12px;
    background: #FFFFFF;
}

    .formulation-pillar span {
        color: var(--nature-gold);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 20px;
    }

    .formulation-pillar strong {
        color: var(--nature-forest);
        font-size: 14px;
    }


/* =========================================================
   DIAGNOSTIC
   ========================================================= */

.diagnostic-section {
    padding: 85px 0;
    background: #FFFFFF;
}

.diagnostic-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 60px;
    align-items: center;
    padding: 55px 65px;
    overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(135deg, #193D2D, #456B4E);
    box-shadow: 0 25px 55px rgba(25, 61, 45, 0.14);
}

.diagnostic-copy .eyebrow {
    color: #D7E4D6;
}

.diagnostic-copy h2 {
    color: #FFFFFF;
}

    .diagnostic-copy h2 span {
        color: #DDE9D9;
    }

.diagnostic-copy p:not(.eyebrow) {
    max-width: 650px;
    color: rgba(255,255,255,0.82);
    font-size: 15px;
    line-height: 1.9;
}

.diagnostic-copy .btn-nature {
    margin-top: 14px;
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--nature-forest);
}

.diagnostic-side {
    display: flex;
    justify-content: center;
}

.diagnostic-circle {
    width: 245px;
    height: 245px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 50%;
    color: #FFFFFF;
    text-align: center;
}

    .diagnostic-circle span {
        font-size: 10px;
        letter-spacing: 3px;
        font-weight: 700;
    }

    .diagnostic-circle strong {
        margin: 7px 0;
        color: #D9BE88;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 26px;
        font-weight: 400;
    }


/* =========================================================
   NOS SOINS — TITRES
   ========================================================= */

.catalogue-section .catalogue-heading h2 {
    max-width: 650px;
}

.catalogue-heading h2 span {
    display: block;
    color: var(--nature-green);
    font-style: italic;
}


/* =========================================================
   PRODUITS
   ========================================================= */

.product-card-bottom {
    margin-top: 20px;
}

    .product-card-bottom .product-price {
        margin-top: 0;
        margin-bottom: 0;
    }


/* =========================================================
   CARNET
   ========================================================= */

.carnet-preview-section {
    padding: 95px 0;
    background: var(--nature-cream);
}

.carnet-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 70px;
    align-items: center;
}

.carnet-copy p:not(.eyebrow) {
    max-width: 690px;
    color: var(--nature-muted);
    font-size: 15px;
    line-height: 1.9;
}

.carnet-mark {
    width: 250px;
    height: 250px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(196,163,107,0.7);
    border-radius: 50%;
    background: #FFFFFF;
    text-align: center;
    box-shadow: 0 20px 45px rgba(25,61,45,0.08);
}

    .carnet-mark span {
        color: var(--nature-green);
        font-size: 10px;
        letter-spacing: 2px;
    }

    .carnet-mark strong {
        margin: 6px 0;
        color: var(--nature-forest);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 33px;
        font-style: italic;
        font-weight: 400;
    }


/* =========================================================
   LIENS TEXTUELS
   ========================================================= */

.text-link {
    display: inline-block;
    margin-top: 20px;
    color: var(--nature-forest);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

    .text-link:hover {
        color: var(--nature-green);
        text-decoration: underline;
    }


/* =========================================================
   RESPONSIVE ACCUEIL
   ========================================================= */

@media (max-width: 991px) {

    .home-hero-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 60px 0;
    }

    .home-hero-copy {
        max-width: 720px;
    }

    .home-hero-visual {
        min-height: 430px;
    }

    .skin-grid,
    .formulation-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .vision-grid {
        grid-template-columns: 1fr 1fr;
    }

    .diagnostic-card {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 45px;
    }

    .diagnostic-side {
        justify-content: flex-start;
    }

    .carnet-preview {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .carnet-mark {
        margin: 0;
    }
}


@media (max-width: 767px) {

    .home-hero-copy h1 {
        font-size: 46px;
    }

    .home-hero-lead {
        font-size: 17px;
    }

    .home-hero-visual {
        min-height: 370px;
    }

    .hero-organic-shape-one {
        width: 310px;
        height: 310px;
    }

    .hero-organic-shape-two {
        width: 245px;
        height: 245px;
    }

    .hero-nature-card {
        width: min(310px, 82%);
        min-height: 330px;
    }

    .hero-floating-note {
        display: none;
    }

    .vision-grid {
        grid-template-columns: 1fr;
    }

    .diagnostic-card {
        padding: 32px;
    }

    .diagnostic-circle {
        width: 200px;
        height: 200px;
    }

    .skin-section,
    .vision-section,
    .resources-preview-section,
    .formulation-section,
    .diagnostic-section,
    .carnet-preview-section {
        padding: 65px 0;
    }
}


@media (max-width: 575px) {

    .home-hero-grid {
        padding-top: 45px;
    }

    .home-hero-copy h1 {
        font-size: 42px;
    }

    .home-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

        .home-hero-actions .btn {
            width: 100%;
            text-align: center;
        }

    .hero-nature-card {
        width: 275px;
        min-height: 305px;
        padding: 32px 25px;
    }

    .hero-card-title {
        font-size: 28px;
    }

    .resource-item {
        grid-template-columns: 52px 1fr;
        gap: 14px;
    }

    .diagnostic-card {
        padding: 28px 22px;
        border-radius: 14px;
    }

    .diagnostic-side {
        justify-content: center;
    }
}

/* =========================================================
   NAVIGATION PRINCIPALE — ALLIANZNATURE
   ========================================================= */

.nature-navbar .navbar-nav {
    gap: 2px;
}

.nature-navbar .nav-link {
    white-space: nowrap;
    color: var(--nature-text);
    font-size: 13px;
    font-weight: 500;
    padding: 9px 10px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

    .nature-navbar .nav-link:hover {
        color: var(--nature-green);
    }


/* Panier */

.nature-navbar .nav-cart-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.nav-cart-icon {
    font-size: 15px;
    line-height: 1;
}


/* Administration */

.nature-navbar .nav-admin-item {
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid #E3E7DF;
}

.nature-navbar .nav-admin-link {
    color: var(--nature-forest);
    font-weight: 600;
}


/* Déconnexion */

.nature-navbar .nav-logout-button {
    display: block;
    width: 100%;
    padding: 9px 10px;
    background: transparent;
    border: 0;
    color: var(--nature-text);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

    .nature-navbar .nav-logout-button:hover {
        color: var(--nature-green);
    }


/* Menu mobile */

@media (max-width: 991px) {

    .nature-navbar .navbar-nav {
        gap: 0;
        padding-top: 15px;
        padding-bottom: 12px;
    }

    .nature-navbar .nav-link {
        display: block;
        width: 100%;
        padding: 11px 14px;
    }

    .nature-navbar .nav-cart-link {
        display: flex;
    }

    .nature-navbar .nav-admin-item {
        margin-left: 0;
        padding-left: 0;
        margin-top: 8px;
        padding-top: 8px;
        border-left: 0;
        border-top: 1px solid #E3E7DF;
    }

    .nature-navbar .nav-logout-button {
        padding: 11px 14px;
    }
}

/* =========================================================
   PAGE NOTRE VISION — ALLIANZNATURE
   ========================================================= */

.editorial-hero {
    padding: 105px 0 90px;
    background: radial-gradient( circle at 88% 30%, rgba(196, 163, 107, 0.16), transparent 28% ), linear-gradient( 120deg, #F8F5ED, #EEF2E9 );
}

.editorial-hero-content {
    max-width: 850px;
}

.editorial-hero h1 {
    margin: 0;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(44px, 6vw, 72px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -1.8px;
}

    .editorial-hero h1 span {
        display: block;
        color: var(--nature-green);
        font-style: italic;
    }

.editorial-hero-content > p:last-child {
    max-width: 720px;
    margin-top: 28px;
    color: var(--nature-muted);
    font-size: 18px;
    line-height: 1.9;
}


/* =========================================================
   INTRODUCTION
   ========================================================= */

.vision-page-intro {
    padding: 95px 0;
    background: #FFFFFF;
}

.vision-page-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 85px;
    align-items: start;
}

.vision-page-intro h2 {
    margin: 0;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 4.5vw, 50px);
    font-weight: 400;
    line-height: 1.18;
}

    .vision-page-intro h2 span {
        display: block;
        color: var(--nature-green);
        font-style: italic;
    }

.vision-page-intro-text {
    max-width: 680px;
}

    .vision-page-intro-text p {
        color: var(--nature-muted);
        font-size: 16px;
        line-height: 1.95;
    }


/* =========================================================
   APPROCHE
   ========================================================= */

.vision-approach-section {
    padding: 100px 0;
    background: var(--nature-cream);
}

.editorial-section-heading {
    max-width: 850px;
    margin: 0 auto 58px;
    text-align: center;
}

    .editorial-section-heading h2 {
        margin: 0;
        color: var(--nature-forest);
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(36px, 4.5vw, 56px);
        font-weight: 400;
        line-height: 1.15;
    }

        .editorial-section-heading h2 span {
            color: var(--nature-green);
            font-style: italic;
        }

    .editorial-section-heading > p:last-child {
        max-width: 700px;
        margin: 24px auto 0;
        color: var(--nature-muted);
        font-size: 15px;
        line-height: 1.9;
    }

.approach-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.approach-card {
    position: relative;
    min-height: 330px;
    padding: 30px;
    border: 1px solid #E2E6DE;
    border-radius: 14px;
    background: #FFFFFF;
}

.approach-number {
    position: absolute;
    top: 24px;
    right: 25px;
    color: var(--nature-gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
}

.approach-card-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    border: 1px solid rgba(196,163,107,0.65);
    border-radius: 50%;
    color: var(--nature-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
}

.approach-card h3 {
    margin-bottom: 14px;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
}

.approach-card p {
    margin: 0;
    color: var(--nature-muted);
    font-size: 14px;
    line-height: 1.85;
}


/* =========================================================
   PILIERS
   ========================================================= */

.vision-pillars {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #DCE2D8;
}

.vision-pillars-title {
    margin-bottom: 22px;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
}

.vision-pillars-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    .vision-pillars-list span {
        padding: 10px 16px;
        border: 1px solid #D9E0D6;
        border-radius: 30px;
        background: #FFFFFF;
        color: var(--nature-green);
        font-size: 12px;
    }


/* =========================================================
   CONVICTION
   ========================================================= */

.conviction-section {
    padding: 100px 0;
    background: #193D2D;
}

.conviction-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 70px;
    align-items: start;
}

.conviction-label .eyebrow {
    color: #C8D8C8;
}

.conviction-big-number {
    display: block;
    margin-top: 55px;
    color: rgba(255,255,255,0.12);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 120px;
    line-height: 0.8;
}

.conviction-content {
    max-width: 800px;
}

    .conviction-content h2 {
        margin: 0 0 28px;
        color: #FFFFFF;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(36px, 4.5vw, 56px);
        font-weight: 400;
        line-height: 1.15;
    }

        .conviction-content h2 span {
            display: block;
            color: #D6E3D4;
            font-style: italic;
        }

    .conviction-content > p {
        max-width: 700px;
        color: rgba(255,255,255,0.78);
        font-size: 15px;
        line-height: 1.9;
    }

    .conviction-content blockquote {
        margin: 30px 0 0;
        padding-left: 24px;
        border-left: 2px solid var(--nature-gold);
        color: #FFFFFF;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 24px;
        font-style: italic;
        line-height: 1.55;
    }

        .conviction-content blockquote strong {
            display: block;
            color: #D6E3D4;
            font-style: normal;
            font-weight: 400;
        }


/* =========================================================
   SIGNATURE
   ========================================================= */

.vision-signature-page {
    padding: 95px 0;
    background: #FFFFFF;
}

.vision-signature-card {
    max-width: 950px;
    margin: 0 auto;
    padding: 70px 40px;
    border: 1px solid rgba(196,163,107,0.45);
    border-radius: 22px;
    background: radial-gradient( circle at center, rgba(232,239,229,0.7), transparent 64% );
    text-align: center;
}

.vision-signature-main {
    margin: 15px 0 10px;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(44px, 6vw, 70px);
    line-height: 1.05;
}

    .vision-signature-main span {
        color: var(--nature-green);
        font-style: italic;
    }

.vision-signature-caption {
    margin: 0;
    color: var(--nature-gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
}


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

.vision-page-cta {
    padding: 90px 0;
    background: var(--nature-cream);
}

.vision-page-cta-content {
    max-width: 700px;
    margin: auto;
    text-align: center;
}

    .vision-page-cta-content h2 {
        margin: 0;
        color: var(--nature-forest);
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(36px, 4vw, 52px);
        font-weight: 400;
    }

        .vision-page-cta-content h2 span {
            color: var(--nature-green);
            font-style: italic;
        }

    .vision-page-cta-content p:not(.eyebrow) {
        margin: 22px auto 26px;
        color: var(--nature-muted);
        line-height: 1.9;
    }


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {

    .vision-page-intro-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .approach-grid {
        grid-template-columns: 1fr 1fr;
    }

    .conviction-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .conviction-big-number {
        margin-top: 0;
        font-size: 70px;
    }
}


@media (max-width: 767px) {

    .editorial-hero {
        padding: 70px 0;
    }

    .vision-page-intro,
    .vision-approach-section,
    .conviction-section,
    .vision-signature-page,
    .vision-page-cta {
        padding: 65px 0;
    }

    .approach-grid {
        grid-template-columns: 1fr;
    }

    .approach-card {
        min-height: auto;
    }

    .vision-signature-card {
        padding: 55px 25px;
    }
}


@media (max-width: 575px) {

    .editorial-hero h1 {
        font-size: 42px;
    }

    .editorial-hero-content > p:last-child {
        font-size: 16px;
    }

    .vision-page-intro h2 {
        font-size: 36px;
    }

    .vision-pillars-list {
        flex-direction: column;
    }

        .vision-pillars-list span {
            width: 100%;
        }

    .conviction-content blockquote {
        font-size: 20px;
    }

    .vision-signature-main {
        font-size: 44px;
    }
}

/* =========================================================
   PAGE NOS RESSOURCES — ALLIANZNATURE
   ========================================================= */

.resources-page-hero {
    padding: 105px 0 95px;
    background: radial-gradient( circle at 88% 35%, rgba(196, 163, 107, 0.18), transparent 28% ), linear-gradient( 120deg, #F8F5ED, #EEF2E9 );
}

.resources-page-hero-content {
    max-width: 880px;
}

.resources-page-hero h1 {
    margin: 0;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(46px, 6vw, 74px);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -2px;
}

    .resources-page-hero h1 span {
        display: block;
        color: var(--nature-green);
        font-style: italic;
    }

.resources-page-hero-content > p:not(.eyebrow) {
    max-width: 760px;
    color: var(--nature-muted);
    font-size: 18px;
    line-height: 1.9;
}

.resources-page-hero-content > p:nth-of-type(2) {
    margin-top: 27px;
}

.resources-hero-secondary {
    max-width: 700px !important;
    font-size: 15px !important;
}


/* =========================================================
   INTRODUCTION
   ========================================================= */

.resources-page-intro {
    padding: 95px 0;
    background: #FFFFFF;
}

.resources-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 85px;
    align-items: start;
}

.resources-page-intro h2 {
    margin: 0;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(36px, 4.5vw, 52px);
    font-weight: 400;
    line-height: 1.15;
}

    .resources-page-intro h2 span {
        display: block;
        color: var(--nature-green);
        font-style: italic;
    }

.resources-intro-text p {
    margin-bottom: 20px;
    color: var(--nature-muted);
    font-size: 16px;
    line-height: 1.95;
}


/* =========================================================
   MATIÈRES
   ========================================================= */

.resources-materials-section {
    padding: 100px 0;
    background: var(--nature-cream);
}

.materials-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.material-card {
    min-height: 320px;
    padding: 27px;
    border: 1px solid #E2E6DE;
    border-radius: 14px;
    background: #FFFFFF;
}

.material-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.material-number {
    color: var(--nature-gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
}

.material-category {
    color: var(--nature-green);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-align: right;
}

.material-symbol {
    width: 57px;
    height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    border: 1px solid rgba(196,163,107,0.7);
    border-radius: 50%;
    color: var(--nature-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
}

.material-card h3 {
    margin: 20px 0 13px;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
}

.material-card p {
    margin: 0;
    color: var(--nature-muted);
    font-size: 13px;
    line-height: 1.85;
}


/* =========================================================
   MÉTHODE
   ========================================================= */

.resources-method-section {
    padding: 100px 0;
    background: #FFFFFF;
}

.resources-method-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr);
    gap: 85px;
    align-items: center;
}

.resources-method-copy h2 {
    margin: 0 0 25px;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 4.5vw, 55px);
    font-weight: 400;
    line-height: 1.13;
}

    .resources-method-copy h2 span {
        display: block;
        color: var(--nature-green);
        font-style: italic;
    }

.resources-method-copy p:not(.eyebrow) {
    max-width: 670px;
    color: var(--nature-muted);
    font-size: 15px;
    line-height: 1.9;
}

.resources-method-steps {
    display: grid;
    gap: 13px;
}

.resource-method-step {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 18px;
    align-items: start;
    padding: 20px;
    border: 1px solid #E5E9E1;
    border-radius: 12px;
    background: #F8F9F6;
}

    .resource-method-step > span {
        color: var(--nature-gold);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 20px;
    }

    .resource-method-step strong {
        display: block;
        margin-bottom: 5px;
        color: var(--nature-forest);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 19px;
    }

    .resource-method-step p {
        margin: 0;
        color: var(--nature-muted);
        font-size: 12px;
        line-height: 1.7;
    }


/* =========================================================
   TERROIR
   ========================================================= */

.resources-terroir-section {
    padding: 95px 0;
    background: var(--nature-forest);
}

.resources-terroir {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 75px;
    align-items: center;
}

.resources-terroir-content h2 {
    margin: 0 0 25px;
    color: #FFFFFF;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 4.5vw, 56px);
    font-weight: 400;
    line-height: 1.13;
}

    .resources-terroir-content h2 span {
        display: block;
        color: #D9E4D5;
        font-style: italic;
    }

.resources-terroir-content p:not(.eyebrow) {
    max-width: 690px;
    color: rgba(255,255,255,0.76);
    font-size: 15px;
    line-height: 1.9;
}

.resources-terroir-content .eyebrow {
    color: #C9D9C6;
}

.resources-terroir-mark {
    width: 245px;
    height: 245px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(196,163,107,0.65);
    border-radius: 50%;
    text-align: center;
}

    .resources-terroir-mark span {
        color: #C9D9C6;
        font-size: 10px;
        letter-spacing: 3px;
    }

    .resources-terroir-mark strong {
        margin: 8px 0;
        color: #FFFFFF;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 37px;
        font-style: italic;
        font-weight: 400;
    }

    .resources-terroir-mark small {
        max-width: 150px;
        color: #C9D9C6;
        font-size: 8px;
        line-height: 1.6;
        letter-spacing: 1.4px;
    }


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

.resources-page-cta {
    padding: 90px 0;
    background: var(--nature-cream);
}

.resources-page-cta-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

    .resources-page-cta-content h2 {
        margin: 0;
        color: var(--nature-forest);
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(36px, 4vw, 52px);
        font-weight: 400;
    }

        .resources-page-cta-content h2 span {
            color: var(--nature-green);
            font-style: italic;
        }

    .resources-page-cta-content p:not(.eyebrow) {
        margin: 22px auto 27px;
        color: var(--nature-muted);
        line-height: 1.9;
    }


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .materials-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 991px) {

    .resources-intro-grid,
    .resources-method-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .resources-terroir {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .resources-terroir-mark {
        margin: 0;
    }
}

@media (max-width: 767px) {

    .resources-page-hero,
    .resources-page-intro,
    .resources-materials-section,
    .resources-method-section,
    .resources-terroir-section,
    .resources-page-cta {
        padding: 65px 0;
    }

    .materials-grid {
        grid-template-columns: 1fr;
    }

    .material-card {
        min-height: auto;
    }
}

@media (max-width: 575px) {

    .resources-page-hero h1 {
        font-size: 43px;
    }

    .resources-page-hero-content > p:not(.eyebrow) {
        font-size: 16px;
    }

    .resource-method-step {
        grid-template-columns: 40px 1fr;
    }

    .resources-terroir-mark {
        width: 210px;
        height: 210px;
    }
}

/* =========================================================
   PAGE NOTRE EXPERTISE — ALLIANZNATURE
   ========================================================= */

.expertise-page-hero {
    padding: 105px 0 95px;
    background: radial-gradient( circle at 86% 35%, rgba(196, 163, 107, 0.18), transparent 28% ), linear-gradient( 120deg, #F8F5ED, #EEF2E9 );
}

.expertise-page-hero-content {
    max-width: 900px;
}

.expertise-page-hero h1 {
    margin: 0;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(46px, 6vw, 74px);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -2px;
}

    .expertise-page-hero h1 span {
        display: block;
        color: var(--nature-green);
        font-style: italic;
    }

.expertise-page-hero-content > p:last-child {
    max-width: 760px;
    margin-top: 28px;
    color: var(--nature-muted);
    font-size: 18px;
    line-height: 1.9;
}


/* =========================================================
   LA PEAU
   ========================================================= */

.expertise-skin-section {
    padding: 95px 0;
    background: #FFFFFF;
}

.expertise-skin-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 85px;
    align-items: start;
}

.expertise-skin-title h2 {
    margin: 0;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 4.5vw, 55px);
    font-weight: 400;
    line-height: 1.15;
}

    .expertise-skin-title h2 span {
        display: block;
        color: var(--nature-green);
        font-style: italic;
    }

.expertise-skin-content {
    max-width: 680px;
}

    .expertise-skin-content p {
        margin-bottom: 20px;
        color: var(--nature-muted);
        font-size: 16px;
        line-height: 1.95;
    }


/* =========================================================
   BESOINS
   ========================================================= */

.expertise-needs-section {
    padding: 100px 0;
    background: var(--nature-cream);
}

.expertise-needs-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.expertise-need-card {
    min-height: 275px;
    padding: 28px;
    border: 1px solid #E1E6DE;
    border-radius: 14px;
    background: #FFFFFF;
}

.expertise-need-number {
    color: var(--nature-gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
}

.expertise-need-card h3 {
    margin: 45px 0 13px;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
}

.expertise-need-card p {
    margin: 0;
    color: var(--nature-muted);
    font-size: 13px;
    line-height: 1.8;
}


/* =========================================================
   FORMULATION
   ========================================================= */

.expertise-formulation-section {
    padding: 100px 0;
    background: #FFFFFF;
}

.expertise-formulation-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
    gap: 85px;
    align-items: center;
}

.expertise-formulation-copy h2 {
    margin: 0 0 28px;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 4.5vw, 56px);
    font-weight: 400;
    line-height: 1.13;
}

    .expertise-formulation-copy h2 span {
        display: block;
        color: var(--nature-green);
        font-style: italic;
    }

.expertise-formulation-copy p:not(.eyebrow) {
    max-width: 690px;
    color: var(--nature-muted);
    font-size: 15px;
    line-height: 1.9;
}

.expertise-formulation-principles {
    display: grid;
    gap: 13px;
}

.expertise-principle {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 18px;
    align-items: start;
    padding: 20px;
    border: 1px solid #E4E8E1;
    border-radius: 12px;
    background: #F8F9F6;
}

    .expertise-principle > span {
        color: var(--nature-gold);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 20px;
    }

    .expertise-principle strong {
        display: block;
        margin-bottom: 5px;
        color: var(--nature-forest);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 19px;
    }

    .expertise-principle p {
        margin: 0;
        color: var(--nature-muted);
        font-size: 12px;
        line-height: 1.7;
    }


/* =========================================================
   DIALOGUE DES SAVOIRS
   ========================================================= */

.expertise-dialogue-section {
    padding: 100px 0;
    background: #F7F8F4;
}

.expertise-dialogue {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 80px;
    align-items: start;
}

.expertise-dialogue-side h2 {
    margin: 0;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 4.5vw, 55px);
    font-weight: 400;
    line-height: 1.13;
}

    .expertise-dialogue-side h2 span {
        display: block;
        color: var(--nature-green);
        font-style: italic;
    }

.expertise-dialogue-content {
    display: grid;
    gap: 0;
}

.expertise-dialogue-item {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 20px;
    padding: 25px 0;
    border-bottom: 1px solid #DDE3DA;
}

    .expertise-dialogue-item:last-child {
        border-bottom: 0;
    }

.expertise-dialogue-number {
    color: var(--nature-gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
}

.expertise-dialogue-item h3 {
    margin: 0 0 10px;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
}

.expertise-dialogue-item p {
    margin: 0;
    color: var(--nature-muted);
    font-size: 14px;
    line-height: 1.85;
}


/* =========================================================
   QUALITÉ
   ========================================================= */

.expertise-quality-section {
    padding: 95px 0;
    background: var(--nature-forest);
}

.expertise-quality-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 75px;
    align-items: center;
}

.expertise-quality-copy h2 {
    margin: 0 0 25px;
    color: #FFFFFF;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 4.5vw, 56px);
    font-weight: 400;
    line-height: 1.13;
}

    .expertise-quality-copy h2 span {
        display: block;
        color: #D8E4D5;
        font-style: italic;
    }

.expertise-quality-copy .eyebrow {
    color: #CBDAC8;
}

.expertise-quality-copy p:not(.eyebrow) {
    max-width: 700px;
    color: rgba(255,255,255,0.76);
    font-size: 15px;
    line-height: 1.9;
}

.expertise-quality-mark {
    width: 230px;
    height: 230px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(196,163,107,0.68);
    border-radius: 50%;
    text-align: center;
}

    .expertise-quality-mark span {
        color: #D0DDD0;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 3px;
    }

    .expertise-quality-mark strong {
        margin: 8px 0;
        color: #D5B879;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 30px;
        font-weight: 400;
    }


/* =========================================================
   DIAGNOSTIC
   ========================================================= */

.expertise-diagnostic-section {
    padding: 95px 0;
    background: #FFFFFF;
}

.expertise-diagnostic-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

    .expertise-diagnostic-content h2 {
        margin: 0;
        color: var(--nature-forest);
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(36px, 4.5vw, 52px);
        font-weight: 400;
        line-height: 1.15;
    }

        .expertise-diagnostic-content h2 span {
            display: block;
            color: var(--nature-green);
            font-style: italic;
        }

    .expertise-diagnostic-content p:not(.eyebrow) {
        max-width: 680px;
        margin: 22px auto 27px;
        color: var(--nature-muted);
        font-size: 15px;
        line-height: 1.9;
    }


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

.expertise-page-cta {
    padding: 90px 0;
    background: var(--nature-cream);
}

.expertise-page-cta-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

    .expertise-page-cta-content h2 {
        margin: 0;
        color: var(--nature-forest);
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(36px, 4vw, 52px);
        font-weight: 400;
    }

        .expertise-page-cta-content h2 span {
            color: var(--nature-green);
            font-style: italic;
        }

    .expertise-page-cta-content p:not(.eyebrow) {
        margin: 22px auto 27px;
        color: var(--nature-muted);
        line-height: 1.9;
    }


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {

    .expertise-skin-grid,
    .expertise-formulation-grid,
    .expertise-dialogue {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .expertise-needs-grid {
        grid-template-columns: 1fr 1fr;
    }

    .expertise-quality-card {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .expertise-quality-mark {
        margin: 0;
    }
}

@media (max-width: 767px) {

    .expertise-page-hero,
    .expertise-skin-section,
    .expertise-needs-section,
    .expertise-formulation-section,
    .expertise-dialogue-section,
    .expertise-quality-section,
    .expertise-diagnostic-section,
    .expertise-page-cta {
        padding: 65px 0;
    }

    .expertise-needs-grid {
        grid-template-columns: 1fr;
    }

    .expertise-need-card {
        min-height: auto;
    }
}

@media (max-width: 575px) {

    .expertise-page-hero h1 {
        font-size: 43px;
    }

    .expertise-page-hero-content > p:last-child {
        font-size: 16px;
    }

    .expertise-principle {
        grid-template-columns: 40px 1fr;
    }

    .expertise-dialogue-item {
        grid-template-columns: 42px 1fr;
        gap: 14px;
    }

    .expertise-quality-mark {
        width: 205px;
        height: 205px;
    }
}

/* =========================================================
   DIAGNOSTIC DE PEAU — ALLIANZNATURE
   ========================================================= */

.diagnostic-page-hero {
    padding: 100px 0 90px;
    background: radial-gradient( circle at 86% 35%, rgba(196, 163, 107, 0.18), transparent 28% ), linear-gradient( 120deg, #F8F5ED, #EEF2E9 );
}

.diagnostic-page-hero-content {
    max-width: 850px;
}

.diagnostic-page-hero h1 {
    margin: 0;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(45px, 6vw, 72px);
    font-weight: 400;
    line-height: 1.08;
}

    .diagnostic-page-hero h1 span {
        display: block;
        color: var(--nature-green);
        font-style: italic;
    }

.diagnostic-page-hero-content > p:not(.eyebrow) {
    max-width: 720px;
    margin-top: 25px;
    color: var(--nature-muted);
    font-size: 17px;
    line-height: 1.9;
}

.diagnostic-page-hero-content small {
    display: block;
    margin-top: 20px;
    color: #7B847D;
    font-size: 11px;
}


/* =========================================================
   QUESTIONNAIRE
   ========================================================= */

.diagnostic-form-section {
    padding: 90px 0;
    background: #FFFFFF;
}

.diagnostic-form {
    max-width: 880px;
    margin: 0 auto;
}

.diagnostic-question {
    display: grid;
    grid-template-columns: 65px 1fr;
    gap: 25px;
    padding: 45px 0;
    border-bottom: 1px solid #E5E9E2;
}

    .diagnostic-question:first-child {
        padding-top: 0;
    }

.diagnostic-question-number {
    color: var(--nature-gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 26px;
}

.diagnostic-question-content h2 {
    margin: 0 0 10px;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.35;
}

.diagnostic-question-content > p {
    margin-bottom: 25px;
    color: var(--nature-muted);
    font-size: 13px;
}

.diagnostic-options {
    display: grid;
    gap: 11px;
}

.diagnostic-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 18px;
    border: 1px solid #DDE3DA;
    border-radius: 10px;
    background: #FAFBF8;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

    .diagnostic-option:hover {
        border-color: #B7C7B4;
        background: #F3F6F0;
        transform: translateX(2px);
    }

    .diagnostic-option input {
        flex-shrink: 0;
        width: 17px;
        height: 17px;
        accent-color: var(--nature-green);
    }

    .diagnostic-option span {
        color: var(--nature-text);
        font-size: 14px;
    }

.diagnostic-submit {
    padding-top: 40px;
    text-align: center;
}

    .diagnostic-submit p {
        max-width: 540px;
        margin: 0 auto 22px;
        color: var(--nature-muted);
        font-size: 12px;
        line-height: 1.7;
    }


/* =========================================================
   RESULTAT
   ========================================================= */

.diagnostic-result-hero {
    padding: 95px 0 85px;
    background: linear-gradient( 120deg, #F8F5ED, #EEF2E9 );
}

.diagnostic-result-header {
    max-width: 850px;
}

    .diagnostic-result-header h1 {
        margin: 0;
        color: var(--nature-forest);
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(44px, 5.5vw, 68px);
        font-weight: 400;
        line-height: 1.08;
    }

        .diagnostic-result-header h1 span {
            display: block;
            color: var(--nature-green);
            font-style: italic;
        }

    .diagnostic-result-header > p:last-child {
        max-width: 700px;
        margin-top: 25px;
        color: var(--nature-muted);
        line-height: 1.9;
    }


/* =========================================================
   CARTES RESULTAT
   ========================================================= */

.diagnostic-result-section {
    padding: 90px 0;
    background: #FFFFFF;
}

.diagnostic-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.diagnostic-result-card {
    padding: 35px;
    border: 1px solid #E2E7DF;
    border-radius: 14px;
    background: #FAFBF8;
}

.diagnostic-result-label {
    margin-bottom: 20px;
    color: var(--nature-green);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.diagnostic-result-card h2 {
    margin: 0 0 14px;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 400;
}

.diagnostic-result-card p:last-child {
    margin: 0;
    color: var(--nature-muted);
    font-size: 13px;
    line-height: 1.8;
}


/* =========================================================
   CONSEILS
   ========================================================= */

.diagnostic-advice {
    max-width: 800px;
    margin: 75px auto;
    text-align: center;
}

    .diagnostic-advice h2 {
        margin: 0;
        color: var(--nature-forest);
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(34px, 4vw, 48px);
        font-weight: 400;
    }

        .diagnostic-advice h2 span {
            display: block;
            color: var(--nature-green);
            font-style: italic;
        }

    .diagnostic-advice p:last-child {
        max-width: 670px;
        margin: 23px auto 0;
        color: var(--nature-muted);
        font-size: 15px;
        line-height: 1.9;
    }


/* =========================================================
   PRODUITS
   ========================================================= */

.diagnostic-products {
    padding-top: 20px;
}

    .diagnostic-products .catalogue-results-heading {
        margin-bottom: 30px;
    }


/* =========================================================
   ACTIONS
   ========================================================= */

.diagnostic-result-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 50px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 767px) {

    .diagnostic-page-hero,
    .diagnostic-form-section,
    .diagnostic-result-hero,
    .diagnostic-result-section {
        padding: 65px 0;
    }

    .diagnostic-question {
        grid-template-columns: 45px 1fr;
        gap: 15px;
    }

    .diagnostic-question-content h2 {
        font-size: 22px;
    }

    .diagnostic-result-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 575px) {

    .diagnostic-page-hero h1,
    .diagnostic-result-header h1 {
        font-size: 42px;
    }

    .diagnostic-question {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .diagnostic-question-number {
        font-size: 21px;
    }

    .diagnostic-result-card {
        padding: 27px;
    }

    .diagnostic-result-actions {
        flex-direction: column;
    }

        .diagnostic-result-actions .btn {
            width: 100%;
            text-align: center;
        }
}

/* =========================================================
   ADMIN — RECOMMANDATIONS DIAGNOSTIC
   ========================================================= */

.admin-page-heading {
    margin-bottom: 35px;
}

    .admin-page-heading h1 {
        margin: 0 0 10px;
        color: var(--nature-forest);
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(32px, 4vw, 45px);
        font-weight: 400;
    }

    .admin-page-heading .text-muted {
        max-width: 700px;
        line-height: 1.8;
    }


/* Liste */

.admin-table-card {
    overflow: hidden;
    border: 1px solid #E5E9E2;
    border-radius: 14px;
    background: #FFFFFF;
}

    .admin-table-card .table {
        margin: 0;
    }

    .admin-table-card thead th {
        padding: 16px 18px;
        border-bottom: 1px solid #DDE3DA;
        background: #F7F8F4;
        color: var(--nature-forest);
        font-size: 12px;
        font-weight: 700;
    }

    .admin-table-card tbody td {
        padding: 17px 18px;
        border-color: #EDF0EB;
        color: var(--nature-muted);
        font-size: 13px;
    }

        .admin-table-card tbody td strong {
            color: var(--nature-forest);
        }

.admin-status-active,
.admin-status-inactive {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
}

.admin-status-active {
    background: #E8EFE5;
    color: var(--nature-green);
}

.admin-status-inactive {
    background: #F1ECE6;
    color: #8A7662;
}

.admin-recommendation-count {
    color: var(--nature-forest);
    font-weight: 700;
}

.admin-recommendation-empty {
    color: #9A9F99;
}


/* Configuration produit */

.diagnostic-admin-product-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    padding: 30px;
    border: 1px solid #E3E8E0;
    border-radius: 14px;
    background: linear-gradient( 135deg, #F8F5ED, #EEF2E9 );
}

.diagnostic-admin-label,
.diagnostic-admin-profile-label {
    margin-bottom: 8px;
    color: var(--nature-green);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.diagnostic-admin-product-card h2 {
    margin: 0;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 32px;
    font-weight: 400;
}

.diagnostic-admin-size {
    margin: 8px 0 0;
    color: var(--nature-muted);
    font-size: 13px;
}


/* Explication */

.diagnostic-admin-info {
    margin-bottom: 30px;
    padding: 22px 24px;
    border-left: 3px solid var(--nature-gold);
    background: #FAFAF7;
}

    .diagnostic-admin-info strong {
        color: var(--nature-forest);
    }

    .diagnostic-admin-info p {
        margin: 8px 0 0;
        color: var(--nature-muted);
        font-size: 13px;
        line-height: 1.75;
    }


/* Profils */

.diagnostic-admin-combinations {
    display: grid;
    gap: 18px;
}

.diagnostic-admin-profile {
    overflow: hidden;
    border: 1px solid #E3E8E0;
    border-radius: 14px;
    background: #FFFFFF;
}

.diagnostic-admin-profile-header {
    padding: 22px 25px;
    border-bottom: 1px solid #E7EAE3;
    background: #F7F8F4;
}

    .diagnostic-admin-profile-header h2 {
        margin: 0;
        color: var(--nature-forest);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 25px;
        font-weight: 400;
    }

.diagnostic-admin-needs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 22px 25px;
}

.diagnostic-admin-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 15px;
    border: 1px solid #DEE4DB;
    border-radius: 9px;
    background: #FAFBF8;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

    .diagnostic-admin-option:hover {
        border-color: #B8C8B5;
        background: #F2F6EF;
    }

    .diagnostic-admin-option input[type="checkbox"] {
        width: 17px;
        height: 17px;
        accent-color: var(--nature-green);
    }

    .diagnostic-admin-option span {
        color: var(--nature-text);
        font-size: 13px;
    }


/* Actions */

.diagnostic-admin-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
}


/* Responsive */

@media (max-width: 991px) {

    .diagnostic-admin-needs {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575px) {

    .diagnostic-admin-product-card {
        padding: 24px;
    }

        .diagnostic-admin-product-card h2 {
            font-size: 27px;
        }

    .diagnostic-admin-needs {
        grid-template-columns: 1fr;
    }

    .diagnostic-admin-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

        .diagnostic-admin-actions .btn {
            width: 100%;
            text-align: center;
        }
}

/* =========================================================
   ICÔNE CARTE RECOMMANDATIONS DIAGNOSTIC
   ========================================================= */

.admin-dashboard-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border: 1px solid rgba(196, 163, 107, 0.55);
    border-radius: 50%;
    background: #F8F5ED;
    font-size: 23px;
}
.admin-dashboard-number {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border: 1px solid #D8E1D4;
    border-radius: 50%;
    background: #F3F6F0;
    color: var(--nature-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
}

/* =========================================================
   CARTE RECOMMANDATIONS DIAGNOSTIC
   ========================================================= */

.admin-dashboard-card .card-title {
    color: var(--nature-forest);
    font-size: 18px !important;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 12px;
}

.admin-dashboard-card .admin-dashboard-number {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border: 1px solid #D8E1D4;
    border-radius: 50%;
    background: #F3F6F0;
    color: var(--nature-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px !important;
    font-weight: 400;
}

/* =========================================================
   DIMENSIONS UNIFORMES DES CARTES DU TABLEAU DE BORD
   ========================================================= */

.admin-dashboard-card {
    height: 258px !important;
    min-height: 258px !important;
}

    .admin-dashboard-card .card-body {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

        .admin-dashboard-card .card-body > p {
            flex-grow: 1;
            width: 100%;
        }

/* =========================================================
   RESULTAT DIAGNOSTIC — VERSION PERSONNALISÉE
   ========================================================= */

.diagnostic-result-profile-section {
    padding: 75px 0 40px;
    background: #FFFFFF;
}

.diagnostic-result-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.diagnostic-result-profile-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px;
    border: 1px solid #E2E7DF;
    border-radius: 14px;
    background: #FAFBF8;
}

.diagnostic-result-profile-icon {
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(196, 163, 107, 0.65);
    border-radius: 50%;
    color: var(--nature-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
}

.diagnostic-result-profile-card h2 {
    margin: 0;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.25;
}

.diagnostic-result-label {
    margin-bottom: 7px;
    color: var(--nature-green);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.diagnostic-result-note {
    max-width: 800px;
    margin: 22px auto 0;
    text-align: center;
}

    .diagnostic-result-note p {
        margin: 0;
        color: #7A817B;
        font-size: 11px;
        line-height: 1.7;
    }


/* =========================================================
   CONSEIL
   ========================================================= */

.diagnostic-advice-section {
    padding: 55px 0 90px;
    background: #FFFFFF;
}

.diagnostic-advice-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 60px;
    align-items: center;
    padding: 50px 55px;
    border-radius: 18px;
    background: var(--nature-forest);
}

.diagnostic-advice-copy h2 {
    margin: 0 0 22px;
    color: #FFFFFF;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 400;
    line-height: 1.15;
}

    .diagnostic-advice-copy h2 span {
        display: block;
        color: #D8E4D5;
        font-style: italic;
    }

.diagnostic-advice-copy p:not(.eyebrow) {
    max-width: 680px;
    margin: 0;
    color: rgba(255,255,255,0.78);
    font-size: 15px;
    line-height: 1.9;
}

.diagnostic-advice-copy .eyebrow {
    color: #CADAC6;
}

.diagnostic-advice-mark {
    width: 210px;
    height: 210px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(196,163,107,0.68);
    border-radius: 50%;
    text-align: center;
}

    .diagnostic-advice-mark span {
        color: #D1DED0;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 2.5px;
    }

    .diagnostic-advice-mark strong {
        margin: 10px 0;
        color: #FFFFFF;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 27px;
        font-style: italic;
        font-weight: 400;
    }

    .diagnostic-advice-mark small {
        color: #C5D4C2;
        font-size: 8px;
        letter-spacing: 2px;
    }


/* =========================================================
   SOINS RECOMMANDÉS
   ========================================================= */

.diagnostic-recommended-section {
    padding: 95px 0;
    background: var(--nature-cream);
}

.diagnostic-recommended-heading {
    max-width: 760px;
    margin: 0 auto 50px;
    text-align: center;
}

    .diagnostic-recommended-heading h2 {
        margin: 0;
        color: var(--nature-forest);
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(36px, 4.5vw, 52px);
        font-weight: 400;
        line-height: 1.15;
    }

        .diagnostic-recommended-heading h2 span {
            display: block;
            color: var(--nature-green);
            font-style: italic;
        }

    .diagnostic-recommended-heading p:not(.eyebrow) {
        max-width: 650px;
        margin: 22px auto 0;
        color: var(--nature-muted);
        font-size: 15px;
        line-height: 1.9;
    }

.diagnostic-product-recommendation {
    margin-top: 12px;
}

    .diagnostic-product-recommendation span {
        display: inline-block;
        padding: 6px 10px;
        border-radius: 20px;
        background: #E8EFE5;
        color: var(--nature-green);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.7px;
    }


/* =========================================================
   AUCUNE RECOMMANDATION
   ========================================================= */

.diagnostic-no-recommendation {
    max-width: 700px;
    margin: 0 auto;
    padding: 55px 30px;
    border: 1px dashed #C8D2C5;
    border-radius: 16px;
    background: #FFFFFF;
    text-align: center;
}

.diagnostic-no-recommendation-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    border: 1px solid #D6DFD2;
    border-radius: 50%;
    color: var(--nature-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
}

.diagnostic-no-recommendation h3 {
    margin: 0 0 12px;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: 400;
}

.diagnostic-no-recommendation p {
    max-width: 520px;
    margin: 0 auto 24px;
    color: var(--nature-muted);
    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.diagnostic-result-actions-section {
    padding: 55px 0 80px;
    background: var(--nature-cream);
}

.diagnostic-result-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {

    .diagnostic-advice-card {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .diagnostic-advice-mark {
        margin: 0;
    }
}

@media (max-width: 767px) {

    .diagnostic-result-profile-grid {
        grid-template-columns: 1fr;
    }

    .diagnostic-advice-card {
        padding: 35px;
    }

    .diagnostic-advice-mark {
        width: 180px;
        height: 180px;
        margin: 0 auto;
    }

    .diagnostic-recommended-section {
        padding: 65px 0;
    }
}

@media (max-width: 575px) {

    .diagnostic-result-profile-card {
        padding: 24px;
    }

    .diagnostic-result-profile-icon {
        width: 48px;
        height: 48px;
        font-size: 19px;
    }

    .diagnostic-result-profile-card h2 {
        font-size: 21px;
    }

    .diagnostic-advice-card {
        padding: 28px 22px;
    }

    .diagnostic-result-actions {
        flex-direction: column;
    }

        .diagnostic-result-actions .btn {
            width: 100%;
            text-align: center;
        }
}

/* =========================================================
   CARNET ALLIANZNATURE
   ========================================================= */

.carnet-page-hero {
    padding: 105px 0 95px;
    background: radial-gradient( circle at 88% 35%, rgba(196, 163, 107, 0.18), transparent 28% ), linear-gradient( 120deg, #F8F5ED, #EEF2E9 );
}

.carnet-page-hero-content {
    max-width: 850px;
}

.carnet-page-hero h1 {
    margin: 0;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(45px, 6vw, 72px);
    font-weight: 400;
    line-height: 1.08;
}

    .carnet-page-hero h1 span {
        display: block;
        color: var(--nature-green);
        font-style: italic;
    }

.carnet-page-hero-content > p:not(.eyebrow) {
    max-width: 730px;
    margin-top: 25px;
    color: var(--nature-muted);
    font-size: 17px;
    line-height: 1.9;
}


/* =========================================================
   LISTE DES ARTICLES
   ========================================================= */

.carnet-articles-section {
    padding: 95px 0;
    background: var(--nature-cream);
}

.carnet-articles-heading {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 50px;
    align-items: end;
    margin-bottom: 50px;
}

    .carnet-articles-heading h2 {
        margin: 0;
        color: var(--nature-forest);
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(38px, 4.5vw, 55px);
        font-weight: 400;
        line-height: 1.15;
    }

        .carnet-articles-heading h2 span {
            display: block;
            color: var(--nature-green);
            font-style: italic;
        }

    .carnet-articles-heading > p {
        margin: 0;
        color: var(--nature-muted);
        font-size: 14px;
        line-height: 1.85;
    }

.carnet-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.carnet-article-card {
    overflow: hidden;
    border: 1px solid #E1E6DE;
    border-radius: 14px;
    background: #FFFFFF;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .carnet-article-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(25, 61, 45, 0.08);
    }

.carnet-article-image-link {
    display: block;
    text-decoration: none;
}

.carnet-article-image {
    height: 235px;
    overflow: hidden;
    background: #F3F0E7;
}

    .carnet-article-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.carnet-article-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nature-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    letter-spacing: 3px;
}

.carnet-article-content {
    padding: 25px;
}

.carnet-article-category {
    margin-bottom: 9px;
    color: var(--nature-green);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.carnet-article-content h3 {
    margin: 0 0 13px;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.25;
}

    .carnet-article-content h3 a {
        color: inherit;
        text-decoration: none;
    }

        .carnet-article-content h3 a:hover {
            color: var(--nature-green);
        }

.carnet-article-resume {
    margin-bottom: 17px;
    color: var(--nature-muted);
    font-size: 13px;
    line-height: 1.8;
}

.carnet-article-meta {
    color: #8A918B;
    font-size: 10px;
}

.carnet-article-link {
    display: inline-block;
    margin-top: 17px;
    color: var(--nature-green);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

    .carnet-article-link:hover {
        color: var(--nature-forest);
        text-decoration: underline;
    }


/* =========================================================
   CARNET VIDE
   ========================================================= */

.carnet-empty {
    max-width: 680px;
    margin: 0 auto;
    padding: 65px 30px;
    border: 1px dashed #C8D2C5;
    border-radius: 16px;
    background: #FFFFFF;
    text-align: center;
}

.carnet-empty-mark {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    border: 1px solid rgba(196,163,107,0.65);
    border-radius: 50%;
    color: var(--nature-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
}

.carnet-empty h3 {
    margin: 0 0 12px;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    font-weight: 400;
}

.carnet-empty p {
    margin: 0 0 25px;
    color: var(--nature-muted);
    line-height: 1.8;
}


/* =========================================================
   DETAIL
   ========================================================= */

.carnet-detail-hero {
    padding: 95px 0 80px;
    background: var(--nature-cream);
}

.carnet-detail-header {
    max-width: 900px;
}

    .carnet-detail-header h1 {
        margin: 0;
        color: var(--nature-forest);
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(42px, 5.5vw, 68px);
        font-weight: 400;
        line-height: 1.1;
    }

.carnet-detail-resume {
    max-width: 760px;
    margin: 25px 0 15px;
    color: var(--nature-muted);
    font-size: 17px;
    line-height: 1.9;
}

.carnet-detail-meta {
    color: #7E877F;
    font-size: 11px;
}

.carnet-detail-section {
    padding: 80px 0 95px;
    background: #FFFFFF;
}

.carnet-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 75px;
    align-items: start;
}

.carnet-detail-content {
    min-width: 0;
}

.carnet-detail-image {
    margin-bottom: 40px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--nature-cream);
}

    .carnet-detail-image img {
        display: block;
        width: 100%;
        max-height: 600px;
        object-fit: cover;
    }

.carnet-detail-text {
    color: var(--nature-text);
    font-size: 16px;
    line-height: 2;
    white-space: pre-line;
}

.carnet-detail-sidebar {
    position: sticky;
    top: 30px;
    padding: 30px;
    border: 1px solid #E4E8E1;
    border-radius: 14px;
    background: #F8F9F6;
}

    .carnet-detail-sidebar h2 {
        margin: 0 0 18px;
        color: var(--nature-forest);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 28px;
        font-weight: 400;
        line-height: 1.2;
    }

        .carnet-detail-sidebar h2 span {
            display: block;
            color: var(--nature-green);
            font-style: italic;
        }

    .carnet-detail-sidebar p:not(.eyebrow) {
        color: var(--nature-muted);
        font-size: 13px;
        line-height: 1.8;
    }


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

.carnet-detail-cta {
    padding: 85px 0;
    background: var(--nature-cream);
}

.carnet-detail-cta-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

    .carnet-detail-cta-content h2 {
        margin: 0;
        color: var(--nature-forest);
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(36px, 4vw, 52px);
        font-weight: 400;
    }

        .carnet-detail-cta-content h2 span {
            color: var(--nature-green);
            font-style: italic;
        }


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {

    .carnet-articles-heading {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .carnet-articles-grid {
        grid-template-columns: 1fr 1fr;
    }

    .carnet-detail-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .carnet-detail-sidebar {
        position: static;
    }
}

@media (max-width: 767px) {

    .carnet-page-hero,
    .carnet-articles-section,
    .carnet-detail-hero,
    .carnet-detail-section,
    .carnet-detail-cta {
        padding: 65px 0;
    }

    .carnet-articles-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {

    .carnet-page-hero h1 {
        font-size: 42px;
    }

    .carnet-detail-header h1 {
        font-size: 40px;
    }

    .carnet-detail-image {
        margin-bottom: 30px;
    }
}

/* =========================================================
   ALLIANZ NATURE — ADMINISTRATION DU CARNET
   ========================================================= */

/* ---------------------------------------------------------
   Conteneur général
   --------------------------------------------------------- */

.carnet-admin-page {
    color: var(--nature-text);
}

    .carnet-admin-page h1,
    .carnet-admin-page h2,
    .carnet-admin-page h3,
    .carnet-admin-page h4,
    .carnet-admin-page h5 {
        color: var(--nature-forest);
    }


/* ---------------------------------------------------------
   En-têtes de page
   --------------------------------------------------------- */

.carnet-admin-header {
    margin-bottom: 28px;
}

    .carnet-admin-header h1 {
        margin-bottom: 6px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 30px;
        font-weight: 700;
        letter-spacing: -0.3px;
    }

    .carnet-admin-header p {
        margin-bottom: 0;
        color: var(--nature-muted);
        font-size: 14px;
        line-height: 1.6;
    }


/* ---------------------------------------------------------
   Boutons principaux du Carnet
   --------------------------------------------------------- */

.carnet-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    background: var(--nature-forest);
    border: 1px solid var(--nature-forest);
    border-radius: 26px;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .carnet-btn-primary:hover {
        background: var(--nature-green);
        border-color: var(--nature-green);
        color: #FFFFFF;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(25, 61, 45, 0.14);
    }

    .carnet-btn-primary:focus-visible {
        outline: 3px solid rgba(196, 163, 107, 0.35);
        outline-offset: 2px;
    }


/* ---------------------------------------------------------
   Cartes statistiques
   --------------------------------------------------------- */

.carnet-stat-card {
    height: 100%;
    border: 1px solid #E5E9E2;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 5px 18px rgba(25, 61, 45, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .carnet-stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(25, 61, 45, 0.08);
    }

.carnet-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--nature-light-green);
    color: var(--nature-forest);
    font-size: 20px;
}

.carnet-stat-number {
    color: var(--nature-forest);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.carnet-stat-label {
    color: var(--nature-muted);
    font-size: 12px;
}


/* ---------------------------------------------------------
   Carte principale / tableau
   --------------------------------------------------------- */

.carnet-admin-panel {
    overflow: hidden;
    border: 1px solid #E5E9E2 !important;
    border-radius: 16px !important;
    background: #FFFFFF;
    box-shadow: 0 6px 22px rgba(25, 61, 45, 0.055) !important;
}

    .carnet-admin-panel .card-header {
        padding: 18px 22px;
        background: #FBFBF8 !important;
        border-bottom: 1px solid #E7EAE3 !important;
    }

        .carnet-admin-panel .card-header h5 {
            color: var(--nature-forest);
            font-size: 17px;
        }

        .carnet-admin-panel .card-header small {
            color: var(--nature-muted);
        }


/* ---------------------------------------------------------
   Tableau des articles
   --------------------------------------------------------- */

.carnet-admin-table {
    margin-bottom: 0;
}

    .carnet-admin-table thead th {
        padding: 15px 14px;
        background: #F8F8F4;
        border-bottom: 1px solid #E2E6DF;
        color: var(--nature-forest);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .carnet-admin-table tbody td {
        padding: 16px 14px;
        border-color: #ECEFEA;
        color: var(--nature-text);
        vertical-align: middle;
    }

    .carnet-admin-table tbody tr {
        transition: background-color 0.15s ease;
    }

        .carnet-admin-table tbody tr:hover {
            background: #FAFCF8;
        }


/* ---------------------------------------------------------
   Miniature article
   --------------------------------------------------------- */

.carnet-admin-thumb {
    width: 68px;
    height: 68px;
    display: block;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #E4E7E1;
    background: #F5F6F2;
}

.carnet-admin-thumb-empty {
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px dashed #CCD3C9;
    background: #F7F8F5;
    color: #A1AAA2;
    font-size: 20px;
}


/* ---------------------------------------------------------
   Titre et résumé dans le tableau
   --------------------------------------------------------- */

.carnet-admin-article-title {
    margin-bottom: 5px;
    color: var(--nature-forest);
    font-size: 14px;
    font-weight: 700;
}

.carnet-admin-article-resume {
    max-width: 420px;
    color: var(--nature-muted);
    font-size: 12px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}


/* ---------------------------------------------------------
   Badges
   --------------------------------------------------------- */

.carnet-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.carnet-badge-published {
    background: #E8F1E8;
    color: #2F6440;
}

.carnet-badge-draft {
    background: #F0F1EE;
    color: #667067;
}

.carnet-badge-category {
    background: #F5F0E6;
    color: #715C32;
    border: 1px solid #E9DEC5;
}


/* ---------------------------------------------------------
   Boutons d'action dans le tableau
   --------------------------------------------------------- */

.carnet-action-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 10px;
}

    .carnet-action-btn:hover {
        transform: translateY(-1px);
    }


/* ---------------------------------------------------------
   Formulaires création / modification
   --------------------------------------------------------- */

.carnet-form-card {
    border: 1px solid #E5E9E2 !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(25, 61, 45, 0.055) !important;
}

    .carnet-form-card .card-header {
        padding: 18px 22px;
        background: #FBFBF8 !important;
        border-bottom: 1px solid #E7EAE3 !important;
    }

        .carnet-form-card .card-header h5 {
            margin: 0;
            color: var(--nature-forest);
            font-size: 17px;
            font-weight: 700;
        }

    .carnet-form-card .card-body {
        padding: 24px;
    }


    /* ---------------------------------------------------------
   Labels et champs
   --------------------------------------------------------- */

    .carnet-form-card .form-label {
        margin-bottom: 7px;
        color: var(--nature-forest);
        font-size: 13px;
        font-weight: 600;
    }

    .carnet-form-card .form-control {
        border: 1px solid #DCE2D9;
        border-radius: 10px;
        color: var(--nature-text);
        background: #FFFFFF;
        box-shadow: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

        .carnet-form-card .form-control:focus {
            border-color: var(--nature-green);
            box-shadow: 0 0 0 3px rgba(69, 107, 78, 0.10);
        }

        .carnet-form-card .form-control::placeholder {
            color: #A4ACA5;
        }


/* ---------------------------------------------------------
   Zone de contenu éditorial
   --------------------------------------------------------- */

.carnet-content-editor {
    min-height: 440px;
    resize: vertical;
    line-height: 1.8;
    font-size: 14px;
}


/* ---------------------------------------------------------
   Aperçu des images
   --------------------------------------------------------- */

.carnet-image-preview {
    width: 100%;
    max-height: 290px;
    display: block;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid #E1E5DF;
    background: #F7F8F5;
}


/* ---------------------------------------------------------
   Bloc publication
   --------------------------------------------------------- */

.carnet-publication-box {
    padding: 16px;
    border-radius: 12px;
    background: #F6F8F3;
    border: 1px solid #E3E9DF;
}

    .carnet-publication-box .form-check-label {
        color: var(--nature-forest);
        font-weight: 600;
    }

.carnet-publication-help {
    margin-top: 8px;
    color: var(--nature-muted);
    font-size: 12px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   Boutons du formulaire
   --------------------------------------------------------- */

.carnet-form-submit {
    width: 100%;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 18px;
}

.carnet-form-cancel {
    width: 100%;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 500;
    padding: 11px 18px;
}


/* ---------------------------------------------------------
   Etat vide
   --------------------------------------------------------- */

.carnet-empty-state {
    padding: 70px 25px;
    text-align: center;
}

.carnet-empty-state-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #F3F5F0;
    color: var(--nature-green);
    font-size: 28px;
}

.carnet-empty-state h5 {
    margin-bottom: 8px;
    color: var(--nature-forest);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
}

.carnet-empty-state p {
    max-width: 500px;
    margin: 0 auto 24px;
    color: var(--nature-muted);
    line-height: 1.7;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 991px) {

    .carnet-admin-header {
        align-items: flex-start !important;
    }

        .carnet-admin-header h1 {
            font-size: 27px;
        }

    .carnet-admin-table thead th,
    .carnet-admin-table tbody td {
        padding: 12px 10px;
    }
}


@media (max-width: 767px) {

    .carnet-admin-header h1 {
        font-size: 24px;
    }

    .carnet-form-card .card-body {
        padding: 18px;
    }

    .carnet-content-editor {
        min-height: 350px;
    }

    .carnet-admin-thumb,
    .carnet-admin-thumb-empty {
        width: 58px;
        height: 58px;
    }

    .carnet-admin-article-resume {
        max-width: 260px;
    }
}


@media (max-width: 575px) {

    .carnet-admin-header {
        margin-bottom: 20px;
    }

        .carnet-admin-header h1 {
            font-size: 22px;
        }

    .carnet-stat-icon {
        width: 46px;
        height: 46px;
    }

    .carnet-stat-number {
        font-size: 24px;
    }

    .carnet-admin-table {
        min-width: 900px;
    }

    .carnet-form-card .card-body {
        padding: 15px;
    }
}

/* Numérotation des cartes du tableau de bord */

.admin-dashboard-number {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border: 1px solid #D8E2D4;
    border-radius: 50%;
    background: #F4F7F1;
    color: var(--nature-forest);
    font-size: 11px;
    font-weight: 600;
}

/* Titres uniformes des cartes du tableau de bord */

.admin-dashboard-card h2 {
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
}
/* Correction définitive des numéros des cartes du tableau de bord */

.admin-dashboard-card .admin-card-icon,
.admin-dashboard-card .admin-dashboard-number {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    flex: 0 0 38px !important;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    padding: 0 !important;
    border-radius: 50% !important;
    line-height: 1 !important;
    white-space: nowrap;
}

/* Espacement régulier entre le texte et le bouton */

.admin-dashboard-card .card-body > p {
    flex-grow: 1;
    width: 100%;
    margin-bottom: 20px;
}

.admin-dashboard-card .btn-admin-card {
    flex-shrink: 0;
    margin-top: auto !important;
}

/* =====================================================
   CARNET ALLIANZNATURE — BOUTONS D'ACTION
   ===================================================== */

.carnet-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    white-space: nowrap;
}

    .carnet-actions form {
        display: inline-flex;
        margin: 0;
    }

    .carnet-actions a {
        text-decoration: none;
    }

.carnet-action-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #FFFFFF;
    border: 1px solid #DCE3DA;
    border-radius: 10px;
    color: var(--nature-forest);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

    .carnet-action-btn svg {
        display: block;
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .carnet-action-btn:hover {
        transform: translateY(-1px);
    }


/* Modifier */

.carnet-action-edit {
    color: #456B4E;
}

    .carnet-action-edit:hover {
        background: #E8EFE5;
        border-color: #456B4E;
    }


/* Publier */

.carnet-action-publish {
    color: #287447;
}

    .carnet-action-publish:hover {
        background: #E8F4EB;
        border-color: #287447;
    }


/* Dépublier */

.carnet-action-toggle {
    color: #966B18;
}

    .carnet-action-toggle:hover {
        background: #FBF3DF;
        border-color: #C4A36B;
    }


/* Voir */

.carnet-action-view {
    color: #475569;
}

    .carnet-action-view:hover {
        background: #F1F4F7;
        border-color: #94A3B8;
    }


/* Supprimer */

.carnet-action-delete {
    color: #B42318;
}

    .carnet-action-delete:hover {
        background: #FDECEB;
        border-color: #D92D20;
    }


/* Espace suffisant pour toutes les actions */

.carnet-admin-table th:last-child,
.carnet-admin-table td:last-child {
    min-width: 195px;
}


/* =========================================================
   MENU COMPTE CLIENT - ALLIANZNATURE
   ========================================================= */

.nature-navbar .nav-compte-item {
    position: relative;
}

.nature-navbar .nav-compte-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    font-weight: 600;
}

    .nature-navbar .nav-compte-toggle::after {
        margin-left: 4px;
    }

.nature-navbar .nav-compte-menu {
    min-width: 225px;
    padding: 10px;
    border: 1px solid #e5e9e5;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .10);
}

    .nature-navbar .nav-compte-menu .dropdown-item {
        display: block;
        width: 100%;
        padding: 11px 14px;
        border-radius: 8px;
        color: #284c39;
        font-size: .93rem;
        font-weight: 500;
        text-decoration: none;
        white-space: normal;
    }

        .nature-navbar .nav-compte-menu .dropdown-item:hover,
        .nature-navbar .nav-compte-menu .dropdown-item:focus {
            background: #f1f5ee;
            color: #284c39;
        }

    .nature-navbar .nav-compte-menu .dropdown-divider {
        margin: 8px 4px;
        border-color: #e5e9e5;
    }

    .nature-navbar .nav-compte-menu .nav-compte-logout {
        background: transparent;
        border: none;
        text-align: left;
        cursor: pointer;
        color: #8b3030;
    }

        .nature-navbar .nav-compte-menu .nav-compte-logout:hover {
            background: #fff1f0;
            color: #8b3030;
        }


/* =========================================================
   LIEN ADMINISTRATION DANS LE FOOTER
   ========================================================= */

.footer-admin-access {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-admin-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: inherit;
    opacity: .65;
    font-size: .82rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity .2s ease, color .2s ease;
}

    .footer-admin-link:hover {
        opacity: 1;
        color: #527e61;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .footer-admin-link:focus-visible {
        opacity: 1;
        outline: 2px solid currentColor;
        outline-offset: 4px;
        border-radius: 3px;
    }


/* =========================================================
   FOOTER ALLIANZNATURE - ORGANISATION EN 3 ZONES
   ========================================================= */

.site-footer .footer-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 0;
}

.site-footer .footer-brand-area {
    text-align: left;
    min-width: 0;
    padding-right: 25px;
}

.site-footer .footer-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    border-left: 1px solid #d9dfd5;
    border-right: 1px solid #d9dfd5;
    padding: 15px 25px;
    min-height: 85px;
}

    .site-footer .footer-contact .footer-label {
        display: block;
        margin: 0;
        letter-spacing: 2px;
        font-weight: 700;
    }

    .site-footer .footer-contact .footer-phone {
        display: block;
        margin: 0;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
    }

.site-footer .footer-navigation {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-left: 25px;
}

/* Pied de page inférieur */

.site-footer .footer-bottom {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 20px;
}

    .site-footer .footer-bottom .copyright {
        text-align: left;
        margin: 0;
    }

    .site-footer .footer-bottom .footer-developer {
        text-align: center;
        margin: 0;
    }

    .site-footer .footer-bottom .footer-admin-access {
        justify-content: flex-end;
    }

/* Tablettes et smartphones */

@media (max-width: 767.98px) {
    .site-footer .footer-main {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .site-footer .footer-brand-area {
        text-align: center;
        padding-right: 0;
    }

    .site-footer .footer-contact {
        border-left: none;
        border-right: none;
        border-top: 1px solid #d9dfd5;
        border-bottom: 1px solid #d9dfd5;
        padding: 22px 10px;
        min-height: auto;
    }

    .site-footer .footer-navigation {
        justify-content: center;
        padding-left: 0;
    }

    .site-footer .footer-bottom {
        grid-template-columns: 1fr;
        gap: 12px;
        text-align: center;
    }

        .site-footer .footer-bottom .copyright,
        .site-footer .footer-bottom .footer-developer {
            text-align: center;
        }

        .site-footer .footer-bottom .footer-admin-access {
            justify-content: center;
        }
}


/* Comportement sur mobile */

@media (max-width: 991.98px) {
    .nature-navbar .nav-compte-toggle {
        display: flex;
        justify-content: flex-start;
        width: 100%;
    }

    .nature-navbar .nav-compte-menu {
        min-width: 0;
        width: 100%;
        margin-top: 5px;
        box-shadow: none;
        border-radius: 10px;
    }
}

/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .value-card,
    .product-card,
    .admin-dashboard-card,
    .btn-admin-card,
    .footer-developer a {
        transition: none;
    }
}


/* =====================================================
   ALLIANZ NATURE — GALERIE PHOTOS PRODUIT
   ===================================================== */

.product-gallery {
    width: 100%;
}

.product-gallery-main {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: contain;
    border-radius: 16px;
    background: #f8f8f4;
}

.product-gallery-thumbnails {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
}

.product-gallery-thumb {
    width: 90px;
    height: 90px;
    padding: 5px;
    border: 2px solid #e0e6df;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease;
}

    .product-gallery-thumb img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 7px;
    }

    .product-gallery-thumb:hover {
        border-color: #69856a;
    }

    .product-gallery-thumb.active {
        border-color: #284c39;
    }

    .product-gallery-thumb:focus-visible {
        outline: 3px solid #284c39;
        outline-offset: 3px;
    }

@media (max-width: 767px) {
    .product-gallery-main {
        height: 300px;
    }

    .product-gallery-thumb {
        width: 76px;
        height: 76px;
    }
}


/* =====================================================
   ALLIANZNATURE — CARTES TYPES DE SOIN
   ===================================================== */

.types-soin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 36px;
}

.type-soin-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e8ece7;
    box-shadow: 0 8px 24px rgba(40, 76, 57, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .type-soin-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(40, 76, 57, 0.12);
    }

.type-soin-image-link {
    display: block;
    overflow: hidden;
    background: #f5f7f1;
}

    .type-soin-image-link img {
        display: block;
        width: 100%;
        height: 250px;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

.type-soin-card:hover .type-soin-image-link img {
    transform: scale(1.04);
}

.type-soin-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px;
    background: #eaf0e6;
    color: #284c39;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    font-weight: 600;
}

.type-soin-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 26px;
}

    .type-soin-content h3 {
        margin: 8px 0 12px;
        font-size: 1.35rem;
        color: #284c39;
    }

.type-soin-description {
    color: #69746b;
    line-height: 1.7;
    margin-bottom: 22px;
}

.type-soin-link {
    margin-top: auto;
    color: #284c39;
    font-weight: 600;
    text-decoration: none;
}

    .type-soin-link:hover {
        color: #6c8a65;
        text-decoration: underline;
    }

    .type-soin-link:focus-visible,
    .type-soin-image-link:focus-visible {
        outline: 3px solid #284c39;
        outline-offset: 3px;
    }

/* TABLETTE */

@media (max-width: 991px) {
    .types-soin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

/* MOBILE */

@media (max-width: 575px) {
    .types-soin-grid {
        grid-template-columns: 1fr;
    }

    .type-soin-image-link img,
    .type-soin-placeholder {
        height: 240px;
    }

    .type-soin-content {
        padding: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .type-soin-card,
    .type-soin-image-link img {
        transition: none;
    }
}


/* ================================================
   ALLIANZNATURE - FAVORIS FICHE PRODUIT
   ================================================ */

.product-favorite-area {
    margin: 5px 0 28px;
}

.product-favorite-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 18px;
    background: #fff;
    color: #284c39;
    border: 1px solid #cbdccc;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

    .product-favorite-button:hover {
        background: #f1f5ee;
        border-color: #527e61;
    }

.product-favorite-heart {
    font-size: 1.5rem;
    line-height: 1;
    color: #a65262;
}

.product-favorite-button:focus-visible {
    outline: 2px solid #284c39;
    outline-offset: 3px;
}


/* ================================================
   ALLIANZNATURE - FAVORIS DANS LE CATALOGUE
   ================================================ */

.product-image-favorite-container {
    position: relative;
}

    .product-image-favorite-container .product-image-link {
        display: block;
    }

.product-card-favorite-form {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    margin: 0;
}

.product-card-favorite-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    padding: 0;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #e3e8e2;
    border-radius: 50%;
    color: #a65262;
    font-size: 27px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

    .product-card-favorite-button:hover {
        transform: scale(1.08);
        background: #fff;
        color: #a65262;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
    }

    .product-card-favorite-button.is-favorite {
        color: #b34c60;
        background: #fff4f5;
        border-color: #efd9de;
    }

.product-card-favorite-guest {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
}

.product-card-favorite-button:focus-visible {
    outline: 2px solid #284c39;
    outline-offset: 3px;
}


/* ============================================
   ALLIANZNATURE - RECHERCHE SUR L'ACCUEIL
   ============================================ */

.home-global-search {
    margin-top: 28px;
    max-width: 560px;
}

.home-global-search-label {
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: 11px;
    color: #284c39;
}

.home-global-search-form {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #dbe5db;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(40, 76, 57, .08);
}

    .home-global-search-form:focus-within {
        border-color: #527961;
        box-shadow: 0 0 0 3px rgba(40, 76, 57, .10);
    }

.home-global-search-input {
    flex: 1;
    min-width: 0;
    padding: 11px 13px;
    border: none;
    outline: none;
    background: transparent;
    color: #284c39;
    font-size: .95rem;
}

    .home-global-search-input::placeholder {
        color: #819087;
    }

.home-global-search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 18px;
    border: none;
    border-radius: 10px;
    background: #284c39;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
}

    .home-global-search-button:hover {
        background: #3b6d50;
    }

    .home-global-search-button span:first-child {
        font-size: 1.45rem;
        line-height: 1;
    }

.home-global-search-hint {
    font-size: .8rem;
    color: #68756c;
    margin: 10px 0 0;
}

@media (max-width: 575.98px) {
    .home-global-search {
        max-width: 100%;
    }

    .home-global-search-form {
        gap: 4px;
    }

    .home-global-search-input {
        padding: 10px;
        font-size: .88rem;
    }

    .home-global-search-button {
        padding: 10px 12px;
    }

        .home-global-search-button span:last-child {
            display: none;
        }
}




/* =========================================================
   ALLIANZNATURE — MOTIFS ARTISTIQUES EN FILIGRANE (ACCUEIL)
   Afrique chic minimaliste + artisanal naturel premium
   Les classes an-motif-section sont propres à Home/Index.
   ========================================================= */

.an-motif-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.an-motif-section::before,
.an-motif-section::after {
    content: "";
    position: absolute;
    display: block;
    z-index: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    user-select: none;
}

.an-motif-section > .container {
    position: relative;
    z-index: 1;
}

/* Hero : ornement très aérien dans le coin opposé au texte. */
.home-hero.an-motif-section::before {
    width: min(44vw, 590px);
    height: 570px;
    top: -135px;
    right: -125px;
    opacity: .11;
    background-image: url('../images/motifs/motif-angle.webp');
}

/* Approche : petit accent végétal discret à gauche. */
.skin-section.an-motif-section::before {
    width: 270px;
    height: 420px;
    left: -150px;
    top: 15px;
    opacity: .085;
    background-image: url('../images/motifs/motif-vertical.webp');
}

/* Vision : rosace légère, éloignée des cartes et de leur contenu. */
.vision-section.an-motif-section::before {
    width: 430px;
    height: 430px;
    top: -215px;
    left: -155px;
    opacity: .075;
    background-image: url('../images/motifs/motif-circulaire.webp');
}
.vision-section.an-motif-section::after {
    width: 310px;
    height: 310px;
    right: -160px;
    bottom: -155px;
    opacity: .065;
    background-image: url('../images/motifs/motif-circulaire.webp');
}

/* Ressources : branche verticale sur le bord droit. */
.resources-preview-section.an-motif-section::before {
    width: 245px;
    height: 610px;
    right: -105px;
    top: 35px;
    opacity: .105;
    background-image: url('../images/motifs/motif-vertical.webp');
}

/* Expertise : filigrane botanique sur la marge gauche. */
.formulation-section.an-motif-section::before {
    width: 360px;
    height: 360px;
    left: -220px;
    bottom: -135px;
    opacity: .085;
    transform: rotate(-20deg);
    background-image: url('../images/motifs/motif-angle.webp');
}

/* Diagnostic : l'image reste derrière le bloc, sans recouvrir les boutons. */
.diagnostic-section.an-motif-section::before {
    width: 260px;
    height: 260px;
    right: -125px;
    top: -90px;
    opacity: .11;
    background-image: url('../images/motifs/motif-circulaire.webp');
}

/* Types de soin : un accent sur l'extérieur de la grille. */
.catalogue-section.an-motif-section::before {
    width: 305px;
    height: 305px;
    top: -125px;
    right: -185px;
    opacity: .075;
    background-image: url('../images/motifs/motif-angle.webp');
}

/* Sélection de produits : motif retiré du centre pour protéger les photos. */
.products-section.an-motif-section::before {
    width: 270px;
    height: 470px;
    top: 30px;
    left: -190px;
    opacity: .08;
    background-image: url('../images/motifs/motif-vertical.webp');
}

/* Carnet : ornement latéral et frise courte en bas. */
.carnet-preview-section.an-motif-section::before {
    width: 350px;
    height: 350px;
    left: -205px;
    top: -100px;
    opacity: .095;
    background-image: url('../images/motifs/motif-circulaire.webp');
}
.carnet-preview-section.an-motif-section::after {
    width: min(43vw, 500px);
    height: 145px;
    right: -70px;
    bottom: -65px;
    opacity: .085;
    background-image: url('../images/motifs/motif-frise.webp');
}

/* Contact : signature discrète dans le bas de page. */
.contact-section.an-motif-section::after {
    width: min(56vw, 550px);
    height: 165px;
    right: -120px;
    bottom: -110px;
    opacity: .065;
    background-image: url('../images/motifs/motif-frise.webp');
}

@media (max-width: 991.98px) {
    .home-hero.an-motif-section::before { width: 390px; height: 390px; right: -185px; top: -115px; opacity: .085; }
    .skin-section.an-motif-section::before,
    .resources-preview-section.an-motif-section::before,
    .products-section.an-motif-section::before { opacity: .06; }
}

@media (max-width: 575.98px) {
    .home-hero.an-motif-section::before { width: 265px; height: 265px; top: -100px; right: -130px; opacity: .075; }
    .vision-section.an-motif-section::before,
    .carnet-preview-section.an-motif-section::before { width: 225px; height: 225px; opacity: .055; }
    .catalogue-section.an-motif-section::before,
    .products-section.an-motif-section::before,
    .diagnostic-section.an-motif-section::before,
    .carnet-preview-section.an-motif-section::after { display: none; }
    .resources-preview-section.an-motif-section::before { right: -175px; opacity: .055; }
    .contact-section.an-motif-section::after { width: 260px; opacity: .05; }
}

/* ==========================================
   DESCRIPTION PRODUIT - CATALOGUE DETAILS
   ========================================== */

.product-description {
    margin-top: 28px;
    margin-bottom: 28px;
    padding: 22px 24px;
    background: #f8f7f1;
    border-left: 3px solid #b78a50;
    border-radius: 0 12px 12px 0;
}

.product-description-title {
    margin: 0 0 12px;
    color: #214b35;
    font-family: Georgia, serif;
    font-size: 1.35rem;
    font-weight: 600;
}

.product-description-text {
    margin: 0;
    color: #49534b;
    font-size: 1rem;
    line-height: 1.85;
    white-space: pre-line;
}

@media (max-width: 576px) {
    .product-description {
        padding: 18px;
        margin-top: 22px;
        margin-bottom: 22px;
    }

    .product-description-title {
        font-size: 1.2rem;
    }
}

/* ALLIANZNATURE - HERO VELOURS sans feuilles - VERSION DE REMPLACEMENT
   Remplacer uniquement l'ancien bloc HERO VELOURS de fin de site.css.
   Les règles des motifs dans les autres sections restent inchangées. */
.home-hero.an-motif-section {
    overflow: hidden;
    background: radial-gradient(ellipse at 82% 48%, rgba(196,163,107,.17), transparent 42%), linear-gradient(120deg,#f8f5ed 0%,#eef2e9 100%);
}

.home-hero .home-hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(30px,4vw,70px);
    align-items: end;
    min-height: 560px;
    padding-top: 40px;
    padding-bottom: 0;
}

.home-hero .home-hero-copy {
    position: relative;
    z-index: 3;
    min-width: 0;
    align-self: center;
    padding-bottom: 35px;
}

.home-hero .an-velours-visual {
    position: relative;
    z-index: 2;
    align-self: end;
    display: block;
    width: 100%;
    height: 510px;
    min-height: 0;
    min-width: 0;
    overflow: visible;
    filter: none;
}

.home-hero .an-velours-portrait {
    position: absolute;
    display: block;
    width: 125%;
    max-width: none;
    height: auto;
    right: -12%;
    bottom: 0;
    object-fit: contain;
    filter: drop-shadow(0 16px 15px rgba(25,61,45,.10));
    pointer-events: none;
    user-select: none;
}

.home-hero.an-motif-section > .container {
    position: relative;
    z-index: 2;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .home-hero .home-hero-grid {
        gap: 28px;
    }

    .home-hero .an-velours-visual {
        height: 440px;
    }

    .home-hero .an-velours-portrait {
        width: 115%;
        right: -7%;
    }
}

@media (max-width: 991.98px) {
    .home-hero .home-hero-grid {
        grid-template-columns: minmax(0,1fr);
        gap: 10px;
        padding-top: 48px;
        padding-bottom: 0;
    }

    .home-hero .home-hero-copy {
        max-width: 720px;
        padding-bottom: 12px;
    }

    .home-hero .an-velours-visual {
        height: clamp(310px,56vw,520px);
        width: 100%;
    }

    .home-hero .an-velours-portrait {
        width: auto;
        height: 100%;
        right: 50%;
        bottom: 0;
        transform: translateX(50%);
    }
}

@media (max-width: 575.98px) {
    .home-hero .an-velours-visual {
        height: clamp(280px,80vw,390px);
    }

    .home-hero .an-velours-portrait {
        height: 100%;
        width: auto;
    }
}





@media (min-width: 992px) and (max-width: 1199.98px) {
    .home-hero .an-velours-visual { min-height: 490px; }
    .home-hero .an-velours-portrait { right:-80px; }
}
@media (max-width: 991.98px) {
    .home-hero .home-hero-grid { grid-template-columns:1fr; gap:0; padding-bottom:10px; }
    .home-hero .home-hero-copy { max-width:720px; }
    .home-hero .an-velours-visual { min-height: min(60vw,520px); }
    .home-hero .an-velours-portrait { right: 50%; transform:translateX(50%); bottom:0; }
}
@media (max-width: 575.98px) {
    .home-hero .an-velours-visual { min-height: min(67vw,360px); }
    .home-hero .an-velours-portrait { right: 43%; transform:translateX(50%); }
}


/* ESSAI 3 — HERO VELOURS / DÉBORDEMENT PREMIUM
   À AJOUTER APRÈS LE DERNIER BLOC HERO VELOURS de site.css.
   Réversible : supprimer ce seul bloc pour revenir à la version précédente.
*/
@media (min-width: 992px) {
    .home-hero.an-motif-section {
        overflow: visible;
        position: relative;
        z-index: 3;
    }

    .home-hero .home-hero-grid {
        padding-bottom: 0;
    }

    .home-hero .an-velours-visual {
        overflow: visible;
        z-index: 3;
    }

    .home-hero .an-velours-portrait {
        /* Décalage de 55 px sous la ligne inférieure du Hero. */
        bottom: -55px;
        /* Léger adoucissement du haut de l'image. */
        -webkit-mask-image: linear-gradient( to bottom, transparent 0%, #000 4%, #000 100% );
        mask-image: linear-gradient( to bottom, transparent 0%, #000 4%, #000 100% );
        filter: drop-shadow( 0 20px 17px rgba(25,61,45,.12) );
    }

    .home-hero + .skin-section {
        position: relative;
        z-index: 1;
    }
}

@media (max-width: 991.98px) {
    .home-hero.an-motif-section {
        overflow: hidden;
    }

    .home-hero .an-velours-portrait {
        bottom: 0;
    }
}

/* HERO VELOURS — Suppression du fondu du foulard */

.home-hero .an-velours-portrait {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}


/* ================================================
   ALLIANZNATURE - MOTIF CIRCULAIRE DERRIÈRE VELOURS
   ================================================ */

.home-hero .an-velours-visual {
    position: relative;
    isolation: isolate;
}

/* Motif en arrière-plan */
.home-hero .an-velours-motif {
    position: absolute;
    z-index: 1;
    width: 115%;
    max-width: none;
    height: auto;
    top: 42%;
    left: 54%;
    transform: translate(-50%, -50%);
    opacity: 0.85;
    pointer-events: none;
}

/* Femme et produit au premier plan */
.home-hero .an-velours-portrait {
    position: absolute;
    z-index: 2;
}

/* Responsive */
@media (max-width: 991.98px) {
    .home-hero .an-velours-motif {
        width: 92%;
        top: 46%;
        left: 50%;
        opacity: 0.70;
    }
}


/* =====================================================
   ALLIANZNATURE — HERO VELOURS
   EFFET PREMIUM SUR TABLETTE ET MOBILE
   ===================================================== */

@media (max-width: 991.98px) {

    /* Autoriser le portrait à dépasser du Hero */
    .home-hero.an-motif-section {
        overflow: visible;
        position: relative;
        z-index: 2;
    }

    /* Garder le contenu du Hero au-dessus du fond */
    .home-hero .home-hero-grid {
        position: relative;
        padding-bottom: 0;
    }

    /* Conteneur de la dame */
    .home-hero .an-velours-visual {
        position: relative;
        overflow: visible;
        z-index: 2;
    }

    /* Portrait : débordement de 35 px */
    .home-hero .an-velours-portrait {
        bottom: -35px;
        z-index: 2;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    /* Motif derrière la dame */
    .home-hero .an-velours-motif {
        z-index: 1;
        opacity: 0.70;
    }

    /* Section suivante sous le débordement */
    .home-hero + .skin-section {
        position: relative;
        z-index: 1;
    }
}

/* Réglage spécifique aux téléphones */
@media (max-width: 575.98px) {

    .home-hero .an-velours-portrait {
        bottom: -25px;
    }

    .home-hero .an-velours-motif {
        width: 95%;
        opacity: 0.70;
    }
}

/* =====================================================
   ALLIANZNATURE — CORRECTION MARGE DROITE MOBILE
   Conserver l'effet premium du Hero
   ===================================================== */

@media (max-width: 991.98px) {

    /* Bloquer uniquement les débordements horizontaux */
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    /* Le portrait conserve son débordement vertical */
    .home-hero.an-motif-section {
        overflow: visible;
    }

    /* Éviter que la grille élargisse la page */
    .home-hero .home-hero-grid {
        width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    /* Encadrer la zone visuelle */
    .home-hero .an-velours-visual {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    /* Empêcher le motif d'élargir la page */
    .home-hero .an-velours-motif {
        max-width: none;
        pointer-events: none;
    }

    /* Garder le débordement premium */
    .home-hero .an-velours-portrait {
        bottom: -35px;
    }
}

@media (max-width: 575.98px) {
    .home-hero .an-velours-portrait {
        bottom: -25px;
    }
}

/* AllianzNature : deux papillons au crayon, animation localisée au Hero.
   À charger après site.css, sans changer le portrait ni les motifs. */
.home-hero .an-velours-visual {
    position: relative;
}

.home-hero .an-butterflies {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    overflow: visible;
}

.home-hero .an-butterfly {
    position: absolute;
    width: clamp(35px, 5vw, 67px);
    height: auto;
    display: block;
    transform-origin: 50% 55%;
    filter: drop-shadow(0 5px 3px rgba(34,38,31,.12));
    will-change: transform;
}
/* Petits circuits à proximité du couvercle et du pot. */
.home-hero .an-butterfly--one {
    left: 20%;
    top: 33%;
    animation: an-fly-one 7s ease-in-out infinite alternate;
}

.home-hero .an-butterfly--two {
    left: 43%;
    top: 57%;
    width: clamp(28px, 3.7vw, 51px);
    animation: an-fly-two 8.5s ease-in-out infinite alternate;
}

@keyframes an-fly-one {
    0% {
        transform: translate3d(0,0,0) rotate(-13deg) scaleX(1)
    }

    25% {
        transform: translate3d(10px,-12px,0) rotate(2deg) scaleX(.80)
    }

    52% {
        transform: translate3d(20px,-22px,0) rotate(14deg) scaleX(1)
    }

    76% {
        transform: translate3d(6px,-11px,0) rotate(-3deg) scaleX(.77)
    }

    100% {
        transform: translate3d(17px,-7px,0) rotate(5deg) scaleX(1)
    }
}

@keyframes an-fly-two {
    0% {
        transform: translate3d(0,0,0) rotate(12deg) scaleX(.85)
    }

    25% {
        transform: translate3d(-10px,8px,0) rotate(-3deg) scaleX(1)
    }

    55% {
        transform: translate3d(-17px,-9px,0) rotate(-13deg) scaleX(.70)
    }

    78% {
        transform: translate3d(4px,-15px,0) rotate(7deg) scaleX(1)
    }

    100% {
        transform: translate3d(-9px,-3px,0) rotate(-2deg) scaleX(.85)
    }
}

@media(max-width:991.98px) {
    .home-hero .an-butterfly--one {
        left: 21%;
        top: 35%;
    }

    .home-hero .an-butterfly--two {
        left: 45%;
        top: 56%;
    }

    .home-hero .an-butterfly {
        width: 43px;
    }

    .home-hero .an-butterfly--two {
        width: 34px;
    }
}

@media(max-width:575.98px) {
    .home-hero .an-butterfly {
        width: 31px;
    }

    .home-hero .an-butterfly--two {
        width: 25px;
    }

    .home-hero .an-butterfly--one {
        left: 19%;
        top: 31%;
    }

    .home-hero .an-butterfly--two {
        left: 44%;
        top: 56%;
    }
}

@media(prefers-reduced-motion:reduce) {
    .home-hero .an-butterfly {
        animation: none !important;
        will-change: auto;
    }
}


/* =====================================================
   ALLIANZNATURE — PAGE AMBASSADRICES
   ===================================================== */

.an-amb-page {
    padding: 85px 0 55px;
    background: radial-gradient(circle at 85% 18%, rgba(196, 163, 107, .12), transparent 32%), linear-gradient(145deg, #F8F5ED, #EFF2E9);
    overflow: clip;
}

.an-amb-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 58px;
}

.an-amb-eyebrow {
    color: #96794B;
    font-size: .75rem;
    letter-spacing: .22em;
    font-weight: 700;
    margin-bottom: 17px;
}

.an-amb-heading h1 {
    font-family: Georgia, serif;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.12;
    color: #233F32;
    font-weight: 400;
    margin-bottom: 22px;
}

    .an-amb-heading h1 span {
        display: block;
        color: #B39460;
        font-style: italic;
    }

.an-amb-heading > p:last-child {
    color: #667469;
    font-size: 1.05rem;
    line-height: 1.85;
}

/* Carrousel */

.an-amb-carousel {
    max-width: 1120px;
    margin: 0 auto;
}

.an-amb-viewport {
    overflow: hidden;
    border-radius: 24px;
    background: #FFFDF8;
    box-shadow: 0 22px 60px rgba(35, 63, 50, .09);
}

.an-amb-track {
    display: flex;
    align-items: stretch;
    transition: transform 850ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

.an-amb-slide {
    flex: 0 0 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 48%) minmax(0, 52%);
    align-items: stretch;
}

.an-amb-photo-wrap {
    position: relative;
    min-height: 545px;
    overflow: hidden;
    background: #E9E7DB;
}

.an-amb-photo {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
    object-position: center;
}

.an-amb-photo-mark {
    position: absolute;
    left: 26px;
    bottom: 25px;
    padding: 9px 14px;
    color: #FFFDF8;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    background: rgba(35, 63, 50, .65);
    backdrop-filter: blur(6px);
}

.an-amb-content {
    padding: clamp(32px, 5vw, 75px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.an-amb-index {
    display: flex;
    align-items: center;
    gap: 17px;
    color: #A88751;
    letter-spacing: .19em;
    font-size: .72rem;
    font-weight: 700;
    margin-bottom: 26px;
}

    .an-amb-index span {
        color: #96A197;
        letter-spacing: .08em;
    }

.an-amb-content h2 {
    font-family: Georgia, serif;
    font-size: clamp(2rem, 3.5vw, 3.4rem);
    font-weight: 400;
    color: #284737;
    line-height: 1.15;
    overflow-wrap: anywhere;
    margin-bottom: 25px;
}

.an-amb-presentation {
    color: #68756A;
    font-size: 1rem;
    line-height: 1.85;
    white-space: pre-line;
}

.an-amb-quote {
    color: #8E754E;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 1.22rem;
    line-height: 1.55;
    border-left: 2px solid #C4A36B;
    padding-left: 21px;
    margin: 25px 0;
}

.an-amb-signature {
    font-family: Georgia, serif;
    color: #9EAD9F;
    font-style: italic;
    font-size: .98rem;
    margin-top: 26px;
}

/* Flèches et indicateurs */

.an-amb-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 26px;
    margin-top: 30px;
}

.an-amb-arrow {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #D6DCCC;
    color: #284737;
    font-size: 1.45rem;
    cursor: pointer;
    transition: background .2s, color .2s, transform .2s;
}

    .an-amb-arrow:hover {
        background: #284737;
        color: #FFFFFF;
        transform: translateY(-2px);
    }

.an-amb-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
}

.an-amb-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #C9CDBF;
    cursor: pointer;
    transition: width .3s, border-radius .3s, background .3s;
}

    .an-amb-dot.is-active {
        width: 28px;
        border-radius: 12px;
        background: #B3935D;
    }

    .an-amb-arrow:focus-visible,
    .an-amb-dot:focus-visible {
        outline: 3px solid #B3935D;
        outline-offset: 4px;
    }

/* Bas de page */

.an-amb-footer {
    margin-top: 85px;
    text-align: center;
}

    .an-amb-footer span {
        color: #A78855;
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .23em;
    }

    .an-amb-footer p {
        color: #284737;
        font-family: Georgia, serif;
        font-size: 1.6rem;
        font-style: italic;
        margin-top: 12px;
    }

.an-amb-empty {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
    padding: 65px 25px;
    background: #FFFDF8;
    border-radius: 20px;
}

    .an-amb-empty h2 {
        color: #284737;
        font-family: Georgia, serif;
        margin-bottom: 18px;
    }

    .an-amb-empty p {
        color: #68756A;
        line-height: 1.8;
        margin-bottom: 25px;
    }

/* Affichage mobile */

@media (max-width: 767.98px) {

    .an-amb-page {
        padding: 55px 0 40px;
    }

    .an-amb-heading {
        margin-bottom: 35px;
    }

    .an-amb-slide {
        grid-template-columns: minmax(0, 1fr);
    }

    .an-amb-photo-wrap {
        min-height: 0;
        height: auto;
        aspect-ratio: 4 / 5;
    }

    .an-amb-content {
        padding: 32px 25px 40px;
    }

    .an-amb-index {
        margin-bottom: 16px;
    }

    .an-amb-content h2 {
        margin-bottom: 18px;
    }

    .an-amb-controls {
        gap: 16px;
        margin-top: 22px;
    }

    .an-amb-footer {
        margin-top: 55px;
    }

        .an-amb-footer p {
            font-size: 1.3rem;
        }
}

@media (prefers-reduced-motion: reduce) {
    .an-amb-track,
    .an-amb-arrow,
    .an-amb-dot {
        transition: none !important;
        animation: none !important;
    }
}


/* =========================================================
   ALLIANZNATURE — NOS PARTENAIRES
   ========================================================= */

.an-partners-page {
    min-height: 70vh;
    padding: 85px 0 60px;
    background: radial-gradient( circle at 85% 10%, rgba(196, 163, 107, .12), transparent 34% ), linear-gradient( 145deg, #F8F5ED 0%, #F0F3EB 100% );
}

/* EN-TÊTE */

.an-partners-header {
    max-width: 780px;
    margin: 0 auto 65px;
    text-align: center;
}

.an-partners-eyebrow {
    color: #A08353;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .22em;
    margin-bottom: 18px;
}

.an-partners-header h1 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: clamp(2.6rem, 5vw, 4.6rem);
    line-height: 1.14;
    color: #284737;
    margin-bottom: 24px;
}

    .an-partners-header h1 span {
        color: #B39460;
        font-style: italic;
    }

.an-partners-decoration {
    width: 75px;
    height: 2px;
    background: #C4A36B;
    margin: 0 auto 27px;
}

.an-partners-intro {
    color: #68756A;
    font-size: 1.04rem;
    line-height: 1.9;
    white-space: pre-line;
}

/* GRILLE */

.an-partners-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* CARTE */

.an-partner-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: #FFFDF9;
    border: 1px solid rgba(40, 71, 55, .09);
    border-radius: 16px;
    box-shadow: 0 9px 30px rgba(40, 71, 55, .035);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

    .an-partner-card:hover {
        transform: translateY(-5px);
        border-color: rgba(179, 148, 96, .35);
        box-shadow: 0 18px 42px rgba(40, 71, 55, .09);
    }

/* ZONE LOGO */

.an-partner-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 185px;
    padding: 30px;
    background: #FFFFFF;
    border-bottom: 1px solid #F0F0E9;
    text-decoration: none;
}

.an-partner-logo {
    display: block;
    max-width: 100%;
    max-height: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .35s ease;
}

.an-partner-card:hover .an-partner-logo {
    transform: scale(1.045);
}

a.an-partner-logo-link:focus-visible,
.an-partner-website:focus-visible {
    outline: 3px solid #B39460;
    outline-offset: -3px;
}

/* INFORMATIONS */

.an-partner-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 23px 22px 27px;
    text-align: center;
}

    .an-partner-info h2 {
        color: #284737;
        font-size: 1.08rem;
        font-weight: 650;
        line-height: 1.4;
        overflow-wrap: anywhere;
        margin: 0 0 12px;
    }

.an-partner-description {
    color: #778177;
    font-size: .88rem;
    line-height: 1.7;
    white-space: pre-line;
    margin-bottom: 20px;
}

.an-partner-website {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-top: auto;
    color: #A08353;
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
}

    .an-partner-website:hover {
        color: #284737;
        text-decoration: underline;
    }

/* ÉTAT VIDE */

.an-partners-empty {
    max-width: 700px;
    margin: 0 auto;
    padding: 70px 30px;
    text-align: center;
    background: #FFFDF9;
    border-radius: 20px;
}

    .an-partners-empty h2 {
        font-family: Georgia, serif;
        color: #284737;
        margin-bottom: 18px;
    }

    .an-partners-empty p {
        color: #68756A;
        line-height: 1.8;
        margin-bottom: 25px;
    }

/* SIGNATURE */

.an-partners-signature {
    margin-top: 90px;
    text-align: center;
}

    .an-partners-signature span {
        color: #A08353;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .22em;
    }

    .an-partners-signature p {
        color: #284737;
        font-family: Georgia, serif;
        font-style: italic;
        font-size: 1.5rem;
        margin-top: 14px;
    }

/* TABLETTE */

@media (max-width: 991.98px) {

    .an-partners-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

/* MOBILE */

@media (max-width: 575.98px) {

    .an-partners-page {
        padding: 55px 0 40px;
    }

    .an-partners-header {
        margin-bottom: 40px;
    }

        .an-partners-header h1 {
            font-size: 2.55rem;
        }

    .an-partners-intro {
        font-size: .96rem;
        line-height: 1.8;
    }

    .an-partners-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        max-width: 400px;
    }

    .an-partner-logo-link {
        height: 165px;
        padding: 25px;
    }

    .an-partner-logo {
        max-height: 105px;
    }

    .an-partner-info {
        padding: 20px;
    }

    .an-partners-signature {
        margin-top: 55px;
    }

        .an-partners-signature p {
            font-size: 1.3rem;
        }
}

/* ACCESSIBILITÉ */

@media (prefers-reduced-motion: reduce) {

    .an-partner-card,
    .an-partner-logo,
    .an-partner-website {
        transition: none !important;
    }

        .an-partner-card:hover,
        .an-partner-card:hover .an-partner-logo {
            transform: none;
        }
}


/* =====================================================
   RESSOURCES — FRESQUE DE HAUTEUR MAÎTRISÉE
   ===================================================== */

.resources-fresco-banner {
    width: 100%;
    height: 580px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #FBF6E9;
}

.resources-fresco-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Harmonisation sur tablette */
@media (max-width: 991.98px) {
    .resources-fresco-banner {
        height: 440px;
    }
}

/* Harmonisation sur mobile */
@media (max-width: 575.98px) {
    .resources-fresco-banner {
        height: 260px;
    }
}

/* =====================================================
   CARNET — HERO AVEC IMAGE
   ===================================================== */

.carnet-page-hero > .container.carnet-hero-with-image {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 48px;
}

.carnet-page-hero-content {
    min-width: 0;
}

.carnet-page-hero-visual {
    width: 100%;
    min-width: 0;
}

    .carnet-page-hero-visual img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 460px;
        object-fit: contain;
        border-radius: 18px;
    }

@media (max-width: 767.98px) {
    .carnet-page-hero > .container.carnet-hero-with-image {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .carnet-page-hero-visual img {
        max-height: 340px;
    }
}


/* =========================================================
   CARNET — HERO PREMIUM AVEC PHOTOGRAPHIE
   ========================================================= */

/* Supprimer les espacements verticaux supplémentaires
   uniquement lorsque le Hero possède une image */
.carnet-page-hero:has(.carnet-hero-with-image) {
    padding-top: 0;
    padding-bottom: 0;
}

/* Ordinateurs */
@media (min-width: 992px) {

    .carnet-page-hero > .container.carnet-hero-with-image {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        align-items: center;
        column-gap: 42px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .carnet-page-hero-content {
        min-width: 0;
    }

    .carnet-page-hero-visual {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
    }

        .carnet-page-hero-visual img {
            display: block;
            width: auto;
            height: 540px;
            max-width: 100%;
            max-height: none;
            object-fit: contain;
            border-radius: 0;
        }
}

/* Tablettes */
@media (min-width: 768px) and (max-width: 991.98px) {

    .carnet-page-hero > .container.carnet-hero-with-image {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
        align-items: center;
        gap: 28px;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .carnet-page-hero-visual {
        display: flex;
        justify-content: flex-end;
        min-width: 0;
    }

        .carnet-page-hero-visual img {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 440px;
            object-fit: contain;
            border-radius: 0;
        }
}

/* Mobiles */
@media (max-width: 767.98px) {

    .carnet-page-hero > .container.carnet-hero-with-image {
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .carnet-page-hero-visual {
        display: flex;
        justify-content: center;
        min-width: 0;
    }

        .carnet-page-hero-visual img {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 390px;
            object-fit: contain;
            border-radius: 0;
        }
}


/* =========================================================
   DIAGNOSTIC — HERO PREMIUM AVEC PHOTOGRAPHIE
   ========================================================= */

/* Ordinateurs */
@media (min-width: 992px) {

    .diagnostic-page-hero > .container.diagnostic-hero-with-image {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        align-items: center;
        column-gap: 42px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .diagnostic-page-hero:has(.diagnostic-hero-with-image) {
        padding-top: 0;
        padding-bottom: 0;
    }

    .diagnostic-page-hero-content {
        min-width: 0;
    }

    .diagnostic-page-hero-visual {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
    }

        .diagnostic-page-hero-visual img {
            display: block;
            width: auto;
            height: 540px;
            max-width: 100%;
            max-height: none;
            object-fit: contain;
            border-radius: 0;
        }
}

/* Tablettes */
@media (min-width: 768px) and (max-width: 991.98px) {

    .diagnostic-page-hero > .container.diagnostic-hero-with-image {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
        align-items: center;
        gap: 28px;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .diagnostic-page-hero-visual {
        display: flex;
        justify-content: flex-end;
        min-width: 0;
    }

        .diagnostic-page-hero-visual img {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 440px;
            object-fit: contain;
            border-radius: 0;
        }
}

/* Mobiles */
@media (max-width: 767.98px) {

    .diagnostic-page-hero > .container.diagnostic-hero-with-image {
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .diagnostic-page-hero-visual {
        display: flex;
        justify-content: center;
        min-width: 0;
    }

        .diagnostic-page-hero-visual img {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 390px;
            object-fit: contain;
            border-radius: 0;
        }
}


/* =========================================================
   RESSOURCES — HERO PREMIUM AVEC ILLUSTRATION
   ========================================================= */

.resources-page-hero:has(.resources-hero-with-image) {
    padding-top: 0;
    padding-bottom: 0;
}

@media (min-width: 992px) {

    .resources-page-hero > .container.resources-hero-with-image {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        align-items: center;
        column-gap: 42px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .resources-page-hero-content {
        min-width: 0;
    }

    .resources-page-hero-visual {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
    }

        .resources-page-hero-visual img {
            display: block;
            width: auto;
            height: 540px;
            max-width: 100%;
            max-height: none;
            object-fit: contain;
        }
}

@media (min-width: 768px) and (max-width: 991.98px) {

    .resources-page-hero > .container.resources-hero-with-image {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
        align-items: center;
        gap: 28px;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .resources-page-hero-visual {
        display: flex;
        justify-content: flex-end;
        min-width: 0;
    }

        .resources-page-hero-visual img {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 440px;
            object-fit: contain;
        }
}

@media (max-width: 767.98px) {

    .resources-page-hero > .container.resources-hero-with-image {
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .resources-page-hero-visual {
        display: flex;
        justify-content: center;
        min-width: 0;
    }

        .resources-page-hero-visual img {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 390px;
            object-fit: contain;
        }
}

/* =========================================================
   ALLIANZNATURE — RESSOURCES
   COLIBRIS ANIMÉS — VERSION ÉQUILIBRÉE
   ========================================================= */

.resources-page-hero-visual {
    position: relative;
    overflow: visible;
    isolation: isolate;
}

/* Illustration botanique inchangée */
.resources-botanical-image {
    position: relative;
    z-index: 1;
    display: block;
}

/* Calque décoratif */
.resources-birds {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

/* Taille commune des oiseaux */
.resources-bird-image {
    position: absolute;
    display: block;
    width: 85px;
    height: auto;
    max-width: none;
    object-fit: contain;
    transform-origin: center;
    pointer-events: none;
    filter: drop-shadow( 0 3px 3px rgba(25, 61, 45, 0.08) );
    will-change: transform;
}

/* =========================================
   OISEAU 1 — CACAO / PAPAYE
   ========================================= */

.resources-bird-cacao {
    width: 90px;
    top: 10%;
    right: 0%;
    animation: resourcesCacaoFlight 7s ease-in-out infinite alternate;
}

/* =========================================
   OISEAU 2 — HIBISCUS
   ========================================= */

.resources-bird-hibiscus {
    width: 82px;
    top: 65%;
    left: 0%;
    animation: resourcesHibiscusFlight 8.5s ease-in-out infinite alternate;
}

/* =========================================
   VOL DU PREMIER OISEAU
   ========================================= */

@keyframes resourcesCacaoFlight {

    0% {
        transform: translate3d(0, 0, 0) rotate(-7deg);
    }

    30% {
        transform: translate3d(-12px, 8px, 0) rotate(0deg);
    }

    50%, 60% {
        transform: translate3d(-22px, 16px, 0) rotate(7deg);
    }

    80% {
        transform: translate3d(-9px, -5px, 0) rotate(-3deg);
    }

    100% {
        transform: translate3d(5px, -10px, 0) rotate(-7deg);
    }
}

/* =========================================
   VOL DU SECOND OISEAU
   ========================================= */

@keyframes resourcesHibiscusFlight {

    0% {
        transform: translate3d(0, 0, 0) rotate(6deg);
    }

    30% {
        transform: translate3d(12px, -9px, 0) rotate(0deg);
    }

    50%, 60% {
        transform: translate3d(22px, -5px, 0) rotate(-8deg);
    }

    80% {
        transform: translate3d(8px, -13px, 0) rotate(2deg);
    }

    100% {
        transform: translate3d(-5px, 4px, 0) rotate(6deg);
    }
}

/* =========================================
   TABLETTES
   ========================================= */

@media (max-width: 991.98px) {

    .resources-bird-cacao {
        width: 70px;
        top: 9%;
        right: 1%;
    }

    .resources-bird-hibiscus {
        width: 65px;
        top: 64%;
        left: 1%;
    }
}

/* =========================================
   MOBILES
   ========================================= */

@media (max-width: 575.98px) {

    .resources-bird-cacao {
        width: 52px;
        top: 8%;
        right: 0;
    }

    .resources-bird-hibiscus {
        width: 48px;
        top: 68%;
        left: 0;
    }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {

    .resources-bird-image {
        animation: none !important;
        will-change: auto;
    }
}

/* =========================================================
   RESSOURCES — CORRECTION PRIORITAIRE TAILLE COLIBRIS
   ========================================================= */

.resources-page-hero .resources-page-hero-visual {
    position: relative;
}

/* Forcer les dimensions des deux images */
.resources-page-hero .resources-birds img.resources-bird-image {
    position: absolute !important;
    display: block !important;
    width: 85px !important;
    max-width: 85px !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 85px !important;
    object-fit: contain !important;
    pointer-events: none;
}

/* Premier oiseau : en haut à droite */
.resources-page-hero .resources-birds img.resources-bird-cacao {
    width: 90px !important;
    max-width: 90px !important;
    max-height: 90px !important;
    top: 9% !important;
    right: 1% !important;
    left: auto !important;
    bottom: auto !important;
}

/* Deuxième oiseau : près de l'hibiscus */
.resources-page-hero .resources-birds img.resources-bird-hibiscus {
    width: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
    top: 65% !important;
    left: 19% !important;
    right: auto !important;
    bottom: auto !important;
}

@media (max-width: 767.98px) {
    .resources-page-hero .resources-birds img.resources-bird-cacao {
        width: 55px !important;
        max-width: 55px !important;
        max-height: 55px !important;
    }

    .resources-page-hero .resources-birds img.resources-bird-hibiscus {
        width: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
    }
}

/* =====================================================
   RESSOURCES — ORIENTATION DES COLIBRIS
   ===================================================== */

/* Retourner horizontalement les oiseaux */
.resources-page-hero .resources-bird-cacao,
.resources-page-hero .resources-bird-hibiscus {
    scale: -1 1;
}

/* =====================================================
   CATALOGUE — APPEL À L'ACTION RESSOURCES
   ===================================================== */

.catalogue-resources-cta {
    padding: 90px 20px;
    background: linear-gradient( 135deg, #F8F9E5 0%, #F1F4E8 100% );
    text-align: center;
}

.catalogue-resources-content {
    max-width: 780px;
    margin: 0 auto;
}

    .catalogue-resources-content .eyebrow {
        margin-bottom: 20px;
    }

    .catalogue-resources-content h2 {
        font-family: Georgia, serif;
        font-size: clamp(32px, 4vw, 50px);
        line-height: 1.17;
        font-weight: 400;
        color: #193D2D;
        margin-bottom: 24px;
    }

        .catalogue-resources-content h2 span {
            display: block;
            font-style: italic;
            color: #456B4E;
        }

    .catalogue-resources-content > p:not(.eyebrow) {
        max-width: 630px;
        margin: 0 auto 32px;
        line-height: 1.8;
        color: #65746B;
    }

    .catalogue-resources-content .btn-nature {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

@media (max-width: 767.98px) {
    .catalogue-resources-cta {
        padding: 60px 18px;
    }
}

/* RESSOURCES — OPACITÉ DES COLIBRIS */

.resources-page-hero .resources-birds img.resources-bird-image {
    opacity: 0.45 !important;
}


/* =============================================
   RESSOURCES — COLIBRIS DESSINÉS ET ANIMÉS
   ============================================= */

.resources-page-hero .resources-birds {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

/* Le conteneur conserve le déplacement de vol */
.resources-page-hero .resources-bird-flight {
    position: absolute;
    display: block;
    width: 90px;
    height: 90px;
    pointer-events: none;
    transform-origin: center;
}

    /* Deux images parfaitement superposées */
    .resources-page-hero .resources-bird-flight .resources-bird-frame {
        position: absolute !important;
        inset: 0;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain;
    }

/* Battement des ailes */
.resources-page-hero .bird-frame-high {
    animation: colibriWingsHigh 0.18s steps(1, end) infinite;
}

.resources-page-hero .bird-frame-low {
    animation: colibriWingsLow 0.18s steps(1, end) infinite;
}

@keyframes colibriWingsHigh {
    0%, 49% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0;
    }
}

@keyframes colibriWingsLow {
    0%, 49% {
        opacity: 0;
    }

    50%, 100% {
        opacity: 1;
    }
}

/* Emplacements et trajectoires */


/* Colibri du haut : regarde vers la gauche */
.resources-page-hero .resources-bird-flight.resources-bird-cacao {
    top: 9%;
    right: 1%;
    left: auto;
    width: 90px;
    height: 90px;
    scale: 1 1;
    animation: resourcesCacaoFlight 7s ease-in-out infinite alternate;
}

/* Colibri du bas : regarde vers la droite */
.resources-page-hero .resources-bird-flight.resources-bird-hibiscus {
    top: 65%;
    left: 19%;
    right: auto;
    width: 82px;
    height: 82px;
    scale: 1 1;
    animation: resourcesHibiscusFlight 8.5s ease-in-out infinite alternate;
}


@media (max-width: 767.98px) {
    .resources-page-hero .resources-bird-flight.resources-bird-cacao {
        width: 55px;
        height: 55px;
    }

    .resources-page-hero .resources-bird-flight.resources-bird-hibiscus {
        width: 50px;
        height: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .resources-page-hero .resources-bird-flight,
    .resources-page-hero .resources-bird-frame {
        animation: none !important;
    }

    .resources-page-hero .bird-frame-low {
        opacity: 0;
    }
}


/* =====================================================
   DIAGNOSTIC — HERO PHOTO IMMERSIVE
   ===================================================== */

@media (min-width: 992px) {

    /* Supprimer les espaces verticaux autour de la photo */
    .diagnostic-page-hero:has(.diagnostic-hero-with-image) {
        padding: 0;
        overflow: hidden;
    }

    /* Étendre le Hero sur toute la largeur de l'écran */
    .diagnostic-page-hero .diagnostic-hero-with-image {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        gap: 0;
        width: 100%;
        max-width: none;
        min-height: 560px;
        padding-left: max(30px, calc((100vw - 1320px) / 2));
        padding-right: 0;
        margin: 0;
    }

    /* Conserver les textes à gauche */
    .diagnostic-page-hero .diagnostic-page-hero-content {
        align-self: center;
        padding: 65px 55px 65px 0;
        max-width: 720px;
    }

    /* Zone image sur toute la hauteur */
    .diagnostic-page-hero .diagnostic-page-hero-visual {
        position: relative;
        align-self: stretch;
        width: 100%;
        height: auto;
        min-height: 560px;
        max-height: none;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

        /* Image couvrant toute la zone droite */
        .diagnostic-page-hero .diagnostic-page-hero-visual img {
            position: absolute;
            inset: 0;
            display: block;
            width: 100% !important;
            height: 100% !important;
            min-height: 100%;
            max-height: none !important;
            object-fit: cover;
            object-position: center center;
            border-radius: 0;
        }
}
/* ACCUEIL — REMONTER LA MENTION ALLIANZNATURE */
.home-hero .eyebrow {
    position: relative;
    top: -45px;
}

/* =========================================================
   ALLIANZNATURE — HERO VELOURS
   CORRECTION AFFICHAGE TELEPHONE
   ========================================================= */

@media (max-width: 767.98px) {

    /* Structure du Hero : image puis textes */
    .home-hero .home-hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        min-height: 0;
        padding-top: 20px;
        padding-bottom: 40px;
        align-items: stretch;
    }

    /* Réserver une vraie hauteur pour la femme */
    .home-hero .an-velours-visual {
        position: relative;
        width: 100%;
        height: clamp(415px, 118vw, 520px);
        min-height: 0;
        margin: 0;
        overflow: visible;
    }

        /* Mention ALLIANZNATURE en haut */
        .home-hero .an-velours-visual > .eyebrow {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 6;
            margin: 0;
        }

    /* Femme : légèrement plus basse,
       sans déborder sur le texte */
    .home-hero .an-velours-portrait {
        position: absolute;
        height: calc(100% - 38px);
        width: auto;
        max-width: none;
        bottom: 0;
        right: 50%;
        transform: translateX(50%);
    }

    /* Motif en arrière-plan */
    .home-hero .an-velours-motif {
        width: 95%;
        top: 48%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* Titre et textes toujours sous la femme */
    .home-hero .home-hero-copy {
        position: relative;
        z-index: 3;
        max-width: 100%;
        padding-top: 25px;
        padding-bottom: 0;
    }
}

/* =====================================================
   ACCUEIL — MESSAGE PROMOTIONNEL CHANTILLY VELOURS
   ===================================================== */

.home-hero .an-velours-visual .an-velours-promo {
    position: absolute;
    z-index: 8;
    left: 0;
    bottom: 10%;
    width: min(315px, 75%);
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 17px 19px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 8px;
    background: rgba(20, 45, 34, 0.20);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
    transition: background .25s ease, transform .25s ease;
}

.home-hero .an-velours-promo:hover {
    background: rgba(20, 45, 34, 0.35);
    transform: translateY(-3px);
    color: #fff;
}

.home-hero .an-velours-promo-eyebrow {
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
}

.home-hero .an-velours-promo-title {
    color: #fff;
    font-family: Georgia, serif;
    font-size: 17px;
    line-height: 1.25;
}

.home-hero .an-velours-promo-offer {
    color: #fff;
    font-size: 12px;
    line-height: 1.6;
}

.home-hero .an-velours-promo-or {
    display: block;
    margin: 3px 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.home-hero .an-velours-promo-link {
    margin-top: 5px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.home-hero .an-velours-promo:focus-visible {
    outline: 3px solid var(--nature-gold);
    outline-offset: 3px;
}

/* Adaptation téléphone */
@media (max-width: 767.98px) {

    .home-hero .an-velours-visual .an-velours-promo {
        left: 0;
        bottom: 8px;
        width: min(260px, 66%);
        padding: 12px 13px;
        gap: 6px;
    }

    .home-hero .an-velours-promo-eyebrow {
        font-size: 8px;
        letter-spacing: .7px;
    }

    .home-hero .an-velours-promo-title {
        font-size: 14px;
    }

    .home-hero .an-velours-promo-offer,
    .home-hero .an-velours-promo-link {
        font-size: 10px;
    }
}
.home-hero .an-velours-promo-texture {
    color: #FFFFFF;
    font-family: Georgia, serif;
    font-size: 13px;
    font-style: italic;
    line-height: 1.5;
}
.home-hero .an-velours-promo {
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.65);
}


/* =====================================================
   ACCUEIL — CHANTILLY VELOURS
   AJUSTEMENT FINAL DU MESSAGE
   ===================================================== */

/* Zone promotionnelle sans contour */
.home-hero .an-velours-visual .an-velours-promo {
    background: rgba(20, 45, 34, 0.20);
    border: none !important;
    box-shadow: none;
    border-radius: 8px;
}

/* Titre */
.home-hero .an-velours-promo-title {
    font-size: 19px;
    color: #FFFFFF;
}

/* Description */
.home-hero .an-velours-promo-offer {
    font-size: 14px;
    color: #FFFFFF;
}

/* Texture fondante */
.home-hero .an-velours-promo-texture {
    font-size: 15px;
    color: #FFFFFF;
}

/* Découvrir notre best-seller */
.home-hero .an-velours-promo-link {
    font-size: 14px;
    color: #FFFFFF;
}

/* ORDINATEUR UNIQUEMENT */
@media (min-width: 992px) {

    .home-hero .an-velours-visual .an-velours-promo {
        bottom: -7%;
    }
}

/* TÉLÉPHONE : POSITION CONSERVÉE */
@media (max-width: 767.98px) {

    .home-hero .an-velours-visual .an-velours-promo {
        bottom: 8px;
    }

    .home-hero .an-velours-promo-title {
        font-size: 16px;
    }

    .home-hero .an-velours-promo-offer {
        font-size: 12px;
    }

    .home-hero .an-velours-promo-texture {
        font-size: 13px;
    }

    .home-hero .an-velours-promo-link {
        font-size: 12px;
    }
}
/* CHANTILLY VELOURS — LIEN SUR UNE SEULE LIGNE */

@media (max-width: 767.98px) {

    .home-hero .an-velours-promo-link {
        white-space: nowrap;
        font-size: 10px;
        letter-spacing: -0.3px;
        width: max-content;
        max-width: 100%;
    }
}


/* =====================================================
   ALLIANZNATURE — BANDE PUBLICITAIRE
   ===================================================== */

.an-offers-banner {
    width: 100%;
    background: #193D2D;
    color: #FFFFFF;
}

.an-offers-banner-inner {
    width: min(100%, 1320px);
    min-height: 39px;
    margin: 0 auto;
    padding: 5px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.an-offers-messages {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.an-offers-message {
    margin: 0;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.2px;
}

    .an-offers-message[hidden] {
        display: none !important;
    }

.an-offers-gift {
    color: #EAD6A3;
    margin-right: 9px;
}

.an-offers-arrow {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 17px;
}

    .an-offers-arrow[hidden] {
        display: none !important;
    }

    .an-offers-arrow:hover {
        color: #EAD6A3;
    }

    .an-offers-arrow:focus-visible {
        outline: 2px solid #EAD6A3;
        outline-offset: 2px;
    }

@media (max-width: 767.98px) {
    .an-offers-banner-inner {
        min-height: 43px;
        padding: 6px 8px;
        gap: 4px;
    }

    .an-offers-message {
        font-size: 11px;
    }

    .an-offers-arrow {
        width: 25px;
        height: 30px;
    }
}

/* RESSOURCES — ILLUSTRATIONS DES MATIÈRES PREMIÈRES */

.resources-materials-section .material-card {
    display: flex;
    flex-direction: column;
}

/* Remplacer le cercle des initiales par une zone d'image */
.resources-materials-section .material-symbol {
    width: 100%;
    height: 165px;
    margin-top: 20px;
    border: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Présentation des dessins */
.resources-materials-section .material-illustration {
    display: block;
    width: 100%;
    max-width: 190px;
    height: 155px;
    object-fit: contain;
}

.resources-materials-section .material-card h3 {
    margin-top: 14px;
}

/* Adaptation téléphone */
@media (max-width: 575.98px) {
    .resources-materials-section .material-symbol {
        height: 175px;
    }

    .resources-materials-section .material-illustration {
        max-width: 205px;
        height: 165px;
    }
}
/* =====================================================
   RESSOURCES — ILLUSTRATIONS PLUS GRANDES
   ===================================================== */

/* Zone réservée aux dessins */
.resources-materials-section .material-symbol {
    width: 100%;
    height: 175px;
    margin-top: 10px;
    margin-bottom: 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Agrandir les dessins sans déformation */
.resources-materials-section .material-illustration {
    display: block;
    width: 100%;
    max-width: 245px;
    height: 175px;
    object-fit: contain;
}

/* Rapprocher légèrement le titre de l'illustration */
.resources-materials-section .material-card h3 {
    margin-top: 5px;
}

/* Adaptation téléphone */
@media (max-width: 575.98px) {
    .resources-materials-section .material-symbol {
        height: 190px;
    }

    .resources-materials-section .material-illustration {
        max-width: 250px;
        height: 185px;
    }
}

/* ==============================================================
   DIAGNOSTIC — LE TABLEAU VIVANT (oiseaux + fils + balancement)
   Règles volontairement limitées au Hero du Diagnostic.
   ============================================================== */
.diagnostic-page-hero:has(.an-diagnostic-stage) {
    overflow: hidden;
}
.diagnostic-page-hero > .container.diagnostic-hero-with-image:has(.an-diagnostic-stage) {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: center;
    column-gap: clamp(20px, 3vw, 58px);
    width: 100%;
    max-width: 1320px;
    min-height: 650px;
    margin-inline: auto;
    padding: 55px 20px;
}
.diagnostic-page-hero .diagnostic-page-hero-content {
    min-width: 0;
}
.diagnostic-page-hero .diagnostic-page-hero-visual.an-diagnostic-stage {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    height: clamp(440px, 42vw, 590px);
    min-height: 0;
    max-height: none;
    overflow: visible;
    background: transparent;
    isolation: isolate;
}
.diagnostic-page-hero .an-diagnostic-bird {
    position: absolute;
    z-index: 5;
    top: 1%;
    width: clamp(90px, 12vw, 146px);
    height: auto;
    filter: drop-shadow(0 5px 5px rgba(25,61,45,.12));
}
.diagnostic-page-hero .an-diagnostic-bird svg {
    display: block;
    width: 100%;
    height: auto;
}
.diagnostic-page-hero .an-diagnostic-bird-left {
    left: 0;
    transform: translateX(-10%) rotate(-7deg);
}
.diagnostic-page-hero .an-diagnostic-bird-right {
    right: 0;
    transform: translateX(10%) scaleX(-1) rotate(-7deg);
}
.diagnostic-page-hero .an-diagnostic-bird-wings {
    transform-origin: 86px 59px;
    animation: an-diagnostic-wingbeat 1.45s ease-in-out infinite alternate;
}
.diagnostic-page-hero .an-diagnostic-bird-right .an-diagnostic-bird-wings {
    animation-delay: -.65s;
}
.diagnostic-page-hero .an-diagnostic-swing {
    position: absolute;
    z-index: 2;
    inset: 0;
    transform-origin: 50% 15%;
    animation: an-diagnostic-rock 7s ease-in-out infinite;
}
.diagnostic-page-hero .an-diagnostic-thread {
    position: absolute;
    z-index: 1;
    top: 15%;
    width: 1.5px;
    height: 18%;
    background: linear-gradient(to bottom, #A88453, #D9B77C);
    box-shadow: 1px 0 rgba(255,255,255,.45);
    transform-origin: top center;
}
.diagnostic-page-hero .an-diagnostic-thread-left {
    left: 18%;
    transform: rotate(-17deg);
}
.diagnostic-page-hero .an-diagnostic-thread-right {
    right: 18%;
    transform: rotate(17deg);
}
.diagnostic-page-hero .an-diagnostic-art-frame {
    position: absolute;
    z-index: 2;
    inset: 30% 7% 2%;
    margin: 0;
    padding: 10px;
    border: 7px solid #BB9861;
    border-radius: 3px;
    background: #E7D8BA;
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.66),
        0 18px 35px rgba(25,61,45,.18),
        0 3px 4px rgba(72,55,31,.12);
}
.diagnostic-page-hero .an-diagnostic-art-frame::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(86,61,27,.35);
    pointer-events: none;
}
/* Neutraliser la règle existante de photo immersive : uniquement ce tableau. */
.diagnostic-page-hero .diagnostic-page-hero-visual.an-diagnostic-stage .an-diagnostic-art-frame img {
    position: static !important;
    inset: auto !important;
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover;
    object-position: 30% center;
    border-radius: 0;
}
@keyframes an-diagnostic-rock {
    0%, 100% { transform: rotate(-1.8deg); }
    50% { transform: rotate(1.8deg); }
}
@keyframes an-diagnostic-wingbeat {
    from { transform: rotate(-7deg); }
    to { transform: rotate(12deg); }
}
@media (min-width: 992px) {
    .diagnostic-page-hero:has(.an-diagnostic-stage) { padding-block: 0; }
    .diagnostic-page-hero > .container.diagnostic-hero-with-image:has(.an-diagnostic-stage) {
        gap: clamp(20px,3vw,58px);
        padding: 42px 20px;
    }
    .diagnostic-page-hero .diagnostic-page-hero-visual.an-diagnostic-stage {
        align-self: center;
        height: clamp(460px,42vw,590px);
    }
}
@media (max-width: 991.98px) {
    .diagnostic-page-hero > .container.diagnostic-hero-with-image:has(.an-diagnostic-stage) {
        grid-template-columns: 1fr;
        max-width: 740px;
        gap: 4px;
        min-height: 0;
        padding: 48px 20px 30px;
    }
    .diagnostic-page-hero .diagnostic-page-hero-content {
        padding: 0;
    }
    .diagnostic-page-hero .diagnostic-page-hero-visual.an-diagnostic-stage {
        height: clamp(360px, 85vw, 570px);
        margin-inline: auto;
    }
    .diagnostic-page-hero .an-diagnostic-bird { width: clamp(85px,20vw,135px); }
}
@media (max-width: 575.98px) {
    .diagnostic-page-hero > .container.diagnostic-hero-with-image:has(.an-diagnostic-stage) {
        padding: 38px 18px 20px;
    }
    .diagnostic-page-hero .diagnostic-page-hero-visual.an-diagnostic-stage {
        height: clamp(285px, 92vw, 390px);
    }
    .diagnostic-page-hero .an-diagnostic-art-frame {
        inset: 31% 4% 2%;
        border-width: 5px;
        padding: 6px;
    }
    .diagnostic-page-hero .an-diagnostic-bird { width: clamp(78px,25vw,110px); }
    .diagnostic-page-hero .an-diagnostic-thread { height: 19%; }
}
@media (prefers-reduced-motion: reduce) {
    .diagnostic-page-hero .an-diagnostic-swing,
    .diagnostic-page-hero .an-diagnostic-bird-wings {
        animation: none !important;
    }
}
/* =====================================================
   DIAGNOSTIC — ALIGNEMENT DES FILS SUR LES BECS
   ===================================================== */

.diagnostic-page-hero .an-diagnostic-thread {
    top: 10%;
    height: 23%;
}

/* Fil de l'oiseau gauche */
.diagnostic-page-hero .an-diagnostic-thread-left {
    left: 20%;
    transform: rotate(-18deg);
}

/* Fil de l'oiseau droit */
.diagnostic-page-hero .an-diagnostic-thread-right {
    right: 20%;
    transform: rotate(18deg);
}

@media (max-width: 991.98px) {
    .diagnostic-page-hero .an-diagnostic-thread {
        top: 10%;
        height: 23%;
    }
}

@media (max-width: 575.98px) {
    .diagnostic-page-hero .an-diagnostic-thread {
        top: 10%;
        height: 23%;
    }
}

/* ALLIANZNATURE — HERO CARNET OUVERT (sans changer l'image administrable)
   Charger après site.css, uniquement sur la page Carnet.
*/
.carnet-page-hero .carnet-hero-with-image .carnet-page-hero-visual {
    width: 100%;
    min-width: 0;
    justify-content: center;
    overflow: visible;
}

.carnet-page-hero .an-carnet-book {
    width: 100%;
    max-width: 720px;
    padding: 8px 8px 14px;
    border-radius: 5px 10px 13px 5px;
    background: linear-gradient(145deg,#68734c,#344331 68%,#273827);
    box-shadow: 0 22px 33px rgba(35,40,24,.17),0 4px 5px rgba(35,40,24,.13);
    transform: perspective(1100px) rotate(-.8deg);
    position: relative;
    isolation: isolate;
}

    .carnet-page-hero .an-carnet-book::after {
        content: "";
        position: absolute;
        left: 2%;
        right: 2%;
        bottom: 5px;
        border-bottom: 3px solid rgba(212,190,148,.8);
        pointer-events: none;
    }

.carnet-page-hero .an-carnet-book-pages {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    aspect-ratio: 1.48;
    overflow: hidden;
    border-radius: 24px 24px 5px 5px / 14px 14px 5px 5px;
    background: #fbf1dc;
}

    .carnet-page-hero .an-carnet-book-pages::before {
        content: "";
        position: absolute;
        width: 26px;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(90deg,rgba(105,77,42,.11),rgba(255,255,255,.52) 42%,rgba(79,57,30,.25));
        z-index: 3;
        pointer-events: none;
    }

.carnet-page-hero .an-carnet-book-page {
    position: relative;
    min-width: 0;
    padding: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(105deg,#f2e4ca 0%,#fff8e9 28%,#fffbf0 78%,#eee0c5 100%);
}

.carnet-page-hero .an-carnet-book-page-left {
    box-shadow: inset -10px 0 22px -12px rgba(80,60,39,.18);
}

.carnet-page-hero .an-carnet-book-page-right {
    background: linear-gradient(100deg,#e7d8b9,#fff8e9 11%,#fffaf0 90%,#e7d4b4);
    box-shadow: inset 12px 0 20px -12px rgba(80,60,39,.2);
}
/* Plus spécifique que les anciennes règles génériques .carnet-page-hero-visual img */
.carnet-page-hero .an-carnet-book-page .an-carnet-book-emblem {
    display: block;
    width: 100%;
    height: auto;
    max-height: 88%;
    max-width: 100%;
    object-fit: contain;
    border-radius: 0;
}

.carnet-page-hero .an-carnet-book-page .an-carnet-book-photo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(70,48,27,.15);
}

@media (min-width: 992px) {
    .carnet-page-hero .carnet-hero-with-image {
        grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr);
        gap: 26px;
    }
}

@media (max-width: 767.98px) {
    .carnet-page-hero .an-carnet-book {
        max-width: 590px;
        padding: 5px 5px 10px;
    }

    .carnet-page-hero .an-carnet-book-page {
        padding: 7%;
    }

    .carnet-page-hero .an-carnet-book-pages {
        aspect-ratio: 1.42;
    }
}

@media (prefers-reduced-motion: reduce) {
    .carnet-page-hero .an-carnet-book {
        transform: none;
    }
}
/* ============================================================
   ALLIANZNATURE — CARNET OUVERT : PROPORTIONS & RÉALISME
   À coller après les règles « CARNET OUVERT » déjà installées.
   Aucun changement de la vue Razor, de l'image administrable,
   du logo, des textes, des articles ou des autres pages.
   ============================================================ */

/* Davantage de place au carnet, sans toucher au contenu du Hero */
@media (min-width: 992px) {
    .carnet-page-hero > .container.carnet-hero-with-image {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
        column-gap: 28px;
    }
}

.carnet-page-hero .an-carnet-book {
    width: 100%;
    max-width: 780px;
    padding: 9px 10px 16px;
    border-radius: 15px 18px 18px 13px;
    background: linear-gradient(180deg, #64734c 0%, #3b4f36 64%, #253a29 100%);
    box-shadow: 0 32px 48px rgba(30, 42, 30, .20), 0 10px 12px rgba(37, 41, 25, .12), 0 3px 1px rgba(25, 39, 27, .18);
    transform: perspective(1300px) rotate(-.65deg);
}

    /* Tranches de feuilles perceptibles sous la double page */
    .carnet-page-hero .an-carnet-book::after {
        content: "";
        position: absolute;
        left: 1.4%;
        right: 1.4%;
        bottom: 6px;
        height: 9px;
        border: none;
        border-radius: 0 0 50% 50%;
        background: repeating-linear-gradient( to bottom, #d5c5a6 0px, #f6e9d0 1px, #c2ae87 2px, #e6d8bb 3px );
        box-shadow: 0 3px 3px rgba(41, 35, 22, .18);
        pointer-events: none;
    }

.carnet-page-hero .an-carnet-book-pages {
    aspect-ratio: 1.54;
    border-radius: 25px 25px 11px 11px / 19px 19px 8px 8px;
    box-shadow: inset 0 0 15px rgba(91, 62, 26, .13);
}

    /* L'ombre centrale suggère deux feuilles courbées vers la reliure */
    .carnet-page-hero .an-carnet-book-pages::before {
        width: 44px;
        background: linear-gradient(90deg, rgba(96, 69, 38, .02) 0%, rgba(87, 64, 36, .18) 25%, rgba(60, 42, 22, .35) 47%, rgba(255, 251, 237, .63) 53%, rgba(85, 63, 34, .20) 81%, rgba(97, 65, 37, .04) 100%);
        z-index: 3;
    }

.carnet-page-hero .an-carnet-book-page {
    padding: 7%;
    overflow: hidden;
}

.carnet-page-hero .an-carnet-book-page-left {
    background: linear-gradient(90deg, #eadcbd 0%, #fff9e9 9%, #fffaf0 68%, #f5e8cd 88%, #d1bb95 100%);
    box-shadow: inset 0 5px 12px rgba(105, 75, 42, .09), inset -15px 0 24px -13px rgba(80, 52, 22, .24);
    border-radius: 19px 1px 3px 9px / 14px 1px 3px 7px;
}

.carnet-page-hero .an-carnet-book-page-right {
    padding: 5.7%;
    background: linear-gradient(90deg, #d2bd98 0%, #eee0c4 8%, #fffaf0 27%, #fff9ec 89%, #e9d5b0 100%);
    box-shadow: inset 13px 0 23px -10px rgba(76, 52, 22, .24), inset -5px 0 11px rgba(100, 71, 37, .10);
    border-radius: 1px 19px 9px 3px / 1px 14px 7px 3px;
}

/* La photo reste la source administrable : seul son espace grandit. */
.carnet-page-hero .an-carnet-book-page .an-carnet-book-photo {
    border: 5px solid rgba(255, 250, 239, .83);
    box-shadow: 0 5px 14px rgba(68, 48, 26, .20);
    object-fit: cover;
}

/* Conserver l'arbre authentique de la marque */
.carnet-page-hero .an-carnet-book-page .an-carnet-book-emblem {
    max-height: 88%;
    object-fit: contain;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .carnet-page-hero > .container.carnet-hero-with-image {
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
        gap: 24px;
    }
}

@media (max-width: 767.98px) {
    .carnet-page-hero .an-carnet-book {
        max-width: 640px;
        padding: 6px 6px 12px;
    }

    .carnet-page-hero .an-carnet-book-pages {
        aspect-ratio: 1.42;
    }

    .carnet-page-hero .an-carnet-book-page-left {
        padding: 6%;
    }

    .carnet-page-hero .an-carnet-book-page-right {
        padding: 5%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .carnet-page-hero .an-carnet-book {
        transform: none;
    }
}