/*
 * Habillage des blocs du parent au style Galaxyy Studio (maquettes .claude/maquettes/, guide
 * `galaxyy-studio.md`, « Typographie », « Mise en page », « Cartes luxe et halo », « Bandeau
 * d'appel à l'action »). Les blocs restent ceux du parent : seules leurs valeurs changent ici, pour
 * tout le site. Clair et `.dark`, 320 px et plus.
 */

/* ---------------------------------------------------------------------------------------------
   Sections : rythme `clamp(72px,8vw,128px)`, gouttière `clamp(20px,5vw,80px)`, en-tête de la
   maquette (surtitre, H2 de section, 14 px entre eux).
   --------------------------------------------------------------------------------------------- */
.theme-galaxyy-studio .section {
    padding-block: clamp(72px, 8vw, 128px);
}

.theme-galaxyy-studio .section.section--compact {
    padding-block: var(--space-12);
}

.theme-galaxyy-studio .section > .section__inner {
    --gutter: clamp(20px, 5vw, 80px);
    --gutter-md: clamp(20px, 5vw, 80px);
}

.theme-galaxyy-studio .section__header {
    gap: 14px;
    max-width: 620px;
    margin-bottom: clamp(32px, 4vw, 48px);
}

.theme-galaxyy-studio .section__eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--text-brand);
}

.theme-galaxyy-studio .section__title {
    font-size: clamp(1.875rem, 3.2vw, 2.875rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

/* Un mot plus long que sa colonne (« d'accompagnement » à 320 px quand le visiteur agrandit
   l'espacement des lettres ou la taille du texte, WCAG 1.4.4 et 1.4.12) passe à la ligne au lieu
   de faire déborder la page. */
.theme-galaxyy-studio {
    overflow-wrap: break-word;
}

/* Même chose pour les boutons du contenu (« Demander un rendez-vous » à 320 px) : le parent les
   garde sur une ligne. L'en-tête n'est pas concerné. */
.theme-galaxyy-studio main .btn {
    white-space: normal;
    text-align: center;
}

.theme-galaxyy-studio .section__subtitle {
    font-size: var(--text-body);
    line-height: 1.6;
}

/* ---------------------------------------------------------------------------------------------
   Étapes (steps-1) : filet fort au-dessus de chaque étape, numéro « 01 » en grand dans la couleur
   de marque (compteur CSS : le numéro du parent, décoratif, est remplacé), colonnes dès 220 px.
   --------------------------------------------------------------------------------------------- */
.theme-galaxyy-studio .steps-1 .section__header {
    max-width: none;
}

.theme-galaxyy-studio .steps-1 .section__title {
    font-size: clamp(1.75rem, 2.8vw, 2.5rem);
    line-height: 1.15;
}

.theme-galaxyy-studio .steps-1__list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 40px 32px;
    counter-reset: gs-step;
}

.theme-galaxyy-studio .steps-1__item {
    flex-direction: column;
    gap: 10px;
    padding-top: 24px;
    border-top: 1px solid var(--border-strong);
    counter-increment: gs-step;
}

.theme-galaxyy-studio .steps-1__number {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    font-size: 0;
    color: var(--text-brand);
}

.theme-galaxyy-studio .steps-1__number::before {
    content: counter(gs-step, decimal-leading-zero);
    font-family: var(--font-display);
    font-size: clamp(2rem, 3vw, 2.75rem);
    line-height: 1;
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.02em;
}

.theme-galaxyy-studio .steps-1__title {
    margin-top: 8px;
    font-size: 1.25rem;
    line-height: 1.3;
}

.theme-galaxyy-studio .steps-1__description {
    max-width: 30ch;
    line-height: 1.6;
}

/* ---------------------------------------------------------------------------------------------
   Offres (pricing-1) : en-tête en deux colonnes (titre, puis sous-titre aligné en bas à droite),
   formules en cartes luxe avec halo (data-halo posé par functions.php), formule mise en avant en
   bordure de marque (ocre en sombre).
   --------------------------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .theme-galaxyy-studio .pricing-1 .section__header {
        display: grid;
        grid-template-columns: minmax(0, 620px) minmax(0, 36ch);
        align-items: end;
        justify-content: space-between;
        column-gap: 48px;
        max-width: none;
    }

    .theme-galaxyy-studio .pricing-1 .section__eyebrow,
    .theme-galaxyy-studio .pricing-1 .section__title {
        grid-column: 1;
    }

    .theme-galaxyy-studio .pricing-1 .section__subtitle {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: end;
    }
}

.theme-galaxyy-studio .pricing-1__grid {
    align-items: start;
}

.theme-galaxyy-studio .card.pricing-1__plan,
.theme-galaxyy-studio .card.testimonials-1__item {
    position: relative;
    isolation: isolate;
    border-color: var(--luxe-border);
    border-radius: 12px;
    background: none;
}

.theme-galaxyy-studio .card.pricing-1__plan--featured {
    border-color: var(--border-brand);
}

/* Fond de la carte sur une couche, pour que la lueur extérieure du halo passe derrière lui
   (même principe que `.luxe-card`, elements.css). */
.theme-galaxyy-studio .card.pricing-1__plan::before,
.theme-galaxyy-studio .card.testimonials-1__item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--luxe-card);
}

/* ---------------------------------------------------------------------------------------------
   Témoignage (testimonials-1) : carte luxe de 640 px, citation en texte courant.
   --------------------------------------------------------------------------------------------- */
.theme-galaxyy-studio .grid.testimonials-1__grid--single {
    max-width: 640px;
}

.theme-galaxyy-studio .testimonials-1__item {
    gap: var(--space-6);
    padding: var(--space-8);
}

.theme-galaxyy-studio .testimonials-1__quote {
    font-size: var(--text-body-lg);
    line-height: 1.6;
}

.theme-galaxyy-studio .testimonials-1__name {
    font-weight: var(--font-weight-semibold);
    color: var(--text-strong);
}

.theme-galaxyy-studio .testimonials-1__role {
    color: var(--text-muted);
}

/* ---------------------------------------------------------------------------------------------
   Bandeau d'appel à l'action (cta-1) sur fond Aurora `cta` (functions.php) : carte de verre de
   1000 px au plus, rayon 24 px, surface des cartes à 55 % et flou de 16 px, halo de 320 px.
   --------------------------------------------------------------------------------------------- */
.theme-galaxyy-studio .cta-1 {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(80px, 10vw, 160px);
}

.theme-galaxyy-studio .cta-1 > .section__inner {
    position: relative;
    z-index: 1;
}

.theme-galaxyy-studio .cta-1__content {
    position: relative;
    isolation: isolate;
    gap: 20px;
    max-width: 1000px;
    padding: clamp(56px, 7vw, 104px) clamp(24px, 4vw, 64px);
    border: 1px solid color-mix(in oklch, var(--border-default) 70%, transparent);
    border-radius: 24px;
}

.theme-galaxyy-studio .cta-1__content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: color-mix(in oklch, var(--surface-card) 55%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.theme-galaxyy-studio .cta-1__title {
    max-width: 16ch;
    font-size: clamp(2.125rem, 4.2vw, 3.75rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
}

.theme-galaxyy-studio .cta-1__description {
    max-width: 44ch;
    font-size: var(--text-body);
    line-height: 1.6;
}

.theme-galaxyy-studio .cta-1__actions {
    margin-top: 8px;
}

/* ---------------------------------------------------------------------------------------------
   Questions fréquentes (accordion-1) : avec un en-tête, titre à gauche (360 px) et questions à
   droite dès 1024 px (maquette `Offres.dc.html`). Sans en-tête (bande « rapport » sous les offres),
   la liste seule ; collée à la bande teintée qui la précède.
   --------------------------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .theme-galaxyy-studio .accordion-1 > .section__inner:has(> .section__header) {
        display: grid;
        grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
        align-items: start;
        column-gap: 72px;
    }

    .theme-galaxyy-studio .accordion-1 > .section__inner > .section__header {
        margin-bottom: 0;
    }
}

.theme-galaxyy-studio .section--tint + .section--tint.section--compact {
    padding-top: 0;
}

/* ---------------------------------------------------------------------------------------------
   Étapes en lignes (steps-1, classe `steps-1--lignes`, « Nos engagements » de la maquette
   `Qui sommes-nous.dc.html`) : une ligne par engagement entre deux filets, numéro, titre (300 px
   au plus) puis texte, qui passent l'un sous l'autre faute de place.
   --------------------------------------------------------------------------------------------- */
.theme-galaxyy-studio .steps-1--lignes .steps-1__list {
    display: block;
    border-bottom: 1px solid var(--border-default);
}

.theme-galaxyy-studio .steps-1--lignes .steps-1__item {
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
    gap: 8px 32px;
    padding: 24px 0;
    border-top: 1px solid var(--border-default);
}

.theme-galaxyy-studio .steps-1--lignes .steps-1__number {
    flex: none;
    justify-content: flex-start;
    width: 48px;
}

.theme-galaxyy-studio .steps-1--lignes .steps-1__number::before {
    font-size: 1.5rem;
}

.theme-galaxyy-studio .steps-1--lignes .steps-1__body {
    display: contents;
}

.theme-galaxyy-studio .steps-1--lignes .steps-1__title {
    flex: 1 1 220px;
    max-width: 300px;
    margin-top: 0;
}

.theme-galaxyy-studio .steps-1--lignes .steps-1__description {
    flex: 2 1 320px;
    max-width: none;
    margin: 0;
    font-size: var(--text-body);
}

/* ---------------------------------------------------------------------------------------------
   Tableau à dernière colonne mise en avant (table-1, classe `table-1--dernier`, « Pourquoi un
   studio unique » de la maquette `Qui sommes-nous.dc.html`) : cellules en gras, texte fort.
   --------------------------------------------------------------------------------------------- */
.theme-galaxyy-studio .table-1--dernier tbody .table-1__cell:last-child {
    font-weight: var(--font-weight-semibold);
    color: var(--text-strong);
}