/* ==========================================================================
   Page Services — Les Toits de Bryan (Jalon 2 / Session 4A)
   4 sections détaillées en bandeaux alternés (Couverture, Zinguerie,
   Démoussage, Ramonage). Mobile-first — 70% du trafic artisan local.
   Dépend de : style.css (variables), buttons.css, templates.css (.subpage-hero).
   ========================================================================== */

/* ==========================================================================
   1. SECTION DÉTAILLÉE — bandeau alterné
   Mobile : média empilé au-dessus du texte.
   Desktop : 2 colonnes, média et texte alternés gauche/droite.
   ========================================================================== */

.service-detail {
    padding: 3.5rem 0;
    background-color: var(--color-cream);
    /* compense le header sticky (60px mobile) lors d'un saut d'ancre */
    scroll-margin-top: 80px;
}

/* Alternance des fonds — écho du rythme visuel de la homepage */
.service-detail:nth-child(even) {
    background-color: var(--color-white-warm);
}

.service-detail__inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}


/* ==========================================================================
   2. COLONNE MÉDIA — figure principale + rangée de figures secondaires
   ========================================================================== */

.service-detail__media {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.service-figure {
    margin: 0;
    background-color: var(--color-white-warm);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Sur fond blanc-chaud (sections paires), la carte passe en crème clair */
.service-detail:nth-child(even) .service-figure {
    background-color: var(--color-cream-light);
}

.service-figure:hover {
    box-shadow: 0 14px 32px -18px rgba(143, 62, 36, 0.25);
    transform: translateY(-2px);
}

.service-figure picture {
    display: block;
}

.service-figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Rangée de figures secondaires : 2 colonnes par défaut */
.service-figure-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Rangée à figure unique (Ramonage) : pleine largeur */
.service-figure-row--single {
    grid-template-columns: 1fr;
}

.service-figure__caption {
    padding: 0.7rem 0.9rem 0.85rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-taupe);
}

/* Étiquette Avant / Pendant / Extérieur / Intérieur */
.service-figure__tag {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-copper);
    background-color: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.1rem 0.45rem;
    margin-right: 0.35rem;
    white-space: nowrap;
}


/* ==========================================================================
   3. COLONNE CONTENU — eyebrow, titre, texte, liens de maillage
   ========================================================================== */

.service-detail__eyebrow {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-copper);
    margin-bottom: 0.6rem;
}

.service-detail__title {
    position: relative;
    margin: 0 0 1.25rem;
    padding-bottom: 0.85rem;
}

/* Filet cuivre sous le H2 — cohérent avec .service-card__title de la homepage */
.service-detail__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 2px;
    background-color: var(--color-copper);
}

.service-detail__text p {
    color: var(--color-charcoal);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 1rem;
}

.service-detail__text p:last-child {
    margin-bottom: 0;
}

/* Phrase d'accroche mise en exergue (ex. Ramonage : "Du toit à votre salon…") */
.service-detail__highlight {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.0625rem;
    color: var(--color-copper-dark);
}

.service-detail__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    margin-top: 1.5rem;
}

.service-detail__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-copper);
    line-height: 1.4;
}

.service-detail__link span {
    display: inline-block;
    transition: transform 0.3s ease;
}

.service-detail__link:hover,
.service-detail__link:focus-visible {
    color: var(--color-copper-dark);
}

.service-detail__link:hover span,
.service-detail__link:focus-visible span {
    transform: translateX(4px);
}


/* ==========================================================================
   4. RESPONSIVE — Tablette
   ========================================================================== */

@media (min-width: 640px) {
    .service-detail__inner {
        gap: 2.5rem;
    }
}


/* ==========================================================================
   5. RESPONSIVE — Desktop : 2 colonnes alternées
   ========================================================================== */

@media (min-width: 1024px) {
    .service-detail {
        padding: 5rem 0;
        /* header sticky desktop = 80px */
        scroll-margin-top: 100px;
    }

    .service-detail__inner {
        flex-direction: row;
        align-items: center;
        gap: 3.5rem;
    }

    /* Sections paires (Zinguerie, Ramonage) : média basculé à droite */
    .service-detail:nth-child(even) .service-detail__inner {
        flex-direction: row-reverse;
    }

    .service-detail__media,
    .service-detail__content {
        flex: 1 1 50%;
        min-width: 0;
    }
}