/* ═══════════════════════════════════════════════════════════════════ PAGES DE SERVICE — feuille dédiée Chargée UNIQUEMENT par service-web / service-refonte / service-sur-mesure, après style.css dont elle réutilise les tokens (--red, --ink, --paper…). Pourquoi un fichier à part plutôt qu'un bloc de plus dans style.css : ce dernier fait ~6000 lignes où les règles d'un même composant sont dispersées, et trois régressions de cascade y sont déjà survenues. Ici tout ce qui concerne les trois pages tient dans un seul endroit. Préfixe `sv-` : namespace neuf, aucune collision avec les `svc-` de l'ancienne version des pages. ═══════════════════════════════════════════════════════════════════ */ /* -- Apparition au défilement ---------------------------------------- Neutralisée si l'utilisateur a demandé moins d'animations, et si le JS ne s'exécute pas : `[data-sa]` n'est stylé que lorsque la classe `js-sa` est posée sur par reveal.js. Sans ça, un blocage du script laisserait toute la page invisible. */ .js-sa [data-sa] { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .js-sa [data-sa].sa-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-sa [data-sa] { opacity: 1; transform: none; transition: none; } } /* ── EN-TÊTE DE PAGE ──────────────────────────────────────────────── Deux colonnes : le discours à gauche, le prix à droite. Le prix est isolé dans un encadré parce que c'est l'information que le visiteur cherche en premier et qu'aucune des trois pages ne l'affichait. */ .sv-hero { position: relative; padding: 132px 0 72px; background: linear-gradient(168deg, #f6f1ee 0%, var(--paper) 58%); border-bottom: 1px solid var(--border); overflow: hidden; } .sv-hero::after { content: ''; position: absolute; top: -180px; right: -140px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(180, 24, 36, .07), transparent 68%); pointer-events: none; } .sv-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 56px; align-items: start; } .sv-fil { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); margin: 0 0 22px; } .sv-fil a { color: var(--muted); text-decoration: none; } .sv-fil a:hover { color: var(--red); } .sv-fil span[aria-current] { color: var(--ink-2); font-weight: 550; } .sv-hero__eyebrow { display: inline-flex; align-items: center; gap: 11px; font-size: .72rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin-bottom: 16px; } .sv-hero__eyebrow::before { content: ''; width: 26px; height: 1px; background: rgba(180, 24, 36, .45); } .sv-hero h1 { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 650; line-height: 1.08; letter-spacing: -.035em; color: var(--ink); margin: 0 0 20px; } .sv-hero h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.06em; letter-spacing: -.01em; color: var(--red); } .sv-hero__lead { font-size: 1.05rem; line-height: 1.65; color: var(--ink-2); max-width: 56ch; margin: 0 0 26px; } .sv-hero__lead b { font-weight: 600; color: var(--ink); } .sv-hero__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; } .sv-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; font-size: .84rem; font-weight: 500; color: var(--ink-2); background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); } .sv-pill svg { color: var(--red); flex-shrink: 0; } .sv-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } /* -- Encadré du prix -- */ .sv-price { position: sticky; top: 96px; background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--red); border-radius: var(--r-lg); padding: 26px 24px; box-shadow: var(--sh-lg); } .sv-price__label { font-size: .72rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; } .sv-price__amount { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; } .sv-price__amount b { font-size: 2.5rem; font-weight: 650; letter-spacing: -.04em; color: var(--ink); line-height: 1; } .sv-price__amount span { font-size: .95rem; color: var(--muted); font-weight: 500; } .sv-price__note { font-size: .84rem; color: var(--muted); margin: 0 0 18px; } .sv-price__facts { list-style: none; padding: 18px 0 0; margin: 0 0 20px; border-top: 1px solid var(--border); display: grid; gap: 11px; } .sv-price__facts li { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-size: .88rem; color: var(--ink-2); line-height: 1.45; } .sv-price__facts svg { color: var(--red); margin-top: 2px; } .sv-price .btn { width: 100%; justify-content: center; } .sv-price__fine { font-size: .76rem; color: var(--muted); text-align: center; margin: 12px 0 0; line-height: 1.5; } /* ── SECTIONS ───────────────────────────────────────────────────────── */ .sv-sec { padding: 78px 0; } .sv-sec--paper { background: var(--paper); } .sv-sec--white { background: #fff; } .sv-sec--tint { background: var(--bg-subtle); } .sv-head { max-width: 680px; margin: 0 0 42px; } .sv-head--center { margin-inline: auto; text-align: center; } .sv-head__eyebrow { display: block; font-size: .72rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin-bottom: 13px; } .sv-head h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 650; line-height: 1.14; letter-spacing: -.03em; color: var(--ink); margin: 0 0 13px; } .sv-head h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.06em; color: var(--red); } .sv-head p { font-size: 1rem; line-height: 1.65; color: var(--muted); margin: 0; } /* ── À QUI ÇA S'ADRESSE ─────────────────────────────────────────────── */ .sv-who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .sv-who__card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px 22px; } .sv-who__num { display: block; font-family: var(--font-serif); font-size: 1.5rem; font-style: italic; color: var(--red); line-height: 1; margin-bottom: 12px; } .sv-who__card h3 { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 0 0 8px; letter-spacing: -.01em; } .sv-who__card p { font-size: .9rem; line-height: 1.6; color: var(--muted); margin: 0; } /* ── CE QUI EST LIVRÉ ─────────────────────────────────────────────── Le cœur de la page : la liste exacte des livrables, groupée. Elle reprend mot pour mot le détail affiché sur /tarifs — deux pages qui décrivent la même offre ne doivent pas énoncer deux choses. */ .sv-liv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .sv-liv__group { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px 24px; display: flex; flex-direction: column; } .sv-liv__icon { width: 38px; height: 38px; display: grid; place-items: center; background: var(--red-bg); border-radius: var(--r-md); color: var(--red); margin-bottom: 16px; } .sv-liv__group h3 { font-size: 1.02rem; font-weight: 600; color: var(--ink); letter-spacing: -.015em; margin: 0 0 16px; } .sv-liv__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .sv-liv__list li { display: grid; grid-template-columns: auto 1fr; gap: 11px; font-size: .91rem; line-height: 1.55; color: var(--ink-2); } .sv-liv__list svg { color: var(--red); margin-top: 3px; flex-shrink: 0; } .sv-liv__list b { font-weight: 600; color: var(--ink); } /* ── VALEUR AJOUTÉE ───────────────────────────────────────────────── Pendant de la section précédente : non plus ce qu'on livre, mais ce que ça change. Les deux sont volontairement séparées — les mélanger est ce qui rendait les anciennes pages confuses. */ .sv-val { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .sv-val__item { background: #fff; padding: 30px 28px; } .sv-val__k { display: block; font-family: var(--font-serif); font-size: 2rem; font-style: italic; color: var(--red); line-height: 1; margin-bottom: 14px; } .sv-val__item h3 { font-size: 1.05rem; font-weight: 600; color: var(--ink); letter-spacing: -.015em; margin: 0 0 9px; } .sv-val__item p { font-size: .93rem; line-height: 1.65; color: var(--muted); margin: 0; } /* ── DÉROULÉ ────────────────────────────────────────────────────────── */ .sv-etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; } .sv-etape { position: relative; padding-top: 26px; } .sv-etape::before { content: ''; position: absolute; top: 7px; left: 0; right: 0; height: 1px; background: var(--border); } .sv-etape::after { content: ''; position: absolute; top: 4px; left: 0; width: 7px; height: 7px; background: var(--red); border-radius: 50%; } .sv-etape__num { display: block; font-size: .72rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: 9px; } .sv-etape h3 { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 0 0 8px; letter-spacing: -.01em; } .sv-etape p { font-size: .89rem; line-height: 1.6; color: var(--muted); margin: 0; } .sv-etape__delai { display: inline-block; margin-top: 11px; font-size: .76rem; font-weight: 550; color: var(--ink-2); background: var(--bg-subtle); border-radius: var(--r-sm); padding: 4px 9px; } /* ── QUESTIONS ──────────────────────────────────────────────────────── */ .sv-faq { max-width: 780px; margin-inline: auto; border-top: 1px solid var(--border); } .sv-faq details { border-bottom: 1px solid var(--border); } .sv-faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-size: 1rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; } .sv-faq summary::-webkit-details-marker { display: none; } .sv-faq summary::after { content: ''; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: translateY(-70%) rotate(45deg); transition: transform .2s var(--ease); } .sv-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); } .sv-faq summary:hover { color: var(--red); } .sv-faq__a { padding: 0 40px 22px 0; font-size: .95rem; line-height: 1.7; color: var(--ink-2); margin: 0; } /* ── LES AUTRES OFFRES ────────────────────────────────────────────── Absente des anciennes pages : on arrivait sur un service sans jamais savoir que deux autres existaient. */ .sv-autres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .sv-autre { display: block; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px 24px 22px; text-decoration: none; transition: border-color var(--t) var(--ease), transform var(--t) var(--ease); } .sv-autre:hover { border-color: var(--red); transform: translateY(-2px); } .sv-autre__k { font-size: .72rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--red); } .sv-autre h3 { font-size: 1.15rem; font-weight: 600; color: var(--ink); letter-spacing: -.02em; margin: 9px 0 8px; } .sv-autre p { font-size: .91rem; line-height: 1.6; color: var(--muted); margin: 0 0 14px; } .sv-autre__go { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 600; color: var(--red); } .sv-autre__go span { font-weight: 500; color: var(--muted); } /* ── APPEL À L'ACTION FINAL ─────────────────────────────────────────── */ .sv-cta { background: var(--ink); padding: 74px 0; text-align: center; color: #fff; } .sv-cta h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 650; letter-spacing: -.03em; line-height: 1.15; margin: 0 0 14px; color: #fff; } .sv-cta h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.06em; color: var(--rose); } .sv-cta p { font-size: 1rem; color: rgba(255, 255, 255, .72); margin: 0 auto 28px; max-width: 52ch; line-height: 1.65; } .sv-cta__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .sv-cta__ghost { display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .3); color: #fff; text-decoration: none; border-radius: var(--r-md); padding: 14px 26px; font-weight: 550; font-size: .95rem; transition: background var(--t) var(--ease), border-color var(--t) var(--ease); } .sv-cta__ghost:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .55); } /* ── CAPTURE PRODUIT ───────────────────────────────────────────────── Une vraie capture de l'application, presentee dans un cadre de navigateur. Le cadre n'est pas decoratif : il dit que ce qu'on montre est une PAGE, pas une maquette — c'est exactement la question que se pose le visiteur devant une capture d'interface. */ .sv-shot { max-width: 780px; margin: 0 auto; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: #fff; box-shadow: 0 24px 60px rgba(34, 30, 26, .14); } .sv-shot__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--bg-subtle); border-bottom: 1px solid var(--border); } .sv-shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d6d0c6; flex-shrink: 0; } .sv-shot__bar span { margin-left: 10px; padding: 3px 12px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--border); font-size: .74rem; color: var(--muted); /* Coupe plutot que retour a la ligne : une barre d'adresse sur deux lignes n'existe dans aucun navigateur, et le cadre cesserait d'etre credible. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sv-shot img { display: block; width: 100%; height: auto; } .sv-shot figcaption { padding: 16px 22px 20px; border-top: 1px solid var(--border); font-size: .88rem; line-height: 1.6; color: var(--muted); } .sv-shot figcaption b { color: var(--ink); font-weight: 600; } @media (max-width: 560px) { .sv-shot__bar span { display: none; } } /* ── FORMULES ──────────────────────────────────────────────────────── Trois paliers cote a cote. `.sv-autres` ne pouvait pas servir : c'est une grille a DEUX colonnes destinee aux renvois croises entre offres, pas un tableau tarifaire. Ce bloc n'est utilise que par la page reservation. ⚠️ Les prix affiches sont ceux du CATALOGUE par defaut de l'application (lib/modules.ts). Le super-admin peut les surcharger en base (platform_settings.pricing) : si les tarifs bougent la-bas, cette page ne le sait pas — il faut la mettre a jour a la main. */ /* `align-items` reste sur son defaut `stretch` — et c'est le point. Avec `start`, chaque carte se dimensionne a son contenu : les trois listes de modules n'ayant pas la meme longueur, le `margin-top: auto` du bouton n'avait rien contre quoi pousser et les trois CTA finissaient a trois hauteurs differentes. */ .sv-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .sv-plan { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px 24px 24px; transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease); } .sv-plan:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(34, 30, 26, .1); } /* Le palier conseille se signale par un filet, pas par un fond teinte : sur trois cartes alignees, une seule coloree deseequilibre la rangee. ⚠️ `padding-top` reduit de 2px : le filet en fait 3 la ou les voisines en ont 1, et sans cette compensation tout le contenu de cette carte — nom, prix, modules — descend de 2px par rapport aux deux autres. */ .sv-plan--feat { border-color: rgba(180, 24, 36, .3); border-top: 3px solid var(--red); padding-top: 24px; } .sv-plan__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sv-plan__name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); } .sv-plan__tag { padding: 4px 10px; border-radius: var(--r-sm); background: var(--red); color: #fff; font-size: .64rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; } .sv-plan__price { display: flex; align-items: baseline; gap: 6px; margin-top: 14px; font-family: var(--font-display); font-size: 2.3rem; font-weight: 800; line-height: 1; letter-spacing: -.035em; color: var(--red); } .sv-plan__price span { font-family: var(--font); font-size: .84rem; font-weight: 550; letter-spacing: 0; color: var(--muted); } .sv-plan__year { margin-top: 8px; font-size: .8rem; color: var(--muted); } .sv-plan__mods { margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; list-style: none; } .sv-plan__mods li { display: flex; align-items: flex-start; gap: 9px; } .sv-plan__mods svg { flex-shrink: 0; margin-top: 4px; color: var(--red); } .sv-plan__mods b { display: block; font-size: .9rem; font-weight: 600; color: var(--ink); } .sv-plan__mods span span { display: block; font-size: .82rem; line-height: 1.5; color: var(--muted); } .sv-plan__cta { margin-top: auto; padding-top: 22px; } .sv-plan__cta .btn { width: 100%; justify-content: center; } /* ── ADAPTATIF ──────────────────────────────────────────────────────── */ @media (max-width: 1000px) { .sv-hero__inner { grid-template-columns: 1fr; gap: 38px; } .sv-price { position: static; max-width: 420px; } .sv-liv, .sv-who { grid-template-columns: 1fr; } .sv-plans { grid-template-columns: 1fr; } .sv-etapes { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; } } @media (max-width: 720px) { .sv-hero { padding: 112px 0 56px; } .sv-sec { padding: 58px 0; } .sv-val { grid-template-columns: 1fr; } .sv-autres { grid-template-columns: 1fr; } .sv-hero__actions .btn { width: 100%; justify-content: center; } } @media (max-width: 520px) { .sv-etapes { grid-template-columns: 1fr; } .sv-price { padding: 22px 20px; } .sv-liv__group, .sv-who__card, .sv-plan { padding: 22px 20px; } .sv-val__item { padding: 24px 22px; } }