/* ============================================================ ATELIER CHROMATIQUE — le socle commun des modèles (18/10/2026) ------------------------------------------------------------ Chaque modèle est une VRAIE page de site, servie dans un cadre (iframe) : vraies requêtes média, vrai défilement, vrai mobile. Ce socle fait trois choses : 1 · les cinq couleurs de la palette arrivent en variables --c-* (posées par l'Atelier) ; 2 · chaque SECTION porte un thème (data-t) qui dit son fond et son texte : fond, doux, signature, nuit, accent. C'est ce qui fait qu'une palette « vit » : les sections alternent des valeurs, comme sur un site professionnel, au lieu de tout colorer en aplat ; 3 · la typographie (--f-titre, --f-texte, …) et le traitement des photos se règlent par un attribut sur . Aucune couleur n'est écrite dans les modèles : tout vient d'ici. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--c-fond); color: var(--c-texte); font-family: var(--f-texte); line-height: 1.55; font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, h4, h5, p, ul, ol, figure, dl, dd, blockquote { margin: 0; padding: 0; } ul, ol { list-style: none; } a { color: inherit; } button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; } :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } /* --- 1 · Les couleurs (valeurs de départ : « Terre cuite ») ---------------------------------------------------------- */ :root { --c-fond: #faf7f6; --c-texte: #2b1a14; --c-principale: #a24a2c; --c-secondaire: #7c8b6a; --c-accent: #e7b58c; --c-fond-2: #f1eeed; --c-ligne: #d9d3d1; --c-principale-douce: #f0e3de; --c-secondaire-douce: #e9ece5; --c-accent-douce: #f6e9dc; --c-sur-principale: #faf7f6; --c-sur-secondaire: #2b1a14; --c-sur-accent: #2b1a14; --c-sur-texte: #faf7f6; --c-nuit: #290c03; --c-sur-nuit: #faf7f6; --c-pop-signature: #e7b58c; --c-pop-nuit: #e7b58c; --c-pop-accent: #a24a2c; /* La voix : la typographie propre à chaque modèle, remplacée quand une association est imposée. */ --f-titre: var(--n-titre, "Newsreader", Georgia, serif); --f-texte: var(--n-texte, "Instrument Sans", system-ui, sans-serif); --w-titre: var(--n-poids, 380); --ls-titre: var(--n-suivi, -0.02em); --st-titre: normal; --gut: clamp(18px, 4.4vw, 48px); } html[data-voix="editoriale"] { --f-titre: "Newsreader", Georgia, serif; --f-texte: "Instrument Sans", system-ui, sans-serif; --w-titre: 380; --ls-titre: -0.02em; } html[data-voix="couture"] { --f-titre: "Bodoni Moda", "Didot", Georgia, serif; --f-texte: "Instrument Sans", system-ui, sans-serif; --w-titre: 500; --ls-titre: -0.025em; } html[data-voix="chaleureuse"] { --f-titre: "Fraunces", Georgia, serif; --f-texte: "Instrument Sans", system-ui, sans-serif; --w-titre: 420; --ls-titre: -0.02em; } html[data-voix="lecture"] { --f-titre: "Literata", Georgia, serif; --f-texte: "Literata", Georgia, serif; --w-titre: 560; --ls-titre: -0.015em; } html[data-voix="grotesque"] { --f-titre: "Instrument Sans", system-ui, sans-serif; --f-texte: "Instrument Sans", system-ui, sans-serif; --w-titre: 600; --ls-titre: -0.045em; } html[data-voix="classique"] { --f-titre: "Cormorant Garamond", Georgia, serif; --f-texte: "Instrument Sans", system-ui, sans-serif; --w-titre: 500; --ls-titre: -0.01em; } /* Les titres en Cormorant et en Bodoni gagnent à être un peu plus grands : la valeur est ajustée par --echelle-titre. */ html[data-voix="classique"] { --echelle-titre: 1.14; } html[data-voix="couture"] { --echelle-titre: 1.02; } html[data-voix="grotesque"] { --echelle-titre: 0.94; } :root { --echelle-titre: 1; } .titre, h1.titre, h2.titre, h3.titre { font-family: var(--f-titre); font-weight: var(--w-titre); letter-spacing: var(--ls-titre); line-height: 1; } .it { font-style: italic; } .mono-lisible { font-variant-numeric: lining-nums tabular-nums; } /* --- 2 · Les thèmes de section ----------------------------------------------------------------------------------------- */ [data-t] { background: var(--bg); color: var(--fg); --soft: color-mix(in srgb, var(--fg) 86%, var(--bg)); --faint: color-mix(in srgb, var(--fg) 14%, var(--bg)); } [data-t="fond"] { --bg: var(--c-fond); --fg: var(--c-texte); --act: var(--c-principale); --sur-act: var(--c-sur-principale); --pop: var(--c-accent); --signe: var(--c-principale); } [data-t="doux"] { --bg: var(--c-fond-2); --fg: var(--c-texte); --act: var(--c-principale); --sur-act: var(--c-sur-principale); --pop: var(--c-accent); --signe: var(--c-principale); } [data-t="teinte"] { --bg: var(--c-principale-douce); --fg: var(--c-texte); --act: var(--c-principale); --sur-act: var(--c-sur-principale); --pop: var(--c-accent); --signe: var(--c-principale); } [data-t="signature"] { --bg: var(--c-principale); --fg: var(--c-sur-principale); --act: var(--c-fond); --sur-act: var(--c-principale); --pop: var(--c-pop-signature); --signe: var(--c-sur-principale); --soft: color-mix(in srgb, var(--fg) 90%, var(--bg)); } [data-t="nuit"] { --bg: var(--c-nuit); --fg: var(--c-sur-nuit); --act: var(--c-accent); --sur-act: var(--c-sur-accent); --pop: var(--c-pop-nuit); --signe: var(--c-pop-nuit); --soft: color-mix(in srgb, var(--fg) 88%, var(--bg)); } [data-t="accent"] { --bg: var(--c-accent); --fg: var(--c-sur-accent); --act: var(--c-sur-accent); --sur-act: var(--c-accent); --pop: var(--c-pop-accent); --signe: var(--c-sur-accent); --soft: color-mix(in srgb, var(--fg) 90%, var(--bg)); } [data-t="secondaire"]{ --bg: var(--c-secondaire); --fg: var(--c-sur-secondaire); --act: var(--c-fond); --sur-act: var(--c-secondaire); --pop: var(--c-accent); --signe: var(--c-sur-secondaire); --soft: color-mix(in srgb, var(--fg) 90%, var(--bg)); } /* Boutons : un seul vocabulaire, qui s'adapte au thème de la section qui les porte. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 48px; padding: 0 1.7em; border-radius: var(--r-btn, 999px); background: var(--act); color: var(--sur-act); font: 600 0.92rem/1 var(--f-texte); letter-spacing: 0.01em; text-decoration: none; transition: transform 0.35s cubic-bezier(0.22, 0.7, 0.25, 1), filter 0.3s; } .btn:hover { transform: translateY(-2px); filter: brightness(1.06); } .btn--contour { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px currentColor; } .btn--lien { min-height: 0; padding: 0 0 0.2em; border-radius: 0; background: none; color: var(--fg); box-shadow: inset 0 -1.5px 0 currentColor; } .btn--lien:hover { transform: none; filter: none; opacity: 0.7; } .etiquette { font: 600 0.7rem/1.3 var(--f-texte); letter-spacing: 0.16em; text-transform: uppercase; } .soft { color: var(--soft); } .ligne { border-color: color-mix(in srgb, var(--fg) 22%, var(--bg)); } .w { width: min(1280px, calc(100% - 2 * var(--gut))); margin-inline: auto; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* --- 3 · Les photographies : trois traitements ------------------------------------------------------------------------- */ .ph { position: relative; overflow: hidden; background: var(--c-fond-2); } .ph img { width: 100%; height: 100%; object-fit: cover; } html[data-photo="accordee"] .ph img { filter: saturate(0.82) contrast(0.97); } html[data-photo="accordee"] .ph::after { content: ""; position: absolute; inset: 0; background: var(--c-principale); mix-blend-mode: color; opacity: 0.4; pointer-events: none; } html[data-photo="duotone"] .ph img { filter: url(#at-duo); } /* --- 4 · Une arrivée discrète des blocs (si JavaScript est là, et si le mouvement est permis) ------------------------------- */ .js .rv { opacity: 0; transform: translateY(22px); transition: opacity 0.9s cubic-bezier(0.22, 0.7, 0.25, 1), transform 0.9s cubic-bezier(0.22, 0.7, 0.25, 1); } .js .rv.vu { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; } } /* Le bandeau « modèle de démonstration » : toujours dit, jamais caché. */ .demo-bandeau { padding: 7px var(--gut); background: #14111a; color: #fff; text-align: center; font: 500 0.7rem/1.4 "Instrument Sans", system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }