/* ============================================================================ APLOMB — le socle. ============================================================================ Pour les sites vitrine de coachs, consultants, studios, SaaS et services. Ceux dont le client achète une PROMESSE, pas un ouvrage : il faut donc le convaincre vite, avec des preuves, et lui donner envie de cliquer. ## Ce fichier est un CONTRAT Aucune section n'écrit sa propre couleur, sa propre échelle typographique ni son propre espacement. Elles composent avec le vocabulaire posé ici. C'est ce qui permet à trente-trois sections écrites séparément de faire un seul thème — et c'est ce qui a permis de refondre entièrement la direction artistique en ne touchant QUE ce fichier. ## Les six décisions qui font l'allure 1. TOUT EST ARRONDI. 20 px sur les cartes, 999 px sur les boutons et les pastilles. L'angle vif dit l'atelier ; l'arrondi dit le logiciel. 2. LES OMBRES SONT DIFFUSES ET COLORÉES. Jamais un gris à 20 % sous une carte : une ombre teintée de l'accent, très large, très basse. C'est ce qui fait « flotter » plutôt que « poser ». 3. LE TITRE PORTE UN MOT SURLIGNÉ. Un seul, dans une pastille de couleur. C'est le geste signature des sites de service — il dit en un coup d'œil ce qu'on vend, et il donne au titre un point de couleur qui l'empêche d'être un mur de texte. 4. LES TITRES NE SONT PAS GÉANTS. 3 à 4 rem, pas 8. Un titre d'affiche impressionne sur une photo de chantier ; sur une page de service, il écrase le message. Ce qui porte, ici, c'est la GRAISSE et le resserrement, pas la taille. 5. LE FOND N'EST JAMAIS PLAT. Des formes organiques très pâles, posées derrière, en pur CSS — aucune image à charger. 6. LA PREUVE VIENT TOUT DE SUITE. Sous le bandeau, une ligne de chiffres ou de logos. Un visiteur qui doute au premier écran ne descend pas. ## Huit éditions, une par métier `[data-edition]` sur ``. Une édition ne change PAS la structure — seulement les valeurs et les décorations. Le même gabarit, huit caractères : Chantier pour le bâtiment, Atelier pour l'ébéniste, Salon pour le coiffeur, Cabinet pour le kiné, Ring pour la salle de sport, Table pour le restaurant, Studio pour le photographe — et Signal, le SaaS, qui reste l'édition par défaut du thème. ========================================================================= */ /* ── Réinitialisation ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* L'en-tête collante recouvre ce vers quoi on saute. Sans cette réserve, cliquer « Tarifs » dans le menu amène le titre SOUS la barre : on atterrit au bon endroit et on croit s'être trompé. */ scroll-padding-top: 6rem; scroll-behavior: smooth; } body { margin: 0; background: var(--fond); color: var(--encre); font-family: var(--f-texte); font-size: var(--t-base); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { max-width: 100%; display: block; } a { color: inherit; } button { font: inherit; } /* ── Les variables du socle ─────────────────────────────────────────── */ :root { /* Piles système : aucune police distante, donc aucun appel réseau bloquant et aucune origine tierce à ouvrir dans la politique de sécurité. Les trois familles couvrent les trois éditions. */ --f-grotesque: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --f-serif: ui-serif, Georgia, "Times New Roman", serif; --f-condense: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* Échelle. Les titres plafonnent VOLONTAIREMENT bas — voir la décision 4. Ce qui porte est la graisse et le resserrement, pas la taille. */ --t-base: calc(1.0625rem * var(--k-texte, 1)); --t-petit: calc(0.9375rem * var(--k-texte, 1)); --t-menu: calc(0.875rem * var(--k-texte, 1)); --t-1: calc(clamp(2.25rem, 5.2vw, 4rem) * var(--k-titre, 1)); --t-2: calc(clamp(1.75rem, 3.4vw, 2.75rem) * var(--k-titre, 1)); --t-3: calc(clamp(1.25rem, 1.9vw, 1.5rem) * var(--k-titre, 1)); --t-4: calc(clamp(1.0625rem, 1.4vw, 1.1875rem) * var(--k-titre, 1)); --section-y: calc(clamp(3.5rem, 6.5vw, 6.5rem) * var(--k-densite, 1)); --bloc-y: calc(clamp(1.75rem, 3.4vw, 3rem) * var(--k-densite, 1)); --gout: calc(clamp(1rem, 1.8vw, 1.5rem) * var(--k-densite, 1)); --courbe: cubic-bezier(0.22, 0.61, 0.36, 1); /* Les ombres. Teintées de l'accent, très diffuses, très basses — c'est la décision 2, et c'est elle qui distingue une carte qui FLOTTE d'une carte qui est simplement posée sur un fond. */ --ombre-s: 0 1px 2px color-mix(in oklab, var(--teinte-ombre) 8%, transparent), 0 4px 12px -4px color-mix(in oklab, var(--teinte-ombre) 10%, transparent); --ombre-m: 0 2px 4px color-mix(in oklab, var(--teinte-ombre) 6%, transparent), 0 12px 32px -10px color-mix(in oklab, var(--teinte-ombre) 16%, transparent); --ombre-l: 0 4px 8px color-mix(in oklab, var(--teinte-ombre) 5%, transparent), 0 32px 64px -20px color-mix(in oklab, var(--teinte-ombre) 24%, transparent); } /* ── LES PALETTES ─────────────────────────────────────────────────────── */ .pal-1, .pal-2, .pal-3, .pal-4 { background: var(--fond); color: var(--encre); position: relative; } .pal-1 { --fond: var(--p1-fond); --encre: var(--p1-encre); --accent: var(--p1-accent); } .pal-2 { --fond: var(--p2-fond); --encre: var(--p2-encre); --accent: var(--p2-accent); } .pal-3 { --fond: var(--p3-fond); --encre: var(--p3-encre); --accent: var(--p3-accent); } .pal-4 { --fond: var(--p4-fond); --encre: var(--p4-encre); --accent: var(--p4-accent); } .pal-1, .pal-2, .pal-3, .pal-4 { --sur: color-mix(in oklab, var(--encre) 4%, var(--fond)); --sur-forte: color-mix(in oklab, var(--encre) 8%, var(--fond)); --filet: color-mix(in oklab, var(--encre) 11%, transparent); --filet-fort: color-mix(in oklab, var(--encre) 20%, transparent); /* ── Pourquoi 72 % et non 62 % ── Le texte secondaire — chapô, légendes, présentation du pied — est de l'encre DILUÉE. À 62 %, la dilution passait encore sur un fond blanc franc, et tombait à 4,3:1 dès que le fond était teinté : le kraft de Chantier, le crème de Table, le gris perle de Cabinet. Autrement dit, le réglage tenait pour l'édition sur laquelle il avait été écrit et pour aucune autre, ce qui est le défaut typique d'une valeur choisie à l'œil sur un seul habillage. Mesuré à 72 % : 5,8:1 au pire sur les huit éditions. */ --doux: color-mix(in oklab, var(--encre) 72%, transparent); --teinte-ombre: var(--accent); /* La surface d'une carte : plus CLAIRE que le fond, jamais plus sombre. Une carte plus sombre que sa page creuse un trou ; une carte plus claire flotte au-dessus. C'est la même règle que dans les interfaces de logiciel, et c'est ce qui donne la sensation de relief. ── Pourquoi la DOSE est une variable ── Cette ligne a d'abord été écrite « 62 % de blanc », en supposant que les palettes 1 et 2 sont claires. C'est vrai pour deux éditions sur trois. Dans NUIT, la palette 1 vaut #0b0d12 : 62 % de blanc par-dessus donnaient un gris opaque, et toute l'édition sortait avec une en-tête et des boutons fantômes en gris plein au lieu du verre translucide prévu — sur la page entière, pas seulement sur une carte. La dose descend donc avec l'édition. Sur un fond sombre, quelques pour cent de blanc suffisent à décoller une surface ; en mettre soixante l'arrache. */ --carte-fond: color-mix(in oklab, #fff var(--carte-dose, 62%), var(--fond)); } /* Sur fond sombre, la règle s'inverse : c'est l'encre claire qui éclaire. */ .pal-3 { --carte-fond: color-mix(in oklab, var(--encre) 7%, var(--fond)); } .pal-4 { --carte-fond: color-mix(in oklab, #fff 12%, var(--fond)); /* La palette 4 est un APLAT SATURÉ, pas un fond neutre : son fond porte déjà de la couleur, donc de la luminance. Une encre diluée à 72 % rendait 3,4:1 sur l'indigo de Signal et 3,3:1 sur la terracotta de Salon — sous le seuil dans les deux cas, et pour la même raison : on ne peut pas ADOUCIR un texte posé sur une couleur pleine, il n'y a plus de marge à dépenser. Le second niveau y est donc presque opaque, et c'est la hiérarchie de taille qui le distingue du premier. */ --doux: color-mix(in oklab, var(--encre) 88%, transparent); } /* ── LES FORMES DE FOND ─────────────────────────────────────────────────── Décision 5 : le fond n'est jamais plat. Deux halos très pâles, en pur CSS — aucune image à charger, aucune requête, et ils suivent l'accent de la palette. `overflow: hidden` sur la section les découpe proprement. ─────────────────────────────────────────────────────────────────────── */ .section { padding-block: var(--section-y); position: relative; isolation: isolate; } .section > * { position: relative; z-index: 1; } .section--halo { overflow: hidden; } .section--halo::before, .section--halo::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; filter: blur(70px); opacity: 0.5; pointer-events: none; } .section--halo::before { width: 46vw; height: 46vw; top: -18vw; left: -12vw; background: color-mix(in oklab, var(--accent) 34%, transparent); } .section--halo::after { width: 38vw; height: 38vw; right: -14vw; bottom: -20vw; background: color-mix(in oklab, var(--accent-2, var(--accent)) 26%, transparent); } .section--serre { padding-block: calc(var(--section-y) * 0.55); } .section--pleine { padding-block: 0; } /* Plus aucun filet entre sections : la séparation se fait par le FOND et par l'espace. Un filet gris entre deux sections blanches est la marque du gabarit — les sites de service n'en ont aucun. */ .sans-filet { border: 0; } /* ── Conteneurs ──────────────────────────────────────────────────────── */ .enveloppe { width: min(92%, var(--largeur)); margin-inline: auto; } .enveloppe--etroite { width: min(92%, 62ch); margin-inline: auto; } .enveloppe--large { width: min(96%, calc(var(--largeur) + 180px)); margin-inline: auto; } /* ── Typographie ─────────────────────────────────────────────────────── */ .titre { font-family: var(--f-titre); font-weight: var(--titre-graisse, 700); letter-spacing: var(--titre-espace, -0.03em); line-height: var(--titre-interligne, 1.12); text-transform: var(--titre-casse, none); margin: 0; text-wrap: balance; } .titre-1 { font-size: var(--t-1); line-height: var(--titre-interligne-1, 1.04); } .titre-2 { font-size: var(--t-2); } .titre-3 { font-size: var(--t-3); } .titre-4 { font-size: var(--t-4); } /* LE MOT SURLIGNÉ — décision 3. Une section écrit `` dans son titre, ou le client tape des *astérisques* : le mot sort dans une pastille de couleur. C'est le geste qui signe le thème. */ .titre em, .surligne { font-style: normal; display: inline-block; padding: 0.04em 0.34em 0.1em; margin-inline: -0.06em; border-radius: 0.42em; background: var(--accent); color: var(--sur-accent, #fff); /* Une très légère rotation : la pastille cesse d'être un rectangle posé et devient un geste de marqueur. Un degré suffit — au-delà, on lit l'effet avant le mot. */ rotate: -1.2deg; } .surtitre { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem; border-radius: 999px; background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--accent); font-family: var(--f-texte); font-size: var(--t-menu); font-weight: 650; letter-spacing: 0.01em; text-transform: none; margin: 0; width: fit-content; } /* Le surtitre est devenu une PASTILLE : plus de filet devant. Le filet disait l'imprimé ; la pastille dit l'interface. */ .surtitre::before { display: none; } .surtitre--nu { background: none; padding: 0; } .chapo { font-size: calc(var(--t-base) * 1.14); line-height: 1.58; color: var(--doux); margin: 0; max-width: 58ch; text-wrap: pretty; } .texte { max-width: 66ch; } .texte > * + * { margin-top: 1em; } .texte h2 { font-size: var(--t-3); font-family: var(--f-titre); margin-top: 1.6em; } .texte h3 { font-size: var(--t-4); font-family: var(--f-titre); margin-top: 1.4em; } .texte a { color: var(--accent); text-underline-offset: 0.2em; } .texte ul, .texte ol { padding-left: 1.25rem; } .texte li + li { margin-top: 0.4em; } .petit { font-size: var(--t-petit); } .doux { color: var(--doux); } .centre { text-align: center; } .centre .surtitre, .centre .chapo { margin-inline: auto; } /* ── La tête d'une section ───────────────────────────────────────────── */ .tete { display: flex; flex-direction: column; gap: 1rem; margin-bottom: var(--bloc-y); max-width: 62ch; } .tete--centree { align-items: center; text-align: center; margin-inline: auto; } .tete--large { max-width: none; } .tete--duo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--gout); align-items: end; max-width: none; } @media (max-width: 800px) { .tete--duo { grid-template-columns: 1fr; align-items: start; } } /* ── Boutons ───────────────────────────────────────────────────────────── Le bouton plein est ENCRE, pas accent. C'est le choix des sites de service : le noir tranche sur tout fond, garde son contraste quelle que soit la palette, et laisse l'accent à ce qu'il doit signaler. L'accent revient sur le survol. ─────────────────────────────────────────────────────────────────────── */ .bouton { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.9rem 1.5rem; border: 1.5px solid transparent; border-radius: var(--bouton-arrondi); background: var(--encre); color: var(--fond); font-family: var(--f-texte); font-size: var(--t-petit); font-weight: 650; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; box-shadow: var(--ombre-s); transition: transform 0.2s var(--courbe), box-shadow 0.2s var(--courbe), background-color 0.2s ease, color 0.2s ease; } .bouton:hover { background: var(--accent); color: var(--sur-accent, #fff); /* Le bouton se soulève de 2 px. Sur une interface, c'est le signal d'affordance le plus lisible qui soit, et il ne coûte rien. */ transform: translateY(-2px); box-shadow: var(--ombre-m); } .bouton--fantome { background: var(--carte-fond); color: var(--encre); border-color: var(--filet-fort); box-shadow: none; } .bouton--fantome:hover { background: var(--carte-fond); color: var(--encre); border-color: var(--encre); box-shadow: var(--ombre-s); } .bouton--lien { background: none; border: 0; border-radius: 0; padding: 0.25rem 0; color: var(--accent); box-shadow: none; } .bouton--lien:hover { background: none; color: var(--accent); transform: none; box-shadow: none; opacity: 0.72; } /* La flèche des liens d'action : elle avance au survol. */ .bouton--lien::after { content: "→"; transition: transform 0.2s var(--courbe); } .bouton--lien:hover::after { transform: translateX(3px); } .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .actions--centrees { justify-content: center; } /* ── Grilles ─────────────────────────────────────────────────────────── */ .grille { display: grid; gap: var(--gout); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 260px)), 1fr)); } .grille--2 { --min: 380px; } .grille--3 { --min: 290px; } .grille--4 { --min: 220px; } /* UNE GRILLE DE QUATRE NE PASSE JAMAIS PAR TROIS. `auto-fit` remplit la largeur sans savoir combien d'éléments il range : entre 1180 et 900 px, une grille de quatre en loge trois — et le quatrième s'installe seul sur une deuxième rangée, à côté des deux tiers d'un écran de vide. C'est ce qu'on voyait sur les quatre étapes de l'édition Atelier, et c'est le défaut le plus visible de la page à cette largeur : on croit qu'il manque du contenu. Trois n'est pas un diviseur de quatre. La suite est donc 4 → 2 → 1, et elle vaut pour n'importe quel nombre d'éléments : quatre étapes font deux rangées de deux, huit labels en font quatre. On n'y perd que la rangée de trois, qui n'était juste pour aucun contenu. Les grilles de deux et de trois n'ont pas besoin de la règle : leur repli naturel — 2 → 1, 3 → 2 → 1 — passe par des nombres qu'elles savent remplir. 1180 px et non le point de bascule exact (1065, calculé) : entre les deux, quatre colonnes TIENNENT encore, à 220 px chacune — vingt-huit caractères par ligne pour un paragraphe de quarante mots. Elles tiennent sans être lisibles. L'orphelin n'était que la moitié visible du problème. */ @media (max-width: 1180px) { .grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .grille--4 { grid-template-columns: minmax(0, 1fr); } } .grille--serree { gap: calc(var(--gout) * 0.55); } .grille--jointive { gap: 0; } .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--gout) * 1.6); align-items: center; } .duo--decale { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } .duo--inverse > :first-child { order: 2; } @media (max-width: 860px) { .duo, .duo--decale { grid-template-columns: 1fr; } .duo--inverse > :first-child { order: 0; } } /* ── LES CARTES ────────────────────────────────────────────────────────── Elles flottent : fond plus clair que la page, arrondi généreux, ombre diffuse, bordure presque invisible. Et elles se soulèvent au survol quand elles sont cliquables. ─────────────────────────────────────────────────────────────────────── */ .carte { background: var(--carte-fond); border: 1px solid var(--filet); border-radius: var(--arrondi); padding: clamp(1.35rem, 2.2vw, 2rem); box-shadow: var(--ombre-s); transition: transform 0.28s var(--courbe), box-shadow 0.28s var(--courbe); } a.carte:hover, .carte--actif:hover { transform: translateY(-4px); box-shadow: var(--ombre-m); } .carte--nue { background: none; border: 0; padding: 0; box-shadow: none; } .carte--filet { background: none; border: 0; border-top: 2px solid var(--accent); border-radius: 0; padding: 1.25rem 0 0; box-shadow: none; } /* La carte en vedette — une formule de tarif, un bénéfice principal. */ .carte--vedette { background: var(--encre); color: var(--fond); border-color: transparent; box-shadow: var(--ombre-l); } .carte--vedette .doux { color: color-mix(in oklab, var(--fond) 82%, transparent); } /* ── Médias ──────────────────────────────────────────────────────────── */ .media { position: relative; overflow: hidden; border-radius: var(--arrondi); background: var(--sur-forte); } .media > img, .media > video { width: 100%; height: 100%; object-fit: cover; } .media--carre { aspect-ratio: 1 / 1; } .media--paysage { aspect-ratio: 16 / 10; } .media--large { aspect-ratio: 21 / 9; } .media--portrait { aspect-ratio: 3 / 4; } .media--haut { aspect-ratio: 4 / 5; } a.media > img, .media--actif > img { transition: transform 0.6s var(--courbe); } a.media:hover > img, .media--actif:hover > img { transform: scale(1.04); } /* Le média « produit » : posé en perspective, avec une grande ombre. C'est la façon dont les sites de logiciel montrent une capture d'écran, et ce qui la fait lire comme un objet plutôt que comme une image. */ .media--pose { box-shadow: var(--ombre-l); border: 1px solid var(--filet); } .voile { position: relative; } .voile::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, color-mix(in oklab, #000 72%, transparent) 0%, color-mix(in oklab, #000 34%, transparent) 46%, transparent 78% ); pointer-events: none; } .voile > * { position: relative; z-index: 1; } /* ── Pastilles, étiquettes, puces ────────────────────────────────────── */ .etiquette { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border-radius: 999px; background: var(--carte-fond); border: 1px solid var(--filet); font-size: var(--t-menu); font-weight: 600; box-shadow: var(--ombre-s); } .etiquette--accent { background: var(--accent); color: var(--sur-accent, #fff); border-color: transparent; } .puces { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; } .puces li { display: flex; align-items: flex-start; gap: 0.65rem; } .puces li::before { content: ""; width: 1.25rem; height: 1.25rem; margin-top: 0.12em; flex: none; border-radius: 999px; background: color-mix(in oklab, var(--accent) 18%, transparent); /* La coche, dessinée en masque : aucune icône à charger, et elle prend la couleur de l'accent de la palette. */ background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-size: 0.62rem 0.62rem; background-position: center; -webkit-mask: none; clip-path: circle(50%); } /* ── LA PREUVE ─────────────────────────────────────────────────────────── Décision 6 : sous le bandeau, une ligne de chiffres. Un visiteur qui doute au premier écran ne descend pas. ─────────────────────────────────────────────────────────────────────── */ .preuve { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem; list-style: none; margin: 0; padding: 0; font-size: var(--t-petit); color: var(--doux); } .preuve li { display: flex; align-items: center; gap: 0.5rem; } .preuve b { color: var(--encre); font-weight: 700; } .preuve li + li::before { content: ""; width: 1px; height: 1.1em; background: var(--filet-fort); margin-right: 1.25rem; } /* ── L'APPARITION AU DÉFILEMENT ──────────────────────────────────────── */ @supports (animation-timeline: view()) { [data-apparition="monte"] .apparait, [data-apparition="fondu"] .apparait, [data-apparition="voile"] .apparait { animation: apparait-monte linear both; animation-timeline: view(); /* ── Pourquoi la plage s'arrête DANS `entry` ── Écrite `entry 4% cover 24%`, l'animation ne s'achevait que lorsque l'élément avait traversé un quart de la fenêtre. Les blocs proches du BAS du document n'y arrivent jamais : la page n'a plus de défilement à leur offrir, et ils restaient définitivement à trois quarts d'opacité. Mesuré à 0,75 sur le dernier bouton d'appel — assez pâle pour se voir, assez discret pour qu'on l'attribue au thème plutôt qu'à un défaut. Bornée à l'intérieur de `entry`, l'animation se termine dès que le bloc est à moitié entré. Tout ce qui entre à l'écran s'affiche donc en entier, où que ce soit dans la page. */ animation-range: entry 2% entry 55%; } [data-apparition="fondu"] .apparait { animation-name: apparait-fondu; } [data-apparition="voile"] .apparait { animation-name: apparait-voile; } } @keyframes apparait-monte { from { opacity: 0; transform: translateY(1.5rem) scale(0.985); } to { opacity: 1; transform: none; } } @keyframes apparait-fondu { from { opacity: 0; } to { opacity: 1; } } @keyframes apparait-voile { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } } /* ── Accessibilité ───────────────────────────────────────────────────── */ .saut { position: absolute; left: -9999px; } .saut:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--encre); color: var(--fond); padding: 0.75rem 1rem; border-radius: 999px; } :where(a, button, input, textarea, select, summary):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .lecteur-seul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ── Formulaires ─────────────────────────────────────────────────────── */ .champ { display: block; } .champ + .champ { margin-top: 1rem; } .champ > span { display: block; margin-bottom: 0.45rem; font-size: var(--t-petit); font-weight: 650; } .champ input, .champ textarea, .champ select { width: 100%; padding: 0.9rem 1.1rem; border: 1px solid var(--filet-fort); border-radius: calc(var(--arrondi) * 0.6); background: var(--carte-fond); color: inherit; font: inherit; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .champ input:focus, .champ textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 16%, transparent); } .champ textarea { min-height: 8rem; resize: vertical; } /* ── Utilitaires ─────────────────────────────────────────────────────── */ .pile { display: flex; flex-direction: column; } .pile--xs { gap: 0.5rem; } .pile--s { gap: 0.85rem; } .pile--m { gap: 1.35rem; } .pile--l { gap: var(--bloc-y); } .mt-bloc { margin-top: var(--bloc-y); } .mt-s { margin-top: 1rem; } /* ── MOUVEMENT RÉDUIT ──────────────────────────────────────────────────── La formule habituelle — écraser `animation-duration` — ne suffit PAS ici, et c'est un piège qui ne se voit pas à la lecture. Une animation liée à `animation-timeline: view()` ne tire pas sa progression du temps mais du DÉFILEMENT. Sa durée est ignorée : la ramener à 0,001 ms ne la neutralise donc en rien. Le visiteur qui a demandé moins de mouvement dans son système continuait de recevoir l'effet exact que ce réglage existe pour supprimer — et l'animation liée au défilement est justement celle qui gêne le plus les personnes sensibles au mouvement. Mesuré avant correction : sur les vingt-neuf blocs animés de la page d'accueil, `reduce` et `no-preference` donnaient des opacités rigoureusement identiques. Il faut donc DÉBRANCHER la chronologie, et remettre les blocs dans leur état final — sans quoi ils resteraient figés à `opacity: 0`, et la page serait blanche. ─────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .apparait { animation-timeline: auto !important; animation-name: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; } } /* ============================================================================ LES HUIT ÉDITIONS — un habillage par MÉTIER. ---------------------------------------------------------------------------- `config/theme.json` déclare les VALEURS de chaque édition : couleurs, polices, arrondi, densité, forme des boutons, allure de l'en-tête. Ce fichier déclare ce qu'aucune valeur ne sait dire — la FORME. Pourquoi les deux et pas seulement les valeurs : une édition qui ne change que sa teinte se reconnaît sur une capture de 300 px à un coup de pipette, c'est-à-dire jamais. Ce qui se voit à cette taille, c'est un carré contre un cercle, une barre pleine contre une pilule flottante, des capitales contre du bas-de-casse, une pastille de surlignage contre un trait de soulignement. Chaque bloc ci-dessous ne fait donc qu'une chose : donner à son édition UN geste qu'aucune autre n'a. La règle qui les tient toutes : on ne redéfinit que des valeurs et des décorations. Aucun bloc ne change une structure — pas de `display`, pas de `grid-template`, pas de `position`. Une édition ne peut donc pas casser une page déjà composée. ========================================================================= */ /* ── SIGNAL — le SaaS ──────────────────────────────────────────────────── Blanc franc, indigo électrique, cartes très arrondies. Pour les logiciels, les plateformes, les agences tech. C'est l'édition par défaut du thème : celle qui sert quand aucun métier n'est demandé. */ [data-edition="signal"], [data-edition="aplomb"] { --titre-graisse: 750; --titre-espace: -0.035em; --titre-interligne: 1.1; --titre-interligne-1: 1.02; --sur-accent: #fff; --accent-2: #7c5cff; } /* ── CHANTIER — le bâtiment ────────────────────────────────────────────── Vasseur & Fils, charpente. Kraft, ardoise, rouille. Le geste : PLUS AUCUN ARRONDI, nulle part, et un filet de 3 px là où les autres éditions posent une ombre. Une page qui se lit comme un plan — des traits et des angles, pas des objets qui flottent. ─────────────────────────────────────────────────────────────────────── */ [data-edition="chantier"] { --titre-graisse: 800; /* Les capitales ont besoin d'air : un chasse resserré, qui sert le bas-de-casse, colle les lettres dès qu'on passe en majuscules. */ --titre-espace: 0.01em; --titre-interligne: 1.06; --titre-interligne-1: 1; --sur-accent: #ffffff; --accent-2: #b4762b; } [data-edition="chantier"] .carte { border-radius: 0; border-width: var(--trait); border-color: var(--filet-fort); box-shadow: none; } [data-edition="chantier"] .media, [data-edition="chantier"] .surtitre, [data-edition="chantier"] .badge, [data-edition="chantier"] .etiquette, [data-edition="chantier"] .jeton, [data-edition="chantier"] .fenetre { border-radius: 0; } [data-edition="chantier"] .titre em, [data-edition="chantier"] .surligne { border-radius: 0; rotate: none; } [data-edition="chantier"] .surtitre { background: none; border: var(--trait) solid var(--accent); text-transform: uppercase; letter-spacing: 0.14em; } [data-edition="chantier"] .bouton { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 750; } /* Un chantier n'a pas de halo. Le fond du bandeau reste un lavis très discret, et les deux taches floues des autres sections disparaissent. */ [data-edition="chantier"] .section--halo::before, [data-edition="chantier"] .section--halo::after { display: none; } [data-edition="chantier"] .aura::before { opacity: 0.55; } /* ── ATELIER — l'artisanat d'art ───────────────────────────────────────── Atelier Durand, ébénisterie. Lin, crème, noyer, laiton. Le geste : le mot clé n'est plus surligné mais SOULIGNÉ d'un trait plein, comme le trait de crayon plat qu'un menuisier tire sur une planche. Arrondi de 4 px — un coup de rabot sur l'arête, pas un galet. ─────────────────────────────────────────────────────────────────────── */ [data-edition="atelier"] { /* Un sérif à 750 devient un pavé noir : les empattements portent déjà la présence, la graisse doit reculer. */ --titre-graisse: 600; --titre-espace: -0.012em; --titre-interligne: 1.18; --titre-interligne-1: 1.08; --sur-accent: #ffffff; --accent-2: #b98a4e; } [data-edition="atelier"] .titre em, [data-edition="atelier"] .surligne, [data-edition="atelier"] .section.pal-3 .titre em, [data-edition="atelier"] .section.pal-4 .titre em { background: none; color: var(--accent); rotate: none; padding: 0 0 0.04em; border-radius: 0; border-bottom: 3px solid var(--accent); } [data-edition="atelier"] .surtitre { background: none; border-bottom: 1px solid var(--filet-fort); border-radius: 0; padding: 0.2rem 0 0.35rem; letter-spacing: 0.06em; } [data-edition="atelier"] .carte { box-shadow: none; border-color: var(--filet-fort); } [data-edition="atelier"] .section--halo::before, [data-edition="atelier"] .section--halo::after { opacity: 0.34; } /* ── SALON — la beauté et le bien-être ─────────────────────────────────── Studio Lume, coiffure. Blanc rosé, terracotta, vert d'eau. Le geste : TOUT EST ROND, jusqu'à l'excès assumé — cartes à 32 px, portraits en ARCHE, pilule flottante en en-tête. C'est l'exact contraire de Chantier, et c'est ce qui les distingue sur une vignette. ─────────────────────────────────────────────────────────────────────── */ [data-edition="salon"] { --titre-graisse: 620; --titre-espace: -0.02em; --titre-interligne: 1.2; --titre-interligne-1: 1.08; --sur-accent: #ffffff; --accent-2: #9dc9b8; } [data-edition="salon"] .carte { border-radius: 32px; } [data-edition="salon"] .media { border-radius: 28px; } /* L'arche : le portrait arrondi en haut, droit en bas. C'est le motif des salons et des instituts, et il ne coûte qu'une ligne. */ [data-edition="salon"] .media--portrait, [data-edition="salon"] .media--haut { border-radius: 999px 999px 32px 32px; } [data-edition="salon"] .titre em, [data-edition="salon"] .surligne { border-radius: 999px; padding: 0.06em 0.5em 0.12em; rotate: -1.5deg; } [data-edition="salon"] .section--halo::before { opacity: 0.8; } /* ── CABINET — les professions de santé ────────────────────────────────── Cabinet Marceau, kinésithérapie. Blanc froid, gris perle, bleu profond. Le geste : RIEN NE BRILLE. Ni halo, ni ombre teintée, ni pastille penchée. La hiérarchie tient au filet et à l'espace — un métier réglementé n'a pas le droit au superlatif, sa page ne doit donc pas l'avoir non plus. Chaque carte porte un filet d'accent sur son bord haut : c'est la seule couleur de la page, et elle sert à ORDONNER. ─────────────────────────────────────────────────────────────────────── */ [data-edition="cabinet"] { --titre-graisse: 620; --titre-espace: -0.02em; --titre-interligne: 1.22; --titre-interligne-1: 1.12; --sur-accent: #ffffff; --accent-2: #4e93b5; } [data-edition="cabinet"] .section--halo::before, [data-edition="cabinet"] .section--halo::after { opacity: 0.14; } [data-edition="cabinet"] .aura::before { opacity: 0.4; } [data-edition="cabinet"] .carte { box-shadow: none; border-color: var(--filet-fort); border-top: 3px solid var(--accent); } [data-edition="cabinet"] .titre em, [data-edition="cabinet"] .surligne { background: none; color: var(--accent); rotate: none; padding: 0; } [data-edition="cabinet"] .surtitre { background: none; border-radius: 0; border-left: 3px solid var(--accent); padding: 0.1rem 0 0.1rem 0.7rem; letter-spacing: 0.04em; } /* ── RING — les salles et les clubs ────────────────────────────────────── Cadence Club, salle de sport. Nuit verdâtre, lime électrique. Le geste : des CAPITALES massives sur un fond noir, des angles coupés à 2 px, et un bloc d'appel en aplat fluo où le bouton repasse en noir. C'est la seule édition dont la palette 4 est CLAIRE — d'où la règle de bouton qui suit. ─────────────────────────────────────────────────────────────────────── */ [data-edition="ring"] { --titre-graisse: 800; --titre-espace: 0.005em; --titre-interligne: 1.02; --titre-interligne-1: 0.96; --sur-accent: #0c1204; --accent-2: #4be2f2; /* Palettes 1 et 2 sombres : une surface s'y décolle avec quelques pour cent de blanc, pas avec soixante. Même raison que Studio. */ --carte-dose: 9%; } [data-edition="ring"] .carte { border-radius: 2px; background: color-mix(in oklab, #fff 5%, transparent); border: var(--trait) solid color-mix(in oklab, var(--accent) 32%, transparent); box-shadow: none; } [data-edition="ring"] .media, [data-edition="ring"] .fenetre { border-radius: 2px; } [data-edition="ring"] .titre em, [data-edition="ring"] .surligne { border-radius: 0; rotate: none; } [data-edition="ring"] .surtitre { border-radius: 0; background: var(--accent); color: var(--sur-accent); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 800; } [data-edition="ring"] .bouton { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; } /* Le bloc d'appel est en LIME PLEIN. La règle générale y pose un bouton blanc — blanc sur lime, c'est un bouton qu'on ne voit pas. Il repasse donc en encre, ce qui est aussi le geste des affiches de club. */ [data-edition="ring"] .section.pal-4 .bouton:not(.bouton--fantome):not(.bouton--lien) { background: var(--encre); color: var(--fond); } [data-edition="ring"] .section.pal-4 .bouton:not(.bouton--fantome):not(.bouton--lien):hover { background: color-mix(in oklab, var(--encre) 82%, #fff); color: var(--fond); } [data-edition="ring"] .section--halo::before, [data-edition="ring"] .section--halo::after { opacity: 0.42; filter: blur(80px); } /* ── TABLE — la restauration ───────────────────────────────────────────── La Table d'Ambre, restaurant. Crème chaud, bordeaux, ambre. Le geste : TOUT est à empattements, titres ET texte courant — c'est la seule édition dans ce cas —, la colonne est étroite et la densité éditoriale. Le mot clé passe en ITALIQUE d'accent, comme le nom d'un plat sur une carte manuscrite. ─────────────────────────────────────────────────────────────────────── */ [data-edition="table"] { --titre-graisse: 500; --titre-espace: -0.005em; --titre-interligne: 1.22; --titre-interligne-1: 1.1; --sur-accent: #ffffff; --accent-2: #b0763c; } [data-edition="table"] .titre em, [data-edition="table"] .surligne, [data-edition="table"] .section.pal-3 .titre em, [data-edition="table"] .section.pal-4 .titre em { background: none; color: var(--accent); font-style: italic; rotate: none; padding: 0; border-radius: 0; } [data-edition="table"] .surtitre { background: none; border: 1px solid var(--filet-fort); font-family: var(--f-titre); text-transform: uppercase; letter-spacing: 0.2em; font-weight: 500; } [data-edition="table"] .carte { box-shadow: none; border-color: var(--filet-fort); } [data-edition="table"] .media { border-radius: 6px; } [data-edition="table"] .section--halo::before, [data-edition="table"] .section--halo::after { opacity: 0.3; } /* ── STUDIO — l'image et la création ───────────────────────────────────── Studio Hélios, photographie. Nuit profonde, cyan, violet. Le geste : le VERRE — une surface translucide sur un fond coloré, la profondeur d'une interface sombre — et de très grands blancs. Un photographe montre ses tirages ; le décor doit s'effacer devant eux. ─────────────────────────────────────────────────────────────────────── */ [data-edition="studio"] { --titre-graisse: 700; --titre-espace: -0.038em; --titre-interligne: 1.08; --titre-interligne-1: 1; --sur-accent: #0b0d12; --accent-2: #6ee7f9; /* Toutes les palettes de cette édition sont sombres, palettes 1 et 2 comprises. Une surface s'y décolle avec quelques pour cent de blanc, là où il en faut soixante sur un fond clair. */ --carte-dose: 9%; } [data-edition="studio"] .carte { /* Le verre : une surface translucide sur un fond coloré. C'est ce qui donne la profondeur d'une interface sombre — une carte opaque y ferait un aplat mort. */ background: color-mix(in oklab, #fff 6%, transparent); backdrop-filter: blur(12px); border-color: color-mix(in oklab, #fff 12%, transparent); } [data-edition="studio"] .section--halo::before, [data-edition="studio"] .section--halo::after { opacity: 0.34; filter: blur(90px); } /* ============================================================================ LE BLOC — le geste dominant des sites de service en 2026. ---------------------------------------------------------------------------- La section n'est pas bord à bord : c'est un IMMENSE rectangle arrondi posé sur le fond de la page, avec de la marge autour. FOCUS, Leedflow, Creative Group : les trois le font, et c'est ce qui les distingue au premier coup d'œil d'un site fait sur un gabarit. Pourquoi ça marche : la page cesse d'être une pile de bandes et devient une suite d'OBJETS. Le fond qui dépasse tout autour donne au bloc une existence propre — on ne lit plus « une section », on lit « une carte de la taille de l'écran ». ========================================================================= */ .section--bloc { margin-inline: clamp(0.75rem, 2vw, 1.75rem); border-radius: var(--bloc-arrondi, 40px); overflow: hidden; padding-block: clamp(4rem, 8vw, 7rem); } .section--bloc + .section--bloc { margin-top: clamp(0.75rem, 1.6vw, 1.25rem); } @media (max-width: 640px) { .section--bloc { margin-inline: 0.5rem; border-radius: 28px; } } /* ── Les dégradés de bloc ──────────────────────────────────────────────── Trois familles, toutes construites sur l'accent de la palette : aucune couleur n'est écrite ici, donc changer d'édition les change tous. ─────────────────────────────────────────────────────────────────────── */ /* Uni saturé — le violet de FOCUS. Un aplat franc, mais traversé d'un halo plus clair qui l'empêche d'être mort. */ .fond-uni { background: radial-gradient(120% 90% at 22% 8%, color-mix(in oklab, #fff 22%, transparent) 0%, transparent 55%), var(--accent); color: var(--sur-accent, #fff); --encre: var(--sur-accent, #fff); --doux: color-mix(in oklab, var(--sur-accent, #fff) 88%, transparent); --filet: color-mix(in oklab, #fff 22%, transparent); --filet-fort: color-mix(in oklab, #fff 38%, transparent); --carte-fond: color-mix(in oklab, #fff 14%, transparent); } /* Profond — le vert-noir de Leedflow. L'accent naît d'un coin et s'éteint dans le noir ; les deux rayons obliques sont ce qui donne la profondeur. */ .fond-profond { background: linear-gradient(133deg, color-mix(in oklab, var(--accent) 30%, transparent) 0%, transparent 42%), radial-gradient(140% 120% at 12% -10%, color-mix(in oklab, var(--accent) 42%, transparent) 0%, transparent 58%), linear-gradient(160deg, #12181a 0%, #05070a 100%); color: #f4f7f8; --encre: #f4f7f8; --doux: color-mix(in oklab, #f4f7f8 78%, transparent); --filet: color-mix(in oklab, #fff 12%, transparent); --filet-fort: color-mix(in oklab, #fff 24%, transparent); --carte-fond: color-mix(in oklab, #fff 7%, transparent); position: relative; } /* Les rayons de lumière : deux bandes très pâles en diagonale. En pur CSS, sans image — et invisibles séparément, c'est leur superposition qui se voit. */ .fond-profond::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(74deg, transparent 38%, color-mix(in oklab, #fff 5%, transparent) 46%, transparent 54%), linear-gradient(66deg, transparent 58%, color-mix(in oklab, #fff 4%, transparent) 66%, transparent 72%); pointer-events: none; } /* Encre — le noir de Creative Group. Sobre, pour les sections de contact et les pieds de page. */ .fond-encre { background: linear-gradient(180deg, #16181d 0%, #0c0e12 100%); color: #f2f4f8; --encre: #f2f4f8; --doux: color-mix(in oklab, #f2f4f8 78%, transparent); --filet: color-mix(in oklab, #fff 10%, transparent); --filet-fort: color-mix(in oklab, #fff 20%, transparent); --carte-fond: color-mix(in oklab, #fff 6%, transparent); } /* ── LE BOUTON QUI BRILLE ──────────────────────────────────────────────── Le vert néon de Leedflow, le rouge de Creative Group : une ombre de la COULEUR DU BOUTON, large et basse. C'est ce qui le fait rayonner au lieu de simplement se poser — et c'est un détail qu'on remarque sans savoir le nommer. ─────────────────────────────────────────────────────────────────────── */ .bouton--vif { /* Le dégradé descendant : un aplat de couleur reste une étiquette, une surface éclairée par le haut devient un objet. C'est le motif commun à deemand, heysimon et yt-editing. ── La couleur de fond qui suit le dégradé n'est pas décorative ── Un `background` réduit à une image laisse `background-color` à `transparent`. Rien ne s'en aperçoit à l'écran — le dégradé couvre toute la surface — mais tout ce qui MESURE la page voit alors un bouton sans fond et rapporte la couleur de la section derrière lui : l'audit de contraste du dépôt accusait ce bouton à 1:1 sur les huit éditions, un faux défaut qu'on ne pouvait ni corriger ni ignorer tranquillement. Déclarer la couleur de base rend la mesure possible, et donne au passage le repli exact si le dégradé n'est pas peint. */ background: linear-gradient( 180deg, color-mix(in oklab, #fff 14%, var(--accent)) 0%, var(--accent) 100% ) var(--accent); color: var(--sur-accent, #fff); border-color: transparent; /* Trois couches, et la troisième est celle qui compte : 1. l'ombre COLORÉE, qui fait rayonner ; 2. une ombre neutre, qui pose le bouton sur la page ; 3. un LISERÉ CLAIR à l'intérieur du bord haut — le reflet. C'est ce liseré qu'on ne remarque pas et sans lequel un bouton reste plat. Il est écrit à l'identique sur les trois sites relevés. */ box-shadow: 0 4px 14px color-mix(in oklab, var(--accent) 42%, transparent), 0 4px 10px color-mix(in oklab, #000 12%, transparent), 0 2px 0 color-mix(in oklab, #fff 26%, transparent) inset; } .bouton--vif:hover { transform: translateY(-2px); box-shadow: 0 10px 26px color-mix(in oklab, var(--accent) 55%, transparent), 0 6px 14px color-mix(in oklab, #000 14%, transparent), 0 2px 0 color-mix(in oklab, #fff 32%, transparent) inset; } /* La flèche dans son disque, comme sur Leedflow. */ .bouton--vif::after { content: "→"; display: grid; place-items: center; width: 1.55em; height: 1.55em; margin-right: -0.5em; border-radius: 999px; background: color-mix(in oklab, var(--sur-accent, #fff) 22%, transparent); font-size: 0.85em; transition: transform 0.2s var(--courbe); } .bouton--vif:hover::after { transform: translateX(2px); } /* ── L'EN-TÊTE FLOTTANTE ───────────────────────────────────────────────── Détachée du bord, en pilule, comme sur FOCUS. Elle cesse d'être une barre de navigation et devient un objet posé sur la page. ─────────────────────────────────────────────────────────────────────── */ .entete--flottante { position: sticky; top: clamp(0.5rem, 1.4vw, 1rem); z-index: 50; width: min(94%, calc(var(--largeur) + 120px)); margin-inline: auto; border-radius: 999px; padding: 0.55rem 0.7rem 0.55rem 1.5rem; background: color-mix(in oklab, var(--carte-fond) 88%, transparent); backdrop-filter: blur(16px) saturate(140%); border: 1px solid var(--filet); box-shadow: var(--ombre-m); } /* ── LE BADGE À BARRE ──────────────────────────────────────────────────── La pastille au-dessus du titre, avec un trait de couleur devant — Leedflow. Elle annonce la catégorie sans voler la vedette au titre. ─────────────────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1rem 0.5rem 0.85rem; border-radius: 999px; background: var(--carte-fond); border: 1px solid var(--filet); font-size: var(--t-menu); font-weight: 600; width: fit-content; } .badge::before { content: ""; width: 3px; height: 1.05em; border-radius: 2px; background: var(--accent); flex: none; } /* ── LE MOT ENCADRÉ ────────────────────────────────────────────────────── La variante « crochets d'angle » du surlignage — FOCUS. Quatre coins dessinés en dégradés coniques : aucun pseudo-élément supplémentaire, aucune image, et l'épaisseur suit la couleur du texte. ─────────────────────────────────────────────────────────────────────── */ .titre .crochets, .crochets { font-style: normal; display: inline-block; position: relative; padding: 0.06em 0.42em 0.12em; background: none; color: inherit; rotate: none; } .crochets::before, .crochets::after { content: ""; position: absolute; inset: 0; border: 2px solid currentColor; opacity: 0.9; } /* Le cadre est découpé aux quatre angles : on ne garde que les coins. */ .crochets::before { clip-path: polygon( 0 0, 34% 0, 34% 2px, 2px 2px, 2px 34%, 0 34%, 0 100%, 34% 100%, 34% calc(100% - 2px), 2px calc(100% - 2px), 2px 66%, 0 66% ); } .crochets::after { clip-path: polygon( 100% 0, 66% 0, 66% 2px, calc(100% - 2px) 2px, calc(100% - 2px) 34%, 100% 34%, 100% 100%, 66% 100%, 66% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 66%, 100% 66% ); } /* ── LES CARTES QUI DÉPASSENT ──────────────────────────────────────────── Les mockups posés de part et d'autre du bandeau, légèrement inclinés, qui débordent du bloc — FOCUS. Elles donnent la profondeur sans qu'on ait à fabriquer une scène en 3D. ─────────────────────────────────────────────────────────────────────── */ .flottant { position: absolute; z-index: 2; border-radius: calc(var(--arrondi) * 0.9); overflow: hidden; box-shadow: var(--ombre-l); border: 1px solid color-mix(in oklab, #fff 18%, transparent); } .flottant--gauche { left: clamp(-4rem, -3vw, 0rem); top: 22%; width: clamp(140px, 16vw, 230px); rotate: -4deg; } .flottant--droite { right: clamp(-4rem, -3vw, 0rem); top: 34%; width: clamp(150px, 17vw, 250px); rotate: 4deg; } /* En dessous de 1100 px, ces cartes chevaucheraient le texte : elles disparaissent plutôt que de se replier ailleurs, car leur seul rôle est décoratif. */ @media (max-width: 1100px) { .flottant { display: none; } } /* ── Le défilement doux, RÉGLABLE ──────────────────────────────────────── Il est posé par défaut plus haut ; ce commutateur permet de le couper. Certains le trouvent élégant, d'autres le trouvent lent — et sur une page très longue, il l'est réellement. ─────────────────────────────────────────────────────────────────────── */ html[data-defilement="net"] { scroll-behavior: auto; } /* ============================================================================ LE BRANCHEMENT — palettes 3 et 4 en BLOCS. ---------------------------------------------------------------------------- Aucune des trente-trois sections n'a été modifiée pour cela, et c'est tout l'intérêt du contrat : elles portent déjà `.section.pal-N`, il suffit donc de décider ICI que deux de ces palettes sont des blocs arrondis. Le rythme d'une page devient alors : fond clair, fond clair, BLOC, fond clair, BLOC ACCENTUÉ. C'est exactement la structure de FOCUS et de Leedflow — des respirations blanches entre des objets pleins. ========================================================================= */ .section.pal-3, .section.pal-4 { margin-inline: clamp(0.75rem, 2vw, 1.75rem); border-radius: var(--bloc-arrondi, 40px); overflow: hidden; padding-block: clamp(4rem, 8vw, 7rem); isolation: isolate; } @media (max-width: 640px) { .section.pal-3, .section.pal-4 { margin-inline: 0.5rem; border-radius: 28px; } } /* Palette 3 : le bloc profond, avec ses rayons de lumière. */ .section.pal-3 { background: linear-gradient(133deg, color-mix(in oklab, var(--accent) 26%, transparent) 0%, transparent 44%), radial-gradient(140% 120% at 12% -10%, color-mix(in oklab, var(--accent) 34%, transparent) 0%, transparent 60%), var(--fond); } .section.pal-3::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(74deg, transparent 38%, color-mix(in oklab, #fff 5%, transparent) 46%, transparent 54%), linear-gradient(66deg, transparent 58%, color-mix(in oklab, #fff 4%, transparent) 66%, transparent 72%); } /* Palette 4 : l'aplat saturé, traversé d'un halo clair. Le violet de FOCUS. */ .section.pal-4 { background: radial-gradient(120% 90% at 22% 6%, color-mix(in oklab, #fff 20%, transparent) 0%, transparent 56%), var(--fond); } /* Sur ces deux blocs, le bouton plein doit RESSORTIR du fond coloré : il passe donc en blanc plein, et l'accent devient le survol. Sans cette règle, un bouton encre sur un bloc encre disparaît. */ .section.pal-3 .bouton:not(.bouton--fantome):not(.bouton--lien), .section.pal-4 .bouton:not(.bouton--fantome):not(.bouton--lien) { background: #fff; color: #10131a; } .section.pal-3 .bouton:not(.bouton--fantome):not(.bouton--lien):hover, .section.pal-4 .bouton:not(.bouton--fantome):not(.bouton--lien):hover { background: color-mix(in oklab, #fff 88%, var(--accent)); color: #10131a; } .section.pal-3 .bouton--fantome, .section.pal-4 .bouton--fantome { background: color-mix(in oklab, #fff 12%, transparent); color: inherit; border-color: color-mix(in oklab, #fff 30%, transparent); backdrop-filter: blur(8px); } /* La pastille de surtitre suit la même logique que le mot surligné : sur un bloc, l'accent de la palette est une TEINTE DU FOND — le bleu clair de Cabinet sur son bleu profond, le vert sombre de Ring sur son lime — et l'écrire en couleur de texte donne 1,2:1. Elle passe donc en encre de la surface, ce qui tient sur les huit éditions par construction : l'encre d'une palette contraste avec son fond, c'est la définition d'une palette. Le voile était en BLANC (`#fff 14%`). Sur le brun chaud de l'édition Atelier, quatorze pour cent de blanc ne donnent pas un blanc discret : ils donnent un GRIS, c'est-à-dire la seule couleur que la palette n'a pas. On lisait un rectangle gris flottant sur du bois — mesuré à l'écran, et c'est ce qui saute aux yeux sur la section « Comment on travaille ». Un voile pris dans l'encre plutôt que dans le blanc corrige la teinte, mais pas le fond du problème : sur ces surfaces, le fond n'est pas un aplat, c'est un DÉGRADÉ. Un rectangle translucide posé dessus se lit comme une trace de surlignage laissée par accident — il n'a ni bord ni franchise, il salit. La pastille devient donc OPAQUE et bordée, exactement comme les carrés numérotés des étapes qui vivent à trois cents pixels d'elle sur la même surface : un aplat de la teinte relevée, un filet, l'accent pour le texte. On lit une puce d'interface posée là, et non un défaut de rendu. Le geste de la charte — « la pastille dit l'interface » — est tenu ; ce qui change est la matière, pas la forme. */ .section.pal-3 .surtitre, .section.pal-4 .surtitre { background: var(--sur-forte); border: var(--trait) solid var(--filet-fort); color: var(--accent); } /* La palette 4 est un APLAT SATURÉ, et l'accent y est une teinte du fond, pas une couleur qui s'en détache : l'indigo de Signal écrit en accent sur sa propre puce rend 3,49:1, mesuré par `scripts/dam/contraste.mjs`. On ne peut pas y gagner du contraste avec l'accent, il n'y a plus de marge. C'est donc l'ENCRE qui écrit — le seul couple garanti par construction : une palette est justement définie par le fait que son encre contraste avec son fond, et huit pour cent de décalage ne changent pas cela. */ .section.pal-4 .surtitre { color: var(--encre); } /* Le mot surligné sur un bloc coloré : la pastille d'accent y serait invisible. Elle passe en blanc, texte sombre. */ .section.pal-4 .titre em, .section.pal-4 .surligne { background: #fff; color: #10131a; } .section.pal-3 .titre em, .section.pal-3 .surligne { background: var(--accent); color: #06090d; } /* ============================================================================ LE PREMIER ÉCRAN — ce qui manquait vraiment. ---------------------------------------------------------------------------- Relevé sur deemand.fr, heysimon.fr et creatorschool.fr, qui visent les mêmes clients que ce thème. Trois constats, contre lesquels la version précédente allait toutes les fois : 1. Le titre est CENTRÉ. Un titre calé à gauche laisse la moitié droite de l'écran vide, et c'est exactement l'effet qu'on obtenait : un premier écran à moitié désert. 2. Il n'y a PAS de photo derrière le titre. Le fond est un lavis de couleur. La photo derrière un titre est le geste du site d'artisan ; sur un site de service, elle brouille le texte au lieu de le porter. Le visuel vient APRÈS le titre, cadré, posé — jamais dessous. 3. Le premier écran est COLORÉ. Pas un aplat : un dégradé très doux qui descend du haut et s'éteint. C'est ce qui distingue une page vivante d'un document blanc. ========================================================================= */ /* ── LE LAVIS ──────────────────────────────────────────────────────────── Le rose pêche de deemand, construit sur l'accent : aucune couleur n'est écrite ici, donc changer d'édition change le lavis. Trois foyers plutôt qu'un seul — un dégradé unique se lit comme un dégradé, trois qui se recouvrent se lisent comme une lumière. ─────────────────────────────────────────────────────────────────────── */ .aura { position: relative; overflow: hidden; isolation: isolate; } .aura::before { content: ""; position: absolute; inset: -20% -10% auto; height: 130%; z-index: 0; pointer-events: none; /* ── SIX TACHES, ET NON TROIS ─────────────────────────────────────────── Relevé sur dumble.fr, qui obtient tout son premier écran avec six `radial-gradient(ellipse …)` empilés sur une couleur de fond : aucune image, aucun script, et un fond qu'aucun autre site n'a exactement. Pourquoi six et pas trois : à trois foyers, l'œil retrouve chaque dégradé et lit « un dégradé ». À six qui se recouvrent, il ne retrouve plus la source et lit « une lumière ». C'est toute la différence entre un fond décoré et un fond vivant, et cela ne coûte rien de plus. Les deux derniers foyers tirent sur `--accent-2`, la couleur d'appoint de l'édition — c'est ce qui empêche l'ensemble d'être un camaïeu et donne la légère dérive de teinte qu'on voit sur les vrais sites. ─────────────────────────────────────────────────────────────────── */ background: radial-gradient(ellipse 62% 48% at 50% 2%, color-mix(in oklab, var(--accent) 24%, transparent) 0%, transparent 58%), radial-gradient(ellipse 46% 40% at 6% 16%, color-mix(in oklab, var(--accent-2, var(--accent)) 22%, transparent) 0%, transparent 55%), radial-gradient(ellipse 44% 38% at 95% 10%, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 52%), radial-gradient(ellipse 38% 32% at 78% 46%, color-mix(in oklab, var(--accent-2, var(--accent)) 15%, transparent) 0%, transparent 50%), radial-gradient(ellipse 52% 42% at 22% 52%, color-mix(in oklab, var(--accent) 12%, transparent) 0%, transparent 55%), radial-gradient(ellipse 34% 30% at 58% 72%, color-mix(in oklab, var(--accent-2, var(--accent)) 10%, transparent) 0%, transparent 50%); } /* Le raccord avec la section suivante. Sans ce voile, la couleur s'arrête net au bord du bandeau et l'on voit la COUTURE entre deux sections. Le dégradé vers `--fond` la dissout — c'est la première couche que dumble empile par-dessus ses taches, et c'est ce qui fait tenir l'ensemble. */ .aura::after { content: ""; position: absolute; inset: auto 0 0; height: 32%; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 0%, var(--fond) 92%); } /* Le filigrane : une forme immense et très pâle, derrière tout. heysimon en pose une qui déborde de l'écran — c'est ce qui remplit le vide sans ajouter une seule information à lire. */ .filigrane::after { content: ""; position: absolute; z-index: 0; top: -30%; left: 50%; translate: -50% 0; width: min(160vh, 150%); aspect-ratio: 1; border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%; /* Un aplat uni donnait un ARC net en travers de l'écran : on lisait la découpe du bloc, pas une lumière. Le dégradé qui s'éteint sur son propre bord supprime la ligne — et il coûte moins qu'un flou, qui sur une forme de cette taille fait ramer les petits appareils. */ background: radial-gradient( closest-side, color-mix(in oklab, var(--accent) 10%, transparent) 0%, color-mix(in oklab, var(--accent) 5%, transparent) 58%, transparent 100% ); pointer-events: none; } /* ── LES RUBANS ────────────────────────────────────────────────────────── La ligne de mots-clés sous les boutons, séparés par un éclair — deemand. Elle dit tout ce que fait l'entreprise en une ligne, sans faire une section de plus, et elle se replie toute seule sur plusieurs lignes. ─────────────────────────────────────────────────────────────────────── */ .rubans { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 1.35rem; font-size: var(--t-petit); font-weight: 600; } .rubans li { display: inline-flex; align-items: center; gap: 0.5rem; } /* L'éclair est dessiné en `clip-path` : aucune icône à charger, et il prend la couleur de l'accent de la palette. */ .rubans li::before { content: ""; width: 0.72em; height: 1em; flex: none; background: var(--accent); clip-path: polygon(58% 0, 12% 56%, 44% 56%, 34% 100%, 88% 40%, 52% 40%); } /* ── LE CADRE ──────────────────────────────────────────────────────────── Le visuel sous le titre, dans une monture épaisse et très arrondie, avec une ombre large — la façon dont deemand pose sa vidéo et dont tous les sites de logiciel posent une capture d'écran. La monture est ce qui fait lire l'image comme un OBJET et non comme un fond. ─────────────────────────────────────────────────────────────────────── */ .cadre { position: relative; padding: clamp(0.4rem, 0.9vw, 0.75rem); border-radius: calc(var(--arrondi) + 1.1rem); background: color-mix(in oklab, var(--carte-fond) 70%, transparent); border: 1px solid var(--filet); backdrop-filter: blur(10px); box-shadow: 0 2px 6px color-mix(in oklab, var(--teinte-ombre) 8%, transparent), 0 40px 80px -28px color-mix(in oklab, var(--teinte-ombre) 32%, transparent); } .cadre > .media { border-radius: calc(var(--arrondi) + 0.35rem); } /* ── LE BOUTON À OMBRE DURE ────────────────────────────────────────────── heysimon : une ombre nette, décalée, sans flou. Elle vient de l'affiche sérigraphiée et non de l'interface — elle donne du caractère là où l'ombre diffuse donne de la douceur. Elle s'écrase au survol, ce qui fait « enfoncer » le bouton. ─────────────────────────────────────────────────────────────────────── */ .bouton--dur { box-shadow: 4px 4px 0 0 color-mix(in oklab, var(--encre) 82%, transparent); transition: transform 0.16s var(--courbe), box-shadow 0.16s var(--courbe), background-color 0.2s ease, color 0.2s ease; } .bouton--dur:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 color-mix(in oklab, var(--encre) 82%, transparent); } /* ── LA FLÈCHE OBLIQUE ─────────────────────────────────────────────────── Sur le bouton secondaire : elle dit « on part ailleurs » là où la flèche droite dit « on continue ». heysimon et deemand l'emploient tous deux. ─────────────────────────────────────────────────────────────────────── */ .bouton--oblique::after { content: "↗"; font-size: 0.95em; transition: transform 0.2s var(--courbe); } .bouton--oblique:hover::after { transform: translate(2px, -2px); } /* ── LES LOGOS EN CARTES ───────────────────────────────────────────────── heysimon ne pose pas ses logos nus sur le fond : chacun est dans sa propre pastille claire. Des logos nus d'échelles et de densités différentes font une ligne sale ; la pastille les remet tous à la même valeur. ─────────────────────────────────────────────────────────────────────── */ .logos--cartes .logo { padding: 0.85rem 1.4rem; border-radius: 999px; background: var(--carte-fond); border: 1px solid var(--filet); box-shadow: var(--ombre-s); } /* ── LE JETON ──────────────────────────────────────────────────────────── La pastille flottante avec un portrait et un prénom, posée de part et d'autre du titre — heysimon. Elle met des VISAGES sur un premier écran qui n'en a pas, ce qui compte particulièrement pour un coach. ─────────────────────────────────────────────────────────────────────── */ .jeton { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.95rem 0.4rem 0.4rem; border-radius: 999px; background: var(--carte-fond); border: 1px solid var(--filet); box-shadow: var(--ombre-m); font-size: var(--t-menu); font-weight: 650; white-space: nowrap; } .jeton img { width: 1.9rem; height: 1.9rem; border-radius: 999px; object-fit: cover; flex: none; } .jeton--gauche { left: clamp(-1rem, 3vw, 5rem); top: 30%; rotate: -5deg; } .jeton--droite { right: clamp(-1rem, 3vw, 5rem); top: 52%; rotate: 5deg; } /* Ils chevaucheraient le titre dès que la fenêtre se resserre. Leur rôle étant décoratif, ils disparaissent au lieu d'aller se replier ailleurs. */ @media (max-width: 1180px) { .jeton { display: none; } } /* ── LA VIGNETTE DANS LE TITRE ─────────────────────────────────────────── Un portrait rond glissé ENTRE DEUX MOTS du titre. heysimon et Creator School le font tous les deux, et c'est le geste le plus remarquable des deux pages : le titre cesse d'être du texte et devient une phrase habitée. ─────────────────────────────────────────────────────────────────────── */ .titre .vignette { display: inline-block; vertical-align: -0.16em; width: 0.92em; height: 0.92em; margin-inline: 0.06em; border-radius: 999px; object-fit: cover; border: 0.055em solid var(--carte-fond); box-shadow: var(--ombre-s); } /* ============================================================================ LA FENÊTRE — l'aperçu d'interface dessiné. ---------------------------------------------------------------------------- Voir `snippets/fenetre.liquid` pour la raison. En bref : un thème de SaaS doit montrer un produit sous son titre, et il est livré avant que le client n'ait la moindre capture d'écran. On dessine donc, en rectangles, avec les couleurs de la palette — ce qui suit l'édition et ne coûte aucune requête. ========================================================================= */ .fenetre { border-radius: calc(var(--arrondi) + 0.6rem); overflow: hidden; background: var(--carte-fond); border: 1px solid var(--filet); box-shadow: 0 2px 6px color-mix(in oklab, var(--teinte-ombre) 8%, transparent), 0 48px 90px -32px color-mix(in oklab, var(--teinte-ombre) 34%, transparent); } .fenetre-barre { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--filet); background: color-mix(in oklab, var(--encre) 3%, var(--carte-fond)); } /* Les trois pastilles, en une seule boîte : trois ombres portées côte à côte plutôt que trois éléments. */ .fenetre-pastilles { width: 0.6rem; height: 0.6rem; border-radius: 999px; flex: none; background: color-mix(in oklab, var(--encre) 20%, transparent); box-shadow: 0.95rem 0 0 color-mix(in oklab, var(--encre) 20%, transparent), 1.9rem 0 0 color-mix(in oklab, var(--encre) 20%, transparent); margin-right: 1.9rem; } .fenetre-adresse { flex: 1; padding: 0.28rem 0.85rem; border-radius: 999px; background: color-mix(in oklab, var(--encre) 5%, transparent); font-size: calc(var(--t-menu) * 0.88); color: var(--doux); text-align: center; } .fenetre-corps { background: var(--carte-fond); } .fenetre-corps > img { width: 100%; height: auto; display: block; } .fenetre-corps--dessin { display: grid; grid-template-columns: 8rem 1fr; gap: 1.2rem; padding: 1.2rem; aspect-ratio: 16 / 8.5; } /* ── Le flanc ── */ .fx-flanc { display: flex; flex-direction: column; gap: 0.62rem; } .fx-marque { height: 1.5rem; width: 3.6rem; border-radius: 0.4rem; background: var(--accent); margin-bottom: 0.5rem; } .fx-ligne { height: 0.62rem; border-radius: 999px; background: color-mix(in oklab, var(--encre) 9%, transparent); } .fx-ligne--active { background: color-mix(in oklab, var(--accent) 34%, transparent); } .fx-ligne--courte { width: 62%; } /* ── La scène ── */ .fx-scene { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; } .fx-entete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .fx-titre { height: 0.85rem; width: 42%; border-radius: 999px; background: color-mix(in oklab, var(--encre) 16%, transparent); } .fx-pilule { height: 1.5rem; width: 4.6rem; border-radius: 999px; background: var(--accent); } .fx-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; } .fx-vignette { display: flex; flex-direction: column; gap: 0.42rem; padding: 0.7rem; border-radius: 0.6rem; border: 1px solid var(--filet); background: color-mix(in oklab, var(--encre) 3%, transparent); } .fx-vignette--accent { border-color: color-mix(in oklab, var(--accent) 30%, transparent); background: color-mix(in oklab, var(--accent) 9%, transparent); } .fx-nombre { height: 0.95rem; width: 58%; border-radius: 999px; background: color-mix(in oklab, var(--encre) 22%, transparent); } .fx-vignette--accent .fx-nombre { background: var(--accent); } .fx-legende { height: 0.48rem; width: 82%; border-radius: 999px; background: color-mix(in oklab, var(--encre) 10%, transparent); } /* L'histogramme. Les barres montent depuis le bas ; la dernière porte l'accent, parce qu'un graphique sans point de mire ne raconte rien. */ .fx-graphe { flex: 1; min-height: 4.5rem; display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 0.55rem; padding-top: 0.4rem; } .fx-graphe span { height: var(--h, 50%); border-radius: 0.35rem 0.35rem 0.18rem 0.18rem; background: color-mix(in oklab, var(--accent) 26%, transparent); } .fx-graphe span:last-child { background: var(--accent); } @media (max-width: 720px) { /* Le flanc n'a plus la place : la scène prend tout, et le dessin reste lisible au lieu de se tasser en deux colonnes illisibles. */ .fenetre-corps--dessin { grid-template-columns: 1fr; aspect-ratio: 16 / 11; } .fx-flanc { display: none; } }