/* =========================================================
   HOMWEB Photo — styles.css
   Feuille de style autonome, isolée du site principal (aucune
   dépendance à /styles.css). Les tokens ci-dessous reprennent
   volontairement les valeurs exactes de la DA HOMWEB (cream/ink/
   violet, radius XL, easing signature) pour que ce produit
   "semble appartenir à HOMWEB" — cf. audit repository.
   Déclinaison : plus éditoriale, plus photographique, plus premium.
   ========================================================= */

@font-face{
  font-family:'Buttershine Serif';
  src:url('fonts/buttershine-serif.woff2') format('woff2'),
      url('fonts/buttershine-serif.otf') format('opentype');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

:root{
  --cream: #F3F0E8;
  --page-bg: #FBFAF8;
  --cream-card: #ECE7DA;
  --ink: #0F172A;
  --ink-60: rgba(15,23,42,.6);
  --ink-35: rgba(15,23,42,.35);
  --ink-10: rgba(15,23,42,.1);
  --purple-1: #9262FB;
  --purple-2: #6225E6;
  --purple-solid: #6225E6;
  --gold: #A6875C;
  --on-dark: #FBFAF8;
  --on-dark-68: rgba(251,250,248,.68);
  --radius-xl: 40px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --serif: 'Buttershine Serif', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(.22,.68,0,1.01);
  --success: #2F7A4F;
  --danger: #B4442E;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  background:var(--page-bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea,select{ font-family:inherit; font-size:16px; color:var(--ink); }
h1,h2{ margin:0; font-family:var(--serif); font-weight:600; }
h3,h4{ margin:0; font-family:var(--sans); font-weight:600; }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--purple-2); outline-offset:3px; border-radius:4px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.metal-text{
  background:linear-gradient(120deg, var(--purple-1), var(--purple-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* =========================================================
   BOUTONS (partagés landing + wizard + brief + offer)
   ========================================================= */
.ff-btn-primary{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:58px; padding:0 30px; border-radius:100px;
  font-size:15px; font-weight:600;
  color:var(--on-dark);
  background:linear-gradient(120deg, var(--purple-1), var(--purple-2));
  box-shadow:2px 4px 14px rgba(98,37,230,.28);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ff-btn-primary:hover{ transform:translateY(-3px); box-shadow:4px 8px 22px rgba(98,37,230,.4); }
.ff-btn-primary:active{ transform:translateY(-1px); }
.ff-btn-primary:disabled{ opacity:.6; cursor:default; transform:none; }
.ff-btn-primary.is-loading{ opacity:.75; }

.ff-btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:52px; padding:0 24px; border-radius:100px; font-size:14px; font-weight:600;
  color:var(--ink); background:transparent; border:1.5px solid var(--ink-10);
  transition:background .25s, border-color .25s, transform .25s var(--ease);
}
.ff-btn-ghost:hover{ background:rgba(15,23,42,.05); border-color:var(--ink-35); transform:translateY(-1px); }

/* =========================================================
   LANDING (#ff-landing) — HTML statique, indexable
   ========================================================= */
#ff-app-root[hidden], #ff-landing[hidden]{ display:none; }

[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal].is-revealed{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

.ffl-header{
  position:sticky; top:0; z-index:50;
  padding:14px 0;
  background:var(--cream);
  transition:background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
}
.ffl-header.is-scrolled{
  background:rgba(243,240,232,.86); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(15,23,42,.06);
  padding:8px 0;
}
.ffl-header-inner{
  max-width:1440px; margin:0 auto; padding:0 clamp(20px,5vw,80px);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.ffl-brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.ffl-brand-mark{ height:26px; width:auto; flex-shrink:0; transition:transform .4s var(--ease); }
.ffl-brand:hover .ffl-brand-mark{ transform:rotate(-4deg) scale(1.05); }
.ffl-brand-tag{
  font-family:var(--serif); font-size:15px; color:var(--purple-2);
  border-left:1px solid var(--ink-10); padding-left:10px;
}
.ffl-nav{ display:flex; align-items:center; gap:6px; }
.ffl-nav a:not(.ffl-header-cta){
  position:relative; padding:8px 16px; font-size:13.5px; font-weight:600; color:var(--ink-60);
  border-radius:48px; transition:background .25s, color .2s;
}
.ffl-nav a:not(.ffl-header-cta):hover{ background:rgba(15,23,42,.06); color:var(--ink); }
.ffl-header-cta{ height:44px; padding:0 20px; font-size:13.5px; flex-shrink:0; white-space:nowrap; margin-left:6px; }

.ffl-burger{ display:none; flex-direction:column; gap:5px; width:32px; }
.ffl-burger span{ height:2px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .3s; }
.ffl-mobile-nav{
  display:flex; flex-direction:column; max-height:0; overflow:hidden;
  transition:max-height .35s var(--ease);
}
.ffl-mobile-nav a{ padding:14px clamp(20px,5vw,80px); border-top:1px solid var(--ink-10); font-size:15px; }
.ffl-mobile-nav-cta{
  display:block; margin:14px clamp(20px,5vw,80px) !important; padding:12px 20px !important;
  background:linear-gradient(120deg, var(--purple-1), var(--purple-2)); color:var(--on-dark) !important;
  text-align:center; border-radius:12px; border-top:none !important; font-weight:600;
}

/* -------------------- Hero : deux colonnes, collage photo -------------------- */
.ffl-hero{
  background:var(--cream); padding:clamp(20px,3vw,40px) clamp(20px,5vw,80px) clamp(56px,8vw,96px);
  overflow:hidden; border-radius:0 0 32px 32px;
}
.ffl-hero-inner{
  max-width:1280px; margin:0 auto; display:flex; flex-direction:column-reverse; gap:32px; align-items:center;
}
.ffl-hero-card{
  background:#fff; border-radius:var(--radius-xl);
  padding:clamp(32px,5vw,64px) clamp(24px,4vw,64px);
  width:100%;
}
.ffl-hero-text{ max-width:470px; }
.ffl-h1{ font-size:clamp(32px,4.6vw,52px); line-height:1.1; margin-top:22px; margin-bottom:20px; }
.ffl-highlight{
  display:inline-block;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='2.4' intercept='-0.65'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.85'/%3E%3C/svg%3E"),
    linear-gradient(120deg, #5F6672 0%, #AEB4BD 28%, #7A8390 50%, #B8BEC6 72%, #5F6672 100%);
  background-size:140px 140px, 100% 100%;
  background-repeat:repeat, no-repeat;
  background-blend-mode:multiply, normal;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ffl-lead{ font-size:clamp(15.5px,1.6vw,18px); color:var(--ink-60); max-width:480px; margin-bottom:30px; line-height:1.6; }
.ffl-hero-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.ffl-hero-cta{
  display:inline-flex; align-items:center; gap:14px; padding:6px 26px 6px 6px; border-radius:100px;
  background:linear-gradient(120deg, var(--purple-1), var(--purple-2)); color:var(--on-dark);
  box-shadow:2px 4px 14px rgba(98,37,230,.28); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ffl-hero-cta:hover{ transform:translateY(-3px); box-shadow:4px 8px 22px rgba(98,37,230,.4); }
.ffl-hero-cta-icon{
  width:44px; height:44px; border-radius:50%; background:#fff; padding:6px; object-fit:contain;
  transition:transform .35s var(--ease);
}
.ffl-hero-cta:hover .ffl-hero-cta-icon{ transform:rotate(-14deg) scale(1.08); }
.ffl-hero-cta span{ font-size:15px; font-weight:600; }
.ffl-hero-time{ font-size:13px; font-weight:600; color:var(--ink-60); padding:8px 16px; border:1.5px solid var(--ink-10); border-radius:100px; }
.ffl-hero-check{ font-size:13.5px; color:var(--ink-60); }

.ffl-hero-collage{ position:relative; width:100%; max-width:680px; aspect-ratio:1/0.92; margin-top:28px; }
.ffl-collage-img{
  position:absolute; border-radius:var(--radius-lg); object-fit:cover; box-shadow:0 16px 40px rgba(15,23,42,.16);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.ffl-collage-img--1{ width:62%; aspect-ratio:1; top:0; left:0; z-index:2; transform:rotate(-3deg); }
.ffl-collage-img--2{ width:50%; aspect-ratio:1; top:0; right:-6%; z-index:1; transform:rotate(4deg); }
.ffl-collage-img--3{ width:55%; aspect-ratio:1; bottom:-4%; left:2%; z-index:1; transform:rotate(5deg); }
.ffl-collage-img--4{ width:54%; aspect-ratio:1; bottom:-2%; right:0; z-index:3; transform:rotate(-6deg); }
.ffl-hero-collage:hover .ffl-collage-img--1{ transform:rotate(-5deg) translate(-4px,-4px); }
.ffl-hero-collage:hover .ffl-collage-img--2{ transform:rotate(6deg) translate(4px,-4px); }
.ffl-hero-collage:hover .ffl-collage-img--3{ transform:rotate(7deg) translate(-4px,4px); }
.ffl-hero-collage:hover .ffl-collage-img--4{ transform:rotate(-8deg) translate(4px,4px); box-shadow:0 22px 48px rgba(15,23,42,.22); }

@media (min-width:900px){
  .ffl-hero-inner{ flex-direction:row; justify-content:space-between; text-align:left; align-items:stretch; gap:48px; }
  .ffl-hero-card{ flex:0 0 calc(50% - 24px); max-width:none; display:flex; align-items:center; }
  .ffl-hero-collage{
    flex:0 0 calc(50% - 24px); width:calc(50% - 24px); max-width:none; overflow:visible;
    align-self:stretch; aspect-ratio:auto; height:auto; margin-top:0;
  }
  .ffl-collage-img--1{ top:0%; }
  .ffl-collage-img--2{ top:5%; right:-11%; }
  .ffl-collage-img--3{ left:-7%; bottom:-26%; }
  .ffl-collage-img--4{ right:-8%; bottom:-28%; }
}

.ff-resume-banner{
  margin:20px 0 0; max-width:560px; padding:20px 24px; border-radius:var(--radius-lg);
  background:var(--cream-card); border:1px solid var(--ink-10); text-align:left;
}
.ff-resume-banner p{ font-size:14.5px; margin-bottom:14px; }
.ff-resume-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.ff-resume-actions .ff-btn-primary{ height:44px; padding:0 20px; font-size:13.5px; }
.ff-resume-actions .ff-btn-ghost{ height:44px; padding:0 18px; font-size:13.5px; }

/* -------------------- Statement : une phrase, un fait -------------------- */
.ffl-statement{ background:var(--page-bg); padding:clamp(56px,9vw,100px) 24px; }
.ffl-statement-inner{ display:flex; flex-direction:column; align-items:center; }
.ffl-statement-text{
  max-width:820px; margin:0 auto; text-align:center; font-family:var(--serif); font-weight:500;
  font-size:clamp(22px,3.4vw,34px); line-height:1.4; color:var(--ink);
}
.ffl-statement-sub{
  max-width:440px; margin:20px auto 0; text-align:center; font-size:14.5px; color:var(--ink-60); line-height:1.6;
}
.ffl-statement-rule{ width:48px; height:1px; background:var(--ink-35); margin-top:32px; }

.ffl-eyebrow-center{
  text-align:center; display:block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--purple-2); margin-bottom:12px;
}
.ffl-eyebrow-center--dark{ color:var(--purple-1); }
.ffl-eyebrow-center--gold{ color:var(--gold); text-transform:none; letter-spacing:0; font-weight:600; font-size:14px; }
.ffl-section-title{ text-align:center; font-size:clamp(26px,4vw,36px); margin:0 auto 48px; max-width:640px; }

/* -------------------- Exemples de direction artistique -------------------- */
.ffl-examples{ max-width:1600px; margin:0 auto; padding:clamp(64px,9vw,110px) clamp(20px,3vw,40px); }
.ffl-section-title--sm{ font-size:clamp(22px,3vw,28px); margin-bottom:36px; }
.ffl-examples-grid{ display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:24px; }
.ffl-example{ margin:0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 12px 32px rgba(15,23,42,.1); order:1; }
.ffl-example img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; }
.ffl-example--left{ order:2; }
.ffl-example--main{ order:1; }
.ffl-example--right{ order:3; }
.ffl-examples-note{ text-align:center; font-size:13px; color:var(--ink-35); max-width:560px; margin:0 auto; line-height:1.6; }

@media (min-width:760px){
  .ffl-examples-grid{ grid-template-columns:1fr 1.35fr 1fr; align-items:center; gap:24px; }
  .ffl-example--left, .ffl-example--right{ order:initial; align-self:center; box-shadow:0 8px 22px rgba(15,23,42,.1); }
  .ffl-example--left img, .ffl-example--right img{ aspect-ratio:16/9; }
  .ffl-example--main{ order:initial; box-shadow:0 20px 48px rgba(15,23,42,.18); position:relative; z-index:1; }
  .ffl-example--main img{ aspect-ratio:16/9; }
}

/* -------------------- Pas de template : 3 univers -------------------- */
.ffl-diversity{ max-width:1240px; margin:0 auto; padding:clamp(64px,9vw,110px) 24px; }
.ffl-diversity-sub{ text-align:center; font-size:14.5px; color:var(--ink-60); max-width:460px; margin:-24px auto 44px; line-height:1.6; }
.ffl-diversity-grid{ display:grid; grid-template-columns:1fr; gap:28px; }
.ffl-diversity-card{
  border-radius:var(--radius-lg); overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.ffl-diversity-card:hover{ transform:translateY(-6px); }
.ffl-diversity-media{ width:100%; overflow:hidden; }
.ffl-diversity-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.ffl-diversity-card:hover .ffl-diversity-media img{ transform:scale(1.045); }
.ffl-diversity-body{ padding:20px 22px 24px; }
.ffl-diversity-kicker{ font-size:15px; margin-bottom:6px; }
.ffl-diversity-desc{ font-size:13px; line-height:1.6; }

.ffl-diversity-card--wedding{ background:#fff; box-shadow:0 16px 40px rgba(15,23,42,.08); }
.ffl-diversity-card--wedding .ffl-diversity-media{ aspect-ratio:16/11; }
.ffl-diversity-card--wedding .ffl-diversity-kicker{ font-family:var(--serif); font-style:italic; font-weight:600; color:var(--gold); }
.ffl-diversity-card--wedding .ffl-diversity-desc{ color:var(--ink-60); }

.ffl-diversity-card--dark{ background:#13141B; box-shadow:0 20px 48px rgba(15,23,42,.22); }
.ffl-diversity-card--dark .ffl-diversity-media{ aspect-ratio:4/5; }
.ffl-diversity-card--dark .ffl-diversity-body{ padding:18px 20px 22px; }
.ffl-diversity-card--dark .ffl-diversity-kicker{
  text-transform:uppercase; letter-spacing:.09em; font-size:11.5px; font-weight:700; color:#fff;
}
.ffl-diversity-card--dark .ffl-diversity-desc{ color:rgba(255,255,255,.62); }

.ffl-diversity-card--portrait{ background:var(--cream-card); }
.ffl-diversity-card--portrait .ffl-diversity-media{ aspect-ratio:1/1; }
.ffl-diversity-card--portrait .ffl-diversity-kicker{
  text-transform:uppercase; letter-spacing:.1em; font-size:11.5px; font-weight:700; color:var(--purple-2);
}
.ffl-diversity-card--portrait .ffl-diversity-desc{ color:var(--ink-60); }

@media (min-width:820px){
  .ffl-diversity-grid{ grid-template-columns:1.1fr 0.85fr 1fr; align-items:end; gap:24px; }
  .ffl-diversity-card--dark{ transform:translateY(22px); }
  .ffl-diversity-card--dark:hover{ transform:translateY(16px); }
}

/* -------------------- Ce qu'il y a dans le site -------------------- */
.ffl-included{ max-width:1160px; margin:0 auto; padding:clamp(64px,9vw,110px) 24px; }
.ffl-included-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:40px; }
.ffl-included-card{ background:var(--cream-card); border-radius:var(--radius-lg); padding:26px; position:relative; }
.ffl-box-icon{
  display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:12px; background:rgba(98,37,230,.1); color:var(--purple-2); margin-bottom:16px;
}
.ffl-box-icon svg{ width:20px; height:20px; }
.ffl-included-card h3{ font-size:16px; margin-bottom:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ffl-included-card p{ font-size:13.5px; color:var(--ink-60); line-height:1.6; }
.ffl-included-card--wide{ background:rgba(98,37,230,.06); }
.ffl-included-card--wide .ffl-box-icon{ background:rgba(98,37,230,.18); }
.ffl-badge{
  font-size:9.5px; font-weight:700; letter-spacing:.04em; color:var(--purple-2);
  background:rgba(98,37,230,.12); padding:2px 8px; border-radius:100px;
}
.ffl-included-cta{ display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap; }
@media (min-width:640px){
  .ffl-included-grid{ grid-template-columns:1fr 1fr; }
  .ffl-included-card--wide{ grid-column:span 2; }
}
@media (min-width:980px){ .ffl-included-grid{ grid-template-columns:repeat(4,1fr); } }

/* -------------------- Comment ça marche -------------------- */
.ffl-how{ max-width:1160px; margin:0 auto; padding:clamp(64px,9vw,110px) 24px; }
.ffl-how-grid{ display:grid; grid-template-columns:1fr; gap:28px; align-items:start; }
.ffl-how-card{
  background:var(--cream-card); border-radius:var(--radius-lg); padding:24px;
  transition:transform .3s var(--ease);
}
.ffl-how-illu{
  display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:16/10;
  border-radius:var(--radius-md); background:#fff; color:var(--ink-35); margin-bottom:20px;
}
.ffl-how-illu svg{ width:56px; height:56px; }
.ffl-how-card h3{ font-size:15.5px; margin-bottom:8px; text-transform:uppercase; letter-spacing:.01em; }
.ffl-how-card p{ font-size:13.5px; color:var(--ink-60); line-height:1.6; }
.ffl-how-cta-inline{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:20px; }
.ffl-how-cta-inline .ff-btn-primary{ height:52px; padding:0 24px; font-size:14px; }
@media (min-width:760px){
  .ffl-how-grid{ grid-template-columns:repeat(3,1fr); gap:24px; }
  .ffl-how-card--1{ transform:rotate(-2.5deg); }
  .ffl-how-card--3{ transform:rotate(2.5deg); }
  .ffl-how-card--1:hover, .ffl-how-card--3:hover{ transform:rotate(0deg) translateY(-4px); }
}

/* Mini "Votre univers" — écho de la sidebar réelle du formulaire */
.ffl-how-illu--sidebar{
  flex-direction:column; align-items:flex-start; justify-content:center; gap:9px; padding:18px 20px;
}
.ffl-how-tag{
  position:relative; padding-left:16px; font-size:12px; font-weight:600; color:var(--ink-35);
  transition:color .3s var(--ease);
}
.ffl-how-tag::before{
  content:''; position:absolute; left:0; top:50%; width:6px; height:6px; margin-top:-3px;
  border-radius:50%; background:var(--ink-10); transition:background .3s var(--ease);
}
.ffl-how-tag--fill{ color:var(--ink); }
.ffl-how-tag--fill::before{ background:var(--purple-2); }

/* -------------------- Modifier son site facilement -------------------- */
.ffl-editing{ max-width:1160px; margin:0 auto; padding:clamp(64px,9vw,110px) 24px; }
.ffl-editing-inner{ display:grid; grid-template-columns:1fr; gap:44px; align-items:center; }
.ffl-editing-desc{ font-size:14.5px; color:var(--ink-60); line-height:1.6; max-width:460px; margin-bottom:32px; }
.ffl-editing-args{ display:grid; gap:20px; }
.ffl-editing-arg h3{ font-size:14.5px; margin-bottom:6px; }
.ffl-editing-arg p{ font-size:13.5px; color:var(--ink-60); line-height:1.6; }

.ffl-editing-mockup{
  display:grid; grid-template-columns:1fr; gap:16px; justify-items:center;
}
.ffl-editing-link{
  display:none; color:var(--ink-35); font-size:20px; align-self:center;
}
.ffl-editing-panel{
  width:100%; max-width:340px; background:#fff; border-radius:var(--radius-lg);
  padding:22px 22px 24px; box-shadow:0 16px 40px rgba(15,23,42,.1);
}
.ffl-editing-panel-label{
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-35);
  margin-bottom:14px;
}
.ffl-editing-mockup-title{ font-family:var(--serif); font-size:17px; margin-bottom:10px; }
.ffl-editing-mockup-sub{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-35); margin-bottom:8px; }
.ffl-editing-collections{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.ffl-editing-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; border-radius:10px; background:var(--cream-card); font-size:12.5px; font-weight:600;
  transition:background .25s var(--ease), box-shadow .25s var(--ease);
}
.ffl-editing-count{ font-weight:500; color:var(--ink-60); font-size:12px; }
.ffl-editing-add{
  display:block; text-align:center; font-size:12px; font-weight:600; color:var(--purple-2);
  border:1.5px dashed var(--ink-10); border-radius:10px; padding:9px; margin-bottom:22px;
}
.ffl-editing-field{ padding-top:16px; border-top:1px solid var(--ink-10); }
.ffl-editing-label{ display:block; font-size:10.5px; font-weight:700; color:var(--ink-35); margin:10px 0 4px; }
.ffl-editing-input{
  font-size:13px; background:var(--cream-card); border-radius:8px; padding:8px 10px; line-height:1.4;
  transition:background .25s var(--ease);
}
.ffl-editing-input--sm{ font-size:11.5px; color:var(--ink-60); }
.ffl-editing-save{
  display:inline-block; margin-top:14px; font-size:12px; font-weight:600; color:#fff;
  background:linear-gradient(120deg, var(--purple-1), var(--purple-2)); padding:8px 18px; border-radius:100px;
}
.ffl-editing-row--photo, .ffl-editing-row--title{ cursor:default; }
.ffl-editing-row--photo:hover, .ffl-editing-mockup:has(.ffl-editing-row--title:hover) .ffl-editing-row--title{
  background:rgba(98,37,230,.14); box-shadow:0 0 0 1.5px var(--purple-2) inset;
}

.ffl-editing-panel--preview{ background:var(--cream); text-align:left; }
.ffl-editing-preview-photo{
  width:100%; aspect-ratio:16/10; border-radius:var(--radius-sm); margin-bottom:16px;
  background:linear-gradient(135deg, var(--purple-1), var(--gold) 120%);
  transition:filter .3s var(--ease), transform .3s var(--ease);
}
.ffl-editing-preview-title{ font-family:var(--serif); font-size:16px; margin-bottom:8px; transition:color .3s var(--ease); }
.ffl-editing-preview-desc{ font-size:12px; color:var(--ink-60); line-height:1.5; }

.ffl-editing-mockup:has(.ffl-editing-row--photo:hover) .ffl-editing-preview-photo{
  filter:saturate(1.35) brightness(1.06); transform:scale(1.02);
}
.ffl-editing-mockup:has(.ffl-editing-row--title:hover) .ffl-editing-preview-title{ color:var(--purple-2); }

@media (min-width:900px){
  .ffl-editing-inner{ grid-template-columns:1fr 1fr; gap:56px; }
  .ffl-editing-mockup{ grid-template-columns:1fr auto 1fr; align-items:center; }
  .ffl-editing-link{ display:block; }
}

/* -------------------- Pourquoi ce site sera performant -------------------- */
.ffl-trust{ background:var(--page-bg); padding:clamp(56px,8vw,96px) 24px; }
.ffl-trust-grid{ max-width:1160px; margin:0 auto 40px; display:grid; grid-template-columns:1fr; gap:20px; }
.ffl-trust-card{ background:var(--cream-card); border-radius:var(--radius-lg); padding:24px; }
.ffl-trust-card h3{ font-family:var(--serif); font-style:italic; font-weight:600; font-size:16px; margin-bottom:10px; }
.ffl-trust-card p{ font-size:13.5px; color:var(--ink-60); line-height:1.6; }
.ffl-trust-cta{ display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap; }
.ffl-trust-card--feature{ background:rgba(98,37,230,.06); }
@media (min-width:640px){ .ffl-trust-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){
  .ffl-trust-grid{ grid-template-columns:repeat(4,1fr); grid-auto-flow:dense; }
  .ffl-trust-card--feature{ grid-column:span 2; }
}

/* -------------------- Derrière HOMWEB -------------------- */
.ffl-eyebrow-center--left{ text-align:left; }
.ffl-section-title--left{ text-align:left; margin:0 0 16px; max-width:none; }
.ffl-founder{ max-width:980px; margin:0 auto; padding:clamp(48px,7vw,80px) 24px; }
.ffl-founder-inner{ display:grid; grid-template-columns:1fr; gap:28px; align-items:center; }
.ffl-founder-portrait{
  width:116px; height:116px; border-radius:50%; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(146,98,251,.16), rgba(166,135,92,.16));
  color:var(--ink-35);
}
.ffl-founder-portrait-icon{ width:44px; height:44px; }
.ffl-founder-desc{ font-size:14.5px; color:var(--ink-60); line-height:1.7; margin-bottom:20px; max-width:480px; }
.ffl-founder-cta{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--purple-2);
  transition:gap .25s var(--ease);
}
.ffl-founder-cta:hover{ gap:12px; text-decoration:underline; }
@media (min-width:760px){
  .ffl-founder-inner{ grid-template-columns:auto 1fr; gap:44px; text-align:left; }
  .ffl-founder-portrait{ margin:0; }
}

/* -------------------- Tarif -------------------- */
.ffl-pricing{ padding:clamp(64px,9vw,110px) 24px; }
.ffl-pricing-frame{
  max-width:1160px; margin:0 auto; background:var(--cream-card);
  border-radius:var(--radius-xl); padding:clamp(32px,5vw,56px) clamp(20px,4vw,40px);
}
.ffl-pricing-layout{
  max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:32px; align-items:center;
}
.ffl-pricing-note{ text-align:center; padding:0 12px; }
.ffl-pricing-note h3{ font-size:15px; margin-bottom:8px; }
.ffl-pricing-note p{ font-size:13.5px; color:var(--ink-60); line-height:1.6; }
.ffl-pricing-card{
  max-width:420px; margin:0 auto; text-align:center; background:#fff;
  border-radius:var(--radius-xl); padding:clamp(36px,6vw,48px) clamp(24px,5vw,40px);
  box-shadow:0 20px 48px rgba(15,23,42,.08);
}
.ffl-pricing-today{
  display:inline-block; font-size:14px; font-weight:700; color:var(--purple-2);
  background:rgba(98,37,230,.1); padding:8px 20px; border-radius:100px; margin-bottom:16px;
}
.ffl-pricing-price{ font-family:var(--serif); font-size:56px; line-height:1; margin-bottom:6px; }
.ffl-pricing-price span{ font-size:20px; font-family:var(--sans); font-weight:500; color:var(--ink-60); }
.ffl-pricing-sub{ font-size:14.5px; color:var(--ink-60); margin-bottom:28px; }
.ffl-pricing-list{ text-align:left; display:flex; flex-direction:column; gap:12px; margin-bottom:32px; }
.ffl-pricing-list li{ font-size:14.5px; padding-left:26px; position:relative; }
.ffl-pricing-list li::before{ content:'✓'; position:absolute; left:0; color:var(--purple-2); font-weight:700; }
.ffl-pricing-card .ff-btn-primary{ width:100%; }
@media (min-width:900px){
  .ffl-pricing-layout{ grid-template-columns:1fr 420px 1fr; }
  .ffl-pricing-note:first-child{ text-align:right; }
  .ffl-pricing-note:last-child{ text-align:left; }
}

.ffl-footer{ background:var(--cream); padding:clamp(40px,6vw,64px) clamp(20px,5vw,80px) 32px; }
.ffl-footer-inner{
  max-width:1160px; margin:0 auto; display:flex; flex-direction:column; gap:32px;
  padding-bottom:28px; border-bottom:1px solid var(--ink-10);
}
.ffl-footer-brand .ffl-brand{ margin-bottom:14px; }
.ffl-footer-desc{ font-size:13.5px; color:var(--ink-60); line-height:1.6; max-width:420px; }
.ffl-footer-links{ display:flex; flex-direction:column; gap:10px; }
.ffl-footer-links a{ font-size:13.5px; color:var(--ink-60); transition:color .2s; width:fit-content; }
.ffl-footer-links a:hover{ color:var(--ink); text-decoration:underline; }
.ffl-footer-copy{ max-width:1160px; margin:20px auto 0; font-size:12px; color:var(--ink-35); }
@media (min-width:640px){
  .ffl-footer-inner{ flex-direction:row; justify-content:space-between; align-items:flex-start; }
  .ffl-footer-links{ flex-direction:row; gap:28px; }
}

/* -------------------- Pages légales (mentions/CGV) -------------------- */
.ffl-legal{ padding:clamp(48px,8vw,88px) clamp(20px,5vw,80px) clamp(64px,9vw,110px); }
.ffl-legal-inner{ max-width:760px; margin:0 auto; }
.ffl-legal-title{ text-align:left; margin:0 0 8px; max-width:none; }
.ffl-legal .ffl-eyebrow-center{ text-align:left; }
.ffl-legal-updated{ font-size:13px; color:var(--ink-35); margin-bottom:48px; }
.ffl-legal-body h2{ font-family:var(--serif); font-size:22px; margin:48px 0 16px; }
.ffl-legal-body h2:first-child{ margin-top:0; }
.ffl-legal-body h3{ font-size:15px; margin:28px 0 10px; }
.ffl-legal-body p{ font-size:14.5px; color:var(--ink-60); line-height:1.7; margin-bottom:14px; }
.ffl-legal-body a{ color:var(--purple-2); text-decoration:underline; }
.ffl-legal-list{ margin:0 0 14px; padding-left:0; }
.ffl-legal-list li{
  font-size:14.5px; color:var(--ink-60); line-height:1.7; padding-left:20px; position:relative;
}
.ffl-legal-list li::before{ content:'—'; position:absolute; left:0; color:var(--ink-35); }
.ffl-legal-callout{
  background:var(--cream-card); border-radius:var(--radius-md); padding:20px 24px; margin:20px 0 32px;
}
.ffl-legal-callout p{ font-size:13.5px; margin-bottom:8px; }
.ffl-legal-callout p:last-child{ margin-bottom:0; }

/* -------------------- Page /resiliation/ -------------------- */
.ffl-legal-inner--narrow{ max-width:560px; }
.ffl-cancel-intro{ font-size:14.5px; color:var(--ink-60); line-height:1.6; margin-bottom:32px; }
.ffl-cancel-form{ background:var(--cream-card); border-radius:var(--radius-lg); padding:28px 24px; }
.ffl-cancel-form .ff-btn-primary{ width:100%; margin-top:4px; }
.ffl-cancel-recap{ background:var(--cream-card); border-radius:var(--radius-lg); padding:28px 24px; }
.ffl-cancel-recap-title{ font-size:17px; margin-bottom:18px; }
.ffl-cancel-recap-row{
  display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-top:1px solid var(--ink-10);
  font-size:13.5px;
}
.ffl-cancel-recap-row:first-of-type{ border-top:none; }
.ffl-cancel-recap-label{ color:var(--ink-60); flex-shrink:0; }
.ffl-cancel-recap-value{ font-weight:600; text-align:right; word-break:break-word; }
.ffl-cancel-recap-actions{ display:flex; flex-direction:column; gap:10px; margin-top:24px; }
.ffl-cancel-recap-actions .ff-btn-primary, .ffl-cancel-recap-actions .ff-btn-ghost{ width:100%; }
.ffl-cancel-confirmed{
  background:rgba(47,122,79,.08); border:1px solid rgba(47,122,79,.3); border-radius:var(--radius-lg);
  padding:24px; text-align:left;
}
.ffl-cancel-confirmed-title{ font-size:16px; font-weight:700; color:var(--success); margin-bottom:8px; }
.ffl-cancel-confirmed p{ font-size:13.5px; line-height:1.6; color:var(--ink-60); }
.ffl-cancel-alt{ text-align:center; font-size:13px; color:var(--ink-60); margin-top:24px; }
.ffl-cancel-alt a{ color:var(--purple-2); text-decoration:underline; }

@media (max-width:820px){
  .ffl-nav{ display:none; }
  .ffl-nav--legal{ display:flex; }
  .ffl-burger{ display:flex; }
  .ffl-mobile-nav.is-open{ max-height:320px; }
  .ffl-burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .ffl-burger.is-open span:nth-child(2){ opacity:0; }
  .ffl-burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .ffl-brand-tag{ display:none; }
}

/* =========================================================
   WIZARD SHELL (#ff-app-root > .ff-wizard-*)
   Header simplifié pendant le questionnaire (§10).
   ========================================================= */
.ff-wizard-header{
  position:sticky; top:0; z-index:60;
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:16px;
  padding:16px clamp(16px,4vw,48px);
  background:rgba(251,250,248,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ink-10);
}
.ff-wizard-brand{ font-family:var(--serif); font-size:16px; color:var(--purple-2); white-space:nowrap; }
.ff-wizard-close{
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--ink-60); transition:background .2s;
}
.ff-wizard-close:hover{ background:var(--ink-10); }

.ff-progress-host{ min-width:0; }
.ff-progress{ display:flex; flex-direction:column; gap:6px; }
.ff-progress-track{ display:flex; gap:4px; }
.ff-progress-seg{ flex:1; height:4px; border-radius:4px; background:var(--ink-10); overflow:hidden; position:relative; }
.ff-progress-seg.is-done{ background:var(--purple-2); }
.ff-progress-seg.is-active{ background:var(--ink-10); }
.ff-progress-fill{
  display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg, var(--purple-1), var(--purple-2));
  transition:width .45s var(--ease);
}
.ff-progress-label{ font-size:11.5px; color:var(--ink-60); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.ff-autosave-host{ display:flex; align-items:center; }
.ff-autosave{ font-size:12px; color:var(--ink-35); white-space:nowrap; transition:opacity .3s; }
.ff-autosave.is-idle{ opacity:0; }
.ff-autosave.is-saving{ color:var(--ink-60); }
.ff-autosave.is-saved{ color:var(--success); }
.ff-autosave.is-error{ color:var(--danger); font-weight:600; }

.ff-wizard-layout{
  max-width:640px; margin:0 auto; padding:clamp(32px,7vw,64px) 20px 40px;
  display:flex; flex-direction:column; gap:28px;
}
.ff-wizard-body{ min-height:40vh; }
.ff-sidebar-host{ order:-1; }
.ff-wizard-footer{ position:sticky; bottom:0; background:linear-gradient(180deg, rgba(251,250,248,0), var(--page-bg) 30%); padding:16px 20px 24px; }
.ff-wizard-footer-inner{ max-width:640px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ff-wizard-privacy-note{
  max-width:640px; margin:10px auto 0; text-align:center; font-size:11.5px; color:var(--ink-35);
}
.ff-wizard-privacy-note a{ color:var(--ink-35); text-decoration:underline; }

@media (min-width:1080px){
  .ff-wizard-layout{
    max-width:1080px; flex-direction:row; align-items:flex-start; gap:64px; padding-top:clamp(48px,6vw,72px);
  }
  .ff-wizard-body{ flex:1 1 auto; min-width:0; max-width:640px; }
  .ff-sidebar-host{ order:0; flex:0 0 300px; position:sticky; top:104px; }
  .ff-wizard-footer-inner, .ff-continue-nudge{ max-width:1080px; padding-right:364px; box-sizing:border-box; }
  .ff-wizard-privacy-note{ max-width:1080px; padding-right:364px; box-sizing:border-box; }
}

.ff-screen-anim{ animation:ffScreenIn .5s var(--ease) both; }
@keyframes ffScreenIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.ff-shake{ animation:ffShake .4s var(--ease); }
@keyframes ffShake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }

.ff-continue-nudge{
  font-size:12.5px; color:var(--danger); font-weight:600; text-align:right;
  max-width:640px; margin:0 auto 10px; animation:ffNudgeIn .3s var(--ease) both;
}
@keyframes ffNudgeIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* -------------------- Micro-validations (satisfaction ponctuelle) -------------------- */
.ff-micro-validation{
  display:flex; align-items:center; gap:10px; margin-bottom:24px; padding:12px 16px;
  border-radius:100px; background:rgba(47,122,79,.08); color:var(--success);
  font-size:13.5px; font-weight:600;
  animation:ffMicroIn .5s var(--ease) both, ffMicroOut .5s var(--ease) 3.2s both;
}
.ff-micro-validation-check{
  display:flex; align-items:center; justify-content:center; width:20px; height:20px;
  border-radius:50%; background:var(--success); color:#fff; font-size:11px; flex-shrink:0;
}
@keyframes ffMicroIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@keyframes ffMicroOut{ to{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .ff-micro-validation{ animation:none; }
}

/* -------------------- Project moments (le projet prend vie) -------------------- */
.ff-project-moment{
  --ff-moment-accent: var(--purple-2);
  display:flex; align-items:center; gap:16px; margin-bottom:32px; padding:18px 20px;
  border-radius:var(--radius-lg); background:var(--cream-card);
  border-left:3px solid var(--ff-moment-accent);
  animation:ffMomentIn .6s var(--ease) both;
}
.ff-project-moment.has-photo{ padding:14px; }
.ff-project-moment-photo{ flex-shrink:0; width:64px; height:64px; border-radius:var(--radius-sm); overflow:hidden; }
.ff-project-moment-photo img{ width:100%; height:100%; object-fit:cover; }
.ff-project-moment-name{ font-family:var(--serif); font-size:16px; margin-bottom:2px; }
.ff-project-moment-subtitle{ font-size:12.5px; color:var(--ink-60); margin-bottom:6px; }
.ff-project-moment-tagline{ font-size:13px; font-style:italic; color:var(--ff-moment-accent); }
@keyframes ffMomentIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .ff-project-moment{ animation:none; }
}

/* =========================================================
   SIDEBAR "VOTRE UNIVERS" — le futur site s'assemble devant soi.
   Réutilise volontairement le même vocabulaire visuel que le reste
   du formulaire (textures moodboard, swatches galerie, barres de
   personnalité) : ce n'est ni un dashboard ni une liste de champs.
   ========================================================= */
.ff-sidebar{ border:none; }
.ff-sidebar > summary{
  display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer;
  list-style:none; padding:14px 18px; border-radius:var(--radius-lg); background:var(--cream-card);
  font-family:var(--serif); font-size:15px; color:var(--ink);
}
.ff-sidebar > summary::-webkit-details-marker{ display:none; }
.ff-sidebar > summary::after{
  content:'+'; font-family:var(--sans); font-size:16px; color:var(--ink-60); transition:transform .25s var(--ease);
}
.ff-sidebar[open] > summary::after{ content:'–'; }
.ff-sidebar-inner{ padding:6px 4px 4px; }

/* -------------------- Liste "checklist" toujours visible -------------------- */
/* Les 8 briques sont TOUJOURS présentes, dès le premier écran : estompées
   tant qu'elles n'ont pas de contenu, révélées dès que la donnée existe.
   C'est ce qui donne la sensation de voir le site "se construire". */
.ff-sidebar-row{ display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--ink-10); }
.ff-sidebar-row:first-child{ border-top:none; }
.ff-sidebar-dot{
  flex-shrink:0; width:7px; height:7px; margin-top:6px; border-radius:50%;
  background:var(--ink-10); transition:background .3s var(--ease);
}
.ff-sidebar-row.is-filled .ff-sidebar-dot{ background:var(--purple-2); }
.ff-sidebar-row-body{ min-width:0; flex:1; }
.ff-sidebar-row-label{ font-size:12.5px; font-weight:600; color:var(--ink-35); transition:color .3s var(--ease); }
.ff-sidebar-row.is-filled .ff-sidebar-row-label{ color:var(--ink); margin-bottom:8px; }
.ff-sidebar-row:not(.is-filled) .ff-sidebar-row-body > *{ display:none; }
.ff-sidebar-row-enter .ff-sidebar-row-body{ animation:ffSidebarRowIn .5s var(--ease) both; }
@keyframes ffSidebarRowIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .ff-sidebar-row-enter .ff-sidebar-row-body{ animation:none; } }

.ff-sidebar-name{ font-family:var(--serif); font-size:18px; line-height:1.2; }
.ff-sidebar-sub{ font-size:12.5px; color:var(--ink-60); margin-top:2px; }

.ff-sidebar-pills{ display:flex; flex-wrap:wrap; gap:6px; }
.ff-sidebar-pill{
  font-size:11.5px; font-weight:600; padding:5px 12px; border-radius:100px;
  background:var(--cream-card); color:var(--ink-60);
}
.ff-sidebar-pill--accent{ background:rgba(98,37,230,.1); color:var(--purple-2); }
.ff-sidebar-pill--muted{ background:transparent; border:1px dashed var(--ink-10); color:var(--ink-35); }

.ff-sidebar-swatch{
  position:relative; height:56px; border-radius:var(--radius-md); overflow:hidden; display:flex; align-items:flex-end;
  margin-bottom:8px;
}
.ff-sidebar-swatch-label{
  position:relative; padding:8px 10px; font-size:11.5px; font-weight:600; color:#fff;
  background:linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0) 80%); width:100%;
}
.ff-sidebar-bars{ display:flex; gap:3px; }
.ff-sidebar-bar{ flex:1; height:3px; border-radius:4px; background:var(--ink-10); overflow:hidden; }
.ff-sidebar-bar-fill{ display:block; height:100%; background:linear-gradient(90deg, var(--purple-1), var(--purple-2)); }

.ff-sidebar-dots{ display:flex; gap:8px; }
.ff-sidebar-dot-color{ width:20px; height:20px; border-radius:50%; box-shadow:0 0 0 1.5px var(--ink-10); }

.ff-sidebar-photogrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.ff-sidebar-photo{ position:relative; aspect-ratio:1; border-radius:6px; overflow:hidden; background:var(--cream-card); }
.ff-sidebar-photo img{ width:100%; height:100%; object-fit:cover; }

.ff-sidebar-tone-words{ font-family:var(--serif); font-style:italic; font-size:13.5px; color:var(--ink-60); line-height:1.5; }

/* =========================================================
   CONTENU D'ÉCRAN — entêtes, champs, notes
   ========================================================= */
.ff-head{ margin-bottom:28px; }
.ff-eyebrow{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--purple-2); margin-bottom:10px; }
.ff-title{ font-size:clamp(24px,4vw,32px); line-height:1.22; margin-bottom:10px; }
.ff-subtitle{ font-size:15.5px; color:var(--ink-60); line-height:1.6; }
.ff-hint{ font-size:13px; color:var(--ink-35); margin-top:10px; }
.ff-meta{ font-size:13px; color:var(--ink-35); margin-top:16px; }
.ff-question{ font-size:15px; font-weight:600; margin:28px 0 14px; }
.ff-note{ font-size:13.5px; color:var(--ink-60); margin-top:16px; line-height:1.5; }
.ff-help{ font-size:12.5px; color:var(--ink-35); margin-top:6px; }

.ff-field{ margin-bottom:20px; scroll-margin-top:88px; }
.ff-field-group{ scroll-margin-top:88px; }
.ff-label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:8px; }
.ff-required{ color:var(--purple-2); }
.ff-field input[type=text], .ff-field input[type=email], .ff-field input[type=tel], .ff-field input[type=date], .ff-field textarea, .ff-field select{
  width:100%; padding:14px 16px; border-radius:var(--radius-sm); border:1.5px solid var(--ink-10);
  background:#fff; transition:border-color .2s, box-shadow .2s;
}
.ff-field input:focus, .ff-field textarea:focus, .ff-field select:focus{
  border-color:var(--purple-2); box-shadow:0 0 0 3px rgba(98,37,230,.12); outline:none;
}
.ff-field textarea{ resize:vertical; min-height:88px; font-family:inherit; }
.ff-field.has-error input, .ff-field.has-error textarea, .ff-field.has-error select{ border-color:var(--danger); }
.ff-error{ color:var(--danger); font-size:12.5px; margin-top:6px; font-weight:600; }
.ff-error[hidden]{ display:none; }

/* Groupes (cartes, moodboards, chips) : même traitement d'erreur que les
   champs texte, appliqué au groupe entier plutôt qu'à un champ isolé —
   c'est ce qui évite le blocage silencieux sur "Continuer". */
.ff-field-group.has-error{
  padding:16px; margin:0 -16px 20px; border-radius:var(--radius-md);
  background:rgba(180,68,46,.05); box-shadow:0 0 0 1.5px rgba(180,68,46,.4);
}
.ff-field-group.has-error .ff-error{ margin:12px 0 0; }

.ff-checkbox{ display:flex; align-items:center; gap:10px; font-size:14px; margin-bottom:18px; cursor:pointer; }
.ff-checkbox input{ width:18px; height:18px; accent-color:var(--purple-2); }

.ff-color-row{ display:flex; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
.ff-color-field{ display:flex; flex-direction:column; gap:8px; font-size:13px; font-weight:600; }
.ff-color-field input[type=color]{ width:56px; height:40px; border-radius:var(--radius-sm); border:1.5px solid var(--ink-10); padding:2px; background:#fff; }

.ff-trust-box{ background:var(--cream-card); border-radius:var(--radius-lg); padding:22px 24px; margin-top:20px; }
.ff-trust-box h3{ font-size:15px; margin-bottom:10px; }
.ff-trust-box p{ font-size:13.5px; color:var(--ink-60); line-height:1.6; margin-bottom:8px; }

.ff-upload-status{ font-size:12.5px; color:var(--purple-2); margin-top:6px; min-height:1em; }

/* =========================================================
   CHOICE CARDS
   ========================================================= */
.ff-choice-grid{ display:grid; gap:12px; }
.ff-choice-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.ff-choice-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.ff-choice-grid.cols-auto{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.ff-choice-card{
  position:relative; text-align:left; padding:16px 18px; border-radius:var(--radius-md);
  border:1.5px solid var(--ink-10); background:#fff;
  transition:transform .25s var(--ease), border-color .2s, box-shadow .2s;
}
.ff-choice-grid.size-lg .ff-choice-card{ padding:22px 22px 20px; }
.ff-choice-card:hover{ transform:translateY(-2px); border-color:var(--ink-35); }
.ff-choice-card:active{ transform:translateY(-2px) scale(.97); }
.ff-choice-card.is-selected{ border-color:var(--purple-2); background:rgba(98,37,230,.05); box-shadow:0 4px 16px rgba(98,37,230,.12); }
.ff-choice-card.is-selected:active{ transform:translateY(0) scale(.97); }
.ff-choice-check{
  position:absolute; top:14px; right:14px; width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--ink-10); background:#fff; transition:all .2s var(--ease);
}
.ff-choice-card.is-selected .ff-choice-check{
  background:var(--purple-2); border-color:var(--purple-2);
  box-shadow:inset 0 0 0 3px #fff;
  animation:ffCheckPop .3s var(--ease);
}
@keyframes ffCheckPop{ 0%{ transform:scale(.6); } 60%{ transform:scale(1.15); } 100%{ transform:scale(1); } }
.ff-choice-label{ display:block; font-size:14.5px; font-weight:600; padding-right:24px; }
.ff-choice-desc{ display:block; font-size:12.5px; color:var(--ink-60); margin-top:6px; line-height:1.5; }
.ff-choice-badge{ display:inline-block; margin-top:10px; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--purple-2); background:rgba(98,37,230,.1); padding:3px 9px; border-radius:100px; }
.ff-choice-card--devis{ background:var(--cream-card); }
.ff-badge-devis{ display:inline-block; margin-top:10px; font-size:10px; font-weight:700; letter-spacing:.05em; color:var(--ink-60); border:1px solid var(--ink-35); padding:3px 8px; border-radius:100px; }

/* =========================================================
   MOODBOARDS — mini-moodboards texturés
   ========================================================= */
.ff-mood-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.ff-mood-grid.size-sm{ grid-template-columns:repeat(4,1fr); gap:10px; }
.ff-mood-tile{
  position:relative; aspect-ratio:1; border-radius:var(--radius-md); overflow:hidden;
  border:1.5px solid transparent; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ff-mood-grid.size-lg .ff-mood-tile{ aspect-ratio:4/5; }
.ff-mood-tile:hover{ transform:scale(1.03); }
.ff-mood-tile:active{ transform:scale(.98); }
.ff-mood-tile.is-selected{ border-color:var(--purple-2); box-shadow:0 8px 24px rgba(98,37,230,.25); }
.ff-mood-tile.is-selected .ff-mood-tag{ animation:ffTagPop .3s var(--ease); }
@keyframes ffTagPop{ 0%{ opacity:0; transform:translateY(4px); } 100%{ opacity:1; transform:none; } }
.ff-mood-texture{ position:absolute; inset:0; }
.ff-mood-label{
  position:absolute; left:0; right:0; bottom:0; padding:12px 14px;
  font-size:12.5px; font-weight:600; color:#fff;
  background:linear-gradient(0deg, rgba(0,0,0,.62), rgba(0,0,0,0) 70%);
  display:flex; align-items:center; gap:8px;
}
.ff-mood-tag{ font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; background:var(--purple-2); padding:2px 7px; border-radius:100px; }
.ff-mood-tag--alt{ background:rgba(255,255,255,.25); }
/* Textures distinctes par univers (dégradés — pas de dépendance image) */
.ff-mood-editorial .ff-mood-texture{ background:linear-gradient(135deg,#EDEAE0,#C9C2AE); }
.ff-mood-minimal .ff-mood-texture{ background:linear-gradient(135deg,#FBFAF8,#E4E0D6); }
.ff-mood-elegant .ff-mood-texture{ background:linear-gradient(135deg,#E9E2D6,#B7A98F); }
.ff-mood-cinematographique .ff-mood-texture{ background:linear-gradient(135deg,#2A2733,#0F172A); }
.ff-mood-naturel .ff-mood-texture{ background:linear-gradient(135deg,#E8E4CF,#A9B48C); }
.ff-mood-audacieux .ff-mood-texture{ background:linear-gradient(135deg,var(--purple-1),#E64571); }
.ff-mood-sombre .ff-mood-texture{ background:linear-gradient(135deg,#1B1B24,#3A2E4D); }
.ff-mood-colore .ff-mood-texture{ background:linear-gradient(135deg,#FFB84D,#6225E6 60%,#2FB3A6); }
.ff-mood-autre .ff-mood-texture{
  background:
    repeating-linear-gradient(135deg, rgba(15,23,42,.06) 0 10px, rgba(15,23,42,.02) 10px 20px),
    linear-gradient(135deg,#ECE7DA,#D8D0BC);
}

/* =========================================================
   SLIDERS
   ========================================================= */
.ff-slider-list{ display:flex; flex-direction:column; gap:26px; }
.ff-slider-labels{ display:flex; justify-content:space-between; font-size:12.5px; font-weight:600; color:var(--ink-60); margin-bottom:10px; }
.ff-slider-input{
  -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:4px;
  background:var(--ink-10); outline:none;
}
.ff-slider-input::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg, var(--purple-1), var(--purple-2));
  box-shadow:0 2px 8px rgba(98,37,230,.4); cursor:pointer; transition:transform .2s var(--ease);
}
.ff-slider-input::-webkit-slider-thumb:hover{ transform:scale(1.15); }
.ff-slider-input::-webkit-slider-thumb:active{ transform:scale(1.28); box-shadow:0 2px 14px rgba(98,37,230,.55); }
.ff-slider-input::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; border:none;
  background:linear-gradient(135deg, var(--purple-1), var(--purple-2));
  box-shadow:0 2px 8px rgba(98,37,230,.4); cursor:pointer;
  transition:transform .2s var(--ease);
}
.ff-slider-input::-moz-range-thumb:hover{ transform:scale(1.15); }
.ff-slider-input::-moz-range-thumb:active{ transform:scale(1.28); }

/* =========================================================
   CHIPS
   ========================================================= */
.ff-chip-group{ display:flex; flex-wrap:wrap; gap:8px; }
.ff-chip{
  padding:9px 16px; border-radius:100px; font-size:13.5px; font-weight:600;
  border:1.5px solid var(--ink-10); background:#fff; color:var(--ink);
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.ff-chip:hover:not(:disabled):not(.is-selected){ border-color:var(--ink-35); background:rgba(15,23,42,.05); transform:translateY(-1px); }
.ff-chip.is-selected{ background:var(--ink); color:var(--page-bg); border-color:var(--ink); box-shadow:0 4px 12px rgba(15,23,42,.22); }
.ff-chip.is-selected:hover:not(:disabled){ background:#28324a; border-color:#28324a; transform:translateY(-1px); }
.ff-chip:active:not(:disabled){ transform:translateY(0) scale(.97); }
.ff-chip:disabled{ opacity:.35; cursor:not-allowed; }

.ff-taglist-input{
  margin-top:10px; width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--ink-10);
}

/* =========================================================
   INSPIRATIONS
   ========================================================= */
.ff-inspiration-list{ display:flex; flex-direction:column; gap:20px; margin-bottom:16px; }
.ff-inspiration-card{ background:var(--cream-card); border-radius:var(--radius-lg); padding:20px; }

/* =========================================================
   UPLOAD / DROPZONE / PHOTOS
   ========================================================= */
.ff-dropzone{
  position:relative; text-align:center; padding:32px 20px; border-radius:var(--radius-lg);
  border:1.5px dashed var(--ink-35); cursor:pointer; transition:border-color .2s, background .2s;
}
.ff-dropzone:hover, .ff-dropzone.is-dragover{ border-color:var(--purple-2); background:rgba(98,37,230,.04); }
.ff-dropzone-icon{ width:36px; height:36px; margin:0 auto 12px; border-radius:50%; background:var(--cream-card); }
.ff-dropzone-icon::before{ content:'+'; display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:20px; color:var(--purple-2); }
.ff-dropzone-label{ font-size:14px; font-weight:600; margin-bottom:4px; }
.ff-dropzone-hint{ font-size:12px; color:var(--ink-60); }
.ff-dropzone-input{ position:absolute; inset:0; opacity:0; pointer-events:none; }

.ff-collection-list{ display:flex; flex-direction:column; gap:28px; margin-bottom:20px; }
.ff-collection{ background:var(--cream-card); border-radius:var(--radius-lg); padding:22px; }
.ff-collection-head{ display:flex; align-items:flex-end; gap:14px; }
.ff-collection-head .ff-field{ flex:1; margin-bottom:0; }
.ff-collection-head .ff-btn-ghost{ height:48px; padding:0 16px; font-size:12.5px; flex-shrink:0; margin-bottom:2px; }

.ff-photo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; margin:16px 0; }
.ff-photo-tile{ position:relative; aspect-ratio:1; border-radius:var(--radius-sm); overflow:hidden; background:#fff; }
.ff-photo-tile img{ width:100%; height:100%; object-fit:cover; }
.ff-photo-tile-actions{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:4px;
  background:rgba(15,23,42,.45); opacity:0; transition:opacity .2s;
}
.ff-photo-tile:hover .ff-photo-tile-actions, .ff-photo-tile:focus-within .ff-photo-tile-actions{ opacity:1; }
.ff-photo-tile-actions button{
  width:26px; height:26px; border-radius:50%; background:#fff; color:var(--ink); font-size:12px;
  display:flex; align-items:center; justify-content:center;
}
.ff-photo-remove{ color:var(--danger) !important; }

.ff-photo-tile img.is-loading-preview{ opacity:0; }
.ff-photo-tile.is-uploading img{ filter:blur(1px) brightness(.85); }
.ff-photo-spinner{
  position:absolute; top:50%; left:50%; width:22px; height:22px; margin:-11px 0 0 -11px;
  border-radius:50%; border:2.5px solid rgba(255,255,255,.5); border-top-color:#fff;
  animation:ffSpin .7s linear infinite;
}
@keyframes ffSpin{ to{ transform:rotate(360deg); } }
.ff-photo-tile.is-error{ border:1.5px solid var(--danger); }
.ff-photo-error-badge{
  position:absolute; left:6px; bottom:6px; font-size:10px; font-weight:700; letter-spacing:.02em;
  color:#fff; background:var(--danger); padding:2px 7px; border-radius:100px;
}
.ff-photo-tile.is-ready-new{ animation:ffPhotoReady .5s var(--ease); }
@keyframes ffPhotoReady{ 0%{ box-shadow:0 0 0 3px rgba(98,37,230,.5); } 100%{ box-shadow:0 0 0 0 rgba(98,37,230,0); } }
@media (prefers-reduced-motion: reduce){ .ff-photo-tile.is-ready-new{ animation:none; } }
.ff-dropzone.is-limit-reached{ opacity:.55; cursor:not-allowed; }
.ff-dropzone.is-limit-reached:hover{ border-color:var(--ink-35); background:none; }

.ff-brand-preview{ margin-top:10px; }
.ff-brand-preview-img{
  max-width:160px; max-height:100px; border-radius:var(--radius-sm); border:1px solid var(--ink-10);
  background:#fff; object-fit:contain; padding:8px;
}

.ff-fav-counter{ font-size:14px; font-weight:600; margin-bottom:16px; color:var(--ink-60); }
.ff-fav-counter.is-ready{ color:var(--success); }
.ff-photo-grid--fav{ grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); }
.ff-fav-tile{ position:relative; aspect-ratio:1; border-radius:var(--radius-sm); overflow:hidden; border:2px solid transparent; transition:border-color .2s, transform .2s var(--ease); }
.ff-fav-tile img{ width:100%; height:100%; object-fit:cover; }
.ff-fav-tile:hover{ transform:scale(1.02); }
.ff-fav-tile.is-selected{ border-color:var(--purple-2); }
.ff-fav-check{
  position:absolute; top:6px; right:6px; width:20px; height:20px; border-radius:50%;
  background:rgba(255,255,255,.85); border:1.5px solid var(--ink-35);
}
.ff-fav-tile.is-selected .ff-fav-check{ background:var(--purple-2); border-color:var(--purple-2); }
.ff-fav-tile.is-selected .ff-fav-check::after{ content:'✓'; color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; height:100%; }

/* =========================================================
   PRESTATIONS (services builder)
   ========================================================= */
.ff-service-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.ff-service-card{ background:var(--cream-card); border-radius:var(--radius-lg); overflow:hidden; }
.ff-service-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:18px 20px; text-align:left; }
.ff-service-name{ font-size:14.5px; font-weight:700; }
.ff-service-chevron{ width:10px; height:10px; border-right:2px solid var(--ink-60); border-bottom:2px solid var(--ink-60); transform:rotate(-45deg); transition:transform .25s var(--ease); }
.ff-service-chevron.is-open{ transform:rotate(45deg); }
.ff-service-body{ padding:0 20px 20px; }
.ff-service-flags{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.ff-service-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.ff-service-actions button{ font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:100px; background:#fff; }

/* =========================================================
   GALERIE — previews de style
   ========================================================= */
.ff-gallery-preview-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.ff-gallery-preview{ text-align:left; border-radius:var(--radius-md); border:1.5px solid var(--ink-10); overflow:hidden; transition:transform .25s var(--ease), border-color .2s; background:#fff; }
.ff-gallery-preview:hover{ transform:translateY(-2px); }
.ff-gallery-preview.is-selected{ border-color:var(--purple-2); box-shadow:0 8px 20px rgba(98,37,230,.15); }
.ff-gallery-preview-swatch{ display:block; height:84px; background:var(--cream-card); transition:transform .4s var(--ease); }
.ff-gallery-preview:hover .ff-gallery-preview-swatch{ transform:scale(1.04); }
.ff-gallery-preview--editorial .ff-gallery-preview-swatch{ background:linear-gradient(180deg,#ECE7DA 55%,#D8D0BC 55%); }
.ff-gallery-preview--grille .ff-gallery-preview-swatch{ background:repeating-linear-gradient(90deg,#ECE7DA 0 24%,#D8D0BC 24% 26%); }
.ff-gallery-preview--masonry .ff-gallery-preview-swatch{ background:linear-gradient(115deg,#ECE7DA 30%,#D8D0BC 30% 55%,#ECE7DA 55%); }
.ff-gallery-preview--immersif .ff-gallery-preview-swatch{ background:radial-gradient(circle at 50% 45%, #D8D0BC 0 40%, #ECE7DA 41%); }
.ff-gallery-preview--auto .ff-gallery-preview-swatch{ background:linear-gradient(120deg, rgba(146,98,251,.25), rgba(98,37,230,.25)); }
.ff-gallery-preview-label{ display:block; padding:12px 14px 2px; font-size:13.5px; font-weight:700; }
.ff-gallery-preview-desc{ display:block; padding:0 14px 14px; font-size:11.5px; color:var(--ink-60); }

/* =========================================================
   DEV PANEL — jamais visible en production
   ========================================================= */
.ff-devpanel{ position:fixed; right:16px; bottom:16px; z-index:999; font-size:12px; }
.ff-devpanel-toggle{ background:var(--ink); color:#fff; padding:8px 14px; border-radius:100px; font-size:11px; font-weight:700; letter-spacing:.04em; }
.ff-devpanel-body{ margin-top:8px; background:#fff; border:1px solid var(--ink-10); border-radius:var(--radius-md); padding:14px; width:260px; box-shadow:0 12px 32px rgba(15,23,42,.18); display:flex; flex-direction:column; gap:10px; }
.ff-devpanel-title{ font-weight:700; font-size:12px; }
.ff-devpanel-row{ display:flex; flex-direction:column; gap:6px; }
.ff-devpanel-row button, .ff-devpanel-row select{ padding:8px 10px; border-radius:8px; border:1px solid var(--ink-10); font-size:11.5px; background:var(--cream); text-align:left; }

/* =========================================================
   BRIEF (§25-26)
   ========================================================= */
.ff-brief-wrap{ max-width:1080px; margin:0 auto; padding:clamp(32px,7vw,64px) 20px 80px; }
.ff-brief-layout{ display:flex; flex-direction:column; gap:40px; }
.ff-brief-sticky{ text-align:left; }
.ff-brief-sticky .ff-title{ margin:10px 0 10px; }
.ff-brief-sticky-lead{ font-family:var(--serif); font-size:19px; line-height:1.4; margin-bottom:10px; }
.ff-brief-sticky .ff-subtitle{ max-width:420px; margin-bottom:24px; }
.ff-brief-sticky-actions{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.ff-brief-sticky-actions .ff-btn-primary, .ff-brief-sticky-actions .ff-btn-ghost{ width:100%; max-width:320px; justify-content:center; }
.ff-brief-reveal-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--success);
  background:rgba(47,122,79,.1); padding:6px 14px; border-radius:100px; margin-bottom:14px;
}
.ff-brief-scroll{ min-width:0; }
@media (min-width:1024px){
  .ff-brief-layout{ flex-direction:row; align-items:flex-start; gap:64px; }
  .ff-brief-sticky{ flex:0 0 320px; position:sticky; top:100px; }
  .ff-brief-scroll{ flex:1 1 auto; }
}
.ff-brief{
  --ff-brief-accent: var(--purple-2);
  background:#fff; border-radius:var(--radius-xl); overflow:hidden; box-shadow:0 24px 60px rgba(15,23,42,.1);
}
.ff-brief-cover{
  position:relative; min-height:260px; display:flex; align-items:flex-end;
  background:linear-gradient(135deg,#1B1B24,#3A2E4D);
}
.ff-brief-cover-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.ff-brief-cover-text{ position:relative; padding:32px; color:#fff; }
.ff-brief-eyebrow{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ff-brief-accent); }
.ff-brief-cover-text h1{ font-family:var(--serif); font-size:clamp(26px,5vw,38px); margin:8px 0 6px; }
.ff-brief-cover-text p{ font-size:14px; color:rgba(255,255,255,.8); }
.ff-brief-meta{ margin-top:10px !important; font-size:12px !important; letter-spacing:.03em; }

/* -------------------- Récompense principale du parcours -------------------- */
/* Reveal éditorial, premium, sans confettis ni animation enfantine : un
   fondu-montée séquencé, respectueux de prefers-reduced-motion. */
.ff-brief-reveal-eyebrow{ animation:ffBriefFadeUp .6s var(--ease) both; }
.ff-brief-reveal-title{ animation:ffBriefFadeUp .7s var(--ease) .08s both; }
.ff-brief-reveal .ff-subtitle{ animation:ffBriefFadeUp .7s var(--ease) .16s both; }
.ff-brief-reveal-doc{ animation:ffBriefRise .8s var(--ease) .22s both; }
.ff-brief-reveal-doc .ff-brief-section{ animation:ffBriefFadeUp .5s var(--ease) both; animation-delay:.3s; }
.ff-brief-reveal-doc .ff-brief-section:nth-of-type(2){ animation-delay:.35s; }
.ff-brief-reveal-doc .ff-brief-section:nth-of-type(3){ animation-delay:.4s; }
.ff-brief-reveal-doc .ff-brief-section:nth-of-type(4){ animation-delay:.45s; }
.ff-brief-reveal-doc .ff-brief-section:nth-of-type(n+5){ animation-delay:.5s; }
@keyframes ffBriefFadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes ffBriefRise{ from{ opacity:0; transform:translateY(24px) scale(.985); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .ff-brief-reveal-eyebrow, .ff-brief-reveal-title, .ff-brief-reveal .ff-subtitle,
  .ff-brief-reveal-doc, .ff-brief-reveal-doc .ff-brief-section{ animation:none; }
}

.ff-brief-section{ padding:32px 36px; border-top:1px solid var(--ink-10); }
.ff-brief-section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.ff-brief-section-head h2{ font-family:var(--serif); font-size:20px; font-weight:500; }
.ff-brief-edit{ font-size:12px; font-weight:600; color:var(--purple-2); text-decoration:underline; }
.ff-kv{ font-size:14px; line-height:1.9; }
.ff-kv-label{ color:var(--ink-35); font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
.ff-brief-personality{ display:flex; gap:6px; margin:10px 0; }
.ff-brief-bar{ flex:1; height:5px; border-radius:4px; background:var(--ink-10); overflow:hidden; }
.ff-brief-bar-fill{ display:block; height:100%; background:linear-gradient(90deg, var(--purple-1), var(--purple-2)); }
.ff-brief-photo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:8px; margin-bottom:12px; }
.ff-brief-photo-grid img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--radius-sm); }

/* =========================================================
   OFFRE (§27-33)
   ========================================================= */
.ff-offer-wrap{ max-width:620px; margin:0 auto; padding:clamp(32px,7vw,56px) 20px 80px; }
.ff-offer-head{ text-align:center; margin-bottom:28px; }
.ff-offer-lead{ font-family:var(--serif); font-size:18px; color:var(--ink-60); margin-top:6px; }

/* -------------------- Prix : 0€ aujourd'hui mis en avant -------------------- */
.ff-offer-price-card{ text-align:center; background:var(--cream-card); border-radius:var(--radius-xl); padding:clamp(28px,6vw,40px); margin-bottom:24px; }
.ff-offer-price-today{ display:flex; align-items:baseline; justify-content:center; gap:8px; margin-bottom:14px; }
.ff-offer-price-today-num{ font-family:var(--serif); font-size:56px; line-height:1; }
.ff-offer-price-today-label{ font-size:16px; color:var(--ink-60); }
.ff-offer-price-badges{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:12px; }
.ff-offer-badge{
  font-size:12.5px; font-weight:700; padding:6px 14px; border-radius:100px;
  background:#fff; color:var(--ink-60); border:1px solid var(--ink-10);
}
.ff-offer-badge--accent{ background:rgba(98,37,230,.1); color:var(--purple-2); border-color:transparent; }
.ff-offer-price-detail{ font-size:13px; color:var(--ink-60); }

.ff-offer-consent{
  background:var(--cream-card); border-radius:var(--radius-lg); padding:20px 22px; margin-bottom:20px; text-align:left;
}
.ff-offer-consent .ff-checkbox{ align-items:flex-start; margin-bottom:0; }
.ff-offer-consent .ff-checkbox input{ margin-top:3px; flex-shrink:0; }
.ff-offer-consent .ff-checkbox span{ line-height:1.5; font-size:13.5px; }
.ff-offer-consent .ff-checkbox a{ color:var(--purple-2); text-decoration:underline; }
.ff-offer-consent-early{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--ink-10);
}
.ff-offer-consent-early-title{ font-size:13.5px; font-weight:600; margin-bottom:10px; }
.ff-offer-consent-early .ff-checkbox{ margin-bottom:6px; }
.ff-offer-consent-subtext{ font-size:12px; color:var(--ink-60); line-height:1.5; margin:0 0 0 28px; }

.ff-offer-cta-zone{ text-align:center; margin-bottom:40px; }
.ff-offer-cta-zone .ff-btn-primary{ width:100%; max-width:360px; }
.ff-offer-dev-note{ margin-top:10px; font-size:11.5px; color:var(--ink-35); }
.ff-offer-confirmed{ background:rgba(47,122,79,.08); border:1px solid rgba(47,122,79,.3); border-radius:var(--radius-lg); padding:24px; text-align:left; }
.ff-offer-confirmed-title{ font-size:16px; font-weight:700; color:var(--success); margin-bottom:8px; }
.ff-offer-confirmed p{ font-size:13.5px; line-height:1.6; margin-bottom:6px; }

/* -------------------- Timeline : dernière action avant HOMWEB -------------------- */
.ff-offer-timeline{ display:flex; flex-direction:column; gap:0; margin-bottom:28px; counter-reset:none; }
.ff-timeline-step{
  display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--ink-10);
}
.ff-timeline-step:last-child{ padding-bottom:0; }
.ff-timeline-icon{
  flex-shrink:0; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--cream-card); color:var(--ink-35);
}
.ff-timeline-icon svg{ width:18px; height:18px; }
.ff-timeline-step.is-current .ff-timeline-icon{ background:var(--purple-2); color:#fff; }
.ff-timeline-n{ font-family:var(--serif); font-size:11px; color:var(--ink-35); letter-spacing:.04em; }
.ff-timeline-title{ font-size:15px; font-weight:700; margin:2px 0; }
.ff-timeline-status{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--purple-2); margin-bottom:4px; }
.ff-timeline-step:first-child .ff-timeline-status{ color:var(--success); }
.ff-timeline-text{ font-size:13px; color:var(--ink-60); line-height:1.5; }

/* -------------------- Détails repliables -------------------- */
.ff-offer-details{ margin-bottom:32px; border-top:1px solid var(--ink-10); padding-top:18px; }
.ff-offer-details > summary{
  cursor:pointer; list-style:none; font-size:13.5px; font-weight:700; color:var(--purple-2);
  display:flex; align-items:center; gap:6px;
}
.ff-offer-details > summary::-webkit-details-marker{ display:none; }
.ff-offer-details > summary::after{ content:'↓'; font-size:11px; transition:transform .2s var(--ease); }
.ff-offer-details[open] > summary::after{ transform:rotate(180deg); }
.ff-offer-details-body{ padding-top:20px; }
.ff-offer-details-body h3{ font-size:14px; margin-bottom:8px; }
.ff-offer-retours-text{ font-size:13px; color:var(--ink-60); line-height:1.6; margin-bottom:20px; }
.ff-offer-included-list{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:18px; }
.ff-offer-included-list li{ font-size:13px; padding-left:20px; position:relative; }
.ff-offer-included-list li::before{ content:'✓'; position:absolute; left:0; color:var(--purple-2); font-weight:700; }

/* -------------------- Une question avant de se lancer -------------------- */
.ff-offer-alt{ display:flex; align-items:center; gap:18px; text-align:left; padding:24px; background:var(--cream-card); border-radius:var(--radius-lg); margin-bottom:24px; }
.ff-offer-dorian-photo{
  flex-shrink:0; width:56px; height:56px; border-radius:50%; overflow:hidden;
  background:#fff; border:1.5px solid var(--ink-10); display:flex; align-items:center; justify-content:center;
}
.ff-offer-dorian-photo img{ width:100%; height:100%; object-fit:cover; }
.ff-offer-dorian-initial{ font-family:var(--serif); font-size:20px; color:var(--ink-35); }
.ff-offer-alt-text h3{ font-size:15px; margin-bottom:6px; }
.ff-offer-alt-text p{ font-size:13px; color:var(--ink-60); margin-bottom:12px; line-height:1.6; }

/* -------------------- Retour Stripe Checkout -------------------- */
.ff-checkout-status{
  max-width:480px; margin:clamp(64px,14vw,120px) auto; padding:0 20px; text-align:center;
}
.ff-checkout-status .ff-title{ margin-bottom:10px; }
.ff-checkout-status p{ font-size:13.5px; color:var(--ink-60); line-height:1.6; margin-bottom:20px; }
.ff-checkout-status .ff-btn-primary{ width:100%; max-width:320px; }
.ff-checkout-spinner{
  width:36px; height:36px; margin:0 auto 20px; border-radius:50%;
  border:3px solid var(--ink-10); border-top-color:var(--purple-2);
  animation:ffSpin .7s linear infinite;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:760px){
  .ff-choice-grid.cols-2, .ff-choice-grid.cols-3{ grid-template-columns:1fr 1fr; }
  .ff-mood-grid{ grid-template-columns:1fr 1fr; }
  .ff-wizard-header{ grid-template-columns:auto 1fr auto; }
  .ff-autosave-host{ display:none; }
  .ff-offer-included-list{ grid-template-columns:1fr; }
  .ff-offer-alt{ flex-direction:column; text-align:center; }
  .ff-brief-section{ padding:22px 20px; }
  .ff-project-moment{ flex-direction:column; align-items:flex-start; text-align:left; }
  /* Marge de défilement pour qu'un champ/groupe en erreur ne se retrouve
     jamais masqué sous l'en-tête sticky ou le clavier virtuel. */
  .ff-field, .ff-field-group{ scroll-margin-top:96px; scroll-margin-bottom:140px; }
}
@media (max-width:560px){
  .ff-choice-grid.cols-3{ grid-template-columns:1fr 1fr; }
  .ff-mood-grid, .ff-mood-grid.size-sm{ grid-template-columns:1fr 1fr; }
  .ff-color-row{ gap:14px; }
  .ff-wizard-footer-inner{ gap:8px; }
  .ff-btn-primary{ height:52px; padding:0 22px; font-size:14px; }
  .ff-collection-head{ flex-direction:column; align-items:stretch; }
}

/* =========================================================
   IMPRESSION — brief uniquement
   ========================================================= */
@media print{
  body *{ visibility:hidden; }
  .ff-brief, .ff-brief *{ visibility:visible; }
  .ff-brief{ position:absolute; left:0; top:0; width:100%; box-shadow:none; border-radius:0; }
  .no-print, .ff-wizard-header, .ff-wizard-footer, .ff-devpanel{ display:none !important; }
  .ff-brief-cover{ background:#1B1B24 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}