/* ============================================================================ MAXIMUS PORCUS — Feuille de style de la page de destination Tête à Papineau · d'après le design system Maximus Porcus v2 (sept. 2026) Sommaire 01. Jetons (couleurs, typographie, espacement, effets) 02. Réinitialisation et base 03. Composition (conteneurs, grille 12 colonnes, sections) 04. Typographie éditoriale 05. Composants (boutons, eyebrow, filets, listes, métriques) 06. En-tête, navigation, tiroir mobile 07. Sections 08. Formulaire 09. Pied de page 10. Mouvement et révélations 11. Impression ========================================================================== */ /* ── 01. JETONS ──────────────────────────────────────────────────────────── */ @font-face { font-family: "Albertus Nova"; src: url("../fonts/AlbertusNovaBlack.woff2") format("woff2"), url("../fonts/AlbertusNovaBlack.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; } :root { color-scheme: light; /* Bourgogne */ --burgundy-50: #fbf5f5; --burgundy-100: #f4e6e6; --burgundy-200: #e7c8c9; --burgundy-300: #d39fa1; --burgundy-400: #b96d71; --burgundy-500: #963f44; --burgundy-600: #7d282d; --burgundy-700: #631316; /* Pantone 188 C — couleur maîtresse */ --burgundy-800: #4b0d10; --burgundy-900: #2d070a; /* Pantone 4975 C — texte, hero, footer */ --burgundy-950: #1b0305; /* Cuivre */ --copper-100: #faeadc; --copper-300: #edc09f; --copper-500: #e0a579; /* Pantone 721 C — accent */ --copper-700: #ad6c43; /* Crème */ --cream-50: #fffaf1; --cream-100: #f6e2c1; /* Pantone 7506 C */ --cream-200: #edd0a2; /* Soutien */ --soil-700: #4a3326; --soil-900: #271a14; --leaf-600: #4f6b3d; --white: #ffffff; /* Alias sémantiques */ --page: var(--cream-50); --ink: var(--burgundy-900); --brand: var(--burgundy-700); --accent: var(--copper-500); --text-body: var(--burgundy-900); --text-soft: rgb(45 7 10 / .75); --text-muted: rgb(45 7 10 / .6); --text-on-dark: var(--cream-50); --text-on-dark-soft: rgb(255 250 241 / .78); --text-on-dark-muted: rgb(246 226 193 / .62); --border-subtle: rgb(99 19 22 / .22); --border-strong: var(--burgundy-700); --border-accent: var(--copper-500); --border-on-dark: rgb(246 226 193 / .28); /* Typographie */ --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Albertus Nova", "Poppins", ui-serif, Georgia, serif; /* Bascule d'un seul point : voir data-heading="sans" sur pour revenir au guide strict */ --font-heading: var(--font-display); --tracking-eyebrow: .22em; --tracking-button: .09em; --tracking-label: .13em; --tracking-metric: -.035em; --measure: 62ch; --measure-intro: 46ch; /* Composition */ --container: 1200px; --container-wide: 1440px; --gutter: 20px; --gap: 24px; --section-py: 72px; /* Contrôles */ --control-h: 48px; --radius: 4px; --radius-md: 12px; --radius-lg: 20px; /* Effets */ --ease: cubic-bezier(.22, 1, .36, 1); --dur-control: 200ms; --dur-enter: 460ms; --shadow-soft: 0 16px 50px rgb(45 7 10 / .10); --shadow-lift: 0 24px 80px rgb(45 7 10 / .16); /* Ombres de sol des visuels détourés — bourgogne poussé au plus sombre, jamais du gris : le rapport R:V:B conserve la teinte de la marque. */ --shadow-ground: rgb(14 2 4); --shadow-contact: rgb(7 1 2); --rule-gradient: linear-gradient(90deg, transparent, var(--copper-500), transparent); --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"); --header-h: 68px; } @media (min-width: 640px) { :root { --gutter: 28px; --section-py: 88px; } } @media (min-width: 1024px) { :root { --gutter: 32px; --section-py: 112px; --gap: 32px; --header-h: 76px; } } @media (min-width: 1360px) { :root { --gutter: 48px; --section-py: 128px; } } /* ── 02. RÉINITIALISATION ET BASE ────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, h4, p, ul, ol, figure, blockquote, fieldset { margin: 0; } ul, ol { padding: 0; list-style: none; } fieldset { padding: 0; border: 0; min-width: 0; } a { color: var(--brand); text-decoration-color: var(--copper-500); text-underline-offset: .16em; } a:hover { color: var(--burgundy-900); } button, input, textarea, select { font: inherit; color: inherit; } ::selection { background: var(--copper-500); color: var(--burgundy-900); } :focus-visible { outline: 3px solid var(--copper-500); outline-offset: 3px; border-radius: 2px; } .on-dark :focus-visible { outline-color: var(--copper-300); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 8px; left: 8px; z-index: 200; transform: translateY(-180%); background: var(--cream-50); color: var(--burgundy-900); padding: 12px 20px; border-radius: var(--radius); font-size: 13px; font-weight: 600; letter-spacing: var(--tracking-button); text-transform: uppercase; text-decoration: none; box-shadow: var(--shadow-lift); transition: transform 180ms var(--ease); } .skip-link:focus-visible { transform: translateY(0); } /* ── 03. COMPOSITION ─────────────────────────────────────────────────────── */ .wrap { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; } .wrap--wide { width: min(100% - (var(--gutter) * 2), var(--container-wide)); } .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(40px, 6vw, 72px); } .grid > * { grid-column: 1 / -1; min-width: 0; } @media (min-width: 900px) { .c-1-5 { grid-column: 1 / span 5; } .c-1-6 { grid-column: 1 / span 6; } .c-1-7 { grid-column: 1 / span 7; } .c-1-8 { grid-column: 1 / span 8; } .c-6-end { grid-column: 6 / -1; } .c-7-end { grid-column: 7 / -1; } .c-8-end { grid-column: 8 / -1; } .c-9-end { grid-column: 9 / -1; } .self-end { align-self: end; } .self-center { align-self: center; } } .section { position: relative; padding-block: var(--section-py); } .section--tight { padding-block: clamp(48px, 7vw, 84px); } .t-light { background: var(--cream-50); color: var(--ink); } .t-cream { background: var(--cream-100); color: var(--ink); } .t-dark { background: var(--burgundy-900); color: var(--text-on-dark); } .t-deep { background: var(--burgundy-950); color: var(--text-on-dark); } .grain::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); pointer-events: none; z-index: 0; } .grain > * { position: relative; z-index: 1; } /* ── 04. TYPOGRAPHIE ÉDITORIALE ──────────────────────────────────────────── */ .display { font-family: var(--font-heading); font-weight: 900; line-height: .98; letter-spacing: -.005em; text-wrap: balance; } .h1 { font-size: clamp(2.55rem, 7.2vw, 5rem); } .h2 { font-size: clamp(2rem, 5vw, 3.5rem); } .h3 { font-size: clamp(1.55rem, 3.2vw, 2.15rem); } /* Retour au guide strict (Poppins SemiBold) : */ [data-heading="sans"] { --font-heading: var(--font-sans); } [data-heading="sans"] .display { font-weight: 600; line-height: 1.05; letter-spacing: -.015em; } .lede { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.65; color: var(--text-soft); max-width: var(--measure-intro); text-wrap: pretty; } .on-dark .lede { color: var(--text-on-dark-soft); } .body { font-size: 1rem; line-height: 1.7; color: var(--text-body); max-width: var(--measure); text-wrap: pretty; } .on-dark .body { color: var(--text-on-dark-soft); } .note { font-size: .8125rem; line-height: 1.6; color: var(--text-muted); max-width: 66ch; } .on-dark .note { color: var(--text-on-dark-muted); } .label { font-size: .8125rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; line-height: 1.45; color: var(--burgundy-700); } .on-dark .label { color: var(--copper-300); } /* Surface claire posée dans une section foncée : on rétablit les couleurs de texte */ .on-dark .on-light .lede { color: var(--text-soft); } .on-dark .on-light .body { color: var(--text-body); } .on-dark .on-light .note { color: var(--text-muted); } .on-dark .on-light .label { color: var(--burgundy-700); } .on-dark .on-light .ticks li { color: var(--burgundy-900); } .on-dark .on-light a { color: var(--brand); } .on-dark .on-light a:hover { color: var(--burgundy-900); } /* Index de section : 03 ─── EYEBROW */ .eyebrow { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; font-size: .75rem; font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--burgundy-700); } .on-dark .eyebrow { color: var(--copper-500); } .eyebrow__num { font-family: var(--font-display); font-weight: 900; font-size: 1rem; letter-spacing: .02em; color: var(--copper-700); font-variant-numeric: tabular-nums; flex: none; } .on-dark .eyebrow__num { color: var(--copper-500); } .eyebrow__rule { flex: none; width: 34px; height: 1px; align-self: center; background: var(--copper-500); } .eyebrow__text { text-wrap: balance; } .rule { height: 1px; border: 0; background: var(--rule-gradient); margin: 0; } .rule--flat { background: var(--border-subtle); } .on-dark .rule--flat { background: var(--border-on-dark); } .stack > * + * { margin-top: 16px; } .stack--lg > * + * { margin-top: 26px; } /* ── 05. COMPOSANTS ──────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--control-h); padding: 12px 26px; border: 1px solid transparent; border-radius: var(--radius); font-size: .8125rem; font-weight: 600; letter-spacing: var(--tracking-button); text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer; transition: background-color var(--dur-control) var(--ease), border-color var(--dur-control) var(--ease), color var(--dur-control) var(--ease), transform var(--dur-control) var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--block { width: 100%; } .btn--primary { background: var(--burgundy-700); color: var(--white); box-shadow: var(--shadow-soft); } .btn--primary:hover { background: var(--burgundy-900); color: var(--white); } .btn--secondary { background: var(--copper-500); color: var(--burgundy-950); } .btn--secondary:hover { background: var(--copper-300); color: var(--burgundy-950); } .btn--ghost { background: transparent; border-color: var(--border-subtle); color: var(--burgundy-900); } .btn--ghost:hover { border-color: var(--burgundy-700); background: var(--burgundy-50); color: var(--burgundy-900); } .on-dark .btn--ghost { border-color: var(--border-on-dark); color: var(--cream-100); } .on-dark .btn--ghost:hover { border-color: var(--cream-50); background: rgb(246 226 193 / .08); color: var(--cream-50); } .btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; } @media (max-width: 419px) { .btn-row .btn { width: 100%; } } /* Liste à puces cuivre */ .ticks { display: grid; gap: 12px; } .ticks li { position: relative; padding-left: 24px; font-size: 1rem; font-weight: 500; color: var(--burgundy-900); line-height: 1.55; } .on-dark .ticks li { color: var(--cream-100); } .ticks li::before { content: ""; position: absolute; left: 0; top: .58em; width: 8px; height: 8px; background: var(--copper-500); } /* Liste indexée à filets */ .index-list { display: grid; } .index-list li { display: grid; grid-template-columns: 2.1rem 1fr; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--border-subtle); font-size: 1.0625rem; font-weight: 500; color: var(--burgundy-900); line-height: 1.4; } .index-list li:last-child { border-bottom: 1px solid var(--border-subtle); } .index-list .n { font-family: var(--font-display); font-weight: 900; font-size: .8125rem; color: var(--copper-700); font-variant-numeric: tabular-nums; } @media (min-width: 560px) { .index-list { grid-template-columns: repeat(2, 1fr); column-gap: 40px; } .index-list li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--border-subtle); } } /* Grille à filets — remplace la succession de cartes arrondies */ .rules { display: grid; column-gap: clamp(28px, 4vw, 56px); } .rules > * { position: relative; padding: 36px 0 34px; border-top: 1px solid var(--border-subtle); } .on-dark .rules > * { border-top-color: var(--border-on-dark); } @media (min-width: 700px) { .rules--3, .rules--2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .rules--3 { grid-template-columns: repeat(3, 1fr); } } .rules > *::before { content: ""; position: absolute; top: -1px; left: 0; width: 34px; height: 2px; background: var(--copper-500); transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ease); } .rules > *:hover::before, .rules > *:focus-within::before { transform: scaleX(1); } /* Métriques */ .metric { border-left: 2px solid var(--copper-500); padding-left: clamp(20px, 3vw, 32px); } .metric__value { font-family: var(--font-sans); font-size: clamp(3.25rem, 8.4vw, 5.5rem); font-weight: 800; line-height: .92; letter-spacing: var(--tracking-metric); color: var(--copper-500); font-variant-numeric: tabular-nums; white-space: nowrap; } .metric__label { margin-top: 16px; font-size: .9375rem; line-height: 1.6; color: var(--text-on-dark-soft); max-width: 26ch; text-wrap: pretty; } /* Bloc image délimité */ .plate { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--burgundy-950); } .plate img { width: 100%; height: 100%; object-fit: cover; } .plate::after { content: ""; position: absolute; inset: 0; background: var(--burgundy-900); opacity: .16; mix-blend-mode: multiply; pointer-events: none; } .plate--4x5 img { aspect-ratio: 4 / 5; } .plate--3x4 img { aspect-ratio: 3 / 4; } .plate--16x10 img { aspect-ratio: 16 / 10; } /* ── 06. EN-TÊTE ET NAVIGATION ───────────────────────────────────────────── */ .site-header { position: absolute; inset: 0 0 auto; z-index: 60; padding-block: clamp(14px, 2.2vw, 24px); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .lockup { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; } .lockup .seal { width: 44px; height: 44px; flex: none; } .lockup .word { height: 21px; width: auto; display: none; } @media (min-width: 560px) { .lockup .word { display: block; } } .nav { display: none; } @media (min-width: 1024px) { .nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 32px); } } .nav a { position: relative; padding: 8px 0; font-size: .75rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--cream-200); text-decoration: none; transition: color 180ms var(--ease); } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--copper-500); transform: scaleX(0); transform-origin: left; transition: transform 280ms var(--ease); } .nav a:hover { color: var(--cream-50); } .nav a:hover::after, .nav a.is-current::after { transform: scaleX(1); } .nav a.is-current { color: var(--copper-500); } .header-cta { display: none; } @media (min-width: 1180px) { .header-cta { display: inline-flex; } } .burger { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 16px; background: transparent; border: 1px solid var(--border-on-dark); border-radius: var(--radius); color: var(--cream-100); font-size: .6875rem; font-weight: 600; letter-spacing: var(--tracking-button); text-transform: uppercase; cursor: pointer; transition: border-color var(--dur-control) var(--ease), background-color var(--dur-control) var(--ease); } .burger:hover { border-color: var(--cream-50); background: rgb(246 226 193 / .08); } @media (min-width: 1024px) { .burger { display: none; } } .burger__bars { display: grid; gap: 4px; } .burger__bars span { display: block; width: 18px; height: 1.5px; background: currentColor; } /* Barre compacte apparaissant au défilement */ .subnav { position: fixed; inset: 0 0 auto; z-index: 70; background: var(--burgundy-950); border-bottom: 1px solid rgb(224 165 121 / .2); transform: translateY(-101%); /* Hors écran, la barre ne doit pas capter le focus clavier */ visibility: hidden; transition: transform 380ms var(--ease), visibility 0s linear 380ms; will-change: transform; } .subnav.is-visible { transform: translateY(0); visibility: visible; transition: transform 380ms var(--ease), visibility 0s linear 0s; } .subnav__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); } .subnav .lockup { gap: 12px; } .subnav .lockup .seal { width: 32px; height: 32px; } .subnav .word { height: 17px; width: auto; } @media (max-width: 559px) { .subnav .btn { padding: 12px 18px; font-size: .6875rem; } } .subnav__links { display: none; } @media (min-width: 1024px) { .subnav__links { display: flex; gap: clamp(16px, 2vw, 28px); } } .subnav__progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--copper-500); transform: scaleX(0); transform-origin: left; } /* Tiroir mobile */ .drawer { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: auto 1fr auto; background: var(--burgundy-950); color: var(--cream-50); padding: clamp(14px, 2.2vw, 24px) 0 calc(env(safe-area-inset-bottom, 0px) + 26px); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity 260ms var(--ease), visibility 0s linear 260ms; } .drawer.is-open { opacity: 1; visibility: visible; transition-delay: 0s; } .drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .drawer__close { min-height: 48px; padding: 0 16px; background: transparent; border: 1px solid var(--border-on-dark); border-radius: var(--radius); color: var(--cream-100); font-size: .6875rem; font-weight: 600; letter-spacing: var(--tracking-button); text-transform: uppercase; cursor: pointer; } .drawer__nav { display: grid; align-content: center; gap: 0; padding-block: clamp(20px, 4vw, 36px); } .drawer__nav a { display: flex; align-items: baseline; gap: 16px; padding: 15px 0; border-bottom: 1px solid rgb(246 226 193 / .14); font-family: var(--font-heading); font-weight: 900; font-size: clamp(1.6rem, 6.4vw, 2.4rem); line-height: 1.12; color: var(--cream-50); text-decoration: none; opacity: 0; transform: translateY(14px); } .drawer.is-open .drawer__nav a { animation: drawerIn 460ms var(--ease) forwards; } .drawer__nav a .n { font-size: .75rem; color: var(--copper-500); font-variant-numeric: tabular-nums; flex: none; } @keyframes drawerIn { to { opacity: 1; transform: translateY(0); } } .drawer__foot { display: grid; gap: 16px; } .drawer__foot .btn { width: 100%; } .drawer__meta { font-size: .6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-on-dark-muted); } /* ── 07. SECTIONS ────────────────────────────────────────────────────────── */ /* Hero */ .hero { position: relative; background: var(--burgundy-900); color: var(--text-on-dark); overflow: hidden; padding-top: calc(var(--header-h) + clamp(36px, 8vw, 88px)); padding-bottom: clamp(44px, 6vw, 92px); } .hero__grid { align-items: center; row-gap: clamp(32px, 5vw, 56px); } .hero__content { position: relative; z-index: 2; } @media (min-width: 900px) { .hero__content { grid-column: 1 / span 6; } } .hero h1 { color: var(--cream-50); } .hero .lede { margin-top: clamp(20px, 2.4vw, 28px); } .hero .lede + .lede { margin-top: 14px; } .hero__figure { position: relative; z-index: 1; } @media (min-width: 900px) { .hero__figure { grid-column: 7 / -1; margin-right: calc(var(--gutter) * -1); transform: translateX(3%) scale(1.06); transform-origin: right center; } } @media (min-width: 1440px) { .hero__figure { transform: translateX(4%) scale(1.1); } } .hero__figure img { position: relative; z-index: 1; width: 100%; } /* Ancrage du visuel produit détouré. Deux ombres, comme en retouche produit : une ombre portée large qui donne l'ambiance, une ombre de contact serrée qui pose réellement l'objet au sol. Position calée sur le canal alpha du visuel : masse centrée à 50,7 % de la largeur, point de contact le plus bas à 96 % de la hauteur. */ .hero__figure::before, .hero__figure::after { content: ""; position: absolute; left: 51%; z-index: 0; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; } /* Ombre portée : la nappe sous l'ensemble bouteilles + verdure */ .hero__figure::before { top: 93%; width: 86%; height: 17%; background: var(--shadow-ground); opacity: .85; filter: blur(clamp(16px, 2.6vw, 34px)); } /* Ombre de contact : sous les bases, courte et dense */ .hero__figure::after { top: 94.5%; width: 54%; height: 6.5%; background: var(--shadow-contact); opacity: .9; filter: blur(clamp(7px, 1.1vw, 14px)); } .hero__keys { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 12px 30px; margin-top: clamp(30px, 4vw, 44px); padding-top: 22px; border-top: 1px solid var(--border-on-dark); } .hero__keys li { display: flex; align-items: center; gap: 10px; font-size: .6875rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--copper-300); line-height: 1.2; white-space: nowrap; } .hero__keys li::before { content: ""; flex: none; width: 4px; height: 4px; background: var(--copper-500); } @media (min-width: 380px) { .hero__keys { gap: 14px clamp(30px, 5vw, 56px); } } .hero__rail { display: none; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgb(224 165 121 / .16); } @media (min-width: 1360px) { .hero__rail { display: block; } } .scroll-cue { display: none; position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); align-items: center; gap: 10px; padding: 8px 4px; font-size: .625rem; font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--copper-300); text-decoration: none; z-index: 3; } @media (min-width: 1024px) and (min-height: 760px) { .scroll-cue { display: inline-flex; } } .scroll-cue:hover { color: var(--cream-50); } .scroll-cue svg { animation: nudge 2.8s var(--ease) infinite; } @keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* Bandeau de preuves */ .proof { background: var(--burgundy-950); color: var(--cream-100); } .proof__grid { display: grid; grid-template-columns: repeat(2, 1fr); } @media (min-width: 900px) { .proof__grid { grid-template-columns: repeat(4, 1fr); } } .proof__item { display: flex; align-items: center; gap: 14px; padding: 20px 16px; border-top: 1px solid rgb(246 226 193 / .13); border-right: 1px solid rgb(246 226 193 / .13); font-size: .6875rem; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--cream-100); line-height: 1.35; } .proof__item:nth-child(2n) { border-right: 0; padding-right: 0; } .proof__item:nth-child(2n+1) { padding-left: 0; } @media (min-width: 900px) { .proof__item { border-top: 0; border-right: 1px solid rgb(246 226 193 / .13); padding: 26px 20px; } .proof__item:first-child { padding-left: 0; } .proof__item:last-child { border-right: 0; padding-right: 0; } } .proof__item svg { flex: none; width: 24px; height: 24px; color: var(--copper-500); } /* Le fleur de lys est un emblème héraldique plein, pas une icône de trait : on le réduit un peu pour égaliser son poids visuel avec les trois autres. */ .proof__item svg.lys { width: 19px; height: 19px; } /* Étiquette d'étape du produit — le produit n'est pas encore commercialisé */ .tag { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; padding: 7px 15px; border: 1px solid rgb(224 165 121 / .42); border-radius: 999px; font-size: .625rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--copper-300); } .tag::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--copper-500); } /* position:relative + z-index OBLIGATOIRES : sans eux, la légende est peinte avant les ombres du visuel (qui sont des éléments positionnés en z-index 0) et se retrouve donc RECOUVERTE par la nappe d'ombre. Ne pas retirer. */ .hero__caption { position: relative; z-index: 2; margin-top: 14px; font-size: .6875rem; line-height: 1.5; letter-spacing: .04em; color: var(--text-on-dark-soft); text-align: center; } @media (min-width: 900px) { .hero__caption { text-align: right; padding-right: 8%; } } /* Couronne de laurier — motif repris du sceau « Fabriqué au Québec ». Élément de grille à part entière (colonnes 8-12), pas une décoration flottante : elle s'aligne sur le titre et respire avec la mise en page. Relief ton sur ton, jamais derrière du texte courant. */ .couronne { --taille: clamp(190px, 20vw, 286px); display: none; justify-content: center; align-items: center; gap: clamp(4px, .8vw, 12px); height: var(--taille); pointer-events: none; } @media (min-width: 1024px) { .couronne { display: flex; } } .couronne span { display: block; height: 100%; width: calc(0.61 * var(--taille)); background: var(--cream-200); -webkit-mask: url("../img/laurier.svg") center / contain no-repeat; mask: url("../img/laurier.svg") center / contain no-repeat; } /* état de repli sans JavaScript : la couronne est simplement fermée */ .couronne .miroir { transform: scaleX(-1); } /* Entrée éditoriale : les deux branches se referment pour former la couronne. Un seul mouvement, 760 ms, jamais en boucle. */ .js .couronne[data-reveal] { transform: none; } .js .couronne span { transition: transform 760ms var(--ease); transition-delay: 120ms; } .js .couronne span:first-child { transform: translateX(-22px) scale(.93); } .js .couronne .miroir { transform: scaleX(-1) translateX(-22px) scale(.93); } .js .couronne.is-in span:first-child { transform: translateX(0) scale(1); } .js .couronne.is-in .miroir { transform: scaleX(-1) translateX(0) scale(1); } @media (prefers-reduced-motion: reduce) { .js .couronne span:first-child { transform: none; } .js .couronne .miroir { transform: scaleX(-1); } } /* Sceau Québec + garanties */ .claims { display: grid; } .claims li { padding: 18px 0; border-top: 1px solid var(--border-accent); font-size: clamp(1rem, 1.6vw, 1.125rem); font-weight: 600; line-height: 1.35; color: var(--burgundy-900); text-wrap: balance; } .claims li:last-child { border-bottom: 1px solid var(--border-accent); } .seal-qc { width: clamp(96px, 13vw, 140px); height: auto; margin-bottom: 24px; } /* Icônes animées des avantages */ .mp-icon { display: block; width: 42px; height: 42px; overflow: visible; color: var(--burgundy-700); margin-bottom: 20px; } .on-dark .mp-icon { color: var(--copper-500); } .mp-icon path, .mp-icon rect, .mp-icon circle { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .mp-icon .solid { fill: currentColor; stroke: none; } .benefit:hover .mp-nutrition .drop { animation: mpDrop 1.2s var(--ease); } .benefit:hover .mp-nutrition .leaf { animation: mpLeaf 1.2s ease-in-out; transform-origin: 18px 39px; } .benefit:hover .mp-biochar .char { animation: mpPulse 1.2s ease-in-out; transform-origin: center; } .benefit:hover .mp-biochar .drop { animation: mpDropSm 1.2s ease-in-out; } .benefit:hover .mp-odorless .scent { animation: mpScent 1.2s ease-out; } .benefit:hover .mp-odorless .slash { animation: mpSlash 1.2s ease-out; transform-origin: center; } .benefit:hover .mp-quality .shield { animation: mpShield 1.2s var(--ease); transform-origin: center; } .benefit:hover .mp-quality .check { animation: mpCheck 1.2s ease-out; stroke-dasharray: 32; } .benefit:hover .mp-circular .arrows { animation: mpRotate 1.2s var(--ease); transform-origin: center; } .benefit:hover .mp-circular .sprout { animation: mpGrow 1.2s ease-out; transform-origin: 32px 43px; } .benefit:hover .mp-versatile .petal-t { animation: mpPetalT 1.2s ease-in-out; transform-origin: 32px 34px; } .benefit:hover .mp-versatile .petal-l { animation: mpPetalL 1.2s ease-in-out; transform-origin: 32px 34px; } .benefit:hover .mp-versatile .petal-r { animation: mpPetalR 1.2s ease-in-out; transform-origin: 32px 34px; } .benefit:hover .mp-versatile .drop { animation: mpPulse 1.2s ease-in-out; transform-origin: center; } @keyframes mpDrop { 0%, 100% { transform: translateY(0); } 38% { transform: translateY(5px); } 62% { transform: translateY(-1px); } } @keyframes mpDropSm { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(3px) scale(.92); } } @keyframes mpLeaf { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(-3deg); } } @keyframes mpPulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.045); } } @keyframes mpScent { 0%, 100% { opacity: 1; transform: translateY(0); } 45% { opacity: 0; transform: translateY(-4px); } } @keyframes mpSlash { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.08); } } @keyframes mpShield { 0%, 100% { transform: translateY(0); } 42% { transform: translateY(-3px); } } @keyframes mpCheck { 0% { stroke-dashoffset: 32; } 55%, 100% { stroke-dashoffset: 0; } } @keyframes mpRotate { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(18deg); } } @keyframes mpGrow { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.1); } } @keyframes mpPetalT { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-2px); } } @keyframes mpPetalL { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(-5deg); } } @keyframes mpPetalR { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(5deg); } } /* Métriques : disposition */ .metrics { display: grid; gap: clamp(34px, 5vw, 52px); } @media (min-width: 620px) { .metrics { grid-template-columns: repeat(2, 1fr); } } /* Diagramme biochar */ .diagram { margin-top: clamp(46px, 6vw, 76px); padding-top: clamp(30px, 4vw, 44px); border-top: 1px solid var(--border-subtle); } .diagram__grid { display: grid; gap: clamp(32px, 4vw, 56px); } @media (min-width: 760px) { .diagram__grid { grid-template-columns: repeat(2, 1fr); } } .diagram figure { display: grid; gap: 20px; } .diagram svg { width: 100%; height: auto; border-radius: var(--radius); background: var(--white); border: 1px solid var(--border-subtle); } .diagram figcaption .label { margin-bottom: 8px; } .diagram figcaption p { font-size: .9375rem; line-height: 1.6; color: var(--text-soft); max-width: 38ch; } .diagram > .note { margin-top: clamp(24px, 3vw, 34px); } .verdict { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .6875rem; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--copper-700); } .verdict::before { content: ""; width: 18px; height: 1px; background: var(--copper-500); } /* Bloc mi-photo / mi-texte, pleine largeur */ .split { display: grid; } .split__text { padding: clamp(44px, 6vw, 80px) var(--gutter); } .split__media { position: relative; overflow: hidden; background: var(--burgundy-950); min-height: 280px; } .split__media img { width: 100%; height: 100%; object-fit: cover; } .split__media::after { content: ""; position: absolute; inset: 0; background: var(--burgundy-900); opacity: .18; mix-blend-mode: multiply; pointer-events: none; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; align-items: stretch; } .split__text { display: grid; align-content: center; padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2)); padding-right: clamp(32px, 5vw, 76px); } .split__media { min-height: 520px; } .split__media img { position: absolute; inset: 0; } } /* Frise économie circulaire */ .timeline { display: grid; margin-top: clamp(44px, 6vw, 72px); } @media (min-width: 820px) { .timeline { grid-template-columns: repeat(4, 1fr); column-gap: clamp(20px, 3vw, 40px); } } .step { position: relative; padding: 26px 0 6px 32px; } .step::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: rgb(224 165 121 / .32); } .step:last-child::before { bottom: auto; height: 30px; } .step::after { content: ""; position: absolute; left: 0; top: 26px; width: 9px; height: 9px; border-radius: 50%; background: var(--copper-500); } @media (min-width: 820px) { .step { padding: 40px 0 0; } .step::before { left: 0; right: calc(var(--gap) * -1); top: 4px; bottom: auto; width: auto; height: 1px; } .step:last-child::before { right: auto; width: 50%; height: 1px; } .step::after { left: 0; top: 0; } } .step__n { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.75rem, 3.2vw, 2.4rem); line-height: 1; color: var(--copper-500); font-variant-numeric: tabular-nums; margin-bottom: 12px; } /* Encart d'appel à l'action */ .callout { display: grid; gap: 26px; align-items: center; margin-top: clamp(46px, 6vw, 72px); padding: clamp(28px, 4.2vw, 48px); background: var(--burgundy-900); color: var(--cream-100); border-radius: var(--radius-md); } @media (min-width: 900px) { .callout { grid-template-columns: 1fr auto; gap: 44px; } } .callout__title { font-family: var(--font-heading); font-weight: 900; font-size: clamp(1.35rem, 2.6vw, 1.85rem); line-height: 1.15; color: var(--cream-50); text-wrap: balance; } .callout p { margin-top: 12px; font-size: 1rem; color: var(--text-on-dark-soft); max-width: 48ch; } /* Filigrane du monogramme — un seul par page */ .watermark { position: absolute; right: -.05em; bottom: -.3em; font-family: var(--font-display); font-weight: 900; font-size: clamp(16rem, 32vw, 32rem); line-height: .78; color: var(--cream-100); user-select: none; pointer-events: none; z-index: 0; } @media (max-width: 899px) { .watermark { display: none; } } /* Bloc contact direct */ .contact-direct { display: grid; gap: 8px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--border-on-dark); } .contact-direct a { font-size: 1.0625rem; font-weight: 500; color: var(--cream-50); text-decoration: none; border-bottom: 1px solid rgb(224 165 121 / .45); padding-bottom: 3px; width: fit-content; transition: border-color 180ms var(--ease), color 180ms var(--ease); } .contact-direct a:hover { color: var(--copper-300); border-color: var(--copper-300); } /* ── 08. FORMULAIRE ──────────────────────────────────────────────────────── */ .form-panel { position: relative; } .form { background: var(--cream-50); color: var(--burgundy-900); border-radius: var(--radius-md); padding: clamp(24px, 3.6vw, 44px); box-shadow: var(--shadow-lift); } .form__title { font-family: var(--font-heading); font-weight: 900; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.1; margin-bottom: 10px; } .form__intro { font-size: .9375rem; line-height: 1.6; color: var(--text-soft); margin-bottom: 26px; max-width: 46ch; } .fields { display: grid; gap: 18px; } @media (min-width: 520px) { .fields { grid-template-columns: repeat(2, 1fr); } } .field--full { grid-column: 1 / -1; } .field__label { display: block; margin-bottom: 7px; font-size: .6875rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--burgundy-700); } .field .req { color: var(--copper-700); } .field .opt { color: var(--text-muted); font-weight: 500; letter-spacing: .06em; text-transform: none; } .field input, .field textarea, .field select { width: 100%; min-height: var(--control-h); padding: 12px 14px; background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius); font-family: var(--font-sans); font-size: 1rem; color: var(--burgundy-900); transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease); } .field textarea { min-height: 116px; resize: vertical; line-height: 1.55; } .field input:hover, .field textarea:hover { border-color: rgb(99 19 22 / .4); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--copper-700); box-shadow: 0 0 0 3px rgb(224 165 121 / .4); } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #a3131b; } .field__error { display: none; margin-top: 6px; font-size: .8125rem; font-weight: 500; color: #8d1017; } .field.is-invalid .field__error { display: block; } .form__summary { display: none; margin-bottom: 24px; padding: 16px 18px; border: 1px solid #a3131b; border-left-width: 3px; border-radius: var(--radius); background: #fdf3f2; } .form__summary.is-visible { display: block; } .form__summary p { font-size: .875rem; font-weight: 600; color: #8d1017; margin-bottom: 8px; } .form__summary ul { display: grid; gap: 4px; } .form__summary a { font-size: .875rem; color: #8d1017; } .form__consent { margin-top: 18px; font-size: .75rem; line-height: 1.6; color: var(--text-muted); } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form__success { display: grid; gap: 16px; align-content: center; min-height: 360px; background: var(--cream-50); color: var(--burgundy-900); border-radius: var(--radius-md); padding: clamp(28px, 4vw, 48px); box-shadow: var(--shadow-lift); } .form__success .seal { width: 58px; height: 58px; } [hidden] { display: none !important; } /* ── 08 bis. PAGES DE TEXTE (politique, mentions légales) ────────────────── */ .page-head { background: var(--burgundy-900); color: var(--text-on-dark); padding-block: clamp(24px, 3vw, 32px) clamp(48px, 7vw, 88px); } .page-head__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: clamp(40px, 6vw, 72px); } .page-head__bar .word { height: 21px; width: auto; } .page-head .h2 { color: var(--cream-50); } .page-head__date { margin-top: 20px; font-size: .6875rem; font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--copper-300); } .prose { max-width: 68ch; } .prose > * + * { margin-top: 18px; } .prose h2 { margin-top: clamp(40px, 5vw, 60px); padding-top: 22px; border-top: 1px solid var(--border-subtle); font-family: var(--font-heading); font-weight: 900; font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.15; color: var(--burgundy-900); text-wrap: balance; } .prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; } .prose h3 { margin-top: 26px; font-size: .8125rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--burgundy-700); } .prose p, .prose li { font-size: 1rem; line-height: 1.7; color: var(--text-body); text-wrap: pretty; } .prose ul { display: grid; gap: 10px; margin-top: 14px; } /* Puce en position absolue plutôt qu'en colonne de grille : le contenu du
  • reste un flux en ligne, donc un ou un suivi de texte ne se fait pas éclater en éléments de grille séparés. */ .prose ul li { position: relative; padding-left: 22px; } .prose ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--copper-500); } .prose a { color: var(--burgundy-700); text-decoration-color: var(--copper-500); } .prose strong { font-weight: 600; } .prose .note { margin-top: 14px; } .prose__toc { margin: clamp(32px, 4vw, 44px) 0 0; padding: 24px 26px; background: var(--cream-100); border-radius: var(--radius-md); } .prose__toc p { font-size: .6875rem; font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--burgundy-700); margin-bottom: 14px; } .prose__toc ol { display: grid; gap: 8px; counter-reset: toc; } .prose__toc li { display: grid; grid-template-columns: 1.9rem 1fr; align-items: baseline; } .prose__toc li::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); font-family: var(--font-display); font-weight: 900; font-size: .75rem; color: var(--copper-700); font-variant-numeric: tabular-nums; } .prose__toc a { font-size: .9375rem; font-weight: 500; color: var(--burgundy-900); text-decoration: none; } .prose__toc a:hover { text-decoration: underline; text-decoration-color: var(--copper-500); } /* ── 09. PIED DE PAGE ────────────────────────────────────────────────────── */ .site-footer { background: var(--burgundy-950); color: var(--cream-100); } .site-footer__top { display: grid; gap: clamp(34px, 5vw, 60px); padding-block: clamp(50px, 7vw, 84px) 40px; } @media (min-width: 880px) { .site-footer__top { grid-template-columns: 1.15fr 1fr; } } .site-footer .word { height: 38px; width: auto; } .site-footer__sign { margin-top: 20px; font-size: .6875rem; font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--copper-500); } .site-footer__desc { margin-top: 16px; font-size: .9375rem; line-height: 1.65; color: var(--text-on-dark-soft); max-width: 40ch; } .site-footer__claim { font-family: var(--font-heading); font-weight: 900; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.1; color: var(--cream-50); } .site-footer__links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px; } .site-footer__links a { font-size: .6875rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--cream-200); text-decoration: none; padding: 7px 0; } .site-footer__links a:hover { color: var(--copper-300); } .site-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; padding: 22px 0 clamp(26px, 4vw, 40px); border-top: 1px solid rgb(246 226 193 / .18); font-size: .75rem; color: var(--text-on-dark-muted); } .site-footer__legal a { color: var(--text-on-dark-muted); text-decoration-color: rgb(224 165 121 / .5); } .site-footer__legal a:hover { color: var(--copper-300); } /* ── 10. MOUVEMENT ───────────────────────────────────────────────────────── */ .js [data-reveal] { opacity: 0; transform: translateY(16px); } .js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity var(--dur-enter) var(--ease), transform var(--dur-enter) var(--ease); transition-delay: var(--reveal-delay, 0ms); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .js [data-reveal] { opacity: 1; transform: none; } .hero__figure { transform: none !important; } } /* ── 11. IMPRESSION ──────────────────────────────────────────────────────── */ @media print { .site-header, .subnav, .drawer, .scroll-cue, .btn, .form, .proof, .watermark { display: none !important; } body, .t-dark, .t-deep, .hero, .site-footer, .callout { background: #fff !important; color: #000 !important; } .grain::before, .plate::after, .split__media::after, .hero__figure::before, .hero__figure::after { display: none !important; } .section { padding-block: 22px; page-break-inside: avoid; } .display, .metric__value, .step__n, .callout__title { color: #2d070a !important; } .lede, .body, .note, .metric__label { color: #333 !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; } }