/* ========================================================================== e-Medias Group — Design system Palette de marque : #02031F · #0A36F7 · #94F6FF · #F7FEFF Typographie : Manrope (variable, auto-hébergée) ========================================================================== */ /* ------------------------------------------------------------------ Fonts */ @font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-Variable.woff2') format('woff2-variations'); font-weight: 200 800; font-style: normal; font-display: swap; } /* ----------------------------------------------------------------- Tokens */ :root { --bg: #f7feff; --bg2: #ffffff; --ink: #02031f; --ink2: rgba(2, 3, 31, .58); --ink3: rgba(2, 3, 31, .38); --line: rgba(2, 3, 31, .09); --accent: #0a36f7; --accent-ink: #f7feff; --cyan: #94f6ff; --navy: #00072c; /* Bordure encrée (et non blanche) : le verre reste lisible sur fond clair. */ --glass: rgba(255, 255, 255, .58); --glass-brd: rgba(2, 3, 31, .12); --card: #ffffff; --shadow: 0 24px 80px -32px rgba(2, 3, 31, .18); --shadow-soft: 0 12px 40px -20px rgba(2, 3, 31, .16); --radius: 24px; --radius-lg: 32px; --container: 1440px; --gutter: 40px; --nav-h: 76px; --ease-out: cubic-bezier(.22, 1, .36, 1); } /* ------------------------------------------------------------------- Base */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } /* Transition de page (changement de langue / navigation) : voile doux au départ. Le header et l'UI fixe restent à l'écran (B4) : seul le contenu s'efface, comme si les pages défilaient sous une barre permanente. */ #emg-main, .emg-footer { transition: opacity .34s ease; } html.emg-page-leaving #emg-main, html.emg-page-leaving .emg-footer { opacity: 0; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--ink); } img { max-width: 100%; height: auto; display: block; } ::selection { background: #0a36f7; color: #f7feff; } h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; } p { margin: 0; } button { font-family: inherit; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .emg-skip-link { position: fixed; top: -80px; left: 24px; z-index: 300; padding: 12px 20px; border-radius: 99px; background: var(--ink); color: var(--bg); font-weight: 700; font-size: 14px; transition: top .25s ease; } .emg-skip-link:focus { top: 16px; color: var(--bg); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* -------------------------------------------------- Scrollbar personnalisée Barre native masquée sur desktop précis ; pouce en verre géré par JS. */ @media (hover: hover) and (pointer: fine) and (min-width: 1024px) { /* :not(.emg-motion-off) : si main.js ne démarre pas (filet du ), la barre native revient — la page ne reste jamais sans scrollbar. */ html.emg-custom-scroll:not(.emg-motion-off) { scrollbar-width: none; } html.emg-custom-scroll:not(.emg-motion-off) body::-webkit-scrollbar, html.emg-custom-scroll:not(.emg-motion-off)::-webkit-scrollbar { width: 0; height: 0; } } .emg-scrollbar { position: fixed; top: 0; right: 5px; bottom: 0; width: 6px; z-index: 240; pointer-events: none; opacity: 0; transition: opacity .4s ease; } .emg-scrollbar.is-visible { opacity: 1; } .emg-scrollbar-thumb { position: absolute; left: 0; right: 0; border-radius: 99px; background: color-mix(in srgb, var(--ink) 18%, transparent); border: 1px solid var(--glass-brd); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); pointer-events: auto; cursor: grab; transition: background .25s ease, width .25s ease; } .emg-scrollbar:hover { width: 10px; } .emg-scrollbar-thumb:hover, .emg-scrollbar-thumb.is-dragging { background: color-mix(in srgb, var(--ink) 34%, transparent); cursor: grabbing; } /* -------------------------------------------------------------- Structure */ .emg-container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .emg-section { padding: 110px 0 40px; } /* Une section qui prolonge directement la precedente : le plein souffle creusait un vide au milieu du propos. */ .emg-section.is-tight { padding-top: 44px; } /* Révélations au scroll : état initial appliqué seulement si JS actif. */ /* L'état masqué ne s'applique que tant que le reveal n'est pas joué : une fois .is-revealed posée, plus aucune règle ne peut faire "retomber" l'élément. */ html.js [data-reveal]:not(.is-revealed) { opacity: 0; transform: translateY(44px); will-change: opacity, transform; } html.js.emg-motion-off [data-reveal] { opacity: 1; transform: none; } /* Chips du hero : masquées dès le premier rendu, révélées en cascade par GSAP (le style inline posé par l'animation reprend la main). */ html.js [data-chip] { opacity: 0; } html.js.emg-motion-off [data-chip] { opacity: 1; } /* ---------------------------------------------------------------- Eyebrow */ .emg-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .28em; color: var(--ink2); text-transform: uppercase; } .emg-eyebrow-line { width: 24px; height: 1px; background: var(--accent); flex: none; } .emg-eyebrow.is-light { color: rgba(247, 254, 255, .65); } .emg-eyebrow.is-light .emg-eyebrow-line { background: var(--cyan); } .emg-eyebrow-flag { flex: none; border-radius: 30%; box-shadow: 0 1px 6px rgba(2, 3, 31, .28); } /* ------------------------------------------------------------------- Nuit Section a fond sombre. Depuis que le site n'a plus qu'une interface claire, ce sont ces sections qui portent le contraste : elles rythment la page au lieu d'un aplat blanc du haut en bas. Ce n'est PAS un theme, c'est une PORTEE : les tokens sont redefinis sur la section elle-meme, donc tous les composants du site (boutons, cartes, verre, filets, eyebrows) s'y peignent juste, sans une seule regle en plus. L'accent passe au bleu clair : le #0a36f7 de marque s'eteint sur la nuit, et c'est deja la valeur qu'avait retenue l'ancien theme sombre. Le fond est un degrade fixe, toujours present ; la nappe animee (canvas WebGL, injectee par main.js) vient se poser par-dessus quand elle peut. Si WebGL manque, si le mouvement est refuse ou si le canvas sort du champ, il ne reste que ce degrade, qui se tient tout seul. */ .emg-night { position: relative; isolation: isolate; --bg: #02031f; --bg2: #061651; --ink: #f7feff; --ink2: rgba(247, 254, 255, .62); --ink3: rgba(247, 254, 255, .38); --line: rgba(247, 254, 255, .12); --accent: #4d6dff; --accent-ink: #f7feff; --glass: rgba(6, 22, 81, .42); --glass-brd: rgba(148, 246, 255, .18); --card: rgba(247, 254, 255, .05); --shadow: 0 24px 80px -32px rgba(0, 0, 0, .55); --shadow-soft: 0 12px 40px -20px rgba(0, 0, 0, .45); background-color: #02031f; background-image: radial-gradient(58% 68% at 16% 20%, rgba(10, 54, 247, .40) 0%, rgba(10, 54, 247, 0) 62%), radial-gradient(52% 62% at 84% 32%, rgba(148, 246, 255, .13) 0%, rgba(148, 246, 255, 0) 60%), radial-gradient(80% 70% at 52% 98%, rgba(6, 22, 81, .85) 0%, rgba(2, 3, 31, 0) 72%); color: var(--ink); } /* Bords francs, assumes : au banc, un raccord fondu entre la nuit et le blanc donnait une bouillie grise sur une centaine de pixels. La coupe nette se tient mieux, et c'est elle qui fait le rythme. */ .emg-night-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.1s ease; /* z-index NEGATIF, et non un z-index 1 pose sur tous les enfants : cette seconde solution forcait `position: relative` sur des decors qui etaient en absolu (le filigrane EMGX, le logomark), les remettait dans le flux et faisait tripler la hauteur du hero des pages services. Ici la nappe se glisse entre le fond de la section et son contenu, et pas un seul enfant n'a besoin d'etre touche. `isolation: isolate` sur la section empeche ce -1 de passer derriere elle. */ z-index: -1; } .emg-night-canvas.is-on { opacity: 1; } /* Eyebrows et titres de section reprennent d'eux-memes le traitement clair : les pages n'ont pas a passer un drapeau de plus a emg_eyebrow(). */ .emg-night .emg-eyebrow { color: rgba(247, 254, 255, .62); } .emg-night .emg-eyebrow-line { background: var(--cyan); } /* Le bouton encre devient blanc sur nuit, sans quoi il disparait. */ .emg-night .emg-btn.is-ink { background: #f7feff; color: #02031f; } .emg-night .emg-btn.is-ink:hover { background: var(--cyan); color: #02031f; } .emg-night .emg-btn.is-glass { border-color: rgba(247, 254, 255, .28); color: #f7feff; } /* Encart newsletter du pied de page : EXACTEMENT la matiere des capsules du rail lateral (demande Loris) — meme verre clair, meme flou, meme filet, meme arete interieure. C'est ce qui donne le meilleur contraste sur la nuit du pied de page, et cela evite d'inventer une troisieme matiere de verre. Le contenu repasse donc a l'encre sombre : les tokens du site sont restaures sur l'encart, comme .emg-night les inverse sur une section. */ .emg-night .emg-newsletter { --ink: #02031f; --ink2: rgba(2, 3, 31, .58); --ink3: rgba(2, 3, 31, .38); --line: rgba(2, 3, 31, .09); --bg: #f7feff; --accent: #0a36f7; --accent-ink: #f7feff; color: var(--ink); background: rgba(255, 255, 255, .72); border: 1px solid rgba(2, 3, 31, .10); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); box-shadow: inset 0 1px 0 0 color-mix(in srgb, #fff 28%, transparent), 0 10px 28px -14px rgba(2, 3, 31, .2); } /* Le champ suit la meme logique : blanc franc dans le verre, filet encre. (Le bouton d'inscription reprend le bleu d'accent : sur un panneau clair, un bouton blanc n'existe plus. Il etait blanc tant que l'encart etait sombre.) */ .emg-night .emg-newsletter-form input[type="email"] { background: rgba(255, 255, 255, .74); border-color: rgba(2, 3, 31, .14); color: var(--ink); } .emg-night .emg-newsletter-form input[type="email"]::placeholder { color: rgba(2, 3, 31, .45); } .emg-night .emg-newsletter-form input[type="email"]:focus { border-color: var(--accent); } /* RACCORD. Une bande sombre qui s'arrete net sur du blanc, c'est un bord brut. Le filet degrade accent -> cyan en fait un trait DESSINE — c'est deja l'idiome du haut de pied de page, il vaut pour toutes les bandes. */ .emg-night::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 2; pointer-events: none; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, #4d6dff 60%, transparent) 30%, color-mix(in srgb, var(--cyan) 62%, transparent) 70%, transparent 100%); } /* Le pied de page pose deja le sien en ::before, en haut. */ .emg-footer.emg-night::after { content: none; } /* RESPIRATION. Le contenu clair qui suit une bande sombre demarrait a 110 px du raccord, soit moins que l'interligne d'un titre : il paraissait colle au bord. Une section qui succede a la nuit prend un demi-ecran de plus. */ .emg-night + .emg-section, .emg-night + section { padding-top: clamp(62px, 6vw, 92px); } /* Apres la zone sombre de la page web, davantage : la premiere carte de la methode est elle-meme bleu nuit, et collee au bas de la nuit elle donnait l'impression que les deux sections se chevauchaient. */ /* La section claire qui suit la nuit prend un vrai palier : on sort d'une sequence de plusieurs ecrans, il lui faut de quoi respirer avant de reprendre la parole. Rallonge du 2026-08-25 (retour Marino) : c'est aussi la piste d'elan avant l'empilement des cartes de la methode — trop courte, la deuxieme carte recouvrait la premiere a peine la section decouverte. */ .emg-webdark + .emg-section { padding-top: clamp(150px, 22vh, 270px); } /* Et ce qui OUVRE cette section perd sa marge haute. Les grilles du site en portent une de 64 px, prevue pour se detacher du titre de section : quand il n'y a pas de titre, elle ne fait qu'ajouter du vide a celui que la section menage deja. */ .emg-night + .emg-section > .emg-container > :first-child, .emg-night + section > .emg-container > :first-child { margin-top: 0; } /* ---------------------------------------------------------------- Boutons */ .emg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; font-weight: 700; padding: 16px 30px; border-radius: 99px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .25s var(--ease-out), box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease; } .emg-btn:hover { transform: translateY(-2px); } .emg-btn:active { transform: translateY(0); } .emg-btn.is-accent { background: var(--accent); color: var(--accent-ink); box-shadow: 0 16px 40px -14px rgba(10, 54, 247, .55); } .emg-btn.is-accent:hover { color: var(--accent-ink); } .emg-btn.is-ink { background: var(--ink); color: var(--bg); } .emg-btn.is-ink:hover { color: var(--bg); } .emg-btn.is-glass { background: var(--glass); color: var(--ink); border-color: var(--line); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); } .emg-btn.is-glass:hover { color: var(--ink); } .emg-btn.is-white { background: #f7feff; color: #02031f; } .emg-btn.is-white:hover { color: #02031f; } .emg-btn.is-glass-dark { background: rgba(255, 255, 255, .1); color: #f7feff; border-color: rgba(247, 254, 255, .35); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); } .emg-btn.is-glass-dark:hover { color: #f7feff; } .emg-btn.is-outline { border-color: var(--line); color: var(--ink); background: transparent; } .emg-btn.is-outline:hover { border-color: var(--accent); color: var(--accent); } .emg-btn-row { display: flex; gap: 14px; flex-wrap: wrap; } .emg-btn[disabled] { opacity: .6; pointer-events: none; } /* ------------------------------------------------------------------- Logo */ .emg-logo-lockup { display: flex; align-items: center; gap: 13px; color: inherit; } .emg-logomark { display: inline-block; flex: none; background: currentColor; -webkit-mask: url('../img/logomark.svg') center / contain no-repeat; mask: url('../img/logomark.svg') center / contain no-repeat; transition: transform .35s var(--ease-out); } a:hover .emg-logomark { transform: translateY(-2px); } .emg-logo-sep { width: 1px; height: 26px; background: var(--line); } /* Le pied de page portait un logo reduit ; Loris l'a voulu plus visible (2026-08-30). Il prend simplement la taille de celui du header : deux tailles pour un meme bloc n'apportaient rien. */ /* Logotype : le dessin du kit de marque (EMG_Logotype-Ext), pose en MASQUE comme le logomark juste au-dessus. Le fichier copie est la version noire, mais sa couleur ne sert a rien : un masque ne lit que l'opacite, et c'est currentColor qui peint. Une seule declinaison suffit donc pour le header blanc, le header en surimpression et le pied de page. Taille : le bloc de texte remplace mesurait 84.2 px de large, le logotype y tenait a 26 px de haut. Loris l'a voulu « un tout petit peu » plus grand (2026-08-30) : 28 px, soit 90 px de large. 3.2161 pour 1, c'est le rapport du viewBox — la boite le suit, sinon le dessin flotte dedans. */ .emg-logotype { display: inline-block; flex: none; width: 90px; height: 28px; background: currentColor; -webkit-mask: url('../img/logotype.svg') center / contain no-repeat; mask: url('../img/logotype.svg') center / contain no-repeat; } /* ---------------------------------------------------------------- Header */ .emg-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background .45s ease, border-color .45s ease, backdrop-filter .45s ease; border-bottom: 1px solid transparent; } .emg-header.is-scrolled { background: color-mix(in srgb, var(--bg) 74%, transparent); backdrop-filter: blur(26px) saturate(1.7); -webkit-backdrop-filter: blur(26px) saturate(1.7); border-bottom-color: var(--line); box-shadow: 0 14px 44px -24px rgba(2, 3, 31, .3); } /* Mode "au-dessus du hero sombre" : tout passe en clair. */ .emg-header.is-over { --ink: #f7feff; --ink2: rgba(247, 254, 255, .65); --ink3: rgba(247, 254, 255, .4); --bg: #02031f; --line: rgba(247, 254, 255, .15); --glass: rgba(255, 255, 255, .1); --glass-brd: rgba(255, 255, 255, .28); color: #f7feff; } .emg-header-inner { max-width: var(--container); margin: 0 auto; padding: 14px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--nav-h); } .emg-header-brand { color: var(--ink); transition: opacity .25s ease; } .emg-header-brand:hover { opacity: .78; color: var(--ink); } .emg-nav { display: flex; align-items: center; gap: 34px; white-space: nowrap; } .emg-nav-item { position: relative; display: flex; align-items: flex-start; gap: 5px; color: var(--ink); transition: color .25s ease, transform .25s ease; padding: 6px 0; } .emg-nav-item:hover { color: var(--accent); transform: translateY(-1px); } .emg-nav-item.is-active { color: var(--accent); } .emg-nav-num { font-size: 9px; font-weight: 300; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.7; } .emg-header.is-over .emg-nav-num { color: var(--cyan); } .emg-nav-label { font-size: 14.5px; font-weight: 700; letter-spacing: .02em; } /* Méga menu Services (panneau glass : 5 prestations détaillées + visuel) */ .emg-nav-drop { position: relative; } .emg-nav-panel { /* .emg-nav est en nowrap : on rétablit le retour à la ligne pour la tagline du panneau. Fixe et centré sur la page, sous la barre — pas ancré à gauche sous l'entrée Services. */ white-space: normal; position: fixed; top: calc(var(--nav-h) + 10px); left: 50%; transform: translateX(-50%) translateY(14px) scale(.98); transform-origin: top center; width: min(960px, calc(100vw - 48px)); padding: 16px; border-radius: 26px; background: color-mix(in srgb, var(--bg) 93%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line)); backdrop-filter: blur(30px) saturate(1.7); -webkit-backdrop-filter: blur(30px) saturate(1.7); box-shadow: inset 0 1px 0 0 color-mix(in srgb, #fff 28%, transparent), 0 42px 110px -28px rgba(2, 3, 31, .5), 0 18px 44px -18px rgba(2, 3, 31, .35); opacity: 0; visibility: hidden; transition: opacity .32s var(--ease-out), transform .32s var(--ease-out), visibility 0s .32s; } /* Le panneau reste CLAIR même quand la barre est en mode « au-dessus du hero sombre » (demande Loris). C'est une surface posée SUR la page, pas un morceau de la barre : il n'a pas à suivre son inversion. Les tokens y reprennent les valeurs du site, donc tout son contenu — items, icônes, numéros, encart de droite — se repeint juste, sans une règle de plus. */ .emg-header.is-over .emg-nav-panel { --ink: #02031f; --ink2: rgba(2, 3, 31, .58); --ink3: rgba(2, 3, 31, .38); --bg: #f7feff; --bg2: #ffffff; --line: rgba(2, 3, 31, .09); --glass: rgba(255, 255, 255, .58); --glass-brd: rgba(2, 3, 31, .12); --card: #ffffff; --accent: #0a36f7; --accent-ink: #f7feff; color: var(--ink); } .emg-header.is-over .emg-nav-panel .emg-nav-num { color: var(--accent); } /* Pont invisible : l'écart avec la barre ne referme pas le menu au survol. */ .emg-nav-panel::after { content: ''; position: absolute; left: 0; right: 0; top: -26px; height: 26px; } .emg-nav-drop:hover .emg-nav-panel, .emg-nav-drop:focus-within .emg-nav-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) scale(1); transition: opacity .32s var(--ease-out), transform .32s var(--ease-out); } /* Entrée en cascade discrète du contenu du panneau. */ .emg-nav-panel .emg-mega-item, .emg-nav-panel .emg-mega-aside { opacity: 0; transform: translateY(7px); transition: opacity .3s ease, transform .3s var(--ease-out), background .2s ease; } .emg-nav-drop:hover .emg-mega-item, .emg-nav-drop:focus-within .emg-mega-item, .emg-nav-drop:hover .emg-mega-aside, .emg-nav-drop:focus-within .emg-mega-aside { opacity: 1; transform: none; } .emg-nav-drop:hover .emg-mega-item:nth-child(2) { transition-delay: .04s; } .emg-nav-drop:hover .emg-mega-item:nth-child(3) { transition-delay: .08s; } .emg-nav-drop:hover .emg-mega-item:nth-child(4) { transition-delay: .12s; } .emg-nav-drop:hover .emg-mega-item:nth-child(5) { transition-delay: .16s; } .emg-nav-drop:hover .emg-mega-aside { transition-delay: .1s; } .emg-mega-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; } .emg-mega-list { display: flex; flex-direction: column; } /* Huit outils : deux colonnes, pour que le panneau garde la hauteur des autres. Sans cela le menu Outils serait deux fois plus haut que Services. */ .emg-mega-list.is-two { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; align-content: start; } .emg-mega-list.is-two .emg-mega-item { padding: 10px 12px; } /* Pastille d'icône, même gabarit que le numéro qu'elle remplace. */ .emg-mega-ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); transition: background .25s ease, transform .25s var(--ease-out); } .emg-mega-ico svg { width: 17px; height: 17px; } .emg-mega-item:hover .emg-mega-ico { background: color-mix(in srgb, var(--accent) 18%, transparent); transform: scale(1.06); } /* Tous les panneaux tiennent exactement la même hauteur : cinq entrées partout, et un plancher commun qui rattrape la grille d'outils (plus compacte car sur deux colonnes). */ .emg-mega-grid { height: 348px; } .emg-mega-list.is-two { align-content: center; } .emg-mega-list { justify-content: center; } .emg-mega-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px; border-radius: 14px; color: var(--ink); transition: background .2s ease; } .emg-mega-item .emg-nav-num { line-height: 2; } .emg-mega-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .emg-mega-name { font-size: 16px; font-weight: 700; letter-spacing: -.015em; transition: color .2s ease; } /* Une seule ligne : le panneau est calibré pour, l'ellipse n'est qu'un filet. */ .emg-mega-desc { font-size: 12.5px; line-height: 1.5; color: var(--ink2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .emg-mega-go { margin-left: auto; align-self: center; color: var(--accent); opacity: 0; transform: translateX(-5px); transition: opacity .25s ease, transform .25s var(--ease-out); } .emg-mega-item:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } .emg-mega-item:hover .emg-mega-name { color: var(--accent); } .emg-mega-item:hover .emg-mega-go { opacity: 1; transform: none; } .emg-mega-aside { position: relative; display: block; overflow: hidden; border-radius: 18px; min-height: 320px; background: var(--navy-2, #061651); isolation: isolate; } /* Image en background (et non ) : contenue par construction, impossible qu'elle déborde du panneau. */ .emg-mega-aside-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: 62% 38%; transform: scale(1.01); transition: transform .7s var(--ease-out); } .emg-mega-aside:hover .emg-mega-aside-bg { transform: scale(1.07); } /* Voile appuyé : le visuel de fond est clair par endroits et le titre blanc s'y perdait. Le dégradé démarre plus tôt et finit plus dense. */ .emg-mega-aside-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(2, 3, 31, .2) 0%, rgba(2, 3, 31, .62) 46%, rgba(2, 3, 31, .93) 100%); } /* Ancré en absolu : sa largeur est exactement celle de l'encart, le texte revient donc toujours à la ligne au lieu d'être rogné. */ .emg-mega-aside-body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 10px; padding: 20px; } /* Titre de l'encart : c'est lui qui annonce où mène le panneau. */ .emg-mega-aside-title { font-size: 25px; font-weight: 700; letter-spacing: -.025em; line-height: 1.12; color: #fff; text-wrap: balance; } .emg-mega-aside-text { font-size: 12.5px; line-height: 1.5; font-weight: 500; color: rgba(247, 254, 255, .85); } .emg-mega-aside-cta { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--cyan); } .emg-mega-aside-cta .emg-arrow { transition: transform .25s var(--ease-out); } .emg-mega-aside:hover .emg-mega-aside-cta .emg-arrow { transform: translateX(3px); } .emg-header-tools { display: flex; align-items: center; gap: 14px; } /* Sélecteur de langue */ .emg-lang { display: flex; gap: 2px; padding: 4px; border-radius: 99px; background: var(--glass); border: 1px solid var(--glass-brd); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); } .emg-lang-item { font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 5px 9px; border-radius: 99px; color: var(--ink2); transition: background .3s ease, color .3s ease; } .emg-lang-item:hover { color: var(--ink); } .emg-lang-item.is-active { background: var(--ink); color: var(--bg); font-weight: 800; } .emg-lang-item.is-active:hover { color: var(--bg); } /* Choix de langue compact (telephone). Un seul bouton qui porte la langue en cours, et un panneau qui s'ouvre au toucher : la pastille FR DE IT EN du bureau prend la place de trois boutons pour une action qu'on fait une fois. */ .emg-langpop { position: relative; display: none; } .emg-langpop-btn { font-size: 12px; font-weight: 800; letter-spacing: .04em; font-family: inherit; } .emg-langpop-menu { /* Le header inverse ses jetons au-dessus d'un hero sombre. Ce panneau, lui, est TOUJOURS clair : il redeclare sa propre portee, sinon son texte devient blanc sur blanc en haut de page. Meme piege que les mega-menus. */ --ink: #02031f; --ink2: rgba(2, 3, 31, .58); --ink3: rgba(2, 3, 31, .38); --line: rgba(2, 3, 31, .09); color: var(--ink); position: absolute; top: calc(100% + 10px); right: 0; z-index: 20; min-width: 168px; padding: 6px; border-radius: 18px; background: var(--bg2, #fff); border: 1px solid var(--line); box-shadow: 0 24px 60px -22px rgba(2, 3, 31, .38); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97); transform-origin: top right; transition: opacity .22s ease, transform .28s var(--ease-out), visibility 0s .28s; } .emg-langpop.is-open .emg-langpop-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .28s var(--ease-out); } .emg-langpop-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 13px; font-size: 14px; font-weight: 600; color: var(--ink); } .emg-langpop-item.is-active { background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent); } .emg-langpop-code { flex: none; width: 26px; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--ink3); } .emg-langpop-item.is-active .emg-langpop-code { color: var(--accent); } /* Boutons ronds du header : recherche et thème, même capsule de verre. */ /* Meme gabarit que le burger : a 36 contre 40, la difference se lisait comme un defaut d'alignement vertical alors que c'etait un defaut de taille. Les deux capsules font desormais la meme hauteur. */ .emg-icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 99px; border: 1px solid var(--glass-brd); background: var(--glass); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); cursor: pointer; color: var(--ink); transition: transform .25s var(--ease-out), color .25s ease, border-color .25s ease; } /* La loupe grossit légèrement au survol. */ .emg-search-btn:hover { transform: translateY(-1px) scale(1.06); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 32%, var(--glass-brd)); } /* Burger (mobile) */ .emg-burger { display: none; width: 40px; height: 40px; border: 1px solid var(--glass-brd); border-radius: 99px; background: var(--glass); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); cursor: pointer; place-items: center; color: var(--ink); } .emg-burger span { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; position: relative; transition: transform .3s var(--ease-out), background .3s ease; } .emg-burger span::before, .emg-burger span::after { content: ''; position: absolute; left: 0; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease-out), top .3s ease; } .emg-burger span::before { top: -5px; } .emg-burger span::after { top: 5px; } body.emg-menu-open .emg-burger span { background: transparent; } body.emg-menu-open .emg-burger span::before { top: 0; transform: rotate(45deg); } body.emg-menu-open .emg-burger span::after { top: 0; transform: rotate(-45deg); } /* Menu mobile plein écran */ .emg-mobile-menu { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 18px) var(--gutter) 26px; overflow-y: auto; /* Empêche le défilement de remonter jusqu'à la page derrière une fois le haut ou le bas du panneau atteint (rebond fantôme sur iOS). */ overscroll-behavior: contain; /* Opaque, et non un voile : le contenu de la page transparaissait derriere les entrees et les rendait sales. */ background: var(--bg); opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s; } body.emg-menu-open .emg-mobile-menu { opacity: 1; visibility: visible; transition: opacity .4s ease; } /* margin auto plutot que justify-content: center : centre quand le menu est court, et laisse defiler sans rogner le haut quand un deplie le rend plus grand que l'ecran. */ .emg-mobile-nav { display: flex; flex-direction: column; gap: 0; margin: auto 0; width: 100%; } /* Corps reduit d'un tiers : avec deux deplies au lieu d'un, l'ancienne echelle poussait les premieres entrees sous la barre du header. */ .emg-mobile-nav > a, .emg-mobile-row > a { display: flex; align-items: center; gap: 14px; font-size: clamp(21px, 5.6vw, 27px); font-weight: 800; letter-spacing: -.03em; color: var(--ink); padding: 13px 0; transition: color .25s ease; } .emg-mobile-nav > a:hover, .emg-mobile-row > a:hover { color: var(--accent); } /* Une reglure sous chaque entree : la liste se lit comme un sommaire, et chaque ligne devient une cible franche. */ .emg-mobile-nav > a, .emg-mobile-nav > .emg-mobile-group { border-bottom: 1px solid var(--line); } .emg-mobile-nav > :last-child { border-bottom: 0; } .emg-mobile-label { flex: 1 1 auto; min-width: 0; } /* Toutes les entrees portent une affordance a droite : une fleche pour les liens, un chevron pour les deplies. Sans cela, seules deux lignes sur six avaient l'air cliquables. */ .emg-mobile-go { flex: none; display: grid; place-items: center; width: 30px; height: 30px; color: var(--ink3); transition: transform .3s var(--ease-out), color .25s ease; } .emg-mobile-nav > a:hover .emg-mobile-go { color: var(--accent); transform: translateX(3px); } /* Page courante : le bleu et un point, pour se reperer sans lire. */ .emg-mobile-link.is-current { color: var(--accent); } .emg-mobile-link.is-current .emg-nav-num { color: var(--accent); } /* La cascade d'entrée porte sur les ENFANTS DIRECTS de la nav : le groupe « Services » (sa ligne et son dépliant) compte pour UN, sinon le dépliant hériterait d'une opacité et d'un délai qui ne le concernent pas. */ .emg-mobile-nav > a, .emg-mobile-nav > .emg-mobile-group { opacity: 0; transform: translateY(18px); } body.emg-menu-open .emg-mobile-nav > a, body.emg-menu-open .emg-mobile-nav > .emg-mobile-group { animation: emg-menu-item .55s var(--ease-out) forwards; } body.emg-menu-open .emg-mobile-nav > :nth-child(1) { animation-delay: .08s; } body.emg-menu-open .emg-mobile-nav > :nth-child(2) { animation-delay: .14s; } body.emg-menu-open .emg-mobile-nav > :nth-child(3) { animation-delay: .2s; } body.emg-menu-open .emg-mobile-nav > :nth-child(4) { animation-delay: .26s; } body.emg-menu-open .emg-mobile-nav > :nth-child(5) { animation-delay: .32s; } body.emg-menu-open .emg-mobile-nav > :nth-child(6) { animation-delay: .38s; } @keyframes emg-menu-item { to { opacity: 1; transform: translateY(0); } } /* display: block explicite : une regle globale masque .emg-nav-num sous 1160 px pour degager la barre du bureau, et elle emportait aussi les numeros du menu mobile. Deux classes suffisent a la battre. */ .emg-mobile-nav .emg-nav-num { display: block; font-size: 11px; flex: none; width: 20px; color: var(--ink3); } /* Les sous-entrees, elles, restent nues : le filet d'accent et le retrait disent deja qu'elles dependent de la ligne du dessus. */ .emg-mobile-sub .emg-nav-num { display: none; } /* ---- dépliant des services (menu plein écran) ---- */ .emg-mobile-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .emg-mobile-row > a { flex: 1 1 auto; min-width: 0; } .emg-mobile-chev { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .42s var(--ease-out), background .25s ease, border-color .25s ease, color .25s ease; } .emg-mobile-chev:hover { border-color: var(--accent); color: var(--accent); } .emg-mobile-chev[aria-expanded="true"] { transform: rotate(180deg); background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .emg-mobile-chev svg { display: block; } /* 0fr -> 1fr : la seule façon d'animer vers la hauteur RÉELLE du contenu, sans plafond deviné (un max-height trop large donne une fin de course molle). Là où la grille ne s'anime pas, la bascule reste instantanée — jamais cassée. */ .emg-mobile-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--ease-out); } .emg-mobile-sub.is-open { grid-template-rows: 1fr; } .emg-mobile-sub-in { overflow: hidden; } .emg-mobile-sub a { display: flex; align-items: center; gap: 12px; padding: 9px 0 9px 20px; margin-left: 4px; border-left: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); font-size: clamp(14px, 3.9vw, 17px); font-weight: 700; letter-spacing: -.02em; color: var(--ink2); opacity: 0; transform: translateY(8px); transition: color .25s ease, opacity .38s var(--ease-out), transform .38s var(--ease-out); } .emg-mobile-sub a:hover { color: var(--accent); } .emg-mobile-sub.is-open a { opacity: 1; transform: none; } .emg-mobile-sub.is-open a:nth-child(1) { transition-delay: .05s; } .emg-mobile-sub.is-open a:nth-child(2) { transition-delay: .1s; } .emg-mobile-sub.is-open a:nth-child(3) { transition-delay: .15s; } .emg-mobile-sub.is-open a:nth-child(4) { transition-delay: .2s; } .emg-mobile-sub.is-open a:nth-child(5) { transition-delay: .25s; } @media (prefers-reduced-motion: reduce) { .emg-mobile-sub, .emg-mobile-sub a, .emg-mobile-chev { transition: none; } } .emg-mobile-menu-foot { margin-top: 24px; } /* La recherche prend toute la largeur : elle est descendue du header, ou un rond de 40 px la coincait entre deux autres boutons. */ .emg-mobile-search { display: flex; align-items: center; gap: 11px; width: 100%; padding: 15px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--ink2); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: border-color .25s ease, color .25s ease; } .emg-mobile-search:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); color: var(--ink); } .emg-mobile-search-ico { display: grid; place-items: center; flex: none; color: var(--accent); } body.emg-menu-open { overflow: hidden; } /* ------------------------------------------------------------- Solutions */ /* Les systèmes déjà construits (à distinguer des pôles de service, qui sont des capacités). Tout reprend les composants existants — cartes, grille de fonctions, liste des inclus — pour ne pas inventer un troisième langage. Ne sont définis ici que les blocs qui n'existaient pas : la preuve, le modèle, le renvoi depuis les fiches et l'encart de menu en liste. */ /* ---- la preuve : les déploiements réels, juste sous le titre ---- */ .emg-sol-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: 40px; } .emg-sol-case { display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 3vw, 34px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-soft); transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .35s ease; } .emg-sol-case:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); color: var(--ink); } /* Deploiement sans fiche : la carte n'est pas un lien, elle ne doit donc pas se comporter comme tel. Elle garde son cadre — c'est bien une preuve — mais ne se souleve pas au survol, ce qui promettrait un clic qui n'existe pas. */ .emg-sol-case.is-plain, .emg-sol-case.is-plain:hover { transform: none; box-shadow: var(--shadow-soft); border-color: var(--line); } .emg-sol-case-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); } .emg-sol-case h3 { margin: 0; font-size: clamp(19px, 2vw, 24px); font-weight: 800; letter-spacing: -.02em; } .emg-sol-case p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink2); } .emg-sol-case-go { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 700; color: var(--accent); } .emg-sol-case:hover .emg-sol-case-go svg { transform: translateX(4px); } .emg-sol-case-go svg { transition: transform .3s var(--ease-out); } /* ---- le modèle : une seule colonne de texte, volontairement étroite ---- */ .emg-sol-model-body { max-width: 68ch; margin-top: 28px; } .emg-sol-model-body p { margin: 0; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.75; color: var(--ink2); } .emg-sol-model-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); padding-bottom: 2px; } .emg-sol-model-link:hover { border-bottom-color: var(--accent); } /* ---- hub : la preuve tient sur la carte, c'est elle qui fait la différence ---- */ .emg-hub-proof { display: block; margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--ink3); } /* Le renvoi vers le sur-mesure est devenu la derniere tuile de la grille (voir page-solutions.php) : la note sous la grille n'existe plus. */ /* ---- renvoi depuis une fiche réalisation vers la solution qu'elle prouve ---- */ .emg-sol-back-panel { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: clamp(24px, 3vw, 34px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); } .emg-sol-back-panel p { margin: 0; max-width: 56ch; font-size: 15px; line-height: 1.65; color: var(--ink2); } .emg-sol-back-links { display: flex; flex-wrap: wrap; gap: 10px 22px; } .emg-sol-back-links a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none; } .emg-sol-back-links a:hover svg { transform: translateX(4px); } .emg-sol-back-links svg { transition: transform .3s var(--ease-out); } /* --------------------------------------------------------------- Loader */ /* Écran de chargement de l'accueil (template-parts/loader.php). Le logomark se dessine, puis la nuit se retire en lames diagonales — même axe bas-gauche vers haut-droite que les flares de la vidéo du hero et que le reflet des chips. Tout est en animations CSS, sans une ligne de JS : si le script n'arrive jamais, l'écran s'efface quand même. La seule chose que le JS fait, c'est décider de l'afficher (dans l'amorce de ) et lever le verrou de défilement à la fin. */ .emg-loader { display: none; } html.emg-loading { overflow: hidden; } html.emg-loading .emg-loader { display: block; position: fixed; inset: 0; z-index: 9999; pointer-events: none; } /* Les lames : un conteneur tourné à -45deg, six bandes horizontales dedans. Tournées, elles lisent « / ». Chacune sort en glissant le long de sa PROPRE longueur — le conteneur déborde largement pour qu'aucune extrémité n'entre jamais dans le cadre. Sens alternés : l'écran se déchire au lieu de s'ouvrir sagement. */ .emg-loader-slats { position: absolute; inset: -60%; transform: rotate(-45deg); display: flex; flex-direction: column; } .emg-loader-slats span { flex: 1 1 0; background: #02031f; /* Les hauteurs fractionnaires laissent des joints d'un sous-pixel entre les lames : l'ombre les recouvre sans toucher a la mise en page. */ box-shadow: 0 0 0 1px #02031f; will-change: transform; animation: emg-loader-slat-a .62s cubic-bezier(.7, 0, .2, 1) forwards; animation-delay: 1.02s; } .emg-loader-slats span:nth-child(even) { animation-name: emg-loader-slat-b; } .emg-loader-slats span:nth-child(2) { animation-delay: 1.07s; } .emg-loader-slats span:nth-child(3) { animation-delay: 1.12s; } .emg-loader-slats span:nth-child(4) { animation-delay: 1.17s; } .emg-loader-slats span:nth-child(5) { animation-delay: 1.22s; } .emg-loader-slats span:nth-child(6) { animation-delay: 1.27s; } @keyframes emg-loader-slat-a { to { transform: translate3d(102%, 0, 0); } } @keyframes emg-loader-slat-b { to { transform: translate3d(-102%, 0, 0); } } /* Le logomark : les deux tracés se dessinent, le remplissage vient ensuite, puis le tout s'efface juste avant que les lames ne partent — sinon il se ferait couper en deux par l'ouverture. */ .emg-loader-mark { position: absolute; top: 50%; left: 50%; width: auto; height: clamp(130px, 26vh, 260px); transform: translate(-50%, -50%); overflow: visible; animation: emg-loader-mark-out .3s ease-in forwards; animation-delay: .92s; } .emg-loader-mark path { fill: #f7feff; fill-opacity: 0; stroke: #94f6ff; stroke-width: 26; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: emg-loader-draw .74s cubic-bezier(.65, 0, .35, 1) forwards, emg-loader-fill .26s ease-out forwards .62s; } .emg-loader-mark path:nth-child(2) { animation-delay: .12s, .74s; } @keyframes emg-loader-draw { to { stroke-dashoffset: 0; } } @keyframes emg-loader-fill { to { fill-opacity: 1; stroke-opacity: .25; } } @keyframes emg-loader-mark-out { to { opacity: 0; transform: translate(-50%, -50%) scale(1.12); } } /* Mouvement réduit : l'amorce de ne pose alors jamais la classe, donc l'écran n'existe pas. Ce garde-fou couvre le cas où la préférence change après le chargement. */ @media (prefers-reduced-motion: reduce) { html.emg-loading { overflow: auto; } html.emg-loading .emg-loader { display: none; } } /* ------------------------------------------------------------------- Hero */ .emg-hero { position: relative; min-height: max(100vh, 680px); overflow: hidden; background: #02031f; display: flex; color: #f7feff; } .emg-hero-img { position: absolute; inset: -4% 0; width: 100%; height: 108%; object-fit: cover; } /* Même géométrie que l'image, au pixel près : la vidéo se substitue à elle en fondu, sans le moindre décalage. Elle reste invisible tant qu'elle ne joue pas — si l'autoplay est refusé, rien ne change à l'écran. */ .emg-hero-video { position: absolute; inset: -4% 0; width: 100%; height: 108%; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity 1.1s var(--ease-out); } .emg-hero-video.is-on { opacity: 1; } .emg-hero-grad-1 { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 3, 31, .5) 0%, rgba(2, 3, 31, .08) 34%, rgba(2, 3, 31, .16) 62%, rgba(2, 3, 31, .72) 100%); } .emg-hero-grad-2 { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(2, 3, 31, .55) 0%, rgba(2, 3, 31, 0) 55%); } /* Le voile ne se renforce QUE si la vidéo tourne : une image fixe se lit sous un voile léger, une image qui bouge attire l'oeil et concurrence le texte. Plus dense à gauche, là où vivent le titre et les boutons. */ .emg-hero.has-video .emg-hero-grad-1 { background: linear-gradient(180deg, rgba(2, 3, 31, .58) 0%, rgba(2, 3, 31, .20) 34%, rgba(2, 3, 31, .32) 62%, rgba(2, 3, 31, .82) 100%); } /* Deux couches, et la radiale d'abord : le texte du hero vit en BAS À GAUCHE, pas sur toute la colonne de gauche. Une simple rampe latérale assombrissait donc aussi le haut, ou laissait le titre clair — celle-ci vise le coin. La lumière du logomark, elle, reste intacte en haut à droite. */ .emg-hero.has-video .emg-hero-grad-2 { background: radial-gradient(125% 95% at 0% 100%, rgba(2, 3, 31, .88) 0%, rgba(2, 3, 31, .52) 34%, rgba(2, 3, 31, .16) 58%, rgba(2, 3, 31, 0) 76%), linear-gradient(100deg, rgba(2, 3, 31, .70) 0%, rgba(2, 3, 31, .28) 40%, rgba(2, 3, 31, 0) 70%); } .emg-hero-inner { position: relative; max-width: var(--container); margin: 0 auto; width: 100%; padding: 130px var(--gutter) 0; display: flex; flex-direction: column; justify-content: flex-end; } .emg-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; padding-bottom: clamp(48px, 7vh, 88px); flex-wrap: wrap; } .emg-hero-main { max-width: 900px; } /* 23ch : la plus longue déclinaison du titre (IT) tient sur 2 lignes équilibrées. Pas de text-shadow : il donnait l'impression d'un fond sombre derrière le texte. */ .emg-hero-title { font-size: clamp(40px, 4.9vw, 78px); line-height: 1.1; letter-spacing: -.04em; margin: 26px 0 0; max-width: 23ch; text-wrap: balance; } .emg-hero-sub { font-size: 18px; font-weight: 400; line-height: 1.6; color: rgba(247, 254, 255, .78); max-width: 52ch; margin: 26px 0 0; } .emg-hero .emg-btn-row { margin-top: 36px; } /* « Agence web & mobile » est plus court que l'ancien libellé : on peut se permettre un cran de plus sur l'eyebrow du hero (12px partout ailleurs). */ .emg-hero .emg-eyebrow { font-size: 13px; } /* Mini bento : stat + avis côte à côte, bandeau pleine largeur dessous. Pas de flottement par cellule (il désalignerait la grille) : la vie vient du parallax souris, des reflets et de l'orbe. */ .emg-hero-chips { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; width: min(390px, 100%); align-self: flex-end; padding-bottom: 6px; } .emg-chip.is-stat { grid-column: 1; grid-row: 1; min-width: 0; } .emg-chip.is-rating { grid-column: 2; grid-row: 1; } .emg-chip.is-since { grid-column: 1 / -1; grid-row: 2; justify-content: center; } /* Reflet qui balaie périodiquement les chips — le verre "travaille". Il se DÉPLACE du haut-droite vers le bas-gauche. Une barre lumineuse se déplace toujours perpendiculairement à elle-même (le long de son propre axe, elle glisserait sans que rien ne bouge) : elle est donc orientée « \ », et un dégradé à 45° donne exactement cette orientation, ses bandes étant perpendiculaires à son axe. La translation suit ce même axe — seul son SENS a été inversé (demande Loris), pas l'orientation de la barre. Le voile déborde largement (inset -100%) pour que la barre traverse entièrement la chip sans jamais laisser voir son extrémité. */ .emg-chip { position: relative; overflow: hidden; } .emg-chip::after { content: ''; position: absolute; inset: -100%; background: linear-gradient(45deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .17) 50%, rgba(255, 255, 255, 0) 58%); transform: translate3d(32%, -32%, 0); pointer-events: none; } /* Sens INVERSE : la barre part du haut-droite et descend vers le bas-gauche (demande Loris). L'axe du degrade ne bouge pas — c'est l'orientation de la barre, pas son sens de marche —, seuls le depart et l'arrivee sont echanges. */ @keyframes emg-chip-sheen { 0%, 72% { transform: translate3d(32%, -32%, 0); } 90%, 100% { transform: translate3d(-32%, 32%, 0); } } html.js:not(.emg-motion-off) .emg-chip.is-floating::after { animation: emg-chip-sheen 7.5s ease-in-out infinite; } html.js:not(.emg-motion-off) .emg-chip.is-rating.is-floating::after { animation-delay: 1.4s; } html.js:not(.emg-motion-off) .emg-chip.is-stat.is-floating::after { animation-delay: 2.8s; } /* Chip avis : 5 étoiles glacées, score 5/5 en grand, libellé dessous. */ /* justify-content: flex-end sur les deux : la pastille de gauche a deux lignes, celle de droite en a trois. Cales en haut ou au centre, leurs legendes tombaient a 14 px l'une de l'autre. Cales en bas, elles partagent la meme ligne. */ .emg-chip.is-rating { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 0; padding: 20px 22px; border-radius: 20px; } .emg-chip-value.is-score { font-size: 33px; margin-top: 9px; } .emg-chip.is-rating .emg-chip-caption { white-space: nowrap; } .emg-chip-stars { display: inline-flex; gap: 4px; color: var(--cyan); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--cyan) 65%, transparent)); } @keyframes emg-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.88); } } html.js:not(.emg-motion-off) .emg-chip-stars svg:nth-child(2) { animation: emg-twinkle 3.6s ease-in-out infinite 1.1s; } html.js:not(.emg-motion-off) .emg-chip-stars svg:nth-child(5) { animation: emg-twinkle 4.3s ease-in-out infinite .3s; } /* Orbe lumineuse qui respire derrière les chips. */ .emg-hero-glow { position: absolute; right: 2vw; bottom: 12vh; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(148, 246, 255, .2), rgba(10, 54, 247, .12) 45%, transparent 68%); filter: blur(46px); pointer-events: none; } @keyframes emg-glow-pulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.14); } } html.js:not(.emg-motion-off) .emg-hero-glow { animation: emg-glow-pulse 9s ease-in-out infinite; } .emg-chip { padding: 14px 20px; border-radius: 16px; background: rgba(2, 3, 31, .38); border: 1px solid rgba(247, 254, 255, .22); backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4); display: flex; align-items: center; gap: 10px; color: #f7feff; } .emg-chip-dot { width: 7px; height: 7px; border-radius: 99px; flex: none; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); } .emg-chip-label { font-size: 12px; font-weight: 600; letter-spacing: .1em; white-space: nowrap; } .emg-chip.is-stat { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 0; padding: 20px 26px; border-radius: 20px; min-width: 190px; } .emg-chip-value { font-size: 44px; font-weight: 200; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; } .emg-chip-caption { font-size: 11px; font-weight: 600; letter-spacing: .14em; margin-top: 8px; color: rgba(247, 254, 255, .72); } .emg-hero-cue-wrap { display: flex; justify-content: center; padding-bottom: 26px; } .emg-hero-cue { width: 1px; height: 44px; background: linear-gradient(180deg, rgba(247, 254, 255, .7), rgba(247, 254, 255, 0)); } /* Hero interne (pages) */ .emg-page-hero { padding: calc(var(--nav-h) + 104px) 0 24px; } /* Hero de page en nuit : c'est lui qui ouvre le contraste sur les pages internes. Il lui faut plus de fond sous le texte qu'à un hero clair, où la page continuait sans rupture — sinon la bande sombre se lit comme un bandeau posé, pas comme une ouverture. */ .emg-page-hero.emg-night { padding-bottom: clamp(72px, 8.5vw, 124px); } /* Filigranes : les valeurs que l'ancien thème sombre avait retenues, elles restent justes sur nuit. */ .emg-night .emgx-watermark { opacity: .07; } .emg-night .emg-page-logomark { opacity: .09; } /* Fil d'Ariane : il occupe le haut de page, le hero se resserre d'autant. */ .emg-breadcrumb { position: relative; z-index: 1; padding: calc(var(--nav-h) + 36px) 0 0; font-size: 12.5px; color: var(--ink2); } .emg-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; } .emg-breadcrumb li { display: flex; align-items: center; gap: 8px; min-width: 0; } .emg-breadcrumb li + li::before { content: '›'; opacity: .45; } .emg-breadcrumb a { color: var(--ink2); transition: color .25s ease; } .emg-breadcrumb a:hover { color: var(--accent); } .emg-breadcrumb [aria-current] { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.emg-has-crumb .emg-page-hero { padding-top: 30px; } @media (max-width: 620px) { .emg-breadcrumb { padding-top: calc(var(--nav-h) + 24px); font-size: 12px; } body.emg-has-crumb .emg-page-hero { padding-top: 22px; } } .emg-page-hero .emg-page-title { font-size: clamp(40px, 5.4vw, 84px); letter-spacing: -.04em; margin: 24px 0 0; max-width: 18ch; } /* Variante centrée (pages légales) : titre au centre de la page. */ .emg-page-hero.is-centered { text-align: center; } /* Ce hero centre ne sert qu'aux pages legales : son intro s'elargit avec le corps de la page, sinon elle paraitrait etriquee au-dessus. */ .emg-page-hero.is-centered .emg-page-intro { max-width: 70ch; } .emg-page-hero.is-centered .emg-page-title { max-width: none; } .emg-page-hero .emg-page-intro { font-size: 18px; line-height: 1.65; color: var(--ink2); max-width: 62ch; margin: 28px 0 0; } /* ---------------------------------------------------------------- Marquee */ .emg-marquee-section { padding: 72px 0 40px; } .emg-marquee-label { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .3em; color: var(--ink2); } .emg-marquee { overflow: hidden; margin-top: 33px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); } .emg-marquee-track { display: flex; gap: 48px; width: max-content; align-items: center; animation: emg-marquee 34s linear infinite; } .emg-marquee:hover .emg-marquee-track { animation-play-state: paused; } .emg-marquee-track span { font-size: 17px; font-weight: 800; letter-spacing: -.01em; opacity: .4; white-space: nowrap; } @keyframes emg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Logos clients (gérés dans l'admin) : toujours en niveaux de gris, couleur d'origine au survol ; taille équilibrée par --logo-scale. Le bandeau vit sur le fond du thème (contrairement aux tuiles de la page Références, qui restent blanches en permanence) ; en mode sombre, les logos foncés sont passés en blanc. */ .emg-marquee { display: block; } /* Cases fixes : chaque logo défile dans une cellule aux dimensions identiques (190×64), contenu à l'intérieur — poids visuel homogène. L'indice de taille module la place occupée dans la case. */ .emg-marquee-logo { flex: none; width: 210px; height: 80px; display: flex; align-items: center; justify-content: center; } .emg-marquee-logo img { height: auto; width: auto; max-height: calc(90% * var(--logo-scale, 1)); max-width: calc(92% * var(--logo-scale, 1)); object-fit: contain; filter: grayscale(1) opacity(.55); transition: filter .35s ease; } /* Coins arrondis, a la demande (voir emg_logo_rounded, inc/logos.php). L'arrondi ne se justifie que sur un logo qui porte son propre fond : sur un dessin detoure il ne rogne rien et ne se voit pas. Il etait pose sur TOUS les logos, ce qui revenait a le laisser au hasard du format ; il est maintenant decide logo par logo, avec le format pour seul defaut. */ .emg-marquee-logo.is-round img, .emg-ref-tile.is-round img { border-radius: 10px; } /* Thème clair : couleur d'origine au survol ; logos négatifs inversés. */ .emg-marquee-logo:hover img { filter: none; } .emg-marquee-logo.is-invert img { filter: invert(1) grayscale(1) opacity(.6); } .emg-marquee-logo.is-invert:hover img { filter: invert(1) grayscale(1) opacity(.95); } /* Bande de nuit : les logos fonces sont inverses en blanc (pas de passage couleur, les teintes inversees seraient fausses) ; les logos deja negatifs restent tels quels. */ .emg-night .emg-marquee-logo img { filter: invert(1) grayscale(1) opacity(.6); } .emg-night .emg-marquee-logo:hover img { filter: invert(1) grayscale(1) opacity(.95); } .emg-night .emg-marquee-logo.is-invert img { filter: grayscale(1) opacity(.6); } .emg-night .emg-marquee-logo.is-invert:hover img { filter: grayscale(1) opacity(.95); } .emg-marquee { pointer-events: auto; } .emg-marquee-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; font-size: 13px; font-weight: 700; color: var(--ink2); transition: color .25s ease, gap .25s var(--ease-out); } .emg-marquee-more:hover { color: var(--accent); gap: 11px; } /* ------------------------------------------------- Cadre de navigateur Une capture de site posée à plat se confond avec la page qui l'entoure, surtout quand les deux sont claires. Le cadre dit « ceci est un autre site », la barre d'adresse dit lequel. La hauteur de barre est une variable : le moteur du zoom la lit pour calculer sa cible, et l'arrivée sur la fiche la reçoit en propriété CSS. */ .emg-browser { --bar: 34px; /* display: block et non flex : les fiches projet posent ce cadre sur des a l'interieur de
. La barre a une hauteur fixe et la capture son propre rapport, donc le flux normal suffit. */ display: block; position: relative; overflow: hidden; min-width: 0; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .45s var(--ease-out), box-shadow .55s var(--ease-out); } .emg-browser-bar { flex: none; /* Trois colonnes plutot qu'une rangee flex : les pastilles a gauche, le champ au CENTRE de la barre, une colonne vide a droite pour l'equilibre. En flex, le champ s'etirait sur toute la place restante. */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; height: var(--bar); padding: 0 12px; min-width: 0; background: color-mix(in srgb, var(--ink) 4%, var(--card)); border-bottom: 1px solid var(--line); } /* Pastilles neutres et non tricolores : la barre est un repère, pas une citation de macOS, et le gris se tient à côté du bleu de marque. */ .emg-browser-dots { display: flex; gap: 6px; flex: none; justify-self: start; } .emg-browser-dots i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--ink) 15%, transparent); } /* La roue vit A COTE du champ. Elle reste dans le flux : quand elle est au repos, sa place est deja reservee, donc rien ne bouge au moment ou elle apparait. Le champ se decale d'une dizaine de pixels a gauche du centre exact, ce qui ne se voit pas et evite tout debordement a droite. */ .emg-browser-addr { display: flex; align-items: center; gap: 10px; justify-self: center; min-width: 0; max-width: 100%; } .emg-browser-url { /* justify-self : sur les fiches projet il n'y a pas de roue, donc pas d'enveloppe, et c'est le champ qui occupe directement la colonne du milieu. Sans cette ligne il se calerait a gauche de sa colonne. */ justify-self: center; display: flex; align-items: center; gap: 6px; min-width: 0; /* Largeur du contenu, avec un plancher pour qu'un domaine court ressemble quand meme a un champ, et un plafond pour qu'un domaine long ne mange pas la barre. En pixels et non en pourcentage : dans une colonne de grille dimensionnee par son contenu, un pourcentage se resoudrait sur lui-meme. */ width: max-content; min-width: 148px; max-width: 320px; height: 20px; padding: 0 13px; border-radius: 99px; background: var(--bg2, #fff); border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); font-size: 11px; font-weight: 600; color: var(--ink3); } .emg-browser-url svg { flex: none; opacity: .5; } /* Leçon de la grille : un texte en nowrap impose son min-content à tous ses parents. Sans min-width: 0 ici, l'adresse élargirait la carte entière. */ .emg-browser-host { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .emg-browser-spin { flex: none; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--ink) 14%, transparent); border-top-color: var(--accent); opacity: 0; transition: opacity .18s ease; } /* Au clic, la page se charge vraiment : la roue le dit pendant que le cadre s'envole. Elle ne tourne jamais au repos. */ .emg-browser.is-loading .emg-browser-spin { opacity: 1; animation: emg-browser-spin .75s linear infinite; } @keyframes emg-browser-spin { to { transform: rotate(360deg); } } html.emg-motion-off .emg-browser.is-loading .emg-browser-spin { animation: none; } /* La capture prend ce qui reste sous la barre. En flux normal c'est son 16/9 qui commande ; dans le clone volant, dont la hauteur est imposée, c'est le flex qui reprend la main. */ /* Le cadre porte désormais le contour et l'ombre : le hero de la fiche les perd, sinon on aurait deux bordures imbriquées. */ .emg-single-hero-wrap .emg-browser > .emg-single-hero { border-radius: 0; box-shadow: none; overflow: hidden; } @media (max-width: 560px) { .emg-browser { --bar: 27px; } .emg-browser-bar { gap: 8px; padding: 0 9px; } .emg-browser-dots { gap: 5px; } .emg-browser-dots i { width: 6px; height: 6px; } .emg-browser-addr { gap: 8px; } .emg-browser-url { height: 17px; font-size: 10px; padding: 0 11px; min-width: 112px; max-width: 210px; } .emg-browser-spin { width: 9px; height: 9px; } } /* -------------------------------------------------- Page Références */ .emg-ref-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 64px; } /* Tuiles toujours blanches (même en mode sombre) : les logos vivent sur fond blanc quel que soit le thème. */ .emg-ref-tile { position: relative; overflow: hidden; display: grid; place-items: center; aspect-ratio: 4 / 3; /* Marge en pourcentage, pas en pixels : sur une tuile de 165 px de large, 20 px fixes mangeaient un quart de la case et le logo en sortait. */ padding: clamp(10px, 6.6%, 20px); /* La case devient l'unite de mesure de son logo (voir plus bas). */ container-type: size; border-radius: var(--radius); background: #fff; border: 1px solid rgba(2, 3, 31, .08); box-shadow: var(--shadow-soft); transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .35s ease; } /* Le logo occupe généreusement la tuile ; seul le passage en couleur signe le survol (pas de texte). L'arrondi, lui, ne se decide plus ici : il vient de la classe .is-round, posee logo par logo (voir emg_logo_rounded, inc/logos.php). Une regle aveugle trainait ici apres que celle du bandeau soit partie : tous les logos de la grille restaient arrondis, coche ou pas. */ .emg-ref-tile img { /* Hauteur exprimée dans l'unité de la CASE (cqh) et non en pixels : le logo garde la même part de sa tuile à toute largeur d'écran, au lieu de grossir quand la case rétrécit. Un simple pourcentage ne marche pas ici : la rangée de la grille est dimensionnée PAR l'image, la valeur se résoudrait sur elle-même et le navigateur l'ignore. 58.5 cqh = les 120 px d'origine sur une tuile de bureau ; le min() empêche un --logo-scale généreux de faire sortir le logo du cadre. */ max-height: min(100cqh, calc(58.5cqh * var(--logo-scale, 1))); max-width: 84%; width: auto; object-fit: contain; filter: grayscale(1) opacity(.6); transition: filter .4s ease, transform .4s var(--ease-out); } .emg-ref-tile:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); box-shadow: var(--shadow); } .emg-ref-tile:hover img { filter: none; transform: scale(1.05); } /* Négatif (logos blancs) : toujours foncés — le fond des tuiles est blanc dans les deux thèmes. */ .emg-ref-tile.is-invert img { filter: invert(1) grayscale(1) opacity(.65); } .emg-ref-tile.is-invert:hover img { filter: invert(1) grayscale(1) opacity(.95); } /* Pagination de la galerie (pilules). */ .emg-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 56px; flex-wrap: wrap; } /* Le pageur et la sortie vers les références partagent une rangée (demande Marino, 2026-08-30). Le lien est dans la rangée mais hors du