@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#163c36; --leaf:#1c5147; --sage:#9db6a5; --lagoon:#6f9e9a; --coral:#d77862; --paper:#fbfaf5; --sand:#eeece1; --line:rgba(22,60,54,.16); --muted:#61746d; --radius:16px; }
* { box-sizing:border-box; }
/* clip (et non hidden) pour neutraliser le débordement des orbites
   décoratives du hero sans créer de conteneur de défilement, ce qui
   casserait le header sticky. */
html { scroll-behavior:smooth; overflow-x:clip; }
/* overflow-x:clip (et non hidden) : clip est exempté de la règle qui
   transforme overflow-y en auto — on coupe donc le débordement horizontal
   SANS casser le position:sticky du header. */
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,Arial,sans-serif; font-size:16px; line-height:1.55; overflow-x:clip; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; object-fit:cover; }
button,input,textarea,select { font:inherit; }
.container { width:min(1180px,calc(100% - 40px)); margin:auto; }
/* Barre de navigation opaque (fond plein), avec une ombre douce au défilement. */
.site-header { position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:1px solid var(--line); transition:box-shadow .3s ease; }
.site-header.is-scrolled { box-shadow:0 6px 22px rgba(22,60,54,.09); }
.nav { height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo { display:flex; gap:8px; align-items:center; font-weight:800; letter-spacing:-.06em; font-size:25px; }
.logo-mark { width:23px; height:23px; background:var(--coral); border-radius:7px 7px 7px 0; transform:rotate(45deg); }
.logo-mark:after { content:""; display:block; height:100%; width:100%; border:5px solid var(--ink); border-radius:7px 7px 7px 0; transform:translate(6px,-6px); }
.nav-links { display:flex; align-items:center; gap:27px; font-size:13px; font-weight:700; }
.nav-links a { opacity:.72; transition:.2s; }
.nav-links a:hover,.nav-links a.active { opacity:1; color:var(--coral); }
.menu-toggle { display:none; border:0; background:none; color:var(--ink); padding:10px; font-size:21px; }
/* Icônes SVG (remplacent les anciennes flèches/symboles emoji) */
.ico-ar { width:1em; height:1em; vertical-align:-0.12em; flex:none; }
.button span { display:inline-flex; align-items:center; }
.menu-toggle .ico-menu { width:23px; height:23px; display:block; }
.quiz-close svg { width:15px; height:15px; display:block; }
.quiz-back svg { width:1em; height:1em; vertical-align:-0.1em; margin-right:2px; }
.quiz-check svg { width:12px; height:12px; }
.quiz-badge svg { width:36px; height:36px; }
.cw-hint .ico-ar { width:1.15em; height:1.15em; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:0 20px; border-radius:999px; border:1px solid var(--ink); font-size:13px; font-weight:800; transition:transform .2s,background .2s,color .2s; }
.button:hover { transform:translateY(-2px); }
.button:active { transform:translateY(1px); }
.button.primary { background:var(--ink); color:#fff; }
.button.primary:hover { background:var(--coral); border-color:var(--coral); }
.button.ghost { border-color:var(--line); }
.button.ghost:hover { background:var(--sand); border-color:var(--sage); }
.button.small { min-height:39px; padding:0 15px; }

/* Bouton « Ma maquette gratuite » — micro-interaction : le libellé s'efface
   et la pastille chevron s'étend pour remplir le bouton (portage vanilla du
   composant GetStartedButton). */
.mq-btn { position:relative; overflow:hidden; display:inline-flex; align-items:center; min-height:48px; padding:0 18px; border:0; border-radius:999px; background:var(--ink); color:#fff; font-size:13px; font-weight:800; letter-spacing:-.01em; text-decoration:none; cursor:pointer; box-shadow:0 10px 26px rgba(22,60,54,.14); transition:transform .2s ease,box-shadow .2s ease; }
.mq-btn:hover { transform:translateY(-2px); box-shadow:0 16px 32px rgba(22,60,54,.2); }
.mq-btn:active { transform:translateY(0); }
.mq-btn-label { position:relative; z-index:1; padding-right:40px; white-space:nowrap; transition:opacity .45s ease; }
.mq-btn:hover .mq-btn-label { opacity:0; }
.mq-btn-ico { position:absolute; z-index:2; right:5px; top:5px; bottom:5px; width:36px; display:grid; place-items:center; border-radius:999px; background:rgba(255,255,255,.16); transition:width .5s cubic-bezier(.2,.7,.2,1),background .3s ease,transform .15s ease; }
.mq-btn:hover .mq-btn-ico { width:calc(100% - 10px); background:rgba(255,255,255,.22); }
.mq-btn:active .mq-btn-ico { transform:scale(.96); }
.mq-btn-ico svg { width:16px; height:16px; color:#fff; display:block; }
.mq-btn-sm { min-height:39px; padding:0 14px; }
.mq-btn-sm .mq-btn-label { padding-right:36px; }
.mq-btn-sm .mq-btn-ico { width:30px; right:4px; top:4px; bottom:4px; }
.mq-btn-block { display:flex; width:100%; min-height:54px; padding:0 22px; background:linear-gradient(135deg,#d77862,#c96b4a); box-shadow:0 12px 28px rgba(215,120,98,.42); }
.mq-btn-block:hover { box-shadow:0 18px 38px rgba(215,120,98,.5); }
/* Animation maintenue même sous réduction de mouvement (cohérent avec le site). */
@media (prefers-reduced-motion:reduce) {
  .mq-btn-label { transition:opacity .45s ease !important; }
  .mq-btn-ico { transition:width .5s cubic-bezier(.2,.7,.2,1) !important,background .3s ease !important; }
}
.eyebrow { color:var(--coral); font:500 11px/1 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(3rem,7.4vw,6.8rem); line-height:.94; letter-spacing:-.07em; margin-bottom:26px; font-weight:800; }
h2 { font-size:clamp(2.25rem,4.5vw,4.4rem); line-height:1; letter-spacing:-.065em; margin-bottom:22px; }
h3 { font-size:20px; letter-spacing:-.04em; margin-bottom:9px; }
.lead { color:var(--muted); max-width:500px; font-size:17px; line-height:1.7; }
.page-hero { padding:82px 0 70px; border-bottom:1px solid var(--line); }
.page-hero .lead { font-size:18px; }
.hero { min-height:calc(100dvh - 72px); display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:50px; padding:66px 0 46px; }
.hero-copy { padding:15px 0; }
.hero-copy h1 span { color:var(--coral); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero-visual { position:relative; min-height:510px; }
.trust-line { display:grid; grid-template-columns:1fr 2fr; gap:35px; align-items:center; padding:30px 0; border-top:1px solid var(--line); }
.trust-line p { margin:0; color:var(--muted); font-size:13px; }
.trust-logos { display:flex; align-items:center; justify-content:space-between; color:#8aa099; font-weight:800; letter-spacing:-.04em; font-size:17px; }
section { padding:112px 0; }
.section-heading { max-width:720px; margin-bottom:54px; }
.section-heading .lead { max-width:570px; }
.intro-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:85px; align-items:end; }
.manifesto { font-size:clamp(1.75rem,3.1vw,3rem); line-height:1.15; letter-spacing:-.055em; margin:0; }
.manifesto em { color:var(--coral); font-style:normal; }
.detail-text { color:var(--muted); }
.detail-text p:last-child { margin-bottom:0; }
.service-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.service-strip a { min-height:228px; padding:28px; border-right:1px solid var(--line); transition:background .25s; }
.service-strip a:last-child { border:0; }
.service-strip a:hover { background:var(--sand); }
.service-strip article { min-height:228px; padding:28px; border-right:1px solid var(--line); }
.service-strip article:last-child { border-right:0; }
.service-strip article .price { display:block; margin-top:26px; font-size:17px; letter-spacing:-.045em; }
.service-strip article .text-link { margin-top:17px; }
.service-number { color:var(--coral); font:500 12px 'DM Mono',monospace; }
.service-arrow { float:right; font-size:21px; }
.service-strip h3 { margin-top:65px; }
.stat-panel { background:var(--ink); color:white; border-radius:var(--radius); padding:46px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
.stat-panel div { border-left:1px solid rgba(255,255,255,.25); padding-left:21px; }
.stat-panel div:first-child { border:0; padding-left:0; }
.stat-panel strong { display:block; font-size:clamp(2.2rem,4vw,4rem); letter-spacing:-.075em; line-height:1; }
.stat-panel span { color:#c1d0c4; font-size:13px; }
.work-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:22px; }
.work-card { border-radius:var(--radius); overflow:hidden; background:#e3e6dd; position:relative; min-height:360px; display:flex; align-items:end; }
.work-card:nth-child(2) { background:#d7e1df; }
.work-card img { height:100%; position:absolute; inset:0; transition:transform .6s; }
.work-card:hover img { transform:scale(1.035); }
.work-card-content { position:relative; width:100%; padding:24px; color:white; background:linear-gradient(transparent,rgba(8,36,30,.83)); }
.work-card-content p { margin:5px 0 0; font-size:13px; color:#e8efeb; }
.work-card-content h3 { margin:0; }
.cta-band { padding:87px 0; background:var(--sand); }
.cta-band .container { display:flex; justify-content:space-between; align-items:end; gap:30px; }
.cta-band h2 { max-width:680px; margin:0; }
.footer { background:var(--ink); color:#fff; padding:64px 0 24px; }
.footer-grid { display:grid; grid-template-columns:1.45fr repeat(3,1fr); gap:45px; padding-bottom:62px; }
.footer .logo { color:white; }
.footer .logo-mark:after { border-color:white; }
.footer p,.footer a { color:#c9d7cd; font-size:13px; }
.footer h4 { margin:3px 0 17px; font-size:12px; color:#fff; text-transform:uppercase; letter-spacing:.1em; }
.footer-links { display:grid; gap:9px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.18); padding-top:20px; display:flex; justify-content:space-between; gap:20px; color:#b9c9bd; font-size:11px; }
/* services */
.services-list { border-top:1px solid var(--line); }
.service-row { display:grid; grid-template-columns:80px 1.2fr 1fr auto; align-items:center; gap:25px; border-bottom:1px solid var(--line); padding:30px 0; transition:padding .25s; }
.service-row:hover { padding-left:14px; padding-right:14px; background:rgba(157,182,165,.08); }
.service-icon { width:47px; height:47px; display:grid; place-items:center; border:1px solid var(--sage); border-radius:14px; color:var(--leaf); font:500 14px 'DM Mono',monospace; }
.service-row p { color:var(--muted); margin:0; font-size:14px; }
.service-row .arrow { font-size:24px; color:var(--coral); }
.process { background:#f0f2eb; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.process-item { border-top:2px solid var(--ink); padding-top:18px; }
.process-item span { color:var(--coral); font:500 12px 'DM Mono',monospace; }
.process-item p { font-size:14px; color:var(--muted); }
/* ===========================================================
   Réalisations — portfolio immersif : chaque site dans un
   mockup réaliste (navigateur desktop / smartphone) via iframe
   live mise à l’échelle. Calque cliquable au-dessus de l’iframe.
   =========================================================== */
.showcase { padding-top:24px; }
.showcase-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:34px; align-items:start; }
.case { display:flex; flex-direction:column; }
.case-feature { grid-column:1 / -1; }
/* width:100% (définie) + margin auto : centre le stage sans déclencher le
   rétrécissement au contenu que provoqueraient des marges auto seules. */
.case-feature .case-stage { width:100%; max-width:920px; margin-inline:auto; }

/* Zone cliquable (mockup + indice) */
.case-stage { position:relative; display:block; border-radius:var(--radius); }
.case-hint { position:absolute; z-index:3; left:50%; bottom:22px; transform:translate(-50%,14px); opacity:0; pointer-events:none; display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:#fff; font-size:12px; font-weight:800; letter-spacing:-.01em; padding:10px 16px; border-radius:999px; box-shadow:0 12px 30px rgba(22,60,54,.32); transition:opacity .3s ease,transform .3s ease; }
.case-stage:hover .case-hint,.case-stage:focus-visible .case-hint { opacity:1; transform:translate(-50%,0); }
.case-stage:focus-visible { outline:3px solid var(--coral); outline-offset:6px; }

/* Cadre générique */
.mock { position:relative; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
/* Léger effet de profondeur + zoom subtil de l’appareil au survol. */
.case-stage:hover .mock { transform:translateY(-8px) scale(1.02); }

/* Écran : conteneur à ratio fixe qui rogne l’iframe */
.mock-screen { position:relative; overflow:hidden; background:linear-gradient(135deg,#e9efe9,#d6e0d9); aspect-ratio:var(--vw) / var(--vh); }
.mock-loading { position:absolute; inset:0; z-index:0; display:grid; place-content:center; color:var(--muted); font:500 11px 'DM Mono',monospace; letter-spacing:.04em; }
/* La mise à l’échelle porte sur ce div wrapper, pas sur l’iframe :
   certains moteurs (et le pane de preview) n’appliquent pas les
   transforms directement à un élément <iframe>. */
/* Scale de base appliqué sans transition (sinon l’aperçu apparaîtrait en
   grande taille puis rétrécirait au chargement). Le zoom subtil au survol
   porte sur tout l’appareil (.mock), qui lui est animé. */
.mock-viewport { position:absolute; top:0; left:0; z-index:1; width:calc(var(--vw) * 1px); height:calc(var(--vh) * 1px); transform:scale(var(--s,1)); transform-origin:0 0; pointer-events:none; }
.mock-frame { display:block; width:100%; height:100%; border:0; background:#fff; }
.mock-loading { transition:opacity .4s ease; }
.mock-screen:has(.mock-viewport.is-ready) .mock-loading { opacity:0; }

/* --- Mockup navigateur / ordinateur --- */
.mock-desktop { border-radius:16px; overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:0 2px 4px rgba(22,60,54,.06),0 18px 40px rgba(22,60,54,.14); transition:box-shadow .45s ease,transform .45s cubic-bezier(.2,.7,.2,1); }
.case-stage:hover .mock-desktop { box-shadow:0 6px 12px rgba(22,60,54,.1),0 34px 70px rgba(22,60,54,.24); }
.mock-bar { display:flex; align-items:center; gap:8px; height:40px; padding:0 15px; background:linear-gradient(#fbfbf9,#eef0ea); border-bottom:1px solid var(--line); }
.mock-bar .dot { width:11px; height:11px; border-radius:50%; background:#d7d3c8; }
.mock-bar .dot:nth-child(1) { background:#ec6a5f; }
.mock-bar .dot:nth-child(2) { background:#f4be4f; }
.mock-bar .dot:nth-child(3) { background:#61c554; }
.mock-url { margin-left:10px; flex:1; height:22px; display:flex; align-items:center; padding:0 12px; background:#fff; border:1px solid var(--line); border-radius:999px; color:var(--muted); font:500 11px 'DM Mono',monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* --- Mockup smartphone --- */
.mock-phone { width:min(300px,78%); margin:0 auto; padding:12px; border-radius:44px; background:linear-gradient(160deg,#2b2b2f,#141416); box-shadow:0 2px 4px rgba(0,0,0,.3),0 26px 55px rgba(22,60,54,.3),inset 0 0 0 2px #3a3a3f; transition:box-shadow .45s ease,transform .45s cubic-bezier(.2,.7,.2,1); }
.case-stage:hover .mock-phone { box-shadow:0 6px 12px rgba(0,0,0,.3),0 40px 80px rgba(22,60,54,.4),inset 0 0 0 2px #3a3a3f; }
.mock-phone .mock-screen { border-radius:32px; }
.mock-island { position:absolute; z-index:2; top:22px; left:50%; transform:translateX(-50%); width:96px; height:26px; background:#08080a; border-radius:999px; }
.case-mobile .case-stage { padding:6px 0; }

/* Fiche projet */
.case-meta { padding:22px 4px 0; }
.case-title { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.case-title h3 { margin:0; font-size:24px; letter-spacing:-.04em; }
.case-badge { flex:none; font:500 10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.06em; color:var(--leaf); background:rgba(157,182,165,.18); border:1px solid var(--sage); border-radius:999px; padding:4px 9px; }
.case-meta > p { color:var(--muted); font-size:14px; margin:0 0 16px; max-width:52ch; }
.case-tags { list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 0 20px; }
.case-tags li { font-size:11px; font-weight:700; color:var(--ink); background:var(--sand); border-radius:999px; padding:6px 12px; }
.case-meta .button { align-self:start; }

@media (max-width:800px) {
  .showcase-grid { grid-template-columns:1fr; gap:44px; }
  .case-feature { grid-column:auto; }
  .case-feature .case-stage { max-width:none; }
  .mock-phone { width:min(280px,72%); }
}

/* about */
.about-image { height:520px; border-radius:var(--radius); overflow:hidden; }
.about-image img { height:100%; }
.values { display:grid; grid-template-columns:1fr 1fr; gap:0 52px; }
.value { padding:27px 0; border-top:1px solid var(--line); }
.value p { color:var(--muted); font-size:14px; margin:0; }
.promise { background:var(--ink); color:white; }
.promise .lead { color:#c8d7cc; }
.promise-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:45px; margin-top:52px; }
.promise-grid p { color:#c8d7cc; font-size:14px; }
.promise-grid span { color:var(--coral); font:500 12px 'DM Mono',monospace; }
/* contact */
.contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:72px; align-items:start; }
.contact-details { border-top:1px solid var(--line); }
.contact-detail { padding:20px 0; border-bottom:1px solid var(--line); }
.contact-detail span { display:block; color:var(--muted); font-size:12px; margin-bottom:3px; }
.contact-detail a { font-weight:700; }
.contact-form { background:#f0f2eb; padding:38px; border-radius:var(--radius); }
.field { margin-bottom:19px; }
.field label { display:block; font-size:12px; font-weight:700; margin-bottom:7px; }
.field input,.field textarea,.field select { width:100%; border:1px solid #cbd6cc; background:#fbfcf9; border-radius:10px; padding:13px 14px; color:var(--ink); outline:none; }
.field textarea { min-height:116px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus { border-color:var(--coral); box-shadow:0 0 0 3px rgba(215,120,98,.15); }
.form-status { margin-top:14px; color:var(--leaf); font-size:13px; display:none; }
.form-status.show { display:block; }
.map-placeholder { margin-top:70px; min-height:270px; background:linear-gradient(135deg,#c6d7cf,#e9e6d7); border-radius:var(--radius); display:grid; place-items:center; text-align:center; padding:30px; }
.map-placeholder div { background:rgba(251,250,245,.9); padding:18px 22px; border-radius:14px; }
.map-placeholder strong { display:block; }
@media (prefers-reduced-motion:no-preference) { .reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease,transform .65s ease; } .reveal.visible { opacity:1; transform:none; } }
@media (max-width:800px) { .nav-links { display:none; position:absolute; top:72px; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line); padding:18px 20px 24px; flex-direction:column; align-items:start; gap:17px; } .nav-links.open { display:flex; } .menu-toggle { display:block; } .nav .button,.nav .mq-btn { display:none; } .hero { grid-template-columns:1fr; gap:24px; padding-top:45px; } .hero-visual { min-height:390px; } .trust-line,.intro-grid,.contact-grid { grid-template-columns:1fr; gap:35px; } .trust-logos { font-size:14px; } section { padding:78px 0; } .service-strip { grid-template-columns:1fr; } .service-strip a { min-height:150px; border-right:0; border-bottom:1px solid var(--line); } .service-strip h3 { margin-top:32px; } .stat-panel,.promise-grid { grid-template-columns:1fr; gap:25px; } .stat-panel div { border-left:0; border-top:1px solid rgba(255,255,255,.25); padding:20px 0 0; } .stat-panel div:first-child { border:0; padding-top:0; } .work-grid { grid-template-columns:1fr; } .cta-band .container { display:block; } .cta-band .button { margin-top:24px; } .footer-grid { grid-template-columns:1fr 1fr; gap:35px; } .footer-grid > :first-child { grid-column:span 2; } .service-row { grid-template-columns:54px 1fr auto; gap:14px; } .service-row p { grid-column:2/4; } .process-grid { grid-template-columns:1fr 1fr; } .about-image { height:360px; } .values { grid-template-columns:1fr; } .contact-form { padding:25px; } }
@media (max-width:480px) { .container { width:min(100% - 32px,1180px); } h1 { font-size:3.3rem; } .hero-visual { min-height:340px; } .trust-logos { gap:15px; overflow:hidden; } .trust-logos span:last-child { display:none; } .footer-grid { grid-template-columns:1fr; } .footer-grid > :first-child { grid-column:auto; } .footer-bottom { display:block; } .footer-bottom span+span { display:block; margin-top:7px; } .process-grid { grid-template-columns:1fr; } }

/* Home evolution: luminous editorial direction */
.nav-links .nav-tarifs { margin-left:5px; }
.premium-cta { position:relative; overflow:hidden; box-shadow:0 10px 26px rgba(22,60,54,.14); }
.premium-cta:before { content:""; position:absolute; inset:0; background:var(--coral); transform:translateX(-101%); transition:transform .38s ease; z-index:0; }
.premium-cta > *,.premium-cta { isolation:isolate; }
.premium-cta span { position:relative; z-index:1; transition:transform .28s ease; }
.premium-cta:hover:before { transform:translateX(0); }
.premium-cta:hover span { transform:translate(2px,-2px); }
.hero-reimagined { position:relative; overflow:visible; }
/* Décor fluide ambiant du hero (canvas recoloré aux teintes marque),
   subtil et derrière le contenu. Voir [data-fluid] dans script.js. */
/* Décor fluide fixe : couvre tout l'écran, derrière le contenu, et suit le
   curseur sur toute la page (voir [data-fluid] dans script.js). */
.hero-fluid { position:fixed; inset:0; width:100vw; height:100vh; z-index:-1; opacity:.5; pointer-events:none; mix-blend-mode:multiply; filter:blur(2px); }
.hero-reimagined .hero-visual { isolation:isolate; }
.light-orbit { position:absolute; border:1px solid rgba(215,120,98,.58); border-radius:50%; z-index:-1; }
.orbit-one { width:285px; height:285px; top:-55px; right:-58px; }
.orbit-two { width:155px; height:155px; bottom:-42px; left:-61px; border-color:rgba(111,158,154,.7); }
.orbit-one:after,.orbit-two:after { content:""; position:absolute; width:13px; height:13px; background:var(--coral); border-radius:50%; top:20px; left:21px; box-shadow:0 0 0 8px rgba(215,120,98,.13); }
.orbit-two:after { background:var(--lagoon); box-shadow:0 0 0 8px rgba(111,158,154,.13); top:auto; left:auto; right:15px; bottom:29px; }
.hero-contact { display:flex; align-items:stretch; gap:10px; margin-top:30px; }
.dorbi-slot,.phone-link { border:1px solid var(--line); border-radius:12px; padding:12px 14px; min-height:63px; display:flex; flex-direction:column; justify-content:center; }
.dorbi-slot { background:rgba(157,182,165,.12); min-width:135px; }
.dorbi-slot span,.phone-link span { color:var(--muted); font:500 10px 'DM Mono',monospace; letter-spacing:.03em; }
.dorbi-slot strong,.phone-link strong { font-size:12px; letter-spacing:-.025em; }
.phone-link { transition:background .2s,transform .2s; }
.phone-link:hover { background:var(--sand); transform:translateY(-2px); }
/* ===========================================================
   Tablette animée au défilement — portage vanilla du composant
   React « ContainerScroll » (Aceternity). Le cadre bascule de
   rotateX(20deg) vers 0 et se met à l’échelle au fil du scroll.
   Transformations pilotées par script.js (variables CSS).
   =========================================================== */
.tablet-scroll { position:relative; width:100%; perspective:1200px; }
.tablet-frame { transform-origin:50% 50%; transform-style:preserve-3d; will-change:transform; transform:rotateX(7deg); padding:12px; border:4px solid #6c6c6c; border-radius:30px; background:#222; box-shadow:0 9px 20px rgba(0,0,0,.29),0 37px 37px rgba(0,0,0,.26),0 84px 50px rgba(0,0,0,.15),0 149px 60px rgba(0,0,0,.04); }
.tablet-screen { position:relative; aspect-ratio:16/10; border-radius:18px; overflow:hidden; background:var(--paper); }
.tablet-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; }
@media (max-width:800px) { .tablet-frame { padding:9px; border-width:3px; border-radius:24px; } .tablet-screen { border-radius:14px; } }

.statement-section { padding-bottom:85px; }
.text-link { display:inline-flex; gap:10px; font-size:13px; font-weight:800; margin-top:10px; border-bottom:1px solid var(--coral); padding-bottom:4px; }
.text-link span { color:var(--coral); transition:transform .2s; }
.text-link:hover span { transform:translateX(4px); }
/* ===========================================================
   Galerie courbée « coverflow » (accueil) — inspirée du composant
   CircularGallery (OGL/WebGL), mais en CSS 3D pour afficher les
   sites RÉELS en direct (WebGL ne peut pas peindre un site
   cross-origin). Défilement piloté par l'utilisateur : glisser,
   molette horizontale, flèches clavier. Positions calculées dans
   script.js (translateX + rotateY + translateZ selon l'écart au
   centre, avec bouclage sans fin sur 5 cartes).
   =========================================================== */
/* Fond vert fondu vers le crème (--paper) en haut et en bas : évite la
   ligne franche avec les sections voisines. */
/* Fond transparent : laisse voir le décor fluide fixe qui traverse la page. */
.home-showcase { background:transparent; overflow:hidden; }
.coverflow { position:relative; height:600px; margin-top:24px; perspective:1600px; overflow:hidden; cursor:grab; touch-action:pan-y; -webkit-user-select:none; user-select:none; }
.coverflow:active { cursor:grabbing; }
.coverflow:focus-visible { outline:3px solid var(--coral); outline-offset:-3px; }
.cw-track { position:absolute; inset:0; transform-style:preserve-3d; }
.cw-card { position:absolute; top:50%; left:50%; width:232px; text-decoration:none; transform-origin:center center; will-change:transform; transition:transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s ease; }
.coverflow.is-dragging .cw-card { transition:none; }
.cw-card .mock-phone { width:232px; margin:0; box-shadow:0 2px 4px rgba(0,0,0,.3),0 30px 60px rgba(22,60,54,.34),inset 0 0 0 2px #3a3a3f; }
.cw-card .mock-screen { border-radius:30px; }
.cw-hint { position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:60; margin:0; display:inline-flex; align-items:center; gap:8px; background:rgba(22,60,54,.9); color:#fff; font-size:12px; font-weight:800; letter-spacing:-.01em; padding:9px 16px; border-radius:999px; pointer-events:none; box-shadow:0 10px 26px rgba(22,60,54,.28); }
.cw-hint span { color:var(--sage); }
.cw-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:30px; }
.cw-caption { margin:0; font-weight:800; letter-spacing:-.035em; font-size:21px; }
.experience-band { padding-top:0; }
/* Animations du hero (tablette 3D flottante + ronds animés/pulsés).
   Forcées avec !important pour rester actives même si l'utilisateur a
   « réduire les animations » activé (demande explicite du client) — sinon
   la règle globale de réduction de mouvement les neutraliserait. */
.tablet-frame { animation:tablet-float 8s ease-in-out infinite !important; }
.orbit-one { animation:slow-orbit 12s linear infinite !important; }
.orbit-two { animation:slow-orbit 15s linear infinite reverse !important; }
.orbit-one:after { animation:orbit-pulse 3.2s ease-in-out infinite !important; }
.orbit-two:after { animation:orbit-pulse 3.2s ease-in-out 1s infinite !important; }
@keyframes slow-orbit { to { transform:rotate(360deg); } }
@keyframes tablet-float {
  0%,100% { transform:translateY(0) rotateX(9deg) rotateY(-5deg); }
  50%     { transform:translateY(-18px) rotateX(3deg) rotateY(5deg); }
}
@keyframes orbit-pulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.55); opacity:.55; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }
@media (max-width:800px) { .nav-links .nav-tarifs { margin-left:0; } .hero-contact { max-width:420px; } .coverflow { height:520px; } .cw-card,.cw-card .mock-phone { width:206px; } .cw-footer { display:block; } .cw-footer .button { margin-top:18px; } }
@media (max-width:480px) { .hero-contact { display:grid; grid-template-columns:1fr; } .phone-link { min-height:58px; } .coverflow { height:470px; } .cw-card,.cw-card .mock-phone { width:184px; } }

/* Services: high-value editorial layout */
.service-hero { padding:105px 0 90px; background:linear-gradient(115deg,var(--paper) 55%,#e5eee7); overflow:hidden; }
.service-hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:end; }
.service-hero h1 { margin-bottom:25px; }
.service-hero h1 span { color:var(--coral); }
.service-promise { padding:34px; border:1px solid var(--line); border-radius:var(--radius); background:rgba(251,250,245,.75); box-shadow:18px 18px 0 rgba(157,182,165,.23); }
.service-promise > span { display:block; color:var(--coral); font:500 10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.09em; margin-bottom:22px; }
.service-promise strong { display:block; font-size:clamp(1.4rem,2.2vw,2rem); line-height:1.13; letter-spacing:-.055em; }
.service-promise p { color:var(--muted); font-size:14px; margin:17px 0 0; }
/* ===========================================================
   Maquette offerte — façade minimaliste premium (services.html).
   Beaucoup d'espace, hiérarchie nette, bouton accent corail avec
   éclat de particules au clic (portage vanilla de ParticleButton).
   =========================================================== */
.offer48 { scroll-margin-top:90px; }
.o48-card { position:relative; overflow:hidden; max-width:820px; margin:auto; text-align:center; padding:clamp(54px,8vw,100px) clamp(28px,6vw,84px); background:linear-gradient(180deg,#fdfaf3,var(--paper)); border:1px solid var(--line); border-radius:28px; box-shadow:0 40px 90px rgba(22,60,54,.07); }
/* fin filet corail centré en haut : détail premium discret */
.o48-card:before { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:72px; height:3px; border-radius:0 0 4px 4px; background:linear-gradient(90deg,#e08a6f,#c15f45); }
.o48-eyebrow { display:inline-flex; align-items:center; gap:12px; color:var(--coral); font:500 11px 'DM Mono',monospace; letter-spacing:.2em; text-transform:uppercase; margin:0 0 26px; }
.o48-eyebrow:before,.o48-eyebrow:after { content:""; width:22px; height:1px; background:rgba(215,120,98,.45); }
.o48-title { font-size:clamp(2rem,3.9vw,3.1rem); line-height:1.06; letter-spacing:-.05em; font-weight:800; margin:0 auto 22px; max-width:17ch; }
.o48-sub { color:var(--muted); font-size:clamp(1.05rem,1.7vw,1.34rem); line-height:1.5; letter-spacing:-.01em; margin:0 0 44px; }
.o48-cta { position:relative; display:inline-flex; align-items:center; gap:11px; min-height:58px; padding:0 34px; border:0; border-radius:999px; background:linear-gradient(135deg,#e08a6f,#c96143); color:#fff; font-size:15px; font-weight:800; letter-spacing:-.01em; cursor:pointer; box-shadow:0 16px 34px rgba(201,97,67,.36); transition:transform .2s ease,box-shadow .25s ease,filter .25s ease; }
.o48-cta:hover { transform:translateY(-3px); filter:brightness(1.05); box-shadow:0 22px 44px rgba(201,97,67,.46); }
.o48-cta.is-pop { transform:scale(.95); }
.o48-cta-ico { display:inline-flex; transition:transform .25s ease; }
.o48-cta:hover .o48-cta-ico { transform:translateX(4px); }
.o48-cta-ico svg { width:17px; height:17px; display:block; }
.o48-meta { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:14px 30px; padding:30px 0 0; margin:40px auto 0; max-width:560px; border-top:1px solid var(--line); }
.o48-meta li { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; font-weight:600; letter-spacing:-.01em; }
.o48-meta svg { width:15px; height:15px; color:var(--coral); flex:none; }
/* Particules de clic */
.o48-particle { position:fixed; width:7px; height:7px; border-radius:50%; pointer-events:none; z-index:200; will-change:transform,opacity; }
@media (max-width:600px) {
  .o48-cta { width:100%; justify-content:center; }
  .o48-meta { gap:14px 22px; }
}

/* --- Configurateur (modal QCM) --- */
.quiz { --q-ivory:#f7f3ea; --q-beige:#e9e1d1; --q-olive:#6d7150; --q-terra:#c26a48; --q-bronze:#a97c50; --q-dark:#2c2a24; --q-muted:#8c8471; }
.quiz[hidden] { display:none; }
.quiz { position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:18px; }
.quiz-backdrop { position:absolute; inset:0; background:rgba(38,32,22,.55); backdrop-filter:blur(6px); opacity:0; transition:opacity .3s ease; }
.quiz.is-open .quiz-backdrop { opacity:1; }
.quiz-modal { position:relative; width:min(660px,100%); max-height:calc(100dvh - 36px); overflow:auto; background:var(--q-ivory); color:var(--q-dark); border-radius:26px; padding:24px clamp(20px,4vw,34px) 28px; box-shadow:0 44px 100px rgba(38,32,22,.4); transform:translateY(26px) scale(.98); opacity:0; transition:transform .38s cubic-bezier(.2,.7,.2,1),opacity .38s ease; }
.quiz.is-open .quiz-modal { transform:none; opacity:1; }
.quiz-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.quiz-head-end { justify-content:flex-end; }
.quiz-brand { display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:-.03em; font-size:15px; color:var(--q-dark); }
.quiz-brand .logo-mark { background:var(--q-terra); }
.quiz-brand .logo-mark:after { border-color:var(--q-dark); }
.quiz-close { border:0; background:#fff; width:38px; height:38px; border-radius:50%; font-size:15px; color:var(--q-dark); cursor:pointer; box-shadow:0 4px 12px rgba(38,32,22,.1); transition:transform .2s,background .2s; }
.quiz-close:hover { transform:rotate(90deg); background:var(--q-beige); }
.quiz-progress { height:7px; border-radius:999px; background:var(--q-beige); overflow:hidden; }
.quiz-bar { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--q-terra),var(--q-bronze)); border-radius:999px; transition:width .45s cubic-bezier(.2,.7,.2,1); }
.quiz-meta { margin:10px 0 20px; font:500 11px 'DM Mono',monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--q-muted); }
.quiz-q { font-size:clamp(1.35rem,3.2vw,1.95rem); line-height:1.12; letter-spacing:-.04em; margin:0 0 6px; }
.quiz-sub { color:var(--q-muted); font-size:14px; margin:0 0 22px; }
.quiz-view { animation:quiz-in .4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes quiz-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.quiz-opts { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.quiz-opt { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:17px 18px; border:1.5px solid var(--q-beige); background:#fff; border-radius:16px; cursor:pointer; font-size:15px; font-weight:600; color:var(--q-dark); transition:border-color .2s,background .2s,transform .2s,box-shadow .2s; }
.quiz-opt:hover { border-color:var(--q-olive); transform:translateY(-2px); box-shadow:0 10px 22px rgba(38,32,22,.08); }
.quiz-opt.is-selected { border-color:var(--q-terra); background:linear-gradient(#fff,#fbf3ec); box-shadow:0 8px 22px rgba(194,106,72,.16); }
.quiz-opt > span:first-child { flex:1; }
.quiz-check { flex:none; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--q-beige); display:grid; place-items:center; font-size:12px; color:transparent; transition:.2s; }
.quiz-opt.is-selected .quiz-check { background:var(--q-terra); border-color:var(--q-terra); color:#fff; }
.quiz-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.quiz-field { display:flex; flex-direction:column; gap:6px; }
.quiz-field.full { grid-column:1/-1; }
.quiz-field label { font-size:12px; font-weight:700; color:var(--q-olive); }
.quiz-field input { padding:14px 15px; border:1.5px solid var(--q-beige); border-radius:12px; background:#fff; font:inherit; font-size:15px; color:var(--q-dark); outline:none; transition:border-color .2s,box-shadow .2s; }
.quiz-field input:focus { border-color:var(--q-terra); box-shadow:0 0 0 3px rgba(194,106,72,.15); }
.quiz-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:26px; }
.quiz-back { background:none; border:0; color:var(--q-olive); font-weight:700; font-size:14px; cursor:pointer; padding:10px 6px; transition:opacity .2s; }
.quiz-back:disabled { opacity:0; pointer-events:none; }
.quiz-next { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 30px; border:0; border-radius:999px; background:var(--q-olive); color:#fff; font-weight:800; font-size:15px; text-decoration:none; cursor:pointer; box-shadow:0 12px 28px rgba(109,113,80,.32); transition:transform .2s,box-shadow .2s,background .2s,opacity .2s; }
.quiz-next:hover { transform:translateY(-2px); box-shadow:0 16px 34px rgba(109,113,80,.4); }
.quiz-next:disabled { opacity:.4; pointer-events:none; box-shadow:none; }
.quiz-next.is-final { background:linear-gradient(135deg,#c86b47,#a97c50); box-shadow:0 14px 32px rgba(169,124,80,.4); }
.quiz-done { text-align:center; padding:14px 0 6px; }
.quiz-badge { width:74px; height:74px; border-radius:50%; margin:0 auto 22px; display:grid; place-items:center; font-size:32px; color:#fff; background:linear-gradient(135deg,var(--q-terra),var(--q-bronze)); box-shadow:0 16px 34px rgba(169,124,80,.4); }
.quiz-done h3 { font-size:clamp(1.7rem,4vw,2.2rem); letter-spacing:-.04em; margin:0 0 12px; }
.quiz-done p { color:var(--q-muted); max-width:46ch; margin:0 auto 26px; font-size:15px; line-height:1.6; }
body.quiz-open { overflow:hidden; }
/* ===========================================================
   Tarifs — direction premium sombre (adaptation vanilla d'un
   PricingSection : fond sombre, glow, sparkles, bascule 1×/3×
   avec prix animé, cartes avec animation au survol).
   Palette Kreony : ink profond + accents corail / sauge.
   =========================================================== */
.pricing-x { position:relative; overflow:hidden; background:radial-gradient(120% 90% at 50% 0%,#164039,#0e2a24 60%,#0b221d); color:#f4f1e8; padding:110px 0 96px; }
.px-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:64px 66px; -webkit-mask-image:radial-gradient(70% 55% at 50% 0%,#000,transparent); mask-image:radial-gradient(70% 55% at 50% 0%,#000,transparent); pointer-events:none; }
.px-glow { position:absolute; top:-24%; left:50%; transform:translateX(-50%); width:min(900px,92vw); height:560px; background:radial-gradient(circle,rgba(215,120,98,.5),transparent 62%); filter:blur(64px); pointer-events:none; }
.px-glow2 { position:absolute; bottom:-18%; left:16%; width:520px; height:420px; background:radial-gradient(circle,rgba(157,182,165,.32),transparent 66%); filter:blur(72px); pointer-events:none; }
.px-sparkles { position:absolute; inset:0; pointer-events:none; }
.px-sparkles span { position:absolute; width:3px; height:3px; border-radius:50%; background:#fff; opacity:.4; box-shadow:0 0 6px rgba(255,255,255,.6); animation:px-twinkle 3s ease-in-out infinite; }
@keyframes px-twinkle { 0%,100% { opacity:.12; transform:scale(.7); } 50% { opacity:.85; transform:scale(1.25); } }
/* Tracés animés en fond (portage vanilla de BackgroundPaths) : lignes courbes
   blanches à faible opacité qui « coulent » derrière le contenu. */
.px-paths { position:absolute; inset:0; z-index:1; pointer-events:none; }
.px-paths svg { width:100%; height:100%; display:block; }
.px-paths path { fill:none; stroke:#fff; stroke-linecap:round; stroke-dasharray:130 1720; animation-name:px-path-flow; animation-timing-function:linear; animation-iteration-count:infinite; }
@keyframes px-path-flow { to { stroke-dashoffset:-1850; } }
@media (prefers-reduced-motion:reduce) {
  .px-paths path { animation-name:px-path-flow !important; animation-duration:24s !important; animation-iteration-count:infinite !important; }
}
.px-head { position:relative; z-index:2; text-align:center; max-width:660px; margin:0 auto 8px; }
.px-eyebrow { color:var(--coral); font:500 11px 'DM Mono',monospace; letter-spacing:.14em; text-transform:uppercase; margin:0; }
.px-head h1 { color:#fff; font-size:clamp(2.1rem,4.8vw,3.4rem); line-height:1.06; letter-spacing:-.05em; margin:16px 0 14px; }
.px-head > p { color:#b9c9bd; font-size:16px; margin:0 auto; max-width:52ch; }
.px-toggle { position:relative; display:inline-flex; margin-top:28px; padding:5px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); }
.px-toggle-btn { position:relative; z-index:2; border:0; background:none; color:#c7d6cb; font-weight:700; font-size:13px; padding:10px 22px; border-radius:999px; cursor:pointer; transition:color .3s; }
.px-toggle-btn.is-active { color:#fff; }
.px-toggle-pill { position:absolute; z-index:1; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); border-radius:999px; background:linear-gradient(135deg,#d77862,#c96b4a); box-shadow:0 8px 20px rgba(215,120,98,.45); transition:transform .38s cubic-bezier(.2,.7,.2,1); }
.px-toggle[data-mode="three"] .px-toggle-pill { transform:translateX(100%); }
.px-grid-cards { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1040px; margin:46px auto 0; align-items:start; }
.px-card { position:relative; display:flex; flex-direction:column; border-radius:20px; padding:30px 28px; background:linear-gradient(165deg,#173029,#1c3d35); border:1px solid rgba(255,255,255,.09); overflow:hidden; transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,border-color .4s ease; }
.px-card:before { content:""; position:absolute; top:0; left:-70%; width:55%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.13),transparent); transform:skewX(-18deg); pointer-events:none; }
.px-card:hover { transform:translateY(-10px); border-color:rgba(215,120,98,.5); box-shadow:0 34px 64px rgba(0,0,0,.42); }
.px-card:hover:before { animation:px-sheen .85s ease; }
@keyframes px-sheen { from { left:-70%; } to { left:130%; } }
.px-card-popular { border-color:rgba(215,120,98,.5); box-shadow:0 0 0 1px rgba(215,120,98,.28),0 26px 60px rgba(215,120,98,.16); }
.px-card-popular:hover { box-shadow:0 0 0 1px rgba(215,120,98,.4),0 34px 74px rgba(215,120,98,.3); }
/* Pastille en flux au-dessus du titre (ne recouvre plus le nom). */
.px-badge { display:inline-block; align-self:flex-start; margin:0 0 14px; background:var(--coral); color:#fff; font:700 10px 'DM Mono',monospace; letter-spacing:.05em; text-transform:uppercase; padding:6px 11px; border-radius:999px; }
.px-name { font-size:26px; letter-spacing:-.04em; margin:0 0 14px; color:#fff; }
.px-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:2px; margin:0 0 6px; min-height:46px; }
.px-from { flex-basis:100%; color:#9db6a5; font:500 11px 'DM Mono',monospace; letter-spacing:.06em; text-transform:uppercase; margin-bottom:2px; }
.px-amount { font-size:44px; font-weight:800; letter-spacing:-.04em; color:#fff; line-height:1; }
.px-amount-text { font-size:30px; }
.px-cur { font-size:24px; font-weight:700; color:#fff; margin-left:3px; }
.px-period { color:#9db6a5; font-size:14px; margin-left:8px; }
.px-desc { color:#b3c5b9; font-size:14px; line-height:1.55; margin:14px 0 22px; }
.px-btn { display:block; text-align:center; padding:14px; border-radius:12px; font-weight:800; font-size:15px; text-decoration:none; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); transition:background .25s,transform .25s,box-shadow .25s,filter .25s; }
.px-btn:hover { background:rgba(255,255,255,.15); transform:translateY(-2px); }
.px-btn-popular { background:linear-gradient(135deg,#d77862,#c96b4a); border-color:transparent; box-shadow:0 12px 28px rgba(215,120,98,.42); }
.px-btn-popular:hover { filter:brightness(1.06); box-shadow:0 16px 34px rgba(215,120,98,.5); }
.px-features { list-style:none; padding:22px 0 0; margin:22px 0 0; border-top:1px solid rgba(255,255,255,.1); display:grid; gap:12px; }
.px-features li { display:flex; align-items:center; gap:11px; font-size:14px; color:#cdddd1; }
.px-dot { flex:none; width:20px; height:20px; border-radius:50%; background:rgba(157,182,165,.2); display:grid; place-items:center; color:#a9c3b3; }
.px-dot svg { width:11px; height:11px; }
.px-note { position:relative; z-index:2; text-align:center; color:#8fa89b; font-size:13px; max-width:560px; margin:42px auto 0; }
/* Animations des tarifs forcées même sous réduction de mouvement (demande client). */
@media (prefers-reduced-motion:reduce) {
  .px-card { transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,border-color .4s ease !important; }
  .px-btn { transition:background .25s,transform .25s,box-shadow .25s,filter .25s !important; }
  .px-toggle-btn { transition:color .3s !important; }
  .px-toggle-pill { transition:transform .38s cubic-bezier(.2,.7,.2,1) !important; }
  .px-card:hover:before { animation:px-sheen .85s ease !important; }
  .px-sparkles span { animation:px-twinkle 3s ease-in-out infinite !important; }
}
.pricing-faq { background:#f0f2eb; }.faq-list { border-top:1px solid var(--line); }
.faq-list details { border-bottom:1px solid var(--line); padding:0 4px; }.faq-list summary { list-style:none; cursor:pointer; font-size:17px; font-weight:800; letter-spacing:-.035em; padding:22px 0; display:flex; justify-content:space-between; gap:20px; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary span { color:var(--coral); font-size:25px; font-weight:400; }.faq-list details[open] summary span { transform:rotate(45deg); }.faq-list p { color:var(--muted); max-width:650px; padding-bottom:22px; margin:0; font-size:14px; }
@media (max-width:800px) { .service-hero-grid { grid-template-columns:1fr; gap:34px; } }
@media (max-width:480px) { .service-hero { padding:75px 0; }.service-promise { padding:25px; } }

/* Services : bandeau de preuves, offres, garanties incluses */
.svc-stats { list-style:none; margin:64px 0 0; padding:26px 0 0; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.svc-stats li { display:flex; flex-direction:column; gap:5px; }
.svc-stats strong { font-size:clamp(1.7rem,2.6vw,2.4rem); letter-spacing:-.06em; line-height:1; }
.svc-stats span { color:var(--muted); font-size:12px; max-width:150px; }
.service-offers { background:#f0f2eb; }
.offer-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
/* Cartes de prestations — animées (élévation + reflet, icône qui se remplit
   et pivote, index qui s'illumine, entrée échelonnée). */
.offer-card { position:relative; overflow:hidden; display:flex; flex-direction:column; padding:30px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,border-color .4s ease; }
.offer-card:before { content:""; position:absolute; top:0; left:-70%; width:55%; height:100%; background:linear-gradient(100deg,transparent,rgba(157,182,165,.22),transparent); transform:skewX(-18deg); pointer-events:none; }
.offer-card:hover { transform:translateY(-9px); box-shadow:0 26px 54px rgba(22,60,54,.15); border-color:var(--sage); }
.offer-card:hover:before { animation:px-sheen .85s ease; }
.offer-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.offer-icon { width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--sage); border-radius:14px; color:var(--leaf); background:rgba(157,182,165,.13); transition:transform .45s cubic-bezier(.2,.7,.2,1),background .4s ease,color .4s ease,border-color .4s ease,box-shadow .4s ease; }
.offer-card:hover .offer-icon { transform:translateY(-4px) rotate(-8deg) scale(1.1); background:linear-gradient(135deg,var(--leaf),var(--lagoon)); color:#fff; border-color:transparent; box-shadow:0 12px 24px rgba(28,81,71,.3); }
.offer-icon svg { width:22px; height:22px; }
.offer-index { color:var(--coral); font:500 12px 'DM Mono',monospace; transition:color .35s ease,letter-spacing .35s ease; }
.offer-card:hover .offer-index { color:var(--leaf); letter-spacing:.06em; }
.offer-card h3 { font-size:24px; margin-bottom:10px; transition:color .3s ease; }
.offer-card:hover h3 { color:var(--leaf); }
.offer-card > p { color:var(--muted); font-size:14px; }
@keyframes offer-in { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:no-preference) {
  .offer-card.reveal.visible { animation:offer-in .55s cubic-bezier(.2,.7,.2,1) both; }
  .offer-grid .offer-card:nth-child(2) { animation-delay:.09s; }
  .offer-grid .offer-card:nth-child(3) { animation-delay:.18s; }
  .offer-grid .offer-card:nth-child(4) { animation-delay:.27s; }
}
/* Animations de survol forcées même en réduction de mouvement (cohérent). */
@media (prefers-reduced-motion:reduce) {
  .offer-card { transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,border-color .4s ease !important; }
  .offer-icon { transition:transform .45s cubic-bezier(.2,.7,.2,1),background .4s ease,color .4s ease,border-color .4s ease,box-shadow .4s ease !important; }
  .offer-index,.offer-card h3 { transition:color .35s ease,letter-spacing .35s ease !important; }
  .offer-card:hover:before { animation:px-sheen .85s ease !important; }
}
.offer-list { list-style:none; padding:0; margin:20px 0 26px; display:grid; gap:9px; font-size:13px; font-weight:700; }
.offer-list li { padding-left:22px; position:relative; }
.offer-list li:before { content:''; position:absolute; left:0; top:2px; width:12px; height:12px; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d77862' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); }
.offer-foot { margin:auto 0 0; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.offer-foot span { color:var(--ink); font-weight:800; font-size:14px; letter-spacing:-.03em; }
@media (max-width:800px) {
  .svc-stats { grid-template-columns:1fr 1fr; gap:22px; margin-top:44px; }
  .offer-grid { grid-template-columns:1fr; }
  .pricing-x { padding:80px 0; }
  .px-grid-cards { grid-template-columns:1fr; gap:18px; max-width:460px; }
  .px-card:hover { transform:translateY(-5px); }
}
@media (max-width:480px) {
  .offer-card { padding:24px; }
  .quiz-opts { grid-template-columns:1fr; }
  .quiz-fields { grid-template-columns:1fr; }
  .px-card { padding:26px 22px; }
  .px-head h1 { font-size:2rem; }
}