/* The Tiff module's own sheet (ADR-0015), linked by base.html.twig for a tenant with the
   module and by the blocks that draw the markup, never imported by app.js, so nobody else
   downloads it. Dancing Script lives here
   for the same reason Caveat lives in braises.css: it is a module's face, not a theme
   font pair. engraving.css declares the same file for the gravure preview, and a page
   carrying both blocks costs one fetch either way. */
@font-face {
    font-family: 'Dancing Script';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/dancing-script-400-ANssx1z.woff2") format("woff2");
}

/* ---- Shared by the module's five blocks ---- */

.tiff-label {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ap-accent-text);
}

.tiff-heading {
    margin: 0.5rem 0 0;
    font-family: var(--ap-font-display);
    font-weight: 600;
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.tiff-heading b {
    font-weight: 600;
    color: var(--ap-accent-text);
}

/* The house display face is a heavy uppercase (components.css) and this template's is the
   same family in sentence case, so a page mixing the module's sections with shared ones
   reads in two registers. Settled here rather than per block, and unscoped on purpose:
   this sheet is only ever fetched by a site of the tenant that owns it. */
.display-title {
    font-weight: 600;
    letter-spacing: -0.015em;
    text-transform: none;
}

/* The house button is a mono capital, for the same reason and with the same reach as
   the display rule above. Its 0.72rem is sized for tracked capitals and reads small in
   sentence case. Only the two buttons of the opener take the larger size. */
.btn-accent,
.btn-outline-accent {
    --bs-btn-font-size: 0.95rem;
    --bs-btn-padding-y: 0.9rem;
    font-family: var(--ap-font-display);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.btn-accent.btn-sm,
.btn-outline-accent.btn-sm {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.7rem;
    --bs-btn-font-size: 0.9rem;
}

.tiff-cta {
    --bs-btn-padding-x: 1.75rem;
    --bs-btn-padding-y: 0.95rem;
    --bs-btn-font-size: 1rem;
}

/* ---- vitrine ---- */

/* No padding here: .blk--top-* and .blk--bottom-* own a block's vertical rhythm
   (components.css), and a declaration on the section itself loses to them in silence. */
.vitrine {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.vitrine__blush {
    z-index: -2;
    background:
        radial-gradient(45% 45% at 85% 20%, rgba(var(--ap-accent-rgb), 0.16), transparent 70%),
        radial-gradient(40% 40% at 10% 90%, rgba(var(--ap-accent-rgb), 0.1), transparent 70%);
}

.vitrine__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--ap-border);
    border-radius: 999px;
    background: var(--ap-panel);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ap-muted);
}

.vitrine__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ap-accent);
}

.vitrine__title {
    margin: 1.25rem 0 0;
    font-family: var(--ap-font-display);
    font-weight: 600;
    font-size: clamp(2.6rem, 5.6vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.vitrine__accent {
    position: relative;
    display: inline-block;
    color: var(--ap-accent-text);
}

/* Overflowing on purpose: the stroke is a pen mark under the word, not a box around it. */
.vitrine__underline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.35em;
    width: 100%;
    height: 12px;
    overflow: visible;
    stroke: rgba(var(--ap-accent-rgb), 0.45);
}

.vitrine__lead {
    margin: 1.5rem 0 0;
    max-width: 50ch;
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    color: var(--ap-muted);
    text-wrap: pretty;
}

.vitrine__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.25rem;
    margin: 2.25rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ap-border);
}

.vitrine__fact dt {
    font-family: var(--ap-font-display);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1;
}

.vitrine__fact dd {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: var(--ap-faint);
}

.vitrine__collage {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    aspect-ratio: 1 / 1.05;
}

.vitrine__arch,
.vitrine__round,
.vitrine__card {
    position: absolute;
    box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.45);
}

.vitrine__photo,
.vitrine .image-frame {
    display: block;
    height: 100%;
    background: rgba(var(--ap-accent-rgb), 0.12);
}

.vitrine__arch {
    left: 8%;
    top: 0;
    width: 66%;
    height: 82%;
    overflow: hidden;
    border-radius: 200px 200px var(--ap-radius) var(--ap-radius);
}

.vitrine__round {
    right: 0;
    top: 10%;
    width: 38%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 6px solid var(--ap-panel);
    border-radius: 50%;
}

.vitrine__card {
    left: 0;
    bottom: 0;
    width: 44%;
    padding: 10px 10px 12px;
    border-radius: var(--ap-radius);
    background: var(--ap-panel);
    transform: rotate(3deg);
}

.vitrine__card .vitrine__photo,
.vitrine__card .image-frame {
    aspect-ratio: 4 / 3;
    height: auto;
    border-radius: calc(var(--ap-radius) - 6px);
}

.vitrine__caption,
.promesses__note,
.paroles__pin {
    font-family: 'Dancing Script', cursive;
}

.vitrine__caption {
    margin: 8px 0 0;
    text-align: center;
    font-size: 1.15rem;
    color: var(--ap-accent-text);
}

.vitrine__sticker {
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%) rotate(-4deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 22px 12px;
    border-radius: 14px;
    background: var(--ap-accent);
    color: var(--ap-accent-contrast);
}

.vitrine__name {
    font-family: var(--ap-font-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.05;
    white-space: nowrap;
    min-height: 1.05em;
}

/* One span per letter, appended by sticker.js. */
.vitrine__name > span {
    display: inline-block;
    animation: tiff-pop 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.vitrine__technique {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.85;
}

.vitrine__badge {
    position: absolute;
    right: 6%;
    bottom: 14%;
    padding: 8px 14px;
    border: 1px solid var(--ap-border);
    border-radius: 999px;
    background: var(--ap-panel);
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--ap-muted);
    animation: tiff-float 5s ease-in-out infinite;
}

@keyframes tiff-pop {
    0% { opacity: 0; transform: translateY(10px) scale(0.6) rotate(-8deg); }
    60% { opacity: 1; transform: translateY(-2px) scale(1.08) rotate(2deg); }
    100% { opacity: 1; transform: none; }
}

@keyframes tiff-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ---- deroule ---- */

.deroule__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: clamp(1.25rem, 3vw, 2rem);
    margin: clamp(2rem, 4vw, 3rem) 0 0;
}

/* Three washes of the same accent rather than three literal pastels, so the rhythm
   survives a change of hue. */
.deroule__card {
    padding: clamp(1.5rem, 2.5vw, 2rem);
    border-radius: var(--ap-radius);
    background: color-mix(in oklab, var(--ap-accent) 6%, var(--ap-panel));
}

.deroule__card:nth-child(3n + 2) {
    background: color-mix(in oklab, var(--ap-accent) 12%, var(--ap-panel));
}

.deroule__card:nth-child(3n) {
    background: color-mix(in oklab, var(--ap-accent) 18%, var(--ap-panel));
}

.deroule__rank {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ap-panel);
    font-size: 1.3rem;
    color: var(--ap-accent-text);
    box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.4);
}

.deroule__title {
    margin: 1.125rem 0 0;
    font-family: var(--ap-font-display);
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.15;
}

.deroule__body {
    margin: 0.625rem 0 0;
    color: var(--ap-muted);
    text-wrap: pretty;
}

/* ---- promesses ---- */

/* The inverted surface components.css gives cta/ink: accent tokens are measured
   against --ap-bg and carry no guarantee on an ink fill (ADR-0005), so what sits
   on it inherits. */
.promesses__panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    padding: clamp(1.5rem, 3vw, 3rem);
    border-radius: var(--ap-radius);
    background: var(--ap-text);
    color: var(--ap-bg);
}

.promesses__panel .tiff-label,
.promesses__panel .tiff-heading b {
    /* Mixed toward the panel's own foreground rather than left at the accent, which
       is only measured against --ap-bg. */
    color: color-mix(in oklab, var(--ap-accent) 42%, var(--ap-bg));
}

.promesses__note {
    margin: 1rem 0 0;
    font-size: 1.5rem;
    line-height: 1.2;
    color: color-mix(in oklab, var(--ap-accent) 42%, var(--ap-bg));
}

.promesses__list {
    display: grid;
    gap: 12px;
}

.promesses__row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: calc(var(--ap-radius) - 4px);
    background: rgba(var(--ap-bg-rgb), 0.07);
}

.promesses__rank {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ap-accent);
    color: var(--ap-accent-contrast);
    font-family: var(--ap-font-display);
    font-weight: 700;
}

.promesses__title {
    display: block;
    font-family: var(--ap-font-display);
    font-weight: 600;
    font-size: 1.1rem;
}

.promesses__text {
    display: block;
    margin-top: 2px;
    font-size: 0.92rem;
    opacity: 0.85;
}

/* ---- paroles ---- */

.paroles__carousel {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* One grid cell for every slide (the track is d-grid), so the band keeps the tallest avis's
   height. display:grid outranks Bootstrap's display:none, so visibility hides a slide, and
   only a slide in flight transitions: otherwise the turn plays both avis over each other. */
.paroles__carousel .carousel-item {
    grid-area: 1 / 1;
    display: grid;
    align-content: center;
    margin-right: 0;
    visibility: hidden;
    transition-property: none;
}

.paroles__carousel .carousel-item-start,
.paroles__carousel .carousel-item-end {
    transition-property: transform;
}

/* The slide at rest, and the two a turn has in flight. */
.paroles__carousel .carousel-item.active,
.paroles__carousel .carousel-item-next,
.paroles__carousel .carousel-item-prev {
    visibility: visible;
}

.paroles__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

.paroles__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.paroles__step {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--ap-border);
    border-radius: 50%;
    background: var(--ap-panel);
    color: var(--ap-text);
    font-size: 1rem;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.paroles__step:hover,
.paroles__step:focus-visible {
    border-color: var(--ap-accent);
    color: var(--ap-accent-text);
}

/* Matched on the attribute Bootstrap styles them by, not on the tag: its own
   .carousel-indicators [data-bs-target] otherwise outranks a tag selector and the
   dots stay white on white at half opacity. */
.paroles__dots [data-bs-target] {
    width: 9px;
    height: 9px;
    margin-inline: 0.25rem;
    border: 0;
    border-radius: 50%;
    background-color: var(--ap-faint);
    opacity: 0.4;
}

.paroles__dots .active {
    background-color: var(--ap-accent);
    opacity: 1;
}

.paroles__frame {
    position: relative;
    width: 100%;
    max-width: 380px;
    margin-inline: auto;
}

.paroles__photo,
.paroles__frame .image-frame {
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: 190px 190px var(--ap-radius) var(--ap-radius);
    background: rgba(var(--ap-accent-rgb), 0.12);
}

.paroles__pin {
    position: absolute;
    right: -8px;
    bottom: 22px;
    padding: 10px 16px;
    border: 1px solid var(--ap-border);
    border-radius: 999px;
    background: var(--ap-panel);
    font-size: 1.2rem;
    color: var(--ap-accent-text);
    transform: rotate(-4deg);
}

.paroles__quote {
    margin: 0;
    min-width: 0;
}

.paroles__text {
    margin: 1rem 0 0;
    font-family: var(--ap-font-display);
    font-weight: 500;
    font-size: clamp(1.4rem, 2.6vw, 2.1rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-wrap: pretty;
}

.paroles__author {
    font-weight: 800;
}

.paroles__detail {
    font-size: 0.9rem;
    color: var(--ap-muted);
}

@media (prefers-reduced-motion: reduce) {
    .vitrine__badge,
    .vitrine__name > span {
        animation: none;
    }
}