/* =========================================================================
   Pages Services et détail d'un service (ADR-049, Lot 2) · chargé après
   dominium-theme.css par les vues services et service-details uniquement.
   Même vocabulaire que le reste du site : noir #1c1c1c, jaune de marque,
   angles droits, tuiles d'icône noires, filet jaune. Le seul élément fort
   de la fiche est la carte prix (« le juste prix, noir sur blanc »), le
   reste reste calme et aéré. Aucune couleur de marque en dur (Règle #2).
   ========================================================================= */

/* ---------- Prix d'appel (composant x-public.service-price) ---------- */
.dm-price {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
    row-gap: 2px;
    color: var(--color-text);
}
.dm-price__from {
    flex-basis: 100%;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.dm-price__amount {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.dm-price__unit {
    font-size: .875rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ---------- Page Services : en-tête, mention, 12 cartes ---------- */
.dm-services {
    position: relative;
    padding: var(--space-8) 0 var(--space-9);
    background-color: var(--color-surface);
}
.dm-services__header {
    margin-bottom: var(--space-7);
}
.dm-pricing-note {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: var(--space-4) 0 0;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text);
}
.dm-pricing-note i {
    flex-shrink: 0;
    color: var(--color-dark);
}

.dm-universes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dm-universe {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 28px 24px;
    background-color: var(--color-bg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .05);
    transition: box-shadow .35s var(--ease-natural);
}
.dm-universe::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--color-primary);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .45s cubic-bezier(.77, 0, .18, 1);
}
.dm-universe:hover {
    box-shadow: 0 22px 48px rgba(0, 0, 0, .09);
}
.dm-universe:hover::before,
.dm-universe:focus-within::before {
    transform: none;
}
.dm-universe__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--space-5);
    background-color: var(--color-dark);
    color: var(--color-primary);
    font-size: 22px;
}
.dm-universe__title {
    margin: 0 0 var(--space-2);
    text-wrap: balance;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.25;
}
.dm-universe__link,
.dm-universe__link:hover {
    color: var(--color-text);
}
/* Toute la carte est cliquable (lien étiré), le contour de focus l'entoure. */
.dm-universe__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.dm-universe__link:focus-visible {
    outline: none;
}
.dm-universe__link:focus-visible::after {
    outline: 2px solid var(--color-dark);
    outline-offset: 3px;
}
.dm-universe__hook {
    margin: 0 0 var(--space-5);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}
.dm-universe__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    margin: auto 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
}
.dm-universe__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: 1px solid var(--color-border);
    color: var(--color-dark);
    font-size: 14px;
    transition: background-color .3s var(--ease-natural), border-color .3s var(--ease-natural), transform .3s var(--ease-natural);
}
.dm-universe:hover .dm-universe__go {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    transform: translateX(3px);
}

/* ---------- Fiche service, disposition B ---------- */
/* Le gabarit pose overflow: hidden sur .page-wrapper (style.css), ce qui en fait un conteneur de
   défilement : tout position: sticky à l'intérieur reste figé. Sur la fiche seulement, clip
   garde le même découpage sans conteneur de défilement (flow-root garde le contexte de bloc).
   Navigateur sans clip : la carte reste à sa place, sans régression. */
.page-wrapper:has(.dm-svc) {
    display: flow-root;
    overflow: clip;
}
/* Un élément qui reçoit le focus au clavier n'est jamais caché sous l'en-tête collant du site ni
   sous la barre prix (mobile et tablette, collée sous l'en-tête). */
html:has(.dm-svc) {
    scroll-padding-top: 96px;
}
html.dm-svc-bar-on {
    scroll-padding-top: calc(var(--dm-header-h, 80px) + var(--dm-svc-bar-h, 72px) + 16px);
}
.dm-svc {
    overflow-x: clip;   /* clip (et non hidden) : ne casse pas position: sticky */
    padding-bottom: var(--space-9);
    background-color: var(--color-bg);
}
.dm-svc__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-areas:
        "head aside"
        "body aside";
    column-gap: clamp(40px, 5vw, 80px);
}

/* En-tête sur bandeau noir pleine largeur (fond étendu sous la colonne de droite). */
.dm-svc__head {
    grid-area: head;
    position: relative;
    z-index: 0;
    padding: clamp(36px, 4vw, 56px) 0 clamp(48px, 5vw, 72px);
    color: var(--color-text-on-dark);
}
.dm-svc__head::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: -100vw;
    right: -100vw;
    background-color: var(--color-dark);
}
.dm-svc__head::after {
    content: "";
    position: absolute;
    left: -100vw;
    right: 0;
    bottom: 0;
    height: 6px;
    background-color: var(--color-primary);
}
.dm-svc__crumbs {
    margin-bottom: var(--space-6);
}
.dm-svc__title {
    margin: 0 0 var(--space-3);
    font-size: clamp(1rem, .9rem + .4vw, 1.25rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    color: var(--color-primary);
}
.dm-svc__hook {
    max-width: 17ch;
    margin: 0 0 var(--space-5);
    font-size: clamp(2.25rem, 1.4rem + 2.8vw, 3.75rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.04;
    color: var(--color-text-on-dark);
    text-wrap: balance;
}
.dm-svc__hook--long {
    max-width: 26ch;
    font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
    line-height: 1.12;
}
.dm-svc__desc {
    max-width: 58ch;
    margin: 0;
    font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, .8);
}

/* Colonne de droite : la carte prix démarre sur le bandeau puis reste collée. */
.dm-svc__aside {
    grid-area: aside;
    position: relative;
    z-index: 2;
    padding-top: clamp(112px, 10vw, 152px);
}
.dm-price-card {
    position: sticky;
    top: 104px;
    padding: 30px 28px 28px;
    border-top: 4px solid var(--color-primary);
    background-color: var(--color-bg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .14);
}
.dm-price-card__price {
    margin: 0 0 var(--space-3);
}
.dm-price-card .dm-price__from {
    font-size: .9375rem;
}
.dm-price-card .dm-price__amount {
    font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem);
}
.dm-price-card .dm-price__unit {
    font-size: 1rem;
}
.dm-price-card__caption {
    margin: 0 0 var(--space-5);
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}
.dm-price-card__terms {
    margin: 0 0 var(--space-5);
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text);
}
.dm-price-card__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    min-height: 58px;
    padding: 8px 10px 8px 22px;
    border: 0;
    background-color: var(--color-primary);
    color: var(--color-dark);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color .25s var(--ease-natural);
}
.dm-price-card__cta:hover {
    background-color: var(--color-primary-hover);
}
.dm-price-card__cta:focus-visible {
    outline: 3px solid var(--color-dark);
    outline-offset: 3px;
}
.dm-price-card__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    background-color: var(--color-dark);
    color: var(--color-primary);
    font-size: 15px;
    transition: transform .3s var(--ease-natural);
}
.dm-price-card__cta:hover .dm-price-card__cta-icon {
    transform: translateX(3px);
}

/* ---------- Blocs de la colonne de gauche ---------- */
.dm-svc__body {
    grid-area: body;
    min-width: 0;
    padding-top: clamp(48px, 5vw, 72px);
}
.dm-svc-block + .dm-svc-block {
    margin-top: clamp(48px, 5vw, 72px);
}
.dm-svc-block__title {
    margin: 0 0 var(--space-5);
    font-size: clamp(1.5rem, 1.3rem + .7vw, 1.875rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--color-text);
}

/* Ce qui est inclus : liste « ligne par ligne », deux colonnes. */
.dm-svc-included__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 36px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--color-border);
}
.dm-svc-included__list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text);
}
.dm-svc-included__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    background-color: var(--color-primary);
    color: var(--color-dark);
    font-size: 11px;
}

/* On peut ajouter : pastilles sans prix. */
.dm-svc-options__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Pastilles non cliquables : fond plein, sans bordure, pour ne pas ressembler aux liens
   « Autres services » (bordés) ni à des boutons. */
.dm-svc-options__list li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background-color: var(--color-surface);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
}
.dm-svc-options__list i {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* Trois niveaux : un bandeau en trois cases, Standard en noir. */
.dm-svc-levels__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--color-border);
}
.dm-svc-level {
    padding: 24px 22px;
    color: var(--color-text);
}
.dm-svc-level + .dm-svc-level {
    border-left: 1px solid var(--color-border);
}
.dm-svc-level.is-recommended {
    margin: -1px 0;
    background-color: var(--color-dark);
    color: var(--color-text-on-dark);
}
.dm-svc-level__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--space-3);
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.3;
    color: inherit;
}
.dm-svc-level__tag {
    padding: 3px 8px;
    background-color: var(--color-primary);
    color: var(--color-dark);
    font-size: .75rem;
    font-weight: 800;
    line-height: 1.3;
}
.dm-svc-level__text {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}
.dm-svc-level.is-recommended .dm-svc-level__text {
    color: rgba(255, 255, 255, .8);
}

/* Comment ça se passe : étapes numérotées, échéances et garantie en pastilles. */
.dm-svc-process__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.dm-svc-step {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 20px;
    padding-bottom: 26px;
}
.dm-svc-step:last-child {
    padding-bottom: 0;
}
.dm-svc-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 46px;
    bottom: 6px;
    left: 19px;
    width: 2px;
    background-color: var(--color-border);
}
.dm-svc-step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-dark);
    background-color: var(--color-bg);
    color: var(--color-dark);
    font-size: 1rem;
    font-weight: 800;
}
.dm-svc-step__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 7px 0 6px;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-text);
}
.dm-svc-step__badge {
    padding: 3px 10px;
    background-color: var(--atf-thm-base);
    color: var(--color-dark);
    font-size: .8125rem;
    font-weight: 800;
    line-height: 1.4;
    white-space: nowrap;
}
.dm-svc-step__text {
    max-width: 62ch;
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

/* FAQ : accordéon du thème, en version compacte (filets au lieu de cartes). */
.dm-svc-faq__list {
    gap: 0;
    border-top: 1px solid var(--color-border);
}
.dm-svc-faq .dominium-faq-item {
    border-bottom: 1px solid var(--color-border);
    background-color: transparent;
    box-shadow: none;
}
.dm-svc-faq .dominium-faq-item.is-open {
    box-shadow: none;
}
.dm-svc-faq .dominium-faq-item:not(.is-open):hover {
    transform: none;
}
.dm-svc-faq .dominium-faq-item__toggle {
    gap: var(--space-4);
    padding: 18px 0 18px 20px;
}
.dm-svc-faq .dominium-faq-item__question {
    font-size: 1.0625rem;
    font-weight: 700;
}
.dm-svc-faq .dominium-faq-item__icon {
    width: 36px;
    height: 36px;
    font-size: 13px;
}
.dm-svc-faq .dominium-faq-item__answer {
    padding: 0 52px 20px 20px;
}
.dm-svc-faq .dominium-faq-item__answer p {
    font-size: 1rem;
    line-height: 1.7;
}

/* Autres services : une seule ligne compacte, défilement horizontal si besoin. */
.dm-svc-others {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
    margin-top: clamp(48px, 5vw, 72px);
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
}
.dm-svc-others__title {
    flex-shrink: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-text);
}
.dm-svc-others__list {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 4px 40px 10px 2px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.dm-svc-others__list a {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--color-text);
    transition: background-color .25s var(--ease-natural), border-color .25s var(--ease-natural), color .25s var(--ease-natural);
}
.dm-svc-others__list a:hover {
    border-color: var(--color-dark);
    background-color: var(--color-dark);
    color: var(--color-text-on-dark);
}
.dm-svc-others__list a:focus-visible {
    outline: 2px solid var(--color-dark);
    outline-offset: 2px;
}

/* ---------- Tablette ---------- */
@media (max-width: 1199.98px) {
    .dm-svc__layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
    .dm-price-card {
        padding: 26px 22px 22px;
    }
}
@media (max-width: 991.98px) {
    .dm-universes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dominium-catalog__header.dm-services__header {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }
}

/* ---------- Mobile et tablette : une colonne, carte prix = barre collante en haut (sous l'en-tête) ---------- */
@media (max-width: 991.98px) {
    .dm-svc {
        padding-bottom: 0;
    }
    .dm-svc__layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "aside"
            "body";
    }
    .dm-svc__head::after {
        right: -100vw;
    }
    .dm-svc__body {
        padding-bottom: var(--space-7);
    }
    .dm-svc__aside {
        position: sticky;
        /* Collée en haut de l'écran, puis sous l'en-tête du site dès qu'il devient fixe
           (classe atf-sticky-active, hauteur mesurée par dominium-services.js). */
        top: 0;
        z-index: 980;
        transition: top .25s ease;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        padding-top: 0;
    }
    .dm-price-card {
        position: static;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
        border-top-width: 3px;
        background-color: var(--color-dark);
        box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    }
    .dm-price-card__price {
        min-width: 0;
        margin: 0;
    }
    .dm-price-card .dm-price {
        color: var(--color-text-on-dark);
    }
    .dm-price-card .dm-price__from {
        font-size: .75rem;
        color: var(--color-text-muted-on-dark);
    }
    .dm-price-card .dm-price__amount {
        font-size: 1.25rem;
    }
    .dm-price-card .dm-price__unit {
        font-size: .8125rem;
    }
    .dm-price-card__caption,
    .dm-price-card__terms {
        display: none;
    }
    .dm-price-card__cta {
        flex-shrink: 0;
        width: auto;
        max-width: 60%;
        min-height: 48px;
        padding: 6px 7px 6px 14px;
        font-size: .9375rem;
    }
    .dm-price-card__cta-icon {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    body:has(.atf-sticky-header.atf-sticky-active) .dm-svc__aside {
        top: var(--dm-header-h, 80px);
    }
}
@media (max-width: 767.98px) {
    .dm-svc-included__list {
        grid-template-columns: minmax(0, 1fr);
    }
    .dm-svc-levels__list {
        grid-template-columns: minmax(0, 1fr);
    }
    .dm-svc-level + .dm-svc-level {
        border-left: 0;
        border-top: 1px solid var(--color-border);
    }
    .dm-svc-level.is-recommended {
        margin: 0 -1px;
    }
    .dm-svc-others {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }
}
@media (max-width: 575.98px) {
    .dm-services {
        padding: var(--space-7) 0 var(--space-8);
    }
    .dm-universes {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    .dm-universe {
        padding: 22px 20px 18px;
    }
    .dm-universe__icon {
        width: 44px;
        height: 44px;
        margin-bottom: var(--space-4);
        font-size: 19px;
    }
    .dm-svc__crumbs {
        margin-bottom: var(--space-5);
    }
    .dm-svc-step {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 14px;
    }
    .dm-svc-step__number {
        width: 34px;
        height: 34px;
        font-size: .9375rem;
    }
    .dm-svc-step:not(:last-child)::before {
        top: 40px;
        left: 16px;
    }
    .dm-svc-step__title {
        margin-top: 5px;
    }
    /* Le titre suit juste après : le fil d'Ariane s'arrête à « Nos services ». */
    .dm-svc__crumbs > span[aria-current],
    .dm-svc__crumbs > i:last-of-type {
        display: none;
    }
    /* Barre : bouton sans pastille d'icône pour laisser la place au prix sur une ligne. */
    .dm-price-card .dm-price__amount {
        font-size: 1.125rem;
    }
    .dm-price-card__cta {
        justify-content: center;
        max-width: 50%;
        padding: 6px 14px;
        font-size: .875rem;
        text-align: center;
    }
    .dm-price-card__cta-icon {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dm-universe,
    .dm-universe::before,
    .dm-universe__go,
    .dm-price-card__cta,
    .dm-price-card__cta-icon,
    .dm-svc-others__list a {
        transition: none;
    }
}