/* Page « À propos » v2. Tout est préfixé ap- et s'appuie sur les variables de home-v2.css. */

.ap-page {font-family: var(--v2-font-sans); color: var(--v2-fg);}
.ap-wrap {max-width: 80rem; margin-inline: auto; padding-inline: 1.5rem;}
.ap-title {font-family: var(--v2-font-display); font-weight: 400; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.05; color: var(--v2-primary); margin: .6rem 0 0;}
.ap-title em {font-style: italic; color: var(--v2-accent-strong);}

/* ---------- En-tête compact (comme la liste des linogravures) ---------- */
.ap-hero {background: var(--v2-primary); color: var(--v2-primary-fg); padding: 72px 0 0; overflow: hidden;}
.ap-hero-inner {padding-block: 2.25rem 2.75rem;}
.ap-hero .v2-eyebrow {color: var(--v2-accent);}
.ap-hero h1 {font-family: var(--v2-font-display); font-weight: 400; font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.05; letter-spacing: -.01em; margin: .6rem 0 0; color: inherit;}
.ap-hero h1 em {font-style: italic; color: var(--v2-accent);}
.ap-sub {margin: .9rem 0 0; font-size: 1.05rem; opacity: .85;}

/* ---------- Présentation ---------- */
.ap-intro {display: grid; align-items: center; gap: 4rem; grid-template-columns: .9fr 1.1fr; padding-block: 5rem;}
.ap-photos {position: relative; width: 100%; max-width: 27rem; margin-inline: auto;}
.ap-photos {--rot: -2deg; --frot: 3deg;}
.ap-photos--alt {--rot: 2deg; --frot: -3deg;}
.ap-frame {position: absolute; inset: -1rem; transform: rotate(var(--frot)); border-radius: 1.75rem; background: var(--v2-accent); transition: transform .5s ease;}
.ap-portrait {position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; border-radius: 1.5rem; transform: perspective(900px) rotate(var(--rot)) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); box-shadow: 0 25px 50px -12px rgba(0,0,0,.3); transition: transform .5s ease;}
.ap-photos.is-tilting .ap-portrait {transition: transform .12s linear;}
@media (hover: hover) {
    .ap-photos:hover .ap-portrait {transform: perspective(900px) rotate(calc(var(--rot) * .5)) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) scale(1.015);}
    .ap-photos:hover .ap-frame {transform: rotate(calc(var(--frot) * 1.5));}
}
.ap-text .v2-eyebrow {color: var(--v2-accent-strong);}
.ap-text p {margin: 1.1rem 0 0; font-size: 1.05rem; line-height: 1.75; color: var(--v2-fg);}
.ap-text .ap-lead {font-family: var(--v2-font-display); font-size: clamp(1.3rem, 2.2vw, 1.65rem); line-height: 1.45; color: var(--v2-primary); margin-top: 1.4rem;}
.ap-cta {margin-top: 2rem;}

/* ---------- Repères : la fleur du logo sert de pastille ---------- */
.ap-reperes {position: relative; overflow: hidden; background: var(--v2-paper); padding-block: 5.5rem 4.5rem;}
.ap-deco {position: absolute; z-index: 0; color: var(--v2-accent); opacity: .22; transform: rotate(var(--r, 0deg)); pointer-events: none;}
.ap-deco-1 {width: 15rem; height: 15rem; left: -4rem; top: -4.5rem;}
.ap-deco-2 {width: 11rem; height: 11rem; right: -2.5rem; bottom: -3rem; color: var(--v2-primary); opacity: .1;}
.ap-reperes-grille {position: relative; z-index: 1; display: grid; gap: 3.25rem 1.5rem; grid-template-columns: repeat(3, 1fr);}
.ap-repere {position: relative; background: #fff; border-radius: 1.25rem; padding: 3.5rem 2rem 2rem; text-align: center; transition: transform .3s ease, box-shadow .3s ease;}
.ap-badge {position: absolute; left: 50%; top: 0; width: 5rem; height: 5rem; margin: -2.5rem 0 0 -2.5rem; display: grid; place-items: center; color: var(--v2-primary);}
.ap-badge-fleur {position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .8s cubic-bezier(.3,.7,.2,1), color .3s;}
.ap-badge > svg:not(.ap-badge-fleur) {position: relative; width: 1.9rem; height: 1.9rem; color: #fff; transition: transform .4s ease;}
.ap-repere h3 {font-family: var(--v2-font-display); font-weight: 600; font-size: 1.4rem; margin: 0; color: var(--v2-primary);}
.ap-repere p {margin: .6rem 0 0; color: var(--v2-muted); line-height: 1.65;}
@media (hover: hover) {
    .ap-repere:hover {transform: translateY(-6px); box-shadow: 0 18px 30px -16px rgba(20,18,59,.3);}
    .ap-repere:hover .ap-badge-fleur {transform: rotate(60deg) scale(1.08); color: var(--v2-accent-strong);}
    .ap-repere:hover .ap-badge > svg:not(.ap-badge-fleur) {transform: scale(1.12) rotate(-6deg);}
}

/* ---------- De la plaque à l'estampe ---------- */
.ap-process {display: grid; align-items: center; gap: 4rem; grid-template-columns: 1fr 1fr; padding-block: 5rem;}
.ap-process-photo img {display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1.5rem;}
.ap-process .v2-eyebrow {color: var(--v2-accent-strong);}
.ap-etapes {list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.75rem;}
.ap-etapes li {position: relative; display: grid; grid-template-columns: 2.75rem 1fr; column-gap: 1.1rem; align-items: center;}
.ap-etape-n {grid-row: 1; grid-column: 1; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--v2-primary); color: #fff; font-family: var(--v2-font-display); font-size: 1.2rem; line-height: 1; transition: background-color .3s ease, transform .3s ease;}
.ap-etapes h3 {grid-row: 1; grid-column: 2; margin: 0; font-family: var(--v2-font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.2; color: var(--v2-fg);}
.ap-etapes p {grid-row: 2; grid-column: 2; margin: .35rem 0 0; color: var(--v2-muted); line-height: 1.65;}
/* fil qui relie les étapes */
.ap-etapes li:not(:last-child)::before {content: ""; position: absolute; left: calc(1.375rem - 1px); top: 2.75rem; bottom: -1.75rem; width: 2px; background: rgba(29,0,176,.18); transform-origin: top; transition: transform .6s ease .5s;}
.ap-etapes li:nth-child(2)::before {transition-delay: .9s;}
.js .ap-process-texte:not(.is-visible) .ap-etapes li::before {transform: scaleY(0);}
.ap-etapes li:hover .ap-etape-n {background: var(--v2-accent-strong); transform: scale(1.1) rotate(-6deg);}
.ap-process-photo {overflow: hidden; border-radius: 1.5rem;}
.ap-process-photo img {transition: transform .8s ease;}
@media (hover: hover) {.ap-process-photo:hover img {transform: scale(1.05) rotate(.6deg);}}

/* ---------- En exposition ---------- */
.ap-expo {background: var(--v2-paper); padding-block: 5rem;}
.ap-expo .v2-eyebrow {color: var(--v2-accent-strong);}
.ap-expo-grille {display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem; padding-bottom: 2.5rem; align-items: start;}
.ap-expo figure {margin: 0; overflow: hidden; border-radius: 1.5rem; background: #fff; transition: transform .5s ease, box-shadow .5s ease;}
.ap-expo figure:nth-child(2) {margin-top: 2.5rem;}
.ap-expo img {display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .7s ease;}
@media (hover: hover) {
    .ap-expo figure:hover {transform: translateY(-6px) rotate(-.8deg); box-shadow: 0 22px 34px -18px rgba(20,18,59,.35);}
    .ap-expo figure:nth-child(2):hover {transform: translateY(-6px) rotate(.8deg);}
    .ap-expo figure:hover img {transform: scale(1.05);}
}

/* ---------- Citation ---------- */
.ap-citation {background: var(--v2-primary); color: var(--v2-primary-fg); padding-block: 5rem;}
.ap-citation blockquote {margin: 0 auto; max-width: 48rem; padding: 0; border: 0; background: none; text-align: center; font-family: var(--v2-font-display); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.4; color: inherit;}
.js .ap-mot {display: inline-block; opacity: 0; transform: translateY(.5em); transition: opacity .5s ease calc(var(--i) * .06s), transform .5s ease calc(var(--i) * .06s);}
.js .ap-citation blockquote.is-visible .ap-mot {opacity: 1; transform: none;}
.ap-citation blockquote::before {content: "\201C"; display: block; font-size: 4rem; line-height: .6; color: var(--v2-accent); margin-bottom: .6rem;}

/* ---------- Contact ---------- */
.ap-contact {display: grid; align-items: center; gap: 4rem; grid-template-columns: 1.1fr .9fr; padding-block: 5rem;}
.ap-contact .v2-eyebrow {color: var(--v2-accent-strong);}
.ap-contact-texte p {margin: 1.1rem 0 0; font-size: 1.05rem; line-height: 1.7;}
.ap-mail {display: inline-flex; align-items: center; gap: .75rem; margin-top: 1.5rem; font-family: var(--v2-font-display); font-size: clamp(1.15rem, 2.2vw, 1.55rem); color: var(--v2-primary); text-decoration: none; padding-bottom: .15rem; word-break: break-all; background: linear-gradient(var(--v2-accent-strong), var(--v2-accent-strong)) 0 100% / 100% 2px no-repeat; transition: color .2s, background-size .5s ease;}
.ap-mail svg {flex-shrink: 0; width: 1.5rem; height: 1.5rem; transition: transform .4s ease;}
.ap-mail:hover {color: var(--v2-accent-strong);}
.ap-mail:hover svg {transform: translateY(-2px) rotate(-8deg);}
.ap-confetti {position: fixed; z-index: 9999; width: 18px; height: 18px; color: var(--v2-accent-strong); pointer-events: none;}
.ap-actions {display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem;}
.ap-copier, .ap-lien {appearance: none; display: inline-flex; align-items: center; gap: .55rem; border: 1px solid rgba(29,0,176,.25); background: #fff; color: var(--v2-primary); border-radius: 999px; padding: .7rem 1.2rem; font: inherit; font-size: .9rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s;}
.ap-copier svg, .ap-lien svg {width: 1.1rem; height: 1.1rem;}
.ap-copier:hover, .ap-lien:hover {transform: translateY(-2px); border-color: var(--v2-primary);}
.ap-copier:active, .ap-lien:active {transform: scale(.97);}
.ap-copier svg {transition: transform .3s ease;}
.ap-copier:hover svg {transform: rotate(-10deg) scale(1.1);}
.ap-copier.is-ok {background: var(--v2-primary); border-color: var(--v2-primary); color: #fff;}
.ap-copier:focus-visible, .ap-lien:focus-visible, .ap-mail:focus-visible {outline: 3px solid var(--v2-accent-strong); outline-offset: 3px;}
.ap-contact-photo .ap-photos {max-width: 24rem;}

/* ---------- Apparition au défilement ---------- */
.js .ap-reveal {opacity: 0; transform: translateY(18px); transition: opacity .6s ease var(--d, 0s), transform .6s ease var(--d, 0s);}
.js .ap-reveal.is-visible {opacity: 1; transform: none;}
@media (prefers-reduced-motion: reduce) {
    .js .ap-reveal {opacity: 1; transform: none; transition: none;}
    .ap-frame, .ap-portrait, .ap-repere, .ap-etape-n, .ap-expo img, .ap-expo figure, .ap-badge-fleur, .ap-process-photo img {transition: none;}
    .ap-etapes li::before {transition: none;}
}

/* ---------- Tablette et mobile ---------- */
@media (max-width: 999px) {
    .ap-intro, .ap-process, .ap-contact {grid-template-columns: 1fr; gap: 3rem; padding-block: 3.5rem;}
    .ap-reperes-grille {grid-template-columns: 1fr;}
    .ap-reperes {padding-block: 4.5rem 3.5rem;}
    .ap-process-photo {order: -1;}
    .ap-contact-photo {order: -1;}
    .ap-expo, .ap-citation {padding-block: 3.5rem;}
}
@media (max-width: 640px) {
    .ap-expo-grille {grid-template-columns: 1fr; padding-bottom: 0;}
    .ap-expo figure:nth-child(2) {margin-top: 0;}
}
@media (max-width: 575px) {
    .ap-hero-inner {padding-block: 1.75rem 2.25rem;}
    .ap-repere {padding: 3.25rem 1.5rem 1.5rem;}
}