/* ========================================================================== Synovizion — système de design -------------------------------------------------------------------------- Registre : sombre, quasi monochrome, typographie large, images plein cadre. Pourquoi ce choix, et pourquoi il a changé : la première version était un « document technique » sur fond papier. Mise côte à côte avec les réalisations de la maison — CEVEA, L'Étape — elle perdait. Un atelier dont le site est plus faible que ses propres travaux ruine son argumentaire avant de l'énoncer. Trois règles qui en découlent : 1. La marque est neutre, les IMAGES portent la couleur. Les captures clientes ont chacune leur univers ; un fond de marque coloré se battrait avec elles. Le quasi-monochrome les met en valeur. 2. Un seul accent — terre brûlée — réservé à l'action et aux repères. Jamais de dégradé, jamais deux accents. 3. Le mouvement se termine AVANT que le texte soit lisible. Rien ne reste translucide sous les yeux : c'était le défaut qui rendait la première version « molle ». ========================================================================== */ @font-face { font-family: "Bricolage"; src: url("/statique/polices/bricolage.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap; } @font-face { font-family: "Archivo"; src: url("/statique/polices/archivo.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Chasse"; src: url("/statique/polices/mono.woff2") format("woff2-variations"); font-weight: 100 800; font-display: swap; } /* ------------------------------------------------------------------ jetons */ /* Deux palettes, un seul jeu de rôles. Le thème se règle par l'attribut data-theme sur (voir SYNO_THEME dans .env) : « clair » ou « sombre ». Aucun composant ne connaît une couleur en dur — c'est ce qui permet de basculer l'ensemble du site en une ligne. */ :root { /* ---- Surfaces — papier chaud. Le blanc pur est le réglage par défaut de tout générateur ; le crème signe un imprimé et se lit mieux longtemps. */ --fond: #fbfaf7; --fond-2: #ffffff; --fond-3: #f3f0ea; --fond-4: #e9e4da; --filet: #e3ded4; --filet-2: #c9c1b3; /* ---- Encres */ --encre: #14120f; --encre-2: #55504a; --encre-3: #837c72; /* ---- Accent unique. Assombri par rapport au thème sombre : le même orange sur fond clair descend sous le seuil de contraste du texte. */ --signal: #c24d17; --signal-vif: #9d3d0f; --signal-voile:#fbeade; /* ---- Gravités, réservées au rapport d'audit */ --critique: #9d2b2b; --critique-voile: #fbeceb; --important: #8a5a12; --important-voile: #fdf4e4; --surveiller:#4a5568; --surveiller-voile:#f1f2f5; --conforme: #2c6a45; --conforme-voile: #eaf4ee; --ombre-portee: 0 18px 44px -26px rgba(24, 20, 16, .45); --ombre-menu: 0 20px 48px -22px rgba(24, 20, 16, .3); color-scheme: light; /* ---- Mesures */ --marge: clamp(20px, 4.5vw, 72px); --large: 1320px; --texte-large: 62ch; --rayon: 14px; --rayon-s: 8px; /* ---- Rythme typographique */ --t-mono: 12.5px; --t-petit: 15px; --t-corps: 17.5px; --t-chapeau: clamp(18px, 1.4vw, 22px); --t-h3: clamp(20px, 1.8vw, 26px); --t-h2: clamp(28px, 3.8vw, 50px); --t-h1: clamp(36px, 5.2vw, 76px); --t-geant: clamp(48px, 9vw, 120px); --sortie: 280ms cubic-bezier(.22,.68,.35,1); } :root[data-theme="sombre"] { --fond: #0a0c0f; --fond-2: #101318; --fond-3: #171b21; --fond-4: #1e232a; --filet: #242a32; --filet-2: #39414c; --encre: #f3f1ed; --encre-2: #a5abb4; --encre-3: #6b727c; --signal: #e2622f; --signal-vif: #f47a4a; --signal-voile:#2a150c; --critique: #ef7b72; --critique-voile: #2c1614; --important: #e2b25f; --important-voile: #2a2214; --surveiller:#93a3ba; --surveiller-voile:#1b2028; --conforme: #6fc79a; --conforme-voile: #14261d; --ombre-portee: 0 24px 60px -30px rgba(0,0,0,.9); --ombre-menu: 0 24px 60px -24px rgba(0,0,0,.9); color-scheme: dark; } /* -------------------------------------------------------- remise à zéro */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; background: var(--fond); } body { background: var(--fond); color: var(--encre); font-family: "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif; font-size: var(--t-corps); line-height: 1.55; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } button, input, textarea, select { font: inherit; color: inherit; } ::selection { background: var(--signal); color: #fff; } :focus-visible { outline: 2px solid var(--signal-vif); outline-offset: 3px; border-radius: 4px; } /* ----------------------------------------------------------- typographie */ h1, h2, h3, h4 { font-family: "Bricolage", "Archivo", sans-serif; font-weight: 700; line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance; } h1 { font-size: var(--t-h1); letter-spacing: -0.045em; } h2 { font-size: var(--t-h2); letter-spacing: -0.038em; } h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.025em; font-weight: 650; } p { text-wrap: pretty; } p + p { margin-top: 0.8em; } a { color: var(--encre); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--signal-vif); } strong, b { font-weight: 650; color: var(--encre); } .chapeau { font-size: var(--t-chapeau); line-height: 1.45; color: var(--encre-2); max-width: 46ch; } .petit { font-size: var(--t-petit); color: var(--encre-2); line-height: 1.55; } .discret { color: var(--encre-3); } .mono, code, kbd, samp { font-family: "Chasse", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-mono); letter-spacing: 0.02em; font-variant-ligatures: none; } .etiquette { font-family: "Chasse", ui-monospace, monospace; font-size: var(--t-mono); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--encre-3); display: inline-block; } .etiquette--signal { color: var(--signal-vif); } .numero { font-family: "Chasse", monospace; font-size: var(--t-mono); font-weight: 500; color: var(--signal); letter-spacing: 0.1em; } /* ------------------------------------------------------------- structure */ .rideau { width: 100%; max-width: var(--large); margin-inline: auto; padding-inline: var(--marge); } .rideau--plein { max-width: none; } .bande { padding-block: clamp(64px, 9vw, 140px); } .bande--serree { padding-block: clamp(44px, 5.5vw, 80px); } .bande--filet { border-top: 1px solid var(--filet); } .bande--creuse { background: var(--fond-2); } .grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); } /* La largeur se pose sur `grid-column-end`, jamais sur le raccourci `grid-column` : `.decale-N` ne fixe que le départ et écraserait sinon la largeur, réduisant l'élément à une seule colonne. */ .c-2 { grid-column-end: span 2; } .c-3 { grid-column-end: span 3; } .c-4 { grid-column-end: span 4; } .c-5 { grid-column-end: span 5; } .c-6 { grid-column-end: span 6; } .c-7 { grid-column-end: span 7; } .c-8 { grid-column-end: span 8; } .c-9 { grid-column-end: span 9; } .c-12{ grid-column-end: span 12; } .decale-1 { grid-column-start: 2; } .decale-2 { grid-column-start: 3; } /* Blocs alignés sur le bord droit de la grille. `.decale-N` sert à INDENTER depuis la gauche ; l'utiliser pour un bloc de droite le ramenait en colonne 3, donc à gauche, sous le bloc précédent. Ces classes posent la colonne de départ ET la fin, il n'y a plus d'interprétation possible. */ .fin-3 { grid-column: 10 / -1; } .fin-4 { grid-column: 9 / -1; } .fin-5 { grid-column: 8 / -1; } .fin-6 { grid-column: 7 / -1; } .fin-7 { grid-column: 6 / -1; } .fin-8 { grid-column: 5 / -1; } .fin-9 { grid-column: 4 / -1; } @media (max-width: 900px) { .grille > * { grid-column-start: 1 !important; grid-column-end: -1 !important; } } .tete { display: grid; grid-template-columns: auto 1fr; gap: 0 18px; align-items: baseline; padding-bottom: 18px; border-bottom: 1px solid var(--filet); margin-bottom: clamp(32px, 4vw, 56px); } .tete > .numero { padding-top: 8px; } .tete > p { grid-column: 2; max-width: var(--texte-large); margin-top: 14px; } /* --------------------------------------------------------------- bandeau */ .bandeau { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--fond) 82%, transparent); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--sortie), background var(--sortie); } .bandeau[data-defile="oui"] { border-bottom-color: var(--filet); background: color-mix(in srgb, var(--fond) 94%, transparent); } .bandeau .rideau { display: flex; align-items: center; gap: 14px; min-height: 72px; } .marque { display: inline-flex; align-items: center; gap: 9px; font-family: "Bricolage", sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -0.045em; color: var(--encre); text-decoration: none; margin-right: auto; } .marque i { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 18%, transparent); } .navigation { display: flex; align-items: center; gap: clamp(6px, 1.5vw, 26px); } .navigation a { color: var(--encre-2); text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 2px; position: relative; transition: color var(--sortie); } .navigation a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 3px; height: 1.5px; background: var(--signal); transition: right var(--sortie); } .navigation a:hover, .navigation a[aria-current="page"] { color: var(--encre); } .navigation a:hover::after, .navigation a[aria-current="page"]::after { right: 0; } .navigation .bouton::after { content: none; } @media (max-width: 860px) { .navigation .optionnel { display: none; } } /* --------------------------------------------------------------- boutons */ .bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; border: 1px solid var(--signal); border-radius: 999px; background: var(--signal); color: #fff; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--sortie), border-color var(--sortie), translate var(--sortie), color var(--sortie); } .bouton:hover { background: var(--signal-vif); border-color: var(--signal-vif); color: #fff; translate: 0 -2px; } .bouton:active { translate: 0 0; } .bouton--creux { background: transparent; color: var(--encre); border-color: var(--filet-2); } .bouton--creux:hover { background: var(--fond-3); color: var(--encre); border-color: var(--encre-3); } .bouton--nu { background: none; border-color: transparent; color: var(--signal-vif); padding-inline: 2px; border-radius: 4px; } .bouton--nu:hover { background: none; color: var(--signal-vif); text-decoration: underline; translate: 0; } /* ----------------------------------------------------------- première vue */ /* Le premier écran doit dire le métier, montrer une preuve et proposer une action — sans défilement. Tout le reste est secondaire. */ .vedette { padding-top: clamp(28px, 3vw, 44px); padding-bottom: clamp(36px, 4.5vw, 64px); } .vedette-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); gap: clamp(28px, 3.5vw, 56px); align-items: center; } @media (max-width: 1000px) { .vedette-grille { grid-template-columns: 1fr; gap: 32px; } } .vedette h1 { margin-top: 14px; } .vedette h1 em { font-style: normal; color: var(--signal); } .vedette-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: clamp(24px, 3vw, 38px); } /* Bandeau de repères sous la première vue : trois faits, pas trois slogans. */ .reperes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); background: var(--filet); } .reperes > div { background: var(--fond); padding: 20px 24px 20px 0; display: flex; flex-direction: column; gap: 6px; } .reperes b { font-family: "Bricolage", sans-serif; font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: -0.035em; line-height: 1; } /* Le cadre d'image de la première vue. */ .cadre { position: relative; border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--filet); background: var(--fond-2); aspect-ratio: 16 / 10; } .cadre img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .cadre figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 22px 16px; background: linear-gradient(to top, rgba(5,7,9,.96) 0%, rgba(5,7,9,.78) 45%, rgba(5,7,9,0) 100%); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } /* ------------------------------------------------------------ réalisations */ .oeuvre { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3.5vw, 56px); align-items: center; padding-block: clamp(32px, 4.5vw, 68px); border-top: 1px solid var(--filet); } .oeuvre:nth-child(even) > figure { order: 2; } @media (max-width: 900px) { .oeuvre { grid-template-columns: 1fr; gap: 22px; } .oeuvre:nth-child(even) > figure { order: 0; } } .oeuvre figure { border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--filet); background: var(--fond-2); aspect-ratio: 16 / 10; transition: border-color var(--sortie); } .oeuvre figure img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: scale 600ms cubic-bezier(.22,.68,.35,1); } .oeuvre:hover figure { border-color: var(--filet-2); } .oeuvre:hover figure img { scale: 1.02; } .oeuvre h3 { font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: -0.035em; } .jetons { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; } .jeton { font-family: "Chasse", monospace; font-size: 11.5px; letter-spacing: 0.06em; padding: 4px 10px; border: 1px solid var(--filet-2); border-radius: 999px; color: var(--encre-2); } /* ----------------------------------------------------------------- cartes */ .carte { border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--fond-2); padding: clamp(22px, 2.4vw, 34px); display: flex; flex-direction: column; gap: 10px; transition: border-color var(--sortie), background var(--sortie); } .carte:hover { border-color: var(--filet-2); background: var(--fond-3); } .carte--creuse { background: transparent; } .carte--pleine { background: var(--fond-3); border-color: transparent; } .carte--signal { border-color: var(--signal); } .prix { font-family: "Bricolage", sans-serif; font-size: clamp(28px, 3vw, 40px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin-top: 4px; } .prix small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--encre-3); } .liste-coches { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 9px; } .liste-coches li { display: grid; grid-template-columns: 16px 1fr; gap: 11px; font-size: var(--t-petit); color: var(--encre-2); line-height: 1.5; } .liste-coches li::before { content: ""; margin-top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); justify-self: center; } .enumeration { list-style: none; padding: 0; counter-reset: n; } .enumeration > li { counter-increment: n; display: grid; grid-template-columns: 38px 1fr; gap: 0 16px; padding-block: 22px; border-top: 1px solid var(--filet); } .enumeration > li::before { content: counter(n, decimal-leading-zero); font-family: "Chasse", monospace; font-size: var(--t-mono); font-weight: 500; color: var(--signal); padding-top: 6px; } .enumeration > li > p { grid-column: 2; color: var(--encre-2); margin-top: 6px; } .serie { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--filet); border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; } .serie > div { background: var(--fond-2); padding: clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column; gap: 8px; } .chiffre { font-family: "Bricolage", sans-serif; font-size: var(--t-geant); font-weight: 700; letter-spacing: -0.05em; line-height: 0.88; } .chiffre small { font-size: 0.4em; font-weight: 600; letter-spacing: -0.02em; } /* --------------------------------------------------------------- tableaux */ .tableau { width: 100%; border-collapse: collapse; font-size: 15.5px; } .tableau th, .tableau td { text-align: left; padding: 15px 16px 15px 0; border-bottom: 1px solid var(--filet); vertical-align: top; } .tableau td { color: var(--encre-2); } .tableau td b { color: var(--encre); } .tableau th { font-family: "Chasse", monospace; font-size: var(--t-mono); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-3); } .defilable { overflow-x: auto; } /* ------------------------------------------------------------- formulaire */ .champ { display: flex; flex-direction: column; gap: 7px; } .champ > label { font-size: var(--t-petit); font-weight: 550; color: var(--encre-2); } .champ input, .champ textarea, .champ select { width: 100%; padding: 13px 15px; background: var(--fond-2); border: 1px solid var(--filet-2); border-radius: var(--rayon-s); font-size: 16px; transition: border-color var(--sortie), box-shadow var(--sortie); } .champ input::placeholder, .champ textarea::placeholder { color: var(--encre-3); } .champ input:focus, .champ textarea:focus, .champ select:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-voile); } .champ textarea { min-height: 140px; resize: vertical; line-height: 1.55; } .console { display: flex; gap: 8px; align-items: stretch; border: 1px solid var(--filet-2); border-radius: 999px; background: var(--fond-2); padding: 6px 6px 6px 8px; max-width: 560px; transition: border-color var(--sortie), box-shadow var(--sortie); } .console:focus-within { border-color: var(--signal); box-shadow: 0 0 0 4px var(--signal-voile); } .console > .prefixe { display: grid; place-items: center; padding-inline: 12px 0; color: var(--encre-3); font-family: "Chasse", monospace; font-size: 13px; user-select: none; } .console input { flex: 1 1 auto; min-width: 0; border: 0; background: none; padding: 13px 6px; font-size: 16.5px; letter-spacing: -0.01em; } .console input:focus { outline: none; } .avertissement { border-left: 2.5px solid var(--critique); background: var(--critique-voile); color: var(--critique); padding: 12px 16px; border-radius: 0 var(--rayon-s) var(--rayon-s) 0; font-size: 15px; max-width: 620px; } .confirmation { border-left: 2.5px solid var(--conforme); background: var(--conforme-voile); color: var(--conforme); padding: 12px 16px; border-radius: 0 var(--rayon-s) var(--rayon-s) 0; font-size: 15px; } /* ------------------------------------------------------------------- pied */ .pied { border-top: 1px solid var(--filet); background: var(--fond-2); padding-block: clamp(48px, 6vw, 80px) 34px; font-size: 15px; } .pied a { color: var(--encre-2); text-decoration: none; } .pied a:hover { color: var(--signal-vif); } .pied ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; } .pied .mentions { margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--filet); display: flex; flex-wrap: wrap; gap: 8px 26px; color: var(--encre-3); font-size: 13.5px; } /* ====================================================================== */ /* Mouvement */ /* Deux familles distinctes : */ /* - à l'ouverture, une cascade sur la première vue (ce que l'utilisateur*/ /* voit sans défiler — c'était l'absence la plus flagrante) ; */ /* - au défilement, une apparition COURTE qui se termine bien avant que */ /* l'élément soit au centre de l'écran. Rien ne reste translucide. */ /* ====================================================================== */ @keyframes surgir { from { opacity: 0; translate: 0 34px; } to { opacity: 1; translate: 0 0; } } @keyframes devoiler { from { opacity: 0; clip-path: inset(0 0 102% 0); translate: 0 12px; } to { opacity: 1; clip-path: inset(0 0 -20% 0); translate: 0 0; } } @keyframes agrandir { from { opacity: 0; scale: 1.06; } to { opacity: 1; scale: 1; } } @media (prefers-reduced-motion: no-preference) { .ouverture > * { animation: surgir 760ms cubic-bezier(.16,.84,.28,1) both; animation-delay: calc(var(--rang, 0) * 90ms); } .ouverture-image { animation: agrandir 1100ms cubic-bezier(.16,.84,.28,1) both; animation-delay: 180ms; } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .anime { animation: surgir both linear; animation-timeline: view(); /* Se termine à « cover 8 % » : l'élément est pleinement opaque dès qu'il est réellement lisible. C'est la correction du défaut qui rendait la version précédente terne. */ animation-range: entry 15% cover 8%; } .anime-devoile { animation: devoiler both linear; animation-timeline: view(); animation-range: entry 15% cover 10%; } } } /* Navigateurs sans animation-timeline : réveil par IntersectionObserver. */ @media (prefers-reduced-motion: no-preference) { .js-anime { opacity: 0; translate: 0 34px; } .js-anime.vu { opacity: 1; translate: 0 0; transition: opacity 700ms cubic-bezier(.16,.84,.28,1), translate 700ms cubic-bezier(.16,.84,.28,1); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } } /* ====================================================================== */ /* Console d'audit */ /* ====================================================================== */ .console-sortie { margin-top: 22px; max-width: 660px; } .console-liste { list-style: none; padding: 10px 0 0; margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--t-mono); } .console-ligne { display: grid; grid-template-columns: 16px 1fr; align-items: center; gap: 10px; padding: 3px 0; color: var(--encre-3); animation: surgir 280ms cubic-bezier(.16,.84,.28,1) both; } .console-ligne[data-etat="fait"] { color: var(--encre-2); } .console-puce { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--filet-2); justify-self: center; } .console-ligne[data-etat="cours"] .console-puce { border-color: var(--signal); background: var(--signal); animation: battement 900ms ease-in-out infinite; } .console-ligne[data-etat="fait"] .console-puce { border-color: var(--conforme); background: var(--conforme); animation: none; } @keyframes battement { 0%,100% { opacity: 1 } 50% { opacity: .25 } } .resume { border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--fond-2); overflow: hidden; } .resume-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid var(--filet); background: var(--fond-3); } .resume-societe { font-weight: 600; letter-spacing: -0.02em; margin-top: 3px; } .resume-compte { display: flex; align-items: center; gap: 11px; flex: none; } .chiffre-court { font-family: "Bricolage", sans-serif; font-size: 42px; font-weight: 700; letter-spacing: -0.045em; line-height: 1; color: var(--critique); } .resume-liste { list-style: none; padding: 4px 22px; margin: 0; } .resume-liste > li { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 4px 16px; align-items: baseline; padding-block: 14px; border-bottom: 1px solid var(--filet); } .resume-liste > li:last-child { border-bottom: 0; } .resume-liste p { font-weight: 550; letter-spacing: -0.015em; } @media (max-width: 620px) { .resume-liste > li { grid-template-columns: 1fr; } } .resume-pied { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 22px; border-top: 1px solid var(--filet); background: var(--fond-3); } .pastille { display: inline-flex; align-items: center; gap: 7px; font-family: "Chasse", monospace; font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px 3px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; } .pastille::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .g-critique { color: var(--critique); background: var(--critique-voile); } .g-important { color: var(--important); background: var(--important-voile); } .g-surveiller { color: var(--surveiller); background: var(--surveiller-voile); } .g-conforme { color: var(--conforme); background: var(--conforme-voile); } .g-indetermine{ color: var(--encre-3); background: var(--fond-3); } /* ====================================================================== */ /* Rapport d'audit */ /* ====================================================================== */ .rapport-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid var(--filet); } .rapport-tete h1 { font-size: clamp(30px, 4.4vw, 54px); overflow-wrap: anywhere; } .priorites { margin-top: 34px; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--fond-2); overflow: hidden; } .priorites-tete { padding: 22px 26px; background: var(--fond-3); border-bottom: 1px solid var(--filet); } .priorites-tete h2 { font-size: clamp(22px, 2.2vw, 28px); } .priorites-liste { list-style: none; padding: 0 26px; margin: 0; } .priorites-liste > li { display: grid; grid-template-columns: 36px 1fr; gap: 0 16px; padding-block: 22px; border-bottom: 1px solid var(--filet); } .priorites-liste > li:last-child { border-bottom: 0; } .priorites-rang { color: var(--signal); padding-top: 6px; } .constat { border-left: 3px solid var(--filet); padding: 2px 0 2px 22px; margin-bottom: 28px; max-width: var(--texte-large); } .g-bord-critique { border-left-color: var(--critique); } .g-bord-important { border-left-color: var(--important); } .g-bord-surveiller { border-left-color: var(--surveiller); } .g-bord-conforme { border-left-color: var(--conforme); } .g-bord-indetermine { border-left-color: var(--filet); opacity: .8; } details > summary { cursor: pointer; font-family: "Chasse", monospace; font-size: var(--t-mono); letter-spacing: 0.06em; color: var(--encre-3); list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; } details > summary::-webkit-details-marker { display: none; } details > summary::before { content: "+"; display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--filet-2); border-radius: 4px; font-size: 12px; line-height: 1; } details[open] > summary::before { content: "−"; } details > summary:hover { color: var(--signal-vif); } details code { display: block; background: var(--fond-3); border: 1px solid var(--filet); border-radius: var(--rayon-s); padding: 11px 13px; overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.5; color: var(--encre-2); } /* Le mur doux : diagnostic offert, plan de correction contre un échange. */ .retenue { position: relative; border: 1px solid var(--signal); border-radius: var(--rayon); background: linear-gradient(to bottom, var(--fond-3), var(--fond-2)); padding: clamp(26px, 3.4vw, 44px); margin-top: 40px; overflow: hidden; } .retenue::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--signal); } .retenue h2 { font-size: clamp(24px, 2.8vw, 36px); } .suite { border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--fond-2); padding: clamp(24px, 3vw, 38px); } .preuve { display: grid; grid-template-columns: auto 1fr; gap: 6px 30px; align-items: center; border-left: 3px solid var(--signal); padding: 20px 0 20px 28px; } .preuve p { max-width: 44ch; color: var(--encre-2); } @media (max-width: 720px) { .preuve { grid-template-columns: 1fr; gap: 12px; padding-left: 20px; } } /* ----------------------------------------------------------- utilitaires */ .pile { display: flex; flex-direction: column; } .ligne { display: flex; align-items: center; flex-wrap: wrap; } .g-6 { gap: 6px } .g-10 { gap: 10px } .g-14 { gap: 14px } .g-20 { gap: 20px } .g-28 { gap: 28px } .g-40 { gap: 40px } .mt-8 { margin-top: 8px } .mt-16 { margin-top: 16px } .mt-24 { margin-top: 24px } .mt-40 { margin-top: 40px } .mt-56 { margin-top: 56px } .mesure { max-width: var(--texte-large); } /* Largeur de titre de page. Portée par le h1 lui-même : `ch` se calcule sur la police de l'élément, et non sur celle de son parent. */ .titre-page { max-width: 14ch; } .insecable { white-space: nowrap; } .rien { display: none; } .saut-lien { position: absolute; left: -9999px; background: var(--signal); color: #fff; padding: 10px 16px; z-index: 100; } .saut-lien:focus { left: 12px; top: 12px; } /* ====================================================================== */ /* Démonstration de responsivité */ /* --------------------------------------------------------------------- */ /* Le cadre change RÉELLEMENT de largeur, et le contenu se réagence par */ /* container query — ce n'est pas une vidéo ni une image animée : c'est */ /* la mécanique du métier, exécutée devant le visiteur. Un studio qui */ /* montre une capture animée de responsivité ment un peu ; celui-ci */ /* montre le comportement lui-même. */ /* ====================================================================== */ .demonstration { display: flex; flex-direction: column; gap: 14px; } .scene { width: 100%; max-width: 580px; aspect-ratio: 16 / 11; display: grid; place-items: center; margin-inline: auto; } .appareil { width: 100%; height: 78%; border: 1px solid var(--filet-2); border-radius: 12px; background: var(--fond-2); overflow: hidden; display: flex; flex-direction: column; position: relative; box-shadow: var(--ombre-portee); } /* Chrome de navigateur — s'efface quand le cadre devient un téléphone. */ .appareil-barre { flex: none; display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--filet); background: var(--fond-3); } .appareil-barre i { width: 7px; height: 7px; border-radius: 50%; background: var(--filet-2); flex: none; } .appareil-adresse { flex: 1 1 auto; height: 16px; margin-left: 6px; border-radius: 999px; background: var(--fond-4); display: flex; align-items: center; padding-inline: 9px; font-family: "Chasse", monospace; font-size: 8.5px; color: var(--encre-3); letter-spacing: .04em; overflow: hidden; white-space: nowrap; } /* Encoche — n'apparaît qu'en position téléphone. */ .appareil-encoche { position: absolute; top: 6px; left: 50%; translate: -50% 0; width: 46px; height: 5px; border-radius: 999px; background: var(--filet-2); opacity: 0; z-index: 3; } /* L'écran est le conteneur de requête : tout ce qu'il contient réagit à SA largeur, pas à celle de la fenêtre. */ .ecran { container-type: inline-size; flex: 1 1 auto; overflow: hidden; padding: 10px; display: flex; flex-direction: column; gap: 9px; } .faux-nav { display: flex; align-items: center; gap: 7px; padding-bottom: 8px; border-bottom: 1px solid var(--filet); } .faux-marque { width: 40px; height: 7px; border-radius: 2px; background: var(--encre); } .faux-liens { display: flex; gap: 6px; margin-left: auto; } .faux-liens span { width: 22px; height: 5px; border-radius: 2px; background: var(--filet-2); } .faux-bouton { width: 34px; height: 12px; border-radius: 999px; background: var(--signal); } .faux-heros { display: flex; gap: 10px; align-items: center; } .faux-image { flex: 0 0 34%; } .faux-titre { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; } .faux-titre b { height: 11px; border-radius: 3px; background: var(--encre); display: block; } .faux-titre b:nth-child(2) { width: 70%; } .faux-titre b:nth-child(3) { width: 45%; background: var(--signal); } .faux-image { flex: 0 0 34%; aspect-ratio: 16 / 10; border-radius: 6px; background: linear-gradient(135deg, var(--fond-4), var(--filet)); } .faux-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } .faux-carte { border: 1px solid var(--filet); border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 4px; background: var(--fond-3); } .faux-carte u { display: block; height: 5px; width: 60%; border-radius: 2px; background: var(--signal); } .faux-carte s { display: block; height: 4px; border-radius: 2px; background: var(--filet-2); } .faux-carte s:nth-of-type(2) { width: 75%; } /* --- la bascule : c'est ici que se joue la démonstration --------------- */ @container (max-width: 320px) { .faux-heros { flex-direction: column; align-items: stretch; gap: 8px; } .faux-image { flex: none; width: 100%; aspect-ratio: 16 / 9; order: -1; } /* Une colonne, et les trois cartes conservées : les empiler est la bonne réponse responsive, en masquer une laisserait un vide en bas d'écran — et surtout, un contenu ne disparaît pas parce que l'écran rétrécit. */ .faux-grille { grid-template-columns: 1fr; } .faux-liens { display: none; } .faux-bouton { width: 26px; } .faux-titre b { height: 9px; } } .legende { display: flex; align-items: center; gap: 10px; justify-content: center; min-height: 20px; } .legende span { position: absolute; font-family: "Chasse", monospace; font-size: var(--t-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3); } .legende { position: relative; } /* ------------------------------------------------------- l'animation --- */ @keyframes morphose { 0%, 24% { width: 100%; height: 78%; border-radius: 12px; } 38%, 62% { width: 36%; height: 100%; border-radius: 26px; } 76%, 100% { width: 100%; height: 78%; border-radius: 12px; } } @keyframes chrome-navigateur { 0%, 24% { opacity: 1; max-height: 40px; } 36%, 64% { opacity: 0; max-height: 0; } 76%, 100% { opacity: 1; max-height: 40px; } } @keyframes chrome-telephone { 0%, 26% { opacity: 0; } 40%, 60% { opacity: 1; } 74%, 100% { opacity: 0; } } @keyframes legende-large { 0%, 24% { opacity: 1; } 34%, 66% { opacity: 0; } 76%, 100% { opacity: 1; } } @keyframes legende-etroite { 0%, 28% { opacity: 0; } 40%, 60% { opacity: 1; } 72%, 100% { opacity: 0; } } @media (prefers-reduced-motion: no-preference) { .appareil { animation: morphose 13s cubic-bezier(.65,0,.35,1) infinite; } .appareil-barre { animation: chrome-navigateur 13s cubic-bezier(.65,0,.35,1) infinite; } .appareil-encoche { animation: chrome-telephone 13s cubic-bezier(.65,0,.35,1) infinite; } .legende .large { animation: legende-large 13s cubic-bezier(.65,0,.35,1) infinite; } .legende .etroite { animation: legende-etroite 13s cubic-bezier(.65,0,.35,1) infinite; } /* Hors champ, on arrête tout : animer une largeur provoque un calcul de mise en page à chaque image, il n'y a aucune raison de le payer quand personne ne regarde. */ .demonstration[data-visible="non"] * { animation-play-state: paused !important; } } @media (prefers-reduced-motion: reduce) { .appareil { width: 100%; height: 78%; } .appareil-encoche { display: none; } .legende .etroite { display: none; } } /* ====================================================================== */ /* Illustration « application métier » */ /* Un tableau de bord qui se remplit : lignes qui arrivent, barres qui */ /* montent. Abstrait volontairement — ce n'est la donnée de personne. */ /* ====================================================================== */ .tableau-vivant { border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--fond-3); padding: 18px; overflow: hidden; display: flex; flex-direction: column; gap: 14px; } .tv-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .tv-barres { display: flex; align-items: flex-end; gap: 6px; height: 68px; } .tv-barres i { flex: 1 1 auto; border-radius: 3px 3px 0 0; background: var(--filet-2); transform-origin: bottom; height: var(--h, 40%); } .tv-barres i:nth-child(4) { background: var(--signal); } .tv-lignes { display: flex; flex-direction: column; gap: 7px; } .tv-ligne { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--filet); border-radius: 7px; background: var(--fond-2); } .tv-ligne u { display: block; height: 6px; border-radius: 2px; background: var(--filet-2); } .tv-ligne em { font-family: "Chasse", monospace; font-size: 10.5px; font-style: normal; color: var(--encre-3); } @keyframes barre-monte { from { height: 8%; } } @keyframes ligne-arrive { from { opacity: 0; translate: 0 10px; } } @media (prefers-reduced-motion: no-preference) { .tableau-vivant[data-visible="oui"] .tv-barres i { animation: barre-monte 900ms cubic-bezier(.16,.84,.28,1) both; animation-delay: calc(var(--i, 0) * 90ms); } .tableau-vivant[data-visible="oui"] .tv-ligne { animation: ligne-arrive 620ms cubic-bezier(.16,.84,.28,1) both; animation-delay: calc(700ms + var(--i, 0) * 130ms); } .tableau-vivant:not([data-visible="oui"]) .tv-ligne { opacity: 0; } } /* Une figure qui porte une démonstration animée n'a ni cadre ni fond : le cadre, c'est l'appareil lui-même. */ .figure-nue { border: 0 !important; background: none !important; aspect-ratio: auto !important; overflow: visible !important; } /* ====================================================================== */ /* Mosaïque des métiers — première vue */ /* Leçon commune aux studios de référence : on doit savoir POUR QUI ils */ /* travaillent avant d'avoir défilé. Une mosaïque numérotée le dit en un */ /* regard, là où un paragraphe demande une lecture. */ /* ====================================================================== */ .vedette-grille--metiers { align-items: center; } .mosaique { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--filet); border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; } .tuile { background: var(--fond-2); padding: clamp(18px, 2vw, 26px); display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: var(--encre); min-height: clamp(120px, 13vw, 168px); justify-content: flex-end; position: relative; transition: background var(--sortie); } .tuile .numero { position: absolute; top: 16px; left: clamp(18px,2vw,26px); } .tuile:hover { background: var(--fond-3); color: var(--encre); } .tuile:hover .tuile-nom { color: var(--signal-vif); } .tuile-nom { font-family: "Bricolage", sans-serif; font-size: clamp(17px, 1.6vw, 22px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; transition: color var(--sortie); } @media (max-width: 520px) { .mosaique { grid-template-columns: 1fr; } } /* Bandeau de preuve : trois noms vérifiables plutôt qu'un chiffre creux. */ .bandeau-preuve { display: flex; align-items: center; flex-wrap: wrap; gap: 12px clamp(16px, 3vw, 40px); margin-top: clamp(30px, 4vw, 52px); padding-block: 20px; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); } .preuve-noms { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-right: auto; } .preuve-noms b { font-family: "Bricolage", sans-serif; font-size: clamp(16px, 1.5vw, 20px); font-weight: 650; letter-spacing: -0.025em; } .preuve-noms i { width: 4px; height: 4px; border-radius: 50%; background: var(--signal); } /* ------------------------------------------------------------ métiers --- */ .metiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--filet); border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; } @media (max-width: 860px) { .metiers { grid-template-columns: 1fr; } } .metier { background: var(--fond); padding: clamp(24px, 2.8vw, 40px); display: flex; flex-direction: column; scroll-margin-top: 100px; } .metier-tete { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; align-items: baseline; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--filet); } .metier h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; } .metier-cas { font-size: var(--t-petit); line-height: 1.55; color: var(--encre-2); border-left: 2px solid var(--signal); padding: 4px 0 4px 16px; margin-top: auto; } /* ====================================================================== */ /* PREMIER ÉCRAN — pleine hauteur, trame vivante en fond */ /* Le contrat : on comprend le métier sans lire plus de vingt mots. */ /* ====================================================================== */ .premiere { position: relative; min-height: min(92svh, 860px); display: grid; align-items: center; overflow: hidden; border-bottom: 1px solid var(--filet); } .premiere > .rideau { position: relative; z-index: 2; padding-block: clamp(48px, 7vw, 96px); } #trame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; /* La trame s'efface vers le bas pour ne jamais concurrencer le texte. */ mask-image: radial-gradient(120% 100% at 70% 40%, #000 30%, transparent 78%); } .premiere::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, transparent 55%, var(--fond) 100%); } .titre-geant { font-family: "Bricolage", sans-serif; font-size: clamp(38px, 6.4vw, 92px); font-weight: 700; line-height: 0.9; letter-spacing: -0.05em; text-wrap: balance; max-width: 17ch; } .titre-geant em { font-style: normal; color: var(--signal); } .premiere .chapeau { font-size: clamp(18px, 1.6vw, 24px); max-width: 40ch; } /* Flèche de défilement — la seule invitation, discrète. */ .appel-defilement { position: absolute; left: var(--marge); bottom: 26px; z-index: 2; display: inline-flex; align-items: center; gap: 10px; color: var(--encre-3); text-decoration: none; } .appel-defilement i { width: 1px; height: 26px; background: var(--filet-2); position: relative; overflow: hidden; } .appel-defilement i::after { content: ""; position: absolute; inset: 0; background: var(--signal); animation: filet-descend 2.2s cubic-bezier(.6,0,.4,1) infinite; } @keyframes filet-descend { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(100%); } } /* ====================================================================== */ /* Bandeau défilant — donne le mouvement et énumère sans faire une liste */ /* ====================================================================== */ .ruban { border-block: 1px solid var(--filet); background: var(--fond-2); overflow: hidden; padding-block: 18px; display: flex; user-select: none; } .ruban-piste { display: flex; flex: none; align-items: center; gap: 34px; padding-right: 34px; animation: glisse 42s linear infinite; } .ruban span { font-family: "Bricolage", sans-serif; font-size: clamp(20px, 2.6vw, 34px); font-weight: 650; letter-spacing: -0.03em; white-space: nowrap; color: var(--encre); } .ruban i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); flex: none; } @keyframes glisse { to { transform: translateX(-100%); } } .ruban:hover .ruban-piste { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .ruban-piste { animation: none; } } /* ====================================================================== */ /* Triptyque — trois blocs, une illustration, douze mots */ /* ====================================================================== */ .triptyque { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--filet); border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; } @media (max-width: 900px) { .triptyque { grid-template-columns: 1fr; } } .volet { background: var(--fond-2); padding: clamp(24px, 2.6vw, 38px); display: flex; flex-direction: column; gap: 14px; transition: background var(--sortie); } .volet:hover { background: var(--fond-3); } .volet-image { aspect-ratio: 4 / 3; border-radius: var(--rayon-s); background: var(--fond); border: 1px solid var(--filet); display: grid; place-items: center; overflow: hidden; margin-bottom: 4px; } .volet-image svg { width: 78%; height: auto; overflow: hidden; } .volet h3 { font-size: clamp(21px, 2vw, 27px); font-weight: 700; } .volet p { font-size: var(--t-petit); color: var(--encre-2); } /* --- animation des illustrations : les traits se dessinent ------------ */ .trait-anime { stroke-dasharray: var(--long, 300); stroke-dashoffset: var(--long, 300); } .bloc-anime { opacity: 0; } @media (prefers-reduced-motion: no-preference) { .volet-image[data-visible="oui"] .trait-anime { animation: tracer 1100ms cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(var(--i, 0) * 130ms); } .volet-image[data-visible="oui"] .bloc-anime { animation: poser 600ms cubic-bezier(.16,.84,.28,1) forwards; animation-delay: calc(var(--i, 0) * 110ms); } .volet-image[data-visible="oui"] .pulse { animation: onde 2.8s ease-out infinite; animation-delay: calc(var(--i, 0) * 900ms); } } @media (prefers-reduced-motion: reduce) { .trait-anime { stroke-dashoffset: 0; } .bloc-anime { opacity: 1; } } @keyframes tracer { to { stroke-dashoffset: 0; } } @keyframes poser { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes onde { 0% { transform: scale(.35); opacity: 0; } 25% { opacity: .8; } 100% { transform: scale(1); opacity: 0; } } /* ====================================================================== */ /* Bandeau de clôture */ /* ====================================================================== */ .cloture { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 60px); align-items: center; } @media (max-width: 820px) { .cloture { grid-template-columns: 1fr; } } /* ------------------------------------------------- navigation repliée --- */ .menu-compact { display: none; position: relative; } .menu-compact > summary { list-style: none; cursor: pointer; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--filet-2); border-radius: 999px; color: var(--encre); } .menu-compact > summary::-webkit-details-marker { display: none; } .menu-compact > summary::before { content: none; } .menu-compact > summary span, .menu-compact > summary span::before, .menu-compact > summary span::after { display: block; width: 16px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--sortie), opacity var(--sortie); } .menu-compact > summary span { position: relative; } .menu-compact > summary span::before { content: ""; position: absolute; top: -5px; } .menu-compact > summary span::after { content: ""; position: absolute; top: 5px; } .menu-compact[open] > summary span { background: transparent; } .menu-compact[open] > summary span::before { transform: translateY(5px) rotate(45deg); } .menu-compact[open] > summary span::after { transform: translateY(-5px) rotate(-45deg); } .menu-panneau { position: absolute; right: 0; top: calc(100% + 12px); min-width: 232px; display: flex; flex-direction: column; background: var(--fond-2); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 8px; box-shadow: var(--ombre-menu); } .menu-panneau a { padding: 11px 14px; border-radius: var(--rayon-s); color: var(--encre-2); text-decoration: none; font-size: 15.5px; } .menu-panneau a:hover { background: var(--fond-3); color: var(--encre); } @media (max-width: 820px) { .navigation .lien { display: none; } .menu-compact { display: block; } .bandeau .rideau { gap: 10px; } .navigation .bouton { padding-inline: 18px; font-size: 14.5px; } } @media (max-width: 420px) { .navigation .bouton { display: none; } }