/* ============================================================
   AUREA, acquisition.css  (V3)
   Page « Votre acquisition ». Direction v3 :
   page-votre-acquisition-direction-v3.md. La lecture d'abord : les entrees se
   jouent UNE fois, en temps (pas au defilement), 700 ms (900 ms pour une carte),
   90 ms d'ecart au plus. Un SEUL epinglage sur la page : la construction des
   paiements (section 6). Plus de fil d'or, plus de verbes en contour, plus de
   parcours horizontal, plus d'arches, plus de canvas plein cadre.

   Famille de cartes commune aux pages villas (.jn-card) : rayon 18 px, ombre
   0 40px 80px -30px rgba(42,32,24,.35). Des fonds chauds qui changent comme une
   journee, raccordes par un degrade porte par le bas de chaque section.

   Deux etages :
   - BASE (hors media enrichi) : tout statique, lisible, mobile + sans JS +
     prefers-reduced-motion. Le texte vit dans l'ordre de lecture.
   - ENRICHI (html.acq-js, desktop >=1025px, mouvement autorise) : entrees jouees,
     parallaxe des cartes, trait du parcours, pile collee, plan dessine, fenetre
     du chantier epinglee.
   ============================================================ */

.acq-main{
  position:relative; background:var(--blanc); overflow-x:clip;
  --acq-radius:18px;
  --acq-shadow:0 40px 80px -30px rgba(42,32,24,.35);
  --acq-shadow-soft:0 24px 60px -34px rgba(42,32,24,.28);
  --acq-maxw:1220px;
}
/* La largeur est deja bornee par margin-inline:auto + max-width : on neutralise le
   padding lateral herite de .wrap (site.css), sinon les sections en .wrap SIMPLE
   (L'experience AUREA, Votre parcours) demarraient 72 px plus a droite (202 px) que
   les sections en grille (130 px). Tout s'aligne desormais sur la colonne dominante. */
.acq-main .wrap{ width:min(100% - 2*clamp(22px,6vw,64px), var(--acq-maxw)); margin-inline:auto; padding-inline:0; }

/* ---- Echelle de texte (table du brief), une seule pour toute la page -------- */
.acq-eyebrow{
  font-family:var(--font-body); font-weight:500; text-transform:uppercase;
  letter-spacing:.3em; font-size:11px; line-height:1.2; color:var(--bronze); margin:0 0 18px;
}
.acq-h1{
  font-family:var(--font-title); font-weight:400; text-transform:none; color:var(--ink);
  font-size:clamp(2.1rem,3.3vw,3.3rem); line-height:1.08; letter-spacing:.01em;
  margin:0; text-wrap:balance; hyphens:none;
}
.acq-h2{
  font-family:var(--font-title); font-weight:400; text-transform:none; color:var(--ink);
  font-size:clamp(1.6rem,2.6vw,2.4rem); line-height:1.12; letter-spacing:.02em;
  margin:0; text-wrap:balance; hyphens:none;
}
.acq-h3{
  font-family:var(--font-title); font-weight:400; text-transform:none; color:var(--ink);
  font-size:clamp(1.05rem,1.3vw,1.25rem); line-height:1.2; letter-spacing:.02em; margin:0;
}
.acq-body{
  font-family:var(--font-body); font-weight:300; color:var(--ink-soft);
  font-size:clamp(.95rem,.9vw,1rem); line-height:1.75; max-width:62ch; margin:16px 0 0;
  text-wrap:pretty; hyphens:none;
}
.acq-note{
  font-family:var(--font-body); font-weight:300; color:var(--ink-soft);
  font-size:13.5px; line-height:1.7; max-width:60ch; margin:18px 0 0;
}
.acq-verb{
  font-family:var(--font-title); font-weight:400; text-transform:none; color:var(--ink);
  font-size:clamp(1.3rem,1.9vw,1.7rem); line-height:1.15; letter-spacing:.01em; margin:0;
}
.acq-link{
  position:relative; font-family:var(--font-body); font-weight:400; font-size:.95rem;
  letter-spacing:.02em; color:var(--bronze); text-decoration:none; padding-bottom:3px;
}
.acq-link::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--bronze); opacity:.7; transition:right .5s var(--ease-cine); }
.acq-link:hover::after, .acq-link:focus-visible::after{ right:0; }
/* Numeros en Bentham bronze, jamais en contour geant, jamais en pastille. */
.acq-point-num, .acq-step-num, .acq-vefa-num{
  font-family:var(--font-title); font-weight:400; color:var(--bronze);
  font-feature-settings:"lnum" 1; font-size:1rem; line-height:1;
}

/* ---- Trame des sections + fonds chauds + raccords -------------------------- */
.acq-sec{ position:relative; z-index:1; }
.acq-open{ background:var(--sable-clair); }
.acq-exp{ background:var(--blanc); }
.acq-interior{ background:var(--blanc); }
.acq-parcours{ background:var(--sable-clair); }
.acq-vefa{ background:var(--blanc); }
.acq-chantier{ background:var(--sable-clair); }
.acq-garanties{ background:var(--sable-clair); }
.acq-questions{ background:var(--blanc); }
.acq-appel{ background:var(--ink); }
/* Raccord en degrade porte par le BAS de chaque section (16 a 20 vh), vers le fond
   de la section suivante : jamais une coupure nette. */
.acq-sec::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:18vh; z-index:0; pointer-events:none; }
.acq-open::after{ background:linear-gradient(to bottom, rgba(242,235,221,0), var(--blanc)); }
.acq-exp::after{ display:none; }   /* ivoire -> ivoire : pas de raccord */
.acq-interior::after{ background:linear-gradient(to bottom, rgba(253,251,247,0), var(--sable-clair)); }
.acq-parcours::after{ background:linear-gradient(to bottom, rgba(242,235,221,0), var(--blanc)); }
/* ivoire -> sable clair : raccord porte par le bas de la VEFA, comme les autres. */
.acq-vefa::after{ background:linear-gradient(to bottom, rgba(253,251,247,0), var(--sable-clair)); }
/* paiements et garanties sont tous deux en sable clair : une seule bande chaude,
   aucun raccord entre les deux. */
.acq-chantier::after{ display:none; }
.acq-garanties::after{ background:linear-gradient(to bottom, rgba(253,251,247,0), var(--blanc)); }
.acq-questions::after{ display:none; }   /* l'appel est en image : son ::after porte le degrade (section 9) */

/* ---- En-tetes de section --------------------------------------------------- */
.acq-head{ margin:0 0 clamp(28px,5vh,56px); }
.acq-head--center{ text-align:center; }

/* ============================================================
   REVELATIONS (entrees jouees une fois, pilotees par l'IntersectionObserver JS)
   ============================================================ */
[data-enter]{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s var(--ease-cine), transform .7s var(--ease-cine);
  transition-delay:calc(var(--d,0) * 90ms);
}
[data-enter].is-in{ opacity:1; transform:none; }
/* Titres : revelation par masque, ligne a ligne. */
.acq-ln{ display:block; overflow:hidden; }
.acq-ln > span{ display:block; transform:translateY(112%); transition:transform .72s var(--ease-cine); transition-delay:calc(var(--i,0) * 70ms); will-change:transform; }
.is-revealed .acq-ln > span{ transform:translateY(0); }

/* ---- Carte commune (.acq-card) --------------------------------------------- */
.acq-card{
  position:relative; border-radius:var(--acq-radius); overflow:hidden;
  background:var(--sable-clair); box-shadow:var(--acq-shadow);
}
.acq-card > img{ display:block; width:100%; height:100%; object-fit:cover; }
/* Passe 13 (point 9) : cartes d'ouverture servies en <picture> (WebP + repli PNG). La
   balise picture est un conteneur transparent qui remplit la carte ; l'image remplit la
   picture. object-fit:contain sur les cartes d'ouverture : l'image est montree ENTIERE,
   jamais recadree (les proportions de la carte = celles de l'image, donc aucun lisere). */
.acq-card > picture{ display:block; width:100%; height:100%; }
.acq-card > picture > img{ display:block; width:100%; height:100%; object-fit:cover; }
.acq-open-main > picture > img, .acq-open-sec > picture > img{ object-fit:contain; }

/* ======================= 1. OUVERTURE ====================== */
.acq-open-grid{ display:grid; grid-template-columns:1fr; gap:clamp(28px,5vw,64px); align-items:center; padding:clamp(104px,15vh,180px) 0 clamp(64px,10vh,120px); }
.acq-open-copy{ max-width:58ch; }
.acq-open-body{ max-width:46ch; }
.acq-open-links{ display:flex; gap:clamp(20px,3vw,44px); margin:30px 0 0; flex-wrap:wrap; }
/* Les photos passent AU-DESSUS du degrade de raccord (.acq-sec::after, z-index 0),
   sinon la petite carte (bottom:-7 %) etait delavee par le fondu. (point 2d) */
/* Passe 13 (point 9) : la grande carte porte le logo AUREA grave (404 x 548). Le conteneur
   est plafonne a la taille de cette carte (jamais plus de 520 px de large ni ~72vh de haut)
   pour que la petite carte, positionnee en pourcentage, deborde bien de la grande carte. */
/* Passe 13 (correctif ouverture). La grande carte (logo 404x548) est dimensionnee par JS
   (scripts/acquisition.js) sur la hauteur disponible (100vh - header - zone barre agent), via
   --acq-open-w (plafond 520 px conserve). --acq-open-debord = debord de la petite carte sous la
   grande : il etend le conteneur pour que le texte de gauche reste centre sur TOUTE la composition.
   Repli sans JS : largeur min(100%, 520px), debord nul, ancrage 82 %. */
.acq-open-cards{ position:relative; z-index:1; width:min(100%, 520px, var(--acq-open-w, 520px)); margin-inline:auto; padding-bottom:var(--acq-open-debord, 0px); }
.acq-open-main{ width:100%; aspect-ratio:404 / 548; }
/* Petite carte : les deux associes (657 x 347). Largeur ~62 % de la grande (bornee 300-460 px)
   pour que les noms restent lisibles. ANCREE PAR LE HAUT a 82 % de la hauteur de la grande carte
   (le texte SIGNATURE BY IMPULSO finit vers 74 %) : elle ne couvre jamais le texte du logo.
   --acq-open-sectop (en px) est posee par JS = 0,82 x hauteur de la grande carte ; repli 82 %.
   Debord a gauche inchange. */
.acq-open-sec{ position:absolute; width:clamp(300px, 62%, 460px); aspect-ratio:657 / 347; left:-5%; top:var(--acq-open-sectop, 82%); box-shadow:var(--acq-shadow); }

/* ======================= 2. TRIPTYQUE ====================== */
.acq-trip{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:clamp(24px,4vh,40px); }
.acq-trip-col{ position:relative; padding-top:22px; }
.acq-trip-rule{ position:absolute; left:0; top:0; height:1px; width:100%; background:var(--line); transform:scaleX(0); transform-origin:left center; transition:transform .7s var(--ease-cine); }
.acq-trip-col.is-in .acq-trip-rule{ transform:scaleX(1); }
.acq-trip-txt{ font-family:var(--font-body); font-weight:300; color:var(--ink-soft); font-size:clamp(.95rem,.9vw,1rem); line-height:1.75; max-width:40ch; margin:14px 0 0; }

/* ======================= 3. INTERIEUR ====================== */
.acq-interior-grid{ display:grid; grid-template-columns:1fr; gap:clamp(32px,5vw,72px); align-items:center; padding:clamp(72px,12vh,150px) 0; }
.acq-points{ list-style:none; margin:clamp(24px,4vh,40px) 0 0; padding:0; display:flex; flex-direction:column; }
.acq-point{ display:flex; align-items:baseline; gap:16px; padding:clamp(12px,1.6vh,18px) 0; border-top:1px solid var(--line); font-family:var(--font-title); font-size:clamp(1.1rem,1.5vw,1.35rem); line-height:1.2; color:var(--ink); }
.acq-point:last-child{ border-bottom:1px solid var(--line); }
.acq-interior-cards{ position:relative; }
.acq-int-main{ width:100%; aspect-ratio:4/5; }
.acq-int-main > img{ object-position:center 42%; }
.acq-int-sec{ position:absolute; width:42%; aspect-ratio:1/1; left:-6%; bottom:-8%; box-shadow:var(--acq-shadow); }

/* ======================= 4. PARCOURS ======================= */
.acq-parcours-grid{ position:relative; }
.acq-steps{ list-style:none; margin:0; padding:0; }
.acq-step{ position:relative; padding:clamp(20px,4vh,44px) 0; }
.acq-step-num{ display:block; margin:0 0 8px; }
.acq-step-txt{ max-width:52ch; }

/* Course du soleil (desktop) : un seul SVG, aucun texte, aucune graduation. Ligne
   d'horizon (Villa Horizon) + arc du soleil (Casa Solstice), trace par
   stroke-dashoffset. Disque bronze pose a la pointe (getPointAtLength) avec une
   lueur radiale discrete ; la surface sous l'arche se teinte a l'arrivee (01 -> 07). */
.acq-sun{ display:none; }
.acq-sun-svg{ display:block; width:min(100%,560px); height:auto; overflow:visible; }
.acq-sun-horizon{ fill:none; stroke:var(--bronze); stroke-opacity:.45; stroke-width:1; vector-effect:non-scaling-stroke; }
.acq-sun-track{ fill:none; stroke:var(--beige); stroke-opacity:.35; stroke-width:1; vector-effect:non-scaling-stroke; }
.acq-sun-arc{ fill:none; stroke:var(--bronze); stroke-width:1.2; vector-effect:non-scaling-stroke; }
.acq-sun-fill{ fill:var(--sable); fill-opacity:0; transition:fill-opacity .9s var(--ease-cine); }
.acq-sun-fill.is-on{ fill-opacity:.55; }
.acq-sun-disk{ fill:var(--bronze); }
.acq-sun-glow-0{ stop-color:var(--bronze); stop-opacity:.18; }
.acq-sun-glow-1{ stop-color:var(--bronze); stop-opacity:0; }

/* Trait : cache en base (mobile le remet au bord gauche plus bas) */
.acq-trait{ display:none; }

/* ======================= 5. VEFA (plan) ==================== */
.acq-vefa-grid{ display:grid; grid-template-columns:1fr; gap:clamp(36px,5vw,72px); align-items:start; padding:clamp(84px,13vh,170px) 0 clamp(96px,18vh,190px); }
.acq-vefa-steps{ list-style:none; margin:clamp(26px,4vh,46px) 0 0; padding:0; display:flex; flex-direction:column; }
.acq-vefa-step{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; padding:clamp(14px,2vh,22px) 0; border-top:1px solid var(--line); }
.acq-vefa-step:last-child{ border-bottom:1px solid var(--line); }
.acq-vefa-num{ font-size:1.1rem; }
.acq-vefa-txt{ margin:6px 0 0; max-width:48ch; }
.acq-vefa-plank{ position:relative; background:var(--sable); border-radius:var(--acq-radius); box-shadow:var(--acq-shadow); padding:8%; }
.acq-vefa-plan{ position:relative; width:100%; aspect-ratio:860/560; }
.acq-vefa-plan svg{ width:100%; height:100%; display:block; overflow:visible; }
.acq-vefa-plan svg #labels, .acq-vefa-plan svg #meubles, .acq-vefa-plan svg #eau, .acq-vefa-plan svg #exterieurs{ display:none; }
.acq-vefa-plan .plan-stroke{ fill:none !important; stroke:var(--bronze); vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }

/* ======================= 6. CHANTIER (sable clair) ========= */
/* Fond clair comme les garanties : surtitre bronze, titre --ink, texte et note
   --ink-soft (defauts de la page). Aucune surcharge sombre. */
.acq-chantier{ position:relative; }
.acq-chantier-grid{ display:grid; grid-template-columns:1fr; gap:clamp(32px,5vw,64px); align-items:center; padding:clamp(72px,12vh,140px) 0; }
/* Frise verticale des 4 etapes : filet clair, repere + libelle. Jamais sur l'image.
   Elle suit l'image REELLEMENT dessinee (engine.drawnIndex()), pas le defilement. */
.acq-frise{ list-style:none; margin:clamp(26px,4vh,44px) 0 0; padding:0 0 0 22px; position:relative; }
.acq-frise::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--line); }
.acq-frise-fill{ position:absolute; left:0; top:6px; width:1px; height:0; background:var(--bronze); }
.acq-frise-step{ position:relative; padding:clamp(10px,1.6vh,16px) 0; }
.acq-frise-dot{ position:absolute; left:-22px; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; border:1px solid var(--bronze); background:transparent; transition:background .4s var(--ease-cine); }
.acq-frise-step.is-on .acq-frise-dot{ background:var(--bronze); }
/* Libelle en Bentham, capitales espacees .08em, taille des h3 : en attente
   --ink-soft, atteint --ink (contraste >= 4,5:1 sur sable clair, point C.c). */
.acq-frise-lab{ font-family:var(--font-title); font-weight:400; text-transform:uppercase; letter-spacing:.08em; font-size:clamp(1.05rem,1.3vw,1.25rem); line-height:1.2; color:var(--ink-soft); transition:color .45s var(--ease-cine); }
.acq-frise-step.is-on .acq-frise-lab{ color:var(--ink); }
/* Fenetre du chantier : carte cadree, bords nets. Plus de passe-partout. */
.acq-chantier-window{ position:relative; }
.acq-window-card{ position:relative; width:100%; aspect-ratio:4/3; border-radius:var(--acq-radius); overflow:hidden; background:var(--sable-clair); box-shadow:var(--acq-shadow); }
.acq-window-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.acq-window-inner{ position:absolute; inset:0; border-radius:var(--acq-radius); border:1px solid rgba(74,59,44,.10); pointer-events:none; }
/* Repli empile (mobile + reduced + sans JS) */
.acq-chantier-stack{ display:none; }
.acq-chantier-item{ margin:0 0 clamp(18px,3vh,32px); aspect-ratio:4/3; }
.acq-chantier-item figcaption{ position:absolute; left:clamp(16px,3vw,28px); bottom:clamp(14px,2.4vh,24px); font-family:var(--font-body); font-weight:300; letter-spacing:.04em; color:var(--blanc); text-shadow:0 1px 3px rgba(20,14,8,.5); }

/* ======================= 7. GARANTIES ====================== */
.acq-garanties{ }
.acq-garanties .wrap{ padding:clamp(60px,10vh,120px) 0; }
.acq-gar-card{ background:var(--blanc); box-shadow:var(--acq-shadow-soft); padding:clamp(28px,4vw,52px); }
.acq-gar-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:clamp(22px,3vw,36px); }
.acq-gar-item{ position:relative; padding-top:22px; }
.acq-gar-rule{ position:absolute; left:0; top:0; height:1px; width:100%; background:var(--line); transform:scaleX(0); transform-origin:left center; transition:transform .7s var(--ease-cine); }
.acq-gar-item.is-in .acq-gar-rule{ transform:scaleX(1); }
.acq-gar-h{ margin:0 0 10px; }
.acq-gar-txt{ margin:0; }

/* ======================= 8. QUESTIONS ====================== */
.acq-questions .wrap{ padding:clamp(72px,12vh,150px) 0 clamp(96px,16vh,190px); }
.acq-faq{ max-width:980px; }
.acq-faq-item{ border-top:1px solid rgba(74,59,44,.16); position:relative; }
.acq-faq-item:last-child{ border-bottom:1px solid rgba(74,59,44,.16); }
.acq-faq-item::after{ content:""; position:absolute; left:0; top:0; height:1px; width:100%; background:var(--bronze); transform:scaleX(0); transform-origin:left center; transition:transform .6s var(--ease-cine); }
.acq-faq-item.is-open::after{ transform:scaleX(1); }
.acq-faq-q{ margin:0; }
.acq-faq-btn{ width:100%; display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:clamp(16px,2.4vw,34px); background:none; border:0; cursor:pointer; text-align:left; padding:clamp(22px,3.2vh,38px) 0; color:var(--ink); }
.acq-faq-label{ font-family:var(--font-title); font-weight:400; font-size:clamp(1.3rem,1.9vw,1.7rem); line-height:1.15; color:var(--ink); }
.acq-faq-sign{ position:relative; width:22px; height:22px; align-self:center; flex:none; }
.acq-faq-sign::before, .acq-faq-sign::after{ content:""; position:absolute; left:50%; top:50%; background:var(--bronze); }
.acq-faq-sign::before{ width:18px; height:1.4px; transform:translate(-50%,-50%); }
.acq-faq-sign::after{ width:1.4px; height:18px; transform:translate(-50%,-50%); transition:transform .45s var(--ease-cine), opacity .45s var(--ease-cine); }
.acq-faq-btn[aria-expanded="true"] .acq-faq-sign::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.acq-faq-panel{ overflow:hidden; }
.acq-faq-panel-in{ padding:0 0 clamp(26px,4vh,44px); max-width:72ch; }
.acq-faq-panel-in p{ font-family:var(--font-body); font-weight:300; color:var(--ink-soft); font-size:16px; line-height:1.8; margin:0; }

/* ======================= 9. APPEL ========================== */
.acq-appel{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; color:var(--blanc); }
/* Parallaxe BORNEE : l'image fait 120 % de haut et est translatee entre -16 % et 0
   (pilotee par acquisition.js), de sorte qu'elle couvre toujours toute la section,
   en haut comme en bas. Au repos (sans JS / mouvement reduit) : haut aligne, couvre. */
.acq-appel-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.acq-appel-bg img{ width:100%; height:120%; object-fit:cover; display:block; }
/* Degrade MESURE (C.c) : part de --ink opaque au bord bas, reste soutenu dans la
   zone du texte, s'efface vers le haut. Regle pour tenir 4,5:1 sur la phrase et
   3:1 sur le titre meme sur le pixel d'image le plus clair. */
/* Degrade ALLEGE (point 2d) : l'image de fond reste visible derriere le titre et
   les boutons (plus d'aplat brun en bas de page a 1440x900). On compense la
   lisibilite par une ombre portee sur le titre et la phrase (voir plus bas). */
.acq-appel::after{ content:""; position:absolute; inset:0; height:auto; display:block; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(42,32,24,.74) 0%, rgba(42,32,24,.56) 22%, rgba(74,59,44,.34) 46%, rgba(74,59,44,.12) 72%, rgba(74,59,44,0) 94%); }
.acq-appel-in{ position:relative; z-index:2; text-align:center; max-width:640px; margin-inline:auto; padding:clamp(24px,4vh,52px) 0 clamp(64px,10vh,120px); }
/* Titre en IVOIRE : regle dediee, qui ne depend pas de .acq-main h2 (plus de
   titre qui sort en brun). */
.acq-appel-h{ font-family:var(--font-title); font-weight:400; text-transform:none; color:var(--blanc); font-size:clamp(1.9rem,3.2vw,3rem); line-height:1.08; letter-spacing:.02em; margin:0; text-wrap:balance; text-shadow:0 2px 24px rgba(20,14,8,.55), 0 1px 4px rgba(20,14,8,.4); }
.acq-appel-line{ font-family:var(--font-body); font-weight:300; color:var(--sable); font-size:clamp(1rem,1.1vw,1.1rem); line-height:1.7; max-width:48ch; margin:18px auto 0; text-shadow:0 1px 16px rgba(20,14,8,.6), 0 1px 3px rgba(20,14,8,.45); }
.acq-appel-actions{ display:flex; justify-content:center; align-items:center; gap:clamp(18px,3vw,36px); margin:clamp(28px,5vh,48px) 0 0; flex-wrap:wrap; }
.acq-appel-cta{ margin:0; }
.acq-guide{ color:var(--blanc); text-shadow:0 1px 14px rgba(20,14,8,.6), 0 1px 3px rgba(20,14,8,.5); }
.acq-guide::after{ background:var(--blanc); }

/* ============================================================
   DESKTOP (base a deux colonnes, sert aussi de repli sans enrichi)
   ============================================================ */
@media (min-width:901px){
  .acq-open-grid{ grid-template-columns:minmax(0,5fr) 1.2fr minmax(0,5fr); align-items:center; }
  .acq-open-copy{ grid-column:1; }
  /* Grande carte alignee comme aujourd'hui : callee a droite de sa colonne. */
  .acq-open-cards{ grid-column:3; margin-inline:auto 0; }
  .acq-trip{ grid-template-columns:repeat(3,1fr); gap:0; }
  .acq-trip-col{ padding:22px clamp(22px,2.6vw,44px) 0; }
  .acq-trip-col + .acq-trip-col{ border-left:1px solid var(--line); }
  .acq-trip-col:first-child{ padding-left:0; }
  .acq-trip-col:last-child{ padding-right:0; }

  .acq-interior-grid{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); }
  .acq-vefa-grid{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); }

  .acq-gar-list{ grid-template-columns:repeat(3,1fr); gap:0; }
  .acq-gar-item{ padding:22px clamp(20px,2.4vw,40px) 0; }
  .acq-gar-item + .acq-gar-item{ border-left:1px solid var(--line); }
  .acq-gar-item:first-child{ padding-left:0; }
  .acq-gar-item:last-child{ padding-right:0; }

  .acq-chantier-grid{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); }
}

/* ============================================================
   ENRICHI : desktop (>=1025px), mouvement autorise, JS present.
   ============================================================ */
@media (min-width:1025px) and (prefers-reduced-motion:no-preference){
  /* 1. Ouverture : la petite carte est ancree par le HAUT (voir .acq-open-sec, --acq-open-sectop
     posee par JS) et deborde sous la grande carte ; son debord est compte dans la composition
     via --acq-open-debord. Aucune regle de bas ici. */

  /* Cartes : ouverture par clip-path + derive d'echelle de l'image. Passe 13 (point 9) :
     l'image des cartes d'ouverture est dans <picture>, d'ou le selecteur > picture > img. */
  html.acq-js [data-card]{ clip-path:inset(100% 0 0 0 round 18px); will-change:clip-path; }
  html.acq-js [data-card] > img, html.acq-js [data-card] > picture > img, html.acq-js [data-card] .jn-img{ transform:scale(1.08); will-change:transform; }
  html.acq-js [data-card].is-in{ clip-path:inset(0 0 0 0 round 18px); transition:clip-path .9s var(--ease-cine); }
  html.acq-js [data-card].is-in > img, html.acq-js [data-card].is-in > picture > img, html.acq-js [data-card].is-in .jn-img{ transform:scale(1); transition:transform 1.6s var(--ease-cine); }

  /* 4. Parcours : le trait qui se trace et le soleil qui avance (mouvement). La
     structure en trois colonnes et le soleil colle sont definis dans le bloc
     >=1025px ci-dessous (visibles aussi en mouvement reduit). */
  html.acq-js .acq-trait-line{ position:absolute; left:50%; top:0; width:1px; height:100%; transform:translateX(-50%) scaleY(var(--trait,0)); transform-origin:top center; background:var(--bronze); opacity:.7; }
  html.acq-js .acq-trait-glow{ position:absolute; left:50%; top:calc(var(--trait,0) * 100%); width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:radial-gradient(circle, rgba(152,118,71,.85) 0%, rgba(152,118,71,0) 70%); opacity:0; }
  html.acq-js .acq-parcours.is-tracing .acq-trait-glow{ opacity:1; }
  html.acq-js .acq-trait-dot{ position:absolute; left:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; border:1px solid var(--bronze); background:var(--sable-clair); transition:background .4s var(--ease-cine); }
  html.acq-js .acq-trait-dot.is-on{ background:var(--bronze); }

  /* 5. VEFA : la planche deborde ~10 vh sur le chantier. */
  html.acq-js .acq-vefa-plank{ margin-bottom:-10vh; }

  /* 6. Chantier : SEUL epinglage de la page (GSAP pin). */
  html.acq-js .acq-chantier-pin{ position:relative; }
  html.acq-js .acq-chantier-grid{ min-height:100svh; align-content:center; }
  html.acq-js .acq-window-card{ clip-path:inset(0 0 0 0 round 18px); }

  /* Fenetre : ouverture de la bande verticale centrale au plein cadre. */
  html.acq-js .acq-chantier-window.is-closed .acq-window-card{ clip-path:inset(0 38% 0 38% round 18px); }
  html.acq-js .acq-chantier-window .acq-window-card{ transition:clip-path 1s var(--ease-cine); }
}

/* ============================================================
   STRUCTURE PARCOURS a >=1025px (quel que soit le mouvement, JS present) :
   trois colonnes, trait dans la gouttiere, course du soleil collee et centree.
   ============================================================ */
@media (min-width:1025px){
  html.acq-js .acq-parcours-grid{ display:grid; grid-template-columns:64px minmax(0,1fr) minmax(0,1fr); column-gap:clamp(24px,3vw,56px); }
  html.acq-js .acq-trait{ display:block; position:relative; grid-column:1; }
  html.acq-js .acq-trait::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%); background:var(--bronze); opacity:.18; }
  html.acq-js .acq-steps{ grid-column:2; }
  html.acq-js .acq-step{ min-height:56vh; display:flex; flex-direction:column; justify-content:center; }
  html.acq-js .acq-sun{ grid-column:3; position:sticky; top:0; height:100vh; height:100svh; display:flex; align-items:center; justify-content:center; }
}

/* Mouvement reduit : l'arche complete, fixe (arc trace + surface teintee), sans soleil. */
@media (prefers-reduced-motion:reduce){
  html.acq-js .acq-sun-arc{ stroke-dashoffset:0; }
  html.acq-js .acq-sun-fill{ fill-opacity:.55; transition:none; }
  html.acq-js .acq-sun-disk, html.acq-js .acq-sun-glow{ display:none; }
}

/* Le canvas du chantier n'existe qu'en enrichi ; sinon on montre la pile d'images.
   Le fond reste sable clair comme en enrichi : seuls les affichages changent. */
@media (max-width:1024px), (prefers-reduced-motion:reduce){
  .acq-chantier-window{ display:none; }
  .acq-frise{ display:none; }
  .acq-chantier-stack{ display:block; }
  .acq-chantier-item figcaption{ color:var(--blanc); }
}
/* Sans JS : memes replis (pin jamais arme, pile visible). */
html:not(.acq-js) .acq-chantier-window, html:not(.acq-js) .acq-frise{ display:none; }
html:not(.acq-js) .acq-chantier-stack{ display:block; }

/* Sans JS / reduced : entrees desactivees, tout lisible, cartes ouvertes. */
html:not(.acq-js) [data-enter], html:not(.acq-js) .acq-ln > span{ opacity:1; transform:none; }
html:not(.acq-js) .acq-trip-rule, html:not(.acq-js) .acq-gar-rule{ transform:scaleX(1); }
@media (prefers-reduced-motion:reduce){
  [data-enter]{ opacity:1; transform:none; transition:none; }
  .acq-ln > span{ transform:none; transition:none; }
  .acq-trip-rule, .acq-gar-rule{ transform:scaleX(1); }
  html.acq-js [data-card]{ clip-path:none; }
  html.acq-js [data-card] > img, html.acq-js [data-card] .jn-img{ transform:none; }
}

/* ============================================================
   MOBILE (<=900px) : tout empile, lisible, dans l'ordre.
   ============================================================ */
@media (max-width:900px){
  .acq-open-grid{ padding-top:clamp(96px,14vh,140px); }
  /* Passe 13 (point 9c) : le logo, PUIS la carte des associes EN DESSOUS, en entier,
     sans aucune superposition qui masque un texte. */
  .acq-open-cards{ margin-top:clamp(28px,5vh,44px); max-width:420px; }
  .acq-open-main{ width:min(100%, 300px); margin-inline:auto; aspect-ratio:404 / 548; }
  .acq-open-sec{ position:static; width:100%; aspect-ratio:657 / 347; margin:clamp(20px,4vh,32px) auto 0; left:auto; right:auto; top:auto; bottom:auto; }
  .acq-open-cards{ padding-bottom:0; }
  .acq-interior-cards{ margin-top:clamp(28px,5vh,44px); }
  .acq-int-sec{ width:46%; left:auto; right:-4%; bottom:-8%; }
  /* Parcours : un seul trait au bord gauche, les sept textes dessous (aucune photo). */
  .acq-parcours-grid{ position:relative; padding-left:22px; }
  .acq-parcours-grid::before{ content:""; position:absolute; left:4px; top:0; bottom:0; width:1px; background:var(--bronze); opacity:.3; }
}