/**
 * Home page — « Entre terre et ciel »
 * Loaded by index.php only, after tokens.css and site.css.
 */

/* ==========================================================================
   1. OPENING — the arch fills the frame
   ========================================================================== */
.cn-ouverture {
    position: relative;
    display: grid;
    justify-items: center;
    padding: clamp(16px, 3vw, 32px) var(--gutter) var(--section-y);
    background:
        radial-gradient(ellipse 70% 60% at 50% 35%, rgba(30, 53, 112, 0.55), transparent 70%),
        var(--c-bg);
    /* text laid over the picture keeps the night inks in every theme */
    --c-text: var(--cire);
    --c-text-2: var(--pierre);
    --c-accent-text: var(--or);
}

.cn-ouverture__arche {
    position: relative;
    width: 100%;
    max-width: 560px;
    /* mobile: tall enough to fill the frame, short enough to keep "Listen" on screen */
    height: 62svh;
    min-height: 380px;
    max-height: 900px;
    background: var(--c-surface);
}

.cn-ouverture__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
}

.cn-ouverture__voile {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--nuit) 0%, rgba(13, 20, 40, 0.6) 26%, transparent 55%);
}

/* The names rest on the base of the arch */
.cn-ouverture__texte {
    position: relative;
    z-index: 1;
    margin-top: clamp(-170px, -18svh, -120px);
    max-width: 640px;
    text-align: center;
}

.cn-ouverture__nom {
    font-size: clamp(1.9rem, 1rem + 4vw, 3.4rem);
    letter-spacing: 0.14em;
    line-height: 1.1;
}

.cn-ouverture__nom:lang(ar) {
    font-family: var(--font-arabe);
    font-size: clamp(2.1rem, 1.2rem + 4vw, 3.6rem);
    letter-spacing: 0;
    line-height: 1.3;
}

/* The second name, Latin or Arabic, at the same visual weight (never a subtitle) */
.cn-ouverture__nom-second {
    font-family: var(--font-titre);
    font-size: clamp(1.6rem, 1rem + 3vw, 2.6rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-text);
    margin-top: 6px;
}

.cn-ouverture__nom-second:lang(ar) {
    font-family: var(--font-arabe);
    font-size: clamp(2rem, 1.2rem + 4vw, 3.4rem);
    letter-spacing: 0;
    line-height: 1.3;
}

.cn-ouverture__tagline {
    font-style: italic;
    font-size: var(--fs-md);
    color: var(--c-text);
    margin: 18px auto 28px;
    max-width: 30rem;
}

.cn-ouverture__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* Desktop: the arch fills the height of the screen, the names stand beside it */
@media (min-width: 900px) {
    .cn-ouverture {
        grid-template-columns: auto minmax(0, 34rem);
        justify-content: center;
        align-items: center;
        column-gap: clamp(40px, 6vw, 96px);
        padding-bottom: clamp(16px, 3vw, 32px);
    }

    .cn-ouverture__arche {
        height: calc(100svh - 58px - var(--fl-player-h) - 2 * clamp(16px, 3vw, 32px));
        width: auto;
        aspect-ratio: 5 / 7;
        max-width: none;
    }

    .cn-ouverture__voile {
        background: linear-gradient(to top, rgba(13, 20, 40, 0.55) 0%, transparent 35%);
    }

    .cn-ouverture__texte {
        margin-top: 0;
        text-align: start;
    }

    .cn-ouverture__tagline {
        margin-inline: 0;
    }

    /* the Arabic name aligns with the page, not with its own direction */
    :root:not([dir="rtl"]) .cn-ouverture__nom-second { text-align: left; }
    [dir="rtl"] .cn-ouverture__nom-second { text-align: right; }

    .cn-ouverture__actions {
        justify-content: flex-start;
    }
}

/* ==========================================================================
   2. LISTEN — the progress is a ray of light rising from the ground
   ========================================================================== */
.cn-ecoute {
    text-align: center;
}

.cn-ecoute__corps {
    display: grid;
    grid-template-columns: 1px minmax(0, 30rem);
    justify-content: center;
    gap: clamp(24px, 5vw, 56px);
    margin-top: 40px;
}

.cn-ecoute__rai {
    position: relative;
    width: 1px;
    min-height: 200px;
    background: var(--c-line-soft);
}

.cn-ecoute__liste {
    align-self: center;
}

.cn-ecoute__rai-niveau {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--or), rgba(201, 165, 94, 0.15));
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 250ms linear;   /* follows timeupdate, not a designed motion */
}

.cn-ecoute__liste {
    list-style: none;
    text-align: start;
    border-top: 1px solid var(--c-line-soft);
}

.cn-ecoute__liste li {
    border-bottom: 1px solid var(--c-line-soft);
}

.cn-ecoute__titre {
    width: 100%;
    display: grid;
    grid-template-columns: 3rem 1fr auto;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 12px 4px;
    background: none;
    border: 0;
    color: var(--c-text);
    font: inherit;
    text-align: inherit;
    cursor: pointer;
    transition: color var(--dur-1) var(--ease);
}

.cn-ecoute__num {
    font-family: var(--font-titre);
    font-size: 14px;
    letter-spacing: 0.12em;
    color: var(--c-accent-text);
}

.cn-ecoute__nom {
    font-family: var(--font-titre);
    font-size: var(--fs-md);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.cn-ecoute__nom:lang(ar),
.cn-ecoute__nom[dir="rtl"] {
    letter-spacing: 0;
}

.cn-ecoute__etat {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px var(--c-line);
    color: var(--c-accent-text);
    transition: box-shadow var(--dur-1) var(--ease);
}

.cn-ecoute__etat .cn-icon--pause,
.cn-ecoute__titre[aria-pressed="true"] .cn-icon--play {
    display: none;
}

.cn-ecoute__titre[aria-pressed="true"] .cn-icon--pause {
    display: inline;
}

.cn-ecoute__titre:hover .cn-ecoute__etat,
.cn-ecoute__titre:focus-visible .cn-ecoute__etat,
.cn-ecoute__titre.is-current .cn-ecoute__etat {
    box-shadow: inset 0 0 0 1px var(--c-accent);
}

.cn-ecoute__titre.is-current .cn-ecoute__nom {
    color: var(--c-accent-text);
}

.cn-ecoute__plateformes {
    justify-content: center;
    margin-top: 40px;
}

/* ==========================================================================
   3. SHORT BIOGRAPHY — the portrait stays, the traditions pass by
   ========================================================================== */
.cn-recit {
    display: grid;
    gap: clamp(32px, 6vw, 96px);
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--section-y) var(--gutter);
}

.cn-recit__portrait .cn-arch {
    max-width: 420px;
    margin: 0 auto;
}

.cn-recit__portrait img {
    width: 100%;
    aspect-ratio: 3 / 4;
}

.cn-recit__intro {
    font-size: var(--fs-md);
    color: var(--c-text-2);
    max-width: var(--measure);
}

.cn-recit__label {
    margin-top: 48px;
    font-family: var(--font-titre);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--c-accent-text);
}

.cn-recit__etapes {
    list-style: none;
    margin: 16px 0 40px;
    border-inline-start: 1px solid var(--c-line);
}

.cn-recit__etape {
    position: relative;
    padding: 28px 0 28px clamp(24px, 4vw, 48px);
    padding-inline: clamp(24px, 4vw, 48px) 0;
}

/* a short ray marks each step on the vertical line */
.cn-recit__etape::before {
    content: '';
    position: absolute;
    top: 34px;
    inset-inline-start: -1px;
    width: 1px;
    height: 48px;
    background: var(--rai);
}

.cn-recit__etape h3 {
    font-size: var(--fs-lg);
    margin: 6px 0 10px;
}

.cn-recit__etape p {
    color: var(--c-text-2);
    max-width: var(--measure);
}

/* Desktop: the portrait is pinned while the three traditions scroll past */
@media (min-width: 900px) {
    .cn-recit {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        align-items: start;
    }

    .cn-recit__portrait {
        position: sticky;
        top: calc(58px + 40px);
    }

    .cn-recit__etape {
        min-height: 38vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* ==========================================================================
   4. UPCOMING RECITALS
   ========================================================================== */
.cn-recitals__liste {
    list-style: none;
    margin-top: 32px;
    border-top: 1px solid var(--c-line-soft);
}

.cn-recital {
    position: relative;
    display: grid;
    grid-template-columns: 5.25rem minmax(0, 1fr);
    gap: 8px 16px;
    padding: 28px 0;
    border-bottom: 1px solid var(--c-line-soft);
}

.cn-recital__date {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.cn-recital__jour {
    font-family: var(--font-titre);
    font-size: 3rem;
    color: var(--c-text);
}

.cn-recital__mois {
    margin-top: 8px;
    font-family: var(--font-titre);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-accent-text);
}

.cn-recital__titre {
    font-size: var(--fs-lg);
    line-height: 1.25;
}

.cn-recital__lieu {
    margin-top: 6px;
    color: var(--c-text-2);
}

/* Holy Week: the rare cinabre, as a rule beside the date and a label, never as text colour */
.cn-recital--semaine-sainte::before {
    content: '';
    position: absolute;
    top: 28px;
    bottom: 28px;
    inset-inline-start: -16px;
    width: 2px;
    background: var(--c-rare);
}

.cn-recital__temps {
    display: inline-block;
    margin-bottom: 8px;
    padding: 2px 10px;
    background: var(--c-rare);
    color: var(--c-on-rare);
    font-family: var(--font-titre);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    border-radius: var(--radius-s);
}

.cn-recital__actions {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-top: 12px;
}

.cn-recital__lien,
.cn-recitals__tous {
    font-family: var(--font-titre);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--c-accent-text);
    border-bottom: 1px solid var(--c-line);
    padding-bottom: 2px;
    transition: border-color var(--dur-1) var(--ease);
}

.cn-recital__lien:hover,
.cn-recitals__tous:hover {
    border-bottom-color: currentColor;
}

.cn-recitals__vide {
    margin-top: 32px;
    font-style: italic;
    color: var(--c-text-2);
}

.cn-recitals__tous {
    display: inline-flex;
    gap: 8px;
    margin-top: 32px;
}

@media (min-width: 900px) {
    .cn-recital {
        grid-template-columns: 8rem minmax(0, 1fr) auto;
        align-items: center;
    }

    .cn-recital__actions {
        grid-column: 3;
        margin-top: 0;
        justify-content: flex-end;
    }
}

/* ==========================================================================
   5. WORDS FROM THE AUDIENCE — original and translation share one cell
   ========================================================================== */
.cn-paroles .fl-testimonials {
    margin-top: 32px;
}

/* both texts sit in the same grid area: the card never jumps */
.cn-parole__textes {
    display: grid;
}

.cn-parole__textes > * {
    grid-area: 1 / 1;
    transition: opacity var(--dur-1) var(--ease), visibility var(--dur-1) var(--ease);
}

.cn-parole__traduction {
    opacity: 0;
    visibility: hidden;
}

.cn-parole__etiquette {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-titre);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--c-accent-text);
}

.cn-parole__etiquette:lang(ar),
:lang(ar) > .cn-parole__etiquette {
    letter-spacing: 0;
}

/* translations are not quotes of the author: no quote marks around them */
.cn-parole__traduction .fl-testimonial__text {
    font-style: normal;
}

.cn-parole.is-traduite .cn-parole__original {
    opacity: 0;
    visibility: hidden;
}

.cn-parole.is-traduite .cn-parole__traduction {
    opacity: 1;
    visibility: visible;
}

/* hover reveals the translation on pointer devices; tap uses the button */
@media (hover: hover) and (pointer: fine) {
    .cn-parole--traduisible:hover .cn-parole__original {
        opacity: 0;
        visibility: hidden;
    }

    .cn-parole--traduisible:hover .cn-parole__traduction {
        opacity: 1;
        visibility: visible;
    }
}

.cn-parole__bouton {
    align-self: flex-start;
    margin-top: 10px;
    min-height: 32px;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--c-line);
    font-family: var(--font-titre);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--c-accent-text);
    cursor: pointer;
}

.cn-parole__bouton:hover {
    border-bottom-color: currentColor;
}

/* ==========================================================================
   6. INVITE CHRISTIANE
   ========================================================================== */
.cn-inviter {
    border-top: 1px solid var(--c-line-soft);
}

.cn-inviter__form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 0 20px;
    margin-top: 40px;
}

.cn-inviter__form select.fl-form__input {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--c-accent) 50%), linear-gradient(135deg, var(--c-accent) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-inline-end: 36px;
}

[dir="rtl"] .cn-inviter__form select.fl-form__input {
    background-position: 13px 50%, 18px 50%;
}

.cn-inviter__form input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(78%) sepia(30%) saturate(500%) hue-rotate(5deg);
}

.cn-inviter__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 32px;
    margin-top: 8px;
}

.cn-inviter__epk {
    display: inline-flex;
    gap: 8px;
    font-family: var(--font-titre);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--c-accent-text);
    border-bottom: 1px solid var(--c-line);
    padding-bottom: 2px;
}

.cn-inviter__epk:hover {
    border-bottom-color: currentColor;
}