/* ========================================================= HOMWEB Photographe — le brief en « L’Accrochage » Redesign visuel du formulaire (wizard), du récapitulatif et de l’offre, dans la continuité de la landing (css/landing.css). Aucune logique ici : uniquement la présentation des classes ff-* produites par js/wizard.js, js/components.js, js/screens/*, js/upload.js, js/sidebar.js, js/brief.js et js/offer.js. Les jetons --acc-* sont ceux de la landing (landing.css les déclare aussi sur #ff-app-root). ========================================================= */ #ff-app-root{ /* Les variables historiques de styles.css reprennent les jetons de la landing : tout ce qui s’appuie encore dessus change de DA d’un coup. */ --cream:var(--acc-wall-alt); --page-bg:var(--acc-wall); --cream-card:var(--acc-wall-alt); --ink:var(--acc-ink); --ink-60:var(--acc-label); --ink-35:#77726A; --ink-10:var(--acc-rule); --purple-1:var(--acc-ink); --purple-2:var(--acc-ink); --purple-solid:var(--acc-ink); --gold:var(--acc-label); --on-dark:var(--acc-on-ink); --on-dark-68:rgba(244,242,238,.7); --radius-xl:0; --radius-lg:0; --radius-md:0; --radius-sm:0; --serif:var(--acc-sans); --sans:var(--acc-sans); --ease:cubic-bezier(.22,1,.36,1); --success:#2F6B47; --danger:#B3261E; --acc-out:cubic-bezier(.22,1,.36,1); --ff-paper:#FBFAF7; min-height:100vh; color:var(--acc-ink); } body.is-wizard-mode{ background:var(--acc-wall); } #ff-app-root h1,#ff-app-root h2,#ff-app-root h3,#ff-app-root h4{ font-family:var(--acc-sans); } #ff-app-root :focus-visible{ outline:2px solid var(--acc-ink); outline-offset:3px; } #ff-app-root ::selection{ background:rgba(215,38,30,.16); } /* ---------- En-tête : même marque que la landing ---------- */ #ff-app-root .ff-wizard-header{ grid-template-columns:auto minmax(0,560px) 1fr auto; gap:28px; padding:0 clamp(20px,5vw,80px); height:76px; background:rgba(244,242,238,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--acc-rule); } #ff-app-root .ff-wizard-brand{ display:inline-flex; align-items:center; gap:12px; min-height:44px; color:var(--acc-ink); font-family:var(--acc-sans); } #ff-app-root .ff-wizard-brand img{ display:block; width:auto; height:20px; } #ff-app-root .ff-wizard-brand-sep{ width:1px; height:16px; background:var(--acc-rule); } #ff-app-root .ff-wizard-brand-tag{ font-family:var(--acc-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--acc-label); } #ff-app-root .ff-autosave-host{ justify-content:flex-end; } #ff-app-root .ff-autosave{ font-family:var(--acc-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--acc-label); } #ff-app-root .ff-autosave.is-saved{ color:var(--acc-label); } #ff-app-root .ff-autosave.is-saved::before{ content:""; display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:var(--acc-ink); vertical-align:1px; } #ff-app-root .ff-wizard-close{ width:44px; height:44px; border-radius:50%; border:1px solid var(--acc-rule); color:var(--acc-ink); font-size:13px; transition:border-color .2s var(--acc-out), transform .14s var(--acc-out); } #ff-app-root .ff-wizard-close:hover{ background:none; border-color:var(--acc-ink); } #ff-app-root .ff-wizard-close:active{ transform:scale(.96); } /* ---------- Progression : numéro de salle + ligne fine ---------- */ #ff-app-root .ff-progress{ flex-direction:column-reverse; gap:9px; } #ff-app-root .ff-progress-track{ gap:6px; } #ff-app-root .ff-progress-seg{ height:1px; border-radius:0; background:var(--acc-rule); overflow:visible; } #ff-app-root .ff-progress-seg.is-done{ background:var(--acc-ink); } #ff-app-root .ff-progress-seg.is-active{ background:var(--acc-rule); } #ff-app-root .ff-progress-fill{ position:absolute; left:0; top:-.5px; height:2px; border-radius:0; background:var(--acc-ink); transition:width .6s var(--acc-out); } #ff-app-root .ff-progress-seg.is-active::after{ content:""; position:absolute; right:-3px; top:-2.5px; width:6px; height:6px; border-radius:50%; background:var(--acc-red); } #ff-app-root .ff-progress-label{ display:flex; align-items:baseline; gap:10px; font-family:var(--acc-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--acc-label); } #ff-app-root .ff-progress-num{ color:var(--acc-ink); } /* ---------- Mise en page : une salle à la fois ---------- */ #ff-app-root .ff-wizard-layout{ max-width:720px; padding:clamp(40px,7vw,88px) 20px 48px; gap:40px; } #ff-app-root .ff-wizard-body{ min-height:48vh; } @media (min-width:1080px){ #ff-app-root .ff-wizard-layout{ max-width:1280px; padding:88px clamp(40px,5vw,80px) 56px; gap:clamp(64px,8vw,120px); } #ff-app-root .ff-wizard-body{ max-width:720px; } #ff-app-root .ff-sidebar-host{ flex:0 0 320px; top:112px; } } /* Cartel de salle (ajouté par wizard.js au-dessus de chaque question) */ #ff-app-root .ff-room{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; margin:0 0 28px; padding-bottom:14px; border-bottom:1px solid var(--acc-rule); font-family:var(--acc-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--acc-label); } #ff-app-root .ff-room-n{ font-family:var(--acc-sans); font-size:40px; line-height:.8; font-weight:300; letter-spacing:-.04em; color:var(--acc-ink); text-transform:none; } #ff-app-root .ff-room-of{ margin-left:-8px; } #ff-app-root .ff-room-label{ color:var(--acc-ink); } #ff-app-root .ff-room-sub{ margin-left:auto; } /* ---------- Titres éditoriaux ---------- */ #ff-app-root .ff-head{ margin-bottom:40px; } #ff-app-root .ff-eyebrow{ display:block; margin-bottom:14px; font-family:var(--acc-mono); font-size:11px; font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:var(--acc-label); } #ff-app-root .ff-title{ font-size:clamp(30px,3.6vw,44px); line-height:1.12; font-weight:300; letter-spacing:-.035em; margin-bottom:16px; text-wrap:balance; } #ff-app-root .ff-subtitle{ font-size:17px; line-height:1.55; color:var(--acc-label); max-width:560px; } #ff-app-root .ff-hint,#ff-app-root .ff-meta{ font-family:var(--acc-mono); font-size:11px; letter-spacing:.04em; color:var(--acc-label); } #ff-app-root .ff-intro{ font-size:17px; line-height:1.6; color:var(--acc-label); } #ff-app-root .ff-question{ margin:40px 0 16px; padding-top:18px; border-top:1px solid var(--acc-rule); font-size:17px; font-weight:500; letter-spacing:-.01em; } #ff-app-root .ff-note{ font-size:14px; line-height:1.55; color:var(--acc-label); } #ff-app-root .ff-help{ font-size:13px; color:var(--acc-label); } /* ---------- Champs ---------- */ #ff-app-root .ff-field{ margin-bottom:26px; } #ff-app-root .ff-label{ margin-bottom:10px; font-size:14px; font-weight:500; letter-spacing:0; } #ff-app-root .ff-required{ color:var(--acc-red); } #ff-app-root .ff-field input[type=text],#ff-app-root .ff-field input[type=email],#ff-app-root .ff-field input[type=tel], #ff-app-root .ff-field input[type=date],#ff-app-root .ff-field input[type=url],#ff-app-root .ff-field input[type=number], #ff-app-root .ff-field textarea,#ff-app-root .ff-field select,#ff-app-root .ff-taglist-input{ width:100%; min-height:56px; padding:15px 16px; border-radius:0; border:1px solid var(--acc-rule); background:var(--ff-paper); color:var(--acc-ink); font-family:var(--acc-sans); font-size:17px; line-height:1.4; box-shadow:none; transition:border-color .18s var(--acc-out), box-shadow .18s var(--acc-out), background-color .18s; } #ff-app-root .ff-field input:hover,#ff-app-root .ff-field textarea:hover,#ff-app-root .ff-field select:hover,#ff-app-root .ff-taglist-input:hover{ border-color:#B9B3A8; } #ff-app-root .ff-field input:focus,#ff-app-root .ff-field textarea:focus,#ff-app-root .ff-field select:focus,#ff-app-root .ff-taglist-input:focus{ outline:none; border-color:var(--acc-ink); box-shadow:inset 0 0 0 1px var(--acc-ink); background:#fff; } #ff-app-root .ff-field input::placeholder,#ff-app-root .ff-field textarea::placeholder,#ff-app-root .ff-taglist-input::placeholder{ color:#9A958C; } #ff-app-root .ff-field textarea{ min-height:120px; } #ff-app-root .ff-field select{ appearance:none; -webkit-appearance:none; padding-right:44px; background-image:linear-gradient(45deg,transparent 50%,var(--acc-ink) 50%),linear-gradient(135deg,var(--acc-ink) 50%,transparent 50%); background-position:calc(100% - 22px) 25px,calc(100% - 17px) 25px; background-size:5px 5px; background-repeat:no-repeat; } #ff-app-root .ff-field.has-error input,#ff-app-root .ff-field.has-error textarea,#ff-app-root .ff-field.has-error select{ border-color:var(--danger); box-shadow:inset 3px 0 0 var(--danger); } #ff-app-root .ff-error{ margin-top:8px; font-size:13px; font-weight:500; color:var(--danger); } #ff-app-root .ff-error:not([hidden])::before{ content:"— "; } #ff-app-root .ff-field-group.has-error{ margin-left:-18px; padding:14px 0 0 16px; border:0; border-left:2px solid var(--danger); border-radius:0; background:none; } #ff-app-root .ff-continue-nudge{ font-family:var(--acc-mono); font-size:11px; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--danger); } /* Cases à cocher (brief et consentements de l’offre) */ #ff-app-root .ff-checkbox{ gap:14px; min-height:44px; font-size:15px; line-height:1.45; } #ff-app-root .ff-checkbox input{ appearance:none; -webkit-appearance:none; flex:none; width:20px; height:20px; margin:0; border:1px solid var(--acc-ink); border-radius:0; background:var(--ff-paper); display:grid; place-content:center; cursor:pointer; transition:background-color .15s, border-color .15s; } #ff-app-root .ff-checkbox input::after{ content:""; width:10px; height:5px; border-left:1.5px solid var(--acc-on-ink); border-bottom:1.5px solid var(--acc-on-ink); transform:translateY(-1px) rotate(-45deg) scale(0); transition:transform .18s var(--acc-out); } #ff-app-root .ff-checkbox input:checked{ background:var(--acc-ink); } #ff-app-root .ff-checkbox input:checked::after{ transform:translateY(-1px) rotate(-45deg) scale(1); } /* ---------- Cartes de choix : cartels, pas de « cards » SaaS ---------- */ #ff-app-root .ff-choice-grid{ gap:10px; } #ff-app-root .ff-choice-card{ min-height:64px; padding:18px 46px 18px 18px; border-radius:0; border:1px solid var(--acc-rule); background:var(--ff-paper); box-shadow:none; transition:border-color .18s var(--acc-out), background-color .18s, transform .14s var(--acc-out), box-shadow .18s var(--acc-out); } #ff-app-root .ff-choice-grid.size-lg .ff-choice-card{ padding:22px 48px 22px 22px; } #ff-app-root .ff-choice-card:hover{ transform:none; border-color:var(--acc-ink); } #ff-app-root .ff-choice-card:active{ transform:scale(.985); } #ff-app-root .ff-choice-card.is-selected{ background:#fff; border-color:var(--acc-ink); box-shadow:inset 0 0 0 1px var(--acc-ink); } #ff-app-root .ff-choice-card.is-selected:active{ transform:scale(.985); } #ff-app-root .ff-choice-check{ top:22px; right:18px; width:12px; height:12px; border:1px solid #9A958C; background:transparent; } #ff-app-root .ff-choice-card.is-selected .ff-choice-check{ border-color:var(--acc-red); background:var(--acc-red); box-shadow:none; animation:ffBriefDot .28s var(--acc-out); } @keyframes ffBriefDot{ 0%{ transform:scale(.4); } 70%{ transform:scale(1.25); } 100%{ transform:none; } } #ff-app-root .ff-choice-label{ font-size:16px; font-weight:500; line-height:1.3; padding-right:0; } #ff-app-root .ff-choice-desc{ font-size:13.5px; color:var(--acc-label); margin-top:6px; } #ff-app-root .ff-choice-badge,#ff-app-root .ff-badge-devis{ margin-top:12px; padding:4px 8px; border:1px solid var(--acc-rule); border-radius:0; background:none; font-family:var(--acc-mono); font-size:10px; font-weight:400; letter-spacing:.06em; color:var(--acc-label); } #ff-app-root .ff-choice-card--devis{ background:transparent; border-style:dashed; } /* ---------- Moodboards : des tirages accrochés ---------- */ #ff-app-root .ff-mood-grid{ gap:18px; } #ff-app-root .ff-mood-tile{ border-radius:0; border:0; padding:8px 8px 34px; background:var(--ff-paper); box-shadow:0 14px 26px -18px rgba(26,26,26,.45), 0 1px 2px rgba(26,26,26,.06); transition:transform .3s var(--acc-out), box-shadow .3s var(--acc-out), outline-color .2s; outline:1px solid transparent; outline-offset:5px; } #ff-app-root .ff-mood-tile:hover{ transform:translateY(-3px); box-shadow:0 22px 32px -20px rgba(26,26,26,.5), 0 1px 2px rgba(26,26,26,.06); } #ff-app-root .ff-mood-tile:active{ transform:scale(.985); } #ff-app-root .ff-mood-tile.is-selected{ outline:2px solid var(--acc-red); outline-offset:5px; box-shadow:0 14px 26px -18px rgba(26,26,26,.45); } #ff-app-root .ff-mood-texture{ inset:8px 8px 34px; } #ff-app-root .ff-mood-label{ left:10px; right:10px; bottom:9px; top:auto; padding:0; background:none; color:var(--acc-ink); text-shadow:none; font-family:var(--acc-mono); font-size:10.5px; font-weight:400; letter-spacing:.06em; text-transform:uppercase; display:flex; align-items:center; justify-content:space-between; gap:6px; } #ff-app-root .ff-mood-tag{ border-radius:0; padding:2px 6px; background:var(--acc-red); color:#fff; font-size:9px; letter-spacing:.08em; } #ff-app-root .ff-mood-audacieux .ff-mood-texture{ background:linear-gradient(135deg,#C8412E,#1A1A1A); } #ff-app-root .ff-mood-colore .ff-mood-texture{ background:linear-gradient(135deg,#F0A64A,#C8412E 55%,#2F8F86); } #ff-app-root .ff-mood-sombre .ff-mood-texture{ background:linear-gradient(135deg,#1A1A1A,#3B3530); } /* ---------- Curseurs ---------- */ #ff-app-root .ff-slider-list{ gap:30px; } #ff-app-root .ff-slider-labels{ font-family:var(--acc-mono); font-size:11px; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--acc-label); } #ff-app-root .ff-slider-input{ margin:0; width:100%; height:28px; background:transparent; -webkit-appearance:none; appearance:none; } #ff-app-root .ff-slider-input::-webkit-slider-runnable-track{ height:1px; background:var(--acc-ink); } #ff-app-root .ff-slider-input::-moz-range-track{ height:1px; background:var(--acc-ink); } #ff-app-root .ff-slider-input::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; margin-top:-9.5px; border-radius:50%; background:var(--acc-ink); border:4px solid var(--acc-wall); box-shadow:0 0 0 1px var(--acc-ink); } #ff-app-root .ff-slider-input::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:var(--acc-ink); border:4px solid var(--acc-wall); box-shadow:0 0 0 1px var(--acc-ink); } #ff-app-root .ff-slider-input:active::-webkit-slider-thumb{ background:var(--acc-red); box-shadow:0 0 0 1px var(--acc-red); transform:none; } /* ---------- Puces ---------- */ #ff-app-root .ff-chip-group{ gap:8px; } #ff-app-root .ff-chip{ min-height:44px; padding:0 16px; border-radius:0; border:1px solid var(--acc-rule); background:var(--ff-paper); color:var(--acc-ink); font-size:15px; font-weight:400; box-shadow:none; transition:border-color .18s, background-color .18s, color .18s, transform .14s var(--acc-out); } #ff-app-root .ff-chip:hover:not(:disabled):not(.is-selected){ transform:none; background:#fff; border-color:var(--acc-ink); } #ff-app-root .ff-chip.is-selected{ background:var(--acc-ink); color:var(--acc-on-ink); border-color:var(--acc-ink); box-shadow:none; } #ff-app-root .ff-chip.is-selected:hover:not(:disabled){ background:#000; transform:none; } #ff-app-root .ff-chip:active:not(:disabled){ transform:scale(.97); } /* ---------- Galeries (step 7) ---------- */ #ff-app-root .ff-gallery-preview{ border-radius:0; } /* ---------- Collections, inspirations, prestations : des planches ---------- */ #ff-app-root .ff-collection-list{ gap:0; counter-reset:acc-collection; } #ff-app-root .ff-collection,#ff-app-root .ff-inspiration-card,#ff-app-root .ff-service-card,#ff-app-root .ff-trust-box{ border-radius:0; background:transparent; padding:26px 0 30px; border-top:1px solid var(--acc-ink); } #ff-app-root .ff-collection{ counter-increment:acc-collection; position:relative; } #ff-app-root .ff-collection::before{ content:"Planche " counter(acc-collection, decimal-leading-zero); display:block; margin-bottom:18px; font-family:var(--acc-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--acc-label); } #ff-app-root .ff-service-card{ padding:0; } #ff-app-root .ff-service-toggle{ min-height:64px; padding:18px 0; } #ff-app-root .ff-service-name{ font-size:17px; font-weight:500; } #ff-app-root .ff-service-body{ padding:0 0 24px; } #ff-app-root .ff-service-chevron{ border-width:0 1px 1px 0; border-color:var(--acc-ink); } #ff-app-root .ff-trust-box h3{ font-size:16px; font-weight:500; } /* ---------- Dépôt de photos : la table où l’on pose sa matière ---------- */ #ff-app-root .ff-dropzone{ --cm:var(--acc-ink); min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:40px 24px; border-radius:0; border:1px dashed #B9B3A8; background:var(--ff-paper); transition:background-color .25s var(--acc-out), border-color .25s var(--acc-out); background-image: linear-gradient(var(--cm),var(--cm)),linear-gradient(var(--cm),var(--cm)),linear-gradient(var(--cm),var(--cm)),linear-gradient(var(--cm),var(--cm)), linear-gradient(var(--cm),var(--cm)),linear-gradient(var(--cm),var(--cm)),linear-gradient(var(--cm),var(--cm)),linear-gradient(var(--cm),var(--cm)); background-size:14px 1px,1px 14px,14px 1px,1px 14px,14px 1px,1px 14px,14px 1px,1px 14px; background-position:10px 10px,10px 10px,calc(100% - 10px) 10px,calc(100% - 10px) 10px,10px calc(100% - 10px),10px calc(100% - 10px),calc(100% - 10px) calc(100% - 10px),calc(100% - 10px) calc(100% - 10px); background-repeat:no-repeat; background-color:var(--ff-paper); } #ff-app-root .ff-dropzone:hover,#ff-app-root .ff-dropzone.is-dragover{ --cm:var(--acc-red); border-color:var(--acc-ink); background-color:#fff; } #ff-app-root .ff-dropzone.is-dragover{ border-style:solid; } #ff-app-root .ff-dropzone-icon{ position:relative; width:52px; height:40px; margin:0 auto 18px; border-radius:0; background:none; } #ff-app-root .ff-dropzone-icon::before,#ff-app-root .ff-dropzone-icon::after{ content:""; position:absolute; width:40px; height:30px; border:1px solid var(--acc-ink); background:var(--ff-paper); transition:transform .35s var(--acc-out); } #ff-app-root .ff-dropzone-icon::before{ left:0; top:10px; transform:rotate(-6deg); } #ff-app-root .ff-dropzone-icon::after{ right:0; top:0; background:var(--acc-wall-alt); box-shadow:inset 0 -10px 0 #fff; } #ff-app-root .ff-dropzone:hover .ff-dropzone-icon::before{ transform:rotate(-10deg) translate(-3px,2px); } #ff-app-root .ff-dropzone:hover .ff-dropzone-icon::after{ transform:translate(2px,-3px); } #ff-app-root .ff-dropzone-label{ max-width:420px; font-size:19px; font-weight:300; line-height:1.35; letter-spacing:-.015em; margin:0; } #ff-app-root .ff-dropzone-hint{ margin-top:8px; font-family:var(--acc-mono); font-size:11px; letter-spacing:.04em; color:var(--acc-label); } #ff-app-root .ff-dropzone.is-limit-reached{ opacity:.6; } #ff-app-root .ff-dropzone.is-limit-reached:hover{ --cm:var(--acc-ink); background-color:var(--ff-paper); border-color:#B9B3A8; } #ff-app-root .ff-upload-status{ font-family:var(--acc-mono); font-size:11px; letter-spacing:.04em; color:var(--acc-label); } /* Tirages déposés : numérotés, avec leur marge de papier */ #ff-app-root .ff-photo-grid{ grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:18px 14px; margin:22px 0; counter-reset:acc-print; } #ff-app-root .ff-photo-tile{ counter-increment:acc-print; aspect-ratio:auto; overflow:visible; border-radius:0; background:transparent; animation:none; } #ff-app-root .ff-photo-tile > img{ display:block; aspect-ratio:1; width:100%; height:auto; padding:5px; background:#fff; box-shadow:0 10px 20px -14px rgba(26,26,26,.5), 0 1px 2px rgba(26,26,26,.06); transition:opacity .4s var(--acc-out); } #ff-app-root .ff-photo-tile::after{ content:counter(acc-print, decimal-leading-zero); display:block; margin-top:7px; font-family:var(--acc-mono); font-size:10px; letter-spacing:.06em; color:var(--acc-label); } #ff-app-root .ff-photo-tile.is-ready-new > img{ animation:ffBriefDevelop .7s var(--acc-out) both; } @keyframes ffBriefDevelop{ from{ opacity:.25; filter:grayscale(1) contrast(.7); } to{ opacity:1; filter:none; } } #ff-app-root .ff-photo-tile.is-uploading > img{ filter:grayscale(.6) brightness(.9); } #ff-app-root .ff-photo-spinner{ top:calc(50% - 10px); width:20px; height:20px; border-width:1.5px; border-color:rgba(255,255,255,.55); border-top-color:#fff; } #ff-app-root .ff-photo-tile.is-error{ border:0; } #ff-app-root .ff-photo-tile.is-error > img{ box-shadow:0 0 0 1px var(--danger); } #ff-app-root .ff-photo-error-badge{ left:10px; bottom:28px; border-radius:0; font-family:var(--acc-mono); font-weight:400; letter-spacing:.06em; background:var(--danger); } #ff-app-root .ff-photo-tile-actions{ inset:5px 5px auto 5px; aspect-ratio:1; gap:6px; background:rgba(26,26,26,.42); transition:opacity .2s var(--acc-out); } #ff-app-root .ff-photo-tile-actions button{ width:32px; height:32px; border-radius:0; background:var(--ff-paper); color:var(--acc-ink); font-size:13px; transition:background-color .15s, transform .14s var(--acc-out); } #ff-app-root .ff-photo-tile-actions button:hover{ background:#fff; } #ff-app-root .ff-photo-tile-actions button:active{ transform:scale(.94); } #ff-app-root .ff-photo-remove{ color:var(--danger) !important; } @media (hover:none){ /* Tactile : pas de survol, actions toujours accessibles sous le tirage */ #ff-app-root .ff-photo-tile-actions{ position:static; opacity:1; aspect-ratio:auto; margin-top:6px; background:none; justify-content:flex-start; gap:4px; } #ff-app-root .ff-photo-tile-actions button{ width:36px; height:36px; border:1px solid var(--acc-rule); } } /* Favorites : la sélection de l’accrochage */ #ff-app-root .ff-fav-counter{ display:inline-flex; align-items:center; gap:10px; margin-bottom:22px; font-family:var(--acc-mono); font-size:11px; font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:var(--acc-label); } #ff-app-root .ff-fav-counter.is-ready{ color:var(--acc-ink); } #ff-app-root .ff-fav-counter.is-ready::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--acc-red); } #ff-app-root .ff-photo-grid--fav{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:22px 16px; } #ff-app-root .ff-fav-tile{ aspect-ratio:1; overflow:visible; border:0; border-radius:0; padding:6px; background:#fff; box-shadow:0 12px 22px -16px rgba(26,26,26,.5), 0 1px 2px rgba(26,26,26,.06); outline:2px solid transparent; outline-offset:5px; transition:outline-color .2s var(--acc-out), transform .25s var(--acc-out), opacity .2s; } #ff-app-root .ff-fav-tile img{ display:block; width:100%; height:100%; } #ff-app-root .ff-fav-tile:hover{ transform:translateY(-2px); } #ff-app-root .ff-fav-tile:active{ transform:scale(.985); } #ff-app-root .ff-fav-tile.is-selected{ border:0; outline-color:var(--acc-red); } #ff-app-root .ff-fav-check{ top:12px; right:12px; width:22px; height:22px; border-radius:0; border:1px solid rgba(255,255,255,.9); background:rgba(26,26,26,.28); } #ff-app-root .ff-fav-tile.is-selected .ff-fav-check{ background:var(--acc-red); border-color:var(--acc-red); animation:ffBriefDot .28s var(--acc-out); } #ff-app-root .ff-fav-tile.is-selected .ff-fav-check::after{ font-size:12px; } #ff-app-root .ff-brand-preview-img{ border-radius:0; border-color:var(--acc-rule); } #ff-app-root .ff-color-field{ font-size:14px; font-weight:500; } #ff-app-root .ff-color-field input[type=color]{ width:64px; height:44px; border-radius:0; border:1px solid var(--acc-rule); background:var(--ff-paper); } /* ---------- Boutons : ceux de la landing ---------- */ #ff-app-root .ff-btn-primary{ gap:12px; height:56px; padding:0 30px; border-radius:0; background:var(--acc-ink); color:var(--acc-on-ink); font-family:var(--acc-sans); font-size:17px; font-weight:500; box-shadow:none; transition:background-color .22s var(--acc-out), transform .14s var(--acc-out); } #ff-app-root .ff-btn-primary::before{ content:""; flex:none; width:9px; height:9px; border-radius:50%; background:var(--acc-red); transition:transform .22s var(--acc-out), box-shadow .22s; } #ff-app-root .ff-btn-primary:hover{ transform:none; background:#000; box-shadow:none; } #ff-app-root .ff-btn-primary:hover::before,#ff-app-root .ff-btn-primary:focus-visible::before{ transform:scale(1.35); box-shadow:0 0 0 3px rgba(215,38,30,.2); } #ff-app-root .ff-btn-primary:active{ transform:scale(.985); } #ff-app-root .ff-btn-primary:disabled{ opacity:.55; transform:none; } #ff-app-root .ff-btn-primary.is-loading::before{ animation:ffBriefPulse .9s ease-in-out infinite alternate; } @keyframes ffBriefPulse{ to{ transform:scale(.5); opacity:.5; } } #ff-app-root .ff-btn-ghost{ height:56px; padding:0 22px; border-radius:0; border:1px solid var(--acc-rule); background:transparent; color:var(--acc-ink); font-family:var(--acc-sans); font-size:16px; font-weight:500; transition:border-color .2s var(--acc-out), transform .14s var(--acc-out); } #ff-app-root .ff-btn-ghost:hover{ transform:none; background:transparent; border-color:var(--acc-ink); } #ff-app-root .ff-btn-ghost:active{ transform:scale(.985); } /* Navigation du formulaire : « Continuer » évident, « Retour » discret */ #ff-app-root .ff-wizard-footer .ff-btn-ghost{ border-color:transparent; padding:0 6px; color:var(--acc-label); } #ff-app-root .ff-wizard-footer .ff-btn-ghost::before{ content:"←"; margin-right:10px; transition:transform .2s var(--acc-out); } #ff-app-root .ff-wizard-footer .ff-btn-ghost:hover{ border-color:transparent; color:var(--acc-ink); } #ff-app-root .ff-wizard-footer .ff-btn-ghost:hover::before{ transform:translateX(-3px); } /* ---------- Pied de formulaire ---------- */ #ff-app-root .ff-wizard-footer{ padding:14px clamp(20px,5vw,80px) calc(16px + env(safe-area-inset-bottom)); background:rgba(244,242,238,.96); backdrop-filter:blur(8px); border-top:1px solid var(--acc-rule); } #ff-app-root .ff-wizard-footer-inner{ max-width:720px; } #ff-app-root .ff-wizard-privacy-note{ max-width:720px; margin-top:10px; font-family:var(--acc-mono); font-size:10px; letter-spacing:.04em; color:var(--acc-label); } #ff-app-root .ff-wizard-privacy-note a{ color:var(--acc-label); text-underline-offset:3px; } @media (min-width:1080px){ #ff-app-root .ff-wizard-footer{ padding-left:0; padding-right:0; } #ff-app-root .ff-wizard-footer-inner,#ff-app-root .ff-continue-nudge,#ff-app-root .ff-wizard-privacy-note{ max-width:none; width:min(720px, calc(min(1280px, 100%) - 2 * clamp(40px,5vw,80px) - 320px - clamp(64px,8vw,120px))); padding:0; margin-right:auto; margin-left:max(clamp(40px,5vw,80px), calc((100% - 1280px) / 2 + clamp(40px,5vw,80px))); } } /* ---------- Repères de parcours ---------- */ #ff-app-root .ff-micro-validation{ display:inline-flex; gap:10px; margin-bottom:28px; padding:0; border-radius:0; background:none; border:0; font-family:var(--acc-mono); font-size:11px; font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:var(--acc-ink); } #ff-app-root .ff-micro-validation-check{ width:auto; height:auto; background:none; color:var(--acc-red); font-size:12px; } #ff-app-root .ff-project-moment{ gap:18px; margin-bottom:32px; padding:0 0 18px; border-radius:0; background:none; border:0; border-bottom:1px solid var(--acc-rule); box-shadow:none; } #ff-app-root .ff-project-moment.has-photo{ padding:0 0 18px; } #ff-app-root .ff-project-moment-photo{ width:72px; height:90px; border-radius:0; padding:4px; background:#fff; box-shadow:0 10px 18px -12px rgba(26,26,26,.5); } #ff-app-root .ff-project-moment-name{ font-size:20px; font-weight:400; letter-spacing:-.015em; } #ff-app-root .ff-project-moment-subtitle{ font-family:var(--acc-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--acc-label); } #ff-app-root .ff-project-moment-tagline{ font-size:15px; font-style:normal; color:var(--acc-ink); } /* ---------- Récapitulatif et offre : même accrochage ---------- */ #ff-app-root .ff-brief,#ff-app-root .ff-offer-price-card,#ff-app-root .ff-offer-alt,#ff-app-root .ff-offer-confirmed,#ff-app-root .ff-checkout-status{ border-radius:0; box-shadow:none; } #ff-app-root .ff-brief{ background:var(--ff-paper); border:1px solid var(--acc-rule); } #ff-app-root .ff-brief-section-head h2{ font-size:20px; font-weight:400; letter-spacing:-.015em; } #ff-app-root .ff-brief-edit{ color:var(--acc-ink); font-weight:500; text-underline-offset:3px; } #ff-app-root .ff-kv-label,#ff-app-root .ff-brief-eyebrow,#ff-app-root .ff-brief-reveal-badge{ font-family:var(--acc-mono); font-weight:400; letter-spacing:.08em; } #ff-app-root .ff-brief-reveal-badge{ border-radius:0; background:none; border:1px solid var(--acc-rule); color:var(--acc-ink); } #ff-app-root .ff-brief-sticky-lead{ font-size:19px; font-weight:300; } #ff-app-root .ff-brief-photo-grid img{ border-radius:0; padding:3px; background:#fff; } #ff-app-root .ff-brief-bar{ height:1px; border-radius:0; overflow:visible; } #ff-app-root .ff-brief-bar-fill{ height:2px; margin-top:-.5px; background:var(--acc-ink); } #ff-app-root .ff-offer-wrap{ max-width:680px; } #ff-app-root .ff-offer-lead{ font-size:18px; font-weight:300; color:var(--acc-label); } #ff-app-root .ff-offer-price-card{ text-align:left; background:var(--ff-paper); border:1px solid var(--acc-rule); border-top:1px solid var(--acc-ink); } #ff-app-root .ff-offer-price-today{ justify-content:flex-start; } #ff-app-root .ff-offer-price-today-num{ font-size:clamp(72px,12vw,112px); font-weight:300; letter-spacing:-.05em; } #ff-app-root .ff-offer-price-badges{ justify-content:flex-start; } #ff-app-root .ff-offer-badge{ border-radius:0; background:transparent; border:1px solid var(--acc-rule); font-family:var(--acc-mono); font-size:10.5px; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--acc-ink); } #ff-app-root .ff-offer-badge--accent{ border-color:var(--acc-ink); color:var(--acc-ink); background:transparent; } #ff-app-root .ff-offer-consent,#ff-app-root .ff-offer-consent-early{ border-radius:0; background:transparent; border:0; border-top:1px solid var(--acc-rule); padding:18px 0; } #ff-app-root .ff-offer-consent .ff-checkbox a{ color:var(--acc-ink); } #ff-app-root .ff-offer-cta-zone .ff-btn-primary{ max-width:420px; } #ff-app-root .ff-offer-included-list li::before{ content:""; top:.55em; width:10px; height:5px; border-left:1.5px solid var(--acc-ink); border-bottom:1.5px solid var(--acc-ink); transform:rotate(-45deg); } #ff-app-root .ff-offer-alt{ background:transparent; border-top:1px solid var(--acc-ink); padding:24px 0; } #ff-app-root .ff-offer-dorian-photo{ border-radius:0; } #ff-app-root .ff-offer-confirmed{ background:transparent; border:1px solid var(--acc-ink); } #ff-app-root .ff-timeline-icon{ border-radius:0; background:transparent; border:1px solid var(--acc-rule); } #ff-app-root .ff-timeline-step.is-current .ff-timeline-icon{ background:var(--acc-ink); color:var(--acc-on-ink); border-color:var(--acc-ink); } #ff-app-root .ff-timeline-n,#ff-app-root .ff-timeline-status{ font-family:var(--acc-mono); font-weight:400; letter-spacing:.08em; } #ff-app-root .ff-timeline-title{ font-weight:500; } #ff-app-root .ff-checkout-status{ background:var(--ff-paper); border:1px solid var(--acc-rule); } /* ---------- Mouvement : changement de salle, très sobre ---------- */ #ff-app-root .ff-screen-anim{ animation:ffBriefIn .42s var(--acc-out) both; } #ff-app-root .ff-wizard-body.is-back .ff-screen-anim{ animation-name:ffBriefInBack; } @keyframes ffBriefIn{ from{ opacity:0; transform:translateX(18px); } to{ opacity:1; transform:none; } } @keyframes ffBriefInBack{ from{ opacity:0; transform:translateX(-18px); } to{ opacity:1; transform:none; } } #ff-app-root .ff-wizard-body.is-leaving .ff-screen{ opacity:0; transform:translateX(-10px); transition:opacity .15s ease-in, transform .15s ease-in; } #ff-app-root .ff-wizard-body.is-leaving.is-back .ff-screen{ transform:translateX(10px); } #ff-app-root .ff-screen-anim .ff-room{ animation:ffBriefRoom .5s var(--acc-out) both; } @keyframes ffBriefRoom{ from{ opacity:0; } to{ opacity:1; } } #ff-app-root .ff-shake{ animation:ffBriefShake .36s var(--acc-out); } @keyframes ffBriefShake{ 0%,100%{ transform:none; } 30%{ transform:translateX(-5px); } 65%{ transform:translateX(4px); } } @media (prefers-reduced-motion: reduce){ #ff-app-root .ff-screen-anim,#ff-app-root .ff-room,#ff-app-root .ff-shake,#ff-app-root .ff-photo-tile.is-ready-new > img{ animation:none !important; } #ff-app-root .ff-wizard-body.is-leaving .ff-screen{ transition:none; } } /* ---------- Tablette ---------- */ @media (max-width:1079px){ #ff-app-root .ff-wizard-header{ grid-template-columns:auto minmax(0,1fr) auto auto; gap:20px; } #ff-app-root .ff-sidebar-host{ order:2; } } /* ---------- Mobile : priorité au remplissage ---------- */ @media (max-width:760px){ #ff-app-root .ff-wizard-header{ grid-template-columns:auto minmax(0,1fr) auto; gap:14px; height:64px; padding:0 16px; } #ff-app-root .ff-wizard-brand-sep,#ff-app-root .ff-wizard-brand-tag{ display:none; } #ff-app-root .ff-wizard-brand img{ height:17px; } #ff-app-root .ff-progress-label{ font-size:10px; gap:6px; } #ff-app-root .ff-progress-track{ gap:4px; } #ff-app-root .ff-wizard-layout{ padding:32px 20px 32px; gap:32px; } #ff-app-root .ff-room{ margin-bottom:22px; } #ff-app-root .ff-room-n{ font-size:32px; } #ff-app-root .ff-room-sub{ margin-left:0; width:100%; } #ff-app-root .ff-head{ margin-bottom:28px; } #ff-app-root .ff-title{ font-size:28px; line-height:1.15; } #ff-app-root .ff-subtitle{ font-size:16px; } #ff-app-root .ff-choice-grid.cols-2,#ff-app-root .ff-choice-grid.cols-3,#ff-app-root .ff-choice-grid.cols-auto{ grid-template-columns:1fr; } #ff-app-root .ff-choice-card{ min-height:58px; padding:16px 44px 16px 16px; } #ff-app-root .ff-choice-check{ top:22px; } #ff-app-root .ff-mood-grid,#ff-app-root .ff-mood-grid.size-sm{ grid-template-columns:1fr 1fr; gap:16px 12px; } #ff-app-root .ff-photo-grid{ grid-template-columns:repeat(3,1fr); gap:14px 10px; } #ff-app-root .ff-photo-grid--fav{ grid-template-columns:1fr 1fr; gap:18px 14px; } #ff-app-root .ff-dropzone{ min-height:190px; padding:32px 18px; } #ff-app-root .ff-dropzone-label{ font-size:17px; } #ff-app-root .ff-wizard-footer{ padding:12px 16px calc(12px + env(safe-area-inset-bottom)); } #ff-app-root .ff-wizard-footer-inner{ gap:8px; } #ff-app-root .ff-wizard-footer-inner .ff-btn-primary{ flex:1; height:54px; padding:0 18px; font-size:16px; } #ff-app-root .ff-wizard-footer .ff-btn-ghost{ height:54px; padding:0 8px; font-size:15px; } #ff-app-root .ff-wizard-privacy-note{ font-size:9.5px; } #ff-app-root .ff-collection-head{ flex-direction:column; align-items:stretch; } } /* Collections : champ « nom » et suppression alignés sur la même ligne */ #ff-app-root .ff-collection-head{ align-items:flex-end; } #ff-app-root .ff-collection-head .ff-field{ margin-bottom:0; } #ff-app-root .ff-collection-head .ff-btn-ghost{ height:56px; margin-bottom:0; padding:0 18px; font-size:14px; color:var(--acc-label); } #ff-app-root .ff-collection-head .ff-btn-ghost:hover{ color:var(--danger); border-color:var(--danger); } #ff-app-root .ff-collection .ff-field textarea{ min-height:88px; } /* Galerie « Choisissez pour moi » : pas de violet, un tirage vierge marqué d’un point */ #ff-app-root .ff-gallery-preview{ border:1px solid var(--acc-rule); background:var(--ff-paper); box-shadow:none; transition:border-color .18s var(--acc-out), transform .14s var(--acc-out); } #ff-app-root .ff-gallery-preview:hover{ transform:none; border-color:var(--acc-ink); } #ff-app-root .ff-gallery-preview:active{ transform:scale(.985); } #ff-app-root .ff-gallery-preview.is-selected{ border-color:var(--acc-ink); box-shadow:inset 0 0 0 1px var(--acc-ink); } #ff-app-root .ff-gallery-preview-swatch{ margin:8px 8px 0; } #ff-app-root .ff-gallery-preview--auto .ff-gallery-preview-swatch{ background:radial-gradient(circle at 50% 50%, var(--acc-red) 0 5px, transparent 6px), repeating-linear-gradient(45deg, #ECE7DA 0 8px, #E3DDCF 8px 9px); } #ff-app-root .ff-gallery-preview-label{ font-weight:500; font-size:15px; } #ff-app-root .ff-gallery-preview-desc{ font-size:12.5px; } /* Récapitulatif : couverture en noir d’encre (la couleur de marque du photographe, si fournie, reste prioritaire) */ #ff-app-root .ff-brief{ --ff-brief-accent:#E8C9B0; } #ff-app-root .ff-brief-cover{ background:var(--acc-ink); } #ff-app-root .ff-brief-cover-text h1{ font-family:var(--acc-sans); font-weight:300; letter-spacing:-.03em; } @media (max-width:760px){ #ff-app-root .ff-collection-head{ align-items:stretch; } #ff-app-root .ff-collection-head .ff-btn-ghost{ align-self:flex-start; height:48px; } /* Choix courts (spécialités, réseaux…) : deux colonnes ; choix avec description : une */ #ff-app-root .ff-choice-grid.cols-3,#ff-app-root .ff-choice-grid.cols-auto{ grid-template-columns:1fr 1fr; } #ff-app-root .ff-choice-grid.cols-3 .ff-choice-card,#ff-app-root .ff-choice-grid.cols-auto .ff-choice-card{ padding:14px 34px 14px 14px; } #ff-app-root .ff-choice-grid.cols-3 .ff-choice-label,#ff-app-root .ff-choice-grid.cols-auto .ff-choice-label{ font-size:15px; } #ff-app-root .ff-choice-grid.cols-3 .ff-choice-check,#ff-app-root .ff-choice-grid.cols-auto .ff-choice-check{ right:12px; top:20px; } } /* ========================================================= PROGRESSION — sommaire des étapes (remplace l’aperçu « Votre univers ») Desktop : colonne à gauche, sommaire + contact visio. Tablette / mobile : pas de colonne, l’en-tête « 03 / 08 » suffit. ========================================================= */ #ff-app-root .ff-steps-nav{ padding-top:4px; } #ff-app-root .ff-steps-title{ margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid var(--acc-ink); font-family:var(--acc-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--acc-label); } #ff-app-root .ff-steps{ margin:0; padding:0; list-style:none; } #ff-app-root .ff-steps-item{ border-bottom:1px solid var(--acc-rule); } #ff-app-root .ff-steps-link{ width:100%; min-height:44px; display:grid; grid-template-columns:16px 26px 1fr; align-items:center; column-gap:6px; padding:0; text-align:left; font-family:var(--acc-sans); font-size:14px; line-height:1.3; color:#9A958C; background:none; border:0; transition:color .2s var(--acc-out); } #ff-app-root button.ff-steps-link{ cursor:pointer; } #ff-app-root button.ff-steps-link:hover .ff-steps-label{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; } #ff-app-root .ff-steps-n{ font-family:var(--acc-mono); font-size:10.5px; letter-spacing:.06em; } #ff-app-root .ff-steps-mark{ position:relative; width:10px; height:10px; } #ff-app-root .is-done .ff-steps-link{ color:var(--acc-ink); } #ff-app-root .is-done .ff-steps-n{ color:var(--acc-label); } #ff-app-root .has-check .ff-steps-mark::before{ content:""; position:absolute; left:1px; top:1px; width:8px; height:4px; border-left:1.5px solid var(--acc-ink); border-bottom:1.5px solid var(--acc-ink); transform:rotate(-45deg); } #ff-app-root .is-fresh .ff-steps-mark::before{ animation:ffStepCheck .35s var(--acc-out) both; } @keyframes ffStepCheck{ from{ transform:rotate(-45deg) scale(0); } to{ transform:rotate(-45deg) scale(1); } } #ff-app-root .is-current .ff-steps-link{ color:var(--acc-ink); font-weight:500; } #ff-app-root .is-current .ff-steps-n{ color:var(--acc-ink); } #ff-app-root .is-current .ff-steps-mark::before{ content:""; position:absolute; left:2px; top:2px; width:6px; height:6px; border:0; border-radius:50%; background:var(--acc-red); transform:none; animation:ffBriefDot .3s var(--acc-out); } #ff-app-root .ff-visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* Contact visio : présence humaine discrète */ #ff-app-root .ff-visio{ display:flex; align-items:center; gap:14px; margin-top:32px; } #ff-app-root .ff-visio-photo{ flex:none; width:48px; height:48px; border-radius:50%; object-fit:cover; background:#0b0b0b; } #ff-app-root .ff-visio-text{ display:flex; flex-direction:column; gap:3px; margin:0; font-size:13.5px; line-height:1.35; color:var(--acc-label); } #ff-app-root .ff-visio-link{ align-self:flex-start; font-size:14px; font-weight:500; color:var(--acc-ink); text-decoration:underline; text-decoration-color:var(--acc-rule); text-underline-offset:4px; transition:text-decoration-color .2s var(--acc-out); } #ff-app-root .ff-visio-link:hover{ text-decoration-color:var(--acc-ink); } #ff-app-root .ff-visio-link span{ display:inline-block; transition:transform .2s var(--acc-out); } #ff-app-root .ff-visio-link:hover span{ transform:translateX(3px); } #ff-app-root .ff-visio--compact{ margin-top:48px; padding-top:18px; border-top:1px solid var(--acc-rule); } #ff-app-root .ff-visio--compact .ff-visio-photo{ width:40px; height:40px; } @media (min-width:1080px){ #ff-app-root .ff-wizard-header{ grid-template-columns:auto 1fr auto auto; } #ff-app-root .ff-progress-host{ visibility:hidden; } #ff-app-root .ff-wizard-layout{ max-width:1136px; padding:72px 40px 56px; gap:96px; align-items:flex-start; } #ff-app-root .ff-wizard-body{ flex:1 1 auto; max-width:720px; } #ff-app-root .ff-sidebar-host{ order:-1; flex:0 0 240px; position:sticky; top:112px; } #ff-app-root .ff-visio--compact{ display:none; } #ff-app-root .ff-wizard-footer-inner,#ff-app-root .ff-continue-nudge,#ff-app-root .ff-wizard-privacy-note{ max-width:none; padding:0; margin-right:0; margin-left:calc(max(40px, (100% - 1056px) / 2) + 336px); width:min(720px, calc(100% - 2 * max(40px, (100% - 1056px) / 2) - 336px)); } } @media (max-width:1079px){ #ff-app-root .ff-sidebar-host{ display:none; } } /* ========================================================= ÉTAPE FINALE — l’écran de conversion Desktop : réassurance à gauche, prix / consentements / CTA à droite, l’essentiel dans un écran à 1440 × 900. ========================================================= */ #ff-app-root .ff-offer-wrap.ff-final{ max-width:none; margin:0; padding:0 0 48px; } #ff-app-root .ff-final-bar{ display:flex; align-items:center; height:64px; padding:0 clamp(20px,5vw,80px); border-bottom:1px solid var(--acc-rule); } #ff-app-root .ff-final-grid{ max-width:1200px; margin:0 auto; padding:40px 40px 0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,460px); column-gap:clamp(48px,6vw,96px); align-items:start; } #ff-app-root .ff-final .ff-room{ margin-bottom:18px; } #ff-app-root .ff-final-done{ display:flex; align-items:center; gap:10px; margin:0 0 14px; font-family:var(--acc-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--acc-ink); } #ff-app-root .ff-final-done-mark{ position:relative; width:18px; height:18px; border-radius:50%; background:var(--acc-ink); } #ff-app-root .ff-final-done-mark::after{ content:""; position:absolute; left:5px; top:5.5px; width:8px; height:4px; border-left:1.5px solid var(--acc-on-ink); border-bottom:1.5px solid var(--acc-on-ink); transform:rotate(-45deg); } #ff-app-root .ff-final .ff-title{ font-size:clamp(32px,3.3vw,44px); margin-bottom:0; max-width:560px; } #ff-app-root .ff-final-label{ margin:0 0 4px; font-family:var(--acc-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--acc-label); } #ff-app-root .ff-final-next{ margin-top:36px; } #ff-app-root .ff-final-next ol{ margin:0; padding:0; list-style:none; } #ff-app-root .ff-final-next li{ display:grid; grid-template-columns:34px 130px 1fr; column-gap:8px; align-items:baseline; padding:13px 0; border-bottom:1px solid var(--acc-rule); } #ff-app-root .ff-final-next li:first-child{ border-top:1px solid var(--acc-ink); } #ff-app-root .ff-final-next-n{ font-family:var(--acc-mono); font-size:11px; color:var(--acc-label); } #ff-app-root .ff-final-next-title{ font-size:15px; font-weight:500; } #ff-app-root .ff-final-next-text{ font-size:14px; line-height:1.45; color:var(--acc-label); } #ff-app-root .ff-final-contact{ display:flex; align-items:center; gap:16px; margin-top:28px; } #ff-app-root .ff-final-contact-photo{ flex:none; width:64px; height:64px; border-radius:50%; object-fit:cover; background:#0b0b0b; } #ff-app-root .ff-final-contact-q{ margin:0; font-family:var(--acc-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--acc-ink); } #ff-app-root .ff-final-contact-text{ margin:3px 0 4px; font-size:14px; color:var(--acc-label); } #ff-app-root .ff-final-contact-link{ display:inline-flex; align-items:center; min-height:32px; font-size:15px; font-weight:500; color:var(--acc-ink); text-decoration:underline; text-decoration-color:var(--acc-rule); text-underline-offset:4px; transition:text-decoration-color .2s var(--acc-out); } #ff-app-root .ff-final-contact-link:hover{ text-decoration-color:var(--acc-ink); } #ff-app-root .ff-final-contact-link span{ display:inline-block; margin-left:6px; transition:transform .2s var(--acc-out); } #ff-app-root .ff-final-contact-link:hover span{ transform:translateX(3px); } #ff-app-root .ff-final-more{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:24px; } #ff-app-root .ff-final-more .ff-offer-details{ margin:0; padding:0; border:0; flex:1 1 auto; } #ff-app-root .ff-final-more .ff-offer-details > summary{ font-family:var(--acc-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--acc-label); cursor:pointer; min-height:44px; display:flex; align-items:center; gap:8px; } #ff-app-root .ff-final-more .ff-offer-details[open]{ flex-basis:100%; order:2; } #ff-app-root .ff-final-more .ff-btn-ghost{ height:44px; padding:0; border:0; font-size:14px; color:var(--acc-label); } #ff-app-root .ff-final-more .ff-btn-ghost:hover{ color:var(--acc-ink); } /* Colonne prix : le cœur de la réassurance */ #ff-app-root .ff-final-aside{ position:sticky; top:24px; padding:26px 28px 22px; background:var(--ff-paper); border:1px solid var(--acc-rule); border-top:2px solid var(--acc-ink); } #ff-app-root .ff-final-aside .ff-offer-price-card{ margin:0; padding:0; border:0; background:none; text-align:left; } #ff-app-root .ff-final-price{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding-bottom:16px; border-bottom:1px solid var(--acc-rule); } #ff-app-root .ff-final .ff-offer-price-today{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin:0; } #ff-app-root .ff-final .ff-offer-price-today-num{ font-size:88px; line-height:.85; font-weight:300; letter-spacing:-.05em; } #ff-app-root .ff-final .ff-offer-price-today-label{ font-family:var(--acc-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--acc-ink); } #ff-app-root .ff-final-terms{ text-align:right; } #ff-app-root .ff-final-terms p{ margin:0; } #ff-app-root .ff-final-then{ font-size:15px; color:var(--acc-label); } #ff-app-root .ff-final-then strong{ font-size:20px; font-weight:500; color:var(--acc-ink); letter-spacing:-.01em; } #ff-app-root .ff-final .ff-offer-price-detail{ margin-top:4px; font-size:13px; color:var(--acc-label); } #ff-app-root .ff-final-free{ display:inline-block; margin-top:8px !important; padding:3px 8px; border:1px solid var(--acc-ink); font-family:var(--acc-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; } #ff-app-root .ff-final-args{ margin:14px 0 4px; padding:0; list-style:none; } #ff-app-root .ff-final-args li{ position:relative; padding:5px 0 5px 22px; font-size:14px; line-height:1.4; } #ff-app-root .ff-final-args li::before{ content:""; position:absolute; left:2px; top:.85em; width:9px; height:4.5px; border-left:1.5px solid var(--acc-ink); border-bottom:1.5px solid var(--acc-ink); transform:rotate(-45deg); } /* Consentements : compacts, lisibles, hiérarchisés */ #ff-app-root .ff-final .ff-offer-consent{ margin:14px 0 0; padding:14px 0 0; border-top:1px solid var(--acc-rule); } #ff-app-root .ff-final .ff-offer-consent .ff-checkbox{ align-items:flex-start; gap:12px; min-height:0; margin:0; font-size:13.5px; line-height:1.45; } #ff-app-root .ff-final .ff-offer-consent .ff-checkbox input{ margin-top:1px; width:18px; height:18px; } #ff-app-root .ff-final .ff-offer-consent .ff-checkbox span{ font-size:13.5px; } #ff-app-root .ff-final .ff-offer-consent-early{ margin-top:12px; padding:0; border:0; } #ff-app-root .ff-final .ff-offer-consent-early-title{ margin:0 0 6px; font-size:13px; font-weight:500; } #ff-app-root .ff-final .ff-offer-consent-subtext{ margin:6px 0 0 30px; font-size:12px; line-height:1.45; color:var(--acc-label); } #ff-app-root .ff-final .ff-error{ margin-top:12px; } #ff-app-root .ff-final .ff-offer-cta-zone{ margin:16px 0 0; text-align:left; } #ff-app-root .ff-final .ff-offer-cta-zone .ff-btn-primary{ width:100%; max-width:none; height:58px; font-size:17px; } #ff-app-root .ff-final .ff-offer-cta-zone .ff-btn-primary:not(:disabled){ animation:ffFinalReady .4s var(--acc-out); } @keyframes ffFinalReady{ from{ transform:scale(.99); } to{ transform:none; } } #ff-app-root .ff-final .ff-offer-dev-note{ margin-top:8px; text-align:center; font-family:var(--acc-mono); font-size:10px; letter-spacing:.04em; color:var(--acc-label); } #ff-app-root .ff-final .ff-offer-confirmed{ padding:18px; } /* Tablette : deux colonnes resserrées */ @media (max-width:1079px){ #ff-app-root .ff-final-grid{ grid-template-columns:minmax(0,1fr) minmax(0,380px); column-gap:40px; padding:32px 32px 0; } #ff-app-root .ff-final .ff-offer-price-today-num{ font-size:72px; } #ff-app-root .ff-final-next li{ grid-template-columns:30px 1fr; } #ff-app-root .ff-final-next-text{ grid-column:2; } #ff-app-root .ff-final-aside{ padding:22px 22px 20px; } } /* Mobile : brief terminé → prix → arguments → consentements → CTA → la suite → contact */ @media (max-width:760px){ #ff-app-root .ff-final-bar{ height:56px; padding:0 20px; } #ff-app-root .ff-final-grid{ display:flex; flex-direction:column; padding:24px 20px 0; } #ff-app-root .ff-final-main{ display:contents; } #ff-app-root .ff-final-head{ order:1; margin-bottom:24px; } #ff-app-root .ff-final-aside{ order:2; position:static; margin:0 -8px; padding:20px 18px 18px; } #ff-app-root .ff-final-next{ order:3; margin-top:36px; } #ff-app-root .ff-final-contact{ order:4; margin-top:28px; padding:18px 0; border-top:1px solid var(--acc-rule); border-bottom:1px solid var(--acc-rule); } #ff-app-root .ff-final-more{ order:5; margin-top:12px; } #ff-app-root .ff-final .ff-room-n{ font-size:32px; } #ff-app-root .ff-final .ff-title{ font-size:28px; } #ff-app-root .ff-final .ff-offer-price-today-num{ font-size:72px; } #ff-app-root .ff-final-price{ gap:12px; } #ff-app-root .ff-final-then strong{ font-size:18px; } #ff-app-root .ff-final .ff-offer-cta-zone .ff-btn-primary{ height:56px; font-size:16px; padding:0 16px; } } @media (prefers-reduced-motion: reduce){ #ff-app-root .is-fresh .ff-steps-mark::before,#ff-app-root .is-current .ff-steps-mark::before,#ff-app-root .ff-final .ff-offer-cta-zone .ff-btn-primary{ animation:none !important; } } #ff-app-root .ff-final .ff-offer-price-today-num{ white-space:nowrap; } #ff-app-root .ff-final .ff-offer-cta-zone .ff-btn-primary{ white-space:nowrap; padding:0 16px; } @media (max-width:1079px){ #ff-app-root .ff-final-price{ flex-direction:column; align-items:flex-start; gap:12px; } #ff-app-root .ff-final-terms{ text-align:left; } #ff-app-root .ff-final .ff-offer-cta-zone .ff-btn-primary{ font-size:16px; } } /* --------------------------------------------------------- Confirmation d'inscription (js/checkoutSuccess.js) — même langage que L'Accrochage : cartel mono, filets, point rouge. --------------------------------------------------------- */ #ff-app-root .ff-done{ max-width:1080px; margin:0 auto; padding:clamp(48px,9vw,120px) clamp(16px,5vw,80px) 96px; box-sizing:border-box; overflow-wrap:anywhere; } #ff-app-root .ff-done-label{ display:flex; align-items:center; gap:10px; margin:0 0 20px; font-family:var(--acc-mono); font-size:11px; font-weight:400; line-height:1.4; letter-spacing:.08em; text-transform:uppercase; color:var(--acc-label); } #ff-app-root .ff-done-dot{ flex:none; width:9px; height:9px; border-radius:50%; background:var(--acc-red); } #ff-app-root .ff-done-spinner{ flex:none; width:9px; height:9px; border-radius:50%; background:var(--acc-label); animation:ffBriefPulse .9s ease-in-out infinite alternate; } #ff-app-root .ff-done-title{ margin:0; font-weight:300; font-size:clamp(38px,6.2vw,76px); line-height:1.02; letter-spacing:-.025em; color:var(--acc-ink); } #ff-app-root .ff-done-title:focus{ outline:none; } #ff-app-root .ff-done-lead{ max-width:620px; margin:28px 0 0; font-size:clamp(17px,1.6vw,19px); line-height:1.6; color:var(--acc-ink); } #ff-app-root .ff-done-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,6vw,96px); margin-top:clamp(48px,7vw,88px); padding-top:32px; border-top:1px solid var(--acc-rule); } #ff-app-root .ff-done-terms{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 24px; margin:0; align-self:start; } #ff-app-root .ff-done-terms dt,#ff-app-root .ff-done-terms dd{ margin:0; padding:14px 0; border-bottom:1px solid var(--acc-rule); } #ff-app-root .ff-done-terms dt{ font-family:var(--acc-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--acc-label); padding-top:17px; } #ff-app-root .ff-done-terms dd{ font-size:16px; line-height:1.5; color:var(--acc-ink); } #ff-app-root .ff-done-terms strong{ font-weight:600; } #ff-app-root .ff-done-muted{ color:var(--acc-label); font-size:14px; } #ff-app-root .ff-done-next h2{ margin-bottom:8px; } #ff-app-root .ff-done-next ol{ list-style:none; margin:0; padding:0; } #ff-app-root .ff-done-next li{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px; padding:20px 0; border-bottom:1px solid var(--acc-rule); } #ff-app-root .ff-done-n{ font-family:var(--acc-mono); font-size:13px; letter-spacing:.06em; color:var(--acc-label); padding-top:3px; } #ff-app-root .ff-done-next h3{ margin:0 0 6px; font-size:19px; font-weight:500; line-height:1.3; } #ff-app-root .ff-done-next p{ margin:0; font-size:15px; line-height:1.55; color:var(--acc-label); } #ff-app-root .ff-done-note{ margin:40px 0 0; font-family:var(--acc-mono); font-size:12px; line-height:1.6; letter-spacing:.04em; color:var(--acc-label); } #ff-app-root .ff-done-actions{ margin:36px 0 0; } #ff-app-root .ff-done-actions .ff-btn-primary{ max-width:360px; } #ff-app-root .ff-done-links{ display:flex; flex-wrap:wrap; gap:12px 28px; margin:32px 0 0; padding-top:24px; border-top:1px solid var(--acc-rule); } #ff-app-root .ff-done-link{ appearance:none; background:none; border:0; padding:4px 0; font:inherit; font-size:15px; color:var(--acc-ink); cursor:pointer; text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:rgba(26,26,26,.3); text-underline-offset:5px; min-height:44px; display:inline-flex; align-items:center; } #ff-app-root .ff-done-link:hover{ text-decoration-color:currentColor; } @media (max-width:900px){ #ff-app-root .ff-done-grid{ grid-template-columns:minmax(0,1fr); } } @media (max-width:480px){ #ff-app-root .ff-done-terms{ grid-template-columns:minmax(0,1fr); } #ff-app-root .ff-done-terms dt{ border-bottom:0; padding:14px 0 0; } #ff-app-root .ff-done-terms dd{ padding-top:4px; } #ff-app-root .ff-done-links{ flex-direction:column; gap:0; } } @media (prefers-reduced-motion: reduce){ #ff-app-root .ff-done-spinner{ animation:none; } }