/* ============================================
   PAGE À PROPOS
   ============================================ */

/* overflow:clip (et non hidden) : un ancêtre en overflow:hidden casserait le
   position:sticky de .ap-farm2-pin. */
.stage-wrap--clip {
  overflow: clip;
}

/* ================================================
   HERO — photo plein cadre fondue vers le blanc à gauche, titre dans le fondu
   ================================================ */
.ap-hero-full{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.ap-hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--white); }
/* Photo surdimensionnée (240vh), le surplus est absorbé par l'overflow du
   parent. Fondu vers le blanc = mask-image sur l'image elle-même (pas un
   calque blanc), avec des paliers intermédiaires pour un dégradé progressif. */
.ap-hero-bg img{
  position:absolute; left:0; top:-28vh;
  width:100%; height:240vh;
  object-fit:cover;
  object-position: 70% center;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, transparent 28%,
    rgba(0,0,0,.06) 36%, rgba(0,0,0,.16) 42%,
    rgba(0,0,0,.32) 48%, rgba(0,0,0,.52) 54%,
    rgba(0,0,0,.72) 62%, rgba(0,0,0,.9) 68%, #000 78%);
  mask-image: linear-gradient(to right,
    transparent 0%, transparent 28%,
    rgba(0,0,0,.06) 36%, rgba(0,0,0,.16) 42%,
    rgba(0,0,0,.32) 48%, rgba(0,0,0,.52) 54%,
    rgba(0,0,0,.72) 62%, rgba(0,0,0,.9) 68%, #000 78%);
  /* fondu d'apparition, lancé pendant la cascade du titre */
  opacity: 0;
  transition: opacity 1.3s ease-in-out 0.6s;
  /* Pas de filter CSS : la teinte est déjà appliquée dans le fichier. */
}
.ap-hero-bg img.is-in{ opacity: 1; }
.ap-hero-content{
  position:relative; z-index:2; width:100%;
  max-width:1280px; margin:0 auto;
  padding: 0 clamp(1.5rem,6vw,4rem);
}
/* Desktop (≥1400px) uniquement */
@media (min-width:1400px){
  .ap-hero-content{ margin-top:-4rem; }
}
.ap-hero-text{
  max-width:720px;
  opacity:0; transform:translateY(18px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.ap-hero-text.in{ opacity:1; transform:none; }
.ap-title{
  margin:0;
  max-width:20ch;
  font-family:var(--font-serif);
  font-weight:400;
  font-size:clamp(2.1rem,5.6vw,3.9rem);
  line-height:1.16;
  color:var(--indigo-deep);
}
.ap-title .w{display:inline-block;white-space:nowrap;}
.ap-title .s{display:inline-block;}
/* calque par lettre (.is-live, JS) : glisse au sous-pixel */
.ap-title.is-live .s{will-change:opacity,transform;}

/* sous-titre : fondu + zoom doux, sans blur (un blur qui revient à 0 sur du
   texte provoque un « pop ») */
.ap-subtitle{
  margin:1.1rem 0 0;
  font-family:var(--font-serif);
  font-style:italic;
  font-size:1.5rem; /* même taille que les paragraphes du carrousel */
  line-height:1.5;
  color:var(--indigo);
  white-space:nowrap;
  opacity:0;
  transform:scale(0.97);
  transition:opacity 1.6s var(--ease), transform 1.6s var(--ease);
}
.ap-subtitle.in{ opacity:1; transform:none; }
/* Petites tablettes (481–850px) sur le hero desktop : retour à la ligne
   autorisé pour le sous-titre. */
@media (min-width:481px) and (max-width:850px){
  .ap-subtitle{ white-space:normal; }
  /* colonne resserrée pour rester dans la partie transparente du fondu */
  .ap-hero-text{ max-width:60%; }
}

/* Téléphones en portrait uniquement (≤480px) : tablettes et téléphones en
   paysage utilisent le hero desktop. */
@media (max-width:480px){
  /* 100vh puis 100dvh (prioritaire si supporté) : suit la hauteur réellement
     visible sur Safari mobile, sinon un blanc apparaît sous la photo ancrée
     en bas. */
  .ap-hero-full{ min-height:100vh; min-height:100dvh; background:var(--white); }
  /* Mobile : photo détourée en edge-bleed à droite et en bas, ancrée au coin
     (right/bottom) avec une hauteur en rem fixe — une hauteur en vh la ferait
     remonter sur le sous-titre sur les écrans plus hauts. */
  .ap-hero-bg img{
    left:auto; top:auto;
    right:-3.5rem; bottom:-1.5rem;
    width:auto; height:28rem;
    max-width:none;
    object-fit:contain; object-position:right bottom;
    transform:none;
    -webkit-mask-image:none; mask-image:none;
  }
  .ap-hero-content{ display:flex; align-items:flex-start; min-height:100vh; min-height:100dvh; padding-bottom:0; }
  /* texte à gauche, colonne étroite */
  .ap-hero-text{ max-width:54%; text-align:left; margin:0; }
  .ap-title{ max-width:none; margin:0; font-size:clamp(1.55rem,7.4vw,2.05rem); }
  /* retour à la ligne autorisé */
  .ap-subtitle{ white-space:normal; font-size:1.05rem; }
}

/* Grands mobiles (410–480px) : photo plus grande et plus reculée.
   Doit rester APRÈS le bloc ≤480px (même sélecteur). */
@media (max-width:480px) and (min-width:410px){
  .ap-hero-bg img{ right:-11rem; bottom:1rem; height:55rem; }
  .ap-hero-text{ margin-top:1rem; }
}
@media (max-width:409px){
  .ap-hero-bg img{ right:-8rem; bottom:1rem; height:42rem; }
  .ap-hero-text{ margin-top:1rem; }
}

/* ================================================
   CULTIVER AUTREMENT / SUBLIMER CHAQUE INSTANT
   Fond : piste + pin sticky, comme « Notre Engagement » (production).
   Texte : 2 panneaux dans un scroll interne avec scroll-snap-stop:always,
   impossible d'en sauter un. Le pin donne au JS (a-propos.js) une plage
   stable pour activer ce scroll interne.
   ================================================ */
.ap-farm2{
  position:relative;
  /* la piste garde le pin stable et laisse une plage de sortie ; trop longue,
     elle crée un vide après le 2e bloc */
  height:160vh;
  isolation:isolate;
}
.ap-farm2-pin{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden;
  background:var(--white);
}

/* Scroll interne : 2 panneaux de 100%, snap « always ».
   overflow-y:hidden par défaut : le JS ne passe en auto qu'une fois la
   section plein écran, sinon le scroll serait intercepté avant qu'elle ait
   fini de monter. */
.ap-farm2-snap{
  position:relative; z-index:2;
  height:100%;
  overflow-y:hidden;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; /* Firefox */
  -ms-overflow-style:none;
  /* pas de blur sur un conteneur de texte (même « pop ») */
  opacity:0; transform:scale(0.96);
  transition:opacity 1.6s var(--ease), transform 1.6s var(--ease);
}
.ap-farm2-snap.is-armed{ overflow-y:auto; }
.ap-farm2-snap::-webkit-scrollbar{ display:none; }
.ap-farm2.in .ap-farm2-snap{ opacity:1; transform:none; }
.ap-farm2-panel{
  height:100%;
  display:flex; align-items:center; justify-content:center;
  padding: 2rem clamp(1.5rem,6vw,4rem);
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
/* Pas de blur sur du texte : un filter:blur() qui revient à 0 provoque un
   « pop » de rendu. Opacity + léger scale, révélé une seule fois. */
.ap-farm2-group{
  max-width:580px;
  text-align:center;
  opacity:0; transform:scale(0.98);
  transition:opacity 1.4s var(--ease), transform 1.4s var(--ease);
}
.ap-farm2-group.in{ opacity:1; transform:none; }
/* même police que « ENGAGEMENT » (.ve-title-main, production) */
.ap-farm2-group h2{
  font-family:var(--font-display);
  font-weight:200;
  font-size:clamp(1.65rem,4.6vw,3.1rem);
  line-height:1.25;
  color:var(--indigo-deep);
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:1.3rem;
}
/* même taille que « Notre » (.ve-title-kicker, production) */
.ap-farm2-kicker-word{
  font-size:clamp(1.5rem, 3vw, 2.3rem);
  font-weight:200;
}
/* Poppins 300 toujours couplé à --ink-text-dim sur le site : en indigo plein,
   le même weight paraît plus gras. */
.ap-farm2-group p{
  font-family:var(--font-display);
  font-weight:300;
  font-size:20px;
  line-height:1.7;
  color:var(--ink-text-dim);
}
/* espace léger : le bloc doit tenir dans le panneau de 100vh */
.ap-farm2-group p + p{ margin-top:0.6em; }

/* fleurs : même entrée/sortie que .ve-bg (production). Fixes pendant le
   scroll interne des 2 blocs. */
.ap-farm2-bloom{
  position:absolute;
  top:50%; z-index:1;
  /* > 100vh : déborde en haut et en bas, edge-bleed sur toute la hauteur */
  height:clamp(560px, 108vh, 1150px);
  opacity:0; filter:blur(14px);
  transform:translateY(-50%) scale(1.06);
  transition:opacity 1.8s var(--ease), filter 1.8s var(--ease), transform 1.8s var(--ease);
}
.ap-farm2.in .ap-farm2-bloom{ opacity:1; filter:blur(0); transform:translateY(-50%) scale(1); }
.ap-farm2-bloom--left{ left:clamp(-10rem,-12vw,-4rem); }
.ap-farm2-bloom--right{ right:clamp(-10rem,-12vw,-4rem); }
.ap-farm2-bloom img{
  height:100%; width:auto; display:block;
}

@media (max-width:900px){
  .ap-farm2-bloom{ height:clamp(320px,58vh,520px); }
  .ap-farm2-bloom--left{ left:-4.5rem; }
  .ap-farm2-bloom--right{ right:-4.5rem; }
  .ap-farm2.in .ap-farm2-bloom{ opacity:.65; }
  /* Mobile (≤900px) : pas de scale animé sur le texte (même « pop » que le
     blur), fondu seul. */
  .ap-farm2-snap{ transform:none; transition:opacity 1.6s var(--ease); }
  .ap-farm2-group{ transform:none; transition:opacity 1.4s var(--ease); }
  /* hiérarchie titre/kicker conservée sur petit écran */
  .ap-farm2-kicker-word{ font-size:1.2rem; }
}
/* ≤560px : une seule fleur (la 02) en edge-bleed à droite, texte aligné à
   gauche sur une colonne resserrée. */
@media (max-width:560px){
  .ap-farm2-bloom--left{ display:none; }
  /* palier petit mobile ; surchargé ≥410px juste après */
  .ap-farm2-bloom--right{ right:-16rem; }
  /* height:100% = hauteur réelle de .ap-farm2-pin (100svh) */
  /* Fleur plein écran : pas de zoom animé (trop coûteux sur une image masquée
     de cette taille), opacity seule. Le texte démarre après un court délai
     pour ne pas s'animer sur la même frame. */
  .ap-farm2-bloom{
    height:100%; filter:none;
    transform:translateY(-50%);
    transition:opacity 1.8s var(--ease);
  }
  .ap-farm2.in .ap-farm2-bloom{ filter:none; transform:translateY(-50%); }
  /* pétale fondue vers le blanc sous le texte (mask-image), transparente sur
     0–22% puis opaque vers 40% */
  .ap-farm2-bloom--right img{
    -webkit-mask-image: linear-gradient(to right,
      transparent 0%, transparent 22%,
      rgba(0,0,0,.35) 28%, rgba(0,0,0,.75) 34%, #000 40%);
    mask-image: linear-gradient(to right,
      transparent 0%, transparent 22%,
      rgba(0,0,0,.35) 28%, rgba(0,0,0,.75) 34%, #000 40%);
  }
  .ap-farm2-panel{ justify-content:flex-start; }
  /* court délai : la fleur d'abord, le texte ensuite */
  .ap-farm2-group{ text-align:left; max-width:70%; transition-delay:0.3s; }
  /* police réduite : le contenu doit tenir dans le panneau de 100vh */
  .ap-farm2-group h2{ margin-bottom:.7rem; }
  /* taille et interligne resserrés en mobile : le 1er bloc doit tenir dans
     le panneau */
  .ap-farm2-group p{ font-size:18px; line-height:1.4; }
  .ap-farm2-group p + p{ margin-top:0.5em; }
  /* 2e bloc (court) : colonne plus étroite */
  .ap-farm2-panel:nth-child(2) .ap-farm2-group p{ max-width:22ch; }
}
/* Grands mobiles (≥410px) : fleur plus décalée. Doit rester APRÈS le bloc
   ≤560px (même sélecteur). */
@media (max-width:560px) and (min-width:410px){
  .ap-farm2-bloom--right{ right:-24rem; }
}
/* Tablettes (561–1400px, toute orientation) : une seule formule continue.
   Fleur en pleine hauteur, décalage left/right en vw pur (proportionnel à
   toute largeur), colonne de texte en % de la largeur. */
@media (min-width:561px) and (max-width:1400px){
  /* hauteur plafonnée par min(vh, vw) : la fleur ne dépasse jamais la largeur
     d'écran (iPad mini) */
  .ap-farm2-bloom{ height:clamp(400px, min(108vh, 85vw), 1150px); }
  .ap-farm2-bloom--left{ left:-40vw; }
  .ap-farm2-bloom--right{ right:-40vw; }
  .ap-farm2-group{ max-width:50%; }
}
/* Tablettes courtes (≤700px de haut) : colonne plus large, fleurs plus
   repoussées. */
@media (min-width:561px) and (max-width:1400px) and (max-height:700px){
  .ap-farm2-group{ max-width:58%; }
  .ap-farm2-bloom--left{ left:-52vw; }
  .ap-farm2-bloom--right{ right:-52vw; }
}
/* Tablettes en portrait : fleur en 100vh pur, décalage -80vw. */
@media (min-width:561px) and (max-width:1400px) and (orientation:portrait){
  .ap-farm2-bloom{ height:100vh; }
  .ap-farm2-bloom--left{ left:-80vw; }
  .ap-farm2-bloom--right{ right:-80vw; }
}
/* Portraits étroits et hauts (Surface Pro 7, 912×1368) : fleur plus repoussée
   pour ne pas mordre sur le texte. */
@media (min-width:561px) and (max-width:950px) and (min-height:1300px) and (orientation:portrait){
  .ap-farm2-bloom--left{ left:-100vw; }
  .ap-farm2-bloom--right{ right:-100vw; }
}
@media (prefers-reduced-motion:reduce){
  .ap-farm2-snap, .ap-farm2-bloom, .ap-farm2-group{ transition:none; }
}

/* ================================================
   PROCESS — les 3 étapes d'un projet, 3 colonnes. Fondu léger (sans blur).
   ================================================ */
.ap-values{
  /* padding généreux avant la section d'appel */
  padding: clamp(4rem,9vw,6.5rem) clamp(1.5rem,6vw,4rem) clamp(6rem,12vw,9rem);
  background: var(--white);
}
.ap-values-title{
  text-align:center;
  font-family:var(--font-display);
  font-weight:200;
  font-size:clamp(1.65rem,4.6vw,2.6rem);
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--indigo-deep);
  margin:0 0 clamp(2.5rem,6vw,3.5rem);
}
/* Desktop ≥1400px. Attention : les laptops 1280/1366px utilisent la règle
   tablette (8rem) ci-dessous. */
@media (min-width:1400px){
  .ap-values-title{ margin-bottom:9rem; }
}
/* Mobile + tablette (<1400px) : plus d'espace sous le titre */
@media (max-width:1399px){
  .ap-values-title{ margin-bottom:8rem; }
}
/* chaque mot s'anime séparément (JS) */
.ap-values-title-word{
  display:inline-block;
  opacity:0; transform:scale(0.9);
  /* ease-in-out pour un dépôt doux */
  transition:opacity 1.8s ease-in-out, transform 1.8s ease-in-out;
}
.ap-values-title-word.in{ opacity:1; transform:none; }
/* « créer, fleurir » à la ligne en mobile uniquement */
.ap-values-title-break{ display:none; }
@media (max-width:900px){
  .ap-values-title-break{ display:block; }
}
.ap-values-inner{
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(2rem,4vw,3.5rem);
}
.ap-value{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1rem;
  opacity:0; transform:translateY(16px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.ap-value.in{ opacity:1; transform:none; }

/* hauteur fixe + object-fit:contain : les 3 fleurs de ratios différents
   gardent le même gabarit, titres alignés */
.ap-value-icon{
  width: clamp(68px,8.5vw,92px);
  height: clamp(68px,8.5vw,92px);
}
/* tige fondue dans le blanc (même masque que .bw-flower, accueil) */
.ap-value-icon img{
  width:100%; height:100%; object-fit:contain;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, rgba(0,0,0,.82) 87%, rgba(0,0,0,.35) 95%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 80%, rgba(0,0,0,.82) 87%, rgba(0,0,0,.35) 95%, transparent 100%);
}
.ap-value-body b{
  display:block;
  font-family:var(--font-display);
  font-weight:400;
  font-size:20px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold-dark);
  margin-bottom:.5rem;
}
/* même recette que .ap-farm2-group p */
.ap-value-body p{
  font-family:var(--font-display);
  font-weight:300;
  font-size:20px;
  line-height:1.5;
  color:var(--ink-text-dim);
  /* largeur bridée : colonnes compactes et distinctes */
  max-width:40ch;
  margin:0 auto;
}
@media (max-width:820px){
  /* grand écart en mobile : laisse le temps de voir le fondu de chaque étape */
  .ap-values-inner{ grid-template-columns:1fr; max-width:420px; gap:16rem; }
  /* fondu plus lent en mobile pour être perçu au scroll */
  .ap-value{ transition:opacity 1.6s var(--ease), transform 1.6s var(--ease); gap:5rem; }
  /* Fleurs agrandies (mobile) : l'image déborde de sa boîte.
     max-width:none indispensable (base.css impose img{max-width:100%}). */
  .ap-value-icon img{ width:180%; height:180%; max-width:none; }
  /* flex + centrage : l'image agrandie déborde symétriquement.
     flex-shrink:0 sur l'img, sinon flex la recomprime à 100%. */
  .ap-value-icon{ display:flex; align-items:center; justify-content:center; }
  .ap-value-icon img{ flex-shrink:0; }
  /* interligne plus aéré (pas de contrainte de hauteur ici) */
  .ap-value-body p{ line-height:1.85; }
}

/* ================================================
   APPEL — même recette que .appel (production), renvoie vers Contact
   ================================================ */
.appel{
  position:relative;
  min-height:clamp(18rem,50vh,28rem);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding: clamp(3rem,10vh,6rem) 1.5rem clamp(3rem,9vh,5.5rem);
  background:var(--white);
}
.appel-phrase{
  margin:0; max-width:26ch;
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(2rem,6vw,4.2rem);
  line-height:1.18;
  color:var(--indigo-deep);
}
.appel-word{ display:inline-block; white-space:nowrap; }
.appel-phrase .s{ display:inline-block; }
.appel.is-live .appel-phrase .s{ will-change:opacity,transform; }
.appel-link{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:clamp(1.6rem,5vh,2.6rem);
  font-family:var(--font-display); font-weight:400;
  font-size:15px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--violet-mid);
  transition:gap .35s var(--ease), color .35s var(--ease);
}
.appel-link:hover{ gap:.85rem; color:var(--gold); }
.appel-link-label, .appel-arrow{ display:inline-block; overflow:hidden; line-height:1.35; }
.appel-link-label>span, .appel-arrow>span{ display:inline-block; opacity:0; transform:translateY(130%); }
.appel.link-go .appel-link-label>span{ animation:apNavRise 2s cubic-bezier(.16,1,.3,1) forwards; }
.appel.link-go .appel-arrow>span{ animation:apNavRise 2s cubic-bezier(.16,1,.3,1) .15s forwards; }
@keyframes apNavRise{ to{ opacity:1; transform:translateY(0); } }

/* ≥761px : la fleur gauche du footer remonte sur cette section. Marge basse
   en formule continue (117.3rem − 88.1vw, bornée 34–75rem), calée au-dessus
   des valeurs mesurées de 768 à 1440px, pour couvrir toute largeur de
   tablette. Coefficient vw élevé : 1vw ne vaut qu'1% de la largeur en px. */
@media (min-width: 761px) {
  .appel{ min-height: clamp(34rem, 117.3rem - 88.1vw, 75rem); }
}
/* 481–760px : footer en 1 colonne et fleur à largeur fixe, la formule
   ci-dessus ne s'applique plus. */
@media (min-width: 481px) and (max-width: 760px) {
  .appel{ min-height: 30rem; }
}

@media (prefers-reduced-motion:reduce){
  .ap-title .s, .ap-hero-text, .ap-value,
  .appel-link-label>span, .appel-arrow>span{
    opacity:1!important; filter:none!important; transform:none!important; animation:none!important;
  }
  /* .ap-farm2 : pas forcé visible, seule la transition devient instantanée */
  /* masque conservé, seule l'apparition animée est neutralisée */
  .ap-hero-bg img{ opacity:1 !important; transition:none !important; }
}