/* ========================================================================= hmwk. — feuille de styles du thème Les valeurs pilotables sont des variables CSS ; leurs valeurs par défaut vivent dans inc/tokens.php et sont écrasées dans par les réglages de l'Outil de personnalisation. Ne pas coder de couleur en dur ici. ========================================================================= */ /* --- 1. Reset et bases ------------------------------------------------- */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html, body { margin: 0; padding: 0; background: var(--hk-bg); } body { -webkit-font-smoothing: antialiased; background: var(--hk-bg); color: var(--hk-fg); font-family: var(--hk-font); font-weight: 400; } *, *::before, *::after { box-sizing: border-box; } a { color: var(--hk-fg); text-decoration: none; } a:hover { color: var(--hk-pink); } ::selection { background: var(--hk-pink); color: #fff; } input, textarea, select, button { font-family: inherit; } ::placeholder { color: var(--hk-placeholder); } img { max-width: 100%; } .hk-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .hk-skip:focus { position: fixed; z-index: 300; left: 12px; top: 12px; width: auto; height: auto; margin: 0; padding: 10px 18px; clip: auto; clip-path: none; background: var(--hk-pink); color: #fff; border-radius: var(--hk-radius-pill); font-size: 14px; font-weight: 700; } /* --- 2. Gabarit global ------------------------------------------------- */ .hk-root { background: var(--hk-bg); color: var(--hk-fg); min-height: 100vh; display: flex; flex-direction: column; } .hk-shell { flex: 1 0 auto; display: flex; flex-direction: row; align-items: flex-start; } .hk-main { flex: 1 1 0; min-width: 0; width: 100%; animation: hmwkFadeUp .6s cubic-bezier(.2,.7,.3,1) both; } @media (prefers-reduced-motion: reduce) { .hk-main { animation: none; } } /* --- 3. Sidebar -------------------------------------------------------- */ .hk-side { flex: 0 0 auto; width: var(--hk-sidebar-w); min-width: var(--hk-sidebar-min); max-width: var(--hk-sidebar-max); min-height: calc(100vh - 84px); position: sticky; top: 0; padding: 5vh 24px 0 2.2%; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; z-index: 40; background: var(--hk-bg); } .hk-logo { display: block; flex: 0 0 auto; } .hk-logo__mark { display: block; width: var(--hk-logo-size); aspect-ratio: 131/150; background-size: contain; background-position: left top; background-repeat: no-repeat; } .hk-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 34px; font-size: var(--hk-nav-size); font-weight: 700; letter-spacing: .01em; line-height: 1.55; flex: 0 0 auto; align-items: flex-start; z-index: 50; } .hk-nav a { display: block; padding-left: 0; color: var(--hk-fg); transition: padding .2s; } .hk-nav a:hover { color: var(--hk-pink); } .hk-nav .is-current { color: var(--hk-pink); padding-left: 10px; } .hk-nav__soon { display: flex; align-items: center; gap: 9px; color: var(--hk-fg); cursor: default; } .hk-badge-soon { flex: 0 0 auto; border: 1px solid var(--hk-pink); border-radius: var(--hk-radius-pill); padding: 2px 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; color: var(--hk-pink); } .hk-spacer { flex: 1.65 1 0; min-height: 18px; } .hk-spacer--end { flex: .5 1 0; min-height: 24px; } .hk-wordmark { display: block; flex: 0 0 auto; } .hk-wordmark img { display: block; height: min(var(--hk-wordmark-h), 22vh); width: auto; min-height: 96px; } .hk-deskblock { flex: 0 0 auto; margin-top: 24px; display: block; } .hk-deskblock p { margin: 0; font-size: 14px; line-height: 1.65; font-weight: 400; } .hk-social { display: flex; gap: 12px; margin-top: 22px; } /* Bandeau scotché : les icônes sont peintes sur l'image, les liens sont des zones posées par-dessus — nommées, et repérables au clavier. */ .hk-social--tape { position: relative; display: block; max-width: 100%; gap: 0; } .hk-social--tape img { display: block; width: 100%; height: auto; } /* Double classe : bat la spécificité de « .hk-social a » (pastilles), définie plus bas dans le fichier, qui sinon imposerait bordure et taille 38×38. */ .hk-social.hk-social--tape a { position: absolute; top: 0; bottom: 0; width: auto; height: auto; display: block; border: 0; border-radius: 0; background: transparent; } /* Survol des zones du bandeau : rien (pas le rose des pastilles). */ .hk-social.hk-social--tape a:hover, .hk-social.hk-social--tape a:focus { background: transparent; border-color: transparent; } .hk-social.hk-social--tape a:focus-visible { outline: 2px solid var(--hk-pink); outline-offset: 2px; } .hk-social a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.28); border-radius: var(--hk-radius-pill); color: var(--hk-fg); transition: background .2s, border-color .2s, color .2s; } .hk-social a:hover { background: var(--hk-pink); border-color: var(--hk-pink); color: #fff; } .hk-social svg { display: block; width: 17px; height: 17px; fill: currentColor; } .hk-burger { display: none; flex: 0 0 auto; flex-direction: column; justify-content: center; gap: 7px; width: 38px; height: 38px; padding: 0; background: transparent; border: 0; cursor: pointer; z-index: 60; } .hk-burger span { display: block; width: 30px; height: 2px; background: var(--hk-fg); transition: transform .25s, opacity .25s; } /* --- 4. Pied de page --------------------------------------------------- */ .hk-foot { flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: space-between; flex-direction: row; gap: 24px; padding: 34px 1.8% 26px 2.2%; font-size: 13px; } .hk-foot p { margin: 0; } .hk-foot a[href] { text-decoration: none; } .hk-foot .hk-foot__legal { text-decoration: underline; } .hk-foot__luds img { display: block; width: 34px; height: auto; } .hk-mobileid { display: none; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px 26px; padding: 40px 20px 0; } .hk-mobileid img.hk-mobileid__wordmark { display: block; height: min(170px, 34vw); width: auto; flex: 0 0 auto; } .hk-mobileid p { margin: 0; font-size: 15px; line-height: 1.7; } /* --- 5. Voile de transition -------------------------------------------- */ .hk-veil { position: fixed; inset: 0; z-index: 200; pointer-events: none; display: none; align-items: center; justify-content: center; background: var(--hk-bg); } /* * Le voile est coupé en deux moitiés, de part et d'autre du chargement : * la page sortante joue l'entrée et le plateau (is-in), la page entrante * reprend la fin du plateau et la sortie (is-out). Le mark, lui, garde une * seule animation de 1,15 s, décalée d'autant sur la seconde moitié. */ .hk-veil.is-in { display: flex; animation: hmwkVeilIn var(--hk-veil-in) ease both; } .hk-veil.is-out { display: flex; animation: hmwkVeilOut var(--hk-veil-out) ease both; } .hk-veil__mark { display: block; width: min(54px, 11vw); aspect-ratio: 1402/1610; background-image: var(--hk-grad-veil); background-size: 260% 100%; -webkit-mask-image: var(--hk-mask-mark); mask-image: var(--hk-mask-mark); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .hk-veil.is-in .hk-veil__mark, .hk-veil.is-out .hk-veil__mark { animation: hmwkPulse var(--hk-veil-dur) cubic-bezier(.45,0,.3,1) both, hmwkShift 2.3s linear infinite; } .hk-veil.is-out .hk-veil__mark { animation-delay: var(--hk-veil-offset), var(--hk-veil-offset); } @media (prefers-reduced-motion: reduce) { .hk-veil.is-in, .hk-veil.is-out { display: none; } } @keyframes hmwkVeilIn { 0% { opacity: 0; } 45%, 100% { opacity: 1; } } @keyframes hmwkVeilOut { 0%, 49% { opacity: 1; } 100% { opacity: 0; } } @keyframes hmwkPulse { 0% { opacity: 0; transform: scale(.86); } 22% { opacity: 1; transform: scale(1); } 44% { opacity: 1; transform: scale(1.12); } 64% { opacity: 1; transform: scale(1); } 82% { opacity: 1; transform: scale(1.08); } 100% { opacity: 0; transform: scale(.92); } } @keyframes hmwkShift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } @keyframes hmwkFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* --- 6. Accueil : showreel --------------------------------------------- */ .hk-hero { display: block; width: 100%; height: calc(100vh - 84px); min-height: 280px; object-fit: cover; background: #111; } /* --- 7. video. : tuiles de projets ------------------------------------- */ .hk-tiles { display: flex; flex-direction: column; gap: var(--hk-gap-tiles); margin-left: var(--hk-tile-indent); } .hk-tile { position: relative; display: block; aspect-ratio: 2560/1038; overflow: hidden; background: var(--hk-tile-bg); outline: 5px solid transparent; outline-offset: -5px; transition: outline-color .25s; } .hk-tile:hover, .hk-tile:focus-visible { outline-color: var(--hk-pink); } .hk-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; transition: transform .6s, opacity .4s; transform: scale(1); opacity: 1; } .hk-tile:hover .hk-tile__img, .hk-tile:focus-within .hk-tile__img { transform: scale(1.04); opacity: .45; } .hk-tile__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s; opacity: 0; } .hk-tile:hover .hk-tile__video, .hk-tile:focus-within .hk-tile__video { opacity: 1; } .hk-tile__ov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; transition: opacity .3s; opacity: 0; } .hk-tile:hover .hk-tile__ov, .hk-tile:focus-within .hk-tile__ov { opacity: 1; } .hk-tile__client { font-size: var(--hk-fs-tile-client); font-weight: 800; letter-spacing: -.01em; line-height: 1.05; color: #fff; } .hk-tile__title { font-size: clamp(14px,1.3vw,20px); font-weight: 600; color: #fff; } .hk-tile__cat { margin-top: 8px; font-size: 12px; font-weight: 600; color: #fff; border: 1px solid var(--hk-pink); border-radius: var(--hk-radius-badge); padding: 5px 12px; } /* --- 8. team. ---------------------------------------------------------- */ .hk-teamgrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--hk-gap-team); } .hk-manifest { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 34px 22px; gap: 22px; } .hk-manifest h1 { margin: 0; font-size: var(--hk-fs-manifest); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; } .hk-manifest__body { font-size: 14px; line-height: 1.75; display: flex; flex-direction: column; gap: 14px; } .hk-manifest__body p { margin: 0; } .hk-member { position: relative; display: block; aspect-ratio: .69; min-height: 320px; overflow: hidden; background: var(--hk-tile-bg-2); background-size: cover; background-position: center; } .hk-member__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hk-member__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.34) 40%, rgba(0,0,0,.25) 66%, rgba(0,0,0,.66) 100%); } .hk-member__id { position: absolute; left: 0; right: 0; top: 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 0 14px; } .hk-member__name { font-size: clamp(22px,2.2vw,34px); font-weight: 800; letter-spacing: -.01em; line-height: 1.1; } .hk-member__jp { font-size: .5em; font-weight: 500; } .hk-member__role { font-size: 14px; font-weight: 400; } .hk-plus { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.7); border-radius: var(--hk-radius-pill); padding: 6px 22px; font-size: 15px; line-height: 1; } .hk-teamcta { grid-column: span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; padding: 34px clamp(22px,6vw,90px); } .hk-teamcta h2 { margin: 0; font-size: clamp(24px,2.4vw,36px); font-weight: 800; line-height: 1.15; } .hk-teamcta p { margin: 0; font-size: 14px; line-height: 1.7; } .hk-teamcta__link { border: 1px solid rgba(255,255,255,.7); border-radius: var(--hk-radius-pill); padding: 6px 22px; font-size: 15px; line-height: 1; } /* --- 9. atelier. ------------------------------------------------------- */ .hk-ateliergrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--hk-gap-atelier); } .hk-post { position: relative; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 1; overflow: hidden; background: var(--hk-bg); text-align: center; } /* Voile monté du bas : il assoit le titre sans assombrir l'image entière. */ .hk-post__veil { position: absolute; inset: 0; background: var(--hk-post-grad); transition: opacity .35s; } .hk-post:hover .hk-post__veil { opacity: .85; } .hk-post__body { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0 6% clamp(18px, 4%, 34px); } .hk-post__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; opacity: .85; transition: opacity .35s, transform .6s; } .hk-post:hover .hk-post__img { opacity: .6; transform: scale(1.04); } .hk-post__title { position: relative; display: block; max-width: var(--hk-post-title-w); margin: 0 auto; font-size: clamp(17px,1.8vw,26px); font-weight: 700; line-height: 1.2; text-wrap: balance; text-shadow: 0 2px 14px rgba(0,0,0,.45); } .hk-post__date { position: relative; display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.72); } /* * Chargement de la suite : le lien paginé reste dans la page pour les moteurs * et la navigation sans script. Dès que le script prend la main, il passe en * retrait et ne sert plus que de sentinelle au défilement. */ .hk-more { display: flex; align-items: center; justify-content: center; min-height: 84px; padding: 30px 20px; } .hk-more a { display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; border: 1px solid rgba(255,255,255,.28); border-radius: var(--hk-radius-pill); font-size: 14px; font-weight: 700; } .hk-more a:hover { background: var(--hk-pink); border-color: var(--hk-pink); color: #fff; } .hk-more.is-auto a { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .hk-more.is-auto::after { content: ""; width: 88px; height: 2px; background: var(--hk-grad-brand); background-size: 220% 100%; opacity: .35; } .hk-more.is-auto.is-loading::after { opacity: 1; animation: hmwkShift 1.1s linear infinite; } @media (prefers-reduced-motion: reduce) { .hk-more.is-auto.is-loading::after { animation: none; } } /* --- 10. Fiche projet -------------------------------------------------- */ .hk-proj__hero, .hk-proj__herovideo { display: block; width: 100%; height: 50vh; min-height: 240px; object-fit: cover; background: var(--hk-tile-bg); background-size: cover; background-position: center; } .hk-projhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px 32px; flex-wrap: wrap; padding: 40px 0 0; } .hk-projhead h1 { margin: 0; font-size: var(--hk-fs-proj-title); font-weight: 800; letter-spacing: -.025em; line-height: 1; } .hk-projhead__sub { margin: 6px 0 0; font-size: clamp(17px,1.7vw,24px); font-weight: 700; } .hk-projhead__cat { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 600; border: 1px solid var(--hk-pink-deep); border-radius: var(--hk-radius-badge); padding: 6px 14px; } .hk-tape { flex: 0 0 auto; margin-top: 30px; /* Bord droit calé sur celui du panneau « Le projet. » (même gouttière). */ margin-right: clamp(30px,5vw,84px); } .hk-tape img { display: block; width: clamp(150px,14vw,215px); height: auto; transform: rotate(-2deg); } .hk-projpanel { position: relative; overflow: hidden; margin-top: 44px; background: var(--hk-panel-bg); } .hk-projpanel__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .09; } .hk-projpanel__inner { position: relative; padding: clamp(26px,4vw,64px); padding-right: clamp(30px,5vw,84px); text-align: right; display: flex; flex-direction: column; gap: 18px; align-items: flex-end; } .hk-projpanel__inner h2 { margin: 0; font-size: var(--hk-fs-h2); font-weight: 800; letter-spacing: -.015em; } .hk-projpanel__inner p { margin: 0; max-width: 110ch; font-size: 15px; line-height: 1.6; } .hk-projpanel__bar { position: absolute; right: 0; top: 0; bottom: 0; width: 9px; background: linear-gradient(180deg, var(--hk-pink), var(--hk-blue)); } .hk-carousel { margin-top: 44px; overflow: hidden; cursor: grab; touch-action: pan-y; } .hk-carousel__track { display: flex; gap: var(--hk-gap-carousel); width: max-content; /* will-change est posé par le script pendant l'animation seulement. */ } .hk-gal { flex: 0 0 auto; display: block; height: min(58vh, 520px); aspect-ratio: 16/9; background: var(--hk-tile-bg-3); background-size: cover; background-position: center; } .hk-credits { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 26px clamp(24px,3vw,48px); margin-top: 52px; text-align: left; } .hk-credits__role { display: block; font-size: 11px; font-weight: 600; letter-spacing: .16em; color: rgba(255,255,255,.55); } .hk-credits__who { display: block; margin-top: 7px; font-size: 18px; font-weight: 700; } .hk-rule { height: 2px; margin-top: 48px; background: var(--hk-grad-brand); } .hk-prevnext { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 0 12px; } .hk-prevnext a { flex: 1 1 260px; min-width: 0; padding: 26px clamp(18px,2.2vw,34px); color: var(--hk-fg); transition: background .2s; } .hk-prevnext a:hover { background: var(--hk-hover-dark); color: var(--hk-fg); } .hk-prevnext__next { text-align: right; } .hk-prevnext__label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hk-pink); } .hk-prevnext__title { display: block; margin-top: 7px; font-size: clamp(17px,1.6vw,21px); font-weight: 700; } /* --- 11. Cartes blanches (membre, article, mentions) ------------------- */ .hk-card { padding: 0 0 0 var(--hk-card-indent); } .hk-cardwrap { position: relative; } .hk-cardwrap__inner { position: relative; background: #fff; color: var(--hk-ink); } .hk-cardwrap__inner--pad { padding: clamp(34px,4vw,64px) clamp(24px,3.4vw,54px); } .hk-scotch { position: absolute; right: -22px; bottom: -30px; width: 132px; height: auto; z-index: 2; } /* --- 12. Fiche equipe -------------------------------------------------- */ .hk-mem { padding: clamp(28px,3.4vw,54px); } .hk-mem__top { display: flex; flex-wrap: wrap; gap: 34px clamp(28px,5vw,80px); align-items: flex-start; } .hk-mem__col { flex: 1 1 320px; min-width: 0; } .hk-mem__col h1 { margin: 0; font-size: var(--hk-fs-card-title); font-weight: 800; letter-spacing: -.02em; line-height: 1; } .hk-mem__jp { margin: 8px 0 0; font-size: 17px; font-weight: 600; color: var(--hk-pink); letter-spacing: .08em; } .hk-mem__bio { display: flex; flex-direction: column; gap: 16px; margin-top: 30px; font-size: 15px; line-height: 1.55; } .hk-mem__bio p { margin: 0; } .hk-mem__bio ul, .hk-mem__bio ol { margin: 0; padding-left: 20px; } .hk-mem__back { display: flex; justify-content: flex-end; margin-top: 34px; } .hk-mem__back img { display: block; width: 132px; height: auto; } .hk-mem__p1 { flex: 1.2 1 340px; aspect-ratio: 4/3; background: var(--hk-img-bg); background-size: cover; background-position: center; } .hk-mem__row2 { display: flex; flex-wrap: wrap; gap: 34px clamp(24px,4vw,58px); margin-top: clamp(30px,4vw,58px); align-items: flex-start; } .hk-mem__p2 { flex: 1.75 1 400px; aspect-ratio: 16/7; background: var(--hk-img-bg); background-size: cover; background-position: center; } .hk-mem__p3 { flex: 1 1 260px; aspect-ratio: 3/2; margin-top: 5%; background: var(--hk-img-bg); background-size: cover; background-position: center; } /* --- 13. Article ------------------------------------------------------- */ .hk-art__img { height: min(42vh, 380px); background: var(--hk-img-bg); background-size: cover; background-position: center; } .hk-art__body { padding: clamp(30px,3.6vw,58px) clamp(24px,3.4vw,54px) clamp(34px,4vw,64px); } .hk-art__col { max-width: 74ch; margin: 0 auto; } .hk-art__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--hk-pink); } .hk-art__meta a { color: var(--hk-pink); } .hk-art__meta i { display: block; width: 22px; height: 1px; background: #c9c9d2; } .hk-art__meta time { color: var(--hk-meta); } .hk-art__title { margin: 18px 0 0; font-size: clamp(32px,4vw,58px); font-weight: 800; letter-spacing: -.025em; line-height: 1.05; text-wrap: pretty; } .hk-art__lead { margin: 20px 0 0; font-size: clamp(17px,1.5vw,21px); font-weight: 600; line-height: 1.55; color: var(--hk-muted); } .hk-hr { height: 2px; width: 88px; margin: 30px 0 0; background: var(--hk-grad-brand); border: 0; } /* Contenu editorial rendu par WordPress */ .hk-prose { color: var(--hk-body); } .hk-prose > * { margin-top: 0; } .hk-prose h2 { margin: 36px 0 14px; font-size: clamp(21px,2vw,29px); font-weight: 800; letter-spacing: -.015em; line-height: 1.2; color: var(--hk-ink); } .hk-prose h3 { margin: 30px 0 12px; font-size: clamp(18px,1.6vw,23px); font-weight: 700; color: var(--hk-ink); } .hk-prose p { margin: 0 0 14px; font-size: 16px; line-height: 1.75; } .hk-prose a { color: var(--hk-ink); text-decoration: underline; text-underline-offset: 3px; } .hk-prose a:hover { color: var(--hk-pink); } .hk-prose ul, .hk-prose ol { margin: 0 0 16px; padding-left: 22px; font-size: 16px; line-height: 1.75; } .hk-prose li { margin-bottom: 6px; } .hk-prose strong { font-weight: 700; } .hk-prose img { display: block; height: auto; margin: 24px 0 0; } .hk-prose figure { margin: 38px 0 0; } .hk-prose figcaption { margin: 12px 0 0; font-size: 12px; color: var(--hk-meta); } .hk-prose blockquote { margin: 38px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--hk-pink); font-size: clamp(19px,1.8vw,25px); font-weight: 700; line-height: 1.4; letter-spacing: -.01em; color: var(--hk-ink); } .hk-prose blockquote p { font-size: inherit; line-height: inherit; margin: 0; } .hk-prose table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; } .hk-prose th, .hk-prose td { border: 1px solid var(--hk-line-soft); padding: 10px 12px; text-align: left; } .hk-prose hr { height: 2px; width: 88px; margin: 38px 0; background: var(--hk-grad-brand); border: 0; } .hk-prose .wp-caption-text { font-size: 12px; color: var(--hk-meta); } .hk-prose .alignleft { float: left; margin: 6px 24px 12px 0; } .hk-prose .alignright { float: right; margin: 6px 0 12px 24px; } .hk-prose .aligncenter { margin-left: auto; margin-right: auto; } /* --- 14. Partage et navigation d article ------------------------------- */ .hk-share { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--hk-line-soft); } .hk-share__label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hk-meta); } .hk-share__list { display: flex; gap: 8px; } .hk-share__list a, .hk-share__list button { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--hk-line-mid); border-radius: var(--hk-radius-pill); color: var(--hk-ink); background: transparent; cursor: pointer; transition: background .2s, border-color .2s, color .2s; } .hk-share__list a:hover, .hk-share__list button:hover { background: var(--hk-pink); border-color: var(--hk-pink); color: #fff; } .hk-share__done { font-size: 12px; font-weight: 600; color: var(--hk-pink); } .hk-share__done[hidden] { display: none; } .hk-artnav { display: flex; flex-wrap: wrap; gap: 2px; border-top: 1px solid var(--hk-line-soft); } .hk-artnav a { flex: 1 1 240px; min-width: 0; padding: 22px clamp(20px,2.4vw,36px); color: var(--hk-ink); transition: background .2s; } .hk-artnav a:hover { background: #f6f6f8; color: var(--hk-ink); } .hk-artnav__next { text-align: right; } .hk-artnav__label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--hk-pink); } .hk-artnav__title { display: block; margin-top: 6px; font-size: 17px; font-weight: 700; } /* --- 15. Bloc de code (shortcode hmwk_code) ---------------------------- */ .hk-code { margin: 38px 0; border-radius: var(--hk-radius-code); overflow: hidden; background: var(--hk-code-bg); border: 1px solid var(--hk-code-border); } .hk-code__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; background: var(--hk-code-head); border-bottom: 1px solid var(--hk-code-border); } .hk-code__lang { display: flex; align-items: center; gap: 9px; font-family: var(--hk-font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: #e4e8f0; } .hk-code__lang svg path { stroke: var(--hk-blue); } .hk-code__copy { display: flex; align-items: center; gap: 7px; background: transparent; border: 1px solid #333a48; border-radius: 7px; padding: 6px 11px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hk-code-label); cursor: pointer; transition: color .2s, border-color .2s; } .hk-code__copy:hover { color: #fff; border-color: var(--hk-blue); } .hk-code__body { max-height: 380px; overflow: auto; padding: 16px 0; } .hk-code__line { display: flex; gap: 16px; padding: 0 18px; font-family: var(--hk-font-mono); line-height: 1.72; font-size: 13px; } .hk-code__n { flex: 0 0 auto; width: 22px; text-align: right; color: var(--hk-code-num); user-select: none; } .hk-code__src { flex: 1 1 auto; min-width: 0; white-space: pre; color: var(--hk-code-fg); } .hk-t-tag { color: var(--hk-code-tag); } .hk-t-str { color: var(--hk-code-str); } .hk-t-attr { color: var(--hk-code-attr); } .hk-t-kw { color: var(--hk-code-kw); } .hk-t-num { color: var(--hk-code-num2); } .hk-t-punc { color: var(--hk-code-punc); } .hk-t-com { color: var(--hk-code-com); } /* --- 16. contact. ------------------------------------------------------ */ .hk-contact { min-height: calc(100vh - 84px); padding: 4vh 4% 5vh; display: flex; align-items: center; justify-content: center; } .hk-contact__wrap { position: relative; width: 100%; max-width: var(--hk-contact-max); } .hk-contact__tape { position: absolute; left: 26px; top: -26px; width: 200px; aspect-ratio: 2560 / 909; background: url(../img/scotch-rose.png) center / contain no-repeat; transform: rotate(-3deg); z-index: 3; } .hk-contact__card { position: relative; background: #fff; color: var(--hk-ink); padding: 44px clamp(24px,3vw,46px); display: flex; flex-wrap: wrap; gap: 30px clamp(22px,2.6vw,38px); } .hk-contact__left { flex: 1 1 260px; min-width: 0; } .hk-contact__left h1 { margin: 0; font-size: var(--hk-fs-page-title); font-weight: 800; letter-spacing: -.02em; line-height: .95; } .hk-contact__baseline { margin: 10px 0 0; font-size: clamp(19px,1.9vw,28px); font-weight: 700; color: var(--hk-pink); letter-spacing: .01em; } .hk-contact__addr { display: block; margin-top: 30px; font-size: 14px; line-height: 1.6; color: var(--hk-ink); } .hk-contact__addr strong { font-weight: 700; } .hk-contact__right { flex: 1.6 1 340px; min-width: 0; } /* Formulaire — styles partages entre le rendu du theme et Contact Form 7 */ .hk-form { display: flex; flex-direction: column; gap: 13px; } .hk-form h2 { margin: 0; font-size: clamp(19px,1.7vw,25px); font-weight: 700; } .hk-form h2 + .hk-form__grid { margin-top: 0; } .hk-form__h2--spaced { margin-top: 14px; } .hk-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,220px),1fr)); gap: 13px; } .hk-form input[type=text], .hk-form input[type=email], .hk-form input[type=tel], .hk-form input[type=url], .hk-form select, .hk-form textarea { width: 100%; background: #fff; color: var(--hk-ink); border: 1px solid var(--hk-ink); border-radius: var(--hk-radius-pill); padding: 13px 22px; font-size: 15px; outline: none; min-width: 0; } .hk-form textarea { border-radius: var(--hk-radius-textarea); padding: 15px 22px; resize: vertical; line-height: 1.5; } .hk-form input:focus, .hk-form select:focus, .hk-form textarea:focus { border-color: var(--hk-pink); box-shadow: 0 0 0 3px rgba(240,112,159,.22); } .hk-form__select { position: relative; margin-bottom: 12px; } .hk-form__select select { padding-right: 44px; appearance: none; cursor: pointer; } .hk-form__select::after { content: "\25BC"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 10px; color: var(--hk-ink); } .hk-form__stage { display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.55; border: 1px solid var(--hk-pink); border-radius: var(--hk-radius-textarea); padding: 18px 20px; } .hk-form__stage[hidden] { display: none; } .hk-form__stage p { margin: 0; } .hk-form__stage input[type=file] { font-size: 13px; } .hk-form__stage .hk-dim { color: #5c5c6b; } .hk-form__rgpd { display: flex; align-items: flex-start; gap: 10px; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--hk-muted); cursor: pointer; } .hk-form__rgpd input[type=checkbox] { margin: 2px 0 0; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--hk-blue); cursor: pointer; } /* Sur la ligne RGPD, l'enveloppe CF7 de la case ne doit pas prendre 100 % de large (règle globale des champs) : sinon un grand vide sépare la case du texte. On la réduit à la case. Double classe pour battre la règle globale. */ .hk-form .hk-form__rgpd .wpcf7-form-control-wrap { width: auto; display: inline; flex: 0 0 auto; } .hk-form__submit { align-self: center; margin-top: 8px; background: var(--hk-blue); color: #fff; border: 0; border-radius: var(--hk-radius-pill); padding: 14px 34px; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .2s, transform .2s; } .hk-form__submit:hover { background: var(--hk-ink); transform: translateY(-1px); } .hk-form__required { margin: 6px 0 0; font-size: 13px; font-style: italic; color: var(--hk-pink); } /* --- 17. Mentions legales et pages simples ---------------------------- */ .hk-legal__col { max-width: 78ch; margin: 0 auto; } .hk-legal h1, .hk-page h1 { margin: 0; font-size: var(--hk-fs-card-title); font-weight: 800; letter-spacing: -.025em; line-height: 1; color: var(--hk-ink); } .hk-legal__updated { margin: 44px 0 0; font-size: 13px; color: var(--hk-meta); } .hk-page__col { max-width: 78ch; margin: 0 auto; } /* --- 18. Contact Form 7 : neutralisation des enveloppes ---------------- */ .hk-form .wpcf7-form-control-wrap { display: block; width: 100%; } .hk-form .wpcf7-list-item { margin: 0; } .hk-form p { margin: 0; } .hk-form .wpcf7-not-valid-tip { display: block; margin: 6px 0 0 22px; font-size: 12px; font-weight: 600; color: var(--hk-pink); } .hk-form .wpcf7-spinner { margin: 0 auto; } .hk-form .wpcf7-response-output { margin: 14px 0 0 !important; padding: 13px 22px !important; border: 1px solid var(--hk-line-mid) !important; border-radius: var(--hk-radius-textarea) !important; font-size: 14px; line-height: 1.5; color: var(--hk-ink); } .hk-form .wpcf7-response-output.wpcf7-validation-errors, .hk-form form.invalid .wpcf7-response-output, .hk-form form.unaccepted .wpcf7-response-output, .hk-form form.spam .wpcf7-response-output { border-color: var(--hk-pink) !important; } .hk-form form.sent .wpcf7-response-output { border-color: var(--hk-blue) !important; } .hk-form .wpcf7-acceptance .wpcf7-list-item-label { display: none; } /* Turnstile : le widget est un bloc de largeur fixe, on le centre dans la colonne du formulaire et on lui réserve sa hauteur pour éviter le saut de mise en page pendant son chargement. */ .hk-form .wpcf7-turnstile, .hk-form .cf-turnstile { display: flex; justify-content: center; min-height: 65px; margin: 4px 0 0; } .hk-form .cf-turnstile iframe { max-width: 100%; } /* --- 19. Points de rupture -------------------------------------------- */ @media (max-width: 1023px) { [data-shell] { flex-direction: column; } [data-scotch] { right: 6px; bottom: 6px; width: 104px; } [data-cardwrap] { overflow: hidden; } [data-side] { width: 100%; max-width: none; min-height: 0; flex-direction: row; align-items: center; justify-content: space-between; padding: 16px 20px; position: sticky; top: 0; z-index: 40; background: #000; transition: background .25s ease; } /* Collée (dès qu'on défile) : la barre redevient transparente sur les vues à média sombre. Sur les pages à contenu clair (mentions légales, blog, article, contact) elle garde son fond noir pour rester lisible. L'accueil reste transparent en permanence. */ html[data-scrolled] [data-side] { background: transparent; } html[data-scrolled] .hk-view-legal [data-side], html[data-scrolled] .hk-view-atelier [data-side], html[data-scrolled] .hk-view-article [data-side], html[data-scrolled] .hk-view-member [data-side], html[data-scrolled] .hk-view-contact [data-side] { background: #000; } /* Accueil seulement : la barre flotte, transparente, au-dessus du showreel plein écran. Toutes les autres vues gardent le bandeau noir défini ci-dessus derrière le logo et le menu. */ .hk-view-home [data-shell] { position: relative; } .hk-view-home [data-side] { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: transparent; } [data-spacer], [data-wordmark], [data-deskblock] { display: none; } [data-burger], [data-mobileid] { display: flex; } [data-nav] { display: none; } [data-side][data-menu="open"] [data-nav] { display: flex; position: fixed; inset: 0; /* Voile en dégradé : transparent en haut vers noir en bas ; la vue derrière (showreel) reste visible, le menu centré reste lisible. */ background: linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.8) 55%, #000 92%); align-items: center; justify-content: center; gap: 22px; margin-top: 0; font-size: var(--hk-nav-size-mobile); } [data-hero] { height: 100vh; height: 100svh; } [data-tile] { aspect-ratio: 16/9; } [data-tilewrap] { margin-left: 0; } [data-tileov] { opacity: 1 !important; } [data-tileimg] { opacity: .5 !important; transform: none !important; } [data-teamgrid] { grid-template-columns: repeat(2, minmax(0,1fr)); } [data-ateliergrid] { grid-template-columns: repeat(3, minmax(0,1fr)); } [data-card] { padding: 0; } [data-contact] { min-height: 0; padding: 3vh 3% 4vh; } [data-gal] { height: min(44vh, 380px); } [data-projhead] { padding: 32px 0 0 24px; } [data-tape] { margin-top: 4px; } [data-projpanel] { text-align: left; align-items: flex-start; } [data-foot] { flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 34px 20px 28px; } .hk-credits, .hk-rule, .hk-prevnext { padding-left: 24px; padding-right: 24px; } } @media (min-width: 1024px) and (max-width: 1399px) { [data-teamgrid] { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 639px) { [data-hero] { height: 100vh; height: 100svh; } [data-tile] { aspect-ratio: 3/2; } [data-teamgrid] { grid-template-columns: minmax(0,1fr); } [data-ateliergrid] { grid-template-columns: repeat(2, minmax(0,1fr)); } [data-cta] { grid-column: auto; } [data-contact] { padding: 0 0 32px; } [data-gal] { height: min(34vh, 260px); } [data-projhead] { padding: 26px 0 0 20px; } [data-codeline] { font-size: 11.5px; } } /* --- 20. Barre admin -------------------------------------------------- */ .admin-bar .hk-side { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .hk-side { top: 46px; } }