/* ==========================================================================
   Conciergerie page — GLCD
   Sections: intro, services grid, Alsace (intro + cities + closing), CTA pill.
   Visual language aligned with the homepage (commitments cards + cta pill).
   ========================================================================== */

.conciergerie-main {
    display: block;
}

.conciergerie-section {
    padding: var(--spacing-16) 0;
}

.conciergerie-section:nth-child(even) {
    background-color: var(--color-bg-secondary, var(--color-bg-alt));
}

.conciergerie-section__title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--color-text);
    text-align: center;
    margin: 0 0 var(--spacing-10);
}

/* ==========================================================================
   Intro (eyebrow + H1 + subtitle)
   ========================================================================== */

.conciergerie-intro {
    padding-top: var(--spacing-20);
    padding-bottom: var(--spacing-12);
    background-color: var(--color-bg);
}

.conciergerie-intro__inner {
    max-width: 880px;
    text-align: center;
}

/* Image au-dessus du titre (cigogne par defaut, demande client avr. 2026) */
.conciergerie-intro__stork {
    margin: 0 auto var(--spacing-4);
    max-width: 220px;
}

.conciergerie-intro__stork img {
    width: 100%;
    height: auto;
    display: block;
}

.conciergerie-intro__eyebrow {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
    color: var(--brand-gold);
    margin: 0 0 var(--spacing-4);
    padding: var(--spacing-1) var(--spacing-3);
    background-color: color-mix(in srgb, var(--brand-gold) 12%, transparent);
    border-radius: var(--radius-full);
}

.conciergerie-intro__title {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.15;
    color: var(--brand-green);
    margin: 0 0 var(--spacing-6);
}

.conciergerie-intro__subtitle {
    font-size: var(--font-size-lg);
    /* Texte plus fonce demande client (avr. 2026) — etait color-text-secondary */
    color: var(--color-text);
    line-height: 1.6;
}

.conciergerie-intro__subtitle p       { margin: 0 0 var(--spacing-4); }
.conciergerie-intro__subtitle p:last-child { margin-bottom: 0; }
.conciergerie-intro__subtitle strong  { color: var(--brand-green); font-weight: 700; }

/* Image visuelle entre l'intro et la section services */
.conciergerie-intro__bottom-image {
    margin: var(--spacing-10) auto 0;
    max-width: 720px;
}

.conciergerie-intro__bottom-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Services grid (8 cards)
   ========================================================================== */

.conciergerie-services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-6);
}

.conciergerie-service-card {
    background-color: var(--color-bg);
    border-radius: var(--radius-xl);
    padding: var(--spacing-8) var(--spacing-6);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: var(--spacing-4);
    border: 1px solid var(--color-border-light, var(--color-border));
}

.conciergerie-service-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.conciergerie-service-card__icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background-color: color-mix(in srgb, var(--brand-gold) 18%, transparent);
    color: var(--brand-green);
    flex-shrink: 0;
}

.conciergerie-service-card__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    color: var(--brand-green);
    margin: 0;
}

.conciergerie-service-card__text {
    font-size: var(--font-size-base);
    /* Texte plus fonce demande client (avr. 2026) */
    color: var(--color-text);
    line-height: 1.6;
}

.conciergerie-service-card__text p       { margin: 0 0 var(--spacing-3); }
.conciergerie-service-card__text p:last-child { margin-bottom: 0; }
.conciergerie-service-card__text strong  { color: var(--brand-green); font-weight: 700; }
.conciergerie-service-card__text ul      { margin: var(--spacing-2) 0; padding-left: var(--spacing-5); }
.conciergerie-service-card__text li      { margin-bottom: var(--spacing-1); }

/* ==========================================================================
   Alsace — intro + cities + closing
   ========================================================================== */

.conciergerie-alsace-intro {
    background-color: var(--color-bg);
}

.conciergerie-alsace-intro__inner {
    max-width: 900px;
    text-align: center;
}

.conciergerie-alsace-intro__text {
    font-size: var(--font-size-lg);
    /* Texte plus fonce demande client (avr. 2026) */
    color: var(--color-text);
    line-height: 1.6;
}

.conciergerie-alsace-intro__text strong { color: var(--brand-green); font-weight: 700; }

.conciergerie-alsace-intro__text p       { margin: 0 0 var(--spacing-4); }
.conciergerie-alsace-intro__text p:last-child { margin-bottom: 0; }
.conciergerie-alsace-intro__text strong  { color: var(--color-text); }

.conciergerie-alsace-cities {
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-12);
    background-color: var(--color-bg);
}

.conciergerie-alsace-cities__list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-3) var(--spacing-5);
    max-width: 960px;
}

.conciergerie-alsace-cities__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    background-color: var(--color-bg-secondary, var(--color-bg-alt));
    border-radius: var(--radius-lg);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.conciergerie-alsace-cities__item:hover {
    background-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-secondary, var(--color-bg-alt)));
    transform: translateX(2px);
}

.conciergerie-alsace-cities__item a {
    color: inherit;
    text-decoration: none;
    flex: 1;
}

.conciergerie-alsace-cities__item a:hover {
    color: var(--color-primary);
}

.conciergerie-alsace-cities__icon {
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.conciergerie-alsace-closing {
    background-color: var(--color-bg);
    padding-top: var(--spacing-6);
}

.conciergerie-alsace-closing__inner {
    max-width: 880px;
    text-align: center;
}

.conciergerie-alsace-closing__text {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary, var(--color-text-muted));
    line-height: 1.6;
    margin: 0 0 var(--spacing-6);
}

.conciergerie-alsace-closing__text p       { margin: 0 0 var(--spacing-3); }
.conciergerie-alsace-closing__text p:last-child { margin-bottom: 0; }

.conciergerie-alsace-closing__quote {
    font-size: var(--font-size-xl);
    font-style: italic;
    color: var(--color-primary);
    line-height: 1.4;
    margin: 0;
    padding: var(--spacing-4) var(--spacing-6);
    border-left: 3px solid var(--color-primary);
    display: inline-block;
    text-align: left;
    max-width: 700px;
}

/* ==========================================================================
   Final CTA pill (same language as homepage CTA)
   ========================================================================== */

.conciergerie-cta {
    background-color: var(--color-bg);
}

.conciergerie-cta__pill {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover, var(--color-primary-dark)) 100%);
    color: #fff;
    border-radius: var(--radius-xl);
    padding: var(--spacing-10) var(--spacing-8);
    text-align: center;
    box-shadow: 0 20px 50px -15px color-mix(in srgb, var(--color-primary) 50%, transparent);
    max-width: 860px;
    margin: 0 auto;
}

.conciergerie-cta__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3);
}

.conciergerie-cta__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
    margin: 0;
}

.conciergerie-cta__subtitle {
    font-size: var(--font-size-base);
    opacity: 0.92;
    max-width: 620px;
    margin: 0;
}

.conciergerie-cta__button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    background-color: #fff;
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    margin-top: var(--spacing-2);
}

.conciergerie-cta__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.conciergerie-cta__button svg {
    transition: transform var(--transition-fast);
}

.conciergerie-cta__button:hover svg {
    transform: translateX(2px);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .conciergerie-section {
        padding: var(--spacing-12) 0;
    }

    .conciergerie-intro {
        padding-top: var(--spacing-16);
        padding-bottom: var(--spacing-10);
    }

    .conciergerie-intro__title {
        font-size: var(--font-size-3xl);
    }

    .conciergerie-section__title {
        font-size: var(--font-size-2xl);
        margin-bottom: var(--spacing-8);
    }

    .conciergerie-cta__pill {
        padding: var(--spacing-8) var(--spacing-5);
    }

    .conciergerie-cta__title {
        font-size: var(--font-size-xl);
    }

    .conciergerie-alsace-cities__list {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .conciergerie-alsace-closing__quote {
        font-size: var(--font-size-lg);
        padding: var(--spacing-3) var(--spacing-4);
    }
}