/* ==========================================================================
Configurateur — local overrides only.
Base tokens (palette, type, spacing, motion, .btn/.wrap/.module-card/etc.)
come from ../assets/style.css, loaded first in index.html's .
Nothing here redefines a token — only new component shapes this page
needs that the marketing site never did: selectable cards, form fields,
the sticky recap ledger.
========================================================================== */
:root {
--header-h: 88px; /* approx. sticky header height, used for sticky offsets */
}
/* Visually-hidden but still focusable/announced — used instead of the
`hidden` attribute on the logo file input, which strips it from the tab
order entirely and makes it unreachable by keyboard. Standard accessible
file-upload pattern. */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* ==========================================================================
Intro
========================================================================== */
.configurateur-intro { padding: var(--space-20) 0 var(--space-12); }
.configurateur-intro h1 {
font-size: var(--text-hero); line-height: 1.05; letter-spacing: -0.02em;
max-width: 760px; font-variation-settings: "opsz" 144;
}
.configurateur-intro .lead { font-size: var(--text-md); color: var(--ink-soft); max-width: 34em; margin-top: var(--space-5); }
/* ==========================================================================
Sector picker (Step 1) — compact, icon-forward, single-select.
Reuses the module-card's card language (bg, border, radius, shadow) at a
smaller footprint, plus the pick/selected mechanics shared with module
cards below.
========================================================================== */
.sector-grid {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5);
}
.sector-card {
position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
gap: var(--space-3); padding: var(--space-6) var(--space-4);
background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow-card); cursor: pointer;
transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s ease;
}
.sector-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.sector-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sector-card .sector-icon {
width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
color: var(--ink);
}
.sector-card .sector-icon svg { width: 100%; height: 100%; }
.sector-card .sector-name { font-size: var(--text-sm); font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
/* Selected state — the same rotated hand-drawn checkmark idiom the
pricing list already uses (price-card li::before), just relocated to a
corner badge so it reads as "chosen" rather than "included." Reused,
not reinvented. */
.sector-card:has(input:checked),
.module-card.pick:has(input:checked) {
border-color: var(--accent); background: var(--accent-soft);
}
.sector-card:has(input:focus-visible),
.module-card.pick:has(input:focus-visible) {
outline: 2px solid var(--accent-ink); outline-offset: 2px;
}
.sector-card .pick-check, .module-card .pick-check {
position: absolute; top: var(--space-3); right: var(--space-3);
width: 22px; height: 22px; border-radius: 50%; background: var(--paper);
border: 1.5px solid var(--line); opacity: 0; transform: scale(.7);
transition: opacity .2s ease, transform .2s var(--ease-out), border-color .2s ease, background .2s ease;
}
.sector-card .pick-check::before, .module-card .pick-check::before {
content: ""; position: absolute; left: 7px; top: 10px; width: 8px; height: 5px;
border-left: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink); transform: rotate(-45deg);
}
.sector-card:has(input:checked) .pick-check,
.module-card.pick:has(input:checked) .pick-check {
opacity: 1; transform: scale(1); border-color: var(--accent); background: var(--paper);
}
/* ==========================================================================
Module picker (Step 2) — the existing .module-card, extended with the
same selectable mechanics as the sector cards, plus a price tag.
========================================================================== */
.module-pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.module-card.pick { position: relative; cursor: pointer; display: block; }
.module-card.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.module-card.pick .pick-price {
display: inline-flex; align-items: center; gap: var(--space-2);
margin-top: var(--space-5); font-family: var(--serif); font-weight: 600;
font-size: var(--text-md); color: var(--ink);
}
.module-card.pick .pick-price::before { content: ""; width: 14px; height: 1.5px; background: var(--line); display: inline-block; }
.module-tease {
margin-top: var(--space-10); text-align: center; color: var(--ink-faint);
font-size: var(--text-sm); font-family: var(--serif);
}
/* ==========================================================================
Config layout (Steps 2-5) — two columns once there's something to tally:
step panels on the left, the recap ledger sticky on the right. Step 1
(sector) and the intro stay full-bleed sections, matching the marketing
site's own section rhythm — this grid only wraps the part of the flow
the recap actually needs to accompany.
========================================================================== */
.config-layout {
max-width: 1520px; margin: 0 auto; padding: var(--space-20) var(--space-8);
display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-10);
align-items: start;
}
.config-steps { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }
.config-step .section-head { margin-bottom: var(--space-10); }
/* ==========================================================================
Form fields — new vocabulary this page needs, none of it existed on the
marketing site (which has no forms). Same ink/paper/accent palette,
same radius and shadow language as .module-card, so a text input reads
as a sibling of the existing cards, not an import from elsewhere.
========================================================================== */
.field-group { display: flex; flex-direction: column; gap: var(--space-6); max-width: 34em; }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field-label { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.field-hint { font-size: var(--text-xs); color: var(--ink-faint); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
font-family: var(--sans); font-size: var(--text-base); color: var(--ink);
background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius);
padding: 0.75rem var(--space-4); min-height: 44px;
transition: border-color .2s ease, box-shadow .2s ease;
}
.field input[type="text"]:focus,
.field input[type="email"]:focus,
.field input[type="tel"]:focus,
.field select:focus,
.field textarea:focus {
outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.field textarea { resize: vertical; min-height: 96px; font-family: var(--sans); line-height: 1.6; }
.field-charcount { font-size: var(--text-micro); color: var(--ink-faint); text-align: right; }
.field select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right var(--space-4) center; padding-right: var(--space-10);
}
/* Colour picker — native , just given the same card
frame as every other field so it doesn't look like an unstyled browser
default sitting next to designed ones. */
.field-color { flex-direction: row; align-items: center; gap: var(--space-4); }
.field-color .field-label { flex: 1; }
.field-color input[type="color"] {
-webkit-appearance: none; appearance: none; width: 52px; height: 44px;
border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--card);
padding: 3px; cursor: pointer;
}
.field-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.field-color input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px; }
.field-color .color-swatch {
width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line);
flex-shrink: 0;
}
/* Logo upload — a drag-drop zone dressed as a sketched frame (dashed
hand-drawn border, same idea as the stitch-divider's dashed thread)
rather than a generic dropzone box. */
.upload-zone {
display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3);
padding: var(--space-8) var(--space-6); border-radius: var(--radius-lg);
border: 1.5px dashed var(--ink-faint); background: var(--card); cursor: pointer;
transition: border-color .2s ease, background .2s ease;
}
.upload-zone:hover, .upload-zone.dragover { border-color: var(--accent); background: var(--accent-soft); }
.upload-zone svg { width: 32px; height: 32px; color: var(--ink-faint); }
.upload-zone .upload-browse { color: var(--accent-ink); font-weight: 600; text-decoration: underline; }
.upload-zone .upload-hint { font-size: var(--text-xs); color: var(--ink-faint); }
.upload-zone.has-file { border-style: solid; }
.upload-preview { width: 64px; height: 64px; object-fit: contain; border-radius: var(--radius-sm); }
.upload-zone-wrap { position: relative; }
.upload-remove {
position: absolute; top: var(--space-3); right: var(--space-3);
font-family: var(--sans); font-size: var(--text-xs); font-weight: 600;
color: var(--ink-soft); background: var(--paper); border: 1.5px solid var(--line);
border-radius: 999px; padding: 0.35rem 0.85rem; cursor: pointer;
transition: border-color .2s ease, color .2s ease;
}
.upload-remove:hover { border-color: var(--ink); color: var(--ink); }
.upload-error { color: var(--color-error); font-size: var(--text-xs); margin-top: var(--space-1); }
/* Multi-select "tool chips" — checkboxes styled as small toggle pills,
same family as .btn.ghost rather than default checkbox squares. */
.tool-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.tool-chip {
position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
font-size: var(--text-sm); padding: 0.55rem 1rem; border-radius: 999px;
border: 1.5px solid var(--line); background: var(--card); cursor: pointer;
transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.tool-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tool-chip:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.tool-chip:has(input:focus-visible) { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
/* RGPD consent — plain checkbox, kept small and quiet on purpose (this is
a legal control, not a design moment). */
.consent { display: flex; align-items: flex-start; gap: var(--space-3); max-width: 34em; }
.consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent-ink); flex-shrink: 0; }
.consent label { font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.55; }
.consent a { color: var(--ink); text-decoration: underline; }
/* ==========================================================================
Recap ledger — the signature element. A running tally styled like a
hand-written devis/facture (this app's own Devis & Factures module,
made tangible): itemised lines, a stitched rule before the total, the
total itself set in italic serif like a pencilled-in figure.
========================================================================== */
.recap {
position: sticky; top: calc(var(--header-h) + var(--space-6));
background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-lg);
padding: var(--space-7) var(--space-6); box-shadow: var(--shadow-card);
}
.recap-title {
font-size: var(--text-xs); letter-spacing: .07em; text-transform: uppercase;
color: var(--accent); font-weight: 600; margin-bottom: var(--space-5); display: block;
}
.recap-lines { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.recap-line { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); color: var(--ink-soft); }
.recap-line .recap-line-price { color: var(--ink); font-variant-numeric: tabular-nums; }
.recap-stitch { display: block; width: 100%; height: 14px; margin: var(--space-2) 0 var(--space-4); }
.recap-stitch path { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 5 6; opacity: .3; fill: none; }
.recap-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); }
.recap-total .recap-total-label { font-size: var(--text-sm); color: var(--ink-soft); }
.recap-total .recap-total-price {
font-family: var(--serif); font-weight: 600; font-size: var(--text-2xl);
color: var(--ink); font-variation-settings: "opsz" 40;
}
.recap-monthly { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--ink-soft); margin-bottom: var(--space-6); }
.recap-monthly strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.recap-tooltip { position: relative; display: inline-flex; }
.recap-tooltip .tip-icon {
width: 16px; height: 16px; border-radius: 50%; border: 1.4px solid var(--ink-faint);
color: var(--ink-faint); font-size: 11px; font-family: var(--serif);
display: inline-flex; align-items: center; justify-content: center; cursor: help;
}
.recap-tooltip .tip-bubble {
position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
width: 220px; background: var(--ink); color: var(--paper); font-size: var(--text-xs);
line-height: 1.5; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.recap-tooltip:hover .tip-bubble, .recap-tooltip:focus-within .tip-bubble { opacity: 1; }
.recap .btn { width: 100%; justify-content: center; }
.recap-note { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--ink-faint); text-align: center; }
/* CTA "why disabled" reason — same reveal-on-hover/focus idiom as
.recap-tooltip/.tip-bubble above, not reinvented. aria-describedby
carries it to screen readers regardless of visual hover state; sighted
mouse users see it on hover; keyboard/touch users see it on focus
(tapping a button focuses it), satisfying "hover or tap" for everyone. */
.cta-wrap { position: relative; }
.cta-reason {
position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; text-align: center;
background: var(--ink); color: var(--paper); font-size: var(--text-xs);
line-height: 1.5; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.cta-wrap:hover .cta-reason, .cta-wrap:focus-within .cta-reason { opacity: 1; }
/* Submit failure — always visible (not hover-only like .cta-reason above,
which is fine to require interaction since aria-disabled explains
itself on focus; a failed submission needs to be seen without any
interaction at all). role="alert" on the element itself announces it
immediately to screen readers. */
.submit-error { color: var(--color-error); font-size: var(--text-sm); margin-top: var(--space-3); text-align: center; }
/* Submit success — replaces the CTA area entirely once submitted=true. */
.submit-success { text-align: center; padding: var(--space-2) 0; }
.submit-success-title {
font-family: var(--serif); font-weight: 600; font-size: var(--text-lg);
color: var(--accent-ink); margin-bottom: var(--space-2);
}
.suivi-link-note {
margin-top: var(--space-3); font-size: var(--text-xs); color: var(--ink-soft); line-height: 1.6;
}
.suivi-link-note a { color: var(--accent-ink); word-break: break-all; }
/* ==========================================================================
Responsive — same two breakpoints style.css already uses (980px /
640px), extended here rather than introducing a parallel min-width
system. Deliberate: mixing mobile-first and desktop-first media-query
strategies in one cascade is a real footgun (source order and
specificity fight each other); consistency with the file this page
extends wins over an abstract "always min-width" rule. Every new
control below still respects the 44px touch-target floor regardless of
which query direction sets its layout.
========================================================================== */
@media (max-width: 980px) {
/* Page-specific override, not a shared/style.css change: the shared
header only hides .navlinks below 640px, tuned for its own 4 short
items. This page's 5th item ("Configurateur") pushes "Comment ça
marche" into wrapping and overlapping the logo anywhere from ~641px
up to just under 980px (confirmed live at 768/900px; clean again at
980px). Hiding earlier, at the site's own existing 980px breakpoint,
avoids the wrap without touching the homepage's 4-item nav. */
.navlinks { display: none; }
.sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.module-pick-grid { grid-template-columns: minmax(0, 1fr); }
.config-layout { grid-template-columns: minmax(0, 1fr); padding: var(--space-16) var(--space-8) calc(var(--space-16) + 84px); }
.recap {
position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 90;
border-radius: 0; border-width: 1.5px 0 0; box-shadow: 0 -8px 24px -12px rgba(43,38,32,.25);
padding: var(--space-4) var(--space-5);
}
/* Collapsed mobile shape: total + CTA only. The full itemised list and
tooltip stay in the markup (screen readers, and Alpine can expand it
later on tap) but are visually hidden here — a fixed bar has no room
for a ledger. */
.recap-title, .recap-lines, .recap-stitch, .recap-monthly { display: none; }
.recap-total { margin-bottom: var(--space-3); }
.recap-note { display: none; }
}
@media (max-width: 640px) {
.configurateur-intro h1 { font-size: 2.25rem; }
.configurateur-intro { padding: var(--space-16) 0 var(--space-10); }
.sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.sector-card { padding: var(--space-5) var(--space-3); }
.config-layout { padding: var(--space-12) var(--space-5) calc(var(--space-12) + 84px); }
}