/* ==========================================================================
   Acephal — extension sites (acephal.cloud, .app, .website, .pro), V2
   Page components shared by the four sites, on top of the acephal.fr design
   system (variables / base / components / sections / responsive / home /
   projet). Mobile-first. Colours only through the theme variables
   (--acephal-blue, --acephal-cyan, --accent-on-light): each site keeps its
   own accent through <html data-domain="…">.
   ========================================================================== */

/* ---- Long text --------------------------------------------------------- */
.prose {
    max-width: 46rem;
    color: var(--text-body);
    line-height: 1.7;
}

.prose > * + * {
    margin-top: var(--space-4);
}

.prose h2,
.prose h3 {
    margin-top: var(--space-6);
    color: var(--text-strong);
    line-height: 1.25;
}

.prose h2 { font-size: 1.4rem; }
.prose h3 { font-size: 1.15rem; }

.prose ul {
    padding-left: 1.25rem;
}

.prose li + li {
    margin-top: var(--space-2);
}

.prose a,
.card__text a,
.notice a {
    color: var(--accent-on-light);
    font-weight: var(--weight-semibold);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.section-head {
    max-width: 48rem;
    margin-bottom: var(--space-6);
}

/* ---- Cards (features, services, solutions) ------------------------------ */
.cards {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: 100%;
    padding: var(--space-5);
    border: 1px solid var(--line-light);
    border-radius: var(--radius-panel);
    background: var(--surface-white);
    box-shadow: 0 14px 34px -28px color-mix(in srgb, var(--acephal-night) 60%, transparent);
}

.section--white .card {
    background: var(--surface-light);
}

.card__icon {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-on-light) 12%, transparent);
    color: var(--accent-on-light);
}

.card__icon .icon {
    width: 1.35rem;
    height: 1.35rem;
}

.card__title {
    color: var(--text-strong);
    font-size: 1.1rem;
    font-weight: var(--weight-semibold);
    line-height: 1.3;
}

.card__text {
    color: var(--text-body);
    line-height: 1.6;
}

.card__list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-body);
}

.card__list li {
    position: relative;
    padding-left: 1.4rem;
    line-height: 1.5;
}

.card__list li::before {
    content: "";
    position: absolute;
    top: 0.55em;
    left: 0.2rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--accent-on-light);
}

.card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: auto;
    padding-top: var(--space-2);
    color: var(--accent-on-light);
    font-weight: var(--weight-semibold);
}

.card__link .icon {
    width: 1rem;
    height: 1rem;
    transition: transform var(--duration) var(--ease);
}

/* Whole card clickable when it has a link (as the eco-cards of acephal.eu): the link is
   stretched over the card, so screen readers still get one link per card. */
.card:has(.card__link) {
    position: relative;
    cursor: pointer;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* Other links of the card stay clickable above the stretched one. */
.card__text a {
    position: relative;
    z-index: 1;
}

.card:has(.card__link):hover {
    border-color: var(--accent-on-light);
    box-shadow: 0 18px 38px -24px color-mix(in srgb, var(--accent-on-light) 55%, transparent);
    transform: translateY(-2px);
}

.card:has(.card__link):hover .card__link .icon {
    transform: translateX(3px);
}

.card:has(.card__link:focus-visible) {
    box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
    .card:has(.card__link),
    .card__link .icon {
        transition: none;
    }

    .card:has(.card__link):hover {
        transform: none;
    }
}

/* ---- Offer levels: Standard / Pro / Premium ------------------------------ */
.tiers {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tier {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-5);
    border: 1px solid var(--line-light);
    border-top: 4px solid var(--accent-on-light);
    border-radius: var(--radius-panel);
    background: var(--surface-white);
    box-shadow: 0 14px 34px -26px color-mix(in srgb, var(--acephal-night) 60%, transparent);
}

.tier__level {
    color: var(--text-body);
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.tier__name {
    color: var(--text-strong);
    font-size: 1.6rem;
    font-weight: var(--weight-bold);
    line-height: 1.1;
}

.tier__text {
    color: var(--text-body);
    line-height: 1.6;
}

.tier__price {
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--line-light);
    color: var(--text-strong);
    font-weight: var(--weight-semibold);
}

/* "To be defined" badge: prices, options and details not decided yet. */
.tbd {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.2rem 0.65rem;
    border: 1px dashed currentColor;
    border-radius: var(--radius-pill);
    color: var(--text-body);
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* ---- "Level + options = final service" ---------------------------------- */
.equation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin: var(--space-6) 0 0;
    padding: var(--space-5);
    border-radius: var(--radius-panel);
    background: var(--acephal-night);
    color: var(--acephal-white);
    list-style: none;
    text-align: center;
}

.equation__item {
    padding: 0.6rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--acephal-cyan) 55%, transparent);
    border-radius: var(--radius-pill);
    font-weight: var(--weight-semibold);
}

.equation__item--result {
    border-color: transparent;
    background: var(--acephal-blue);
}

.equation__op {
    color: var(--acephal-cyan);
    font-size: 1.4rem;
    font-weight: var(--weight-bold);
}

/* ---- The two ways to buy: project cycle / direct ------------------------ */
.cycles {
    display: grid;
    gap: var(--space-4);
}

.cycle {
    padding: var(--space-6) var(--space-5);
    border: 1px solid var(--line-light);
    border-radius: var(--radius-panel);
    background: var(--surface-white);
}

.section--white .cycle {
    background: var(--surface-light);
}

.cycle__tag {
    display: inline-block;
    margin-bottom: var(--space-3);
    color: var(--accent-on-light);
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.cycle__title {
    color: var(--text-strong);
    font-size: 1.3rem;
    font-weight: var(--weight-bold);
    line-height: 1.25;
}

.cycle__text {
    margin-top: var(--space-3);
    color: var(--text-body);
    line-height: 1.6;
}

/* Process as chained pills: Dépôt › Analyse › … */
.flow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: flow;
}

.flow li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-strong);
    font-size: 0.9rem;
    font-weight: var(--weight-semibold);
}

.flow li span {
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent-on-light) 10%, transparent);
}

.flow li:not(:last-child)::after {
    content: "›";
    color: var(--accent-on-light);
    font-weight: var(--weight-bold);
}

.cycle .actions {
    margin-top: var(--space-5);
}

/* ---- Callouts ----------------------------------------------------------- */
.notice {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding: var(--space-4) var(--space-5);
    border-left: 4px solid var(--accent-on-light);
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    background: color-mix(in srgb, var(--accent-on-light) 7%, var(--surface-white));
    color: var(--text-body);
    line-height: 1.6;
}

.notice > .icon {
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.15rem;
    color: var(--accent-on-light);
}

.notice strong {
    color: var(--text-strong);
}

/* Something not available yet. */
.notice--future {
    border-left-style: dashed;
}

/* ---- Two columns: text + aside ------------------------------------------ */
.split {
    display: grid;
    gap: var(--space-6);
}

.aside-box {
    align-self: start;
    padding: var(--space-5);
    border-radius: var(--radius-panel);
    background: var(--acephal-night);
    color: var(--acephal-gray);
    line-height: 1.6;
}

.aside-box__title {
    margin-bottom: var(--space-3);
    color: var(--acephal-white);
    font-size: 1.15rem;
    font-weight: var(--weight-semibold);
}

.aside-box__list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding-left: 1.25rem;
}

.aside-box__list li::marker {
    color: var(--acephal-cyan);
    font-weight: var(--weight-bold);
}

.aside-box .button {
    margin-top: var(--space-4);
}

/* ---- Request form (js/request.js) --------------------------------------- */
.request-layout {
    display: grid;
    gap: var(--space-6);
}

/* Level choices: one per line on phones (long words such as "fonctionnement"
   would otherwise push the two columns out of the card). */
.request-layout .choices {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
    .request-layout .choices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- Breakpoints -------------------------------------------------------- */
@media (min-width: 720px) {
    .cards--2,
    .cards--3,
    .cards--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cycles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .cards--3,
    .tiers {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cards--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .split {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        align-items: start;
    }

    .request-layout {
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
        align-items: start;
    }
}