/* ===================================================================== Human Talent Consulting — Feuille de style principale Cabinet de recrutement & conseil RH --------------------------------------------------------------------- Sommaire 01. Tokens (couleurs, typo, espacements, ombres) 02. Reset & base 03. Utilitaires & layout 04. Boutons, badges, pills 05. Topbar + Header / Navigation 06. Hero & bandeaux de page 07. Sections & titres 08. Cartes (expertises, offres, articles, publications) 09. Chiffres clés, process, témoignages, logos 10. Offres d'emploi : filtres, liste, fiche 11. Formulaires (contact, dépôt de CV multi-étapes) 12. Accordéon FAQ, compte à rebours, programme salon 13. Pagination, fil d'ariane, alertes 14. Footer 15. Animations & reveal 16. Responsive ===================================================================== */ /* ==== 01. TOKENS ==================================================== */ @import "tokens-196SSYQ.css"; /* ==== 02. RESET & BASE ============================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--topbar-h) + 20px); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 16.5px; line-height: 1.7; color: var(--ink-2); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.is-locked { overflow: hidden; } img, svg, video { max-width: 100%; display: block; } /* Taille par défaut de toute icône SVG inline (faible spécificité : toute règle plus précise — .btn svg, .card__icon svg, etc. — garde priorité). Sans ce filet, une icône déposée sans conteneur dimensionné (ex. dans une liste de pied de page ou un lien de pagination) s'affiche à sa taille intrinsèque et casse la mise en page. */ svg[aria-hidden="true"] { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -0.2em; } h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--navy-900); line-height: 1.15; margin: 0 0 .6em; letter-spacing: -.02em; font-weight: 800; } h1 { font-size: clamp(2.15rem, 4.6vw, 3.6rem); } h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); } h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-weight: 700; } h4 { font-size: 1.08rem; font-weight: 700; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } a { color: var(--sky-700); text-decoration: none; transition: color .25s var(--ease); } a:hover { color: var(--navy-700); } ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; } li { margin-bottom: .4em; } strong { color: var(--navy-800); font-weight: 650; } small { font-size: .84rem; } hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; } ::selection { background: var(--sky-200); color: var(--navy-900); } /* Les adresses e-mail et URL longues ne doivent jamais casser la grille */ a[href^="mailto:"], a[href^="http"] { overflow-wrap: anywhere; } :focus-visible { outline: 3px solid var(--sky-400); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--navy-900); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0; font-weight: 600; } .skip-link:focus { left: 0; color: #fff; } /* ==== 03. UTILITAIRES & LAYOUT ====================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: 860px; } .container--wide { max-width: 1360px; } /* Barre de navigation : le menu + CTA "Nous contacter" regroupés et centrés (voir .site-header__menu) ont besoin de plus de place que le contenu éditorial classique — avec le --container standard (1340px), leur contenu centré déborde parfois par-dessus le logo. Largeur illimitée ici, seul le padding-inline (gutter) est conservé pour garder le même alignement visuel que le reste du site. */ .container--fluid { max-width: none; } .grid { display: grid; gap: 28px; } /* Empilement vertical sûr : la colonne ne peut pas dépasser son conteneur */ .stack { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); } .stack--sm { gap: 16px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-sm { gap: 10px; } .gap-md { gap: 18px; } .gap-lg { gap: 32px; } .wrap { flex-wrap: wrap; } .text-center { text-align: center; } .mx-auto { margin-inline: auto; } .mt-0 { margin-top: 0; } .mt-sm { margin-top: 12px; } .mt-md { margin-top: 26px; } .mt-lg { margin-top: 48px; } .mb-0 { margin-bottom: 0 !important; } .no-list { list-style: none; padding: 0; margin: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } [hidden] { display: none !important; } .lead { font-size: 1.14rem; color: var(--ink-3); } .muted { color: var(--ink-3); } .accent { color: var(--sky-600); } .gradient-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .on-dark .gradient-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; } /* ==== 04. BOUTONS, BADGES ========================================== */ .btn { --btn-bg: var(--navy-800); --btn-fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: .96rem; letter-spacing: -.01em; padding: 15px 28px; border: 1px solid transparent; border-radius: var(--r-pill); background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; text-align: center; transition: transform .28s var(--ease), box-shadow .28s var(--ease), background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease); position: relative; overflow: hidden; will-change: transform; } .btn:hover { color: var(--btn-fg); transform: translateY(-3px); box-shadow: var(--sh-md); } .btn:active { transform: translateY(-1px); } .btn svg { width: 18px; height: 18px; flex: none; } /* Le remplissage en dégradé est peint sur un calque ::before légèrement surdimensionné (inset négatif) puis rogné par le overflow:hidden du bouton : ça évite le liseré d'une autre couleur qui peut apparaître aux deux extrémités d'une pilule très arrondie (écart d'anti-aliasing entre le rectangle du dégradé et la courbe du border-radius). */ .btn--primary { background: none; box-shadow: var(--sh-sky); } .btn--primary::before { content: ""; position: absolute; inset: -2px; z-index: -1; background: var(--grad-brand); } .btn--primary:hover { box-shadow: 0 22px 46px rgba(33, 167, 224, .38); } .btn--primary::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); transition: left .75s var(--ease); pointer-events: none; } .btn--primary:hover::after { left: 130%; } /* CTA principal du hero : légère pulsation pour attirer l'œil sans gêner la lecture (respecte prefers-reduced-motion, voir section 15). */ .hero__cta .btn--primary { animation: cta-pulse 2.6s ease-in-out infinite; } @keyframes cta-pulse { 0%, 100% { box-shadow: var(--sh-sky); } 50% { box-shadow: 0 22px 50px rgba(33, 167, 224, .5); } } .btn--sky { background: var(--sky-500); } .btn--sky:hover { background: var(--sky-600); } .btn--ghost { background: transparent; color: var(--navy-800); border-color: rgba(11, 43, 71, .18); } .btn--ghost:hover { background: var(--navy-800); color: #fff; border-color: var(--navy-800); } .btn--light { background: #fff; color: var(--navy-800); } .btn--light:hover { color: var(--navy-900); } .btn--outline-light { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .34); backdrop-filter: blur(6px); } .btn--outline-light:hover { background: #fff; color: var(--navy-900); border-color: #fff; } .btn--sm { padding: 10px 20px; font-size: .88rem; } .btn--lg { padding: 18px 36px; font-size: 1.03rem; } .btn--block { width: 100%; } .btn-link { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; color: var(--sky-700); } .btn-link svg { width: 17px; height: 17px; transition: transform .3s var(--ease); } .btn-link:hover svg { transform: translateX(5px); } .badge { display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-family: var(--font-display); padding: 6px 14px; border-radius: var(--r-pill); background: var(--sky-100); color: var(--sky-700); } .badge--navy { background: rgba(11, 43, 71, .08); color: var(--navy-700); } .badge--success { background: rgba(18, 163, 123, .12); color: var(--success); } .badge--warn { background: rgba(226, 149, 43, .14); color: #a76a12; } .badge--light { background: rgba(255, 255, 255, .13); color: #fff; border: 1px solid rgba(255,255,255,.22); } .badge--dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .badge--sm { font-size: 15px; padding: 4px 12px; gap: 5px; letter-spacing: .03em; } /* Priorité renforcée : le badge posé sur une image de carte (post__media, job-card...) doit toujours rester ce format, quel que soit l'ordre des règles ailleurs dans ce fichier. */ .post__media .badge.badge--sm { font-size: 15px; padding: 4px 12px; } .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sky-600); margin-bottom: 18px; } .eyebrow::before { content: ""; width: 34px; height: 2px; border-radius: 2px; background: var(--grad-sky); } .on-dark .eyebrow { color: var(--sky-300); } .pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: var(--r-xs); background: var(--paper-2); border: 1px solid var(--line); font-size: .74rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; } /* ==== 05. TOPBAR + HEADER ========================================== */ .topbar { background: var(--navy-900); color: rgba(255, 255, 255, .78); font-size: .84rem; height: var(--topbar-h); display: flex; align-items: center; position: sticky; top: 0; z-index: 101; } .topbar a { color: rgba(255, 255, 255, .82); } .topbar a:hover { color: #fff; } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .topbar__list { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; } .topbar__list li { margin: 0; display: flex; align-items: center; gap: 7px; } .topbar__list svg { width: 15px; height: 15px; opacity: .8; } .topbar__sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .2); } .topbar .social-btn { width: 27px; height: 27px; background: rgba(255, 255, 255, .12); } .topbar .social-btn svg { width: 13px; height: 13px; } .topbar .social-btn:hover { background: var(--sky-500); transform: none; } .topbar__socials { display: flex; gap: 7px; } .site-header { position: sticky; top: var(--topbar-h); z-index: 100; background: rgba(255, 255, 255, .88); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line-2); transition: box-shadow .3s var(--ease), background-color .3s var(--ease); } .site-header.is-stuck { box-shadow: 0 8px 30px rgba(11, 43, 71, .09); background: rgba(255, 255, 255, .96); } .site-header__inner { /* Logo + menu (nav + CTA) forment un seul bloc de taille naturelle, centré sur toute la largeur (voir .container--fluid) — pas de "flex:1" ici qui étirerait le menu et laisserait le logo collé à gauche. Repasse en logo-à-gauche/burger-à-droite sous 1340px, voir ce breakpoint plus bas. */ display: flex; align-items: center; justify-content: center; gap: 24px; height: var(--header-h); } /* Logo — wordmark SVG unique (pictogramme + texte intégrés au tracé, voir partials/_logo.html.twig) : .logo__mark ne pilote que la hauteur, la largeur suit automatiquement le viewBox (ratio 2:1). */ .logo { display: inline-flex; align-items: center; flex: none; } /* Sélecteur .logo .logo__mark (et non .logo__mark seul) : nécessaire pour passer devant svg[aria-hidden="true"] (taille par défaut des icônes, voir plus haut) qui matcherait sinon en premier — le SVG du logo porte aria-hidden="true" comme n'importe quelle icône décorative. */ .logo .logo__mark { height: 64px; width: auto; flex: none; } /* Navigation principale */ .nav { display: flex; align-items: center; gap: 4px; } .nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .nav__item { margin: 0; position: relative; } .nav__link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 650; font-size: .84rem; color: var(--navy-800); padding: 11px 8px; border-radius: var(--r-sm); white-space: nowrap; position: relative; transition: color .25s var(--ease), background-color .25s var(--ease); } .nav__link::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--grad-sky); transform: scaleX(0); transform-origin: left; transition: transform .32s var(--ease); } .nav__link:hover { color: var(--sky-700); background: var(--sky-050); } .nav__link:hover::after { transform: scaleX(1); } .nav__item.is-active > .nav__link { color: var(--sky-700); } .nav__item.is-active > .nav__link::after { transform: scaleX(1); } /* Item optionnel (Salon de l'emploi) : l'espace est prévu, l'affichage est piloté par la config */ .nav__item--optional > .nav__link { } /* "Découvrez-nous" : un peu plus voyant que les autres liens texte pour inciter les entreprises à cliquer, sans rivaliser avec le bouton plein "Nous contacter" (voir .nav__contact-cta). */ .nav__link--highlight { font-weight: 800; color: var(--sky-700); background: var(--sky-050); border: 1px solid var(--sky-100); } .nav__link--highlight:hover { background: var(--sky-100); } .nav__item.is-active > .nav__link--highlight { background: var(--sky-100); } .nav__flag { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sky-500); box-shadow: 0 0 0 4px rgba(33, 167, 224, .18); animation: pulse 2.4s infinite; } /* Menu de l'événement en cours (libellé = titre de l'événement, voir partials/_header.html.twig) : actif/survol et le point animé reprennent la couleur dominante de l'événement plutôt que le bleu de marque, quand elle est définie (repli sur ce même bleu sinon — voir --event-accent). */ .nav__link--event-accent:hover, .nav__item.is-active > .nav__link--event-accent { color: var(--event-accent, var(--sky-700)); } .nav__link--event-accent:hover { background: color-mix(in srgb, var(--event-accent, var(--sky-500)) 8%, transparent); } .nav__link--event-accent::after { background: var(--event-accent, var(--grad-sky)); } .nav__flag--event-accent { background: var(--event-accent, var(--sky-500)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--event-accent, var(--sky-500)) 18%, transparent); } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(33, 167, 224, .18); } 50% { box-shadow: 0 0 0 8px rgba(33, 167, 224, 0); } } /* Sous-menu */ .nav__submenu { position: absolute; top: calc(100% + 12px); left: 0; min-width: 246px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-lg); list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .28s var(--ease); } .nav__item:hover > .nav__submenu, .nav__item:focus-within > .nav__submenu { opacity: 1; visibility: visible; transform: translateY(0); } .nav__submenu li { margin: 0; } .nav__submenu a { display: block; padding: 10px 14px; border-radius: var(--r-sm); font-size: .9rem; font-weight: 600; color: var(--navy-800); } .nav__submenu a:hover { background: var(--sky-050); color: var(--sky-700); } .nav__caret { width: 13px; height: 13px; opacity: .5; } /* Regroupe la navigation et le CTA "Nous contacter" à côté du logo : les deux ensemble forment le bloc centré par .site-header__inner (voir ci-dessus). Pas de "flex:1"/"min-width:0" ici en desktop : ce bloc garde sa taille naturelle pour que le centrage porte sur logo+menu ensemble, pas sur le menu seul étiré dans tout l'espace restant. Redevient extensible (aligné à droite, à côté du burger) une fois la nav masquée, voir le breakpoint 1340px plus bas. */ .site-header__menu { display: flex; align-items: center; justify-content: center; gap: 24px; flex: none; } /* CTA "Nous contacter" mis en avant dans le header, distinct des liens de navigation classiques : c'est l'action qu'on veut le plus inciter. */ .nav__contact-cta { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: .87rem; color: #fff; background: var(--grad-brand); padding: 11px 20px; border-radius: var(--r-pill); box-shadow: 0 10px 24px rgba(33, 167, 224, .28); transition: transform .28s var(--ease), box-shadow .28s var(--ease); white-space: nowrap; } .nav__contact-cta svg { width: 16px; height: 16px; flex: none; } .nav__contact-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(33, 167, 224, .36); } .nav__contact-cta.is-active { background: var(--navy-800); } .social-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--sky-500); color: #fff; transition: transform .28s var(--ease), background-color .28s var(--ease); } .social-btn svg { width: 17px; height: 17px; } .social-btn:hover { background: var(--navy-800); color: #fff; transform: translateY(-3px); } .social-btn--outline { background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .2); } .social-btn--outline:hover { background: var(--sky-500); border-color: var(--sky-500); } /* Couleurs de marque : identifie Facebook/LinkedIn au premier coup d'œil plutôt qu'une même pastille bleu ciel générique pour les deux réseaux. */ .social-btn--facebook { background: #1877f2; } .social-btn--facebook:hover { background: #0d5dc7; } .social-btn--linkedin { background: #0a66c2; } .social-btn--linkedin:hover { background: #084e94; } .social-btn--outline.social-btn--facebook { background: rgba(24, 119, 242, .16); border-color: rgba(24, 119, 242, .4); } .social-btn--outline.social-btn--facebook:hover { background: #1877f2; border-color: #1877f2; } .social-btn--outline.social-btn--linkedin { background: rgba(10, 102, 194, .16); border-color: rgba(10, 102, 194, .4); } .social-btn--outline.social-btn--linkedin:hover { background: #0a66c2; border-color: #0a66c2; } .topbar .social-btn--facebook { background: rgba(24, 119, 242, .28); } .topbar .social-btn--facebook:hover { background: #1877f2; } .topbar .social-btn--linkedin { background: rgba(10, 102, 194, .28); } .topbar .social-btn--linkedin:hover { background: #0a66c2; } /* Burger */ .burger { display: none; width: 46px; height: 46px; border: 1px solid var(--line); background: #fff; border-radius: var(--r-sm); cursor: pointer; position: relative; flex: none; } .burger span { position: absolute; left: 13px; width: 20px; height: 2px; border-radius: 2px; background: var(--navy-800); transition: all .3s var(--ease); } .burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 22px; } .burger span:nth-child(3) { top: 28px; } .burger.is-open span:nth-child(1) { top: 22px; transform: rotate(45deg); } .burger.is-open span:nth-child(2) { opacity: 0; } .burger.is-open span:nth-child(3) { top: 22px; transform: rotate(-45deg); } /* Drawer mobile */ .drawer { position: fixed; inset: 0 0 0 auto; width: min(400px, 88vw); background: #fff; z-index: 200; padding: 26px 24px 40px; transform: translateX(100%); transition: transform .42s var(--ease); overflow-y: auto; box-shadow: -20px 0 60px rgba(11, 43, 71, .18); } .drawer.is-open { transform: translateX(0); } .drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 26px; } .drawer__close { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--navy-800); } .drawer__close svg { width: 18px; height: 18px; } .drawer__list { list-style: none; margin: 0 0 28px; padding: 0; } .drawer__list li { margin: 0; border-bottom: 1px solid var(--line-2); } .drawer__list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 4px; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--navy-900); } .drawer__list a:hover, .drawer__list li.is-active a { color: var(--sky-600); } .overlay { position: fixed; inset: 0; background: rgba(4, 18, 32, .48); backdrop-filter: blur(3px); z-index: 150; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s var(--ease); } .overlay.is-open { opacity: 1; visibility: visible; } /* ==== 06. HERO & BANDEAUX ========================================== */ .hero { position: relative; overflow: hidden; background: var(--grad-deep); color: rgba(255, 255, 255, .84); padding: clamp(40px, 5vw, 68px) 0 clamp(56px, 7vw, 92px); } .hero h1, .hero h2, .hero h3 { color: #fff; } .hero__inner { position: relative; z-index: 2; } .hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 60px; align-items: center; } .hero__title { margin-bottom: 22px; } .hero__title .gradient-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; } .hero__text { font-size: 1.16rem; max-width: 34em; color: rgba(255, 255, 255, .78); } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } /* décor : halos + particules */ .hero__glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; } .hero__glow--1 { width: 560px; height: 560px; background: rgba(33, 167, 224, .34); top: -180px; right: -120px; animation: drift-1 16s ease-in-out infinite; } .hero__glow--2 { width: 420px; height: 420px; background: rgba(70, 188, 237, .18); bottom: -200px; left: -140px; animation: drift-2 20s ease-in-out infinite; } @keyframes drift-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-30px, 26px) scale(1.08); } } @keyframes drift-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(26px, -22px) scale(1.06); } } .hero__dots { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 72%); } /* Remplace .hero__dots (repli statique, laissé dans le HTML pour le cas où JS est désactivé/désactive l'effet — voir app.js:heroParticles) par un champ de particules animées en canvas, qui réagissent au passage de la souris. */ /* Fondu centré neutre : sert aussi bien la bannière large à deux colonnes de l'accueil (.hero) que celles, plus courtes et à une seule colonne, de toutes les autres pages (.pagehead). */ .hero__particles { position: absolute; inset: 0; pointer-events: none; mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, #000 60%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, #000 60%, transparent 100%); } .hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; line-height: 0; } .hero__wave svg { width: 100%; height: 70px; } /* Recherche d'offres dans le hero */ .searchbar { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 10px; background: rgba(255, 255, 255, .97); padding: 12px; border-radius: var(--r-lg); box-shadow: var(--sh-lg); margin-top: 38px; } .searchbar__field { position: relative; display: flex; align-items: center; } .searchbar__field svg { position: absolute; left: 15px; width: 18px; height: 18px; color: var(--sky-600); pointer-events: none; } .searchbar input, .searchbar select { width: 100%; border: 0; background: transparent; padding: 14px 14px 14px 44px; font: inherit; font-size: .95rem; color: var(--ink); border-radius: var(--r-sm); appearance: none; } .searchbar input:focus, .searchbar select:focus { outline: none; background: var(--sky-050); } .searchbar input::placeholder { color: var(--ink-3); } /* Carte flottante hero */ .hero__card { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(16px); border-radius: var(--r-xl); padding: 30px; box-shadow: 0 30px 80px rgba(4, 18, 32, .38); } .hero__card h3 { font-size: 1.1rem; margin-bottom: 20px; } .mini-job { display: flex; gap: 14px; align-items: flex-start; padding: 15px; border-radius: var(--r-md); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .09); transition: transform .3s var(--ease), background-color .3s var(--ease); margin-bottom: 12px; } .mini-job:hover { transform: translateX(6px); background: rgba(255, 255, 255, .12); } .mini-job__logo { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--grad-sky); font-family: var(--font-display); font-weight: 800; color: var(--navy-900); font-size: .95rem; } .mini-job__logo svg { width: 20px; height: 20px; } .mini-job__body { flex: 1; min-width: 0; } .mini-job__title { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: .97rem; } .mini-job__meta { font-size: .82rem; color: rgba(255, 255, 255, .62); } /* Ni localisation réelle, ni contrat, ni mode de travail (offres importées sans ces informations, voir templates/home/index.html.twig) : la ligne meta est masquée, le titre seul se recentre verticalement à la place. */ .mini-job--title-only { align-items: center; } .mini-job--title-only .mini-job__title { font-size: 1.05rem; } /* Flèche "voir l'offre" : même icône que les boutons "Voir l'offre" des cartes (voir _job_card.html.twig), en repli sur cette carte flottante où toute la ligne est déjà cliquable. */ .mini-job__view { flex: none; align-self: center; margin-left: auto; padding-left: 6px; color: rgba(255, 255, 255, .45); transition: color .3s var(--ease), transform .3s var(--ease); } .mini-job__view svg { width: 16px; height: 16px; display: block; } .mini-job:hover .mini-job__view { color: #fff; transform: translateX(3px); } /* Bandeau de page interne */ .pagehead { position: relative; overflow: hidden; background: var(--grad-deep); color: rgba(255, 255, 255, .8); padding: clamp(30px, 3.6vw, 48px) 0 clamp(26px, 3vw, 40px); } .pagehead h1 { color: #fff; margin-bottom: 16px; } .pagehead__inner { position: relative; z-index: 2; max-width: 780px; } .pagehead__text { font-size: 1.08rem; color: rgba(255, 255, 255, .76); } .pagehead__text strong { color: #fff; } /* Bannière événement, systématiquement affichée à la largeur du conteneur et jamais recadrée (l'image garde son ratio d'origine, voir .event-banner img ci-dessous) — sur la page événement elle-même (event/show.html.twig) comme sur la fiche d'une offre événement, son formulaire de candidature ou le bloc événement de l'accueil (job_offer/show.html.twig, job_application/new.html.twig, home/index.html.twig). Ces trois derniers ont besoin d'afficher du texte (titre, badges...) : plutôt que de le superposer sur l'image (ce qui forcerait à la recadrer pour garantir un fond assez haut), il prend place dans un grand bandeau plein-couleur sous l'image (.event-banner__footer), à la couleur dominante de l'événement. */ .event-banner__footer { position: relative; z-index: 1; background: var(--event-accent, var(--navy-800)); color: rgba(255, 255, 255, .88); padding: clamp(22px, 3.4vw, 36px) clamp(22px, 4vw, 44px); } .event-banner__footer h1, .event-banner__footer h2 { color: #fff; margin-bottom: 8px; } /* L'espace restant à gauche/droite du conteneur reçoit un dégradé animé à la couleur dominante de l'événement plutôt qu'une bande vide, pour un effet plus soigné. */ .event-banner-wrap { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--navy-950), var(--event-accent, var(--sky-700)) 160%); padding: clamp(28px, 4vw, 48px) 0; } .event-banner-wrap__glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; background: var(--event-accent, var(--sky-400)); animation: event-glow-float 9s ease-in-out infinite; pointer-events: none; } .event-banner-wrap__glow--1 { width: 380px; height: 380px; top: -160px; left: -120px; } .event-banner-wrap__glow--2 { width: 300px; height: 300px; bottom: -140px; right: -80px; animation-delay: -4.5s; } @keyframes event-glow-float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(36px, -24px) scale(1.18); } } .event-banner { position: relative; z-index: 1; overflow: hidden; border-radius: var(--r-lg); box-shadow: 0 30px 70px -24px rgba(4, 18, 32, .5); border-bottom: 5px solid var(--event-accent, var(--sky-500)); } .event-banner img { display: block; width: 100%; height: auto; animation: event-banner-in 1.1s var(--ease) both; } @keyframes event-banner-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } } /* Thème événement (voir .event-themed, posé sur un conteneur avec --event-accent défini en style inline à partir de la couleur dominante de l'événement) : les étapes de candidature et les blocs reprennent cette couleur plutôt que le bleu de marque par défaut. */ .event-themed .stepper__item.is-done .stepper__dot { background: var(--event-accent); border-color: var(--event-accent); } .event-themed .stepper__item.is-current .stepper__dot { border-color: var(--event-accent); color: var(--event-accent); box-shadow: none; } .event-themed .stepper__bar::after { background: var(--event-accent); } .event-themed .form-card, .event-themed .aside-card { border-top: 4px solid var(--event-accent); background: linear-gradient(180deg, color-mix(in srgb, var(--event-accent) 7%, #fff), #fff); } /* "Offre événement", "L'essentiel" et "Comment ça marche" sont tous des .aside-card (voir job_offer/show.html.twig et job_application/new.html.twig) : leurs icônes reprennent aussi la couleur dominante plutôt que le bleu de marque par défaut. */ .event-themed .spec-list svg, .event-themed .check-list svg { color: var(--event-accent); } /* .btn--primary est transparent ("background: none") : son remplissage visible est peint par le calque ::before (voir section 04), pas par sa propre couleur de fond — c'est donc ::before qu'il faut teinter ici. */ .event-themed .btn--primary::before { background: var(--event-accent); } .event-themed .eyebrow::before { background: var(--event-accent); } /* Offre événement mise en évidence (voir partials/_job_card.html.twig) : le bleu par défaut de .job-card--featured est remplacé par la couleur dominante de l'événement, sans dépendre d'un wrapper .event-themed — utile dans les grilles où toutes les cartes ne sont pas des offres événement (accueil, offres similaires...). Repli sur le même bleu que les autres offres mises en évidence quand aucune couleur n'est définie. */ .job-card--featured.job-card--event { border-color: var(--event-accent, var(--sky-300)); background: linear-gradient(180deg, color-mix(in srgb, var(--event-accent, var(--sky-400)) 12%, #fff), #fff); } .job-card--event .btn--primary::before { background: var(--event-accent, var(--sky-500)); } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; list-style: none; padding: 0; margin: 0 0 20px; font-size: .86rem; } .breadcrumb li { margin: 0; display: flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, .6); } .breadcrumb a { color: rgba(255, 255, 255, .78); } .breadcrumb a:hover { color: #fff; } .breadcrumb li + li::before { content: "/"; opacity: .45; } /* ==== 07. SECTIONS ================================================= */ .section { padding: clamp(46px, 6vw, 80px) 0; } .section--sm { padding: clamp(34px, 4vw, 54px) 0; } .section--tint { background: var(--paper-2); } .section--sky { background: linear-gradient(180deg, var(--sky-050), #fff); } .section--dark { background: var(--grad-deep); color: rgba(255, 255, 255, .8); position: relative; overflow: hidden; } .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; } .section--dark .lead { color: rgba(255, 255, 255, .74); } .section-head { max-width: 720px; margin-bottom: 38px; } .section-head--center { margin-inline: auto; text-align: center; } .section-head h2 { margin-bottom: 16px; } .section-head p { margin-bottom: 0; } /* Page "Découvrez-nous" (nos expertises) : sections plus resserrées que le rythme vertical par défaut du site, propre à cette page uniquement. */ .page-expertises .section { padding: clamp(28px, 3.4vw, 46px) 0; } .page-expertises .section--sm { padding: clamp(20px, 2.6vw, 32px) 0; } /* Page d'accueil : elle empile déjà beaucoup de sections (offres, cabinet, expertises, chiffres, méthode...), donc un rythme vertical resserré évite l'impression de défilement sans fin. */ .page-home .section { padding: clamp(30px, 3.6vw, 50px) 0; } .page-home .section--sm { padding: clamp(22px, 2.8vw, 34px) 0; } .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: center; } .split--media-first > .split__media { order: -1; } .media-frame { position: relative; } .media-frame__img { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); aspect-ratio: 4 / 3; background: var(--grad-brand); display: grid; place-items: center; color: rgba(255,255,255,.55); font-family: var(--font-display); font-weight: 700; letter-spacing: .1em; font-size: .8rem; text-transform: uppercase; text-align: center; padding: 20px; } .media-frame__badge { position: absolute; bottom: -26px; left: -26px; background: #fff; border-radius: var(--r-lg); padding: 20px 24px; box-shadow: var(--sh-lg); display: flex; align-items: center; gap: 14px; max-width: 260px; } .media-frame__badge strong { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--navy-900); line-height: 1; } .media-frame__badge span { font-size: .82rem; color: var(--ink-3); } /* Vidéo YouTube "lite" : miniature + bouton play, l'iframe (et son tracking) n'est chargée qu'au clic. Voir App\Service\SiteSettings et le filtre Twig youtube_id. */ .video-embed { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); cursor: pointer; background: var(--grad-brand); } .video-embed img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .3s var(--ease); } .video-embed:hover img, .video-embed:focus-visible img { opacity: 1; } .video-embed__play { position: absolute; inset: 0; display: grid; place-items: center; } .video-embed__play-circle { width: 78px; height: 78px; flex: none; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(4, 18, 32, .35); transition: transform .3s var(--ease); } .video-embed__play-circle svg { width: 34px; height: 34px; color: var(--navy-900); } .video-embed:hover .video-embed__play-circle, .video-embed:focus-visible .video-embed__play-circle { transform: scale(1.1); } /* Recouvrement plein écran de chargement (voir app.js:showBrandLoadingOverlay et admin.js:loadingOverlay) : bloque les clics et affiche le logo animé jusqu'à ce que la nouvelle page remplace celle-ci — un seul et même recouvrement pour toute navigation qui recharge la page (menus principaux, filtres/tri/recherche des offres, pagination). */ .page-loading-overlay { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(255, 255, 255, .6); backdrop-filter: blur(1px); opacity: 0; transition: opacity .2s var(--ease); } .page-loading-overlay.is-visible { opacity: 1; } .page-loading-overlay--brand { /* Fond clair (et non le dégradé marine de la marque) : le logo garde ses couleurs fixes (bleu ciel + marine, voir _logo.html.twig) — le texte "CONSULTING" en marine serait quasi invisible sur un fond marine foncé. */ background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); } /* La marque (place-items: center du parent) est déjà centrée à la lettre près sur toute la hauteur de l'écran — vérifié en mesurant sa position réelle. Le pictogramme (plus "lourd" visuellement, en haut) et le texte sur deux lignes (en bas) donnent malgré tout une impression de logo posé trop haut : léger décalage optique vers le bas pour compenser. */ .page-loading-overlay__brand { display: grid; place-items: center; transform: translateY(8px); } .page-loading-overlay__mark { height: 88px; width: auto; animation: page-loading-mark-pulse 1.1s ease-in-out infinite; } @keyframes page-loading-mark-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.86); opacity: .75; } } /* Popup de lecture : injecté en JS (voir app.js:videoEmbed) au clic sur la miniature, plutôt que de remplacer la miniature en place. */ .video-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; } .video-modal__backdrop { position: absolute; inset: 0; background: rgba(4, 18, 32, .84); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s var(--ease); } .video-modal__box { position: relative; width: min(920px, 100%); aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); transform: scale(.94); opacity: 0; transition: transform .32s var(--ease), opacity .32s var(--ease); } .video-modal.is-open .video-modal__backdrop { opacity: 1; } .video-modal.is-open .video-modal__box { transform: scale(1); opacity: 1; } .video-modal__box iframe { width: 100%; height: 100%; border: 0; display: block; } .video-modal__close { position: absolute; top: -48px; right: 0; z-index: 1; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; transition: background-color .25s var(--ease); } .video-modal__close:hover { background: rgba(255, 255, 255, .26); } .video-modal__close svg { width: 18px; height: 18px; } @media (max-width: 640px) { .video-modal__close { top: -44px; } } .media-frame::after { content: ""; position: absolute; inset: 22px -22px -22px 22px; z-index: -1; border-radius: var(--r-xl); border: 2px dashed var(--sky-200); } .check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .check-list li { display: flex; gap: 13px; align-items: flex-start; margin: 0; } .check-list svg { width: 22px; height: 22px; flex: none; color: var(--sky-500); margin-top: 3px; } .on-dark .check-list svg, .section--dark .check-list svg { color: var(--sky-300); } /* ==== 08. CARTES =================================================== */ .card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; transition: transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s var(--ease); position: relative; overflow: hidden; } .card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--grad-sky); transform: scaleX(0); transform-origin: left; transition: transform .42s var(--ease); } .card:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); border-color: var(--sky-200); } .card:hover::before { transform: scaleX(1); } .card h3 { margin-bottom: 12px; } .card p:last-child { margin-bottom: 0; } /* Dans une grille (ex. "Six façons de vous accompagner"), chaque carte s'étire pour matcher la hauteur de la ligne (grid), et le lien "En savoir plus" reste collé en bas quelle que soit la longueur du texte au-dessus — sinon les liens se retrouvent à des hauteurs différentes d'une carte à l'autre. Restreint à .grid .card (et non .card seul) : une carte isolée hors grille (ex. "Bienvenue" du tableau de bord BO) n'a pas de ligne à matcher — hériter height:100% l'étirait alors sur toute la hauteur disponible de son conteneur (jusqu'à faire déborder la page). */ .grid .card { display: flex; flex-direction: column; height: 100%; } .grid .card .btn-link { margin-top: auto; padding-top: 18px; } .card__icon { width: 58px; height: 58px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: 22px; background: var(--sky-100); color: var(--sky-700); transition: background .38s var(--ease), color .38s var(--ease), transform .38s var(--ease); } .card__icon svg { width: 27px; height: 27px; } .card:hover .card__icon { background: var(--grad-brand); color: #fff; transform: rotate(-6deg) scale(1.06); } .card--glass { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); backdrop-filter: blur(14px); color: rgba(255, 255, 255, .78); } .card--glass:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .26); } .card--glass .card__icon { background: rgba(255, 255, 255, .12); color: var(--sky-300); } .card--flat { border: 0; box-shadow: var(--sh-sm); } .card--pad-sm { padding: 24px; } .card__num { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--sky-200); margin-bottom: 14px; } /* Article / actualité */ .post { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform .38s var(--ease), box-shadow .38s var(--ease); } .post:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); } .post__media { aspect-ratio: 16 / 10; position: relative; overflow: hidden; background: var(--grad-brand); display: grid; place-items: center; } .post__media span { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; color: rgba(255, 255, 255, .32); letter-spacing: -.03em; } .post__media .badge { position: absolute; top: 16px; left: 16px; background: rgba(255,255,255,.92); color: var(--navy-800); } .post__body { padding: 26px; display: flex; flex-direction: column; flex: 1; } .post__meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: .82rem; color: var(--ink-3); margin-bottom: 12px; } .post__meta span { display: flex; align-items: center; gap: 6px; } .post__meta svg { width: 15px; height: 15px; opacity: .7; } .post__title { font-size: 1.14rem; margin-bottom: 12px; } .post__title a { color: var(--navy-900); } .post__title a:hover { color: var(--sky-600); } .post__body .btn-link { margin-top: auto; padding-top: 16px; } .post--h { flex-direction: row; } .post--h .post__media { aspect-ratio: auto; flex: 0 0 46%; } .post--h .post__body { padding: 34px; } /* Publication / ressource */ .resource { display: flex; gap: 22px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); height: 100%; } .resource:hover { transform: translateY(-6px); box-shadow: var(--sh-md); } .resource__doc { width: 76px; height: 96px; flex: none; border-radius: 8px; background: var(--grad-deep); position: relative; overflow: hidden; display: grid; place-items: end center; padding-bottom: 12px; box-shadow: var(--sh-sm); } .resource__doc span { font-family: var(--font-display); font-size: .68rem; font-weight: 800; letter-spacing: .1em; color: var(--sky-300); } .resource__doc::before { content: ""; position: absolute; top: 12px; left: 12px; right: 12px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); box-shadow: 0 9px 0 rgba(255, 255, 255, .22), 0 18px 0 rgba(255, 255, 255, .14); } .resource h3 { font-size: 1.05rem; margin-bottom: 8px; } /* Partenaire */ .partner-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; height: 100%; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .partner-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: var(--sky-200); } .partner-card__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; } .partner-logo { width: 56px; height: 56px; flex: none; border-radius: var(--r-md); display: grid; place-items: center; background: var(--sky-050); border: 1px solid var(--line); font-family: var(--font-display); font-weight: 800; color: var(--navy-700); font-size: 1.05rem; } .partner-card__name { font-family: var(--font-display); font-weight: 750; color: var(--navy-900); } .partner-card__sector { font-size: .84rem; color: var(--ink-3); } /* ==== 09. CHIFFRES, PROCESS, TÉMOIGNAGES, LOGOS ==================== */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--line); border-radius: var(--r-lg); overflow: hidden; } .stat { background: #fff; padding: 34px 26px; text-align: center; } .stat__value { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1; color: var(--navy-900); letter-spacing: -.04em; } .stat__value .unit { color: var(--sky-500); } .stat__label { font-size: .9rem; color: var(--ink-3); margin-top: 10px; } .stats--dark { background: rgba(255, 255, 255, .13); } .stats--dark .stat { background: transparent; } .stats--dark .stat__value { color: #fff; } .stats--dark .stat__label { color: rgba(255, 255, 255, .66); } .stats--bare { background: none; gap: 28px; } .stats--bare .stat { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-xs); } .stats--5 { grid-template-columns: repeat(5, 1fr); } .stats--5 .stat__label { font-size: .84rem; } @media (max-width: 1200px) { .stats--5 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .stats--5 { grid-template-columns: repeat(2, 1fr); } } /* Carte de présence internationale (page "Nos expertises") : un défilement horizontal propre en dessous de sa largeur de conception plutôt que de réduire le texte du SVG jusqu'à le rendre illisible sur mobile. */ .world-map { overflow-x: auto; border-radius: var(--r-lg); box-shadow: var(--sh-xs); } .world-map svg { display: block; width: 100%; min-width: 720px; height: auto; } /* Process / étapes */ .steps { display: grid; gap: 28px; grid-template-columns: repeat(4, 1fr); position: relative; } .steps::before { content: ""; position: absolute; top: 30px; left: 8%; right: 8%; height: 2px; background: repeating-linear-gradient(90deg, var(--sky-200) 0 8px, transparent 8px 16px); z-index: 0; } .step { position: relative; z-index: 1; text-align: center; } .step__num { width: 60px; height: 60px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 2px var(--sky-200); color: var(--sky-700); font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; transition: background-color .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); } .step:hover .step__num { background: var(--grad-brand); box-shadow: var(--sh-md); color: #fff; transform: scale(1.08); } .step h3 { font-size: 1.06rem; margin-bottom: 10px; } .step p { font-size: .95rem; margin: 0; } /* Timeline verticale (programme, parcours) */ .timeline { list-style: none; margin: 0; padding: 0 0 0 34px; position: relative; } .timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--sky-300), var(--sky-100)); } .timeline > li { position: relative; margin: 0 0 30px; } .timeline > li::before { content: ""; position: absolute; left: -34px; top: 7px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--sky-500); } .timeline__time { font-family: var(--font-display); font-weight: 800; color: var(--sky-600); font-size: .9rem; letter-spacing: .04em; } .timeline h3 { font-size: 1.05rem; margin: 4px 0 8px; } .timeline p { margin: 0; font-size: .95rem; } /* Témoignages : défilement horizontal automatique en boucle, même principe que "Nos opportunités du moment" (voir .jobs-scroll) plutôt qu'un slider à flèches. */ .testimonials { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); } .testi-track { display: flex; gap: 28px; width: max-content; padding: 6px 4px 22px; animation: jobs-scroll-horizontal 140s linear infinite; } .testimonials:hover .testi-track { animation-play-state: paused; } .testi { flex: none; width: min(430px, 84vw); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px; position: relative; } .testi__quote { font-family: var(--font-display); font-size: 3.4rem; line-height: .8; color: var(--sky-200); margin-bottom: 8px; } .testi p { font-size: 1.02rem; color: var(--ink-2); } .testi__author { display: flex; align-items: center; gap: 14px; margin-top: 24px; } .testi__avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; background: var(--grad-brand); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: .95rem; } .testi__name { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); line-height: 1.3; } .testi__role { font-size: .84rem; color: var(--ink-3); } .testi__stars { color: var(--warning); letter-spacing: 2px; font-size: .95rem; margin-bottom: 14px; } /* Bandeau logos clients (liste statique, ex. exposants d'un salon) */ .logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; } .logo-chip { padding: 14px 26px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); font-family: var(--font-display); font-weight: 750; color: var(--ink-3); letter-spacing: -.01em; font-size: 1.02rem; transition: all .3s var(--ease); } .logo-chip:hover { color: var(--navy-800); border-color: var(--sky-200); transform: translateY(-4px); box-shadow: var(--sh-sm); } .logos--dark .logo-chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .72); } /* Marquee générique (une seule ligne) */ .marquee { overflow: hidden; position: relative; padding: 8px 0; } .marquee__track { display: flex; gap: 18px; width: max-content; animation: slide 34s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes slide { to { transform: translateX(-50%); } } /* ------------------------------------------------------------------ Mur de logos clients — plusieurs lignes qui défilent en continu, pensé pour accueillir un grand nombre de clients sans s'écrouler. Chaque .logo-card affiche uniquement l'image du logo, en grand : le nom du client n'apparaît qu'en attribut alt (accessibilité/SEO), pas visuellement. .logo-card__mark est le repli tant qu'aucune image n'a été téléversée en back-office (voir ClientLogo::displayInitials). ------------------------------------------------------------------ */ .logo-wall { display: grid; gap: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } /* Peu de clients cités (≤ 6, voir HomeController::buildLogoWall) : un défilement en boucle sur si peu d'éléments a l'air cassé (piste plus étroite que le conteneur, alignée à gauche). On affiche à la place une seule ligne statique et centrée, sans fondu sur les bords. */ .logo-wall--static { -webkit-mask-image: none; mask-image: none; } .logo-wall--static .logo-row { overflow: visible; } .logo-wall--static .logo-row__track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; } .logo-row { overflow: hidden; position: relative; } .logo-row__track { display: flex; gap: 16px; width: max-content; animation: logo-scroll var(--logo-speed, 48s) linear infinite; } .logo-row--reverse .logo-row__track { animation-direction: reverse; } .logo-row:hover .logo-row__track { animation-play-state: paused; } @keyframes logo-scroll { to { transform: translateX(-50%); } } .logo-card { display: flex; align-items: center; justify-content: center; flex: none; min-width: 190px; height: 108px; padding: 16px 28px; transition: transform .3s var(--ease); } .logo-card:hover { transform: translateY(-3px); } .logo-card img { max-height: 64px; max-width: 100%; width: auto; } .logo-card__mark { width: 64px; height: 64px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--sky-050); color: var(--sky-700); font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; } .logo-wall--dark .logo-card__mark { background: rgba(255, 255, 255, .1); color: var(--sky-300); } @media (max-width: 640px) { .logo-card { min-width: 148px; height: 84px; padding: 10px 18px; } .logo-card img { max-height: 48px; } .logo-card__mark { width: 48px; height: 48px; font-size: .95rem; } .logo-row:nth-child(3) { display: none; } /* 2 lignes suffisent sur petit écran */ } /* Bandeau CTA */ .cta-band { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--grad-deep); color: rgba(255, 255, 255, .82); padding: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: 1.4fr auto; gap: 40px; align-items: center; } .cta-band h2 { color: #fff; margin-bottom: 12px; } .cta-band p { margin: 0; color: rgba(255, 255, 255, .76); } .cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; } .cta-band::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(33, 167, 224, .38), transparent 68%); right: -120px; top: -160px; pointer-events: none; z-index: 0; } /* Deux espaces (candidat / entreprise) */ .duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; } .duo__panel { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 44px; min-height: 340px; display: flex; flex-direction: column; color: #fff; transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .duo__panel:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); } .duo__panel--candidat { background: var(--grad-deep); } .duo__panel--entreprise { background: linear-gradient(150deg, var(--sky-600), var(--sky-700) 55%, var(--navy-700)); } .duo__panel h3 { color: #fff; font-size: 1.6rem; } .duo__panel p { color: rgba(255, 255, 255, .82); max-width: 34ch; } .duo__panel .badge { align-self: flex-start; margin-bottom: 22px; } /* Le titre démarre toujours au même point (juste après le badge, à hauteur fixe) dans les deux panneaux, quelle que soit la longueur du texte ; le CTA, lui, reste ancré en bas grâce à ce conteneur étiré. */ .duo__panel-content { flex: 1; display: flex; flex-direction: column; } .duo__panel-content .btn--light { color: var(--navy-900); margin-top: auto; align-self: flex-start; } .duo__panel:hover .btn--light { transform: translateX(4px); } .duo__panel::after { content: ""; position: absolute; inset: auto -60px -80px auto; width: 260px; height: 260px; border-radius: 50%; border: 30px solid rgba(255, 255, 255, .07); } /* ==== 10. OFFRES D'EMPLOI ========================================== */ .jobs-layout { display: grid; grid-template-columns: 306px 1fr; gap: 36px; align-items: start; } /* Variante « contenu + colonne latérale » (dépôt de CV, pages internes) */ .layout-aside { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: start; } .split--60-40 { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } /* BO : formulaire + panneau d'éléments associés (candidatures, offres liées). Card de formulaire volontairement plus étroite que .split--60-40 (inversé, gap resserré) pour laisser assez de place au panneau de droite et y tenir 2 blocs par ligne (voir .grid-2 dans _associated_applications.html.twig). */ .split--form-panel { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; } .filters { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; position: sticky; top: calc(var(--header-h) + var(--topbar-h) + 24px); box-shadow: var(--sh-xs); } .filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .filters__head h2 { font-size: 1.1rem; margin: 0; } .filter-group { border-top: 1px solid var(--line-2); padding: 18px 0 4px; } .filter-group:first-of-type { border-top: 0; padding-top: 0; } .filter-group__title { font-family: var(--font-display); font-weight: 750; font-size: .84rem; letter-spacing: .09em; text-transform: uppercase; color: var(--navy-800); margin-bottom: 14px; } .check { display: flex; align-items: center; gap: 11px; cursor: pointer; font-size: .92rem; margin-bottom: 11px; color: var(--ink-2); user-select: none; } .check input { position: absolute; opacity: 0; width: 0; height: 0; } .check__box { width: 20px; height: 20px; border-radius: 6px; flex: none; border: 1.6px solid var(--line); background: #fff; display: grid; place-items: center; transition: all .25s var(--ease); } .check__box svg { width: 13px; height: 13px; color: #fff; opacity: 0; transform: scale(.6); transition: all .25s var(--ease); } .check input:checked + .check__box { background: var(--sky-500); border-color: var(--sky-500); } .check input:checked + .check__box svg { opacity: 1; transform: scale(1); } .check input:focus-visible + .check__box { outline: 3px solid var(--sky-300); outline-offset: 2px; } .check:hover .check__box { border-color: var(--sky-400); } .check__count { margin-left: auto; font-size: .8rem; color: var(--ink-3); } .jobs-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .jobs-toolbar__count { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); } .select-inline { border: 1px solid var(--line); border-radius: var(--r-pill); padding: 10px 18px; font: inherit; font-size: .9rem; background: #fff; color: var(--ink-2); cursor: pointer; } .chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 20px; } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--r-pill); background: var(--sky-100); color: var(--sky-700); font-size: .84rem; font-weight: 650; border: 0; cursor: pointer; font-family: var(--font-body); } .chip svg { width: 13px; height: 13px; } .chip:hover { background: var(--sky-200); } .job-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px; margin-bottom: 18px; position: relative; transition: transform .34s var(--ease), box-shadow .34s var(--ease), border-color .34s var(--ease); } .job-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--sky-200); } .job-card__top { display: flex; gap: 18px; align-items: flex-start; } .job-card__logo { width: 56px; height: 56px; flex: none; border-radius: var(--r-md); display: grid; place-items: center; background: var(--sky-050); border: 1px solid var(--line); font-family: var(--font-display); font-weight: 800; color: var(--navy-700); } .job-card__logo svg { width: 26px; height: 26px; } .job-card__title { font-size: 1.16rem; margin: 0 0 6px; } .job-card__title a { color: var(--navy-900); } .job-card__title a:hover { color: var(--sky-600); } .job-card__company { font-size: .96rem; font-weight: 700; color: var(--navy-700); margin: 0; } .job-card__excerpt { margin-bottom: 0; } .job-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; } .job-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line-2); } /* Offre interne mise "à la une" : carte un peu plus voyante que ses voisines, pour que le regard s'y arrête d'abord dans une liste/grille. Le ruban est collé au coin haut-droit du bloc (hors de la zone de texte) plutôt qu'à côté du titre, pour ne jamais chevaucher le contenu. */ .job-card--featured { border-color: var(--sky-300); background: linear-gradient(180deg, var(--sky-050), #fff); box-shadow: var(--sh-sm); } .job-card--featured:hover { box-shadow: var(--sh-md); } .job-card__featured-badge { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 4px; background: var(--navy-800); color: #fff; font-family: var(--font-display); font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 6px 12px; border-radius: 0 var(--r-lg) 0 var(--r-md); } /* Dans une grille (accueil, offres similaires, offres partenaires), les cartes doivent toutes avoir la même hauteur, quelle que soit la longueur de l'extrait : c'est l'extrait qui absorbe l'espace disponible (flex:1), pour que les pastilles restent toujours juste au-dessus du séparateur. En liste simple (page de recherche), la carte garde sa hauteur naturelle. */ .grid .job-card { height: 100%; display: flex; flex-direction: column; margin-bottom: 0; } .grid .job-card__excerpt { flex: 1; } /* Les cartes de candidature du back-office n'ont pas de .job-card__excerpt pour absorber la hauteur restante (les cartes d'offre, elles, en ont bien un depuis peu — voir admin/job_offer/_offer_card.html.twig) : le pied (boutons, date) doit donc être collé en bas par lui-même, pour que toutes les cartes d'une même grille restent alignées quelle que soit la hauteur du contenu au-dessus. Sans cette marge minimale, la carte la plus haute de la grille (celle qui ne laisse aucun espace disponible pour le margin-top:auto) se retrouvait avec les pastilles collées au séparateur du pied. */ .grid .job-card__meta { margin-bottom: 16px; } .grid .job-card__foot { margin-top: auto; } .job-card__date { font-size: .84rem; color: var(--ink-3); } .job-card__fav { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--ink-3); transition: all .28s var(--ease); flex: none; } .job-card__fav svg { width: 18px; height: 18px; } .job-card__fav:hover, .job-card__fav.is-on { color: var(--sky-600); border-color: var(--sky-300); background: var(--sky-050); } .empty-state { text-align: center; padding: 64px 24px; border: 2px dashed var(--line); border-radius: var(--r-lg); color: var(--ink-3); } /* "Nos opportunités du moment" : 10 offres au lieu de 3, dans un bandeau qui défile horizontalement en boucle plutôt que d'allonger la page (même principe que le mur de logos clients). */ .jobs-scroll { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); } .jobs-scroll__track { display: flex; gap: 24px; width: max-content; animation: jobs-scroll-horizontal 120s linear infinite; } .jobs-scroll:hover .jobs-scroll__track { animation-play-state: paused; } .jobs-scroll__item { flex: none; width: min(360px, 88vw); } .jobs-scroll__item .job-card { height: 100%; display: flex; flex-direction: column; margin-bottom: 0; } .jobs-scroll__item .job-card__excerpt { flex: 1; } @keyframes jobs-scroll-horizontal { to { transform: translateX(-50%); } } .empty-state svg { width: 52px; height: 52px; color: var(--sky-300); margin: 0 auto 18px; } /* Fiche offre */ .job-detail { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; } .job-aside { position: sticky; top: calc(var(--header-h) + var(--topbar-h) + 24px); display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); } .aside-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh-xs); } .aside-card h3 { font-size: 1.03rem; margin-bottom: 16px; } .spec-list { list-style: none; margin: 0; padding: 0; } .spec-list li { display: flex; gap: 13px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--line-2); margin: 0; } .spec-list li:last-child { border-bottom: 0; padding-bottom: 0; } .spec-list svg { width: 19px; height: 19px; color: var(--sky-600); flex: none; margin-top: 3px; } .spec-list__label { font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: 650; } .spec-list__value { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); font-size: .96rem; } .rich-text h2 { font-size: 1.5rem; margin-top: 2.2em; } .rich-text h3 { font-size: 1.16rem; margin-top: 1.8em; } .rich-text > :first-child { margin-top: 0; } .rich-text ul { padding-left: 0; list-style: none; } .rich-text ul li { position: relative; padding-left: 30px; } .rich-text ul li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--grad-sky); transform: rotate(45deg); } .rich-text blockquote { margin: 2em 0; padding: 24px 28px; border-left: 4px solid var(--sky-400); background: var(--sky-050); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 1.06rem; color: var(--navy-800); } .rich-text blockquote p:last-child { margin-bottom: 0; } .rich-text figure { margin: 2.2em 0; } .rich-text figcaption { font-size: .85rem; color: var(--ink-3); margin-top: 10px; text-align: center; } .rich-text img, .rich-text .ph { border-radius: var(--r-md); } /* Galerie d'un article (voir templates/article/show.html.twig, Article::$images) : petites vignettes carrées éparpillées, zoom au survol plutôt qu'un slider ou une visionneuse plein écran. */ .article-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 2em 0; } .article-gallery__item { position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; cursor: zoom-in; background: var(--paper-2); } .article-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .article-gallery__item:hover, .article-gallery__item:focus-within { z-index: 2; } .article-gallery__item:hover img, .article-gallery__item:focus-within img { transform: scale(2.2); box-shadow: 0 20px 45px rgba(10, 20, 40, .35); } .ph { aspect-ratio: 16 / 9; background: var(--grad-brand); display: grid; place-items: center; color: rgba(255, 255, 255, .5); font-family: var(--font-display); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; } /* ==== 11. FORMULAIRES ============================================== */ .form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(26px, 4vw, 44px); box-shadow: var(--sh-md); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; } .field { display: flex; flex-direction: column; gap: 8px; } .field[hidden] { display: none; } .field--full { grid-column: 1 / -1; } .field label { font-family: var(--font-display); font-weight: 650; font-size: .88rem; color: var(--navy-800); } .field label .req { color: var(--danger); } /* Symfony ajoute déjà la classe "required" aux