/* ========================================================================== CAP & SEARCH · Feuille de style -------------------------------------------------------------------------- 1. Variables (couleurs, police, espacements) ← à modifier en priorité 2. Base 3. Composants communs (titres, boutons, sections) 4. En-tête & navigation 5. Accueil (bandeau image) 6. Le cabinet 7. Notre approche 8. La collaboration 9. Nos clients 10. Notre équipe 11. Contact 12. Pied de page 13. Animations d'apparition 14. Responsive (tablette, mobile) ========================================================================== */ /* Police Raleway installée dans le site (assets/fonts) : plus rapide, et aucune donnée envoyée à Google */ @font-face { font-family: "Raleway"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/raleway-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Raleway"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/raleway-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Raleway"; font-style: italic; font-weight: 300 600; font-display: swap; src: url("../fonts/raleway-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Raleway"; font-style: italic; font-weight: 300 600; font-display: swap; src: url("../fonts/raleway-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* 1. VARIABLES ============================================================= */ :root { /* Couleurs de marque : bleu / gris / orange */ --blue-950: #0f2133; /* bleu très foncé : bandeau contact, pied de page */ --blue-900: #1a3550; /* bleu nuit : titres, bandeau chiffres */ --blue-700: #2f5d86; /* bleu du logo */ --blue-100: #e7eef5; --grey-600: #5f6870; /* textes secondaires */ --grey-200: #e3e1dc; --orange: #d9692f; /* orange : accents, boutons */ --orange-dark: #b9541f; --orange-light: #f08a52; /* orange clair, sur fond foncé */ --cream: #ffffff; /* fond principal (blanc, depuis la v10) */ --sand: #f1f4f7; /* fond des sections alternées (gris-bleu) */ --white: #ffffff; --ink: #16222e; /* texte courant */ /* Police (inspirée de Barnes) : Raleway pour les titres et le texte. Pour revenir aux titres à empattements de la v5 : --font-title: "Cormorant Garamond", Georgia, serif; */ --font-title: "Raleway", system-ui, sans-serif; --font: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif; /* Mise en page */ --container: 1240px; --gutter: 40px; --section-space: 128px; --radius: 24px; /* arrondi des blocs et photos */ --radius-btn: 100px; /* arrondi des boutons (100px = forme de pilule) */ --header-h: 88px; --ease: cubic-bezier(.23, 1, .32, 1); /* courbe « ease-out » franche : démarre vite, se pose en douceur */ } /* 2. BASE ================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 72px; } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums; /* chiffres alignés (Raleway les fait descendre par défaut) */ overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } h1, h2, h3, h4 { margin: 0; } p { margin: 0 0 1em; } ul, ol { margin: 0; padding: 0; list-style: none; } strong { font-weight: 700; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .skip-link { position: absolute; left: -999px; top: 0; background: var(--blue-900); color: #fff; padding: 10px 16px; z-index: 100; } .skip-link:focus { left: 16px; top: 16px; } :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; } /* Confort sur téléphone : pas de flash gris au toucher, pas de texte grossi en paysage, réponse immédiate au toucher, pas de sélection du texte des boutons en appui long. Les effets de survol sont réservés à la souris (@media (hover: hover)), sinon ils restent « collés » après un toucher. */ html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; } a, button, .tab { touch-action: manipulation; } .btn, .tab, .nav__link--cta, .burger, .link-btn { -webkit-user-select: none; user-select: none; } /* Retour visuel au moment de l'appui (souris comme doigt) */ .btn:active, .tab:active, .nav__link--cta:active { transform: scale(.97); } /* Texte provisoire à valider (souligné en pointillés orange) : retirer la classe "todo" une fois validé */ .todo { background: repeating-linear-gradient(90deg, var(--orange) 0 4px, transparent 4px 8px) bottom / 100% 1px no-repeat; } /* 3. COMPOSANTS COMMUNS ==================================================== */ .section { padding: var(--section-space) 0; position: relative; } .section--tight { padding: 88px 0; } .section--sand { background: var(--sand); } .section--blue { background: var(--blue-900); color: var(--white); } .section--dark { background: var(--blue-950); color: var(--white); } .section__head { max-width: 760px; margin-bottom: 64px; } /* Petit libellé au-dessus des titres : « Le cabinet », précédé d'une barre orange */ .title { font-family: var(--font-title); font-size: clamp(32px, 3.6vw, 52px); font-weight: 500; line-height: 1.05; letter-spacing: -.018em; color: var(--blue-900); } .title--light { color: var(--white); } .title--xl { font-size: clamp(36px, 4.4vw, 62px); } .lead { margin: 24px 0 0; font-size: 18px; line-height: 1.75; color: var(--grey-600); max-width: 600px; } .lead strong { color: var(--blue-900); font-weight: 600; } .lead--light { color: rgba(255, 255, 255, .72); } .lead--line { max-width: none; } /* phrase sur une seule ligne (sur ordinateur) */ .section__head:has(.lead--line) { max-width: none; } .title--sub { font-size: clamp(28px, 2.8vw, 40px); margin: 0 0 36px; } /* Petit titre de sous-partie */ .label { margin: 0 0 28px; font-size: 17px; font-weight: 700; color: var(--blue-900); } .accent { color: var(--orange); } /* Boutons rectangulaires en capitales espacées (codes éditoriaux / luxe) */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 19px 34px; border-radius: var(--radius-btn); border: 1px solid transparent; font: 600 12px/1 var(--font); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .3s, color .3s, border-color .3s, transform .16s var(--ease); } .btn--orange { background: var(--orange); color: var(--white); } @media (hover: hover) and (pointer: fine) { .btn--orange:hover { background: var(--blue-900); } } .btn--outline { border-color: var(--blue-900); color: var(--blue-900); } @media (hover: hover) and (pointer: fine) { .btn--outline:hover { background: var(--blue-900); color: var(--white); } } .btn--full { width: 100%; } /* 4. EN-TÊTE & NAVIGATION ================================================== */ .header { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h); color: var(--blue-900); /* Bandeau légèrement transparent : on devine la page qui défile dessous */ background: rgba(255, 255, 255, .8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(26, 53, 80, .1); transition: background .4s, height .4s; } .header.is-scrolled { height: 74px; background: rgba(255, 255, 255, .92); } .header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; } .header__logo img { width: 66px; border-radius: 2px; transition: width .4s; } .header.is-scrolled .header__logo img { width: 56px; } .nav { display: flex; align-items: center; gap: 40px; } .nav__list { display: flex; align-items: center; gap: 34px; } .nav__link { position: relative; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding: 6px 0; transition: color .3s; } .nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); } .nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; } .nav__link--cta { padding: 12px 22px; border: 1px solid var(--blue-900); border-radius: var(--radius-btn); transition: background .3s, color .3s, transform .16s var(--ease); } .nav__link--cta::after { display: none; } @media (hover: hover) and (pointer: fine) { .nav__link--cta:hover { background: var(--blue-900); color: var(--white); } } .lang { display: flex; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .12em; } .lang__item.is-disabled { opacity: .4; cursor: default; } .burger { display: none; } /* 5. ACCUEIL : TEXTE + PHOTO DES ASSOCIÉES ================================= */ .hero { position: relative; padding-top: var(--header-h); } /* Haut de l'accueil : texte à gauche, photo collée au bord droit de l'écran */ .hero__top { position: relative; min-height: clamp(520px, calc(100vh - var(--header-h) - 110px), 760px); min-height: clamp(520px, calc(100svh - var(--header-h) - 110px), 760px); display: flex; align-items: center; } .hero__inner { padding-top: 56px; padding-bottom: 56px; } .hero__content { max-width: 50%; padding-right: 12px; } .hero__title { font-family: var(--font-title); font-size: clamp(46px, 5.6vw, 84px); letter-spacing: -.025em; /* grands titres légèrement resserrés */ font-weight: 500; line-height: .95; color: var(--blue-900); margin-bottom: 24px; } .hero__values { font-size: 18px; font-weight: 500; color: var(--grey-600); margin-bottom: 40px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; } /* La photo garde ses proportions (pas de déformation) : elle est seulement recadrée si besoin, en gardant les visages. Le bord gauche et le bas se fondent dans le fond de page. */ .hero__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; margin: 0; } .hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28%), linear-gradient(to top, transparent 0, #000 22%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 28%), linear-gradient(to top, transparent 0, #000 22%); mask-composite: intersect; } .hero__photo figcaption { position: absolute; right: var(--gutter); bottom: 18px; font-size: 13px; font-weight: 600; color: var(--grey-600); } /* Bande d'infos clés sous l'accueil */ /* 6. LE CABINET (style v2 : blocs arrondis, infos clés mises en avant) ==== */ .intro { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; margin-bottom: 56px; } .intro__text { font-size: 18px; color: var(--grey-600); } .intro__text strong { color: var(--blue-900); } .intro__text strong.accent { color: var(--orange); } .intro__text p:last-child { margin: 0; } .services { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 72px; } .service { background: var(--blue-900); color: var(--white); border-radius: var(--radius); padding: 36px 40px; transition: transform .35s var(--ease), box-shadow .35s, background .35s; } .service:nth-child(2) { background: var(--blue-700); } @media (hover: hover) and (pointer: fine) { .service:hover { transform: translateY(-8px) scale(1.015); box-shadow: 0 30px 60px -30px rgba(15, 33, 51, .55); } } .service__title { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 12px; } .service p { color: rgba(255, 255, 255, .78); margin: 0; } .values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .value { border-top: 3px solid var(--orange); padding-top: 20px; } .value__title { font-size: 20px; font-weight: 700; color: var(--blue-900); margin-bottom: 6px; } .value p { color: var(--grey-600); margin: 0; font-size: 16px; } .value { transition: border-color .3s; } @media (hover: hover) and (pointer: fine) { .value:hover { border-top-color: var(--blue-700); } } /* Citation sur image pleine largeur ======================================== */ .quote { position: relative; padding: 160px 0; color: var(--white); text-align: center; background: linear-gradient(rgba(15, 33, 51, .62), rgba(15, 33, 51, .62)), url("../img/immeuble-haussmannien.jpg") center / cover fixed; } .quote__text { margin: 0 auto 24px; max-width: 900px; font-family: var(--font-title); font-style: italic; font-weight: 500; font-size: clamp(28px, 3.6vw, 50px); line-height: 1.15; } .quote__sign { margin: 0; font-size: 15px; font-weight: 600; color: var(--orange-light); } /* 7. NOTRE APPROCHE (style v2) =========================================== */ .understand { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 72px; } .card { background: var(--white); border-radius: var(--radius); padding: 32px 28px 28px; display: flex; flex-direction: column; } .card__visual { height: 150px; width: 100%; margin-bottom: 24px; } .card__title { margin-top: auto; min-height: 2.6em; text-align: center; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--blue-900); } /* Boussole et iceberg */ .compass text, .iceberg text { font: 600 12px var(--font); fill: var(--grey-600); } .compass__ring { fill: var(--cream); stroke: var(--blue-900); stroke-width: 1.5; } .compass__needle { fill: var(--blue-900); transform-origin: 120px 75px; transform: rotate(-120deg); transition: transform 1.6s var(--ease) .3s; } .compass__needle-n { fill: var(--orange); } /* L'aiguille tourne à chaque fois que la boussole réapparaît à l'écran (voir main.js) */ .compass:not(.is-turning) .compass__needle { transition: none; } .compass.is-turning .compass__needle { transform: rotate(0deg); } .iceberg__water { stroke: var(--blue-700); stroke-width: 1.5; stroke-dasharray: 6 5; } .iceberg__tip { fill: var(--white); stroke: var(--blue-900); stroke-width: 1.5; } .iceberg__under { fill: var(--blue-700); } .iceberg .iceberg__label-under { fill: var(--blue-700); font-weight: 700; } /* Curseurs culture */ .scales { display: grid; align-content: center; gap: 9px; } .scale { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: var(--grey-600); } .scale span:first-child { text-align: right; } .scale i { display: flex; gap: 5px; } .scale .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--grey-200); } .scale .dot.is-on { background: var(--orange); } /* Méthodologie en 3 étapes */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; } .step { position: relative; background: var(--white); border-radius: var(--radius); padding: 32px 32px 28px; overflow: hidden; } .step__title { position: relative; font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--orange); margin-bottom: 16px; } .step__list li { position: relative; padding-left: 18px; color: var(--grey-600); font-size: 15px; margin-bottom: 10px; } .step__list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-700); } .step__list strong { color: var(--blue-900); } /* Côté candidats */ /* Effets au survol : les blocs se soulèvent légèrement */ .card, .step { transition: transform .35s var(--ease), box-shadow .35s; } @media (hover: hover) and (pointer: fine) { .card:hover, .step:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(26, 53, 80, .35); } } .figure { transition: background .3s; } @media (hover: hover) and (pointer: fine) { .figure:hover { background: var(--blue-700); } } /* 8. LA COLLABORATION ====================================================== */ .collab { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; } .terms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; } .terms li { padding: 9px 18px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, .25); font-size: 14px; font-weight: 600; transition: background .3s, border-color .3s, transform .3s; } @media (hover: hover) and (pointer: fine) { .terms li:hover { background: var(--orange); border-color: var(--orange); transform: translateY(-2px); } } .figures { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255, 255, 255, .14); border-radius: var(--radius); overflow: hidden; } .figure { background: var(--blue-900); padding: 28px 32px; } .figure__num { font-size: clamp(44px, 4.6vw, 64px); font-weight: 700; letter-spacing: -.04em; line-height: 1; margin-bottom: 8px; } .figure__num small { font-size: .34em; letter-spacing: 0; color: var(--orange-light); } .figure__label { color: rgba(255, 255, 255, .72); margin: 0; font-size: 15px; } /* 9. NOS CLIENTS =========================================================== */ /* Onglets (marques par secteur + postes clés) */ /* Onglets en forme de pastilles arrondies, même taille pour les secteurs et les postes */ .tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; } .tab { padding: 11px 22px; border: 1px solid var(--grey-200); border-radius: var(--radius-btn); background: var(--white); font: 600 15px var(--font); color: var(--grey-600); cursor: pointer; transition: color .3s, border-color .3s, background .3s, transform .16s var(--ease); } @media (hover: hover) and (pointer: fine) { .tab:hover { color: var(--blue-900); border-color: var(--blue-900); } } .tab.is-active { color: var(--white); background: var(--blue-900); border-color: var(--blue-900); } .tabpanel.is-active { animation: fade-up .45s var(--ease); } .chips { display: flex; flex-wrap: wrap; gap: 10px 28px; } .chips li { font-size: 15px; color: var(--grey-600); } /* Les noms de marques, un peu plus grands que les postes */ .roles--brands { margin-bottom: 72px; } .chips--brands { gap: 14px 32px; } .chips--brands li { font-family: var(--font-title); font-size: 22px; font-weight: 500; color: var(--blue-900); } @keyframes fade-up { from { opacity: 0; transform: translateY(10px); } } /* 10. NOTRE ÉQUIPE : présentation sobre, sans bloc ======================== */ /* Une associée par ligne : le texte prend toute la largeur restante */ .team { display: grid; grid-template-columns: 1fr; gap: 56px; } .member { display: grid; grid-template-columns: 220px minmax(0, 860px); gap: 48px; align-items: start; } .member__photo { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius); } .member__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: grayscale(.15); transition: filter .6s; } @media (hover: hover) and (pointer: fine) { .member:hover .member__photo img { filter: none; } } .member__name { font-family: var(--font-title); font-size: 30px; font-weight: 600; color: var(--blue-900); line-height: 1.1; } .member__role { font-size: 15px; font-weight: 600; color: var(--orange); margin: 8px 0 16px; } .member__intro { font-size: 16px; color: var(--grey-600); } .member__more p { color: var(--grey-600); font-size: 15px; } .member__more:not([hidden]) { animation: fade-up .45s var(--ease); } .member__quote { font-family: var(--font-title); font-style: italic; font-size: 17px; color: var(--blue-900) !important; } .member__actions { display: flex; align-items: center; gap: 20px; } .link-btn { background: none; border: none; padding: 0 0 2px; cursor: pointer; font: 700 14px var(--font); color: var(--blue-900); border-bottom: 1px solid var(--orange); } .link-btn:hover { color: var(--orange); } .linkedin { display: inline-flex; } .linkedin svg { width: 16px; height: 16px; fill: var(--grey-600); transition: fill .3s; } .linkedin:hover svg { fill: var(--blue-700); } /* 11. CONTACT (bandeau foncé) ============================================== */ .contact { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .contact__label { margin: 44px 0 18px; font-size: 15px; font-weight: 700; color: var(--orange-light); } .contact__details { display: grid; gap: 16px; } .contact__details li { display: flex; align-items: center; gap: 16px; } .contact__icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); color: var(--white); transition: background .3s, border-color .3s; } .contact__icon svg { width: 18px; height: 18px; } @media (hover: hover) and (pointer: fine) { .contact__details li:hover .contact__icon { background: var(--orange); border-color: var(--orange); } } .contact__details small { display: block; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .5); } .contact__details a { font-size: 18px; font-weight: 700; color: var(--white); text-decoration: none; } .contact__details a:hover { color: var(--orange-light); } .form { background: var(--white); color: var(--ink); border-radius: var(--radius); padding: 40px; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field { margin-bottom: 16px; } .field label { display: block; font-size: 13px; font-weight: 700; color: var(--blue-900); margin-bottom: 6px; } .field label span { color: var(--orange); } .field input, .field select, .field textarea { width: 100%; padding: 13px 15px; border: 1.5px solid var(--grey-200); border-radius: 14px; background: var(--cream); font: 16px var(--font); color: var(--ink); transition: border-color .3s, background .3s; } .field textarea { resize: vertical; min-height: 110px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-700); background: var(--white); } .field.has-error input, .field.has-error textarea { border-color: #c0392b; } .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--grey-600); margin: 4px 0 24px; cursor: pointer; } .consent input { margin-top: 3px; accent-color: var(--orange); } .consent.has-error { color: #c0392b; } .form__status { margin: 14px 0 0; font-size: 14px; font-weight: 600; text-align: center; } .form__status:empty { display: none; } .form__status.is-success { color: #2e7d4f; } .form__status.is-error { color: #c0392b; } .hp { position: absolute; left: -9999px; } /* 12. PIED DE PAGE ========================================================= */ .footer { background: var(--blue-950); color: rgba(255, 255, 255, .6); padding: 0 0 40px; font-size: 14px; } .footer__tagline { margin: 0; padding: 56px 0 40px; font-family: var(--font-title); font-weight: 500; font-size: clamp(34px, 4.6vw, 64px); line-height: 1; color: var(--white); } .footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; align-items: start; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 40px; } .footer__brand { display: flex; align-items: center; gap: 16px; } .footer__brand img { width: 52px; border-radius: 4px; } .footer__brand p { margin: 0; font-weight: 600; color: var(--white); } .footer__nav, .footer__legal { display: grid; gap: 8px; justify-items: start; } .footer a { text-decoration: none; transition: color .3s; } .footer a:hover { color: var(--orange-light); } .footer__legal p { margin: 8px 0 0; opacity: .7; } /* 13. ANIMATIONS D'APPARITION ============================================== Tout élément avec l'attribut data-reveal apparaît au défilement. Délai réglable avec style="--d:.2s". ========================================================================= */ .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); } .js [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .js [data-reveal] { opacity: 1; transform: none; } .compass__needle { transform: none; } } /* Si la personne a réduit la transparence dans les réglages de son appareil : en-tête opaque */ @media (prefers-reduced-transparency: reduce) { .header, .header.is-scrolled { background: var(--cream); backdrop-filter: none; -webkit-backdrop-filter: none; } } /* 14. RESPONSIVE =========================================================== Conçu d'abord pour ordinateur, puis adapté : - ≤ 1100px : petits écrans d'ordinateur / tablette paysage - ≤ 860px : tablette portrait (menu burger) - ≤ 560px : téléphone ========================================================================= */ @media (max-width: 1100px) { :root { --gutter: 32px; --section-space: 88px; } .nav { gap: 24px; } .nav__list { gap: 22px; } .team { gap: 48px; } .member { grid-template-columns: 190px 1fr; gap: 32px; } .collab, .contact { gap: 48px; } } @media (max-width: 860px) { .quote { padding: 104px 0; background-attachment: scroll; } :root { --gutter: 24px; --section-space: 72px; --header-h: 68px; } /* Menu plein écran */ .burger { display: grid; place-content: center; gap: 7px; width: 44px; height: 44px; border: none; background: none; cursor: pointer; z-index: 60; color: inherit; } .burger span { display: block; width: 26px; height: 2px; background: currentColor; transition: transform .4s var(--ease); } .burger[aria-expanded="true"] { color: var(--blue-900); } .burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); } .burger[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); } /* backdrop-filter empêcherait le menu plein écran de couvrir la page */ .header__logo img, .header.is-scrolled .header__logo img { width: 52px; } .header, .header.is-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, .97); } .nav { position: fixed; inset: 0; z-index: 55; flex-direction: column; justify-content: center; gap: 40px; background: var(--cream); color: var(--blue-900); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; } .nav.is-open { opacity: 1; visibility: visible; } .nav__list { flex-direction: column; gap: 18px; } .nav__link { font-family: var(--font-title); font-size: 32px; font-weight: 600; } .nav__link--cta { font-family: var(--font); font-size: 18px; padding: 14px 32px; margin-top: 12px; } body.menu-open { overflow: hidden; } .hero { padding-top: var(--header-h); } .hero__top { display: block; min-height: 0; } .hero__inner { padding-top: 40px; padding-bottom: 32px; } .hero__content { max-width: none; padding-right: 0; } .hero__photo { position: relative; width: 100%; height: clamp(320px, 80vw, 520px); } .hero__photo img { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 20%); mask-image: linear-gradient(to top, transparent 0, #000 20%); } .intro, .services, .collab, .contact, .team { grid-template-columns: 1fr; gap: 24px; } .intro { gap: 20px; margin-bottom: 40px; } .services { gap: 16px; margin-bottom: 56px; } .values { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .understand, .steps { grid-template-columns: 1fr; } .understand { gap: 40px; margin-bottom: 56px; } .understand, .steps { gap: 16px; } .collab { gap: 40px; } .team { gap: 56px; } .member { grid-template-columns: 160px 1fr; } .member__photo { max-width: none; } .footer__inner { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } } @media (max-width: 560px) { :root { --gutter: 16px; --section-space: 64px; --radius: 14px; } body { font-size: 16px; } .hero__title { font-size: 54px; } .hero__actions .btn { width: 100%; } .lead { font-size: 17px; } .values { grid-template-columns: 1fr; } .service, .step, .card { padding: 28px 22px; } .form { padding: 28px 22px; } .figure { padding: 22px 20px; } .chips--brands li { font-size: 19px; } /* Filtres et onglets : une seule ligne qui défile horizontalement */ .tabs { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { flex: none; } .member { grid-template-columns: 1fr; gap: 20px; } .member__photo { max-width: 240px; } .form__row { grid-template-columns: 1fr; gap: 0; } .footer__inner { grid-template-columns: 1fr; } } /* ========================================================================== AJUSTEMENTS VALIDÉS LE 19/10/2026 (versions de test v11 à v15) Ces règles complètent ou remplacent celles du dessus : en cas de doute, c’est la règle la plus bas dans le fichier qui s’applique. ========================================================================== */ /* --- Partie 1 : critique Impeccable et skill taste (v11) --- */ /* 1. Les marques visibles dès l'accueil, en texte sobre, sous la bande d'infos */ /* 2. « Notre approche » allégée */ /* 2a. Mots des illustrations plus grands */ .compass text, .iceberg text { font-size: 14px; } /* 2b. Plus de grands numéros 01/02/03 presque invisibles : l'ordre se lit de gauche à droite */ /* 3. Orange un peu plus foncé (#b9541f, déjà dans les couleurs) pour le bouton principal et les petits textes orange : ils deviennent lisibles. Les barres et grands titres d'étapes gardent l'orange actuel. */ .btn--orange { background: var(--orange-dark); } .accent, .intro__text strong.accent, .member__role { color: var(--orange-dark); } /* 4. Pastilles réservées à ce qui se clique : les conditions de collaboration deviennent une liste simple avec un petit trait orange */ .terms { display: grid; gap: 12px; } .terms li { position: relative; padding: 0 0 0 24px; border: none; border-radius: 0; font-size: 16px; } .terms li::before { content: ""; position: absolute; left: 0; top: .66em; width: 14px; height: 3px; background: var(--orange-light); } @media (hover: hover) and (pointer: fine) { .terms li:hover { background: none; transform: none; } } /* 6. Petits détails */ /* 6a. « FR / EN » masqué tant que la version anglaise n'existe pas */ .lang { display: none; } /* 6b. Texte du pied de page plus lisible */ .footer__legal p { opacity: 1; } /* 6c. Bouton « Contact » toujours visible sur téléphone, à côté du menu */ .header__cta { display: none; } @media (max-width: 860px) { .header__cta { display: inline-flex; align-items: center; margin-left: auto; margin-right: 8px; padding: 10px 18px; border-radius: var(--radius-btn); background: var(--orange-dark); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; } body.menu-open .header__cta { visibility: hidden; } } /* 7. L'esperluette (idée de la skill taste) : le « & » du nom devient le signe de la rencontre entre l'entreprise et le candidat. Remplace l'ancien bloc à pastilles. */ .pair { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px 56px; background: var(--blue-100); border-radius: var(--radius); padding: 40px 56px; } .pair__amp { margin: 0; font-family: var(--font-title); font-weight: 500; line-height: .8; font-size: clamp(120px, 14vw, 200px); color: var(--blue-900); } .pair__title { margin: 0 0 20px; max-width: 620px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: var(--blue-900); } .pair__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; } .pair__list li { position: relative; padding-left: 24px; font-size: 16px; color: var(--ink); } .pair__list li::before { content: ""; position: absolute; left: 0; top: .66em; width: 14px; height: 3px; background: var(--orange); } @media (max-width: 860px) { .pair { grid-template-columns: 1fr; padding: 32px 28px; } .pair__amp { font-size: 112px; } } @media (max-width: 560px) { .pair__list { grid-template-columns: 1fr; } } /* 8. Citation à taille de phrase (et non de grand titre) : plus calme, plus « maison » */ .quote__text { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.3; } /* 6e. Plus de fins traits de séparation (bande d'infos sur téléphone, pied de page) : l'espace suffit */ .footer__inner { border-top: none; } /* 6f. Onglets sur plusieurs lignes sur téléphone (plus de rangée coupée au bord de l'écran) */ @media (max-width: 560px) { .tabs { flex-wrap: wrap; overflow: visible; margin-right: 0; padding-right: 0; } .tab { padding: 10px 16px; } } /* 5b. Titre du contact à la taille des autres titres (il tenait sur 3 lignes) */ .title--xl { font-size: clamp(32px, 3.6vw, 52px); } /* 9. Textes courants en encre foncée au lieu du gris (le gris reste pour les notes secondaires) : la page paraît plus « finie » et se lit mieux */ .intro__text, .step__list li, .value p, .member__intro, .member__more p { color: var(--ink); } /* 10. Animations revues (/review-animations, règles d'Emil Kowalski) --------------------- */ /* 10a. En-tête : hauteur fixe, le logo rétrécit par un léger zoom (fluide) au lieu de changer de taille */ .header, .header.is-scrolled { height: var(--header-h); transition: background .25s; } .header__logo img { transform-origin: left center; transition: transform .25s var(--ease); } .header.is-scrolled .header__logo img { width: 66px; transform: scale(.85); } @media (max-width: 860px) { .header__logo img, .header.is-scrolled .header__logo img { width: 52px; transform: none; } } /* 10b. Apparitions au défilement plus courtes, décalages resserrés (×0,6) */ .js [data-reveal] { transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--d, 0s) * .6); } /* 10c. Réactions sous 0,3 s : trait du menu, survols, photos, biographies */ .nav__link::after { transition: transform .25s var(--ease); } .member__photo img { transition: filter .3s; } .member__more:not([hidden]) { animation-duration: .3s; } /* 10d. Onglets : simple fondu rapide à chaque clic */ .tabpanel.is-active { animation: tab-in .2s var(--ease); } @keyframes tab-in { from { opacity: 0; transform: translateY(6px); } } /* 10e. Menu téléphone : ouverture 0,25 s, fermeture plus rapide (0,18 s) */ @media (max-width: 860px) { .nav { transition: opacity .18s, visibility .18s; } .nav.is-open { transition: opacity .25s, visibility .25s; } .burger span { transition: transform .25s var(--ease); } } /* 10f. Le bouton Contact du téléphone s'enfonce à l'appui comme les autres boutons */ .header__cta { -webkit-user-select: none; user-select: none; transition: transform .16s var(--ease); } .header__cta:active { transform: scale(.97); } /* 10g. Sur écran tactile, pas de couleur « collée » après un toucher */ @media (hover: none) { .link-btn:hover { color: var(--blue-900); } .linkedin:hover svg { fill: var(--grey-600); } .contact__details a:hover { color: var(--white); } .footer a:hover { color: inherit; } .nav__link:not(.is-active):hover::after { transform: scaleX(0); } } /* 10h. « Réduire les animations » : on garde un fondu doux, on supprime seulement les mouvements */ @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 0; transform: none; transition: opacity .4s ease !important; } .js [data-reveal].is-visible { opacity: 1; } } /* 11. Plus d’effet au survol sur ce qui ne se clique pas (cartes « Comprendre avant d’agir », étapes, blocs de chiffres, blocs Recrutement / Outplacement) : sinon le visiteur croit pouvoir cliquer. */ @media (hover: hover) and (pointer: fine) { .service:hover { transform: none; box-shadow: none; } .card:hover, .step:hover { transform: none; box-shadow: none; } } /* 1b. Les marques rangées en grille : l'étiquette dans sa colonne, 5 colonnes égales, tous les noms à la même taille et alignés (au lieu d'une ligne qui revient au hasard) */ /* --- Partie 2 : bandeau bleu, accueil, frise, animations (v13 à v15) --- */ .hero__band { background: var(--blue-900); color: var(--white); padding: 56px 0 60px; } /* Les 4 infos clés (dont les clients) : 4 colonnes égales, le texte en gras d'abord */ .band__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 40px; } .band__facts p { margin: 0; display: grid; gap: 4px; } .band__facts strong { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--white); } .band__facts span { font-size: 16px; color: rgba(255, 255, 255, .72); } @media (max-width: 1100px) { .band__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .hero__band { padding: 44px 0 48px; } .band__facts { grid-template-columns: 1fr; gap: 22px; } .band__facts strong { font-size: 20px; } } /* ========================================================================== AMÉLIORATIONS POUR LA NOTE (skills taste + frontend-design), 19/10/2026 Chaque point est réversible : supprimer le bloc correspondant. ========================================================================== */ /* A. Accueil : plus de petite phrase au-dessus du titre, tout est dit sous le titre */ .hero__values { max-width: 520px; font-size: 19px; line-height: 1.55; color: var(--ink); } /* B. Bandeau bleu : texte en gras un peu plus petit, et les petites lignes toujours alignées entre elles même si un texte en gras passe sur 2 lignes */ .band__facts { grid-template-rows: auto auto; row-gap: 0; } .band__facts p { grid-row: span 2; grid-template-rows: subgrid; align-content: start; } .band__facts strong { font-size: 19px; align-self: end; } @media (max-width: 1100px) { .band__facts { grid-template-rows: none; row-gap: 28px; } .band__facts p { grid-row: auto; grid-template-rows: none; } } /* D. Citation : voile bleu posé en aplat (et non en dégradé) sur la photo */ .quote { background: url("../img/immeuble-haussmannien.jpg") center / cover fixed; } .quote::before { content: ""; position: absolute; inset: 0; background: rgba(15, 33, 51, .62); } .quote > .container { position: relative; } @media (max-width: 860px) { .quote { background-attachment: scroll; } } /* F. Curseurs « culture d'entreprise » interactifs : le visiteur situe sa propre entreprise */ .scale { font-size: 13px; } .scale i { padding: 8px 0; cursor: pointer; border-radius: 100px; } .scale i:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; } .scale .dot { transition: background .2s, transform .16s var(--ease); } @media (hover: hover) and (pointer: fine) { .scale i:hover .dot:not(.is-on) { background: #cfd6de; } } .scale .dot.is-on { transform: scale(1.15); } /* G. Sur tablette et téléphone, plus d'espace entre les conditions de collaboration et les chiffres */ @media (max-width: 1100px) { .collab { row-gap: 56px; } } /* ========================================================================== v14 : mélange v11 + v13 (19/10/2026) ========================================================================== */ /* Blocs Recrutement / Outplacement : léger éclaircissement du bleu au survol, sans soulèvement, sans ombre ni curseur « main » (pour ne pas faire croire à un lien) */ .service { cursor: default; transition: background .3s ease; } @media (hover: hover) and (pointer: fine) { .service:hover { background: #22425f; } .service:nth-child(2):hover { background: #376a96; } } /* « Nos clients » : moins d'espace entre la phrase et les onglets des catégories */ #clients .section__head { margin-bottom: 36px; } /* Contact : le petit titre « Contact » commence en haut, au niveau du formulaire */ .contact { align-items: start; } /* Citation : photo de l'immeuble enregistrée dans le site (assets/img) au lieu d'un lien vers Unsplash */ .quote { background-image: url("../img/immeuble-haussmannien.jpg"); } /* Tailles de texte harmonisées : 13 (légendes) · 15 (libellés) · 16 (textes des blocs) · 18 (phrases d'introduction) · 20 (petits titres) · 26 (titres de blocs) · puis les grands titres */ .hero__values, .member__intro, .member__quote { font-size: 18px; } .band__facts strong, .card__title { font-size: 20px; } .step__list li, .member__more p { font-size: 16px; } .footer, .form__status { font-size: 15px; } /* Noms des marques et intitulés de postes à la même taille */ .chips li, .chips--brands li { font-size: 18px; font-weight: 500; color: var(--blue-900); } @media (max-width: 560px) { .chips li, .chips--brands li { font-size: 17px; } } /* ---- v14, retouches du 19/10 (2) ---- */ /* Boutons de l'accueil sur une seule ligne (ordinateur) */ @media (min-width: 861px) { .hero__content { max-width: 58%; } .hero__actions { flex-wrap: nowrap; } .hero__actions .btn { padding: 18px 26px; white-space: nowrap; } } /* Bandeau : chaque titre tient sur une seule ligne ; les colonnes prennent la largeur de leur texte */ @media (min-width: 1101px) { .band__facts { grid-template-columns: repeat(4, auto); justify-content: space-between; column-gap: 40px; } .band__facts strong { white-space: nowrap; font-size: 19px; } .band__facts span { max-width: 280px; } } /* Apostrophe de « qu’à » : léger écart visuel (la police colle l'apostrophe au « à ») */ .apos { margin-right: .08em; } /* Marques et postes rangés dans la même grille de colonnes, pour qu'ils s'alignent entre eux */ .chips, .chips--brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px 32px; } .chips li, .chips--brands li { font-size: 17px; line-height: 1.35; } @media (max-width: 560px) { .chips, .chips--brands { grid-template-columns: 1fr 1fr; gap: 12px 20px; } .chips li, .chips--brands li { font-size: 16px; } } .roles--brands { margin-bottom: 56px; } /* Équipe : textes plus petits, et le début du parcours visible sans cliquer */ .member__intro { font-size: 16px; } .member__bio, .member__more p { font-size: 15px; color: var(--ink); } .member__bio { margin: 12px 0 0; } .member__quote { font-size: 16px; } /* Équipe : un peu d'air entre le texte et « Lire son parcours » */ .member__actions { margin-top: 18px; } /* ---- Animations validées (find-animation-opportunities) ---- */ /* 1. Curseurs : une seule pastille orange qui glisse (0,2 s) au lieu de sauter d'un point à l'autre */ .scale i { position: relative; } .scale .dot.is-on { background: var(--grey-200); transform: none; } .scale .puck { position: absolute; left: 0; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); pointer-events: none; transition: transform .2s var(--ease); } /* 2. … et à la première apparition, chaque pastille glisse du milieu jusqu'à sa place (0,5 s) */ .scale.is-sweeping .puck { transition-duration: .5s; } /* 3. Iceberg : la pointe d'abord, puis la partie immergée se dévoile (0,6 s), une seule fois */ .js .iceberg__under, .js .iceberg__label-under { opacity: 0; transform: translateY(10px); transform-box: fill-box; transition: opacity .6s var(--ease) .35s, transform .6s var(--ease) .35s; } .js .card.is-visible .iceberg__under, .js .card.is-visible .iceberg__label-under { opacity: 1; transform: none; } /* 4. Boussole : les mots sont « pointables » à la souris (l'aiguille tourne vers eux, voir main.js) */ @media (hover: hover) and (pointer: fine) { .compass text { cursor: default; pointer-events: all; } } /* Animations réduites : pas de glissade ni de décalage, la partie immergée apparaît en simple fondu */ @media (prefers-reduced-motion: reduce) { .js .iceberg__under, .js .iceberg__label-under { transform: none; transition: opacity .4s ease !important; } } /* ---- v14, retouches (3) ---- */ /* Équipe : phrase de présentation en italique, plus d'air avant « Lire son parcours » */ .member__intro { font-style: italic; } .member__actions { margin-top: 32px; } /* Contact : les icônes rondes mènent au même lien que le texte à côté */ a.contact__icon { text-decoration: none; color: inherit; } /* ========================================================================== v15 : la méthode en frise chronologique + blocs Recrutement / Outplacement ========================================================================== */ /* Frise : une ligne horizontale, un point orange par étape, le texte un peu plus petit */ .steps { position: relative; gap: 48px; padding-top: 44px; margin-bottom: 40px; } .steps::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 3px; border-radius: 2px; background: rgba(26, 53, 80, .16); } .step { position: relative; background: none; padding: 0; border-radius: 0; overflow: visible; } .step::before { content: ""; position: absolute; top: -44px; left: 0; width: 17px; height: 17px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 6px var(--sand); } .step__title { font-size: 22px; margin-bottom: 12px; } .step__list li { font-size: 15px; } @media (hover: hover) and (pointer: fine) { .step:hover { transform: none; box-shadow: none; } } /* La ligne se trace de gauche à droite quand la frise apparaît (0,9 s), puis les étapes suivent */ .js .steps::before { transform: scaleX(0); transform-origin: left center; transition: transform .9s var(--ease); } .js .steps.is-visible::before { transform: none; } /* Téléphone : la frise devient verticale, ligne à gauche */ @media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: 36px; padding: 0 0 0 36px; } .steps::before { top: 4px; bottom: 4px; left: 7px; right: auto; width: 3px; height: auto; } .step::before { top: 4px; left: -36px; } .js .steps::before { transform: scaleY(0); transform-origin: center top; } } @media (prefers-reduced-motion: reduce) { .js .steps::before { transform: none; } } /* Blocs Recrutement / Outplacement : l'effet s'installe en douceur et s'efface lentement (il « reste » un peu après le passage de la souris), avec une ombre légère. Toujours sans soulèvement ni curseur « main », pour ne pas faire croire à un lien. */ .service { transition: background .8s ease, box-shadow .8s ease; } @media (hover: hover) and (pointer: fine) { .service:hover { transition: background .4s ease, box-shadow .4s ease; box-shadow: 0 26px 50px -30px rgba(15, 33, 51, .55); } } /* ---- v15 : animations allégées (impeccable) ---- Seuls l'accueil (une fois), les 3 cartes et la frise (à chaque passage) apparaissent en mouvement. La liste de la frise elle-même ne s'efface pas : seule sa ligne se trace, puis les étapes apparaissent. */ .js .steps[data-reveal] { opacity: 1; transform: none; } /* Poste des associées : orange un peu plus soutenu, lisible sur le fond gris-bleu */ .member__role { color: #b2501d; } /* Chiffres sur téléphone : l'unité (candidats, mois, an) toujours sous le chiffre, pour que les 4 blocs se ressemblent */ @media (max-width: 560px) { .figure__num small { display: block; margin-top: 6px; } } /* --- Partie 3 : retouches après validation (19/10/2026) --- */ /* Blocs Recrutement / Outplacement et chiffres : plus aucun effet au survol */ .service, .figure { transition: none; } @media (hover: hover) and (pointer: fine) { .service:hover, .service:nth-child(2):hover { box-shadow: none; } .service:hover { background: var(--blue-900); } .service:nth-child(2):hover { background: var(--blue-700); } .figure:hover { background: var(--blue-900); } } /* Bloc « & » : plus d'espace avec la frise au-dessus */ .pair { margin-top: 72px; } @media (max-width: 860px) { .pair { margin-top: 48px; } } /* Menu sur téléphone : liens moins grands, « Contact » plus détaché, pas de trait orange */ @media (max-width: 860px) { .nav__list { gap: 26px; } .nav__link { font-size: 19px; letter-spacing: .14em; } .nav__link::after { display: none; } .nav__link--cta { display: inline-block; font-size: 14px; margin-top: 30px; padding: 14px 30px; } } /* --- Partie 4 : corrections de l'audit impeccable (19/10/2026) --- */ /* Icônes LinkedIn des associées : zone de clic de 44 × 44 px, sans changer l'apparence */ .linkedin { padding: 14px; margin: -14px; } /* Curseurs de culture : zone de toucher de 24 px de haut, sans agrandir les lignes (la marge négative compense, la carte garde sa hauteur et son titre reste aligné) */ .scale i { padding: 6px 0; margin: -6px 0; } .scale .puck { top: 6px; } /* Bouton « Contact » de l'en-tête sur téléphone : 44 px de haut */ @media (max-width: 860px) { .header__cta { min-height: 44px; } } /* --- Partie 5 : les deux métiers en bandeau pleine largeur (v17, validé) --- */ .services-band { background: var(--sand); padding: 72px 0; margin-bottom: 72px; } .services-band .services { grid-template-columns: 1fr 1fr; gap: 40px 96px; margin-bottom: 0; } .services-band .service, .services-band .service:nth-child(2) { background: none; color: var(--ink); border-radius: 0; padding: 0; box-shadow: none; } @media (hover: hover) and (pointer: fine) { .services-band .service:hover, .services-band .service:nth-child(2):hover { background: none; box-shadow: none; } } .services-band .service::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; margin-bottom: 24px; background: var(--orange); } .services-band .service__title { font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.015em; color: var(--blue-900); margin-bottom: 14px; } .services-band .service p { font-size: 18px; line-height: 1.6; color: var(--ink); max-width: 480px; margin: 0; } @media (max-width: 860px) { .services-band { padding: 56px 0; margin-bottom: 56px; } .services-band .services { grid-template-columns: 1fr; gap: 44px; } } /* ========================================================================== Échelle de tailles simplifiée (v18, validée) (7 niveaux au lieu d'une quinzaine) 1. Grand titre 84 2. Titre de partie 52 3. Sous-titre 32 4. Petit titre 20 5. Introduction 18 6. Texte 16 7. Légende 14 (exceptions voulues : menu et boutons en petites capitales 12 px ; chiffres et « & » en très grand) ========================================================================== */ :root { --fs-h2: clamp(32px, 3.6vw, 52px); --fs-h3: clamp(24px, 2.4vw, 32px); --fs-h4: 20px; --fs-intro: 18px; --fs-text: 16px; --fs-small: 14px; } body { font-size: var(--fs-text); } /* 2. Titres de partie (dont le contact et la devise du pied de page) */ .title, .title--xl, .footer__tagline { font-size: var(--fs-h2); } /* 3. Sous-titres : tous à la même taille */ .title--sub, .services-band .service__title, .pair__title, .member__name, .quote__text { font-size: var(--fs-h3); } /* 4. Petits titres */ .label, .value__title, .card__title, .band__facts strong, .step__title { font-size: var(--fs-h4); } /* 5. Phrases d'introduction */ .hero__values, .lead, .intro__text, .services-band .service p, .contact__details a { font-size: var(--fs-intro); } /* 6. Texte : tout le reste du texte courant, listes, marques et postes, présentation des associées */ .value p, .step__list li, .pair__list li, .terms li, .band__facts span, .chips li, .chips--brands li, .member__intro, .member__bio, .member__more p, .member__quote, .candidates-line, .field input, .field select, .field textarea { font-size: var(--fs-text); } /* 7. Légendes et libellés */ .member__role, .figure__label, .hero__photo figcaption, .contact__label, .contact__details small, .field label, .consent, .form__status, .footer, .scale, .quote__sign, .link-btn, .tab { font-size: var(--fs-small); } /* Téléphone : l'introduction rejoint le texte, pour ne pas surcharger les petits écrans */ @media (max-width: 560px) { :root { --fs-intro: 17px; } } /* ========================================================================== Finitions (/impeccable polish, 19/10/2026) ========================================================================== */ /* Titres équilibrés (pas de mot seul sur la dernière ligne), paragraphes sans veuve */ h1, h2, h3, h4, .title, .pair__title, .quote__text, .band__facts strong { text-wrap: balance; } p, li { text-wrap: pretty; } /* Lignes de texte à une longueur confortable dans la présentation des associées */ .member__intro, .member__bio, .member__more p { max-width: 68ch; } /* Éléments du navigateur aux couleurs du site */ ::selection { background: rgba(217, 105, 47, .22); color: var(--ink); } input, textarea { caret-color: var(--orange-dark); } input[type="checkbox"] { accent-color: var(--blue-900); } a { text-underline-offset: .18em; text-decoration-thickness: 1px; } html { scrollbar-color: rgba(26, 53, 80, .35) transparent; } /* À l'impression (ou si les animations ne se déclenchent pas), tout le contenu reste visible */ @media print { .js [data-reveal] { opacity: 1 !important; transform: none !important; } .header, .burger, .header__cta { display: none; } } /* --- v19 : sous-titre « Ce qui nous guide », métiers sans barres orange, FR / EN, sous-titres harmonisés --- */ /* « Ce qui nous guide » devient un vrai sous-titre, au même niveau que « Une méthodologie… » */ /* Bandeau des métiers : plus de petites barres orange (l’orange reste pour les traits des valeurs, juste dessous) */ .services-band .service::before { content: none; } /* FR / EN de retour : FR actif, EN lisible mais inactif tant que la version anglaise n’existe pas */ .lang { display: flex; } .lang__item.is-disabled { opacity: 1; color: var(--grey-600); cursor: help; } /* « Autant d’attention au candidat qu’à l’entreprise » sur une seule ligne (ordinateur) */ @media (min-width: 861px) { .pair__title { max-width: none; white-space: nowrap; } } /* Tous les sous-titres (niveau 32 px) à la même graisse moyenne, comme les titres de partie */ .title--sub, .services-band .service__title, .pair__title, .member__name, .quote__text { font-weight: 500; } /* --- Partie 6 : esperluette et couleurs du logo (v24, validée le 19/10/2026) --- */ :root { --logo-blue: #35628c; /* carré « cap » du logo */ --logo-amp: #7e8c96; /* esperluette du logo */ } /* Un « & » entre Recrutement et Outplacement, dans la couleur de l'esperluette du logo */ .services-band .services--amp { grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 56px; } .services__amp, .pair__amp { margin: 0; font-family: var(--font-title); font-weight: 300; line-height: .8; font-size: clamp(96px, 9vw, 140px); color: var(--logo-amp); } @media (max-width: 860px) { .services-band .services--amp { grid-template-columns: 1fr; row-gap: 0; } .services__amp { font-size: 72px; line-height: 1; margin: 12px 0 16px; } .pair__amp { font-size: 88px; } } /* Bleu du logo : bandeau sous l'accueil et onglets actifs de « Nos clients » */ .hero__band { background: var(--logo-blue); } .tab.is-active { background: var(--logo-blue); border-color: var(--logo-blue); } /* ========================================================================== AJUSTEMENTS VALIDÉS — partie 7 (v26, 20/10/2026) Bandeau à 3 infos, angles droits, « Ce qui nous guide » sur photo, défilement des marques, flèche de la frise ========================================================================== */ /* Bandeau d'accueil : 3 infos (« Ils nous font confiance » est devenu le défilement des marques) */ .band__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (min-width: 1101px) { .band__facts { grid-template-columns: repeat(3, auto); } } @media (max-width: 860px) { .band__facts { grid-template-columns: 1fr; } } /* Angles droits partout (plus « couture »), boutons et onglets compris ; seuls le formulaire de contact (bloc, champs, bouton) et les icônes de contact rondes gardent leurs arrondis */ :root { --radius: 0px; --radius-btn: 0px; } @media (max-width: 560px) { :root { --radius: 0px; } } .form { border-radius: 24px; } @media (max-width: 560px) { .form { border-radius: 14px; } } /* « Ce qui nous guide » : fond bleu nuit, photo sur les deux tiers droits, un panneau blanc posé à gauche qui chevauche la photo ; valeurs en 2 × 2 */ .services-band:has(+ .guide-band) { margin-bottom: 0; } .guide-band { position: relative; isolation: isolate; overflow: hidden; background: var(--blue-900); padding: 88px 0; } .guide-band__img { position: absolute; top: 0; right: 0; z-index: -1; width: 62%; height: 100%; object-fit: cover; } .guide-panel { max-width: 620px; background: var(--white); border-radius: var(--radius); padding: 52px 56px 56px; } .guide-band .title--sub { margin-bottom: 36px; } .guide-band .values { grid-template-columns: 1fr 1fr; gap: 36px 48px; } .guide-band .value { border-top: 0; padding: 0; } .guide-band .value__title { margin-bottom: 8px; } @media (max-width: 1100px) { .guide-band__img { width: 55%; } .guide-panel { max-width: 560px; padding: 44px; } } /* Téléphone : la photo en haut, le panneau (gris-bleu clair) remonte dessus */ @media (max-width: 860px) { .guide-band { background: none; padding: 0 0 8px; } .guide-band__img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; } .guide-panel { position: relative; max-width: none; margin-top: -56px; padding: 32px 28px; background: var(--blue-100); } } @media (max-width: 560px) { .guide-band .values { grid-template-columns: 1fr; gap: 24px; } .guide-panel { margin-top: -40px; padding: 28px 22px; } } /* « Ils nous font confiance » : les marques défilent en continu, en transparence, sur deux lignes */ .marquee__title { margin-top: 88px; } @media (max-width: 860px) { .marquee__title { margin-top: 56px; } } .marquee { display: grid; gap: 18px; } .marquee__row { display: flex; overflow: hidden; /* bords fondus : les noms apparaissent et disparaissent en douceur */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display: flex; flex-shrink: 0; gap: 64px; padding-right: 64px; margin: 0; animation: marquee 80s linear infinite; } .marquee__row--reverse .marquee__track { animation-direction: reverse; animation-duration: 95s; } .marquee__track li { white-space: nowrap; font-size: var(--fs-h3); font-weight: 400; letter-spacing: -.01em; color: var(--blue-900); opacity: .6; /* en transparence, mais lisible (contraste suffisant pour un grand texte) */ } @keyframes marquee { to { transform: translateX(-100%); } } @media (max-width: 560px) { .marquee__track { gap: 40px; padding-right: 40px; animation-duration: 55s; } .marquee__row--reverse .marquee__track { animation-duration: 65s; } .marquee__track li { font-size: 24px; } } /* Animations réduites : pas de défilement, les noms s'affichent à l'arrêt, sur plusieurs lignes */ @media (prefers-reduced-motion: reduce) { .marquee__row { -webkit-mask-image: none; mask-image: none; } .marquee__track { animation: none; flex-wrap: wrap; flex-shrink: 1; row-gap: 12px; } .marquee__track[aria-hidden="true"] { display: none; } } /* Frise : une flèche orange au bout de la ligne indique le sens (vers le bas sur téléphone), elle apparaît une fois la ligne tracée */ .steps::after { content: ""; position: absolute; top: 3px; right: 4px; width: 11px; height: 11px; border-top: 3px solid var(--orange); border-right: 3px solid var(--orange); transform: rotate(45deg); } .js .steps::after { opacity: 0; transition: opacity .3s ease .8s; } .js .steps.is-visible::after { opacity: 1; } @media (max-width: 860px) { .steps::after { top: auto; bottom: 4px; right: auto; left: 3px; transform: rotate(135deg); } } @media (prefers-reduced-motion: reduce) { .js .steps::after { opacity: 1; transition: none; } } /* Menu, FR / EN et boutons : 13 px au lieu de 12 (plus lisibles, même allure) */ .btn, .nav__link, .lang, .header__cta { font-size: 13px; } /* Écrans intermédiaires (petites tablettes à l'horizontale) : lettres un peu moins espacées pour que le menu tienne */ @media (min-width: 861px) and (max-width: 1080px) { .nav__link { letter-spacing: .08em; } } /* v27 : champ « Votre CV » (bouton de choix de fichier aux couleurs du site) */ .field label .field__hint { font-weight: 500; color: var(--grey-600); } .field input[type="file"] { padding: 10px 12px; font-size: 14px; cursor: pointer; } .field input[type="file"]::file-selector-button { margin-right: 14px; padding: 8px 16px; border: 0; border-radius: 100px; cursor: pointer; background: var(--blue-900); color: var(--white); font: 600 13px var(--font); transition: background .2s; } @media (hover: hover) and (pointer: fine) { .field input[type="file"]::file-selector-button:hover { background: var(--blue-700); } } /* ===== AJUSTEMENTS VALIDÉS — partie 8 (v28, 20/10/2026) ===== */ /* Cartes « Comprendre avant d'agir » : titres courts, posés en bas de la carte et alignés entre eux */ .card__title { min-height: 0; padding-top: 8px; } /* Bloc « & » remonté avant la frise : de l'air avant le titre de la méthode */ .pair ~ .title--sub { margin-top: 88px; } @media (max-width: 860px) { .pair ~ .title--sub { margin-top: 56px; } } /* Bande citation : client et candidat côte à côte (l'un sous l'autre sur téléphone) */ .quote__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 80px; align-items: start; } .quote__grid .quote__text { max-width: none; font-size: clamp(22px, 2vw, 28px); } @media (max-width: 860px) { .quote__grid { grid-template-columns: 1fr; } } /* ===== AJUSTEMENTS VALIDÉS — partie 9 (v29, 20/10/2026) ===== */ /* Champ CV : bouton rectangulaire en français, nom du fichier à côté */ .field[hidden] { display: none; } .field__label { display: block; font-size: 13px; font-weight: 700; color: var(--blue-900); margin-bottom: 6px; } .field__label .field__hint { font-weight: 500; color: var(--grey-600); } .file { display: flex; align-items: center; gap: 14px; padding: 8px; border: 1.5px solid var(--grey-200); border-radius: 14px; background: var(--cream); } .file__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); } .file__btn { flex-shrink: 0; padding: 11px 18px; background: var(--blue-900); color: var(--white); font: 600 13px var(--font); cursor: pointer; transition: background .2s; } @media (hover: hover) and (pointer: fine) { .file__btn:hover { background: var(--blue-700); } } .file__input:focus-visible + .file__btn { outline: 2px solid var(--orange); outline-offset: 3px; } .file__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--grey-600); } .field.has-error .file { border-color: #c0392b; } /* Société facultative pour une candidature spontanée : l'astérisque disparaît */ .field.is-optional label span[aria-hidden] { display: none; } /* Bloc « & » : fond blanc, plus net sur le fond gris-bleu de la partie */ .pair { background: var(--white); } /* Correctifs du champ CV : le bouton garde son texte blanc, le champ caché reste dans son cadre */ .file { position: relative; } .field .file__btn { display: inline-block; margin: 0; color: var(--white); font-size: 13px; } /* Bloc « & » : un gris-bleu plus soutenu que le fond de la partie (le blanc ne ressortait pas assez) */ .pair { background: #dbe4ee; } /* Photo de réunion : les trois personnes restent dans le cadre */ .guide-band__img { object-position: 45% 45%; } /* Accueil : sur les écrans moyens, la photo se réduit pour ne jamais toucher les boutons */ /* Boutons de l’accueil un peu plus compacts (avant les réglages des écrans moyens, qui les resserrent encore) */ .hero__actions .btn { padding-left: 26px; padding-right: 26px; letter-spacing: .14em; } /* Accueil, écrans d'ordinateur moyens (861-1220 px) : boutons toujours sur une ligne, un peu plus compacts ; photo un peu moins large et accueil moins haut, pour que les associées restent entières sans toucher les boutons */ @media (min-width: 861px) and (max-width: 1220px) { .hero__actions { flex-wrap: nowrap; gap: 10px; } /* les boutons s’étirent jusqu’au bout de la colonne de texte (même largeur que la phrase au-dessus) */ .hero__actions .btn { flex: 1 1 auto; } .hero__actions { max-width: calc(54vw - var(--gutter) - 24px); } /* s’arrêtent ~16 px avant le bord (fondu) de la photo */ .hero__actions .btn { font-size: 12px; letter-spacing: .1em; padding: 16px 18px; } .hero__photo { width: 46%; } .hero__top { min-height: 500px; } } @media (min-width: 861px) and (max-width: 960px) { .hero__actions .btn { letter-spacing: .06em; padding: 15px 15px; } .hero__photo { width: 45%; } .hero__actions { max-width: calc(55vw - var(--gutter) - 24px); } } /* Photo d'accueil : on garde tout le haut de l'image (têtes et bambous) ; si elle doit être recadrée, c'est par le bas, déjà fondu */ .hero__photo img { object-position: 50% 45%; } /* Libellé « Votre CV » : vrai