/* ========================================================================== * Hermits Shell : header « L'encre d'en dessous » + footer « La dernière page » * * Chargée sur tout le site, exclue du Used CSS de WP Rocket (voir shell.php). * Le squelette anti-CLS (position, hauteurs, fonds) vit aussi en ligne dans * le : les règles ici le complètent sans le contredire. * * Deux thèmes de barre : papier (défaut) et encre (pages au hero sombre). * Le panneau Services et le menu mobile sont toujours d'encre, quel que soit * le thème de la barre. Un seul accent (turquoise), un seul système de * rayons (pilule pour l'interactif), easings personnalisés partout. * ======================================================================== */ :root { --hshell-ink: #211f1c; --hshell-ink-soft: #2d2a26; --hshell-paper: #f4f1ec; --hshell-cream: #fefdf9; --hshell-accent: #3cdbc0; --hshell-accent-soft: #5fe3cd; --hshell-h: 76px; --hshell-h-m: 64px; --hshell-pad: clamp(20px, 4vw, 56px); --hshell-max: 1360px; --hshell-ease: cubic-bezier(0.22, 1, 0.36, 1); --hshell-ease-io: cubic-bezier(0.83, 0, 0.17, 1); } /* -------------------------------------------------------------------------- * Lien d'évitement * ------------------------------------------------------------------------ */ .hshell-skip { position: fixed; top: -60px; left: 16px; z-index: 10050; padding: 12px 18px; background: var(--hshell-ink); color: var(--hshell-paper) !important; font: 600 14px/1 "Hanken Grotesk", sans-serif; border-radius: 999px; transition: top 0.2s var(--hshell-ease); } .hshell-skip:focus-visible { top: 12px; outline: 2px solid var(--hshell-accent); outline-offset: 3px; } /* -------------------------------------------------------------------------- * La barre * ------------------------------------------------------------------------ */ .hshell { position: fixed; top: 0; left: 0; right: 0; z-index: 9990; font-family: "Hanken Grotesk", sans-serif; transition: transform 0.36s var(--hshell-ease), background-color 0.28s ease, box-shadow 0.28s ease; } .hshell.is-hidden { transform: translateY(-101%); } .hshell[data-hshell-theme="paper"] { background: var(--hshell-cream); color: var(--hshell-ink); --hshell-focus: var(--hshell-ink); } .hshell[data-hshell-theme="ink"], .hshell.is-menu-open { background: var(--hshell-ink-soft); color: var(--hshell-paper); --hshell-focus: var(--hshell-accent); } .hshell.is-condensed { --hshell-h: 62px; box-shadow: 0 1px 0 rgba(33, 31, 28, 0.07), 0 14px 34px rgba(33, 31, 28, 0.07); } .hshell[data-hshell-theme="ink"].is-condensed, .hshell.is-menu-open.is-condensed { box-shadow: 0 1px 0 rgba(244, 241, 236, 0.1), 0 14px 34px rgba(0, 0, 0, 0.28); } .hshell-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); height: var(--hshell-h); max-width: var(--hshell-max); margin: 0 auto; padding: 0 var(--hshell-pad); transition: height 0.32s var(--hshell-ease); } .hshell :focus-visible { outline: 2px solid var(--hshell-focus, var(--hshell-accent)); outline-offset: 3px; border-radius: 4px; } /* Le spacer réserve la hauteur pleine : la condensation de la barre ne déplace jamais le contenu (CLS zéro par construction). */ .hshell-spacer { height: 76px; } .hshell-spacer[data-hshell-theme="paper"] { background: var(--hshell-cream); } .hshell-spacer[data-hshell-theme="ink"] { background: var(--hshell-ink); } /* -------------------------------------------------------------------------- * Logotype * ------------------------------------------------------------------------ */ .hshell-logo { display: block; flex: 0 0 auto; color: inherit; } .hshell-logo-svg { display: block; width: auto; height: 26px; transition: height 0.32s var(--hshell-ease); } .hshell.is-condensed .hshell-logo-svg { height: 22px; } /* -------------------------------------------------------------------------- * Navigation desktop * ------------------------------------------------------------------------ */ .hshell-nav { margin-left: auto; } .hshell-nav-list { display: flex; align-items: center; gap: clamp(6px, 1.4vw, 18px); margin: 0; padding: 0; list-style: none; } .hshell-nav-item { margin: 0; } .hshell-nav-link { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 10px 8px; background: none; border: 0; font: 600 15px/1 "Hanken Grotesk", sans-serif; letter-spacing: 0.01em; color: inherit; cursor: pointer; text-decoration: none !important; } .hshell-nav-link::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 2px; background: currentColor; border-radius: 1px; transform: scaleX(0); transform-origin: left center; transition: transform 0.28s var(--hshell-ease), background-color 0.2s ease; } .hshell-nav-link:hover::after, .hshell-nav-link[aria-expanded="true"]::after { transform: scaleX(1); } .hshell-nav-link.is-active::after { transform: scaleX(1); background: var(--hshell-accent); } /* Caret du bouton Services : un chevron géométrique qui bascule. */ .hshell-caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; border-radius: 1px; transform: rotate(45deg) translateY(-2px); transition: transform 0.3s var(--hshell-ease); } [aria-expanded="true"] > .hshell-caret { transform: rotate(-135deg) translateY(-2px); } /* -------------------------------------------------------------------------- * CTA : l'unique intent contact, même libellé du header au footer. * ------------------------------------------------------------------------ */ .hshell-cta { flex: 0 0 auto; padding: 13px 24px; background: var(--hshell-accent); color: var(--hshell-ink) !important; font: 700 14px/1 "Hanken Grotesk", sans-serif; letter-spacing: 0.01em; border-radius: 999px; text-decoration: none !important; transition: background-color 0.22s ease, transform 0.22s var(--hshell-ease); } .hshell-cta:hover { background: var(--hshell-accent-soft); transform: translateY(-1px); } .hshell-cta:active { transform: translateY(0) scale(0.98); } .hshell-cta--block { display: block; text-align: center; padding: 18px 24px; font-size: 16px; } /* -------------------------------------------------------------------------- * Le panneau Services : l'encre d'en dessous. * ------------------------------------------------------------------------ */ .hshell-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 1; background: var(--hshell-ink); color: var(--hshell-paper); --hshell-focus: var(--hshell-accent); border-top: 1px solid rgba(244, 241, 236, 0.1); box-shadow: 0 48px 90px rgba(0, 0, 0, 0.38); visibility: hidden; opacity: 0; transform: translateY(-12px); transition: opacity 0.26s var(--hshell-ease), transform 0.32s var(--hshell-ease), visibility 0s linear 0.32s; } .hshell-panel.is-open { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity 0.3s var(--hshell-ease), transform 0.36s var(--hshell-ease), visibility 0s; } .hshell-panel-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.05fr); gap: clamp(32px, 4vw, 64px); max-width: var(--hshell-max); margin: 0 auto; padding: clamp(36px, 4vw, 52px) var(--hshell-pad) clamp(40px, 4.5vw, 60px); } /* Chorégraphie : chaque colonne monte de l'encre, l'une après l'autre. */ .hshell-panel-col { opacity: 0; transform: translateY(16px); transition: opacity 0.3s ease, transform 0.3s ease; } .hshell-panel.is-open .hshell-panel-col { opacity: 1; transform: translateY(0); transition: opacity 0.42s var(--hshell-ease), transform 0.46s var(--hshell-ease); transition-delay: calc(0.06s + var(--i, 0) * 0.05s); } .hshell-panel-title { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 700 16px/1.3 "Hanken Grotesk", sans-serif; color: var(--hshell-paper) !important; text-decoration: none !important; } .hshell-panel-title:hover .hshell-arrow, .hshell-panel-title:focus-visible .hshell-arrow { transform: translateX(4px); } .hshell-panel-title.is-active { color: var(--hshell-accent) !important; } .hshell-panel-list { margin: 0; padding: 0; list-style: none; } .hshell-panel-list li { margin: 0; } .hshell-panel-link { display: inline-block; padding: 7px 0; font: 450 15px/1.4 "Hanken Grotesk", sans-serif; color: rgba(244, 241, 236, 0.72) !important; text-decoration: none !important; transition: color 0.2s ease, transform 0.24s var(--hshell-ease); } .hshell-panel-link:hover { color: var(--hshell-paper) !important; transform: translateX(4px); } .hshell-panel-link.is-active { color: var(--hshell-accent) !important; } .hshell-panel-col--aside { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding-left: clamp(24px, 2.6vw, 40px); border-left: 1px solid rgba(244, 241, 236, 0.12); } .hshell-panel-aside-text { margin: 0; font: 400 15px/1.55 "Hanken Grotesk", sans-serif; color: rgba(244, 241, 236, 0.6); max-width: 24ch; text-wrap: balance; } .hshell-panel-col--aside .hshell-panel-title { margin: 0; } /* Aperçu du dernier projet publié dans l'aparté du panneau. */ .hshell-panel-proj { display: block; margin: 16px 0 18px; border-radius: 10px; overflow: hidden; text-decoration: none !important; } .hshell-panel-proj img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; transform: scale(1); transition: transform 0.5s var(--hshell-ease); } .hshell-panel-proj:hover img, .hshell-panel-proj:focus-visible img { transform: scale(1.03); } .hshell-panel-proj-title { display: block; padding-top: 10px; font: 600 14px/1.4 "Hanken Grotesk", sans-serif; color: rgba(244, 241, 236, 0.85); } .hshell-panel-proj:hover .hshell-panel-proj-title { color: var(--hshell-paper); } /* Flèche géométrique partagée (panneau, footer). */ .hshell-arrow { position: relative; width: 18px; height: 2px; background: var(--hshell-accent); border-radius: 1px; transition: transform 0.28s var(--hshell-ease); } .hshell-arrow::after { content: ""; position: absolute; right: -1px; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--hshell-accent); border-right: 2px solid var(--hshell-accent); border-radius: 1px; transform: translateY(-50%) rotate(45deg) ; transform-origin: center; } /* -------------------------------------------------------------------------- * Burger * ------------------------------------------------------------------------ */ .hshell-burger { display: none; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -8px; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; } .hshell-burger-box { display: flex; flex-direction: column; gap: 7px; width: 24px; } .hshell-burger-line { display: block; height: 2px; background: currentColor; border-radius: 1px; transition: transform 0.3s var(--hshell-ease); } .hshell-burger[aria-expanded="true"] .hshell-burger-line:first-child { transform: translateY(4.5px) rotate(45deg); } .hshell-burger[aria-expanded="true"] .hshell-burger-line:last-child { transform: translateY(-4.5px) rotate(-45deg); } /* -------------------------------------------------------------------------- * Menu mobile : rideau d'encre plein écran. * ------------------------------------------------------------------------ */ .hshell-mobile { position: fixed; inset: 0; z-index: 1; background: var(--hshell-ink); color: var(--hshell-paper); --hshell-focus: var(--hshell-accent); visibility: hidden; opacity: 1; transform: translateY(-102%); transition: transform 0.48s var(--hshell-ease-io), visibility 0s linear 0.48s; } .hshell-mobile.is-open { visibility: visible; transform: translateY(0); transition: transform 0.52s var(--hshell-ease-io), visibility 0s; } .hshell-mobile-in { display: flex; flex-direction: column; height: 100%; padding: calc(var(--hshell-h-m) + 20px) var(--hshell-pad) 28px; overflow-y: auto; overscroll-behavior: contain; } .hshell-mobile-list { margin: 0; padding: 0; list-style: none; } .hshell-mobile-item { margin: 0; border-bottom: 1px solid rgba(244, 241, 236, 0.1); opacity: 0; transform: translateY(22px); transition: opacity 0.2s ease, transform 0.2s ease; } .hshell-mobile.is-open .hshell-mobile-item, .hshell-mobile.is-open .hshell-mobile-foot { opacity: 1; transform: translateY(0); transition: opacity 0.46s var(--hshell-ease), transform 0.5s var(--hshell-ease); transition-delay: calc(0.16s + var(--i, 0) * 0.055s); } .hshell-mobile-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 0; background: none; border: 0; text-align: left; font: 800 clamp(28px, 7.5vw, 40px)/1.1 "Hanken Grotesk", sans-serif; letter-spacing: -0.01em; color: var(--hshell-paper) !important; cursor: pointer; text-decoration: none !important; } .hshell-mobile-link.is-active { color: var(--hshell-accent) !important; } .hshell-mobile-link .hshell-caret { width: 12px; height: 12px; border-width: 2.5px; margin-right: 6px; } /* Accordéon Services : hauteur animée par grid, sans mesure JS. */ .hshell-mobile-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--hshell-ease); } .hshell-mobile-toggle[aria-expanded="true"] + .hshell-mobile-sub { grid-template-rows: 1fr; } .hshell-mobile-sub-in { min-height: 0; overflow: hidden; display: grid; gap: 20px; padding-bottom: 6px; /* Replié, le contenu quitte aussi l'ordre de tabulation. */ visibility: hidden; transition: visibility 0s linear 0.4s; } .hshell-mobile-toggle[aria-expanded="true"] + .hshell-mobile-sub .hshell-mobile-sub-in { visibility: visible; transition: visibility 0s; } .hshell-mobile-toggle[aria-expanded="true"] + .hshell-mobile-sub .hshell-mobile-sub-in { padding-bottom: 26px; } .hshell-mobile-group-title { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 4px; font: 700 16px/1.3 "Hanken Grotesk", sans-serif; color: var(--hshell-paper) !important; text-decoration: none !important; } .hshell-mobile-group-list { margin: 0; padding: 0; list-style: none; } .hshell-mobile-group-list li { margin: 0; } .hshell-mobile-group-list a { display: inline-block; padding: 8px 0; font: 450 17px/1.4 "Hanken Grotesk", sans-serif; color: rgba(244, 241, 236, 0.75) !important; text-decoration: none !important; } .hshell-mobile-group-list a:hover, .hshell-mobile-group-list a[aria-current="page"] { color: var(--hshell-accent) !important; } .hshell-mobile-foot { margin-top: auto; padding-top: 32px; opacity: 0; transform: translateY(22px); transition: opacity 0.2s ease, transform 0.2s ease; } /* Verrou de défilement quand le rideau est ouvert. */ html.hshell-lock, html.hshell-lock body { overflow: hidden !important; } /* -------------------------------------------------------------------------- * Footer « La dernière page » * ------------------------------------------------------------------------ */ .hshell-lp { position: relative; background: var(--hshell-ink); color: var(--hshell-paper); --hshell-focus: var(--hshell-accent); font-family: "Hanken Grotesk", sans-serif; overflow: hidden; } .hshell-lp :focus-visible { outline: 2px solid var(--hshell-accent); outline-offset: 3px; border-radius: 4px; } .hshell-lp-in { max-width: var(--hshell-max); margin: 0 auto; padding: clamp(72px, 10vw, 136px) var(--hshell-pad) 0; } .hshell-lp-hint { margin: 0 0 clamp(14px, 2vw, 22px); font: 500 clamp(15px, 1.6vw, 18px)/1.4 "Hanken Grotesk", sans-serif; color: rgba(244, 241, 236, 0.62); } .hshell-lp-link { position: relative; display: inline-flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); color: var(--hshell-paper) !important; font-weight: 900; font-size: clamp(40px, 7.4vw, 116px); line-height: 1.02; letter-spacing: -0.02em; text-decoration: none !important; text-wrap: balance; } .hshell-lp-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.09em; height: 0.055em; background: var(--hshell-accent); border-radius: 2px; transform: scaleX(0); transform-origin: left center; transition: transform 0.38s var(--hshell-ease); } .hshell-lp-link:hover::after, .hshell-lp-link:focus-visible::after { transform: scaleX(1); } .hshell-arrow--xl { flex: 0 0 auto; width: 0.62em; height: 0.055em; min-height: 3px; } .hshell-arrow--xl::after { width: 0.26em; height: 0.26em; border-width: 0.055em; min-width: 9px; min-height: 9px; } .hshell-lp-link:hover .hshell-arrow--xl { transform: translateX(0.14em); } /* Plan du site : le silo services en toutes lettres, sur chaque page. */ .hshell-lp-plan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); margin-top: clamp(64px, 8vw, 116px); padding-top: clamp(40px, 4.5vw, 56px); border-top: 1px solid rgba(244, 241, 236, 0.12); } .hshell-lp-col-title { display: inline-block; margin: 0 0 14px; font: 700 15px/1.3 "Hanken Grotesk", sans-serif; color: var(--hshell-paper) !important; text-decoration: none !important; } a.hshell-lp-col-title:hover { color: var(--hshell-accent) !important; } .hshell-lp-col-list { margin: 0; padding: 0; list-style: none; } .hshell-lp-col-list li { margin: 0; } .hshell-lp-col-list a { display: inline-block; padding: 6px 0; font: 450 15px/1.45 "Hanken Grotesk", sans-serif; color: rgba(244, 241, 236, 0.66) !important; text-decoration: none !important; transition: color 0.2s ease; } .hshell-lp-col-list a:hover { color: var(--hshell-paper) !important; } /* Colophon et méta légale. */ .hshell-lp-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px 28px; margin-top: clamp(48px, 6vw, 72px); padding: 26px 0; border-top: 1px solid rgba(244, 241, 236, 0.12); } .hshell-lp-colophon { margin: 0; font: 400 14px/1.6 "Hanken Grotesk", sans-serif; color: rgba(244, 241, 236, 0.55); max-width: 52ch; } .hshell-lp-meta { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding: 0; list-style: none; } .hshell-lp-meta li { margin: 0; } .hshell-lp-meta a, .hshell-lp-cookies { padding: 0; background: none; border: 0; font: 500 14px/1.6 "Hanken Grotesk", sans-serif; color: rgba(244, 241, 236, 0.66) !important; cursor: pointer; text-decoration: none !important; transition: color 0.2s ease; } .hshell-lp-meta a:hover, .hshell-lp-cookies:hover { color: var(--hshell-paper) !important; } /* La signature : le logotype en très grand, coupé par le bord bas. */ .hshell-lp-mark { height: clamp(84px, 16vw, 244px); margin-top: clamp(20px, 3vw, 40px); overflow: hidden; color: rgba(244, 241, 236, 0.1); } .hshell-lp-mark-svg { display: block; width: 102%; margin-left: -1%; height: auto; transform: translateY(30%); transition: transform 0.9s var(--hshell-ease); } .hshell-lp-mark.is-in .hshell-lp-mark-svg { transform: translateY(12%); } /* Le footer natif Divi ne doit jamais réapparaître, quel que soit le chemin de rendu (remplace l'ancien hack height:0 de style.css). */ #main-footer { display: none; } /* Un CSS hérité de l'ancienne barre (.ma-navbar, inliné par Asset CleanUp) pose body{padding-top:60px} dès 981px : le spacer du shell réserve déjà cette place, on annule le double décalage. */ @media (min-width: 981px) { body { padding-top: 0 !important; } } /* -------------------------------------------------------------------------- * Répartition desktop / mobile * ------------------------------------------------------------------------ */ @media (max-width: 980px) { .hshell-nav, .hshell-panel, .hshell-bar > .hshell-cta { display: none; } .hshell-burger { display: flex; margin-left: auto; } .hshell-bar { height: var(--hshell-h-m); } .hshell-spacer { height: 64px; } .hshell-logo-svg, .hshell.is-condensed .hshell-logo-svg { height: 24px; } .hshell.is-condensed { --hshell-h-m: 58px; } } @media (min-width: 981px) { .hshell-mobile { display: none; } } @media (max-width: 1024px) and (min-width: 981px) { .hshell-nav-list { gap: 2px; } .hshell-cta { padding: 12px 18px; } } @media (max-width: 1024px) { .hshell-lp-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .hshell-lp-plan { grid-template-columns: minmax(0, 1fr); gap: 36px; } .hshell-lp-line { flex-direction: column; align-items: flex-start; } .hshell-lp-link { flex-wrap: wrap; gap: 14px; } } /* -------------------------------------------------------------------------- * Mouvement réduit : tout arrive sans translation ni chorégraphie, la barre * ne se dérobe pas au défilement (géré aussi côté JS). * ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .hshell, .hshell *, .hshell::after, .hshell *::after, .hshell-lp-mark-svg, .hshell-lp-link::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; } .hshell.is-hidden { transform: none; } .hshell-panel, .hshell-mobile { transform: none; } .hshell-panel-col, .hshell-mobile-item, .hshell-mobile-foot { transform: none; } .hshell-lp-mark-svg { transform: translateY(12%); } }