/* ══════════════════════════════════════════════════════════════════════════════ Glyphein : feuille de style de la refonte (site.css), session 1 bis. Refaite avec les skills de design (voir REFONTE.md, section « Design (skill) »). Autorité des valeurs : brand/charte-glyphein-v4.md (v4.1), dépôt du visuel. La palette est recopiée telle quelle : aucune couleur n'est inventée ici. DEUX THÈMES, posés dès le départ : le sombre est la base, le clair prend le relais quand le système le demande (prefers-color-scheme: light), comme le manuel. Tout passe par des jetons (§01) ; aucune règle plus bas n'écrit une couleur en dur. Sessions suivantes : ne jamais écrire d'hexadécimal hors du §01. Cohabite avec assets/glyphein.css, feuille des pages pas encore refaites (docs, support, privacy, terms, flow-globe) : une page charge l'une OU l'autre, jamais les deux. Règles tenues partout : · six tailles de texte, pas une de plus ; · espacements par pas de 8, sauf la cible tactile de 44 px et les filets de 1 px ; · une seule couleur d'action (Givre en sombre, Cobalt en clair, son pendant dans la charte) ; · un seul système d'arrondis : 8 px, et 4 px pour ce qui est posé dedans ; le chanfrein de la charte sur le SEUL bouton principal ; · des majuscules espacées pour un seul usage, le surtitre (au plus deux par page) ; · on n'anime que transform et opacity, rien d'autre, et tout s'arrête sous prefers-reduced-motion ; · pas de tiret long ni de demi-tiret, nulle part. ══════════════════════════════════════════════════════════════════════════ */ /* ─── 01 · Jetons ──────────────────────────────────────────────────────────*/ :root { color-scheme: dark light; /* Palette de la charte v4.1 (§07), recopiée telle quelle */ --nuit: #070B12; --encre: #101826; --encre-claire: #182238; --minuit: #0E1420; --givre: #85AEE4; --givre-pale: #E9EDF3; --cobalt: #3E6AB0; --cobalt-sombre: #2E5288; --craie: #EEF1F6; --papier: #F7F8FA; --ardoise: #3A4150; --plomb: #656E83; --acier: #7C8698; --brume: #C4CEDC; /* Rôles : le monde sombre (base) */ --fond: var(--nuit); --surface: var(--encre); --surface-haute: var(--encre-claire); --texte: var(--craie); --texte-2: var(--brume); /* toute phrase à lire */ --texte-3: var(--acier); /* repères seulement, jamais une phrase */ --action: var(--givre); --lien: var(--givre); --sur-action: var(--nuit); /* le texte posé sur l'action */ --voile: rgba(238, 241, 246, .22); /* l'éclaircissement du bouton au survol */ --selection: rgba(133, 174, 228, .14); /* survol et choix d'une ligne ou d'un onglet */ --filet: rgba(133, 174, 228, .16); --filet-fort: rgba(133, 174, 228, .32); --lueur: rgba(133, 174, 228, .13); /* l'éclat très faible derrière le globe */ --ombre: 0 18px 44px rgba(3, 7, 14, .5); --mer-centre: var(--encre-claire); /* la sphère, avant que le globe ne se dessine */ --mer-bord: var(--minuit); /* Les statuts du monde sombre (src/glyphein-tokens.ts : STATUS) */ --positif: #30B579; --negatif: #E06456; --alerte: #D9A13B; --apparu: var(--givre); } /* Le monde clair : les valeurs du manuel et du visuel (src/glyphein-tokens.ts : THEMES.light, STATUS_LIGHT). Papier et non le blanc pur ; Nuit et non le noir pur. */ @media (prefers-color-scheme: light) { :root { --fond: var(--craie); --surface: var(--papier); --surface-haute: var(--givre-pale); --texte: var(--nuit); --texte-2: var(--ardoise); --texte-3: var(--plomb); --action: var(--cobalt); --lien: var(--cobalt); --sur-action: var(--papier); --voile: rgba(7, 11, 18, .18); --selection: rgba(62, 106, 176, .12); --filet: rgba(20, 32, 54, .12); --filet-fort: rgba(20, 32, 54, .26); --lueur: rgba(62, 106, 176, .12); --ombre: 0 16px 40px rgba(20, 32, 54, .16); --mer-centre: var(--papier); --mer-bord: var(--brume); --positif: #06633E; --negatif: #A12921; --alerte: #744F00; --apparu: var(--cobalt-sombre); } } :root { /* Échelle typographique : six tailles. Taille / interligne. */ --t-1: 12px; --i-1: 16px; /* le surtitre, les repères */ --t-2: 14px; --i-2: 24px; /* légendes, tableau, détails */ --t-3: 16px; --i-3: 24px; /* texte courant */ --t-4: 20px; --i-4: 32px; /* chapeau, chiffres */ --t-5: clamp(28px, 1.2rem + 1.4vw, 40px); --i-5: 1.15; /* titres de section */ --t-6: clamp(2.125rem, .4rem + 3.1vw, 3rem); --i-6: 1.08; /* titre de page */ /* Espacements : pas de 8 */ --e-1: 8px; --e-2: 16px; --e-3: 24px; --e-4: 32px; --e-5: 48px; --e-6: 64px; --e-7: 96px; --e-8: 128px; --rayon: 8px; --rayon-petit: 4px; /* un seul système : 8 px, et 4 px pour ce qui est posé dedans */ --chanfrein: 12px; /* le seul : bouton principal */ --cible: 44px; /* cible tactile minimale */ --entete: 72px; /* en-tête : 64 à 80 px, sur une ligne */ --large: 1200px; --saignee: clamp(0px, calc((100vw - 1264px) / 2), 96px); /* ce que le globe du hero prend sur la marge de droite */ --mesure: 62ch; --micro: 150ms; --glisse: 240ms; --ease: cubic-bezier(.3, .85, .35, 1); --z-entete: 5; --z-evitement: 10; } /* ─── 02 · Polices auto-hébergées ────────────────────────────────────────── Sora = la voix (titres), Inter = le texte. font-display: optional, comme le reste du site : une police qui arrive après 100 ms ne bascule jamais en cours de lecture. */ @font-face { font-family: "Sora"; src: url("fonts/sora-600.woff2") format("woff2"); font-weight: 600; font-display: optional; } @font-face { font-family: "Inter"; src: url("fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: optional; } @font-face { font-family: "Inter"; src: url("fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: optional; } @font-face { font-family: "Inter"; src: url("fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: optional; } /* ─── 03 · Socle ───────────────────────────────────────────────────────────*/ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; min-width: 320px; background: var(--fond); color: var(--texte); font: 400 var(--t-3)/var(--i-3) Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; display: flex; flex-direction: column; min-height: 100dvh; /* le pied de page reste en bas d'une page courte (la 404) */ } img, svg, canvas { display: block; max-width: 100%; } /* Chiffres tabulaires là où des chiffres s'alignent (et nulle part ailleurs : Inter étire aussi le trait d'union). */ .tableau, .chiffres, .preuves__liste { font-variant-numeric: tabular-nums; } /* L'éclat derrière le globe et la saignée du globe ne doivent jamais faire défiler la page de côté. */ main { overflow-x: clip; flex: 1 0 auto; } .enveloppe { width: 100%; max-width: calc(var(--large) + 2 * var(--e-3)); margin: 0 auto; padding: 0 var(--e-3); } @media (min-width: 768px) { .enveloppe { padding: 0 var(--e-4); max-width: calc(var(--large) + 2 * var(--e-4)); } } .cache { /* texte pour lecteur d'écran seulement */ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .evitement { /* « Skip to content » */ position: absolute; left: var(--e-2); top: -100px; z-index: var(--z-evitement); background: var(--action); color: var(--sur-action); padding: var(--e-1) var(--e-2); border-radius: var(--rayon); font-weight: 500; } .evitement:focus { top: var(--e-2); } .icone { width: 16px; height: 16px; flex: none; fill: currentColor; } /* ─── 04 · Typographie ─────────────────────────────────────────────────────*/ h1, h2, h3 { margin: 0; font-family: Sora, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; font-weight: 600; color: var(--texte); text-wrap: balance; } h1 { font-size: var(--t-6); line-height: var(--i-6); letter-spacing: -.03em; } h2 { font-size: var(--t-5); line-height: var(--i-5); letter-spacing: -.022em; } h3 { font-size: var(--t-4); line-height: var(--i-4); letter-spacing: -.012em; } p { margin: 0; } .chapo { font-size: var(--t-4); line-height: var(--i-4); color: var(--texte-2); max-width: var(--mesure); text-wrap: pretty; } .texte { color: var(--texte-2); max-width: var(--mesure); text-wrap: pretty; } .fin { font-size: var(--t-2); line-height: var(--i-2); color: var(--texte-2); max-width: var(--mesure); text-wrap: pretty; } /* Le surtitre : le SEUL usage des majuscules espacées. Deux par page au plus, nommés en langage simple. */ .surtitre { font: 600 var(--t-1)/var(--i-1) Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--lien); } a { color: var(--lien); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--action); outline-offset: 3px; border-radius: var(--rayon-petit); } strong { font-weight: 600; color: var(--texte); } code { font: 500 var(--t-2)/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--texte); } /* ─── 05 · En-tête : une ligne, 72 px ──────────────────────────────────────*/ .entete { position: relative; z-index: var(--z-entete); } .entete__barre { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); height: var(--entete); } .marque { display: inline-flex; align-items: center; gap: var(--e-2); color: var(--texte); text-decoration: none; min-height: var(--cible); } .marque svg { display: block; color: var(--action); flex: none; } .marque__mot { font: 600 var(--t-3)/1 Sora, system-ui, sans-serif; letter-spacing: .06em; } .pages { display: flex; align-items: center; gap: var(--e-4); } .pages ul { display: flex; align-items: center; gap: var(--e-1); margin: 0; padding: 0; list-style: none; } .pages a { display: inline-flex; align-items: center; min-height: var(--cible); padding: 0 var(--e-2); color: var(--texte-2); text-decoration: none; border-radius: var(--rayon); font-weight: 500; font-size: var(--t-2); } .pages a:hover { color: var(--texte); background: var(--selection); } .pages a[aria-current] { color: var(--texte); box-shadow: inset 0 -2px 0 var(--action); border-radius: 0; } .pages__note { margin: 0; padding-left: var(--e-3); border-left: 1px solid var(--filet); font-size: var(--t-2); line-height: var(--i-2); color: var(--texte-2); white-space: nowrap; } @media (max-width: 1099px) { .pages__note { display: none; } } /* Le bouton de menu : 44 px, visible seulement sur téléphone. */ .menu-bouton { display: none; align-items: center; justify-content: center; flex: none; width: var(--cible); height: var(--cible); padding: 0; cursor: pointer; background: transparent; color: var(--texte); border: 0; border-radius: var(--rayon); box-shadow: inset 0 0 0 1px var(--filet-fort); } .menu-bouton:hover { background: var(--selection); } .menu-bouton:active { transform: translateY(1px); } .menu-bouton .icone { width: 20px; height: 20px; } .icone--ferme { display: none; } .menu-bouton[aria-expanded="true"] .icone--ouvre { display: none; } .menu-bouton[aria-expanded="true"] .icone--ferme { display: block; } @media (max-width: 859px) { .menu-bouton { display: inline-flex; } .pages { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border-radius: var(--rayon); box-shadow: inset 0 0 0 1px var(--filet-fort), var(--ombre); padding: var(--e-1); } .pages__note { display: block; border-left: 0; border-top: 1px solid var(--filet); padding: var(--e-2) var(--e-2) var(--e-1); white-space: normal; } .entete__barre { position: relative; } .entete.est-ouvert .pages { display: flex; } .pages ul { flex-direction: column; align-items: stretch; gap: 0; } .pages a { font-size: var(--t-3); } .pages a[aria-current] { box-shadow: inset 2px 0 0 var(--action); } } /* Sans script, le menu ne peut pas s'ouvrir : on le montre déplié. */ @media (scripting: none) { .menu-bouton { display: none; } .pages { display: flex; position: static; flex-wrap: wrap; box-shadow: none; padding: 0; background: none; flex-direction: row; } .pages ul { flex-direction: row; flex-wrap: wrap; } } /* ─── 06 · Boutons et liens d'action ─────────────────────────────────────── Le principal est plein et porte le seul chanfrein du site (coin haut droit). L'autre geste est un lien avec une flèche : un bouton plein et un bouton fantôme côte à côte, c'est le réflexe à éviter. Survol : un voile dont seule l'opacité bouge, et un léger soulèvement. Appui : le bouton s'enfonce. */ .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); } .bouton { display: inline-flex; border: 0; text-decoration: none; } .bouton__face { position: relative; display: inline-flex; align-items: center; gap: var(--e-1); min-height: var(--cible); padding: 0 28px 0 var(--e-3); background: var(--action); color: var(--sur-action); font: 500 var(--t-3)/1 Inter, system-ui, sans-serif; letter-spacing: .01em; white-space: nowrap; border-radius: var(--rayon) 0 var(--rayon) var(--rayon); clip-path: polygon(0 0, calc(100% - var(--chanfrein)) 0, 100% var(--chanfrein), 100% 100%, 0 100%); transition: transform var(--micro) var(--ease); } .bouton__face::before { content: ""; position: absolute; inset: 0; background: var(--voile); opacity: 0; transition: opacity var(--micro) var(--ease); } .bouton .icone { transition: transform var(--micro) var(--ease); } .bouton:focus-visible { outline-offset: 4px; border-radius: var(--rayon); } .bouton:hover .bouton__face { transform: translateY(-1px); } .bouton:hover .bouton__face::before { opacity: 1; } .bouton:hover .icone { transform: translateX(3px); } .bouton:hover .icone--bas { transform: translateY(3px); } .bouton:active .bouton__face { transform: translateY(1px) scale(.98); transition-duration: 60ms; } .lien-fleche { display: inline-flex; align-items: center; gap: var(--e-1); min-height: var(--cible); color: var(--lien); font-weight: 500; text-decoration: none; border-radius: var(--rayon); } .lien-fleche .icone { transition: transform var(--micro) var(--ease); } .lien-fleche:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; } .lien-fleche:hover .icone { transform: translateX(3px); } .lien-fleche:active { transform: translateY(1px); } @media (forced-colors: active) { .bouton { border: 1px solid transparent; } .bouton__face { clip-path: none; } } /* ─── 07 · Hero : le globe, seul visuel fort ─────────────────────────────── Asymétrique : le texte à gauche, le globe à droite qui déborde sur la marge. Quatre éléments de texte (surtitre, titre, chapeau, boutons) ; tout le reste est descendu dans les sections suivantes. Sous 1024 px : une seule colonne, le texte d'abord (le bouton reste dans le premier écran), puis le globe. */ .hero { position: relative; isolation: isolate; display: grid; gap: var(--e-5); align-items: center; padding: var(--e-2) 0 var(--e-6); } .hero__globe { position: relative; isolation: isolate; } .hero__texte { display: grid; gap: var(--e-3); justify-items: start; align-content: center; } .hero__texte .actions { margin-top: var(--e-1); } .hero__globe { min-width: 0; width: min(100%, 560px); justify-self: center; } @media (min-width: 1024px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--e-5); min-height: min(780px, calc(100dvh - var(--entete))); padding: var(--e-2) 0 var(--e-5); } .hero__globe { width: auto; justify-self: stretch; margin-right: calc(-1 * var(--saignee)); } } @media (min-width: 1280px) { .hero { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } } /* ─── 08 · Bande de preuves : quatre faits, ni cartes ni gros chiffres ─────*/ .preuves { border-top: 1px solid var(--filet); } .preuves__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4) var(--e-3); margin: 0; padding: var(--e-5) 0; } .preuves__liste dt { font: 600 var(--t-3)/var(--i-3) Inter, system-ui, sans-serif; color: var(--texte); } .preuves__liste dd { margin: 4px 0 0; font-size: var(--t-2); line-height: var(--i-2); color: var(--texte-2); } @media (min-width: 1024px) { .preuves__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-5); } } /* ─── 09 · Blocs de page ─────────────────────────────────────────────────── Pas de filet entre les sections : l'espace sépare. La section confidentialité est sur une bande teintée, du même thème, pour que la page ait un relief sans changer de monde. */ .bloc { padding: var(--e-7) 0; } .bloc--bande { background: var(--surface); } .bloc__tete { display: grid; gap: var(--e-2); margin-bottom: var(--e-5); max-width: 760px; } .bloc__tete--large { max-width: 880px; } @media (max-width: 767px) { .bloc { padding: var(--e-6) 0; } } #views, #ports, #privacy, #plans, #places, #verify { scroll-margin-top: calc(-1 * var(--e-5)); } /* ─── 10 · Le globe : la plaque et le vrai visuel ────────────────────────── Le visuel tourne dans une iframe du même domaine (assets/visuel/globe.html, voir tools/pages-src/cadre-globe.js). Il a son propre fond (celui de son thème, qui est celui du site) et dessine lui-même sa légende, ses cartes et ses boutons : le site n'en dessine rien. Avant son premier dessin, la scène montre une image fixe rendue par lui dans le même état ; l'iframe la remplace sur place. Le globe du hero n'a pas de plaque (.globe--nu) : il pose sur la page. Celui de l'explorateur est un instrument, donc une plaque : c'est, avec la capture du produit, la seule « carte » de la page. */ .globe { position: relative; display: grid; min-width: 0; background: var(--surface); border-radius: var(--rayon); box-shadow: inset 0 0 0 1px var(--filet-fort); overflow: hidden; } .globe--nu { background: none; box-shadow: none; overflow: visible; } .globe__scene { position: relative; width: 100%; aspect-ratio: 1; } .globe__scene img, .globe__scene iframe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .globe__scene iframe { border: 0; opacity: 0; } /* invisible tant que le visuel n'a pas fini son premier dessin */ .globe__scene.est-pret iframe { opacity: 1; } .globe__scene.est-pret picture { display: none; } /* En attendant le dessin, une sphère de la couleur de la mer : l'espace est tenu, rien ne saute. */ .globe__scene::before { content: ""; position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(circle at 50% 38%, var(--mer-centre), var(--mer-bord) 72%); box-shadow: 0 0 0 1px var(--filet-fort); } .globe__scene.a-image::before, .globe__scene.est-pret::before { display: none; } /* l'image ou le visuel prend la place */ .globe__erreur { margin: 0; padding: var(--e-2) var(--e-3); border-top: 1px solid var(--filet); color: var(--texte-2); font-size: var(--t-2); line-height: var(--i-2); } .globe__erreur[hidden] { display: none; } .haut { color: var(--positif); } .bas { color: var(--negatif); } /* ─── 11 · L'explorateur : cinq questions, un tableau, un globe ────────────*/ .onglets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-1); margin-bottom: var(--e-5); } .onglets > :last-child { grid-column: 1 / -1; } @media (min-width: 768px) { .onglets { grid-template-columns: repeat(5, minmax(0, 1fr)); } .onglets > :last-child { grid-column: auto; } } .onglet { position: relative; display: grid; gap: 2px; align-content: start; min-height: 64px; padding: 12px var(--e-2); text-align: left; cursor: pointer; font: inherit; color: var(--texte-2); background: transparent; border: 0; border-radius: var(--rayon); box-shadow: inset 0 0 0 1px var(--filet); } .onglet__question { font: 500 var(--t-3)/var(--i-3) Inter, system-ui, sans-serif; color: var(--texte); } .onglet__canal { font-size: var(--t-2); line-height: 20px; } .onglet::after { /* le trait du choix : il se déploie, il ne change pas de couleur */ content: ""; position: absolute; left: var(--e-2); right: var(--e-2); bottom: 0; height: 2px; background: var(--action); transform: scaleX(0); transform-origin: left; transition: transform var(--glisse) var(--ease); } .onglet:hover { background: var(--selection); } .onglet:active { transform: translateY(1px); } .onglet[aria-selected="true"] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--filet-fort); } .onglet[aria-selected="true"]::after { transform: scaleX(1); } .explorateur__corps { display: grid; gap: var(--e-5); align-items: start; } @media (min-width: 1024px) { .explorateur__corps { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--e-6); row-gap: var(--e-4); grid-template-areas: "panneau globe" "tableau globe"; } .explorateur__panneau { grid-area: panneau; } .explorateur__corps > .globe { grid-area: globe; } .explorateur__tableau { grid-area: tableau; } } .panneau { display: grid; gap: var(--e-3); align-content: start; } .panneau[hidden] { display: none; } .panneau__note { margin: 0; color: var(--texte-2); font-size: var(--t-2); line-height: var(--i-2); } /* Le tableau est l'équivalent accessible du globe : lignes au clavier, flèches pour passer de l'une à l'autre. Pas de filet sous chaque ligne : le survol et le choix éclairent la ligne. */ .tableau { width: 100%; border-collapse: collapse; font-size: var(--t-2); line-height: var(--i-2); } .tableau caption { text-align: left; padding-bottom: var(--e-1); color: var(--texte-2); } .tableau th { text-align: left; padding: var(--e-1) 12px; border-bottom: 1px solid var(--filet-fort); font-weight: 600; color: var(--texte-2); } .tableau td { padding: 6px 12px; color: var(--texte); } .tableau .num { text-align: right; } .tableau td.num { font-weight: 500; } .tableau [data-col="plan"], .tableau [data-col="change"] { display: none; text-align: right; } [data-vue="plan"] .tableau [data-col="plan"], [data-vue="change"] .tableau [data-col="change"] { display: table-cell; } .tableau tbody tr { cursor: pointer; } .tableau tbody tr:hover, .tableau tbody tr.est-actif { background: var(--selection); } .tableau tbody tr.est-actif td:first-child { box-shadow: inset 2px 0 0 var(--action); } .tableau tbody tr:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; border-radius: 0; } .tableau td.haut { color: var(--positif); } .tableau td.bas { color: var(--negatif); } @media (max-width: 479px) { .tableau th, .tableau td { padding-left: 8px; padding-right: 8px; } } /* Le fondu du panneau qu'on vient de choisir : la question a changé. */ @media (prefers-reduced-motion: no-preference) { .panneau:not([hidden]) { animation: panneau-entre var(--glisse) var(--ease); } } @keyframes panneau-entre { from { opacity: 0; } to { opacity: 1; } } /* ─── 12 · Le lieu : la capture du produit, ses chiffres dessous ───────────*/ .vitrine { margin: 0; } .vitrine img { width: 100%; height: auto; border-radius: var(--rayon); box-shadow: 0 0 0 1px var(--filet-fort), var(--ombre); } /* Sur téléphone la capture garde sa taille lisible et se fait défiler de côté, dans son cadre seulement. */ @media (max-width: 767px) { .vitrine__cadre { overflow-x: auto; padding-bottom: var(--e-2); } .vitrine__cadre img, .vue .vitrine__cadre img { width: 800px; max-width: none; } /* la seconde écrit plus fort que « .vue img » (page produit) */ } .vitrine figcaption { margin-top: var(--e-2); font-size: var(--t-2); line-height: var(--i-2); color: var(--texte-2); } .chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4) var(--e-3); margin: var(--e-5) 0 0; } @media (min-width: 768px) { .chiffres { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e-4); } } .chiffres div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; } .chiffres dd { margin: 0; font: 600 var(--t-4)/var(--i-4) Sora, system-ui, sans-serif; letter-spacing: -.01em; color: var(--texte); } .chiffres dt { font-size: var(--t-2); line-height: var(--i-2); color: var(--texte-2); } .chiffres .sur { font: 400 var(--t-2)/var(--i-2) Inter, system-ui, sans-serif; color: var(--texte-2); letter-spacing: 0; } .plan { /* l'étiquette Premium */ display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: var(--rayon-petit); font: 500 var(--t-1)/var(--i-1) Inter, system-ui, sans-serif; color: var(--lien); box-shadow: inset 0 0 0 1px var(--filet-fort); } /* ─── 13 · Confidentialité : liste typographique, le manifeste cité ────────*/ .confidentialite { display: grid; gap: var(--e-5); align-items: start; } @media (min-width: 1024px) { .confidentialite { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--e-7); } } .confidentialite__tete { display: grid; gap: var(--e-2); justify-items: start; } .manifeste { margin: var(--e-2) 0 0; max-width: 28em; } .manifeste pre { margin: 0; padding: var(--e-2) var(--e-3); border-radius: var(--rayon); background: var(--fond); box-shadow: inset 0 0 0 1px var(--filet-fort); overflow-x: auto; } .manifeste code { font-size: var(--t-3); } .manifeste figcaption { margin-top: var(--e-1); font-size: var(--t-2); line-height: var(--i-2); color: var(--texte-2); } .engagements { display: grid; gap: var(--e-4); margin: 0; padding: 0; list-style: none; } @media (min-width: 640px) { .engagements { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5) var(--e-4); } } .engagements h3 { margin-bottom: var(--e-1); } .engagements p { color: var(--texte-2); max-width: 36ch; text-wrap: pretty; } .fin--suite { margin-top: var(--e-5); } /* ─── 14 · Gratuit et Premium : deux colonnes, sans prix ─────────────────── Pas de tour de trois, pas de cartes : un filet fin en tête de chaque colonne, plus marqué (et à l'action) pour Premium. Les listes commencent à la même hauteur. */ .offres { display: grid; gap: var(--e-5); } @media (min-width: 768px) { .offres { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-6); } } .offre { display: grid; gap: var(--e-3); align-content: start; padding-top: var(--e-3); border-top: 1px solid var(--filet-fort); } .offre--premium { border-top: 2px solid var(--action); padding-top: calc(var(--e-3) - 1px); } /* le filet de 2 px ne décale pas le titre d'un pixel */ .offre ul { display: grid; gap: var(--e-1); margin: 0; padding: 0; list-style: none; color: var(--texte-2); } .offre li { display: flex; align-items: flex-start; gap: var(--e-2); } .offre li .icone { margin-top: 4px; color: var(--lien); } /* ─── 15 · Appel final : une seule intention ───────────────────────────────*/ .appel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4) var(--e-6); padding: var(--e-6) 0 var(--e-8); } .appel__texte { display: grid; gap: var(--e-2); } .appel h2 { font-size: var(--t-6); line-height: var(--i-6); letter-spacing: -.03em; } @media (max-width: 767px) { .appel { padding: var(--e-5) 0 var(--e-7); } } .appel--court { padding: var(--e-5) 0 var(--e-7); } /* pages produit et sécurité : l'appel final ne laisse pas un grand vide sous lui */ /* ─── 15 bis · Page introuvable (404.html) ─────────────────────────────────*/ .introuvable { display: grid; gap: var(--e-3); justify-items: start; padding: var(--e-7) 0 var(--e-8); } .introuvable h1 { max-width: 14em; } /* ─── 15 ter · Pages produit (/flow-globe/) et sécurité (/security/), session 2 ─ Mêmes jetons, même grille, mêmes règles. Chaque composant n'existe qu'une fois et n'est utilisé que par une section de ces pages : la répétition de mise en page est interdite sur une page (skill, §4.7). */ /* Surtitre précédé de la marque du produit : un seul élément de texte, le logo est un actif de marque. */ .insecable { white-space: nowrap; } .surtitre--produit { display: inline-flex; align-items: center; gap: 12px; } .surtitre--produit svg { width: 28px; height: 28px; color: var(--action); flex: none; } /* Hero avec une capture réelle du visuel (et non le globe vivant de l'accueil). Même grille que .hero. */ .hero__visuel { position: relative; isolation: isolate; min-width: 0; width: min(100%, 560px); justify-self: center; margin: 0; } .hero__visuel::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -12%; background: radial-gradient(closest-side, var(--lueur), transparent 72%); } .hero__visuel img { width: 100%; height: auto; border-radius: var(--rayon); box-shadow: 0 0 0 1px var(--filet-fort), var(--ombre); } .hero__visuel figcaption { margin-top: var(--e-2); color: var(--texte-2); } @media (min-width: 1024px) { .hero__visuel { width: auto; justify-self: stretch; } } /* Les trois colonnes : le texte, puis le tableau des vraies lignes du jeu de démonstration. */ .donnees { display: grid; gap: var(--e-5); align-items: start; } @media (min-width: 1024px) { .donnees { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--e-7); } } .donnees__texte { display: grid; gap: var(--e-2); justify-items: start; } .tableau--lecture { caption-side: bottom; } .tableau--lecture caption { padding: var(--e-2) 0 0; font-size: var(--t-2); line-height: var(--i-2); } .tableau--lecture tbody tr, .tableau--lecture tbody tr:hover { cursor: default; background: none; } .tableau--lecture td, .tableau--lecture th { padding-left: 0; padding-right: var(--e-3); } .tableau--lecture td.num, .tableau--lecture th.num { padding-right: 0; } /* Hero court (pages produit et sécurité) : le hero ne remplit pas l'écran, il tient dans le premier. */ @media (min-width: 1024px) { .hero--court { min-height: 0; padding: var(--e-4) 0 var(--e-6); } } /* Moment compact : moins d'air, pour que la page alterne les rythmes (le skill demande des moments larges et des moments serrés). */ .bloc--compact { padding: var(--e-6) 0; } .bloc--compact .bloc__tete { margin-bottom: var(--e-4); } /* Cinq vues, cinq cellules : deux images (une capture du visuel, un rendu du globe du site) et trois textes (Value, mesures, catégories). */ .vues { display: grid; gap: var(--e-5) var(--e-4); } /* Tablette : les deux images côte à côte, les trois textes dessous. */ @media (min-width: 768px) { .vues { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .vue__texte--base, .vues__suite { grid-column: 1 / -1; } .vues__suite { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-4); } } @media (min-width: 1024px) { .vues { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; } .vue--moitie { grid-column: span 6; } .vue__texte--base { grid-column: 1 / span 5; } .vues__suite { grid-column: 6 / span 7; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-4); } } .vue { margin: 0; display: grid; gap: var(--e-2); align-content: start; } .vue img { width: 100%; height: auto; border-radius: var(--rayon); box-shadow: 0 0 0 1px var(--filet-fort); } .vue figcaption, .vue__texte { display: grid; gap: var(--e-1); justify-items: start; } .vue figcaption p, .vue__texte p { color: var(--texte-2); max-width: var(--mesure); text-wrap: pretty; } .vues__suite { display: grid; gap: var(--e-4); align-content: start; } .vue__note { font-size: var(--t-2); line-height: var(--i-2); } .vue__texte { padding-top: var(--e-3); border-top: 1px solid var(--filet-fort); } /* Le lecteur d'un lieu : le globe (le seul de la page) et la fiche. */ .lecteur { display: grid; gap: var(--e-5); align-items: start; } @media (min-width: 1024px) { .lecteur { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--e-6); } } .lecteur__fiche { display: grid; gap: var(--e-3); align-content: start; } @media (min-width: 1024px) { .lecteur__fiche { min-height: 560px; } } .champ { display: grid; gap: var(--e-1); max-width: 20em; } .champ label { font: 500 var(--t-2)/var(--i-2) Inter, system-ui, sans-serif; color: var(--texte); } .champ select { min-height: var(--cible); padding: 0 var(--e-2); cursor: pointer; background: var(--surface); color: var(--texte); font: 400 var(--t-3)/1 Inter, system-ui, sans-serif; border: 0; border-radius: var(--rayon); box-shadow: inset 0 0 0 1px var(--texte-3); } .champ select:hover { box-shadow: inset 0 0 0 1px var(--texte-2); } .champ select:disabled { cursor: default; opacity: .6; } .fiche { display: grid; gap: var(--e-3); } .fiche__tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-2); flex-wrap: wrap; } .fiche__tete p { font-size: var(--t-2); line-height: var(--i-2); color: var(--texte-2); } .fiche__chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2) var(--e-3); margin: 0; font-variant-numeric: tabular-nums; } .fiche__chiffres div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; } .fiche__chiffres dd { margin: 0; font: 600 var(--t-4)/var(--i-4) Sora, system-ui, sans-serif; letter-spacing: -.01em; color: var(--texte); } .fiche__chiffres dt { font-size: var(--t-2); line-height: var(--i-2); color: var(--texte-2); } .fiche__listes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); font-variant-numeric: tabular-nums; } .fiche__listes:empty { display: none; } .fiche__titre { margin: 0 0 4px; font: 600 var(--t-2)/var(--i-2) Inter, system-ui, sans-serif; color: var(--texte); } .fiche ol, .fiche ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .fiche li { display: flex; justify-content: space-between; gap: var(--e-2); font-size: var(--t-2); line-height: var(--i-2); color: var(--texte-2); font-variant-numeric: tabular-nums; } .fiche li .num { color: var(--texte); font-weight: 500; text-align: right; } .fiche__alerte { padding: var(--e-1) var(--e-2); border-radius: var(--rayon); box-shadow: inset 0 0 0 1px var(--alerte); color: var(--texte); font-size: var(--t-2); line-height: var(--i-2); } .fiche__conc { display: grid; gap: 4px; } @media (max-width: 479px) { .fiche__chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Des réseaux réels : quatre lignes, en deux colonnes. */ .reseaux__liste { display: grid; gap: var(--e-4) var(--e-6); margin: 0; padding: 0; list-style: none; } @media (min-width: 768px) { .reseaux__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .reseaux__liste p { color: var(--texte-2); max-width: 40ch; text-wrap: pretty; } .intitule { display: block; margin-bottom: 4px; font: 600 var(--t-4)/var(--i-4) Sora, system-ui, sans-serif; letter-spacing: -.012em; color: var(--texte); } /* Pour chaque lecteur : les dix langues, écrites dans leur langue, puis trois lignes. */ .lecteurs { display: grid; gap: var(--e-5); } .langues { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); margin: 0; padding: 0; list-style: none; font: 600 var(--t-4)/var(--i-4) Sora, "Segoe UI", system-ui, sans-serif; letter-spacing: -.01em; color: var(--texte); } .lecteurs__lignes, .mentions { display: grid; gap: var(--e-3); margin: 0; } @media (min-width: 768px) { .lecteurs__lignes > div, .mentions > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: var(--e-5); } } .lecteurs__lignes dt, .mentions dt { font: 600 var(--t-3)/var(--i-3) Inter, system-ui, sans-serif; color: var(--texte); } .lecteurs__lignes dd, .mentions dd { margin: 4px 0 0; color: var(--texte-2); max-width: var(--mesure); text-wrap: pretty; } @media (min-width: 768px) { .lecteurs__lignes dd, .mentions dd { margin: 0; } } /* Sécurité : le manifeste cité en grand dans le hero. */ .manifeste--grand { max-width: none; } .manifeste--grand pre { padding: var(--e-4) var(--e-4); box-shadow: inset 0 0 0 1px var(--filet-fort), var(--ombre); background: var(--surface); } .manifeste--grand code { font-size: var(--t-4); line-height: var(--i-4); } .hero__visuel--texte { align-self: center; } /* Sans script, le lecteur d'un lieu ne peut rien faire : on ne montre que la fiche écrite dans la page. */ .est-absent { display: none; } @media (scripting: none) { .lecteur .globe, .lecteur .champ { display: none; } } /* Sécurité : les quatre engagements, une ligne chacun : l'engagement à gauche, ce qui le prouve à droite. */ .registre { display: grid; gap: var(--e-6); margin: 0; padding: 0; list-style: none; } .registre > li { display: grid; gap: var(--e-2); } @media (min-width: 1024px) { .registre > li { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--e-6); align-items: start; } } .registre p { color: var(--texte-2); max-width: var(--mesure); text-wrap: pretty; } .registre__preuve { display: grid; gap: var(--e-1); } .registre__verifier { font-size: var(--t-2); line-height: var(--i-2); } /* Sécurité : le seul lien sortant, avec la capture réelle du visuel vide. */ .lien-unique { display: grid; gap: var(--e-5); align-items: center; } @media (min-width: 1024px) { .lien-unique { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--e-6); } } .lien-unique__texte { display: grid; gap: var(--e-2); justify-items: start; } .lien-unique figure { margin: 0; } .lien-unique img { width: 100%; max-width: 540px; height: auto; border-radius: var(--rayon); box-shadow: 0 0 0 1px var(--filet-fort), var(--ombre); } .lien-unique figcaption { margin-top: var(--e-2); font-size: var(--t-2); line-height: var(--i-2); color: var(--texte-2); max-width: 540px; } /* Sécurité : trois faits sur le paquet. Même composition que la bande de preuves, à trois colonnes. */ @media (min-width: 1024px) { .preuves__liste--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .preuves__liste--trois dd { max-width: 34ch; } /* Sécurité : les gestes pour vérifier soi-même. Un verbe ouvre chaque ligne : c'est lui, l'étiquette. */ .gestes { display: grid; gap: var(--e-3); margin: 0; padding: 0; list-style: none; max-width: var(--mesure); } .gestes li { color: var(--texte-2); } /* Sécurité : la mention de certification, dite en grand sur la bande teintée. */ .declaration { display: grid; gap: var(--e-3); justify-items: start; } .declaration h2 { max-width: 26em; } /* ─── 15 quater · Pages de texte et d'information, session 3 ─────────────── Confidentialité, conditions, assistance, mentions légales, à propos. Mêmes jetons, même grille. Un document est fait pour être lu : une colonne de 62 caractères, des rubriques séparées par l'espace (pas de filet), et, quand il est long, un plan à gauche qui suit la lecture. Aucun surtitre, aucune numérotation de section. */ /* L'en-tête d'une page de texte : titre, chapeau, au plus un texte et un geste ; jamais de boutons empilés. */ .tete-page { display: grid; gap: var(--e-3); justify-items: start; max-width: 760px; padding: var(--e-5) 0 var(--e-6); } @media (min-width: 1024px) { .tete-page { padding: var(--e-6) 0; } } .tete-page .actions { margin-top: var(--e-1); } .adresse-grande { /* l'adresse d'assistance, en grand : on la copie ou on clique */ font: 600 var(--t-5)/var(--i-5) Sora, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; letter-spacing: -.022em; overflow-wrap: anywhere; } /* Le document : le plan (s'il y en a un) puis les rubriques. */ .document { display: grid; gap: var(--e-5); align-items: start; padding-bottom: var(--e-7); } @media (min-width: 1024px) { .document--plan { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); column-gap: var(--e-6); } } .document__corps { display: grid; gap: var(--e-6); min-width: 0; } .document__version { color: var(--texte-2); font-size: var(--t-2); line-height: var(--i-2); } /* Le plan de la page : un