/* ===================================================================== Human K — feuille de style principale du thème Nomenclature: préfixe "hk-" pour toutes les classes du thème, variables CSS préfixées "--hk-". ===================================================================== */ /* ---------- 1. Tokens / palette ---------- */ :root { --hk-ink: #211C1D; /* texte principal */ --hk-paper: #FAF9F7; /* fond général */ --hk-sand: #F0EBE7; /* bandes alternées */ --hk-sand-light: #F7F3EE; /* beige plus clair (ex: Déontologie, Ils nous font confiance) */ --hk-sand-dark: #E4D9CB; /* beige plus foncé (ex: Des coachs qui ont dirigé) */ --hk-signature: #D6092E; /* rouge Human K — utilisé en trait, jamais en aplat */ --hk-signature-deep: #8E0A22; --hk-muted: #7A7370; /* légendes */ --hk-hairline: #DED7D2; --hk-font-display: "Bodoni MT", "Bodoni 72", Didot, "Didot LT STD", "Playfair Display", Georgia, serif; --hk-font-body: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --hk-container-w: 1080px; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; background: var(--hk-ink); } /* Sur mobile (Safari notamment), la barre d'adresse qui se rétracte au défilement peut révéler brièvement un filet de fond de PAGE (et non de contenu) tout en bas — visible comme un espace blanc/clair juste après le pied de page sombre. En donnant à la même couleur que le pied de page (la toute dernière chose visible), ce filet devient invisible au lieu de trancher avec le reste. */ /* Ancres du menu (#mission, #deontologie...) : sans cette marge, le titre de la section ciblée arrivait collé en haut de l'écran, sous le header sticky, et sa lecture démarrait "coupée". On réserve un peu d'air au-dessus (hauteur du header + marge de confort). */ section[id] { scroll-margin-top: 90px; } body.hk-site { background: var(--hk-paper); color: var(--hk-ink); font-family: var(--hk-font-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; position: relative; overflow-x: hidden; /* nécessaire pour la technique "plein bord" ci-dessous */ } /* ---------- 1bis. Plein bord (fonds edge-to-edge), indépendant de WPBakery ----------- Que le bloc soit collé directement ou enveloppé dans un [vc_row]/[vc_column] de WPBakery, ces sections doivent toujours occuper 100% de la largeur de l'écran : on les fait sortir de leur conteneur avec la technique "full-bleed" par calc(), plus fiable que left/right:50% (qui suppose que le conteneur parent fait déjà la largeur de l'écran — faux dans une colonne WPBakery, ce qui décalait aussi les petits ronds rouges des "noeuds" entre sections). */ .hk-section, .hk-hero, .hk-contact { width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } /* WPBakery ajoute un overflow:hidden sur ses rangées/colonnes (surtout avec l'option "stretch_row"), ce qui rognait le haut des petits ronds rouges des "noeuds" : ils doivent légèrement déborder au-dessus de leur section pour chevaucher la section précédente, exactement comme sur la maquette. */ .vc_row, .vc_row-full-width, .vc_row-fluid, .wpb_column, .vc_column_container, .vc_column-inner { overflow: visible !important; } ::selection { background: var(--hk-signature); color: #fff; } .hk-site a { color: inherit; } .hk-site a:focus-visible, .hk-site button:focus-visible { outline: 2px solid var(--hk-signature); outline-offset: 3px; } .hk-container { max-width: var(--hk-container-w); margin: 0 auto; padding: 0 32px; } @media (max-width: 900px) { /* Un peu plus d'air à gauche qu'à droite sur mobile : le fil rouge et ses ronds d'étape vivent dans cette marge, le texte ne doit jamais les frôler. */ .hk-container { padding-left: 46px; } } /* ---------- 2. Le fil rouge (signature de la marque) ---------- */ .hk-thread { position: absolute; top: 0; left: 50%; width: 1.5px; height: 0; background: var(--hk-signature); z-index: 3; pointer-events: none; /* Le rond de chaque "nœud" est centré via translateX(-50%) sur son "left" : sans le même translateX ici, le fil (qui a une épaisseur) avait son BORD, et non son centre, exactement sur ce point — d'où un décalage d'environ 1px, visible en y regardant de près. Toutes les versions (ordinateur, mobile, v2, v3) en bénéficient. */ transform: translateX(-50%); } @media (max-width: 900px) { /* Version décalée mobile : le fil se déplace sur la gauche */ .hk-thread { left: 24px; } } @media (min-width: 901px) { /* Sur ordinateur uniquement : le fil est en léger sur-impression, moins présent. */ .hk-thread { opacity: .4; } } /* Variante "v2" du fil rouge, réservée à la page utilisant le modèle de page "Fil rouge — v2 (comparaison)" (Attributs de page > Modèle), pour comparer les deux rendus sans toucher au reste du site : trait un peu plus large, et fondu de couleur au passage du texte au lieu d'une disparition nette derrière lui. */ body.hk-thread-v2 .hk-thread { width: 2px; z-index: 6; mix-blend-mode: multiply; } /* Le fondu ne se voyait toujours pas après le premier correctif : WPBakery ajoute lui-même, sur certains de ses conteneurs internes (rangées, colonnes), son propre "z-index" invisible dans notre code — chacun de ces éléments crée alors un contexte d'empilement isolé qui empêche tout mélange de couleur avec un élément extérieur comme le fil. Plutôt que de deviner lequel est en cause, on neutralise le z-index de TOUS les éléments à l'intérieur du contenu de la page, uniquement sur cette page de comparaison (sans risque ailleurs sur le site). */ body.hk-thread-v2 #hk-content * { z-index: auto !important; } /* Variante "v3" : identique à la v2, avec en plus le fil et ses ronds décalés à gauche sur ordinateur (comme ils le sont déjà sur mobile), au lieu d'être centrés. On aligne sur le bord gauche du texte (bord du conteneur, padding compris) plutôt qu'un simple décalage fixe, pour que ça reste bien positionné quelle que soit la largeur d'écran. */ @media (min-width: 901px) { body.hk-thread-v3 .hk-thread { left: calc(50% - (var(--hk-container-w) / 2) + 32px); } body.hk-thread-v3 .hk-node::before { left: calc(50% - (var(--hk-container-w) / 2) + 32px); } /* Comme sur mobile : le fil et les ronds restent à leur place, mais le texte gagne un peu de marge supplémentaire pour ne pas les frôler. */ body.hk-thread-v3 .hk-container { padding-left: 56px; } /* La grille de logos clients contient quelques logos "larges" (ex: ADP) qui débordent un peu de leur colonne quand ils tombent en première position — le fil mordait dessus malgré la marge ci-dessus. On décale un peu plus spécifiquement cette grille. */ body.hk-thread-v3 .hk-logos { padding-left: 40px; } } /* Renfort de visibilité du fil sur le bloc de contact (fond très sombre) : masqué par défaut, révélé uniquement sur les pages de comparaison v2/v3, où le fondu de couleur du fil normal le rend quasi invisible ici. */ .hk-thread-patch { display: none; } body.hk-thread-v2 .hk-thread-patch { display: block; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--hk-signature); transform: translateX(-50%); opacity: .65; z-index: 1; pointer-events: none; } @media (max-width: 900px) { /* Sans cette règle, le renfort restait centré sur mobile (valeur par défaut ci-dessus) au lieu de suivre le fil, qui lui est bien à gauche : ça créait un second trait au milieu, et le vrai trait à gauche restait sans renfort, donc trop pâle sur le fond sombre. */ body.hk-thread-v2 .hk-thread-patch { left: 24px; } } @media (min-width: 901px) { body.hk-thread-v3 .hk-thread-patch { left: calc(50% - (var(--hk-container-w) / 2) + 32px); } } /* Quand une section "nœud" (avec son petit rond rouge) est la toute première section d'une page — ex: une page "Mentions légales" sans hero au-dessus — son rond déborde de 5px directement dans la zone du header sticky (au-dessus, z-index supérieur), qui le recouvre partiellement et le fait paraître "coupé" (un croissant plutôt qu'un cercle). Cette légère marge, invisible en pratique, garantit que le rond reste toujours sous le header, quelle que soit la section qui ouvre la page. */ #hk-content { padding-top: 8px; } .hk-node { position: relative; } .hk-node::before { content: ""; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--hk-paper); border: 1.5px solid var(--hk-signature); transform: translateX(-50%); z-index: 5; } @media (max-width: 900px) { /* Recentré sur le fil rouge, qui est lui aussi à 24px de la gauche en mobile (au lieu d'être centré comme sur ordinateur). Auparavant masqué par erreur (display:none) : les ronds ne marquaient plus les étapes. */ .hk-node::before { left: 24px; } } /* ---------- 3. Header ---------- */ .hk-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--hk-paper) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; } .hk-header.hk-is-scrolled { border-bottom-color: var(--hk-hairline); } .hk-header__inner { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 40px 32px 44px; max-width: var(--hk-container-w); margin: 0 auto; transition: padding .35s ease, gap .35s ease; } .hk-header.hk-is-scrolled .hk-header__inner { padding: 14px 32px 10px; gap: 10px; } .hk-brand { display: block; } .hk-brand__img, .hk-brand img { height: 42px; display: block; width: auto; transition: height .35s ease; } .hk-header.hk-is-scrolled .hk-brand__img, .hk-header.hk-is-scrolled .hk-brand img { height: 24px; } .hk-nav { display: flex; gap: 28px; align-items: center; justify-content: center; flex-wrap: wrap; } .hk-nav ul { display: flex; gap: 28px; align-items: center; justify-content: center; flex-wrap: wrap; list-style: none; } .hk-nav li { display: flex; align-items: center; } .hk-nav a { text-decoration: none; font-size: 14.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--hk-ink); padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; } .hk-nav a:hover { color: var(--hk-signature); border-bottom-color: var(--hk-signature); } /* Petits points rouges entre les rubriques, en rappel du fil rouge. */ .hk-nav li:not(.bouton):not(:last-child)::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--hk-signature); margin-left: 28px; } .hk-nav li.bouton a, .hk-nav a.hk-nav__cta { border: 1px solid var(--hk-ink); border-radius: 999px; padding: 8px 18px 7px; transition: all .2s; } .hk-nav li.bouton a:hover, .hk-nav a.hk-nav__cta:hover { background: var(--hk-signature); border-color: var(--hk-signature); color: #fff; } /* ---------- 3bis. Menu mobile (hamburger + panneau plein écran) ---------- */ @media (max-width: 900px) { /* Le bouton "Nous parler" n'est plus affiché à part sur mobile (il surchargeait l'entête) : il reste uniquement accessible dans le menu plein écran, avec les autres liens. */ .hk-nav { display: none; } /* Une seule ligne, resserrée verticalement : hamburger à gauche, logo exactement centré. La colonne 3 (vide) équilibre la colonne 1 (burger) pour que le logo reste centré sur la largeur totale. */ .hk-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 10px; padding: 18px 20px !important; gap: 0 !important; } .hk-header.hk-is-scrolled .hk-header__inner { padding: 10px 20px !important; } .hk-burger { justify-self: start; } .hk-brand { justify-self: center; } .hk-brand__img, .hk-brand img { height: 30px; } .hk-header.hk-is-scrolled .hk-brand__img, .hk-header.hk-is-scrolled .hk-brand img { height: 20px; } .hk-burger { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; width: 18px; height: 13px; padding: 0; flex-shrink: 0; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .hk-burger__bar { display: block; height: 1.5px; width: 100%; background: var(--hk-signature); transition: transform .3s ease, opacity .2s ease; } .hk-burger[aria-expanded="true"] .hk-burger__bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .hk-burger[aria-expanded="true"] .hk-burger__bar:nth-child(2) { opacity: 0; } .hk-burger[aria-expanded="true"] .hk-burger__bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } /* Le bandeau du haut se fond dans le panneau plein écran une fois ouvert. */ .hk-header.hk-nav-is-open { background: var(--hk-sand); backdrop-filter: none; border-bottom-color: transparent; } } @media (min-width: 901px) { .hk-burger { display: none; } } .hk-mobile-nav { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; background: var(--hk-sand); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s; } .hk-mobile-nav.hk-is-open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .3s ease, transform .3s ease; } .hk-mobile-nav__inner { text-align: center; padding: 32px; } .hk-mobile-nav__list { list-style: none; display: flex; flex-direction: column; align-items: center; gap: 24px; } .hk-mobile-nav__list a { text-decoration: none; font-family: var(--hk-font-body); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--hk-ink); padding-bottom: 4px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: none; transition: color .2s ease, border-color .2s ease; } .hk-mobile-nav__list a:hover, .hk-mobile-nav__list a:focus-visible { color: var(--hk-signature); border-bottom-color: var(--hk-signature); background: none; } @media (min-width: 901px) { .hk-mobile-nav { display: none !important; } } body.hk-nav-lock { overflow: hidden; } /* ---------- 4. Typo éditoriale ---------- */ .hk-kicker { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--hk-signature); margin-bottom: 22px; } /* font-style: normal explicite : sur certains PC/Firefox, la police italique Google (chargée uniquement pour les mots en ) était utilisée par erreur pour tout le titre faute de variante normale enregistrée pour ce nom de police (corrigé aussi dans l'enqueue : ital\@0;1). On fige ici le style normal pour ne plus jamais dépendre de ce comportement de fallback des navigateurs. */ .hk-display, .hk-site h1, .hk-site h2 { font-family: var(--hk-font-display); font-weight: 400; font-style: normal; } .hk-site h2 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.12; letter-spacing: .005em; margin-bottom: 28px; } .hk-site h2 em, .hk-site h1 em { font-style: italic; color: var(--hk-signature); } .hk-lede { font-size: 19px; color: var(--hk-ink); max-width: 620px; } .hk-statement { font-family: var(--hk-font-display); font-style: italic; font-size: clamp(21px, 2.6vw, 26px); line-height: 1.35; margin: 0 0 20px; } /* La première phrase en évidence (juste après le titre) reste collée au titre ; toute phrase suivante (ex. "Ce type de travail ne peut se réaliser seul.", précédée d'un paragraphe de texte) doit au contraire se détacher nettement du texte qui la précède. */ .hk-statement:not(:first-child) { margin-top: 40px; } .hk-dash { color: var(--hk-signature); margin-right: 10px; } .hk-audience-list { display: inline-block; text-align: left; position: relative; margin: 0 auto 44px; padding-left: 28px; list-style: none; } .hk-audience-list::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 1.5px; background: var(--hk-signature); } .hk-audience-list li, .hk-audience-list p { font-size: 19px; line-height: 1.55; margin: 12px 0; position: relative; } .hk-audience-list li::before, .hk-audience-list p::before { content: ""; position: absolute; left: -28px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--hk-paper); border: 1.5px solid var(--hk-signature); } .hk-muted-text { color: var(--hk-muted); } .hk-site section { position: relative; } .hk-site section > .hk-container { position: relative; z-index: 4; } .hk-section { padding: 110px 0; } .hk-section--sand { background: var(--hk-sand); } .hk-section--sand-light { background: var(--hk-sand-light); } .hk-section--sand-dark { background: var(--hk-sand-dark); } .hk-split { display: grid; grid-template-columns: 320px 1fr; gap: 64px; align-items: start; } @media (max-width: 900px) { .hk-split { grid-template-columns: 1fr; gap: 28px; } } .hk-split__label { position: sticky; top: 110px; } @media (max-width: 900px) { /* Le titre "collé" en haut de section pendant le défilement n'est pas souhaité sur mobile (il vient en surimpression sur le texte) : il défile normalement, comme le reste du contenu. */ .hk-split__label { position: static; top: auto; } } .hk-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; } .hk-reveal.hk-reveal--visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hk-reveal { opacity: 1; transform: none; transition: none; } .hk-thread { transition: none; } } /* ---------- 5. Hero ---------- */ /* Espace réduit de moitié entre le bas du header et le début du contenu (sur-titre "Executive coaching..." du hero) : 130px -> 65px. Le padding bas (avant la section suivante) est inchangé. */ .hk-hero { padding: 65px 0 120px; text-align: center; position: relative; } .hk-hero__title { font-size: clamp(40px, 6.4vw, 76px); line-height: 1.08; letter-spacing: .004em; max-width: 900px; margin: 0 auto 34px; } .hk-hero .hk-lede { margin: 0 auto 44px; } .hk-hero__since { display: inline-block; margin-top: 54px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--hk-muted); } .hk-btn { display: inline-block; text-decoration: none; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--hk-ink); border-radius: 999px; padding: 15px 34px 13px; color: var(--hk-ink); transition: all .25s; cursor: pointer; background: transparent; } .hk-btn:hover { background: var(--hk-signature); border-color: var(--hk-signature); color: #fff; } .hk-btn.hk-btn--solid { background: var(--hk-ink); color: var(--hk-paper); } .hk-btn.hk-btn--solid:hover { background: var(--hk-signature); border-color: var(--hk-signature); } /* ---------- 6. Interventions ---------- */ .hk-offer-list { border-top: 1px solid var(--hk-hairline); } .hk-offer { display: grid; grid-template-columns: 260px 1fr; gap: 40px; padding: 40px 0; border-bottom: 1px solid var(--hk-hairline); } @media (max-width: 900px) { .hk-offer { grid-template-columns: 1fr; gap: 10px; } } .hk-offer__title { font-family: var(--hk-font-display); font-weight: 400; font-style: normal; font-size: 26px; line-height: 1.2; } .hk-trademark { font-size: .42em; vertical-align: super; margin-left: 3px; color: var(--hk-muted); } .hk-offer__body p { max-width: 560px; color: var(--hk-ink); } .hk-offer__tag { display: inline-block; margin-top: 10px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--hk-signature); } .hk-offer__body p + p { margin-top: 12px; } .hk-offer__list { margin: 12px 0 0; list-style: none; } .hk-offer__item { position: relative; padding-left: 20px; font-size: 15px; margin-bottom: 8px; max-width: 540px; } .hk-offer__item::before { content: "\2013"; position: absolute; left: 0; color: var(--hk-signature); } /* Filet de securite : si une liste est tapee directement en HTML brut dans un champ de texte (hors du repeteur "Offres" structure), elle doit malgre tout recevoir le meme tiret rouge que la maquette plutot que la puce ronde par defaut du navigateur. */ .hk-offer__body ul { margin: 12px 0 0; list-style: none; } .hk-offer__body li { position: relative; padding-left: 20px; font-size: 15px; margin-bottom: 8px; max-width: 540px; } .hk-offer__body li::before { content: "\2013"; position: absolute; left: 0; color: var(--hk-signature); } .hk-frameworks { margin-top: 48px; max-width: 760px; } .hk-frameworks__label { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--hk-signature); font-weight: 600; margin-bottom: 10px; } .hk-frameworks p { font-size: 17px; line-height: 1.65; } .hk-cases { margin-top: 22px; border-top: 1px dotted var(--hk-hairline); } .hk-case { padding: 18px 0 4px 22px; position: relative; } .hk-case::before { content: ""; position: absolute; left: 0; top: 26px; width: 8px; height: 8px; border-radius: 50%; background: var(--hk-paper); border: 1.5px solid var(--hk-signature); } .hk-case__title { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--hk-signature); margin-bottom: 6px; font-weight: 600; } .hk-case p { font-size: 17px; color: var(--hk-ink); max-width: 540px; } /* ---------- 7. Citation / triptyque ---------- */ .hk-pull-quote { font-family: var(--hk-font-display); font-style: normal; font-size: clamp(24px, 3.2vw, 34px); line-height: 1.3; max-width: 780px; margin-bottom: 40px; } .hk-triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 48px; } @media (max-width: 900px) { .hk-triad { grid-template-columns: 1fr; } } .hk-triad__title { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--hk-signature); margin-bottom: 12px; font-weight: 600; } .hk-triad p { font-size: 15.5px; } /* ---------- 8. Engagements / déontologie ---------- */ .hk-commitments { counter-reset: hk-commitment; max-width: 720px; } .hk-commitment { counter-increment: hk-commitment; padding: 26px 0 26px 74px; position: relative; border-bottom: 1px solid var(--hk-hairline); } .hk-commitment::before { content: counter(hk-commitment); position: absolute; left: 0; top: 20px; font-family: var(--hk-font-display); font-size: 40px; color: var(--hk-signature); font-style: italic; } .hk-commitment__title { display: block; font-size: 18px; margin-bottom: 6px; font-weight: 600; } .hk-commitment p { font-size: 15.5px; color: var(--hk-ink); } /* ---------- 9. Équipe ---------- */ .hk-video { max-width: 680px; margin-bottom: 48px; } .hk-video__frame { aspect-ratio: 16 / 9; background: var(--hk-ink); border-radius: 3px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: hidden; border: 0; } .hk-video__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; } .hk-video__play { width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid var(--hk-signature); color: var(--hk-signature); display: flex; align-items: center; justify-content: center; font-size: 18px; padding-left: 5px; transition: all .25s; position: relative; z-index: 2; background: transparent; } .hk-video__frame:hover .hk-video__play { background: var(--hk-signature); color: #fff; } .hk-video__caption { font-size: 13px; color: var(--hk-muted); margin-top: 10px; } .hk-profile { max-width: 680px; } .hk-profile + .hk-profile { margin-top: 44px; padding-top: 44px; border-top: 1px solid var(--hk-hairline); } .hk-profile__name { font-family: var(--hk-font-display); font-weight: 400; font-style: normal; font-size: 26px; margin-bottom: 4px; } .hk-profile__badge { margin: 6px 0 18px; position: relative; display: inline-block; cursor: help; } .hk-profile__badge img { height: 56px; width: auto; display: block; } .hk-badge-tooltip { position: absolute; left: 0; bottom: calc(100% + 12px); width: 230px; padding: 12px 16px; border-radius: 4px; background: var(--hk-signature); color: #fff; font-family: var(--hk-font-body); font-size: 13px; line-height: 1.45; font-weight: 400; text-transform: none; letter-spacing: normal; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; z-index: 20; } .hk-badge-tooltip::after { content: ""; position: absolute; top: 100%; left: 22px; border: 6px solid transparent; border-top-color: var(--hk-signature); } .hk-profile__badge:hover .hk-badge-tooltip, .hk-profile__badge:focus-within .hk-badge-tooltip, .hk-profile__badge:focus .hk-badge-tooltip { opacity: 1; visibility: visible; transform: translateY(0); } .hk-profile__role { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--hk-signature); margin-bottom: 14px; } .hk-profile__body p + p { margin-top: 12px; } /* ---------- 10. Références ---------- */ .hk-quote { font-family: var(--hk-font-display); font-style: normal; font-size: clamp(22px, 3vw, 30px); line-height: 1.35; max-width: 760px; margin: 0 auto 18px; text-align: center; } .hk-quote::before { content: "\00ab\00a0"; color: var(--hk-signature); } .hk-quote::after { content: "\00a0\00bb"; color: var(--hk-signature); } .hk-quote__signature { text-align: center; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--hk-muted); } .hk-quotes { display: grid; margin-bottom: 56px; } .hk-quotes__slide { grid-area: 1 / 1; opacity: 0; transition: opacity .9s ease; pointer-events: none; } .hk-quotes__slide.hk-is-active { opacity: 1; pointer-events: auto; } .hk-quotes__dots { display: flex; gap: 10px; justify-content: center; margin-top: 22px; } .hk-quotes__dots button { width: 8px; height: 8px; border-radius: 50%; padding: 0; cursor: pointer; border: 1.5px solid var(--hk-signature); background: transparent; transition: background .3s; } .hk-quotes__dots button.hk-is-active { background: var(--hk-signature); } .hk-clients { display: flex; flex-wrap: wrap; gap: 14px 34px; justify-content: center; max-width: 860px; margin: 0 auto; } .hk-clients__item { font-size: 14px; letter-spacing: .06em; color: var(--hk-muted); white-space: nowrap; } .hk-clients__note { text-align: center; font-size: 13px; color: var(--hk-muted); margin-top: 26px; font-style: italic; } .hk-logos { display: flex; flex-wrap: wrap; gap: 26px 36px; justify-content: center; align-items: center; max-width: 1000px; margin: 56px auto 0; } /* Sur ordinateur, grille à nombre de colonnes fixe (calculé côté PHP selon le nombre réel de logos, cf. hk_best_logos_columns()) plutôt qu'un simple retour à la ligne flex : ça évite qu'un logo se retrouve tout seul, isolé, sur la dernière ligne (par ex. "Veolia"). Le nombre de colonnes s'adapte automatiquement si des logos sont ajoutés/retirés dans l'admin. */ @media (min-width: 701px) { .hk-logos { display: grid; grid-template-columns: repeat(var(--hk-logos-cols, 7), 1fr); justify-items: center; } } /* Chaque logo occupe la même "boîte" (largeur ET hauteur fixes) : avec object-fit:contain, un logo carré/compact remplit davantage sa boîte qu'avec une simple hauteur fixe, ce qui évite l'effet "pastille" écrasée à côté des logos tout en longueur. */ .hk-logos__item-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 44px; } .hk-logos__item-wrap.hk-logos__item-wrap--lg { width: 200px; height: 74px; } .hk-logos__item { width: 100%; height: 100%; object-fit: contain; opacity: .55; transition: opacity .25s; position: relative; z-index: 1; } /* Survol : la version couleur unie (rouge de la marque, #D6092E) prend le relais via un masque CSS calé sur la silhouette exacte du logo — un rouge franc et fidèle, plutôt qu'un filtre approximatif. */ .hk-logos__item-tint { position: absolute; inset: 0; background: var(--hk-signature); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; opacity: 0; transition: opacity .25s; z-index: 2; pointer-events: none; } .hk-logos__item-wrap:hover .hk-logos__item { opacity: 0; } .hk-logos__item-wrap:hover .hk-logos__item-tint { opacity: 1; } /* Ajustement ponctuel : le logo CCI Dijon paraissait un peu petit dans sa boîte par rapport aux autres — léger agrandissement individuel (et non toute la catégorie). On grossit toute la boîte (image + masque de survol ensemble) plutôt que l'image seule, pour que l'effet rouge au survol reste calé sur le logo agrandi. */ .hk-logos__item-wrap:has(img[alt="CCI Dijon"]) { transform: scale(1.18); } /* Autres ajustements ponctuels demandés : AGF et IVO Capital paraissaient plus imposants que les logos voisins une fois harmonisés — léger rétrécissement individuel, même principe que CCI Dijon ci-dessus. */ .hk-logos__item-wrap:has(img[alt="AGF"]) { transform: scale(0.78); } .hk-logos__item-wrap:has(img[alt="IVO Capital"]) { transform: scale(0.85); } @media (max-width: 700px) { .hk-logos { gap: 18px 24px; } .hk-logos__item-wrap { width: 92px; height: 34px; } .hk-logos__item-wrap.hk-logos__item-wrap--lg { width: 150px; height: 55px; } } /* ---------- 11. Contact / pied de page ---------- */ .hk-contact { background: var(--hk-ink); color: var(--hk-paper); padding: 110px 0 90px; } .hk-contact h2 { color: var(--hk-paper); } .hk-contact .hk-lede { color: #CFC8C4; } .hk-contact .hk-btn { border-color: var(--hk-paper); color: var(--hk-paper); } .hk-contact .hk-btn:hover { background: var(--hk-signature); border-color: var(--hk-signature); } .hk-contact__cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } /* Logo dedie a ce bloc sombre (cf. hk_footer_logo dans le Customizer), sinon repli sur le logo principal du site. */ .hk-contact__logo { position: relative; display: inline-block; height: 36px; width: auto; } .hk-contact__logo img { height: 36px; width: auto; display: block; } .hk-contact__coord { margin-top: 56px; display: flex; gap: 60px; flex-wrap: wrap; font-size: 15px; color: #CFC8C4; } .hk-contact__coord strong { color: var(--hk-paper); display: block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 8px; } .hk-footer { position: relative; background: var(--hk-ink); border-top: 1px solid #3A3334; padding: 28px 0; color: #9A9291; } .hk-footer__inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; font-size: 12.5px; } .hk-footer__inner a { color: #9A9291; text-decoration: none; } .hk-footer__inner a:hover { color: var(--hk-paper); } .hk-footer__menu ul, .hk-footer__widgets { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; } .hk-footer__menu li:not(:last-child)::after { content: "\00b7"; margin-left: 10px; }