/* =========================================================
   HOMWEB Photographe — landing « L’Accrochage »
   Source visuelle : Figma « HOMWEB — AI Web Design System »,
   page 08 — PROJECT · HOMWEB PHOTOGRAPHE
   (desktop 1440 · tablet 768 · mobile 390).
   Tout est scopé sous #ff-landing : le wizard (#ff-app-root) et
   styles.css ne sont pas modifiés.
   Breakpoints : desktop ≥ 1200 · tablet 768–1199 · mobile < 768.
   ========================================================= */

#ff-landing,#ff-app-root{
  /* Tokens (partagés avec le brief : css/brief.css) — collection Figma « Project · HOMWEB Photographe » */
  --acc-wall:#F4F2EE;
  --acc-wall-alt:#ECE9E3;
  --acc-cimaise:#E6E2DB;
  --acc-ink:#1A1A1A;
  --acc-label:#66625B;
  --acc-rule:#D6D1C8;
  --acc-red:#D7261E;
  --acc-on-ink:#F4F2EE;
  --acc-sans:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --acc-mono:'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --acc-margin:80px;
  --acc-max:1280px;
  --acc-ease:cubic-bezier(.22,.61,.36,1);

  background:var(--acc-wall);
  color:var(--acc-ink);
  font-family:var(--acc-sans);
  font-size:16px;
  line-height:1.5;
}
/* Resets à spécificité « élément » (0,0,1) : ils l’emportent sur les règles
   globales de styles.css (chargé avant) sans écraser les classes .acc-*. */
:where(#ff-landing) h1,:where(#ff-landing) h2,:where(#ff-landing) h3{ font-family:var(--acc-sans); font-weight:300; margin:0; }
:where(#ff-landing) figure{ margin:0; }
:where(#ff-landing) img{ width:100%; height:auto; }
#ff-landing :focus-visible{ outline:2px solid var(--acc-ink); outline-offset:4px; border-radius:0; }
/* Liens : soulignement éditorial qui apparaît (couleur + léger rapprochement), jamais seul porteur d’information */
#ff-landing a:not(.acc-btn):not(.acc-brand){ text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:transparent; text-underline-offset:7px; transition:text-decoration-color .25s var(--acc-ease), text-underline-offset .25s var(--acc-ease); }
#ff-landing a:not(.acc-btn):not(.acc-brand):hover,#ff-landing a:not(.acc-btn):not(.acc-brand):focus-visible{ text-decoration-color:currentColor; text-underline-offset:4px; }
.acc-footer-legal a,.acc-footer-links a{ text-decoration-color:rgba(26,26,26,.25) !important; }

.acc-wrap{ width:100%; max-width:calc(var(--acc-max) + 2 * var(--acc-margin)); margin:0 auto; padding:0 var(--acc-margin); }
.acc-visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Primitives ---------- */
.acc-label{ font-weight:400; font-family:var(--acc-mono); font-size:11px; line-height:1.4; letter-spacing:.08em; text-transform:uppercase; color:var(--acc-label); margin:0 0 20px; }
.acc-caption{ font-family:var(--acc-mono); font-size:11px; letter-spacing:.06em; color:var(--acc-label); margin-top:12px; }
.acc-cartel{ display:flex; flex-direction:column; gap:4px; margin-top:14px; font-family:var(--acc-mono); font-size:12px; line-height:1.45; letter-spacing:.04em; color:var(--acc-label); }
.acc-cartel-name{ color:var(--acc-ink); font-weight:500; text-transform:uppercase; }
.acc-cartel-desc{ font-family:var(--acc-sans); font-size:14px; line-height:1.5; letter-spacing:0; }

.acc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 26px;
  background:var(--acc-ink); color:var(--acc-on-ink);
  font-family:var(--acc-sans); font-size:17px; font-weight:500; line-height:1.2; white-space:nowrap;
  transition:background-color .22s var(--acc-ease), transform .14s var(--acc-ease);
}
.acc-btn:hover{ background:#000; }
.acc-btn:active{ transform:scale(.985); }
.acc-dot{ transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s; }
.acc-btn:hover .acc-dot,.acc-btn:focus-visible .acc-dot{ transform:scale(1.35); box-shadow:0 0 0 3px rgba(215,38,30,.18); }
.acc-btn--small{ min-height:46px; padding:0 18px; font-size:14px; }
.acc-btn--block{ display:flex; width:100%; }
.acc-dot{ width:9px; height:9px; border-radius:50%; background:var(--acc-red); flex:none; }
.acc-btn--small .acc-dot{ width:7px; height:7px; }
.acc-link{ font-size:16px; font-weight:500; color:var(--acc-ink); }
.acc-cta-meta{ font-size:16px; color:var(--acc-label); }
.acc-cta-row{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }

.acc-h2{ font-weight:300; letter-spacing:-.035em; color:var(--acc-ink); }

/* ---------- Nav ---------- */
.acc-nav{ position:relative; z-index:20; background:var(--acc-wall); }
.acc-nav-inner{ height:88px; display:flex; align-items:center; gap:36px; }
.acc-brand{ display:inline-flex; align-items:center; gap:12px; margin-right:auto; min-height:44px; }
.acc-brand-logo{ display:block; width:auto; height:22px; }
.acc-brand-sep{ width:1px; height:16px; background:var(--acc-rule); }
.acc-brand-tag{ font-family:var(--acc-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--acc-label); }
.acc-nav-links{ display:flex; gap:36px; font-size:15px; }
.acc-menu-toggle{ display:none; font-family:var(--acc-sans); font-size:14px; font-weight:500; min-height:44px; padding:0 4px; }
.acc-mobile-menu{ display:none; }

/* ---------- 02 Hero ---------- */
.acc-hero{ padding:94px 0 36px; }
.acc-hero-grid{ display:grid; grid-template-columns:minmax(0,620px) 480px; column-gap:100px; align-items:center; }
.acc-hero-text{ display:flex; flex-direction:column; align-items:flex-start; }
.acc-hero-text .acc-label{ font-size:12px; margin-bottom:18px; }
.acc-h1{ font-size:72px; line-height:76px; letter-spacing:-.03em; color:var(--acc-ink); }
.acc-hero-sub{ font-size:19px; line-height:29px; max-width:500px; margin-top:28px; }
.acc-hero-ctas{ display:flex; align-items:center; gap:28px; margin-top:40px; order:3; }
.acc-price-line{ order:4; margin-top:22px; display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; font-size:16px; }
.acc-price-line strong{ font-size:18px; font-weight:500; }
#resume-banner-slot{ order:5; }
/* Bannière « brief en cours » (générée par js/landing.js) : même logique, habillage L’Accrochage */
#resume-banner-slot .ff-resume-banner{ margin-top:28px; padding:16px 0 0; background:none; border:0; border-top:1px solid var(--acc-rule); border-radius:0; box-shadow:none; font-family:var(--acc-sans); max-width:500px; }
#resume-banner-slot .ff-resume-banner p{ font-size:15px; line-height:22px; color:var(--acc-label); margin-bottom:14px; }
#resume-banner-slot .ff-resume-banner strong{ color:var(--acc-ink); font-weight:500; }
#resume-banner-slot .ff-btn-primary,#resume-banner-slot .ff-btn-ghost{ height:46px; padding:0 18px; border-radius:0; font-family:var(--acc-sans); font-size:14px; font-weight:500; box-shadow:none; transform:none; }
#resume-banner-slot .ff-btn-primary{ background:var(--acc-ink); color:var(--acc-on-ink); }
#resume-banner-slot .ff-btn-ghost{ background:none; color:var(--acc-ink); border:1px solid var(--acc-ink); }
.acc-hero-img{ aspect-ratio:2 / 3; object-fit:cover; }

/* ---------- 03 Offer (texte de salle + cartels) ---------- */
.acc-offer{ padding:96px 0 120px; }
.acc-offer-grid{ display:grid; grid-template-columns:minmax(0,1fr) 440px; column-gap:clamp(100px,9vw,140px); align-items:start; }
.acc-walltext{ font-size:42px; line-height:56px; font-weight:300; letter-spacing:-.014em; color:var(--acc-label); margin-top:12px; }
.acc-walltext strong{ font-weight:300; color:var(--acc-ink); }
.acc-labels{ margin-top:-4px; }
.acc-labels li{ display:grid; grid-template-columns:auto 1fr; column-gap:20px; padding:18px 0; border-top:1px solid var(--acc-rule); }
.acc-labels-n{ font-family:var(--acc-mono); font-size:12px; font-weight:500; letter-spacing:.04em; padding-top:5px; }
.acc-labels h3{ font-size:20px; font-weight:500; line-height:1.35; letter-spacing:-.005em; }
.acc-labels p{ font-size:14px; line-height:21px; color:var(--acc-label); margin-top:4px; }

/* ---------- 04 Rooms : voir « 04 Les salles (8 sites) » en fin de fichier ---------- */

/* ---------- 05 Bespoke ---------- */
.acc-bespoke{ padding:120px 0 180px; }
.acc-bespoke-grid{ display:grid; grid-template-columns:minmax(0,880px) 340px; column-gap:60px; align-items:end; }
.acc-bespoke-figure img{ aspect-ratio:3 / 2; object-fit:cover; }
.acc-bespoke-text{ padding-bottom:28px; }
.acc-h2--bespoke{ font-size:40px; line-height:46px; }
.acc-points{ margin:40px 0 0; }
.acc-points div{ border-top:1px solid var(--acc-rule); padding:14px 0 20px; }
.acc-points dt{ font-size:16px; font-weight:500; }
.acc-points dd{ margin:6px 0 0; font-size:14px; line-height:20px; color:var(--acc-label); }

/* ---------- 06 Process (plan d’accrochage) ---------- */
.acc-process{ background:var(--acc-wall-alt); padding:110px 0 98px; }
.acc-h2--process{ font-size:44px; line-height:50px; max-width:760px; }
.acc-steps{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); column-gap:66px; margin-top:74px; padding-top:50px; }
.acc-steps::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--acc-ink); }
.acc-steps::after{ content:""; position:absolute; right:-5px; top:-5px; width:11px; height:11px; border-radius:50%; background:var(--acc-red); }
.acc-steps li{ position:relative; }
.acc-steps li::before{ content:""; position:absolute; left:-4px; top:-54px; width:9px; height:9px; border-radius:50%; background:var(--acc-ink); }
.acc-step-n{ display:block; font-size:72px; line-height:72px; font-weight:300; letter-spacing:-.04em; }
.acc-steps h3{ font-size:20px; font-weight:500; line-height:1.3; margin-top:22px; }
.acc-steps p{ font-size:15px; line-height:23px; color:var(--acc-label); margin-top:10px; max-width:340px; }
.acc-cta-row--process{ margin-top:84px; }
.acc-cta-row--process .acc-cta-meta{ font-size:15px; }

/* ---------- 07 Price ---------- */
.acc-price{ padding:140px 0 180px; }
.acc-price-grid{ display:grid; grid-template-columns:400px 420px 300px; column-gap:80px; align-items:start; }
.acc-price-big{ font-size:140px; line-height:140px; font-weight:300; letter-spacing:-.05em; margin-left:-8px; }
.acc-price-per{ font-size:22px; font-weight:500; margin-top:20px; }
.acc-price-note{ font-size:16px; line-height:24px; color:var(--acc-label); margin-top:14px; max-width:380px; }
.acc-price-main .acc-btn{ margin-top:36px; }
.acc-price-included .acc-label{ margin:-22px 0 14px; }
.acc-included li{ border-top:1px solid var(--acc-rule); padding:17px 0 16px; font-size:17px; line-height:22px; }
.acc-price-figure img{ aspect-ratio:3 / 4; object-fit:cover; }

/* ---------- 08 Designer ---------- */
.acc-designer{ background:var(--acc-wall-alt); padding:120px 0 120px; }
.acc-designer-grid{ display:grid; grid-template-columns:480px minmax(0,560px); column-gap:160px; align-items:center; }
.acc-designer-figure img{ aspect-ratio:4 / 5; object-fit:cover; background:#0b0b0b; }
.acc-h2--designer{ font-size:48px; line-height:54px; }
.acc-designer-copy{ font-size:18px; line-height:28px; color:var(--acc-label); max-width:470px; margin-top:32px; }
.acc-designer-text .acc-link{ display:inline-block; margin-top:32px; }

/* ---------- 09 FAQ ---------- */
.acc-faq{ padding:110px 0 120px; scroll-margin-top:0; }
.acc-faq-grid{ display:grid; grid-template-columns:380px minmax(0,800px); column-gap:100px; align-items:start; }
.acc-h2--faq{ font-size:36px; line-height:42px; }
.acc-faq-contact{ margin-top:32px; font-size:15px; line-height:26px; color:var(--acc-label); }
.acc-faq-contact .acc-link{ font-size:15px; }
.acc-faq-list{ border-bottom:1px solid var(--acc-rule); }
.acc-faq-item{ border-top:1px solid var(--acc-rule); }
.acc-faq-item h3{ font-weight:400; }
.acc-faq-item button{ width:100%; min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:24px; text-align:left; font-family:var(--acc-sans); font-size:20px; line-height:1.35; color:var(--acc-ink); padding:16px 0; }
.acc-faq-icon{ position:relative; width:18px; height:18px; flex:none; }
.acc-faq-icon::before,.acc-faq-icon::after{ content:""; position:absolute; left:0; top:8.5px; width:18px; height:1px; background:var(--acc-ink); transition:transform .3s var(--acc-ease); }
.acc-faq-icon::after{ transform:rotate(90deg); }
.acc-faq-item button[aria-expanded="true"] .acc-faq-icon::after{ transform:rotate(0deg); }
.acc-faq-panel p{ font-size:16px; line-height:24px; color:var(--acc-label); max-width:640px; padding:0 0 28px; margin-top:-6px; }

/* ---------- 10 Final ---------- */
.acc-final{ padding:0 0 160px; }
.acc-final-figure img{ aspect-ratio:1440 / 760; object-fit:cover; }
.acc-final-text{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:88px; }
.acc-h2--final{ font-size:64px; line-height:68px; max-width:1000px; letter-spacing:-.04em; }
.acc-final-text .acc-btn{ margin-top:40px; }
.acc-final-text .acc-cta-meta{ font-size:15px; margin-top:20px; }

/* ---------- Footer ---------- */
.acc-footer-inner{ position:relative; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; padding-top:60px; padding-bottom:83px; }
.acc-footer-inner::before{ content:""; position:absolute; top:0; left:var(--acc-margin); right:var(--acc-margin); height:1px; background:var(--acc-rule); }
.acc-footer-brand{ display:flex; align-items:center; gap:12px; }
.acc-footer-brand .acc-brand-logo{ height:20px; }
.acc-footer-links{ font-size:14px; color:var(--acc-label); margin-top:12px; }
.acc-footer-legal{ font-size:13px; color:var(--acc-label); }

/* ---------- Sticky CTA (mobile only) ---------- */
.acc-sticky{ display:none; }

/* Mouvement : voir « MOTION » en fin de fichier. */
@media (prefers-reduced-motion: reduce){
  /* styles.css active html{scroll-behavior:smooth} pour tout le module */
  html:has(#ff-landing:not([hidden])){ scroll-behavior:auto; }
  .acc-track{ scroll-behavior:auto; }
  .acc-rooms-progress span{ transition:none; }
  .acc-faq-panel.acc-anim,.acc-faq-panel.acc-anim.is-open,.acc-rooms,.acc-room,.acc-sticky{ transition:none !important; }
}

/* =========================================================
   Desktop intermediate (1200–1439) : même composition, marges
   conservées, colonnes fluides.
   ========================================================= */
@media (max-width:1439px) and (min-width:1200px){
  .acc-hero-grid{ grid-template-columns:minmax(0,1fr) 440px; column-gap:80px; }
  .acc-offer-grid{ grid-template-columns:minmax(0,1fr) 400px; column-gap:100px; }
  .acc-bespoke-grid{ grid-template-columns:minmax(0,1fr) 320px; }
  .acc-price-grid{ grid-template-columns:minmax(0,1fr) 380px 260px; column-gap:60px; }
  .acc-designer-grid{ grid-template-columns:440px minmax(0,1fr); column-gap:120px; }
  .acc-faq-grid{ grid-template-columns:320px minmax(0,1fr); column-gap:80px; }
}

/* =========================================================
   TABLET — Figma 768 (8 colonnes, marges 40)
   ========================================================= */
@media (max-width:1199px){
  #ff-landing{ --acc-margin:40px; }
  .acc-nav-inner{ height:76px; gap:24px; }
  .acc-brand-logo{ height:20px; }
  .acc-nav-links{ gap:24px; font-size:14px; }
  .acc-nav-optional{ display:none; }

  .acc-hero{ padding:64px 0 96px; }
  /* Titre pleine largeur, puis accrochage texte / photo sur 2 colonnes */
  .acc-hero-grid{ grid-template-columns:minmax(0,1fr) 320px; column-gap:40px; align-items:start; grid-template-rows:auto auto auto auto auto auto 1fr; }
  .acc-hero-text{ display:contents; }
  .acc-hero-text > .acc-label{ grid-column:1 / -1; grid-row:1; font-size:11px; margin-bottom:12px; }
  .acc-h1{ grid-column:1 / -1; grid-row:2; font-size:60px; line-height:64px; letter-spacing:-.04em; max-width:640px; }
  .acc-hero-sub{ grid-column:1; grid-row:3; font-size:17px; line-height:26px; margin-top:48px; }
  /* ordre tablette (Figma, après critique) : CTA → prix → « Voir des exemples » */
  .acc-hero-ctas{ display:contents; }
  #acc-hero-cta{ grid-column:1; grid-row:4; justify-self:start; margin-top:32px; }
  .acc-price-line{ grid-column:1; grid-row:5; margin-top:18px; flex-direction:column; gap:4px; font-size:15px; }
  .acc-price-line strong{ font-size:17px; }
  .acc-hero-ctas .acc-link{ grid-column:1; grid-row:6; justify-self:start; margin-top:24px; font-size:15px; }
  #resume-banner-slot{ grid-column:1; grid-row:7; }
  .acc-hero-figure{ grid-column:2; grid-row:3 / span 5; margin-top:48px; }

  .acc-offer{ padding:72px 0 72px; }
  .acc-offer-grid{ display:block; }
  .acc-walltext{ font-size:32px; line-height:42px; letter-spacing:-.03em; }
  .acc-labels{ margin-top:48px; }
  .acc-labels li{ grid-template-columns:44px 264px 1fr; padding:18px 0 28px; }
  .acc-labels li > div{ display:contents; }
  .acc-labels h3{ font-size:19px; }
  .acc-labels p{ font-size:15px; line-height:22px; margin-top:2px; }

  .acc-cta-meta{ font-size:15px; }

  .acc-bespoke{ padding:80px 0 72px; }
  .acc-bespoke-grid{ display:block; }
  .acc-bespoke-text{ display:grid; grid-template-columns:300px 1fr; column-gap:48px; padding:0; margin-top:48px; }
  .acc-h2--bespoke{ font-size:36px; line-height:42px; }
  .acc-points{ margin:0; }
  .acc-points dt{ font-size:15px; }

  .acc-process{ padding:72px 0 80px; }
  .acc-h2--process{ font-size:36px; line-height:42px; max-width:560px; }
  .acc-steps{ margin-top:48px; column-gap:32px; padding-top:40px; }
  .acc-steps li::before{ top:-44px; }
  .acc-step-n{ font-size:52px; line-height:52px; }
  .acc-steps h3{ font-size:17px; margin-top:16px; }
  .acc-steps p{ font-size:14px; line-height:21px; }
  .acc-cta-row--process{ margin-top:56px; flex-direction:column; align-items:flex-start; gap:14px; }
  .acc-cta-row--process .acc-cta-meta{ font-size:14px; }

  .acc-price{ padding:72px 0 80px; }
  .acc-price-grid{ grid-template-columns:minmax(0,1fr) 340px; column-gap:40px; }
  .acc-price-figure{ display:none; }
  .acc-price-big{ font-size:112px; line-height:112px; }
  .acc-price-per{ font-size:20px; margin-top:12px; }
  .acc-price-note{ font-size:15px; line-height:23px; max-width:300px; }
  .acc-price-included .acc-label{ margin:12px 0 18px; }
  .acc-included li{ padding:14px 0; font-size:15px; }

  .acc-designer{ padding:80px 0; }
  .acc-designer-grid{ grid-template-columns:320px minmax(0,1fr); column-gap:48px; }
  .acc-h2--designer{ font-size:32px; line-height:38px; }
  .acc-designer-copy{ font-size:16px; line-height:25px; margin-top:24px; }
  .acc-designer-text .acc-link{ margin-top:24px; font-size:15px; }

  .acc-faq{ padding:72px 0 80px; }
  .acc-faq-grid{ display:block; }
  .acc-h2--faq{ font-size:36px; line-height:42px; max-width:520px; }
  .acc-faq-contact{ display:none; }
  .acc-faq-list{ margin-top:40px; }
  .acc-faq-item button{ font-size:18px; min-height:78px; }
  .acc-faq-panel p{ font-size:15px; line-height:23px; }
  .acc-faq-list::after{ content:none; }

  .acc-final{ padding-bottom:96px; }
  .acc-final-figure img{ aspect-ratio:3 / 2; }
  .acc-final-text{ margin-top:84px; }
  .acc-h2--final{ font-size:48px; line-height:52px; max-width:640px; }
  .acc-final-text .acc-btn{ margin-top:32px; }
  .acc-final-text .acc-cta-meta{ font-size:14px; max-width:560px; }

  .acc-footer-inner{ flex-direction:column; align-items:flex-start; padding-top:48px; padding-bottom:56px; }
}

/* =========================================================
   MOBILE — Figma 390 (marges 20) — composition dédiée
   ========================================================= */
@media (max-width:767px){
  #ff-landing{ --acc-margin:20px; }
  .acc-nav-inner{ height:56px; }
  .acc-brand{ gap:10px; }
  .acc-brand-logo{ height:18px; }
  .acc-brand-tag{ font-size:10px; }
  .acc-nav-links,.acc-nav-cta{ display:none; }
  .acc-menu-toggle{ display:inline-block; }
  .acc-mobile-menu:not([hidden]){ display:flex; flex-direction:column; padding:8px 20px 24px; border-bottom:1px solid var(--acc-rule); background:var(--acc-wall); }
  .acc-mobile-menu a:not(.acc-btn){ min-height:48px; display:flex; align-items:center; font-size:17px; border-top:1px solid var(--acc-rule); }
  .acc-mobile-menu .acc-btn{ margin-top:16px; }

  .acc-hero{ padding:20px 0 56px; }
  .acc-hero-grid{ display:block; }
  .acc-hero-text{ display:flex; }
  .acc-hero-text > .acc-label{ font-size:10px; margin-bottom:10px; }
  .acc-h1{ font-size:40px; line-height:44px; letter-spacing:-.04em; }
  .acc-hero-sub{ font-size:15px; line-height:22px; margin-top:16px; order:1; }
  .acc-price-line{ order:2; margin-top:14px; flex-direction:row; gap:0; font-size:14px; font-weight:500; }
  .acc-price-line strong{ font-size:14px; }
  .acc-price-line strong::after{ content:" · "; white-space:pre; font-weight:500; }
  .acc-hero-ctas{ display:flex; flex-direction:column; align-items:flex-start; order:3; width:100%; margin-top:16px; gap:14px; }
  #acc-hero-cta{ width:100%; margin-top:0; }
  .acc-hero-ctas .acc-link{ font-size:15px; margin-top:0; }
  #resume-banner-slot{ order:4; width:100%; }
  .acc-hero-figure{ margin-top:28px; }
  .acc-hero-img{ aspect-ratio:5 / 6; object-position:50% 30%; }
  .acc-hero-figure .acc-cartel{ flex-direction:row; flex-wrap:wrap; gap:0 6px; font-size:10px; margin-top:10px; }
  .acc-hero-figure .acc-cartel span + span::before{ content:"— "; }

  .acc-offer{ padding:48px 0 40px; }
  .acc-walltext{ font-size:26px; line-height:34px; letter-spacing:-.03em; }
  .acc-labels{ margin-top:32px; }
  .acc-labels li{ grid-template-columns:36px 1fr; padding:14px 0 22px; }
  .acc-labels li > div{ display:block; }
  .acc-labels-n{ font-size:11px; padding-top:5px; }
  .acc-labels h3{ font-size:18px; }
  .acc-labels p{ font-size:14px; line-height:21px; margin-top:6px; }


  .acc-bespoke{ padding:48px 0 40px; }
  .acc-bespoke-grid{ padding:0; }
  .acc-bespoke-figure img{ aspect-ratio:3 / 2; }
  .acc-bespoke-figure .acc-caption{ padding:0 20px; font-size:10px; }
  .acc-bespoke-text{ display:block; margin-top:36px; padding:0 20px; }
  .acc-h2--bespoke{ font-size:30px; line-height:34px; }
  .acc-points{ margin-top:24px; }
  .acc-points div{ padding:12px 0 16px; }

  .acc-process{ padding:48px 0 56px; }
  .acc-h2--process{ font-size:30px; line-height:34px; }
  .acc-steps{ grid-template-columns:1fr; row-gap:36px; margin-top:36px; padding:0 0 0 28px; }
  .acc-steps::before{ left:4px; right:auto; top:12px; bottom:auto; width:1px; height:calc(100% - 90px); }
  .acc-steps::after{ display:none; }
  .acc-steps li{ display:grid; grid-template-columns:52px 1fr; }
  .acc-steps li::before{ left:-28px; top:10px; }
  .acc-steps li:last-child::before{ background:var(--acc-red); }
  .acc-step-n{ font-size:34px; line-height:34px; }
  .acc-steps h3{ font-size:17px; margin-top:6px; }
  .acc-steps p{ font-size:14px; line-height:21px; margin-top:6px; }
  .acc-cta-row--process{ margin-top:36px; }
  .acc-cta-row--process .acc-btn{ width:100%; }
  .acc-cta-row--process .acc-cta-meta{ display:none; }

  .acc-price{ padding:48px 0 40px; }
  .acc-price-grid{ display:block; }
  .acc-price-big{ font-size:104px; line-height:104px; }
  .acc-price-per{ font-size:19px; margin-top:8px; }
  .acc-price-note{ font-size:14px; line-height:21px; margin-top:10px; }
  .acc-price-main .acc-btn{ width:100%; margin-top:24px; }
  .acc-price-included{ margin-top:40px; }
  .acc-price-included .acc-label{ margin:0 0 14px; font-size:10px; }

  .acc-designer{ padding:48px 0 56px; }
  /* ordre Figma mobile : libellé → titre → texte → portrait (décalé) → cartel → contact */
  .acc-designer-grid{ display:flex; flex-direction:column; }
  .acc-designer-text{ display:contents; }
  .acc-designer-text .acc-label{ order:1; }
  .acc-h2--designer{ order:2; }
  .acc-designer-copy{ order:3; }
  .acc-designer-figure{ order:4; margin:32px 0 0 40px; width:310px; max-width:calc(100% - 40px); }
  .acc-designer-text .acc-link{ order:5; align-self:flex-start; margin-top:24px; }
  .acc-designer-figure .acc-cartel{ font-size:10px; flex-direction:row; gap:6px; }
  .acc-designer-figure .acc-cartel span + span::before{ content:"— "; }
  .acc-h2--designer{ font-size:30px; line-height:34px; }
  .acc-designer-copy{ font-size:15px; line-height:23px; margin-top:16px; }

  .acc-faq{ padding:48px 0 48px; }
  .acc-h2--faq{ font-size:28px; line-height:32px; }
  .acc-faq-list{ margin-top:28px; }
  .acc-faq-item button{ font-size:16px; line-height:22px; min-height:56px; padding:16px 0; }
  .acc-faq-panel p{ font-size:14px; line-height:21px; padding-bottom:20px; }
  .acc-faq-contact{ display:block; margin-top:24px; }

  .acc-final{ padding-bottom:64px; }
  .acc-final-figure img{ aspect-ratio:390 / 292; }
  .acc-final-figure .acc-caption{ font-size:10px; }
  .acc-final-text{ margin-top:56px; }
  .acc-h2--final{ font-size:34px; line-height:38px; }
  .acc-final-text .acc-btn{ width:100%; margin-top:28px; }
  .acc-final-text .acc-cta-meta{ font-size:13px; line-height:19px; }

  .acc-footer-inner{ padding-top:32px; padding-bottom:calc(96px + env(safe-area-inset-bottom)); gap:0; }
  .acc-footer-links{ font-size:12px; }
  /* mobile : mentions en toute dernière ligne du pied de page, séparées */
  .acc-footer-legal{ order:9; width:100%; margin-top:40px; padding-top:18px; border-top:1px solid var(--acc-rule); font-size:12px; line-height:1.7; }

  .acc-sticky{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:50;
    padding:12px 20px calc(12px + env(safe-area-inset-bottom));
    background:var(--acc-wall); border-top:1px solid var(--acc-rule);
    transform:translateY(110%); visibility:hidden;
    transition:transform .35s var(--acc-ease), visibility 0s linear .35s;
  }
  .acc-sticky.is-visible{ transform:none; visibility:visible; transition:transform .35s var(--acc-ease); }
  .acc-sticky .acc-btn{ font-size:16px; }
  /* cibles tactiles ≥ 44 px sans changer l’espacement visuel */
  .acc-link{ display:inline-block; padding:11px 0; margin-top:-11px; margin-bottom:-11px; }
}

/* =========================================================
   MOBILE — ajustements demandés après revue (2026-09-24)
   ========================================================= */
@media (max-width:767px){
  /* Hero : la photo passe en premier */
  .acc-hero{ padding-top:8px; }
  .acc-hero-grid{ display:flex; flex-direction:column; }
  .acc-hero-figure{ order:-1; margin:0 0 28px; }

  /* Tarif : le bouton vient après « Ce qui est inclus » */
  .acc-price-grid{ display:flex; flex-direction:column; }
  .acc-price-main{ display:contents; }
  .acc-price-included{ order:1; }
  .acc-price-main .acc-btn{ order:2; margin-top:28px; }

  /* « Ce qui est inclus » : coches */
  .acc-included li{ position:relative; padding-left:30px; }
  .acc-included li::before{
    content:""; position:absolute; left:3px; top:50%; width:12px; height:6px;
    border-left:1.5px solid var(--acc-ink); border-bottom:1.5px solid var(--acc-ink);
    transform:translateY(-70%) rotate(-45deg);
  }

  /* FAQ : « Une autre question ? » après les questions */
  .acc-faq-grid{ display:flex; flex-direction:column; }
  .acc-faq-head{ display:contents; }
  .acc-faq-list{ order:1; }
  .acc-faq-contact{ order:2; margin-top:28px; }

  /* Invitation finale : le bouton après le texte */
  .acc-final-text .acc-cta-meta{ order:1; margin-top:20px; }
  .acc-final-text .acc-btn{ order:2; margin-top:24px; }
}
@media (max-width:767px) and (prefers-reduced-motion: reduce){
  .acc-sticky,.acc-sticky.is-visible{ transition:none; }
}

/* =========================================================
   04 · LES SALLES (8 sites de démonstration)
   HOMWEB fournit l’architecture d’exposition (scène, cartel, index) ;
   chaque démo apporte son univers (css/demos.css).
   ========================================================= */
.acc-rooms{ padding:110px 0 64px; background:var(--rooms-tone, var(--acc-wall)); transition:background-color .9s var(--acc-ease); }
.acc-rooms-head{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; column-gap:48px; }
.acc-h2--rooms{ font-size:48px; line-height:54px; max-width:760px; }
.acc-rooms-sub{ font-size:17px; line-height:26px; color:var(--acc-label); max-width:540px; margin-top:22px; }
.acc-rooms-nav{ display:flex; align-items:flex-end; gap:40px; padding-bottom:6px; }
.acc-rooms-now{ display:flex; align-items:flex-end; gap:18px; margin:0; }
.acc-rooms-num{ display:inline-flex; align-items:baseline; font-size:56px; line-height:.9; font-weight:300; letter-spacing:-.04em; }
.acc-rooms-current{ display:inline-block; }
.acc-rooms-total{ margin-left:6px; font-size:16px; letter-spacing:0; color:var(--acc-label); }
.acc-rooms-what{ display:flex; flex-direction:column; gap:3px; min-width:190px; padding-bottom:3px; }
.acc-rooms-cat{ font-family:var(--acc-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--acc-label); }
.acc-rooms-who{ font-size:17px; font-weight:500; }
.acc-rooms-arrows{ display:flex; gap:10px; }
.acc-arrow{ width:48px; height:48px; border:1px solid var(--acc-rule); border-radius:50%; font-size:17px; color:var(--acc-ink); transition:border-color .2s var(--acc-ease), background-color .2s var(--acc-ease), transform .14s var(--acc-ease); }
.acc-arrow:hover:not(:disabled){ border-color:var(--acc-ink); }
.acc-arrow:active:not(:disabled){ transform:scale(.96); }
.acc-arrow:disabled{ opacity:.3; cursor:default; }

.acc-track{
  display:flex; gap:40px; margin-top:52px; padding-bottom:12px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-left:max(var(--acc-margin), calc((100vw - var(--acc-max)) / 2));
  scroll-padding-left:max(var(--acc-margin), calc((100vw - var(--acc-max)) / 2));
  scrollbar-width:none;
}
.acc-track::-webkit-scrollbar{ display:none; }
.acc-track:focus-visible{ outline-offset:-2px; }
.acc-room{ flex:0 0 min(1126px, calc((100vw - 2 * var(--acc-margin)) * .88)); scroll-snap-align:start; transition:opacity .7s var(--acc-ease); }
.acc-room:last-child{ margin-right:max(var(--acc-margin), calc((100vw - var(--acc-max)) / 2)); }
.acc-js .acc-room:not(.is-active){ opacity:.5; }
.acc-stage{ background:var(--acc-cimaise); box-shadow:0 34px 60px -34px rgba(26,26,26,.38), 0 2px 6px rgba(26,26,26,.05); }
.acc-stage-bar{ height:30px; display:flex; align-items:center; justify-content:center; background:#E3DFD7; border-bottom:1px solid rgba(26,26,26,.06); font-family:var(--acc-mono); font-size:10.5px; letter-spacing:.06em; color:var(--acc-label); }
.acc-stage-view{ position:relative; overflow:hidden; aspect-ratio:1280 / 800; contain:paint; }
.acc-room-cartel{ display:grid; grid-template-columns:220px minmax(0,1fr) auto; column-gap:40px; align-items:start; margin-top:24px; }
.acc-room-no{ grid-column:1; grid-row:1; margin:0; font-family:var(--acc-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--acc-label); }
.acc-room-name{ grid-column:1; grid-row:2; margin:4px 0 0; font-size:20px; font-weight:500; }
.acc-room-desc{ grid-column:2; grid-row:1 / span 2; margin:0; max-width:470px; font-size:16px; line-height:24px; color:var(--acc-label); }
.acc-room-traits{ grid-column:3; grid-row:1 / span 2; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; max-width:380px; }
.acc-room-traits li{ padding:6px 10px; border:1px solid var(--acc-rule); font-family:var(--acc-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; }
.acc-rooms-foot{ display:flex; flex-direction:column; gap:12px; margin-top:40px; }
.acc-rooms-index{ display:grid; grid-template-columns:repeat(8,1fr); }
.acc-rooms-index button{ display:inline-flex; align-items:baseline; gap:8px; min-height:40px; font-family:var(--acc-sans); font-size:14px; color:var(--acc-label); text-align:left; transition:color .2s var(--acc-ease); }
.acc-rooms-index button span{ font-family:var(--acc-mono); font-size:10px; }
.acc-rooms-index button:hover{ color:var(--acc-ink); }
.acc-rooms-index button[aria-current="true"]{ color:var(--acc-ink); font-weight:500; }
.acc-rooms-progress{ position:relative; height:1px; background:var(--acc-rule); }
.acc-rooms-progress span{ position:absolute; left:0; top:-.5px; width:12.5%; height:2px; background:var(--acc-ink); transition:transform .6s cubic-bezier(.22,1,.36,1); }
.acc-rooms-cta{ margin-top:48px; }

/* =========================================================
   06 · Série d’illustrations « Comment ça marche »
   ========================================================= */
.acc-svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.acc-steps li{ display:flex; flex-direction:column; }
.acc-step-illus{ width:100%; max-width:380px; margin:0 0 30px -4px; }
.acc-step-illus svg,.acc-edit-illus svg{ display:block; width:100%; height:auto; overflow:visible; }
.ill-label{ font-family:var(--acc-mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase; fill:var(--acc-label); }
.ill-red{ fill:var(--acc-red); }
.ill-ghost{ opacity:0; }
.ill-site-name{ font-family:var(--acc-sans); font-size:13px; font-weight:500; fill:var(--acc-ink); }
.ill-site-title{ font-family:var(--acc-sans); font-size:22px; font-weight:300; letter-spacing:-.02em; fill:var(--acc-ink); }
.ill-ui{ font-family:var(--acc-sans); font-size:11.5px; fill:var(--acc-ink); }
.ill-ui-on{ font-size:10.5px; font-weight:500; fill:var(--acc-on-ink); }

/* =========================================================
   06b · Après la mise en ligne — l’espace HOMWEB
   ========================================================= */
.acc-edit{ padding:130px 0 130px; }
.acc-edit-grid{ display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); column-gap:110px; align-items:center; }
.acc-h2--edit{ font-size:44px; line-height:50px; }
.acc-edit-copy{ margin-top:28px; max-width:440px; font-size:18px; line-height:28px; color:var(--acc-label); }
.acc-edit-points{ margin-top:36px; }
.acc-edit-note{ margin-top:18px; font-family:var(--acc-mono); font-size:11px; line-height:1.5; letter-spacing:.04em; color:var(--acc-label); }
.acc-edit-illus{ max-width:640px; justify-self:end; width:100%; }
.acc-edit-illus .ed-b{ opacity:0; }
.acc-edit-illus .ed-a,.acc-edit-illus .ed-b{ transition:opacity .45s var(--acc-ease); }
.acc-edit-illus .ed-ring{ transition:transform .6s cubic-bezier(.22,1,.36,1); }
.acc-edit-illus .ed-field{ transition:stroke .3s; }
.acc-edit-illus .ed-lead{ transition:opacity .6s var(--acc-ease); }

/* FAQ : ouverture animée (hauteur, opacité, indicateur) — ARIA inchangée */
.acc-faq-panel.acc-anim{ display:grid; grid-template-rows:0fr; opacity:0; visibility:hidden; transition:grid-template-rows .32s cubic-bezier(.22,1,.36,1), opacity .22s var(--acc-ease), visibility 0s linear .32s; }
.acc-faq-panel.acc-anim > p{ overflow:hidden; min-height:0; }
.acc-faq-panel.acc-anim.is-open{ grid-template-rows:1fr; opacity:1; visibility:visible; transition:grid-template-rows .32s cubic-bezier(.22,1,.36,1), opacity .3s var(--acc-ease) .05s, visibility 0s; }
.acc-faq-item button{ transition:color .2s var(--acc-ease); }
.acc-faq-item button:hover{ color:#000; }

/* Cadres photo (parallaxe / révélations) */
@property --acc-sc{ syntax:'<number>'; inherits:false; initial-value:1; }
.acc-hero-frame,.acc-final-frame{ overflow:hidden; }
/* Les révélations « pose » (échelle > 1) ne doivent jamais élargir la page sur mobile. */
.acc-bespoke-figure,.acc-designer-figure,.acc-price-figure{ overflow-x:clip; }
.acc-hero-frame img,.acc-final-frame img,.acc-bespoke-figure img,.acc-designer-figure img,.acc-price-figure img{
  display:block; transform:translate3d(0,var(--py,0px),0) scale(calc(var(--acc-sc) * var(--pz,1)));
}
.has-parallax img{ --pz:1.06; will-change:transform; }

/* ---------- Tablette ---------- */
@media (max-width:1199px){
  .acc-rooms{ padding:72px 0 64px; }
  .acc-rooms-head{ display:block; }
  .acc-h2--rooms{ font-size:40px; line-height:46px; max-width:600px; }
  .acc-rooms-sub{ font-size:16px; line-height:24px; max-width:560px; margin-top:20px; }
  .acc-rooms-nav{ justify-content:space-between; margin-top:32px; }
  .acc-rooms-num{ font-size:44px; }
  .acc-track{ gap:24px; margin-top:28px; }
  .acc-room{ flex-basis:calc((100vw - 2 * var(--acc-margin)) * .92); }
  .acc-room-cartel{ grid-template-columns:1fr; row-gap:6px; margin-top:20px; }
  .acc-room-desc{ grid-column:1; grid-row:3; font-size:15px; line-height:22px; }
  .acc-room-traits{ grid-column:1; grid-row:4; justify-content:flex-start; margin-top:8px; }
  .acc-rooms-index button{ font-size:12px; gap:5px; }
  .acc-rooms-cta{ margin-top:40px; gap:16px; }

  .acc-step-illus{ margin-bottom:22px; }
  .acc-edit{ padding:80px 0; }
  .acc-edit-grid{ grid-template-columns:1fr; row-gap:48px; }
  .acc-h2--edit{ font-size:36px; line-height:42px; max-width:560px; }
  .acc-edit-copy{ font-size:16px; line-height:25px; max-width:560px; }
  .acc-edit-points{ display:grid; grid-template-columns:repeat(3,1fr); column-gap:24px; }
  .acc-edit-illus{ justify-self:start; max-width:600px; }
}

/* ---------- Mobile ---------- */
@media (max-width:767px){
  .acc-rooms{ padding:48px 0 48px; }
  .acc-h2--rooms{ font-size:32px; line-height:36px; }
  .acc-rooms-sub{ font-size:15px; line-height:22px; margin-top:12px; }
  .acc-rooms-nav{ align-items:center; margin-top:22px; gap:16px; }
  .acc-rooms-now{ gap:12px; align-items:center; }
  .acc-rooms-num{ font-size:34px; }
  .acc-rooms-total{ font-size:13px; }
  .acc-rooms-what{ min-width:0; }
  .acc-rooms-who{ font-size:15px; }
  .acc-arrow{ width:44px; height:44px; }
  .acc-track{ gap:12px; margin-top:18px; }
  .acc-room{ flex-basis:calc(100vw - 56px); }
  .acc-stage-bar{ height:26px; font-size:9.5px; }
  .acc-stage-view{ aspect-ratio:390 / 640; }
  .acc-room-cartel{ display:block; margin-top:14px; }
  .acc-room-name{ font-size:17px; margin-top:2px; }
  .acc-room-desc{ margin-top:6px; font-size:14px; line-height:20px; }
  .acc-room-traits{ margin-top:10px; gap:6px; }
  .acc-room-traits li{ padding:4px 7px; font-size:9.5px; }
  .acc-rooms-foot{ margin-top:22px; }
  .acc-rooms-index{ display:none; }
  .acc-rooms-cta{ display:none; }

  .acc-steps li{ display:grid; grid-template-columns:52px 1fr; }
  .acc-step-illus{ grid-column:1 / -1; max-width:320px; margin:0 0 18px -4px; }
  .acc-edit{ padding:56px 0; }
  .acc-edit-grid{ row-gap:36px; }
  .acc-h2--edit{ font-size:30px; line-height:34px; }
  .acc-edit-copy{ margin-top:16px; font-size:15px; line-height:23px; }
  .acc-edit-points{ display:block; margin-top:24px; }
  .acc-edit-illus{ margin:0 -8px; width:calc(100% + 16px); }
}

/* =========================================================
   MOTION — calme, précis, photographique.
   Tout est conditionné par html.acc-motion (posé seulement sans
   prefers-reduced-motion) : sinon, contenu immédiatement visible.
   Durées : micro 120–220 ms · UI 220–350 · contenu 450–750 · photo 700–1100.
   ========================================================= */
#ff-landing{ --acc-out:cubic-bezier(.22,1,.36,1); }

/* Ouverture du hero : nav → titre (lettre à lettre) → texte/CTA → photographie → cartel */
.acc-motion .acc-nav{ animation:accFade .45s var(--acc-out) both; }
.acc-motion .acc-hero .acc-label{ animation:accFade .6s var(--acc-out) .12s both; }
.acc-motion .acc-h1[data-letters]:not(.is-split){ animation:accShow 0s linear 1.1s both; }
.acc-motion .acc-hero-sub{ animation:accRise .7s var(--acc-out) .8s both; }
.acc-motion .acc-hero-ctas{ animation:accRise .7s var(--acc-out) .92s both; }
.acc-motion .acc-price-line{ animation:accRise .7s var(--acc-out) 1s both; }
.acc-motion .acc-hero-frame{ animation:accCurtain 1.05s var(--acc-out) .5s both; }
.acc-motion .acc-hero-frame img{ animation:accSettle 1.6s var(--acc-out) .5s both; }
.acc-motion .acc-hero-figure .acc-cartel{ animation:accLabel .6s var(--acc-out) 1.35s both; }
@keyframes accFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes accShow{ from{ visibility:hidden; } to{ visibility:visible; } }
@keyframes accRise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes accCurtain{ from{ clip-path:inset(0 0 100% 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes accSettle{ from{ --acc-sc:1.03; } to{ --acc-sc:1; } }
@keyframes accLabel{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* Titres lettre à lettre (3 moments : hero, designer, invitation finale) */
.acc-w{ display:inline-block; white-space:nowrap; }
.acc-ch{ display:inline-block; }
.acc-letters-wait .acc-ch{ opacity:0; transform:translateY(5px); }
.acc-lettering .acc-ch{ opacity:0; transform:translateY(5px); animation:accCh .62s var(--acc-out) forwards; animation-delay:var(--d); }
@keyframes accCh{ to{ opacity:1; transform:none; } }

/* Révélations au défilement (data-anim) — motifs différents selon le contenu */
.acc-motion .acc-js [data-anim="mask"]{ clip-path:inset(0 0 100% 0); transform:translateY(.3em); transition:clip-path .9s var(--acc-out), transform .9s var(--acc-out); }
.acc-motion .acc-js [data-anim="mask"].is-in{ clip-path:inset(-20% -4% -25% -4%); transform:none; }
.acc-motion .acc-js [data-anim="fade"]{ opacity:0; transition:opacity .75s var(--acc-ease) .18s; }
.acc-motion .acc-js [data-anim="fade"].is-in{ opacity:1; }
.acc-motion .acc-js [data-anim="labels"] > li{ opacity:0; transition:opacity .6s var(--acc-ease); }
.acc-motion .acc-js [data-anim="labels"].is-in > li{ opacity:1; }
.acc-motion .acc-js [data-anim="labels"] > li:nth-child(2){ transition-delay:.07s; }
.acc-motion .acc-js [data-anim="labels"] > li:nth-child(3){ transition-delay:.14s; }
.acc-motion .acc-js [data-anim="labels"] > li:nth-child(4){ transition-delay:.21s; }
.acc-motion .acc-js [data-anim="labels"] > li:nth-child(5){ transition-delay:.28s; }
.acc-motion .acc-js [data-anim="labels"] > li:nth-child(6){ transition-delay:.35s; }
.acc-motion .acc-js [data-anim="labels"] > li:nth-child(7){ transition-delay:.42s; }
/* SETTLE : la photo apparaît et se pose (1.025 → 1) */
.acc-motion .acc-js [data-anim="settle"] img{ opacity:0; --acc-sc:1.025; transition:opacity .9s var(--acc-ease), --acc-sc 1.1s var(--acc-out); }
.acc-motion .acc-js [data-anim="settle"].is-in img{ opacity:1; --acc-sc:1; }
/* CURTAIN : le masque s’ouvre de haut en bas */
.acc-motion .acc-js [data-anim="curtain"] img{ clip-path:inset(0 0 100% 0); --acc-sc:1.03; transition:clip-path 1.05s var(--acc-out), --acc-sc 1.3s var(--acc-out); }
.acc-motion .acc-js [data-anim="curtain"].is-in img{ clip-path:inset(0 0 0 0); --acc-sc:1; }
/* FRAME : le cadre se trace, la photographie suit */
.acc-price-figure{ position:relative; }
.acc-motion .acc-js [data-anim="frame"]::before{ content:""; position:absolute; left:0; top:0; right:0; aspect-ratio:3 / 4; border:1px solid var(--acc-ink); opacity:0; pointer-events:none; }
.acc-motion .acc-js [data-anim="frame"].is-in::before{ animation:accFrame 1.3s var(--acc-ease) both; }
@keyframes accFrame{ 0%{ opacity:0; } 25%{ opacity:1; } 70%{ opacity:1; } 100%{ opacity:0; } }
.acc-motion .acc-js [data-anim="frame"] img{ opacity:0; transition:opacity .8s var(--acc-ease) .35s; }
.acc-motion .acc-js [data-anim="frame"].is-in img{ opacity:1; }
/* Le cartel suit toujours la photographie */
.acc-motion .acc-js [data-anim] .acc-cartel,.acc-motion .acc-js [data-anim] .acc-caption{ opacity:0; transform:translateY(6px); transition:opacity .6s var(--acc-ease), transform .6s var(--acc-out); transition-delay:.7s; }
.acc-motion .acc-js [data-anim].is-in .acc-cartel,.acc-motion .acc-js [data-anim].is-in .acc-caption{ opacity:1; transform:none; }
/* PRINT : le prix s’imprime sur le mur (balayage, pas de compteur) */
.acc-motion .acc-js [data-anim="print"]{ clip-path:inset(0 100% 0 0); transition:clip-path 1.1s cubic-bezier(.65,0,.35,1); }
.acc-motion .acc-js [data-anim="print"].is-in{ clip-path:inset(-10% -6% -10% -2%); }
/* Designer : titre → texte → portrait */
.acc-motion .acc-js .acc-designer-copy[data-anim="fade"]{ transition-delay:.9s; }
.acc-motion .acc-js .acc-designer-figure[data-anim="curtain"] img{ transition-delay:1.1s; }
.acc-motion .acc-js .acc-designer-figure .acc-cartel{ transition-delay:2s; }

/* Plan d’accrochage : la ligne se trace, chaque étape s’allume à son passage */
.acc-motion .acc-js .acc-steps::before{ transform:scaleX(0); transform-origin:left; transition:transform 1.5s var(--acc-out); }
.acc-motion .acc-js .acc-steps::after{ transform:scale(0); transition:transform .4s var(--acc-out) 1.4s; }
.acc-motion .acc-js .acc-steps li::before{ opacity:0; transition:opacity .3s var(--acc-ease) var(--d); }
.acc-motion .acc-js .acc-steps.is-in::before,.acc-motion .acc-js .acc-steps.is-in::after{ transform:none; }
.acc-motion .acc-js .acc-steps.is-in li::before{ opacity:1; }
.acc-steps li:nth-child(1){ --d:.05s; } .acc-steps li:nth-child(2){ --d:.55s; } .acc-steps li:nth-child(3){ --d:1.05s; }
/* 01 — matière : les fragments arrivent, la sélection se trace en rouge */
.acc-motion .acc-js .ill-frag{ opacity:0; transform:translateY(7px); transition:opacity .7s var(--acc-ease), transform .9s var(--acc-out); transition-delay:calc(var(--d) + var(--i) * .12s); }
.acc-motion .acc-js .ill-note,.acc-motion .acc-js .ill-path{ opacity:0; transition:opacity .7s var(--acc-ease) calc(var(--d) + .3s); }
.acc-motion .acc-js .ill-curate{ opacity:0; transition:opacity .6s var(--acc-ease) calc(var(--d) + .55s); }
.acc-motion .acc-js .ill-select{ stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset .9s var(--acc-out) calc(var(--d) + 1s); }
.acc-motion .acc-js .acc-ill-1 .ill-red{ opacity:0; transition:opacity .5s var(--acc-ease) calc(var(--d) + 1.5s); }
.acc-motion .acc-js .acc-steps.is-in .ill-frag,.acc-motion .acc-js .acc-steps.is-in .ill-note,.acc-motion .acc-js .acc-steps.is-in .ill-path,
.acc-motion .acc-js .acc-steps.is-in .ill-curate,.acc-motion .acc-js .acc-steps.is-in .acc-ill-1 .ill-red{ opacity:1; transform:none; }
.acc-motion .acc-js .acc-steps.is-in .ill-select{ stroke-dashoffset:0; }
/* 02 — composition : la grille apparaît, les fragments s’alignent, le texte prend place */
.acc-motion .acc-js .ill-page,.acc-motion .acc-js .ill-crop,.acc-motion .acc-js .ill-dim{ opacity:0; transition:opacity .6s var(--acc-ease) var(--d); }
.acc-motion .acc-js .ill-grid line{ transform:scaleY(0); transform-box:fill-box; transform-origin:top; transition:transform .7s var(--acc-out) calc(var(--d) + .15s + var(--i) * .06s); }
.acc-motion .acc-js .ill-snap{ transform:translate(var(--dx),var(--dy)) rotate(var(--r)); transform-box:fill-box; transform-origin:center; transition:transform 1.1s var(--acc-out) calc(var(--d) + .45s + var(--i) * .08s); }
.acc-motion .acc-js .ill-type rect{ transform:scaleX(0); transform-box:fill-box; transform-origin:left; transition:transform .6s var(--acc-out) calc(var(--d) + 1.05s); }
.acc-motion .acc-js .ill-tick{ opacity:0; transition:opacity .5s var(--acc-ease) calc(var(--d) + 1.4s); }
.acc-motion .acc-js .acc-steps.is-in .ill-page,.acc-motion .acc-js .acc-steps.is-in .ill-crop,.acc-motion .acc-js .acc-steps.is-in .ill-dim,.acc-motion .acc-js .acc-steps.is-in .ill-tick{ opacity:1; }
.acc-motion .acc-js .acc-steps.is-in .ill-grid line,.acc-motion .acc-js .acc-steps.is-in .ill-snap,.acc-motion .acc-js .acc-steps.is-in .ill-type rect{ transform:none; }
/* 03 — accroché : la construction s’efface, l’œuvre est suspendue, le cartel et la pastille rouge suivent */
.acc-motion .acc-js .ill-ghost{ opacity:.28; transition:opacity .8s var(--acc-ease) calc(var(--d) + .9s); }
.acc-motion .acc-js .ill-wire{ stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset .9s var(--acc-out) calc(var(--d) + .1s); }
.acc-motion .acc-js .ill-hung{ opacity:0; transform:translateY(-8px); transition:opacity .8s var(--acc-ease) calc(var(--d) + .35s), transform 1s var(--acc-out) calc(var(--d) + .35s); }
.acc-motion .acc-js .ill-cartel{ opacity:0; transition:opacity .6s var(--acc-ease) calc(var(--d) + 1.15s); }
.acc-motion .acc-js .ill-dot{ transform:scale(0); transform-box:fill-box; transform-origin:center; transition:transform .45s var(--acc-out) calc(var(--d) + 1.55s); }
.acc-motion .acc-js .acc-steps.is-in .ill-ghost{ opacity:0; }
.acc-motion .acc-js .acc-steps.is-in .ill-wire{ stroke-dashoffset:0; }
.acc-motion .acc-js .acc-steps.is-in .ill-hung{ opacity:1; transform:none; }
.acc-motion .acc-js .acc-steps.is-in .ill-cartel{ opacity:1; }
.acc-motion .acc-js .acc-steps.is-in .ill-dot{ transform:none; }

/* Espace HOMWEB : le contenu change, le cadre reste */
.acc-motion .acc-js .acc-edit-illus:not(.is-b) .ed-lead{ opacity:0; }
.acc-edit-illus.is-b .ed-field{ stroke:var(--acc-red); }
.acc-edit-illus.is-b .ed-panel .ed-a{ opacity:0; transition-delay:.35s; }
.acc-edit-illus.is-b .ed-panel .ed-b{ opacity:1; transition-delay:.55s; }
.acc-edit-illus.is-b .ed-lead-1{ transition-delay:.7s; }
.acc-edit-illus.is-b > svg > .ed-a{ opacity:0; transition-delay:1s; }
.acc-edit-illus.is-b > svg > .ed-b{ opacity:1; transition-delay:1.2s; }
.acc-edit-illus.is-b .ed-ring{ transform:translateX(56px); transition-delay:1.7s; }
.acc-edit-illus.is-b .ed-lead-2{ transition-delay:2.1s; }
.acc-edit-illus.is-b .ed-photo .ed-a{ opacity:0; transition:opacity .9s var(--acc-ease) 2.3s; }
.acc-edit-illus.is-b .ed-photo .ed-b{ opacity:1; transition:opacity .9s var(--acc-ease) 2.3s; }

/* Salles : le numéro et le nom changent comme une nouvelle salle */
.acc-motion .acc-rooms-now.is-swap .acc-rooms-current,.acc-motion .acc-rooms-now.is-swap .acc-rooms-what{ animation:accSwap .5s var(--acc-out) both; }
.acc-motion .acc-rooms-now.is-swap .acc-rooms-what{ animation-delay:.06s; }
@keyframes accSwap{ from{ opacity:0; transform:translateY(35%); } to{ opacity:1; transform:none; } }
.acc-motion .acc-js .acc-room .acc-room-cartel{ opacity:0; transform:translateY(6px); transition:opacity .5s var(--acc-ease) .3s, transform .6s var(--acc-out) .3s; }
.acc-motion .acc-js .acc-room.is-active .acc-room-cartel{ opacity:1; transform:none; }

/* Barre CTA mobile : translation + opacité */
@media (max-width:767px){
  .acc-sticky{ opacity:0; transition:transform .32s var(--acc-out), opacity .28s var(--acc-ease), visibility 0s linear .32s; }
  .acc-sticky.is-visible{ opacity:1; transition:transform .32s var(--acc-out), opacity .28s var(--acc-ease); }
  /* Mobile : séquences raccourcies */
  .acc-motion .acc-hero-frame,.acc-motion .acc-hero-frame img{ animation-delay:0s; animation-duration:.85s; }
  .acc-motion .acc-hero-sub,.acc-motion .acc-hero-ctas,.acc-motion .acc-price-line{ animation-delay:.5s; animation-duration:.5s; }
  .acc-motion .acc-hero-figure .acc-cartel{ animation-delay:.7s; }
  .acc-steps li:nth-child(n){ --d:.05s; }
  .acc-motion .acc-js .acc-steps::before{ transform:scaleY(0); transform-origin:top; }
  .acc-motion .acc-js .acc-designer-copy[data-anim="fade"]{ transition-delay:.3s; }
  .acc-motion .acc-js .acc-designer-figure[data-anim="curtain"] img{ transition-delay:.2s; }
  .acc-motion .acc-js .acc-designer-figure .acc-cartel{ transition-delay:.9s; }
}