/* Oscillante — feuille de style unique, mobile-first (base 360 px), min-width uniquement. Version 3 (2026-09-20) : le kit « Trotteuse » livré par le propriétaire (DESIGN-KIT.md) devient le système du site entier : Archivo, accent #ec3013, fond nuit #0e1727, angles à 0, aucune ombre, filets 1 px (cadres) et 2 px (sections), cadre trotteuse sur le primaire, le secondaire cadré et le champ actif. Les tokens historiques (--fond, --rubis, --surface…) gardent leur nom et prennent les valeurs du kit ; les tokens du kit (--osc-*, --color-*) vivent à côté. Deux faces posées par [data-face] sur ; aucun composant ne connaît sa face, seuls les tokens changent. */ /* ---------- Polices locales (woff2 auto-hébergées, licence OFL dans static/fonts/) ---------- */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/archivo-latin.woff2?v=2") format("woff2"); } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/geist-mono-latin.woff2?v=2") format("woff2"); } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/geist-mono-latin.woff2?v=2") format("woff2"); } /* ---------- Tokens partagés ---------- */ :root { --titre: "Archivo", ui-sans-serif, system-ui, sans-serif; --corps: "Archivo", ui-sans-serif, system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --sp-9: 104px; --fs-meta: 0.8125rem; /* 13px */ --fs-tableau-sm: 0.9375rem; /* 15px */ --fs-corps: 0.9375rem; /* 15px (kit : corps 400 14-15 px) ; 16px recto */ --fs-intertitre: 1.25rem; /* 20px */ --fs-titre-3: 1.625rem; /* 26px */ --fs-titre-2: 2.125rem; /* 34px */ --fs-titre-1: 2.75rem; /* 44px */ --fs-montant: 3.5rem; /* 56px */ --fs-affiche: clamp(2.5rem, 2rem + 3.6vw, 4.75rem); /* 40 → 76px : titres de hero */ /* Kit Trotteuse : angles à 0, aucun chanfrein, aucune ombre (DESIGN-KIT § 3) */ --chanfrein-taille: 0px; --coupe: none; --ombre-portee: none; /* Tokens du kit (design-handoff/tokens.css) */ --color-accent: #ec3013; --color-accent-400: #ff9783; --color-accent-600: #dd2b0f; --color-accent-700: #ae1800; /* Rouges PORTEURS DE TEXTE (B4 de l'audit a11y du 2026-09-20). #ec3013 avec #f3f2f2 ne donne que 3,76:1, sous le seuil de 1.4.3. Les fonds qui portent un libellé passent donc à #c4230e (5,23:1), survol #ae1800 (6,41:1), enfoncé #8e1200 (8,40:1). #ec3013 reste l'accent NON textuel (index de 6 px, filets, barres, chevrons, cadre trotteuse), où le seuil est de 3:1 et où il tient 4,27:1. */ --osc-accent-texte: #c4230e; --osc-accent-texte-hover: #ae1800; --osc-accent-texte-active: #8e1200; --color-neutral-300: #d7d3d3; --color-neutral-500: #9b9797; --color-neutral-600: #7d7979; --color-neutral-700: #605d5d; --osc-night: #0e1727; --osc-night-2: #18233a; --osc-night-3: #131c2e; --osc-night-4: #1f2c47; --osc-ink-on-night: #f3f2f2; --osc-rule: rgba(243,242,242,.45); /* #757a82, 4,15:1 sur la nuit (M3) */ --osc-rule-hover: rgba(243,242,242,.6); /* Le cadre trotteuse reste au réglage du kit : il entoure un bouton déjà plein (le rouge à texte tient 3,07:1 sur la nuit), sa limite n'est pas le seul indicateur du composant. L'éclaircir aurait changé le dessin du kit sans gain d'accessibilité. */ --osc-rule-frame: rgba(243,242,242,.22); --osc-rule-disabled: rgba(243,242,242,.15); --osc-rule-section: rgba(243,242,242,.18); --color-bg: #f3f2f2; --color-surface: #eae9e9; --color-text: #201e1d; --color-divider: color-mix(in srgb, #201e1d 40%, transparent); --osc-sweep-duration: 4s; --duree-apparition: 520ms; --easing: cubic-bezier(.2,.8,.2,1); --mx: 50%; --my: 50%; } /* ---------- Face verso (défaut) : bleu-noir de platine, le mouvement ---------- */ :root, [data-face="verso"] { --fond: #0e1727; /* nuit du kit */ --surface: #131c2e; /* night-3 */ --surface-2: #18233a; /* night-2 : survol, surface de champ */ --chanfrein: rgba(243,242,242,.18); /* filet de section du kit */ --texte: #f3f2f2; /* 16,3:1 sur --fond */ --texte-secondaire: #d7d3d3; /* chapeaux, notes */ --texte-doux: #9b9797; /* muet : 6,4:1 sur --fond */ --texte-inactif: #7d7979; --rubis: #ec3013; /* accent : index, primaire, focus, erreur ; jamais en couleur de texte sur nuit */ --rubis-texte: #ff9783; /* 8,2:1 sur --fond : flèche, écart, erreur */ --lien: #ff9783; --luminova: #D9C9A0; /* 11,2:1 sur --fond : badge « revendiqué » seulement */ --conforme: #3FA386; /* 5,8:1 sur --fond : statut « publié » */ --defavorable: #ff9783; --focus: #ff9783; --cadran-texture: rgba(255,255,255,.035); --voile: rgba(14,23,39,.55); --voile-fort: rgba(14,23,39,.92); --sur-photo: #f3f2f2; color-scheme: dark; } /* ---------- Face recto : cadran clair, la lecture ---------- */ [data-face="recto"] { /* Sur le fond clair, #9b9797 tombe à 2,59:1 : la face recto redéfinit le muet du kit (5,83:1). */ --color-neutral-500: #605d5d; --color-neutral-600: #605d5d; --fond: #f3f2f2; --surface: #eae9e9; --surface-2: #e2e0e0; --chanfrein: color-mix(in srgb, #201e1d 40%, transparent); --texte: #201e1d; /* 15,4:1 sur --fond */ --texte-secondaire: #605d5d; --texte-doux: #605d5d; /* 6,1:1 sur --fond */ --texte-inactif: #7d7979; --rubis: #ec3013; --rubis-texte: #ae1800; --lien: #ae1800; /* 7,3:1 sur --fond */ --luminova: #8A6D2F; --conforme: #1F6B54; --defavorable: #ae1800; --focus: #ec3013; --cadran-texture: rgba(32,30,29,.04); --voile: rgba(32,30,29,.5); --voile-fort: rgba(32,30,29,.86); --sur-photo: #f3f2f2; --ombre-portee: none; color-scheme: light; } * { box-sizing: border-box; } [hidden] { display: none !important; } /* 2.4.11 Focus non masqué : l'en-tête est collant (72 px, 58 px compact). Sans marge de défilement, un lien atteint en Maj+Tab se retrouve dessous. La marge vaut pour les ancres ET pour tout ce qui peut recevoir le focus (M7 de l'audit a11y). */ [id], a, button, input, select, textarea, summary, [tabindex] { scroll-margin-top: 88px; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--corps); font-size: var(--fs-corps); line-height: 1.65; font-variant-numeric: tabular-nums; min-width: 320px; overflow-x: hidden; } [data-face="recto"] body { font-size: 1rem; line-height: 1.65; } img, svg { max-width: 100%; display: block; } a { color: var(--lien); overflow-wrap: anywhere; } a:not(.bouton) { text-underline-offset: 0.18em; text-decoration-thickness: 1px; } h1, h2, h3 { font-family: var(--titre); font-weight: 800; line-height: 1.12; margin: 0 0 var(--sp-3); letter-spacing: -0.02em; } h1 { font-size: var(--fs-titre-2); } h2 { font-size: var(--fs-titre-3); } h3 { font-size: var(--fs-intertitre); } @media (min-width: 720px) { h1 { font-size: var(--fs-titre-1); } h2 { font-size: var(--fs-titre-2); } } p { margin: 0 0 var(--sp-4); max-width: 68ch; } .mono, .chiffre { font-family: var(--mono); font-variant-numeric: tabular-nums; } .etiquette { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-doux); } .etiquette .rubis { vertical-align: middle; margin-right: var(--sp-2); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } a, button, input, select, textarea { font-family: inherit; } /* ---------- Layout ---------- */ .conteneur { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--sp-4); } @media (min-width: 600px) { .conteneur { padding-inline: var(--sp-6); } } @media (min-width: 1100px) { .conteneur { padding-inline: var(--sp-7); } } .pile { display: flex; flex-direction: column; gap: var(--sp-5); } .pile-serre { display: flex; flex-direction: column; gap: var(--sp-2); } .grille { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; } @media (min-width: 720px) { .grille[data-cols="2"], .grille[data-cols="2-large"] { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .grille[data-cols="3"] { grid-template-columns: repeat(3, 1fr); } .grille[data-cols="2-large"] { grid-template-columns: 1.25fr 1fr; } } .section { padding-block: var(--sp-8); } main > .section:first-child { padding-top: var(--sp-7); } .bande-indice + .section { padding-top: var(--sp-7); } @media (min-width: 960px) { .bande-indice + .section { padding-top: var(--sp-8); } } .section + .section { padding-top: 0; } .page-revision main > .section + .section { border-top: 1px solid var(--chanfrein); padding-top: var(--sp-7); } @media (min-width: 960px) { .page-revision main > .section + .section { padding-top: var(--sp-8); } } main > .section:last-child { padding-bottom: var(--sp-7); } main > .bande-photo:last-child { margin-bottom: var(--sp-7); } @media (min-width: 960px) { main > .section:last-child { padding-bottom: var(--sp-8); } } /* Modules de service et de navigation sortis du
(défauts N12 et N13 de l'audit SEO du 2026-09-21). Ils gardent exactement le rythme vertical et les séparateurs des sections du corps de la page : le lecteur ne doit voir aucune différence, c'est l'index qui doit en voir une. */ .apres-contenu:empty { display: none; } .page-revision .apres-contenu > .section { border-top: 1px solid var(--chanfrein); padding-top: var(--sp-7); } @media (min-width: 960px) { .page-revision .apres-contenu > .section { padding-top: var(--sp-8); } } .apres-contenu > .section:last-child { padding-bottom: var(--sp-7); } .apres-contenu > .bande-photo:last-child { margin-bottom: var(--sp-7); } @media (min-width: 960px) { .apres-contenu > .section:last-child { padding-bottom: var(--sp-8); } } /* Listes de renvois : des liens, pas des phrases. */ .liste-liens-serree { display: flex; flex-direction: column; gap: var(--sp-2); } /* Index alphabétique des pages tarif, en bas de l'accueil (résidu du défaut B2). */ .index-marques { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2) var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } /* La cible occupe toute la case de la grille : « Lip » ne fait que 20 px de large en texte, et une cible de 20 x 35 px reste sous le minimum tactile. */ .index-marques a { display: block; padding-block: 5px; } /* Les libellés de ligne d'un tableau de tarifs sont parfois des liens (page pivot des types de mouvement) : ils mesuraient 14 px de haut. */ .grille-officielle th[scope="row"] a { display: inline-block; padding-block: 5px; } .marge-haute { margin-top: var(--sp-7); } .texte-doux { color: var(--texte-doux); } .centre-texte { text-align: center; } .sans-marge { margin: 0; } .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } /* En-tête de section : indice mono + titre + chapeau, alignés sur une même ligne de base en large */ .section-entete { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-6); align-items: end; } .section-entete h2, .section-entete h1 { margin: 0; font-size: 26px; line-height: 1.1; letter-spacing: -.02em; } @media (min-width: 720px) { .section-entete h2 { font-size: 30px; } .section-entete h1 { font-size: var(--fs-titre-1); } } .section-entete p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--texte-secondaire); } .section-entete .indice { font-family: var(--mono); font-size: 12px; color: var(--texte-doux); letter-spacing: .14em; text-transform: uppercase; justify-self: start; text-align: left; } .section-entete .indice::before { content: ""; display: inline-block; width: 24px; height: 2px; background: var(--rubis); vertical-align: middle; margin-right: var(--sp-3); } @media (min-width: 960px) { .section-entete { grid-template-columns: 1fr 1fr; column-gap: var(--sp-7); } .section-entete .indice { grid-column: 1 / -1; } .section-entete p { max-width: 40ch; justify-self: end; text-align: left; } } /* ---------- Skip link ---------- */ .saut-lien { position: absolute; left: var(--sp-3); top: -100px; background: var(--osc-accent-texte); color: #fff; padding: var(--sp-2) var(--sp-4); z-index: 300; } .saut-lien:focus { top: var(--sp-3); } /* ---------- Côtes de Genève ---------- */ .cotes-de-geneve { position: relative; background-image: repeating-radial-gradient(circle at 50% 120%, transparent 0 22px, var(--cadran-texture) 22px 24px); background-color: var(--surface-2); } /* ---------- En-tête / navigation ---------- */ .entete { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--fond) 94%, transparent); border-bottom: 2px solid rgba(243,242,242,.14); transition: background-color 240ms ease, border-color 240ms ease; backdrop-filter: blur(8px); view-transition-name: entete; } .entete-barre { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding-block: var(--sp-3); min-height: 72px; transition: min-height 240ms ease, padding 240ms ease; } .entete[data-compact="true"] { background: var(--fond); border-bottom-color: rgba(243,242,242,.14); backdrop-filter: none; } .entete[data-compact="true"] .entete-barre { min-height: 58px; padding-block: var(--sp-2); } .entete-sentinelle { position: absolute; top: 0; left: 0; height: 1px; width: 1px; pointer-events: none; } /* Sur le hero plein cadre, l'en-tête flotte transparent puis se fonce au défilement */ .entete[data-sur-photo="true"]:not([data-compact="true"]) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; } @media (prefers-reduced-motion: reduce) { .entete, .entete-barre { transition: none; } } .logo { display: flex; align-items: center; gap: 10px; font-family: var(--titre); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; color: var(--texte); text-decoration: none; min-height: 44px; white-space: nowrap; } .entete[data-sur-photo="true"]:not([data-compact="true"]) .logo, .entete[data-sur-photo="true"]:not([data-compact="true"]) .nav-principale a, .entete[data-sur-photo="true"]:not([data-compact="true"]) .burger { color: var(--sur-photo); } .logo svg { width: 24px; height: 24px; flex: none; transition: transform 500ms var(--easing); } .logo:hover svg, .logo:focus-visible svg { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { .logo svg { transition: none; } } .nav-principale { display: none; } @media (min-width: 960px) { .nav-principale { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; } .nav-principale a { color: var(--texte-secondaire); text-decoration: none; font-family: var(--titre); font-weight: 600; font-size: 14px; letter-spacing: 0; display: inline-flex; align-items: center; min-height: 44px; position: relative; } .nav-principale a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 8px; height: 1px; background: var(--rubis); transition: right 240ms var(--easing); } .nav-principale a:hover::after, .nav-principale a[aria-current="page"]::after { right: 0; } .nav-principale a:hover, .nav-principale a[aria-current="page"] { color: var(--texte); } .entete[data-sur-photo="true"]:not([data-compact="true"]) .nav-principale a { color: color-mix(in srgb, var(--sur-photo) 82%, transparent); } .entete[data-sur-photo="true"]:not([data-compact="true"]) .nav-principale a:hover, .entete[data-sur-photo="true"]:not([data-compact="true"]) .nav-principale a[aria-current="page"] { color: var(--sur-photo); } } .entete-actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; } /* « Demander des devis » : primaire M en cadre trotteuse dès 960 px ; en dessous il vit dans le menu ouvert, pleine largeur */ .entete-actions .entete-devis { display: none; } @media (min-width: 960px) { .entete-actions .entete-devis { display: inline-flex; } .entete-devis .osc-btn--nav { padding: 12px 16px; gap: 18px; white-space: nowrap; } } .nav-mobile-action { margin-top: var(--sp-5); } /* Bordure à 4,15:1 et non 1,68:1 : le bouton de menu est un composant d'interface (1.4.11, M3). */ .burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 1px solid rgba(243,242,242,.45); color: var(--texte); cursor: pointer; text-decoration: none; } @media (min-width: 960px) { .burger { display: none; } } .burger svg { width: 20px; height: 20px; } .nav-mobile { display: none; position: fixed; inset: 0; background: var(--fond); z-index: 150; padding: var(--sp-5) var(--sp-4); overflow-y: auto; } .nav-mobile[data-ouvert="true"] { display: block; } .nav-mobile-entete { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-6); } .nav-mobile ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .nav-mobile ul a { display: flex; align-items: center; min-height: 56px; color: var(--texte); text-decoration: none; font-family: var(--titre); font-weight: 800; font-size: var(--fs-titre-3); letter-spacing: -.02em; border-bottom: 1px solid var(--chanfrein); } .nav-mobile a .mono { font-size: var(--fs-meta); color: var(--texte-doux); width: 40px; } @media (min-width: 960px) { .nav-mobile { display: none !important; } } /* B2, repli sans JavaScript : le burger est doublé d'un lien vers #nav-mobile, qui ouvre le menu par :target. Les deux commandes occupent la même case (44 px, même dessin) : aucun saut visuel au moment où le script s'annonce (data-js). Avec script, seul le