/* ==========================================================================
   Softigo — site vitrine
   Component styling translated from the Claude Design system's Button,
   Badge, AppCard, DesktopMock and PhoneMock components (React → static CSS).
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
body{margin:0;overflow-x:hidden;font:var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--text-heading);letter-spacing:var(--tracking-tight)}
p{margin:0}
img{max-width:100%;display:block}
a{color:var(--text-link);text-decoration:none;transition:color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
a:focus-visible,button:focus-visible{outline:none;box-shadow:var(--ring-focus)}
::selection{background:var(--indigo-100);color:var(--n-900)}

.wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad)}
.eyebrow{font:var(--weight-semibold) var(--text-xs)/1.2 var(--font-body);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--indigo-600)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.86);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);border-bottom:1px solid var(--border-subtle)}
.site-header .wrap{height:72px;display:flex;align-items:center;gap:32px}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand img.mark{height:34px;width:auto}
.brand img.wordmark{height:20px;width:auto}
.main-nav{display:flex;gap:24px;font:var(--weight-semibold) var(--text-sm)/1.3 var(--font-body)}
.main-nav a{color:var(--text-body)}
.main-nav a.active{color:var(--indigo-600)}
.header-spacer{flex:1}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-inline);
  font:var(--weight-semibold) var(--text-sm)/1.3 var(--font-body);letter-spacing:var(--tracking-snug);
  border-radius:var(--radius-control);border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:var(--transition-control)}
.btn:hover{text-decoration:none}
.btn:active{transform:var(--press-scale)}
.btn-sm{padding:0 14px;height:36px;font-size:var(--text-sm)}
.btn-md{padding:0 20px;height:44px;font-size:var(--text-sm)}
.btn-lg{padding:0 28px;height:52px;font-size:var(--text-md)}
.btn-gradient{background:var(--gradient-brand);color:var(--text-on-brand);box-shadow:var(--shadow-brand)}
.btn-gradient:hover{filter:saturate(115%);color:var(--text-on-brand)}
.btn-gradient:active{box-shadow:var(--shadow-brand-press)}
.btn-secondary{background:var(--n-0);color:var(--text-heading);border-color:var(--border-default);box-shadow:var(--shadow-xs)}
.btn-secondary:hover{background:var(--n-25);border-color:var(--border-strong);color:var(--text-heading)}
.btn-inverse{background:var(--n-0);color:var(--indigo-600)}
.btn-inverse:hover{background:var(--n-50);color:var(--indigo-600)}

/* ---------- Badge ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);
  font:var(--weight-semibold) var(--text-xs)/1 var(--font-body);letter-spacing:var(--tracking-wide);
  height:26px;padding:0 10px}
.badge-brand{background:var(--surface-brand-subtle);color:var(--indigo-700)}
.badge-success{background:var(--green-50);color:var(--green-600)}
.badge-warning{background:var(--amber-50);color:var(--amber-600)}
.badge-neutral{background:var(--n-100);color:var(--n-700)}
.badge-mono{font-family:var(--font-mono);letter-spacing:0}
.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-row{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Breadcrumb ---------- */
.breadcrumb{display:flex;align-items:center;gap:6px;font:var(--weight-medium) var(--text-xs)/1 var(--font-body);color:var(--text-subtle);margin-bottom:20px}
.breadcrumb a{color:var(--text-subtle)}
.breadcrumb a:hover{color:var(--text-link-hover)}
.breadcrumb .current{color:var(--text-muted)}

/* ---------- Sub-page hero ---------- */
.page-hero{padding:64px 0 0}
.page-hero .wrap{display:block}
.page-hero-head{max-width:720px;display:flex;flex-direction:column;gap:16px}
.page-hero-head h1{font:var(--weight-black) clamp(32px,4.2vw,48px)/var(--leading-tight) var(--font-display);letter-spacing:var(--tracking-tight)}
.page-hero-head p.lede{font-size:var(--text-lg);line-height:var(--leading-relaxed);color:var(--text-muted);max-width:60ch}

/* gradient variant — the exact same treatment as the homepage hero: the radial halo sits behind
   the page as a borderless wash, not inside a bordered/rounded card. */
.page-hero.gradient{position:relative;overflow:hidden;padding:8px 0 0}
.page-hero.gradient::before{content:"";position:absolute;inset:0;background:var(--gradient-halo);pointer-events:none}
.page-hero.gradient .wrap{position:relative;padding:28px var(--page-pad) 56px}

.page-hero-split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:center}
.page-hero-split .page-hero-head{max-width:none}
.page-hero-media{display:flex;justify-content:center}
.page-hero-media img{width:100%;max-width:340px;height:auto;display:block}

/* ---------- Contact page visual: icon composition on the brand gradient (no photography/illustration
   per the design system — built entirely from tokens + Lucide icons already in the kit) ---------- */
.contact-visual{position:relative;width:100%;max-width:300px;aspect-ratio:6/5;border-radius:56px;
  background:var(--gradient-brand);box-shadow:var(--shadow-xl);overflow:hidden}
.cv-icon{position:absolute;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(255,255,255,.18);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);color:var(--n-0)}
.cv-icon-mail{width:128px;height:128px;top:32px;left:32px}
.cv-icon-mail svg{width:48px;height:48px}
.cv-icon-idea{width:92px;height:92px;bottom:36px;right:36px;background:rgba(255,255,255,.28)}
.cv-icon-idea svg{width:38px;height:38px}
.cv-dot{position:absolute;border-radius:50%;background:rgba(255,255,255,.35)}
.cv-dot-1{width:14px;height:14px;top:10%;right:20%}
.cv-dot-2{width:10px;height:10px;bottom:24%;left:16%}

/* ---------- Hero screenshot carousel (2 at a time) ---------- */
.hero-carousel{display:flex;flex-direction:column;gap:14px;width:100%}
.hero-carousel-viewport{overflow:hidden;border-radius:var(--radius-md)}
.hero-carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.hero-carousel-track::-webkit-scrollbar{display:none}
.hero-carousel-page{flex:0 0 100%;display:flex;gap:16px;scroll-snap-align:start}
.hero-shot-item{all:unset;box-sizing:border-box;flex:1 1 0;min-width:0;cursor:zoom-in;
  border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden;
  background:var(--n-25);box-shadow:var(--shadow-sm);transition:var(--transition-control)}
.hero-shot-item:hover,.hero-shot-item:focus-visible{border-color:var(--border-brand);box-shadow:var(--shadow-lg);transform:var(--lift-hover)}
.hero-shot-item:focus-visible{box-shadow:var(--ring-focus)}
.hero-shot-item img{width:100%;aspect-ratio:9/19;object-fit:cover;object-position:top;display:block}
.hero-carousel-controls{display:flex;align-items:center;justify-content:center;gap:16px}
.hero-carousel-nav{all:unset;box-sizing:border-box;width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);
  background:var(--n-0);border:1px solid var(--border-default);transition:var(--transition-control)}
.hero-carousel-nav:hover{background:var(--n-25);color:var(--text-heading)}
.hero-carousel-nav:disabled{opacity:.35;cursor:default}
.hero-carousel-nav:disabled:hover{background:var(--n-0);color:var(--text-muted)}
.hero-carousel-dots{display:flex;align-items:center;gap:6px}
.hero-carousel-dots .dot{width:6px;height:6px;border-radius:50%;background:var(--border-strong);cursor:pointer;transition:var(--transition-control);padding:0;border:none}
.hero-carousel-dots .dot.active{background:var(--indigo-500);width:18px;border-radius:var(--radius-pill)}

@media (max-width:860px){
  .page-hero-split{grid-template-columns:1fr}
  .page-hero-media{order:-1}
  .hero-shot-item{flex:0 0 45%}
  .hero-carousel-page{justify-content:center}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:var(--gradient-halo);pointer-events:none}
.hero .wrap{position:relative;padding:var(--section-y) var(--page-pad);display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.hero-copy h1{font:var(--weight-black) clamp(36px,5vw,60px)/var(--leading-tight) var(--font-display);letter-spacing:var(--tracking-tight);text-wrap:pretty}
.hero-copy h1 .grad{background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy p.lede{font-size:var(--text-lg);line-height:var(--leading-relaxed);color:var(--text-muted);max-width:46ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-devices{position:relative;display:flex;justify-content:center;padding-bottom:24px}

/* ---------- Device mocks ---------- */
.device-desktop{width:100%;max-width:500px;border-radius:var(--radius-md);overflow:hidden;
  background:var(--n-0);border:1px solid var(--border-default);box-shadow:var(--shadow-xl)}
.device-desktop .chrome{height:34px;display:flex;align-items:center;gap:8px;padding:0 12px;
  background:var(--n-50);border-bottom:1px solid var(--border-subtle)}
.device-desktop .dots{display:flex;gap:5px}
.device-desktop .dots span{width:8px;height:8px;border-radius:50%;background:var(--n-200)}
.device-desktop .bar{flex:1;height:18px;border-radius:var(--radius-pill);background:var(--n-0);
  border:1px solid var(--border-subtle);display:flex;align-items:center;padding:0 10px;
  font:var(--weight-regular) 10px/1 var(--font-mono);color:var(--text-subtle)}
.device-desktop .screen{aspect-ratio:520/328;background:var(--n-25)}
.device-desktop .screen img{width:100%;height:100%;object-fit:cover;object-position:top}

.device-phone{position:absolute;right:-8px;bottom:0;width:140px;height:288px;border-radius:20px;
  background:var(--n-900);padding:8px;box-shadow:var(--shadow-xl)}
.device-phone .screen{position:relative;width:100%;height:100%;border-radius:15px;overflow:hidden;background:var(--n-0)}
.device-phone .notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:34%;height:6px;
  border-radius:var(--radius-pill);background:var(--n-800);z-index:2}
.device-phone .screen img{width:100%;height:100%;object-fit:cover}

/* ---------- Section heading ---------- */
.section-head{display:flex;flex-direction:column;gap:12px;max-width:560px}
.section-head.wide{max-width:none}
.section-head.wide h2{white-space:nowrap}
.section-head.centered{max-width:680px;margin:0 auto;text-align:center;align-items:center}
.section-head h2{font:var(--weight-bold) var(--text-h2)/var(--leading-snug) var(--font-display);letter-spacing:var(--tracking-tight)}
.section-head p{font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-muted)}

/* ---------- App catalogue ---------- */
main{max-width:var(--page-max);margin:0 auto;padding:var(--section-y) var(--page-pad) 0}
main.flush-top{padding-top:0}
.app-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-card);margin-top:32px}
.app-card{display:flex;flex-direction:column;gap:14px;padding:var(--space-6);
  background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);
  box-shadow:var(--shadow-sm);transition:var(--transition-control);text-decoration:none;color:inherit}
.app-card:hover{border-color:var(--border-brand);box-shadow:var(--shadow-lg);transform:var(--lift-hover);color:inherit}
.app-card-top{display:flex;gap:14px;align-items:center}
.app-icon{width:56px;height:56px;flex:0 0 auto;border-radius:var(--radius-icon);
  display:inline-flex;align-items:center;justify-content:center;color:var(--n-0);box-shadow:var(--shadow-sm)}
.app-meta .app-name{font:var(--weight-semibold) var(--text-h4)/1.35 var(--font-display);color:var(--text-heading)}
.app-meta .app-version{font:var(--weight-regular) var(--text-2xs)/1 var(--font-mono);color:var(--text-subtle);margin-top:3px}
.app-tagline{font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--text-muted)}

/* ---------- Benefits ---------- */
.benefits{margin-top:var(--section-y)}
.benefit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-card);margin-top:40px}
.benefit{display:flex;flex-direction:column;gap:12px}
.benefit-icon{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center}
.benefit h4{font:var(--weight-semibold) var(--text-h4)/1.35 var(--font-display)}
.benefit p{font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--text-muted)}

/* ---------- Contact CTA ---------- */
.contact-cta{margin-top:var(--section-y);background:var(--n-900);border-radius:var(--radius-card);
  padding:48px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.contact-copy{max-width:52ch;display:flex;flex-direction:column;gap:12px}
.contact-copy .eyebrow{color:var(--cyan-300)}
.contact-copy h2{font:var(--weight-bold) var(--text-h2)/var(--leading-snug) var(--font-display);color:var(--n-0)}
.contact-copy p{font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-inverse-muted)}

/* ---------- Screenshot grid (product detail pages) ---------- */
.shot-section{margin-top:var(--section-y)}
.shot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-card);margin-top:32px}
.shot-frame{border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden;background:var(--n-25);box-shadow:var(--shadow-sm)}
.shot-frame img{width:100%;height:auto;display:block}
.shot-caption{font-size:var(--text-sm);color:var(--text-muted);margin-top:10px}

/* ---------- Screenshot carousel (with lightbox) ---------- */
.shot-carousel{position:relative;margin-top:32px}
.shot-track{display:flex;justify-content:center;gap:var(--gap-card);overflow-x:auto;scroll-snap-type:x proximity;padding:4px 4px 12px;margin:-4px -4px 0;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.shot-track::-webkit-scrollbar{height:8px}
.shot-track::-webkit-scrollbar-track{background:transparent}
.shot-track::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-pill)}
.shot-item-wrap{flex:0 0 auto;width:180px;scroll-snap-align:start;display:flex;flex-direction:column;gap:8px}
.shot-item{all:unset;box-sizing:border-box;display:block;width:100%;cursor:zoom-in;
  border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden;
  background:var(--n-25);box-shadow:var(--shadow-sm);transition:var(--transition-control)}
.shot-item:hover,.shot-item:focus-visible{border-color:var(--border-brand);box-shadow:var(--shadow-lg);transform:var(--lift-hover)}
.shot-item:focus-visible{box-shadow:var(--ring-focus)}
.shot-item img{width:100%;aspect-ratio:9/19;object-fit:cover;object-position:top;display:block}
.shot-item-wrap .shot-caption{font-size:var(--text-xs);margin-top:0}

.lightbox{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  background:var(--overlay-scrim);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);padding:24px}
.lightbox.is-open{display:flex}
.lightbox-figure{position:relative;max-width:min(92vw,960px);display:flex;flex-direction:column;align-items:center;gap:12px}
.lightbox-img{max-width:100%;max-height:76vh;border-radius:var(--radius-md);box-shadow:var(--shadow-xl);display:block;background:var(--n-800)}
.lightbox-caption{color:var(--n-0);font-size:var(--text-sm);line-height:var(--leading-normal);text-align:center;margin:0}
.lightbox-counter{color:var(--text-inverse-muted);font:var(--weight-regular) var(--text-2xs)/1 var(--font-mono)}
.lightbox-close{all:unset;box-sizing:border-box;position:absolute;top:-48px;right:0;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-control)}
.lightbox-close:hover{background:rgba(255,255,255,.24)}
.lightbox-nav{all:unset;box-sizing:border-box;position:fixed;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-control)}
.lightbox-nav:hover{background:rgba(255,255,255,.24)}
.lightbox-nav:disabled{opacity:.35;cursor:default}
.lightbox-nav:disabled:hover{background:rgba(255,255,255,.14)}
.lightbox-prev{left:16px}
.lightbox-next{right:16px}
@media (max-width:560px){
  .lightbox-prev{left:8px}
  .lightbox-next{right:8px}
  .lightbox-nav{width:38px;height:38px}
}

/* ---------- Feature grid (product detail pages, 3-up) ---------- */
.feature-section{margin-top:var(--section-y)}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-card);margin-top:32px}
.feature-item{display:flex;flex-direction:column;gap:12px;padding:var(--space-6);
  background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card)}
.feature-icon{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-brand-subtle);color:var(--indigo-600)}
.feature-item h4{font:var(--weight-semibold) var(--text-h4)/1.35 var(--font-display)}
.feature-item p{font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--text-muted)}

/* ---------- Extra badges row under a feature section (e.g. "Mono/Multi-utilisateur") ---------- */
.tour-extra{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:32px}
.tour-extra .badge{gap:7px}
.tour-extra .badge i{width:13px;height:13px}

/* ---------- Scroll-reveal feature blocks (product pages): edge-to-edge gradient bands whose
   media/text glide in from opposite sides as they enter the viewport. Shared mechanics only —
   each page's own <style> sets grid-template-columns and entrance direction (which differ since
   MissionsTracker's phone mockup and Patrimio's browser-window mockup use opposite defaults),
   plus its own device mockup (.scroll-phone / .scroll-window) and float keyframes. ---------- */
.feature-scroll{margin-top:var(--section-y)}
.scroll-feature-list{display:flex;flex-direction:column;margin-top:56px}
.scroll-feature{position:relative;overflow:visible;display:grid;gap:56px;align-items:center;padding:64px var(--page-pad)}
.scroll-feature::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);z-index:-1;pointer-events:none}
.scroll-feature:nth-child(odd)::before{background:linear-gradient(90deg,var(--n-0) 0%,var(--n-50) 50%,var(--n-0) 100%)}
.scroll-feature.reverse::before{background:linear-gradient(90deg,var(--violet-50) 0%,var(--indigo-50) 50%,var(--cyan-50) 100%)}
.scroll-feature.reverse .feature-icon{background:var(--n-0);box-shadow:var(--shadow-sm)}
.scroll-feature-media,.scroll-feature-text{opacity:0;transition:opacity .8s var(--ease-standard),transform .8s cubic-bezier(.22,1.4,.36,1)}
.scroll-feature-media{display:flex;justify-content:center}
.scroll-feature-text{display:flex;flex-direction:column;gap:14px;transition-delay:.1s}
.scroll-feature-text h3{font:var(--weight-semibold) var(--text-h3)/1.3 var(--font-display);color:var(--text-heading)}
.scroll-feature-text p{font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-body)}
/* auto-swapping screenshots sharing one device frame (phone or browser window): a flex strip of
   slides, one frame-width each, translated sideways so the incoming shot slides in from the right
   as the current one exits left (JS sets each slide's/the track's inline width, see initSlideSwap) */
.phone-slide-track{display:flex;height:100%;transition:transform .6s cubic-bezier(.65,0,.35,1)}
.phone-slide{flex:none;height:100%}
@media (prefers-reduced-motion: reduce){
  .phone-slide-track{transition:none}
}
/* .scroll-feature-list ancestor bumps specificity to (0,4,0) — needed so this beats each page's
   own .scroll-feature.reverse .scroll-feature-media/-text rule (also (0,3,0)) regardless of which
   stylesheet loads later; without it the reverse blocks' initial offset transform never resets */
.scroll-feature-list .scroll-feature.is-visible .scroll-feature-media,.scroll-feature-list .scroll-feature.is-visible .scroll-feature-text{opacity:1;transform:translateX(0) scale(1)}
@media (max-width:900px){
  .scroll-feature.reverse .scroll-feature-media,.scroll-feature.reverse .scroll-feature-text{order:initial}
  .scroll-feature-media{order:-1}
  .scroll-feature-media,.scroll-feature-text{transform:translateY(28px) scale(1)}
  .scroll-feature-list .scroll-feature.is-visible .scroll-feature-media,.scroll-feature-list .scroll-feature.is-visible .scroll-feature-text{transform:translateY(0) scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .scroll-feature-media,.scroll-feature-text{transition:opacity .3s linear;transform:none!important}
}

/* ---------- Spec sidebar (technical details) ---------- */
.detail-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr);gap:48px;margin-top:var(--section-y);align-items:start}
.spec-card{background:var(--surface-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-card);
  padding:var(--space-6);display:flex;flex-direction:column;gap:16px;position:sticky;top:96px}
.spec-card h3{font:var(--weight-semibold) var(--text-h4)/1.35 var(--font-display)}
.spec-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--border-subtle)}
.spec-row:first-of-type{border-top:none}
.spec-label{font-size:var(--text-sm);color:var(--text-muted)}
.spec-value{font:var(--weight-medium) var(--text-sm)/1.3 var(--font-mono);color:var(--text-heading);text-align:right}
.spec-section{margin-top:var(--section-y)}
.spec-card.standalone{position:static;max-width:480px;margin:32px auto 0}

/* ---------- Testimonials ---------- */
.testimonial-section{margin-top:var(--section-y)}
.testimonial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-card);margin-top:32px}
.testimonial-card{display:flex;flex-direction:column;gap:14px;padding:var(--space-6);
  background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-sm)}
.stars{display:flex;gap:2px;color:var(--amber-500)}
.stars svg{width:14px;height:14px;fill:currentColor}
.testimonial-quote{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body)}
.testimonial-author{font:var(--weight-semibold) var(--text-sm)/1.3 var(--font-body);color:var(--text-heading)}
.testimonial-role{font-size:var(--text-2xs);color:var(--text-subtle)}

/* ---------- Timeline (à propos) ---------- */
.timeline-section{margin-top:var(--section-y)}
.timeline{display:flex;flex-direction:column;margin-top:40px;border-left:2px solid var(--border-default);padding-left:32px}
.timeline-item{position:relative;padding-bottom:40px}
.timeline-item:last-child{padding-bottom:0}
.timeline-item::before{content:"";position:absolute;left:-38px;top:4px;width:12px;height:12px;border-radius:50%;
  background:var(--gradient-brand);box-shadow:0 0 0 4px var(--n-0)}
.timeline-year{font:var(--weight-bold) var(--text-2xs)/1 var(--font-mono);letter-spacing:var(--tracking-wide);color:var(--indigo-600);text-transform:uppercase}
.timeline-item h3{margin-top:6px;font:var(--weight-semibold) var(--text-h3)/1.3 var(--font-display)}
.timeline-item p{margin-top:8px;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-muted);max-width:60ch}

/* ---------- Philosophy ---------- */
.philosophy-section{margin-top:var(--section-y);background:var(--gradient-brand-soft);border-radius:var(--radius-card);padding:48px}
.philosophy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-card);margin-top:32px}
.philosophy-item{display:flex;flex-direction:column;gap:10px}
.philosophy-item h4{font:var(--weight-semibold) var(--text-h4)/1.35 var(--font-display)}
.philosophy-item p{font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--text-muted)}

/* ---------- Bio block ---------- */
.bio-section{margin-top:var(--section-y);display:grid;grid-template-columns:minmax(0,1fr);gap:24px;max-width:760px}
.bio-section p{font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-body)}

/* ---------- Contact page ---------- */
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:48px;margin-top:56px;align-items:start}
.contact-form{display:flex;flex-direction:column;gap:20px;background:var(--surface-card);
  border:1px solid var(--border-subtle);border-radius:var(--radius-card);padding:var(--space-6);box-shadow:var(--shadow-sm)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font:var(--weight-medium) var(--text-sm)/1.3 var(--font-body);color:var(--text-heading)}
.field input,.field select,.field textarea{
  font:var(--weight-regular) var(--text-sm)/1.4 var(--font-body);color:var(--text-body);
  background:var(--n-0);border:1px solid var(--border-default);border-radius:var(--radius-control);
  padding:10px 14px;transition:var(--transition-control)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--border-brand);box-shadow:var(--ring-focus)}
.field textarea{resize:vertical;min-height:120px}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-form-wrap{display:flex;flex-direction:column;gap:16px}
.form-status{font:var(--weight-medium) var(--text-sm)/1.4 var(--font-body);padding:12px 16px;
  border-radius:var(--radius-control);background:var(--green-50);color:var(--green-600)}
.form-status.form-status-error{background:var(--red-50);color:var(--red-600)}
.contact-side{display:flex;flex-direction:column;gap:24px}
.contact-side-card{background:var(--surface-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-card);padding:var(--space-6);display:flex;flex-direction:column;gap:14px}
.contact-side-card h3{font:var(--weight-semibold) var(--text-h4)/1.35 var(--font-display)}
.contact-row{display:flex;align-items:center;gap:10px;font-size:var(--text-sm);color:var(--text-body)}
.contact-row .icon-chip{width:32px;height:32px;border-radius:9px;background:var(--surface-brand-subtle);color:var(--indigo-600);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.contact-row .icon-chip svg,.contact-row .icon-chip i{width:16px;height:16px}

/* ---------- Cross-sell (bottom-of-page, other product) ---------- */
.cross-sell{margin-top:var(--section-y);padding-top:var(--section-y);border-top:1px solid var(--border-subtle);
  display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.cross-sell p{font-size:var(--text-md);color:var(--text-muted)}

/* ---------- Footer ---------- */
footer{background:var(--n-900);margin-top:var(--section-y)}
footer .wrap{padding:32px var(--page-pad);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.footer-copy{font:var(--weight-regular) var(--text-2xs)/1 var(--font-mono);color:var(--text-subtle)}
.footer-mail{font-size:var(--text-sm);color:var(--text-inverse-muted)}
.footer-nav{display:flex;gap:20px;font:var(--weight-medium) var(--text-sm)/1 var(--font-body)}
.footer-nav a{color:var(--text-inverse-muted)}
.footer-nav a:hover{color:var(--n-0)}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;gap:40px;padding:var(--section-y-mobile) var(--page-pad)}
  .app-grid{grid-template-columns:1fr}
  .benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  main{padding-top:var(--section-y-mobile)}
  .benefits,.contact-cta,.shot-section,.feature-section,.feature-tour,.spec-section,.testimonial-section,.timeline-section,.philosophy-section,.bio-section,.cross-sell,footer{margin-top:var(--section-y-mobile)}
  .cross-sell{padding-top:var(--section-y-mobile)}
  .section-head.wide h2{white-space:normal}
  .shot-grid,.feature-grid,.testimonial-grid,.philosophy-grid{grid-template-columns:1fr}
  .detail-layout{grid-template-columns:1fr}
  .spec-card{position:static}
  .contact-layout{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}
@media (max-width:560px){
  .main-nav{display:none}
  .benefit-grid{grid-template-columns:1fr}
  .contact-cta{padding:32px 24px}
  .philosophy-section{padding:32px 24px}
  .page-hero.gradient .wrap{padding:20px 24px 32px}
}