/* ========================================================= Luzera - feuille de styles Mobile d'abord · aucune police externe · aucun framework Accent : « Tuile » par défaut. Variante « Pétrole » : ========================================================= */ /* ---------- 1. Jetons (tokens) ---------- */ :root { /* Neutres */ --c-bg: #fdfdfc; /* fond de page (blanc cassé, jamais #fff pur) */ --c-surface: #f5f5f2; /* grands panneaux, cartes pleines */ --c-surface-2: #ebebe7; /* aplats dans les maquettes d'écran */ --c-line: #e4e4e0; /* séparateurs décoratifs */ --c-field: #86868b; /* bordure des champs (3,6:1 sur blanc) */ --c-ink: #1d1d1f; /* texte principal */ --c-ink-2: #5e5e63; /* texte secondaire (6,4:1 blanc · 5,9:1 surface) */ /* Accent « Tuile » (terre cuite des toits nîmois) */ --c-accent: #b9400c; /* boutons, liens, prix mis en avant */ --c-accent-strong: #9a3309; /* survol, texte sur fond teinté */ --c-accent-soft: #fbeee6; /* fonds teintés */ --c-on-accent: #ffffff; --c-focus: #1d1d1f; --c-screen: #ffffff; /* fond des écrans dessinés */ --c-screen-bar: #fafaf8; --c-mark: #fff2c4; /* surlignage « à compléter » */ --c-bezel: #1d1d1f; /* contour du téléphone dessiné */ --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%239a3309' d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); /* Typographie : police système (SF Pro sur Apple, Segoe UI sur Windows) */ --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --fs-display: clamp(2.5rem, 1.2rem + 5.4vw, 4.75rem); --fs-h2: clamp(2rem, 1.3rem + 2.8vw, 3.25rem); --fs-h3: 1.375rem; --fs-lead: clamp(1.125rem, 1rem + .5vw, 1.375rem); --fs-body: 1.0625rem; --fs-small: .875rem; /* Rayons */ --r-sm: 12px; /* champs, petites vignettes */ --r-md: 20px; /* cartes */ --r-lg: 32px; /* grands panneaux, visuels */ --r-pill: 999px;/* boutons, badges */ /* Espacements (base 4) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-section: clamp(64px, 3rem + 5vw, 120px); --gutter: clamp(20px, 4vw, 40px); --container: 1120px; /* Ombre : réservée aux écrans dessinés (le produit) */ --shadow-screen: 0 1px 2px rgba(29,29,31,.06), 0 16px 40px rgba(29,29,31,.10); } html[data-accent="petrole"] { --c-accent: #0d6b68; --c-accent-strong: #0a5552; --c-accent-soft: #e4f0ee; --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%230a5552' d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); } /* Mode sombre : suit le réglage de l'appareil. Contrastes vérifiés (AA ou mieux). */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --c-bg: #141415; --c-surface: #1e1e20; --c-surface-2: #2a2a2d; --c-line: #2e2e31; --c-field: #7a7a80; /* 4,3:1 sur le fond */ --c-ink: #f2f2ef; --c-ink-2: #a8a8ad; /* 7,8:1 sur le fond */ --c-accent: #e8804f; /* tuile éclaircie, 6,7:1 sur le fond */ --c-accent-strong: #f3a47e; --c-accent-soft: #3a241a; --c-on-accent: #141415; /* texte sombre sur bouton tuile */ --c-focus: #f2f2ef; --c-screen: #1a1a1c; --c-screen-bar: #202023; --c-mark: #4a3f14; --c-bezel: #3a3a3d; --shadow-screen: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.45); --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23f3a47e' d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); } html[data-accent="petrole"] { --c-accent: #4fb8b3; --c-accent-strong: #7fd0cc; --c-accent-soft: #15302f; --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%237fd0cc' d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); } } /* ---------- 2. Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--c-bg); color: var(--c-ink); font: 400 var(--fs-body)/1.55 var(--font); -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } h1, h2, h3, p, ul, ol, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: var(--c-accent); text-underline-offset: .18em; } a:hover { color: var(--c-accent-strong); } :focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; border-radius: 6px; } [id] { scroll-margin-top: 80px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 100; background: var(--c-ink); color: var(--c-bg); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); } .skip-link:focus { top: var(--s-4); color: var(--c-bg); } .container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; } .section { padding-block: var(--s-section); } .section--surface { background: var(--c-surface); } /* Titres */ .display { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -.035em; font-weight: 700; text-wrap: balance; } .h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; } .h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.015em; font-weight: 650; } .lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--c-ink-2); text-wrap: pretty; } .kicker { color: var(--c-accent); font-weight: 600; font-size: var(--fs-body); margin-bottom: var(--s-3); } .muted { color: var(--c-ink-2); } .small { font-size: var(--fs-small); } .section-head { max-width: 760px; margin-bottom: var(--s-7); } .section-head .lead { margin-top: var(--s-4); } .section-head--center { margin-inline: auto; text-align: center; } /* ---------- 3. Boutons & liens ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 48px; padding: 12px 24px; border-radius: var(--r-pill); font: 600 var(--fs-body)/1.2 var(--font); text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: background-color .15s, color .15s, border-color .15s, transform .1s; } .btn:active { transform: translateY(1px); } /* retour tactile à l'appui */ .btn svg { width: 18px; height: 18px; flex: none; } .btn--primary { background: var(--c-accent); color: var(--c-on-accent); } .btn--primary:hover { background: var(--c-accent-strong); color: var(--c-on-accent); } .btn--secondary { background: var(--c-bg); color: var(--c-ink); border-color: var(--c-field); } .btn--secondary:hover { border-color: var(--c-ink); color: var(--c-ink); } .btn--dark { background: var(--c-ink); color: var(--c-bg); } .btn--dark:hover { background: color-mix(in srgb, var(--c-ink) 82%, var(--c-bg)); color: var(--c-bg); } .btn--small { min-height: 40px; padding: 8px 18px; font-size: .9375rem; } .btn--block { width: 100%; } .link-arrow { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; text-decoration: none; } .project .link-arrow { align-self: flex-start; } /* zone cliquable limitée au texte, pas à toute la carte */ .link-arrow svg { width: 16px; height: 16px; transition: transform .15s; } .link-arrow:hover { text-decoration: underline; } .link-arrow:hover svg { transform: translateX(2px); } .badge { display: inline-block; padding: 4px 12px; border-radius: var(--r-pill); background: var(--c-accent-soft); color: var(--c-accent-strong); font-size: var(--fs-small); font-weight: 600; line-height: 1.4; } /* ---------- 4. En-tête ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--c-bg) 96%, transparent); border-bottom: 1px solid transparent; transition: border-color .2s; } .site-header.is-scrolled { border-bottom-color: var(--c-line); } .site-header__inner { display: flex; align-items: center; gap: var(--s-4); height: 64px; } .logo { font-size: 1.375rem; font-weight: 700; letter-spacing: -.03em; color: var(--c-ink); text-decoration: none; margin-right: auto; } .logo:hover { color: var(--c-ink); } .logo__dot { color: var(--c-accent); } .nav { display: none; } .nav__list { display: flex; gap: var(--s-6); } .nav__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-ink); text-decoration: none; font-size: .9375rem; } .nav__link:hover { color: var(--c-accent); } .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--c-ink); cursor: pointer; } .menu-toggle svg { width: 24px; height: 24px; } .mobile-nav { border-top: 1px solid var(--c-line); padding: var(--s-2) 0 var(--s-5); } .mobile-nav[hidden] { display: none; } .mobile-nav a { display: block; padding: 14px 0; font-size: 1.25rem; font-weight: 600; color: var(--c-ink); text-decoration: none; border-bottom: 1px solid var(--c-line); } @media (min-width: 860px) { .nav { display: block; margin-right: var(--s-5); } .menu-toggle, .mobile-nav { display: none !important; } } /* ---------- 5. Accueil (hero) ---------- */ .hero { padding-top: clamp(40px, 7vw, 96px); padding-bottom: clamp(24px, 3vw, 40px); text-align: center; } .hero__place { color: var(--c-ink-2); font-weight: 500; margin-bottom: var(--s-5); } .hero .display { max-width: 20ch; margin-inline: auto; } .hero .lead { max-width: 34ch; margin: var(--s-5) auto 0; } .hero__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); } .hero__note { margin-top: var(--s-4); color: var(--c-ink-2); font-size: var(--fs-small); } .hero__note a { display: inline-block; padding-block: 12px; color: inherit; font-weight: 600; text-decoration: none; } .hero__visual { position: relative; margin-top: clamp(48px, 7vw, 88px); padding: clamp(20px, 5vw, 64px); padding-bottom: 0; background: var(--c-surface); border-radius: var(--r-lg); overflow: hidden; } .hero__visual .screen { border-bottom-left-radius: 0; border-bottom-right-radius: 0; width: 83%; } .hero__visual .screen img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center; } .hero__visual .phone { position: absolute; right: clamp(16px, 5vw, 64px); bottom: clamp(16px, 4vw, 40px); } /* ---------- 6. Écrans dessinés (maquettes d'interface) ---------- */ /* À remplacer par de vos vraies captures quand vous en aurez. */ .screen { background: var(--c-screen); border-radius: 14px; box-shadow: var(--shadow-screen); overflow: hidden; text-align: left; font-size: 12px; line-height: 1.35; color: var(--c-ink); } .screen__bar { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; background: var(--c-screen-bar); border-bottom: 1px solid var(--c-line); } .screen__url { margin-inline: auto; padding: 2px 14px; border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-ink-2); font-size: 11px; } .phone { width: clamp(132px, 22vw, 184px); aspect-ratio: 9 / 19; background: var(--c-screen); border: 7px solid var(--c-bezel); border-radius: 30px; overflow: hidden; box-shadow: var(--shadow-screen); } .phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; } @media (max-width: 639px) { .phone { width: 104px; border-width: 5px; border-radius: 20px; } .hero__visual .phone { right: 12px; bottom: 12px; top: auto; } .hero__visual .screen { width: 100%; } } /* ---------- 7. Offres ---------- */ .offers { display: grid; gap: var(--s-5); } .offer__side { display: flex; flex-direction: column; gap: var(--s-4); } .offer { display: flex; flex-direction: column; gap: var(--s-4); padding: clamp(24px, 4vw, 40px); border-radius: var(--r-lg); background: var(--c-surface); } .offer__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); } .offer__price { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; } .offer__price small { font-size: 1rem; font-weight: 500; color: var(--c-ink-2); letter-spacing: 0; } .offer__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--c-ink-2); font-size: .9375rem; } .offer__keys { display: grid; gap: 10px; } .offer__actions { margin-top: auto; padding-top: var(--s-2); display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; } .check-list li { position: relative; padding-left: 28px; } .check-list li::before { content: ""; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border-radius: 50%; background: var(--c-accent-soft) var(--check) center / 11px no-repeat; /* coche Phosphor */ } /* Détails repliables */ .fold { border-top: 1px solid var(--c-line); } .fold summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 14px 0; cursor: pointer; font-weight: 600; list-style: none; } .fold summary::-webkit-details-marker { display: none; } .fold summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s; } .fold[open] summary::after { transform: rotate(-135deg) translateY(-2px); } .fold__body { padding-bottom: var(--s-4); display: grid; gap: var(--s-4); } .fold__body h4 { font-size: var(--fs-small); font-weight: 600; color: var(--c-ink-2); margin: 0 0 6px; } /* Carte mise en avant : l'outil sur mesure */ .offer--featured { background: var(--c-bg); border: 2px solid var(--c-accent); } .offer--featured .offer__price { color: var(--c-accent); } @media (min-width: 760px) { .offers { grid-template-columns: 1fr 1fr; } .offer--featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s-4) var(--s-7); align-items: start; } .offer--featured > * { grid-column: 1; } .offer--featured .offer__side { grid-column: 2; grid-row: 1 / span 5; align-self: start; } } .promises { display: grid; gap: var(--s-5); margin-top: var(--s-7); } .promise { display: flex; gap: var(--s-4); align-items: flex-start; } .promise__icon { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-accent-strong); display: grid; place-items: center; } .promise__icon svg { width: 22px; height: 22px; } .promise strong { display: block; font-size: 1.0625rem; } .promise p { color: var(--c-ink-2); font-size: .9375rem; } @media (min-width: 760px) { .promises { grid-template-columns: repeat(3, 1fr); } } /* ---------- 8. Comparaison + calculateur ---------- */ .compare-wrap { background: var(--c-bg); border-radius: var(--r-lg); overflow: hidden; } .compare { width: 100%; border-collapse: separate; border-spacing: 0; } .compare th, .compare td { padding: 18px 24px; text-align: left; vertical-align: top; border-top: 1px solid var(--c-line); } .compare thead th { border-top: 0; font-size: 1.125rem; padding-top: 28px; } .compare tbody th { font-weight: 500; color: var(--c-ink-2); width: 28%; } .compare .is-tool { background: var(--c-accent-soft); } .compare thead .is-tool { color: var(--c-accent-strong); } .compare .price { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; } @media (max-width: 639px) { .compare, .compare tbody { display: block; } .compare thead { display: none; } .compare tr { display: grid; grid-template-columns: 1fr 1fr; } .compare tbody th { grid-column: 1 / -1; width: auto; padding: 16px 16px 4px; font-size: var(--fs-small); } .compare td { border-top: 0; padding: 4px 16px 16px; } .compare td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: var(--c-ink-2); margin-bottom: 2px; } .compare td.is-tool::before { color: var(--c-accent-strong); } .compare td:not(.is-tool) { padding-right: 8px; } .compare td { font-size: .9375rem; } .compare tbody tr:first-child th { border-top: 0; } } .calc { margin-top: var(--s-5); padding: clamp(24px, 4vw, 48px); border-radius: var(--r-lg); background: var(--c-bg); display: grid; gap: var(--s-6); } .calc__controls { display: grid; gap: var(--s-5); } .range { display: grid; gap: var(--s-2); } .range__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); } .range label { font-weight: 600; } .range output { font-weight: 700; font-size: 1.125rem; font-variant-numeric: tabular-nums; } .range input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--c-accent); cursor: pointer; } .calc__result { padding: clamp(20px, 3vw, 32px); border-radius: var(--r-md); background: var(--c-surface); } .calc__loss { color: var(--c-ink-2); } .calc__loss b { color: var(--c-ink); } .calc__months { font-size: clamp(2.5rem, 2rem + 2.4vw, 3.75rem); font-weight: 700; letter-spacing: -.035em; line-height: 1; margin-top: var(--s-4); color: var(--c-accent); } .calc__caption { margin-top: var(--s-2); } @media (min-width: 860px) { .calc { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-8); } } /* ---------- 9. Réalisations ---------- */ .projects { display: grid; gap: var(--s-5); } @media (min-width: 760px) { .projects { grid-template-columns: 1fr 1fr; } } .project { display: flex; flex-direction: column; gap: var(--s-3); } .project__shot { aspect-ratio: 4 / 3; padding: clamp(20px, 4vw, 36px) clamp(20px, 4vw, 36px) 0; background: var(--c-surface); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s-3); } .project__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 14px 14px 0 0; } .project__type { color: var(--c-ink-2); font-size: var(--fs-small); font-weight: 600; } .project p { color: var(--c-ink-2); } /* Projets en accès privé : liste sans capture */ .project--list { padding: clamp(24px, 4vw, 40px); border-radius: var(--r-lg); background: var(--c-surface); gap: var(--s-5); } .others { display: grid; gap: var(--s-5); } .others li + li { padding-top: var(--s-5); border-top: 1px solid var(--c-line); } .others .project__type { margin-bottom: var(--s-1); } .project .others__title { color: var(--c-ink); font-weight: 650; } /* ---------- 10. Étapes ---------- */ .steps { display: grid; gap: var(--s-6); position: relative; } .step { position: relative; padding-left: 32px; } .step::before { content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-accent); } .step:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 26px; bottom: calc(-1 * var(--s-6) + 6px); width: 2px; background: var(--c-line); } .step .step__when { color: var(--c-accent); font-weight: 600; font-size: .9375rem; } .step .h3 { margin: 4px 0 6px; } .step p { color: var(--c-ink-2); } @media (min-width: 860px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s-6); } .step { padding-left: 0; padding-top: 36px; } .step::before { top: 0; } .step:not(:last-child)::after { left: 20px; right: calc(-1 * var(--s-6) + 8px); top: 5px; bottom: auto; width: auto; height: 2px; } } /* ---------- 11. Suivi ---------- */ .plans { display: grid; gap: var(--s-3); max-width: 920px; margin-inline: auto; padding: var(--s-3); background: var(--c-surface); border-radius: calc(var(--r-lg) + var(--s-3)); } @media (min-width: 760px) { .plans { grid-template-columns: 1fr 1fr; } } .plan { padding: clamp(24px, 4vw, 40px); border-radius: var(--r-lg); background: var(--c-bg); display: flex; flex-direction: column; gap: var(--s-4); } .plan--featured { border: 2px solid var(--c-accent); } .plan .check-list { display: grid; gap: 10px; } .plan .offer__price small { font-size: 1rem; } .plans-note { text-align: center; margin-top: var(--s-5); color: var(--c-ink-2); } /* ---------- 12. FAQ ---------- */ .faq-layout { display: grid; gap: var(--s-6); } @media (min-width: 860px) { .faq-layout { grid-template-columns: 1fr 1.6fr; gap: var(--s-8); } .faq-layout .section-head { position: sticky; top: 104px; align-self: start; } } .faq-layout .section-head { margin-bottom: 0; } .faq-layout .h2 { font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); } .faq .fold summary { padding: 22px 0; font-size: 1.125rem; } .faq .fold:last-child { border-bottom: 1px solid var(--c-line); } .faq .fold__body { color: var(--c-ink-2); max-width: 60ch; padding-bottom: 24px; } /* ---------- 13. Contact ---------- */ .contact { background: var(--c-surface); border-radius: var(--r-lg); padding: clamp(24px, 5vw, 72px); display: grid; gap: var(--s-7); } @media (min-width: 860px) { .contact { grid-template-columns: 1fr 1fr; align-items: start; } } .contact__phone { display: inline-block; margin-top: var(--s-6); font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); font-weight: 700; letter-spacing: -.035em; line-height: 1; color: var(--c-ink); text-decoration: none; font-variant-numeric: tabular-nums; } .contact__phone:hover { color: var(--c-accent); } .contact__mail { display: inline-block; margin-top: var(--s-4); font-size: 1.125rem; font-weight: 600; word-break: break-word; } .contact__about { margin-top: var(--s-6); max-width: 44ch; color: var(--c-ink-2); } .contact__facts { margin-top: var(--s-5); display: grid; gap: 8px; color: var(--c-ink-2); } .form { background: var(--c-bg); border-radius: var(--r-md); padding: clamp(20px, 3vw, 32px); display: grid; gap: var(--s-5); } .field { display: grid; gap: 6px; } .field label { font-weight: 600; font-size: .9375rem; } .field input, .field textarea { width: 100%; font: inherit; color: var(--c-ink); background: var(--c-bg); border: 1.5px solid var(--c-field); border-radius: var(--r-sm); padding: 12px 14px; min-height: 48px; } .field textarea { min-height: 132px; resize: vertical; } .field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-ink); } .field__hint { font-size: var(--fs-small); color: var(--c-ink-2); } .hp { position: absolute; left: -9999px; } .form__status { font-weight: 600; } .form__status:empty { margin-top: calc(-1 * var(--s-5)); } /* reste dans l'arbre d'accessibilité pour être annoncé */ .field__error { font-size: var(--fs-small); font-weight: 600; color: var(--c-accent-strong); } .field [aria-invalid="true"] { border-color: var(--c-accent-strong); } .form__notice { display: none; padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); font-weight: 600; } .form__notice:target { display: block; } .form__notice--ok { background: var(--c-accent-soft); color: var(--c-accent-strong); } .form__notice--err { background: var(--c-surface); color: var(--c-ink); border: 1.5px solid var(--c-field); } /* Petites classes utilitaires */ .check-list--stack, .offer__keys { display: grid; gap: 10px; } .calc__intro { margin-top: var(--s-2); } .calc__controls { margin-top: var(--s-6); } .calc__note { margin-top: var(--s-4); } .contact__lead { margin-top: var(--s-4); } .logo--small { font-size: 1.125rem; } /* ---------- 14. Pied de page ---------- */ .site-footer { padding-block: var(--s-7); border-top: 1px solid var(--c-line); } .site-footer__inner { display: grid; gap: var(--s-4); font-size: var(--fs-small); color: var(--c-ink-2); } .site-footer__slogan { margin-top: var(--s-1); } .site-footer__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); } .site-footer__links a { display: inline-flex; align-items: center; min-height: 32px; color: var(--c-ink-2); } .site-footer__links a:hover { color: var(--c-ink); } @media (min-width: 760px) { .site-footer__inner { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-6); } } /* ---------- 15. Pages légales ---------- */ .legal { padding-block: clamp(40px, 6vw, 80px) var(--s-section); } .legal__inner { max-width: 760px; } .legal-tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-7); } .legal-tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-ink); font-size: .9375rem; font-weight: 500; text-decoration: none; } .legal-tabs a:hover { background: var(--c-surface-2); color: var(--c-ink); } .legal-tabs a[aria-current="page"] { background: var(--c-ink); color: var(--c-bg); } .legal__head .h2 { font-size: var(--fs-h2); } .legal__date { margin-top: var(--s-3); } .legal__summary { margin-top: var(--s-6); padding: var(--s-5); border-radius: var(--r-md); background: var(--c-surface); } .legal__summary strong { display: block; margin-bottom: var(--s-1); } .legal__toc { margin-top: var(--s-6); padding: var(--s-5); border: 1px solid var(--c-line); border-radius: var(--r-md); } .legal__toc h2 { font-size: var(--fs-small); font-weight: 600; color: var(--c-ink-2); margin-bottom: var(--s-3); } .legal__toc ol { display: grid; gap: 6px var(--s-6); font-size: .9375rem; list-style: decimal; padding-left: 1.4em; } .legal__toc a { text-decoration: none; } .legal__toc a:hover { text-decoration: underline; } @media (min-width: 640px) { .legal__toc ol { grid-template-columns: 1fr 1fr; grid-auto-flow: row; } } .prose { margin-top: var(--s-7); } .prose h2 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.015em; font-weight: 650; margin-top: var(--s-7); margin-bottom: var(--s-3); } .prose h2:first-child { margin-top: 0; } .prose p, .prose ul, .prose ol { color: var(--c-ink-2); } .prose p + p, .prose p + ul, .prose ul + p, .prose p + ol, .prose ol + p, .prose .legal__box + p { margin-top: var(--s-3); } .prose strong, .prose b { color: var(--c-ink); } .prose ul { display: grid; gap: var(--s-2); } .prose ul li { position: relative; padding-left: 20px; } .prose ul li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); } .prose ol { display: grid; gap: var(--s-2); list-style: decimal; padding-left: 1.4em; } .legal__box { margin-block: var(--s-4); padding: var(--s-5); border-radius: var(--r-md); background: var(--c-accent-soft); } .legal__box p, .legal__box ul { color: var(--c-ink); } .legal__address { font-style: normal; color: var(--c-ink-2); line-height: 1.7; } .legal__back { margin-top: var(--s-8); } .to-fill { background: var(--c-mark); color: var(--c-ink); padding: 0 4px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } } /* Réalisation mise en avant (vrai site en ligne) : pleine largeur sur ordinateur */ @media (min-width: 760px) { .project--wide { grid-column: 1 / -1; } .project--wide .project__shot { aspect-ratio: 2 / 1; } }