/* ============================================================ */
/* PAGE À PROPOS — thème pierres (beige abricot)                */
/* L'histoire du lieu : prieuré, Provence, cadre, équipe.       */
/* Réutilise au maximum les composants partagés de styles.css   */
/* (.s, .s-title, .s-body, .btn-line, .m-head, .gal-marquee…).  */
/* Chemins d'assets depuis ce fichier (css/) : ../assets/...    */
/* ============================================================ */

/* ===== HERO ÉDITORIAL — champ de lavande animé (vent au curseur) ===== */
/* Contenu centré dans la zone LIBRE au-dessus de la lavande : align-items:center + un
   padding-bottom généreux qui réserve la bande de lavande → le centre optique du texte
   remonte dans le haut du hero (sinon, centré dans tout le hero, il paraissait trop bas,
   la moitié basse étant occupée par le champ de lavande). */
.ap-hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:clamp(84px,10vh,116px) 0 clamp(190px,29vh,320px);overflow:visible}
.ap-hero .wrap{position:relative;z-index:3;width:100%}
.ap-hero-copy{max-width:none}
.ap-hero h1{font-family:'Londrina Solid',serif;font-weight:400;font-size:clamp(42px,6.4vw,104px);line-height:.96;letter-spacing:-.005em;margin:0 0 30px;max-width:17ch}
.ap-hero h1 .h1-main{display:block}
.ap-hero h1 .h1-main .brand{display:inline;white-space:nowrap}
.ap-hero .ap-lead{font-family:'Parkinsans',sans-serif;font-weight:300;font-size:clamp(20px,1.9vw,31px);line-height:1.42;max-width:48ch;margin:0 0 22px}
.ap-hero .ap-sub{font-family:'Parkinsans',sans-serif;font-weight:300;font-size:clamp(15px,1.1vw,18px);line-height:1.7;max-width:76ch;margin:0;opacity:.92}
.ap-hero-ctas{display:flex;flex-wrap:wrap;gap:14px 34px;margin-top:34px;align-items:center}
.ap-hero-ctas .btn-line{margin-top:0}

/* champ de lavande : instances de lavande-brin.svg animées par le JS (rAF).
   Bandeau bas + masque dégradé : les pointes se fondent dans le beige vers le haut. */
.ap-field{position:absolute;left:0;right:0;bottom:-92px;height:54%;z-index:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 24%,#000 54%);
          mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 24%,#000 54%)}
.ap-field svg{width:100%;height:100%;display:block}
/* voile beige en haut : sécurise la lisibilité du texte au-dessus du champ */
.ap-hero-veil{position:absolute;inset:0 0 auto 0;height:58%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 24%,color-mix(in srgb,var(--bg) 42%,transparent) 56%,transparent 100%)}
/* intro douce du texte, sans dépendre de GSAP */
.ap-hero-copy > *{opacity:0;animation:apHeroIn .9s cubic-bezier(.2,.7,.2,1) forwards}
.ap-hero-copy h1{animation-delay:.05s}
.ap-hero-copy .ap-lead{animation-delay:.18s}
.ap-hero-copy .ap-sub{animation-delay:.30s}
.ap-hero-copy .ap-hero-ctas{animation-delay:.42s}
@keyframes apHeroIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

@media(max-width:880px){
  .ap-hero{min-height:auto;padding-top:clamp(18px,4vh,38px);padding-bottom:clamp(250px,46vh,380px)}
  .ap-hero h1,.ap-hero .ap-lead,.ap-hero .ap-sub{max-width:none}
  .ap-field{height:52%;bottom:0;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 18%,#000 44%);
            mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 18%,#000 44%)}
}
@media(prefers-reduced-motion:reduce){.ap-hero-copy > *{opacity:1;animation:none}}

/* ===== BANDEAU IMAGE LARGE ===== */
.ap-banner{padding:0 0 clamp(60px,9vh,110px);margin-top:clamp(40px,7vh,96px)}
.ap-banner-media{position:relative;margin:0;border-radius:32px;overflow:hidden;aspect-ratio:21/9;box-shadow:0 44px 100px -54px rgba(60,40,10,.6)}
.ap-banner-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.6,.2,1)}
.ap-banner-media:hover img{transform:scale(1.03)}
@media(max-width:760px){.ap-banner-media{aspect-ratio:16/11;border-radius:24px}}

/* ===== L'ÉQUIPE — 2 cartes-citations Leny / Dina ===== */
/* Présentation soignée : grosse guillemet décorative (prise de parole claire), photo ronde
   qui DÉBORDE en haut de la carte, animation au survol + à l'apparition. La photo est un
   placeholder monogramme tant que les vrais portraits ne sont pas fournis (client / Notion) :
   pour basculer en vraie photo, remplacer le <span class="ap-mono"> par <img> dans .ap-member-photo. */
.ap-team{padding-top:clamp(40px,6vh,70px)}
.ap-team-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,46px);margin-top:clamp(50px,7vh,84px)}
.ap-member{position:relative;overflow:visible;margin-top:42px;
  background:rgba(255,255,255,.52);border-radius:28px;
  padding:clamp(74px,5.4vw,96px) clamp(28px,3.2vw,46px) clamp(32px,3.4vw,48px);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),background .45s ease,box-shadow .45s ease}
.ap-member:hover{transform:translateY(-6px);background:rgba(255,255,255,.78);box-shadow:0 38px 84px -50px rgba(60,40,10,.55)}

/* Photo ronde qui déborde en haut-gauche */
.ap-member-photo{position:absolute;top:-42px;left:clamp(26px,3vw,42px);z-index:2;
  width:clamp(96px,7.4vw,124px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(150deg,#cdb6ec 0%,#9a6fd0 52%,#7a4fb6 100%);
  box-shadow:0 20px 44px -18px rgba(60,40,10,.6);
  transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.ap-member:hover .ap-member-photo{transform:translateY(-4px) rotate(-5deg) scale(1.05)}
.ap-member-photo img{width:100%;height:100%;object-fit:cover}
/* avatar de substitution (silhouette) tant que le portrait réel n'est pas fourni ;
   pour une vraie photo : remplacer le src par l'image (le object-fit:cover ci-dessus s'applique) */
.ap-member-avatar{opacity:.92;transform:translateY(4px) scale(1.04)}

/* Grosse guillemet décorative : on comprend tout de suite que la personne parle */
.ap-quote-mark{position:absolute;top:clamp(8px,1.4vw,20px);right:clamp(18px,2.4vw,34px);z-index:1;
  font-family:'Londrina Solid',serif;font-size:clamp(96px,9vw,150px);line-height:.74;
  color:var(--accent);opacity:.24;pointer-events:none;user-select:none;
  transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .45s ease}
.ap-member:hover .ap-quote-mark{transform:translateY(-3px) scale(1.06);opacity:.32}

.ap-member-name{font-family:'Londrina Solid',serif;font-weight:400;font-size:clamp(30px,3.4vw,46px);line-height:1;margin:0 0 16px;position:relative;z-index:2}
.ap-quote{margin:0;position:relative;z-index:2}
.ap-quote p{font-size:clamp(15px,1.05vw,17px);line-height:1.72;margin:0}
.ap-quote p + p{margin-top:14px}
@media(max-width:880px){
  .ap-team-grid{grid-template-columns:1fr;gap:56px}
  .ap-member{margin-top:42px}
}

/* ===== L'HISTOIRE DU PRIEURÉ — illustration d'arche (grande, derrière) + photo d'archive (devant) ===== */
.ap-history-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(40px,5vw,84px);align-items:center}
.ap-history-copy .btn-line{margin-top:30px}
/* conteneur de superposition : le sommet de l'arche émerge au-dessus de la photo */
.ap-history-media{position:relative;margin:0;display:block}
/* grande illustration d'arche en arrière-plan : la voûte dépasse en haut, les jambages
   passent DERRIÈRE la photo et sont « mangés » par elle */
.ap-history-arch{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:0;
  width:clamp(184px,46%,254px);height:auto;pointer-events:none;
  filter:brightness(0) saturate(100%) invert(18%) sepia(34%) saturate(900%) hue-rotate(348deg) brightness(92%);opacity:.9}
/* photo d'archive devant, décalée vers le bas pour révéler la quasi-totalité de l'arche
   (voûte + ouverture + jambages) ; seuls les bas de jambages (les « pieds ») restent derrière.
   Léger basculement « tirage d'époque » (redressé au survol). */
.ap-history-photo{position:relative;z-index:1;margin-top:clamp(150px,21vw,286px);
  border-radius:20px;overflow:hidden;box-shadow:0 42px 92px -52px rgba(60,40,10,.62);
  transform:rotate(-1.5deg);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease}
.ap-history-photo img{display:block;width:100%;height:auto;transition:transform 1.5s cubic-bezier(.2,.6,.2,1)}
.ap-history-photo:hover{transform:rotate(0deg);box-shadow:0 48px 104px -54px rgba(60,40,10,.66)}
.ap-history-photo:hover img{transform:scale(1.04)}
.ap-history-photo figcaption{position:absolute;left:0;right:0;bottom:0;
  font-family:'Parkinsans',sans-serif;font-weight:400;font-size:13px;letter-spacing:.01em;color:#fff;
  padding:34px 18px 14px;background:linear-gradient(0deg,rgba(20,12,4,.62),transparent)}
@media(max-width:880px){
  .ap-history-grid{grid-template-columns:1fr;gap:32px}
  .ap-history-media{order:-1}
  .ap-history-arch{width:clamp(152px,42vw,200px)}
  .ap-history-photo{margin-top:clamp(150px,50vw,210px)}
}

/* ===== GALERIE MARQUEE — réutilise .s-galerie/.gal-* ; on centre le head ===== */
.ap-galerie .s-head{max-width:64ch;margin:0 auto 50px;text-align:center}
.ap-galerie .s-head .s-body{margin:18px auto 0}
.ap-galerie .s-title .brand{display:inline}

/* ===== OUTRO — identique à la home / Mariage ===== */
/* L'outro reprend le traitement par défaut de styles.css : photo de fond
   couple3.jpg (.outro-bg + parallaxe via site.js) + overlay bleu nuit
   (.outro::after), footer DANS .outro (cartes translucides), texte crème
   via .m-final. Rien à surcharger ici. */