/* sebv.ai : jetons, typographie, composants, cinématique. Palette C-encre dérivée de la page 360. data-theme="black" sur pour l'épreuve noire. */ :root { --ink: #0f2b46; --ink-deep: #0a1e33; --paper: #f4f8fc; --paper-2: #ffffff; --text: #16304a; --muted: #5b7590; --hair: #d5e1ec; --accent: #1766b3; --red: #d23b2e; --teal: #0e9488; --veil: rgba(6, 17, 30, 0.5); --on-ink: #f4f8fc; --on-ink-muted: #b9c9d8; --serif: "Fraunces", "Iowan Old Style", Georgia, serif; --sans: "Inter", "Helvetica Neue", Arial, sans-serif; --wrap: 1280px; --gutter: clamp(20px, 4vw, 56px); --ease-reveal: cubic-bezier(0.86, 0, 0.07, 1); --ease-grow: cubic-bezier(0.645, 0.045, 0.355, 1); } :root[data-theme="black"] { --ink: #0c0c0c; --ink-deep: #050505; --paper: #f6f6f6; --text: #141414; --muted: #6b6b6b; --hair: #e2e2e2; --accent: #141414; --veil: rgba(0, 0, 0, 0.55); --on-ink-muted: #b5b5b5; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--sans); font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } p { margin: 0 0 1.25em; } p:last-child { margin-bottom: 0; } img, svg, video { max-width: 100%; display: block; } .wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; } /* Typographie */ h1, h2, .display { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; margin: 0; } h1 { font-size: clamp(44px, 6.4vw, 88px); } h2 { font-size: clamp(34px, 3.8vw, 56px); } h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.01em; line-height: 1.15; margin: 0; } .kicker { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: none; /* capitales accentuées posées dans le HTML */ color: var(--muted); line-height: 1.6; } .on-ink .kicker { color: var(--on-ink-muted); } .lead { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.6; } .measure { max-width: 760px; } .measure-wide { max-width: 880px; } .signature { font-size: 10.5px; letter-spacing: 0.18em; color: var(--muted); font-weight: 500; line-height: 1.4; } /* Emblème */ .mark { display: inline-block; color: var(--red); line-height: 0; } .mark svg { width: 100%; height: 100%; } .mark--nav { width: 36px; height: 36px; } .mark--hero { width: clamp(96px, 10vw, 140px); height: clamp(96px, 10vw, 140px); } .mark--breath { width: 56px; height: 56px; } .mark--cta { width: 72px; height: 72px; } .mark--foot { width: 44px; height: 44px; } /* Boutons */ .btn { display: inline-block; padding: 15px 30px; border-radius: 999px; font-size: 15px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.2; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; border: 1px solid transparent; white-space: nowrap; } .btn--paper { background: var(--paper); color: var(--ink); border-color: var(--paper); } .btn--paper:hover { background: transparent; color: var(--paper); } .btn--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn--ink:hover { background: transparent; color: var(--ink); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--paper); } /* Header */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; padding: 18px 0; transition: padding 0.2s ease; } .site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 10px 18px 10px 16px; border-radius: 999px; background: transparent; color: var(--on-ink); transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, backdrop-filter 0.2s ease; } .site-header .brand { display: flex; align-items: center; gap: 12px; } /* Le viseur ramene a l'accueil, le nom mene au parcours : deux liens distincts, la convention du logo est preservee et le nom devient utile. */ .site-header .brand-mark { display: flex; } .site-header .brand-text { line-height: 1.1; } .site-header .brand-name { font-size: 15px; font-weight: 500; letter-spacing: 0.01em; display: block; } .site-header .signature { color: currentColor; opacity: 0.72; display: block; margin-top: 4px; } .site-header nav { display: flex; align-items: center; gap: 28px; } .site-header nav a { font-size: 14px; font-weight: 500; opacity: 0.9; } .site-header nav a:hover { opacity: 1; } .site-header .btn { padding: 11px 20px; font-size: 13.5px; } .site-header .btn--paper { background: var(--paper); color: var(--ink); } .site-header.scrolled .bar { background: rgba(244, 248, 252, 0.92); color: var(--ink); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(15, 43, 70, 0.06), 0 10px 30px -18px rgba(15, 43, 70, 0.35); } .site-header.scrolled .btn--paper { background: var(--ink); color: var(--paper); border-color: var(--ink); } .site-header.scrolled .btn--paper:hover { background: transparent; color: var(--ink); } .site-header.on-paper .bar { color: var(--ink); } .menu-toggle { display: none; } .menu-panel { display: none; } /* Hero épinglé : le fond reste, la section suivante recouvre */ .hero { position: relative; height: 200vh; height: 200svh; min-height: 640px; background: var(--paper); view-timeline: --hero block; } .hero-bg { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink) var(--hero-img) center / cover no-repeat; clip-path: circle(var(--hr, 85vmax) at 50% 34%); } .hero-bg .veil { position: absolute; inset: 0; background: rgba(var(--hero-vc), var(--hero-va)); } /* Le fondu sombre du bas n'a de sens que sur un hero sombre */ html[data-heropol="light"] .hero-bg .veil::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(to bottom, transparent, rgba(6, 17, 30, 0.45)); } /* ===== Hero : trois variantes en test, une seule sur mobile ===== data-hero est posé sur par le script en tête de page, avant le premier rendu. data-heropol vaut light (texte clair sur fond sombre) ou dark (texte sombre sur fond clair). */ /* Image unique depuis le 25/08 : bureau de dirigeant, plan large en desktop et plan serre en portrait sur mobile. Meme piece, deux prises, cf docs/dod-hero.md. Reglage valide par Seb : voile 0,35, texte sombre, hb 53, gd 1. --hero-ty et --hero-tx placent le bloc de titre par rapport a l'ecran, pas a sa propre hauteur, sinon le titre ne peut atteindre ni le haut ni le bas du cadre. */ html, html[data-hero="eg1"] { --hero-img: url("/assets/hero-bureau.jpg"); --hero-vc: 244, 248, 252; --hero-va: 0.35; --hero-ty: 53%; --hero-tx: 1%; } /* html[data-hero="f1b"] { --hero-img: url("/assets/hero-f1b.jpg"); --hero-vc: 6, 17, 30; --hero-va: 0.16; --hero-ty: -90%; --hero-tx: -1%; } */ /* html[data-hero="p3h3"] { --hero-img: url("/assets/hero-p3h3.jpg"); --hero-vc: 244, 248, 252; --hero-va: 0.09; --hero-ty: -49%; --hero-tx: -3%; } */ .hero-content { position: absolute; inset: 0 0 auto 0; height: 100vh; height: 100svh; z-index: 2; display: flex; align-items: center; color: var(--hero-tc, var(--on-ink)); padding: 120px 0 80px; } /* Le bloc de titre est place par rapport a l'ecran : --hero-ty en % de hauteur, --hero-tx en % de largeur, le bloc etant centre sur ce point. Un translate en % se refererait a la hauteur du bloc lui-meme et ne pourrait pas atteindre les bords. */ .hero-content--center { display: block; padding: 0; } .hero-content--center .wrap { position: absolute; inset: 0; width: auto; } .hero-content--center .col { position: absolute; left: 50%; top: var(--hero-ty, 50%); transform: translate(-50%, -50%) translateX(var(--hero-tx, 0%)); width: min(1180px, 100% - 2 * var(--gutter)); } html[data-heropol="light"] { --hero-tc: var(--on-ink); } html[data-heropol="dark"] { --hero-tc: var(--ink); } /* Header : sur un hero clair, la barre passe en encre des le haut de page */ html[data-heropol="dark"] .site-header:not(.scrolled) .bar { color: var(--ink); } html[data-heropol="dark"] .site-header:not(.scrolled) .btn--paper { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* Hero centre (decision Seb 23/08, modele Demoria) : crosshair, kicker, message, bouton. Rien d'autre. */ .hero-content--center { text-align: center; } .hero-content--center .mark { display: block; width: clamp(52px, 4.4vw, 68px); height: clamp(52px, 4.4vw, 68px); margin: 0 auto clamp(22px, 2.4vw, 32px); } .hero-content--center .hero-kicker { color: var(--hero-tc, var(--on-ink)); font-size: 17px; font-weight: 700; letter-spacing: 0.2em; margin: 0 0 clamp(10px, 1.1vw, 15px); } /* Chaque moitie du titre est insecable : la coupure ne peut tomber qu'entre les deux, jamais au milieu d'un segment. Une ligne large tient les deux, une etroite les empile. */ .hero-content--center h1 { color: var(--hero-tc, var(--on-ink)); font-size: clamp(24px, 3.4vw, 64px); margin: 0; line-height: 1.1; letter-spacing: -0.02em; } .hero-content--center h1 span { white-space: nowrap; } /* Pages intérieures : header toujours en pilule, première section décalée */ .section--page { padding-top: clamp(140px, 16vw, 200px); } .site-header.on-paper .bar .btn--paper { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* Sections */ .section { position: relative; z-index: 2; padding: clamp(96px, 11vw, 160px) 0; scroll-margin-top: 72px; } /* Deux sections de suite sur le meme fond : leurs marges se cumulaient, jusqu'a 320 px de vide sans rupture visuelle qui le justifie. On resserre les deux cotes du raccord, pas seulement le haut de la seconde, sinon la marge basse de la premiere reste entiere. */ .section.on-ink + .section.on-ink { padding-top: clamp(28px, 3vw, 48px); } .section.on-ink:has(+ .section.on-ink) { padding-bottom: clamp(28px, 3vw, 48px); } .section.on-paper { background: var(--paper); } .section.on-ink, .on-ink { background: var(--ink); color: var(--on-ink); } .section.on-ink h2, .section.on-ink h3 { color: var(--on-ink); } .section-head { margin-bottom: clamp(48px, 6vw, 88px); } .section-head .kicker { margin-top: 18px; } .rule { height: 1px; background: var(--hair); border: 0; margin: 0; } .on-ink .rule { background: rgba(244, 248, 252, 0.18); } /* Piliers : grille 12 colonnes */ .pillar { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 32px; padding: clamp(48px, 5.5vw, 80px) 0; border-top: 1px solid var(--hair); } .pillar:last-of-type { border-bottom: 1px solid var(--hair); } .pillar .num { grid-column: 1 / span 2; font-family: var(--serif); font-size: clamp(44px, 4.6vw, 64px); line-height: 1; color: var(--accent); letter-spacing: -0.02em; } .pillar .body { grid-column: 3 / span 7; } .pillar .aside { grid-column: 10 / span 3; } .pillar h3 { margin-bottom: 14px; } .pillar .kicker { margin-bottom: 28px; max-width: 640px; } .pillar .text p { max-width: 680px; } /* Références */ /* Une seule mesure pour toute la section : le paragraphe et les lignes de references partagent la meme colonne de 880 px, la longueur de ligne lisible. Sans cela les references s'etendaient sur les 1280 px du conteneur et le bord droit devenait irregulier, ce qui se lit comme du blanc mal maitrise plutot que comme un choix. */ .case, .ref-list { max-width: 880px; } .case { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.6; } .case strong { font-weight: 500; } .case p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } .ref-list { margin-top: clamp(48px, 6vw, 80px); } .ref-row { display: grid; grid-template-columns: minmax(180px, 3fr) 9fr; gap: 24px 40px; padding: 26px 0; border-top: 1px solid rgba(244, 248, 252, 0.18); } .ref-row:last-child { border-bottom: 1px solid rgba(244, 248, 252, 0.18); } .ref-row .name { font-family: var(--serif); font-size: 24px; letter-spacing: -0.01em; line-height: 1.2; } .ref-row .fact { color: var(--on-ink-muted); } /* Respiration */ .breath { position: relative; z-index: 2; display: flex; justify-content: center; padding: 8px 0; background: var(--paper); } /* Qui suis-je */ .who .link-360 { margin-top: 32px; display: inline-flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--accent); color: var(--accent); padding-bottom: 2px; font-weight: 500; } .who .link-360:hover { border-color: transparent; } /* Appel */ .cta { text-align: center; } .cta .mark { margin: 0 auto clamp(18px, 2.2vw, 28px); } .cta h2 { margin-bottom: clamp(24px, 3vw, 40px); } /* Bloc de cloture en gros texte : il se lit debout, comme une declaration, pas comme un paragraphe. L'echelle impose la brievete, le deroule detaille de l'appel vit desormais dans la description de l'evenement Calendar. Mesure alignee sur les 880 px de la page. */ .cta p { max-width: 880px; margin-inline: auto; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3; letter-spacing: -0.01em; color: var(--on-ink); } .cta p + p { margin-top: 1.25em; } .cta .btn { margin-top: clamp(28px, 3.5vw, 48px); } /* Pied */ .site-footer { position: relative; z-index: 2; background: var(--ink-deep); color: var(--on-ink-muted); padding: 56px 0 40px; font-size: 14px; } .site-footer .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; } .site-footer .brand { display: flex; align-items: center; gap: 14px; color: var(--on-ink); } .site-footer .brand .signature { color: var(--on-ink-muted); display: block; margin-top: 5px; } .site-footer nav { display: flex; flex-wrap: wrap; gap: 22px; } .site-footer nav a:hover { color: var(--on-ink); } .site-footer .copy { margin-top: 28px; font-size: 12.5px; } /* Cinématique (mesures Demoria) */ .reveal { opacity: 0; } .reveal.in { opacity: 1; clip-path: none; animation: reveal-in 0.6s var(--ease-reveal) both; } .reveal.reveal--slow.in { animation-duration: 1s; } /* Le volet se ferme au-dela de la boite, jamais dessus. Avec animation-fill-mode both, la derniere image du keyframe persiste et l'emporte sur clip-path: none ; une polygone calee sur 0 et 100 % rognait donc definitivement les jambages, line-height valant 1,05. D'ou les debordements verticaux et lateraux. */ @keyframes reveal-in { 0% { opacity: 0; animation-timing-function: step-end; } 0.0001% { opacity: 1; clip-path: polygon(0 -40%, 0 -40%, 0 140%, 0 140%); } 100% { opacity: 1; clip-path: polygon(0 -40%, 105% -40%, 105% 140%, 0 140%); } } .grow { opacity: 0; } .grow.in { opacity: 1; animation: fade-in 0.96s var(--ease-grow) both, grow-in 1.2s var(--ease-grow) both; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes grow-in { from { transform: translateY(24px) scale(0.94); } to { transform: none; } } .flip { opacity: 0; } .flip.in { opacity: 1; animation: fade-in 1.2s var(--ease-grow) both, flip-in 1.2s var(--ease-grow) both; } @keyframes flip-in { from { transform: perspective(800px) rotateX(-90deg); } to { transform: perspective(800px) rotateX(0); } } .stagger > * { --i: 0; } .stagger > .in { animation-delay: calc(var(--i) * 120ms); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .grow, .flip { opacity: 1; clip-path: none; animation: none !important; } .hero-bg video { display: none; } .hero { height: 100vh; height: 100svh; } .hero-bg { clip-path: none; animation: none !important; } .hero-content { animation: none !important; opacity: 1 !important; } .recon { margin-top: 0; background: var(--paper); } } /* Tablette */ @media (max-width: 1199px) { .pillar { column-gap: 24px; } .pillar .num { grid-column: 1 / -1; margin-bottom: 18px; font-size: 40px; } .pillar .body { grid-column: 1 / -1; max-width: 680px; } .pillar .aside { display: none; } } /* Mobile */ @media (max-width: 767px) { body { font-size: 17px; } .site-header { padding: 10px 0; } .site-header .bar { padding: 8px 10px 8px 10px; } .site-header nav { display: none; } /* Revert du 09/09, demande de Seb : le bouton reste hors de la barre sur mobile. Il est deja dans le menu, et dans la barre il ecrasait le nom et la signature, qui portent l'identite. Le libelle court reste defini, inutilise. */ .site-header .btn { display: none; } /* La signature reste sur mobile, raccourcie a "DIRECTEUR DE PROGRAMME · CTO" : un seul element, on masque le dernier segment plutot que de dupliquer la ligne. Chasse et interlettrage resserres pour tenir a cote du bouton de menu. */ /* Revirement du 09/09 : la signature sortait sur mobile en version raccourcie, elle ne tient plus depuis que le bouton de consultation occupe la barre. A 390 px il reste 170 px pour la marque, la signature y tombait sur quatre lignes et poussait le nom sur deux. Le nom seul, sur une ligne, prime : c'est lui qu'on identifie. */ /* La signature revient, la barre n'a plus a loger de bouton. Etat d'avant le 09/09. */ .site-header .signature { display: block; font-size: 9px; letter-spacing: 0.12em; margin-top: 3px; } .site-header .signature .sig-long { display: none; } .menu-toggle { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid currentColor; color: inherit; border-radius: 999px; padding: 8px 14px; font: 500 13px/1 var(--sans); cursor: pointer; } .menu-panel { position: fixed; inset: 0; z-index: 60; background: var(--ink); color: var(--on-ink); display: none; flex-direction: column; justify-content: center; gap: 8px; padding: 40px var(--gutter); } .menu-panel.open { display: flex; } .menu-panel a { font-family: var(--serif); font-size: 34px; padding: 12px 0; border-bottom: 1px solid rgba(244, 248, 252, 0.14); } /* Le bouton est l'action du menu, pas une entree de plus : il se detache par un vide franc au-dessus, occupe toute la largeur et centre son libelle. Cible large au pouce. */ .menu-panel .btn { margin-top: 44px; font-family: var(--sans); font-size: 16px; border-bottom: 0; align-self: stretch; text-align: center; padding: 18px 24px; } .menu-panel .close { position: absolute; top: 18px; right: var(--gutter); background: transparent; border: 1px solid currentColor; color: inherit; border-radius: 999px; padding: 8px 14px; font: 500 13px/1 var(--sans); cursor: pointer; } .hero { min-height: 560px; } .hero-content { padding: 96px 0 56px; } .section { padding: 72px 0; } .ref-row { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; } .ref-row .name { font-size: 21px; } .site-footer .row { flex-direction: column; align-items: flex-start; } .reveal.in, .grow.in, .flip.in { animation: fade-in 0.5s ease both; clip-path: none; } .stagger > .in { animation-delay: 0s; } } /* ===== v7 : mission, méthode (cercle qui grandit), cartes, logos ===== */ /* Hero : le cercle se referme sur la video et laisse le papier (Demoria, mesure image par image du 23/08) */ .recon { background: transparent; margin-top: -55vh; position: relative; z-index: 2; } .mission { background: var(--paper); position: relative; z-index: 2; } @supports (animation-timeline: view()) { .hero-bg { animation: hero-wipe linear both; animation-timeline: --hero; animation-range: contain 35% contain 100%; } @keyframes hero-wipe { from { clip-path: circle(85vmax at 50% 34%); } to { clip-path: circle(0vmax at 50% 34%); } } .hero-content { animation: hero-out linear both; animation-timeline: --hero; animation-range: contain 18% contain 45%; } @keyframes hero-out { from { opacity: 1; } to { opacity: 0; } } } /* Titre qui s'estompe en passant sous le header */ .fade-under { transition: opacity 0.2s linear; } /* Mission : titre gauche, texte droite */ .split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; align-items: start; } .split--mission { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(40px, 4.4vw, 72px); } .split--mission .split-body p { max-width: none; } .split--mission .split-body h2 { position: static; margin-bottom: clamp(24px, 2.6vw, 36px); } .id-card { position: relative; } .id-portrait { position: relative; margin: 0 0 22px; } .id-portrait::before { content: ""; position: absolute; left: -18px; top: -18px; width: 62%; height: 62%; background: var(--hair); } .id-portrait img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%; } .id-name { font-family: var(--serif); font-size: clamp(21px, 1.8vw, 26px); line-height: 1.2; color: var(--ink); margin: 0 0 8px; } .id-role { margin: 0 0 18px; } .id-more { font-size: 15px; line-height: 1.5; color: var(--muted); margin: 0; } .id-more a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .id-audience { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0; } .split h2 { position: sticky; top: 120px; } .split-body .strong { font-family: var(--serif); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 28px; } .split-body p { max-width: 640px; } /* Méthode : intro puis scène circulaire */ /* Ma mission et la methode se suivent sur le meme fond clair : leurs marges se cumulaient, 282 px entre le bas de la carte d'identite et le titre FOTO. On resserre les deux cotes du raccord, comme entre References et la consultation. */ .mission { padding-bottom: clamp(48px, 5.5vw, 88px); } .methode { position: relative; z-index: 2; background: var(--paper); padding-top: clamp(48px, 5.5vw, 88px); } /* Le titre nomme la methode, le sous-titre developpe l'acronyme. Serif comme le titre pour rester du meme geste, en accent et plus petit pour rester subordonne. */ .methode-head h2 { margin-bottom: 10px; } .methode-sub { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(21px, 1.9vw, 30px); line-height: 1.15; letter-spacing: -0.01em; color: var(--accent); margin: 0 0 28px; } .methode-head .lead { margin-bottom: clamp(48px, 6vw, 80px); } .circle-stage { position: relative; } .circle-bg { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; margin: 0 auto; width: 100%; clip-path: circle(var(--r, 16vw) at 50% 50%); background: var(--ink); } .circle-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); } .circle-bg::after { content: ""; position: absolute; inset: 0; background: rgba(6, 17, 30, 0.35); } @supports (animation-timeline: view()) { .circle-bg { animation: circle-grow linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; } @keyframes circle-grow { from { clip-path: circle(16vw at 50% 50%); } to { clip-path: circle(80vw at 50% 50%); } } } .cards-wrap { position: relative; z-index: 2; margin-top: -60vh; padding-bottom: clamp(96px, 11vw, 160px); } .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .card-m { background: var(--paper); border-radius: 8px; padding: 34px 30px 36px; box-shadow: 0 30px 60px -30px rgba(6, 17, 30, 0.45); display: flex; flex-direction: column; } .card-m .num { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--accent); margin-bottom: 22px; letter-spacing: -0.02em; } .card-m h3 { font-size: clamp(24px, 1.9vw, 28px); margin-bottom: 12px; } .card-m .kicker { margin-bottom: 20px; font-size: 11px; } .card-m > p:last-child { font-size: 16.5px; line-height: 1.6; } .cards-more { margin-top: 40px; text-align: center; } .link-more { color: var(--paper); border-bottom: 1px solid rgba(244, 248, 252, 0.6); padding-bottom: 3px; font-weight: 500; } .link-more:hover { border-color: transparent; } /* Logos en défilement */ .logos { position: relative; z-index: 2; padding: clamp(72px, 8vw, 120px) 0; overflow: hidden; } .logos .kicker { text-align: center; margin-bottom: 44px; } .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee + .marquee { margin-top: 36px; } .track { display: flex; align-items: center; gap: 72px; width: max-content; animation: marquee var(--dur, 60s) linear infinite; padding-right: 72px; } .marquee:hover .track { animation-play-state: paused; } /* Normalisation optique. Les rapports vont de 0,90 (Danone) a 10,36 (Rothschild) : a hauteur egale, un logo 10:1 occupe dix fois la surface d'un logo carre, d'ou l'effet de creneaux. La hauteur de chaque logo suit h = C / rapport^0,4, compromis entre normaliser la hauteur (exposant 0) et la surface (0,5), C cale pour qu'un rapport de 3 retombe sur 34 px. Rapports mesures sur l'encre reelle, voir essais/hero/logos-mesure.html. */ .track .logo { height: var(--logo-h, 34px); display: flex; align-items: center; flex: none; } .track .logo--h20 { --logo-h: 20px; } .track .logo--h24 { --logo-h: 24px; } .track .logo--h26 { --logo-h: 26px; } .track .logo--h28 { --logo-h: 28px; } .track .logo--h30 { --logo-h: 30px; } .track .logo--h32 { --logo-h: 32px; } .track .logo--h34 { --logo-h: 34px; } .track .logo--h36 { --logo-h: 36px; } .track .logo--h38 { --logo-h: 38px; } .track .logo--h40 { --logo-h: 40px; } .track .logo--h42 { --logo-h: 42px; } .track .logo--h46 { --logo-h: 46px; } .track .logo--h48 { --logo-h: 48px; } .track .logo--h52 { --logo-h: 52px; } .track .logo--h56 { --logo-h: 56px; } /* object-fit conserve les proportions quand un logo tres large touche max-width : sans lui, la largeur est ecretee a hauteur constante et le sigle parait etire verticalement (cas Rothschild, 259 x 25, soit 10,4 pour 1). */ .track .logo img, .track .logo svg { height: 100%; width: auto; max-width: 230px; object-fit: contain; } .track .logo.text { font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em; font-weight: 500; color: var(--ink); white-space: nowrap; } .marquee--partners .track .logo { height: calc(var(--logo-h, 34px) * 0.82); } @keyframes marquee { to { transform: translateX(-50%); } } /* La rangée du bas défile vers la droite (décision Seb 23/08) */ .marquee--partners .track { animation-direction: reverse; } @media (prefers-reduced-motion: reduce) { .track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .circle-bg { animation: none; clip-path: none; } } @media (max-width: 1199px) { .split--mission .id-card { max-width: 340px; } .cards { grid-template-columns: 1fr; max-width: 680px; margin-inline: auto; } .cards-wrap { margin-top: -40vh; } } @media (max-width: 767px) { .split, .split--mission { grid-template-columns: 1fr; row-gap: 24px; } .split h2 { position: static; } /* Mobile : le visage arrive juste apres le titre, pas apres trois ecrans de texte */ .split--mission .id-card { order: 1; max-width: 280px; margin: 0 0 28px; } .split--mission .split-body { order: 2; } .circle-bg { height: 60vh; } .cards-wrap { margin-top: -30vh; } .card-m { padding: 26px 22px 28px; } .track { gap: 44px; } } /* Ajustements 23/08 */ /* Tout paragraphe en pleine colonne est justifie. Les chapeaux de "Ma mission" et de FOTO ne l'etaient pas, alors que les cartes qui les suivent le sont : l'ecart se voyait a la jonction, et d'abord sur mobile ou la colonne est etroite. */ .card-m > p:last-child, .split--mission .split-body .lead, .methode-head .lead, .cta .grow p, .ref-row .fact { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } .who .portrait { margin: 0 0 32px; } .who .portrait img { width: 168px; height: 168px; border-radius: 50%; object-fit: cover; object-position: 50% 36%; border: 3px solid var(--ink); } @media (max-width: 767px) { .hero-content--center h1 { font-size: clamp(21px, 6.6vw, 40px); } .hero { height: 100vh; height: 100svh; } /* Sur mobile le hero garde toute sa hauteur : la section suivante ne remonte pas et redevient opaque. Regle heritee de .mission, transposee sur .recon avec le margin-top negatif le 09/09. Sans elle, l'image perdait 464 px sur 844. */ .recon { margin-top: 0; background: var(--paper); } .hero-bg { clip-path: none; animation: none !important; } .hero-content { animation: none !important; opacity: 1 !important; } .who .portrait { margin-bottom: 24px; } } /* ===== Ecran en portrait : image dediee ===== Le choix de l'image se fait sur l'orientation et non sur la largeur. Une image 16:9 dans un ecran vertical n'est recadree que sur les cotes, donc le plafond mangerait tout le haut. Sur max-width seul, une tablette ou un pliable en portrait, au-dela de 768 px, recevait le paysage. Les regles de mise en page, elles, restent en largeur. Reglage valide par Seb sur iPhone : voile 0,35, hb 39, gd 8. */ @media (max-aspect-ratio: 1 / 1) { html[data-hero] { --hero-img: url("/assets/hero-bureau-portrait.jpg"); --hero-vc: 244, 248, 252; --hero-va: 0.35; --hero-ty: 39%; --hero-tx: 8%; --hero-tc: var(--ink); } html[data-hero] .hero-bg .veil::after { display: none; } html[data-hero] .site-header:not(.scrolled) .bar { color: var(--ink); } } /* ===== Portage du 08/09 : reconnaissance, bloc A, bandeau des prestations ===== Textes valides dans teasers-site-v1.md, section VERSION ANGLAISE, qui porte le FR et l'EN a jour. La reconnaissance vient de l'epreuve du 31/08. */ .recon { padding: clamp(96px, 11vw, 160px) 0 clamp(80px, 9vw, 120px); } .recon-head { margin-bottom: clamp(44px, 5vw, 72px); } .recon-head h2 { font-size: clamp(30px, 3.4vw, 48px); max-width: 20ch; } .recon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 52px); } .recon-item { border-top: 2px solid var(--red); padding-top: 22px; } .recon-role { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); margin: 0 0 16px; } .recon-item p { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; margin: 0; } .recon-pivot { margin-top: clamp(52px, 6vw, 88px); background: var(--ink); color: var(--on-ink); border-radius: 8px; padding: clamp(34px, 4.2vw, 64px); box-shadow: 0 30px 60px -30px rgba(6, 17, 30, 0.45); } .recon-pivot h3 { color: var(--on-ink); font-size: clamp(25px, 2.4vw, 34px); margin-bottom: 20px; } .recon-pivot p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; margin: 0 0 18px; max-width: 62ch; color: var(--on-ink); } .recon-pivot p:last-child { margin-bottom: 0; } .recon-pivot strong { color: var(--on-ink); font-weight: 600; } /* Bloc A : un chapeau puis trois mouvements, chacun ouvert par sa maxime. Pas de chute, decision du 07/09 : le mouvement 3 ferme et le bandeau route. */ .commencer { background: var(--paper-2); } .commencer-body { max-width: 72ch; } .commencer .lead { margin: 0 0 clamp(40px, 4.4vw, 64px); } .mvt + .mvt { margin-top: clamp(36px, 4vw, 56px); } .mvt-max { font-family: var(--serif); font-size: clamp(21px, 1.9vw, 27px); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 18px; padding-left: 22px; border-left: 2px solid var(--red); } .mvt p:not(.mvt-max):not(.stat-nb):not(.tags) { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.62; margin: 0; } /* Bandeau des prestations : trois colonnes courtes, purement navigationnelles. Les liens viendront avec le questionnaire, les titres ne sont donc pas cliquables. */ .presta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 52px); } .presta-item { border-top: 2px solid var(--on-ink); padding-top: 22px; } .presta-name { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-ink); margin: 0 0 16px; } .presta-item p:not(.presta-name) { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; margin: 0; color: var(--on-ink); } .presta-cta { margin-top: clamp(48px, 5.5vw, 80px); text-align: center; } @media (max-width: 860px) { .recon-grid, .presta-grid { grid-template-columns: 1fr; gap: 34px; } } /* Justification des textes descriptifs, demandee par Seb le 08/09 : rendu de colonne de journal. La cesure automatique est indispensable ici, sans elle la justification creuse des lezardes blanches dans les colonnes etroites. Elle suit le lang de la page, francais sur /fr/ et anglais sur /en/. Ne sont pas justifies : les titres, les maximes en serif du bloc A, les intitules de colonne, qui sont des elements d'appel et non du texte courant. */ .recon-item p:not(.recon-role), .recon-pivot p, .commencer .lead, .mvt p:not(.mvt-max):not(.stat-nb):not(.tags), .presta-item p:not(.presta-name) { text-align: justify; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 3; } /* Sections debranchees le 08/09, en attente du design final. Le HTML reste en place et le rebranchement consiste a retirer l'attribut data-debranche, rien d'autre. La methode FOTO fait doublon avec le bandeau des prestations : ses trois cartes disent le choix de solution, le sequencement et l'accompagnement jusqu'au Go-Live, que Clarity, le mouvement 1 et Flex portent deja, plus fort et plus haut. */ [data-debranche] { display: none !important; } /* Exergue de la reconnaissance, posee le 08/09. Geste de presse : la question qui resume ce que les trois colonnes developpent, detachee entre deux filets, en serif et en corps de titre. Elle tient le regard entre la grille et le bloc de pilotage, la ou la page n'offrait que du gris. Texte issu de la spec du schema 1 de teasers-site-v1.md, aucune redaction nouvelle. */ .exergue { margin: clamp(52px, 6vw, 88px) auto 0; max-width: 58ch; padding: clamp(26px, 3vw, 40px) 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); text-align: center; } .exergue p { font-family: var(--serif); font-size: clamp(27px, 3vw, 42px); line-height: 1.22; letter-spacing: -0.015em; color: var(--ink); margin: 0; text-align: center; hyphens: none; } .exergue figcaption { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin-top: 18px; max-width: 44ch; margin-inline: auto; line-height: 1.5; } .nowrap { white-space: nowrap; } /* Le libelle long est le defaut, le court n'apparait que dans l'en-tete sous 767 px. */ .btn-court { display: none; } /* Revirement du 09/09 : Seb tranche pour la justification aussi sur mobile, le fer a gauche cassait le rythme au defilement. La colonne y tombe entre 32 et 43 signes, ou les rivieres apparaissent vite : on abaisse donc le seuil de cesure pour que le moteur coupe plus souvent et reparte l'espace, 5 signes au mot, 2 avant et apres. */ @media (max-width: 767px) { .recon-item p:not(.recon-role), .recon-pivot p, .commencer .lead, .mvt p:not(.mvt-max):not(.stat-nb):not(.tags), .presta-item p:not(.presta-name) { hyphenate-limit-chars: 5 2 2; word-spacing: -0.01em; } } /* Respiration du 09/09. Diagnostic mesure : la page /360 tient 122 mots par ecran de telephone contre 82 ici, et se lit mieux. La difference n'est pas la quantite de texte, c'est qu'elle n'a aucun bloc de plus de 25 mots quand la home en avait 18, dont un de 164. Les paragraphes sont donc coupes a des frontieres de phrases, sans qu'un seul mot change, et les chiffres deja presents sont balises pour donner au regard les points de fixation qui manquaient sur dix ecrans. */ .recon-item p + p, .recon-pivot p + p, .mvt p:not(.mvt-max):not(.stat-nb):not(.tags) + p { margin-top: 0.9em; } .nb { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--red); white-space: nowrap; } .on-ink .nb, .recon-pivot .nb, .presta-item .nb { color: var(--on-ink); } /* Dans les cadres de prestations la duree ouvre deja une attaque en gras : elle se distingue par la capitale et l'espacement, le rouge y serait illisible sur l'encre. */ .presta-item .nb { letter-spacing: 0.02em; } /* Bandeau chiffre du 09/09. Le chiffre sort du texte courant et interrompt la colonne sur toute sa largeur, plutot que de flotter : sur un telephone de 390 px il ne resterait pas quinze signes lisibles a cote d'un objet flottant. Legendes prises mot pour mot dans les textes, aucune redaction. */ .stat { margin: clamp(28px, 3.2vw, 44px) 0; padding: clamp(18px, 2vw, 26px) 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); text-align: center; } .stat .stat-nb { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); margin: 0; text-align: center; hyphens: none; font-variant-numeric: tabular-nums; } .stat-fl { color: var(--red); padding: 0 0.12em; } .stat > figcaption { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin-top: 14px; line-height: 1.5; } /* Etiquettes du mouvement 3 : trois mots deja presents dans le paragraphe, poses en surtitre pour que le survol capte la nature du travail sans lire les 66 mots. */ .mvt .tags, .tags { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; padding-left: 22px; text-align: left; hyphens: none; }