/* * VPH - direction G « Frustum × Plateau noir » : feuille de style commune (préparée par Claude, 16/10/2026). * Chargée par mu-plugins/vph-g.php sur les pages et modèles G seulement. Toutes les règles visent des classes g-… * posées dans Elementor (champ « Classes CSS ») : sans ces classes, rien ne change sur le site. */ /* ---------- Polices hébergées sur le site (licence OFL, fichiers dans polices/) ---------- */ @font-face{font-family:'VPH Archivo Condensed';font-style:normal;font-weight:300 900;font-display:swap;src:url(polices/vph-archivo-condensed-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'VPH Archivo Condensed';font-style:normal;font-weight:300 900;font-display:swap;src:url(polices/vph-archivo-condensed-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'VPH Archivo';font-style:normal;font-weight:300 700;font-display:swap;src:url(polices/vph-archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'VPH Archivo';font-style:normal;font-weight:300 700;font-display:swap;src:url(polices/vph-archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'VPH Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(polices/vph-plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'VPH Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(polices/vph-plex-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'VPH Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(polices/vph-plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'VPH Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(polices/vph-plex-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ---------- Jetons ---------- */ :root{ --g-noir:#0A0A0B; --g-carte:#141416; --g-creme:#F3F1EC; --g-texte:#CFCCC4; --g-gris:#A8A6A0; --g-gris-fonce:#55534E; --g-accent:#FF4A1C; --g-accent-fonce:#C23A14; --g-filet:rgba(243,241,236,.12); --g-filet-fort:rgba(243,241,236,.16); --g-titre:'VPH Archivo Condensed','Archivo Narrow','Arial Narrow',sans-serif; --g-corps:'VPH Archivo','Helvetica Neue',Arial,sans-serif; --g-mono:'VPH Plex Mono',ui-monospace,Menlo,monospace; --g-ease:cubic-bezier(.2,.7,.2,1); } /* ---------- Page G : fond, texte, liens, focus ---------- */ body.vph-g-page{background:var(--g-noir);color:var(--g-creme);font-family:var(--g-corps);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} body.vph-g-page .site-content,body.vph-g-page #page,body.vph-g-page .ast-container{background:transparent} .vph-g{background:var(--g-noir);color:var(--g-creme);font-family:var(--g-corps)} .vph-g a:focus-visible,.vph-g button:focus-visible,.vph-g [tabindex]:focus-visible{outline:1px solid var(--g-creme);outline-offset:4px} .vph-g ::selection{background:var(--g-creme);color:var(--g-noir)} /* Titres : la police et la graisse se règlent dans Elementor ; ces classes ajoutent ce qu'Elementor ne sait pas faire. */ .g-titre .elementor-heading-title,.g-titre{font-family:var(--g-titre);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.86;text-wrap:balance} .g-h1 .elementor-heading-title{font-size:clamp(64px,11vw,180px)} .g-h2 .elementor-heading-title{font-size:clamp(48px,7vw,118px)} .g-h3 .elementor-heading-title{font-size:clamp(30px,3.4vw,52px);line-height:.92} /* Libellé mono, avec le petit point d'enregistrement. */ .g-label,.g-label .elementor-heading-title,.g-label .elementor-widget-container{font-family:var(--g-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--g-gris);line-height:1.6} .g-label.g-point .elementor-heading-title::before,.g-point>.elementor-widget-container>*:first-child::before{content:"";display:inline-block;width:6px;height:6px;margin-right:12px;border-radius:50%;background:var(--g-accent);vertical-align:.12em} .g-rec .elementor-heading-title::before{animation:gRec 2.4s ease-in-out infinite} /* Paragraphes */ .g-texte .elementor-widget-container{font-family:var(--g-corps);font-size:18px;line-height:1.55;color:var(--g-texte);max-width:640px} .g-texte .elementor-widget-container p{margin:0 0 1em} .g-texte .elementor-widget-container p:last-child{margin-bottom:0} .g-texte a,.g-lien a{color:var(--g-creme);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .4s} .g-texte a:hover,.g-lien a:hover{color:var(--g-accent)} .g-chapo .elementor-widget-container{font-family:var(--g-corps);font-weight:300;font-size:clamp(25px,2.6vw,38px);line-height:1.25;color:var(--g-creme);max-width:900px} /* Boutons : contour (par défaut), plein crème, texte. Classe à poser sur le widget Bouton. */ .g-btn .elementor-button{display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:0 28px;border:1px solid rgba(243,241,236,.55);border-radius:0;background:transparent;color:var(--g-creme);font-family:var(--g-corps);font-size:16px;font-weight:600;letter-spacing:.01em;transition:background .5s,color .5s,border-color .5s} .g-btn .elementor-button:hover,.g-btn .elementor-button:focus-visible{background:var(--g-creme);color:var(--g-noir);border-color:var(--g-creme)} .g-btn-plein .elementor-button{background:var(--g-creme);color:var(--g-noir);border-color:var(--g-creme)} .g-btn-plein .elementor-button:hover,.g-btn-plein .elementor-button:focus-visible{background:var(--g-accent);border-color:var(--g-accent);color:var(--g-noir)} .g-btn-noir .elementor-button{background:var(--g-noir);color:var(--g-creme);border:2px solid var(--g-noir)} .g-btn-noir .elementor-button:hover{background:var(--g-accent);color:var(--g-noir);border-color:var(--g-accent)} .g-btn-contour-noir .elementor-button{background:transparent;color:var(--g-noir);border:2px solid var(--g-noir)} .g-btn-contour-noir .elementor-button:hover{background:var(--g-noir);color:var(--g-creme)} .g-btn-texte .elementor-button{background:none;border:0;padding:6px 0;min-height:0;color:var(--g-creme);gap:12px} .g-btn-texte .elementor-button:hover{background:none;color:#fff} .g-btn .elementor-button-icon,.g-btn-texte .elementor-button-icon{transition:transform .8s var(--g-ease)} .g-btn .elementor-button:hover .elementor-button-icon,.g-btn-texte .elementor-button:hover .elementor-button-icon{transform:translateX(8px)} /* Filets et cartes */ .g-filet-haut{border-top:1px solid var(--g-filet)} .g-filet-bas{border-bottom:1px solid var(--g-filet)} .g-carte{background:var(--g-carte)} .g-angles,.g-angles *{border-radius:0 !important} /* Bloc crème (appel à l'action du pied de page) */ .g-bloc-creme{background:var(--g-creme);color:var(--g-noir)} .g-bloc-creme .g-label,.g-bloc-creme .g-label .elementor-heading-title{color:var(--g-gris-fonce)} .g-bloc-creme .g-texte .elementor-widget-container{color:#2B2A27} /* Images : trame de points et coins de cadre au survol (classe g-shot sur le widget Image). */ .g-shot{position:relative;overflow:hidden} .g-shot img{display:block;width:100%;filter:grayscale(.85) contrast(1.05) brightness(.8);transition:filter 1.1s var(--g-ease),transform 1.4s var(--g-ease)} .g-shot::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,transparent 1.1px,rgba(10,10,11,.72) 1.8px);background-size:5px 5px;transition:opacity .9s} .g-shot::before{content:"";position:absolute;inset:28px;z-index:2;pointer-events:none;opacity:0;color:var(--g-creme);background:linear-gradient(currentColor,currentColor) top left/30px 1px no-repeat,linear-gradient(currentColor,currentColor) top left/1px 30px no-repeat,linear-gradient(currentColor,currentColor) top right/30px 1px no-repeat,linear-gradient(currentColor,currentColor) top right/1px 30px no-repeat,linear-gradient(currentColor,currentColor) bottom left/30px 1px no-repeat,linear-gradient(currentColor,currentColor) bottom left/1px 30px no-repeat,linear-gradient(currentColor,currentColor) bottom right/30px 1px no-repeat,linear-gradient(currentColor,currentColor) bottom right/1px 30px no-repeat;transition:opacity .6s,inset .9s var(--g-ease)} .g-shot:hover img,.g-shot:focus-within img{filter:none;transform:scale(1.03)} .g-shot:hover::after,.g-shot:focus-within::after{opacity:0} .g-shot:hover::before,.g-shot:focus-within::before{opacity:1;inset:16px} /* ---------- En-tête ---------- */ .g-entete{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)} /* En-tête collé en haut pendant le défilement (sur le site, pas dans l'éditeur). */ body:not(.elementor-editor-active) .elementor-location-header:has(.g-entete){position:sticky;top:0;z-index:100} body.admin-bar:not(.elementor-editor-active) .elementor-location-header:has(.g-entete){top:32px} @media (max-width:782px){body.admin-bar:not(.elementor-editor-active) .elementor-location-header:has(.g-entete){top:0}} .g-rvb{display:inline-flex;gap:2px;opacity:.9;vertical-align:middle} .g-rvb i{display:block;width:2px;height:12px;background:#FF2E4D} .g-rvb i:nth-child(2){background:#2EE07A} .g-rvb i:nth-child(3){background:#2E7BFF} .g-rvb.g-rvb-grand{gap:3px} .g-rvb.g-rvb-grand i{width:4px;height:22px} .g-chapitres .elementor-icon-list-item a,.g-chapitres .elementor-icon-list-text{transition:color .4s} .g-chapitres .elementor-icon-list-item a:hover .elementor-icon-list-text{color:var(--g-creme) !important} .g-chapitres .g-num{color:var(--g-accent)} .g-menu-bouton .elementor-button{background:none;border:0;padding:0 6px 0 14px;min-height:44px;color:var(--g-creme);font-family:var(--g-mono);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;gap:12px} .g-menu-bouton .elementor-button:hover{background:none;color:#fff} .g-btn.g-btn-petit .elementor-button{min-height:44px;padding:0 22px;font-size:14px;font-weight:500;letter-spacing:.02em} /* ---------- Menu plein écran (widget « Menu de navigation » WordPress dans la fenêtre G · Menu) ---------- */ .g-index .menu{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:0 56px;counter-reset:gidx} .g-index .menu>li{margin:0;padding:22px 0 24px;border-top:1px solid var(--g-filet);counter-increment:gidx} .g-index .menu>li>a{display:flex;align-items:baseline;gap:18px;font-family:var(--g-titre);font-weight:700;font-size:clamp(38px,3.6vw,54px);line-height:1;text-transform:uppercase;letter-spacing:.01em;color:var(--g-creme);text-decoration:none;transition:letter-spacing .7s var(--g-ease),color .5s} .g-index .menu>li>a::before{content:counter(gidx,decimal-leading-zero);font-family:var(--g-mono);font-size:10px;font-weight:400;letter-spacing:.14em;color:var(--g-gris)} .g-index .menu>li>a:hover,.g-index .menu>li>a:focus-visible{letter-spacing:.04em;color:#fff} .g-index .menu>li.current-menu-item>a::before,.g-index .menu>li.current-menu-ancestor>a::before{color:var(--g-accent)} .g-index .sub-menu{list-style:none;margin:10px 0 0;padding:0 0 0 38px;display:flex;flex-wrap:wrap;gap:0 20px} .g-index .sub-menu li{margin:0;padding:0} .g-index .sub-menu a{display:inline-block;padding:6px 0;font-family:var(--g-corps);font-size:15px;color:var(--g-gris);text-decoration:none;transition:color .4s} .g-index .sub-menu a:hover,.g-index .sub-menu a:focus-visible{color:var(--g-creme)} .g-index .widget-title,.g-index h5{display:none} @media (prefers-reduced-motion:reduce){.g-index a{transition:none !important}} /* ---------- Pied de page ---------- */ .g-pied a{color:inherit;text-decoration:none;transition:color .4s} .g-pied a:hover{color:var(--g-accent)} .g-pied .elementor-icon-list-item a:hover .elementor-icon-list-text{color:var(--g-accent) !important} .g-tel a{transition:color .4s} .g-tel a:hover{color:var(--g-accent-fonce) !important} .g-tel-lib{display:inline-block;margin-right:12px;font-family:var(--g-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--g-gris-fonce);vertical-align:.35em} .g-pied strong{color:var(--g-creme);font-weight:600} .g-pied p{margin:0 0 14px} .g-pied p:last-child{margin-bottom:0} .g-logo-mot a,.g-pied .elementor-heading-title a{color:inherit} .g-index-cadre{min-height:100vh} /* Lignes de liste (mur des projets, menus) */ .g-ligne{transition:background .6s,padding .8s var(--g-ease)} .g-ligne:hover{background:rgba(243,241,236,.04);padding-left:18px} /* Bandeau défilant : mettre le texte deux fois dans un widget HTML
…
*/ .g-tick-cadre{overflow:hidden;border-top:1px solid var(--g-filet-fort);border-bottom:1px solid var(--g-filet-fort)} .g-tick{display:flex;width:max-content;padding:22px 0;font-family:var(--g-titre);font-weight:700;font-size:clamp(40px,5vw,76px);line-height:1;text-transform:uppercase;white-space:nowrap;color:var(--g-creme);animation:gTick 110s linear infinite} .g-tick span{padding-right:64px} .g-tick .g-sep{color:var(--g-accent)} @keyframes gTick{to{transform:translateX(-50%)}} /* Barre de progression de lecture (widget HTML
) */ .g-prog{position:fixed;left:0;top:0;right:0;height:2px;z-index:9999;background:var(--g-accent);transform-origin:0 50%;transform:scaleX(var(--g-p,0))} @supports (animation-timeline:scroll()){.g-prog{animation:gProg linear both;animation-timeline:scroll(root)}} @keyframes gProg{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* Mise au point au défilement : classe g-in sur un titre, une image ou un bloc. */ @keyframes gFocus{from{filter:blur(10px);opacity:.35;transform:translateY(14px)}to{filter:none;opacity:1;transform:none}} @keyframes gRec{50%{opacity:.25}} @supports (animation-timeline:view()){.g-in{animation:gFocus linear both;animation-timeline:view();animation-range:entry 0% entry 70%}} /* Navigateurs sans animation au défilement (Safari, Firefox) : vph-g.js pose g-js-io puis g-vu. */ @supports not (animation-timeline:view()){ .g-js-io .g-in{filter:blur(10px);opacity:.35;transform:translateY(14px);transition:filter 1.2s var(--g-ease),opacity 1.2s var(--g-ease),transform 1.2s var(--g-ease)} .g-js-io .g-in.g-vu{filter:none;opacity:1;transform:none} } /* Dans l'éditeur Elementor, tout reste net pour travailler. */ .elementor-editor-active .g-in,.elementor-editor-preview .g-in{animation:none !important;filter:none !important;opacity:1 !important;transform:none !important} @media (prefers-reduced-motion:reduce){ .g-in,.g-tick,.g-prog,.g-rec .elementor-heading-title::before{animation:none !important} .g-js-io .g-in{filter:none !important;opacity:1 !important;transform:none !important;transition:none !important} .g-shot img,.g-shot::before,.g-shot::after,.g-ligne,.g-btn .elementor-button,.g-btn .elementor-button-icon{transition:none !important} } /* ---------- Accueil : showreel et cadre-caméra (frustum) ---------- Conteneur du haut : classe « g-frustum », arrière-plan vidéo. Widget HTML de calques : classe « g-frustum-calques ». Le cadre net suit la souris (vph-g.js) ; autour, l'image est floue et tramée, comme hors du frustum d'un mur LED. */ .g-frustum{position:relative;overflow:hidden;--fx:50vw;--fy:45vh;--fw:min(500px,46vw);--fh:calc(var(--fw) * .5625)} .g-frustum>.elementor-element.g-frustum-calques{position:absolute !important;inset:0;z-index:1;margin:0 !important;width:auto !important;max-width:none !important;pointer-events:none} .g-frustum-calques .elementor-widget-container{position:absolute;inset:0} .g-frustum>.e-con,.g-frustum>.e-con-inner>.e-con,.g-frustum>.elementor-element:not(.g-frustum-calques){position:relative;z-index:2} .g-frustum-voile{position:absolute;inset:0;display:none;background-image:radial-gradient(circle,transparent 1.1px,rgba(10,10,11,.72) 1.8px);background-size:5px 5px;backdrop-filter:blur(14px) saturate(.75) brightness(.62);-webkit-backdrop-filter:blur(14px) saturate(.75) brightness(.62); -webkit-mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000);-webkit-mask-repeat:no-repeat;-webkit-mask-size:100% 100%,var(--fw) var(--fh);-webkit-mask-position:0 0,calc(var(--fx) - var(--fw) / 2) calc(var(--fy) - var(--fh) / 2);-webkit-mask-composite:xor; mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000);mask-repeat:no-repeat;mask-size:100% 100%,var(--fw) var(--fh);mask-position:0 0,calc(var(--fx) - var(--fw) / 2) calc(var(--fy) - var(--fh) / 2);mask-composite:exclude} .g-frustum-cadre{position:absolute;display:none;left:0;top:0;width:var(--fw);height:var(--fh);transform:translate3d(calc(var(--fx) - var(--fw) / 2),calc(var(--fy) - var(--fh) / 2),0);will-change:transform;color:var(--g-creme); background:linear-gradient(currentColor,currentColor) top left/30px 1px no-repeat,linear-gradient(currentColor,currentColor) top left/1px 30px no-repeat,linear-gradient(currentColor,currentColor) top right/30px 1px no-repeat,linear-gradient(currentColor,currentColor) top right/1px 30px no-repeat,linear-gradient(currentColor,currentColor) bottom left/30px 1px no-repeat,linear-gradient(currentColor,currentColor) bottom left/1px 30px no-repeat,linear-gradient(currentColor,currentColor) bottom right/30px 1px no-repeat,linear-gradient(currentColor,currentColor) bottom right/1px 30px no-repeat} .g-frustum-cadre span{position:absolute;top:-24px;font-family:var(--g-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--g-creme);white-space:nowrap} .g-frustum-cadre .g-fc-g{left:0} .g-frustum-cadre .g-fc-d{right:0} .g-frustum-cadre .g-fc-d::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--g-accent);vertical-align:.08em;animation:gRec 2.4s ease-in-out infinite} .g-frustum-actif .g-frustum-voile,.g-frustum-actif .g-frustum-cadre{display:block} /* Variante sans flou d'arrière-plan : image floue fixe + fenêtre nette déplacée (fiche projet). */ .g-frustum-fenetre{position:absolute;left:0;top:0;z-index:1;display:none;width:var(--fw);height:var(--fh);overflow:hidden;pointer-events:none;will-change:transform;transform:translate3d(calc(var(--fx) - var(--fw) / 2),calc(var(--fy) - var(--fh) / 2),0)} .g-frustum-fenetre-media{position:absolute;left:0;top:0;will-change:transform} .g-frustum-fenetre-media img{display:block;width:100% !important;height:100% !important;max-width:none !important;object-fit:cover} .g-frustum-actif .g-frustum-fenetre{display:block} .elementor-editor-active .g-frustum-voile,.elementor-editor-active .g-frustum-cadre{display:none !important} @media (prefers-reduced-motion:reduce){.g-frustum-cadre .g-fc-d::before{animation:none}} /* Chiffres clés */ .g-chiffre .elementor-heading-title{font-family:var(--g-titre);font-weight:800;text-transform:uppercase;line-height:.9} /* Bande de projets (widget Blog de Premium Addons, classe « g-projets ») */ .g-projets .premium-blog-post-outer-container{border-radius:0} .g-projets .premium-blog-post-container,.g-projets .premium-blog-content-wrapper{background:transparent !important;border-radius:0 !important;box-shadow:none !important;padding:0 !important} .g-projets .premium-blog-thumbnail-container{position:relative;overflow:hidden;border-radius:0} .g-projets .premium-blog-thumbnail-container img{aspect-ratio:4/5;object-fit:cover;width:100%;height:auto;filter:grayscale(.85) contrast(1.05) brightness(.8);transition:filter 1.1s var(--g-ease),transform 1.4s var(--g-ease)} .g-projets .premium-blog-thumbnail-container::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,transparent 1.1px,rgba(10,10,11,.72) 1.8px);background-size:5px 5px;transition:opacity .9s} .g-projets .premium-blog-post-outer-container:hover img{filter:none;transform:scale(1.03)} .g-projets .premium-blog-post-outer-container:hover .premium-blog-thumbnail-container::after{opacity:0} .g-projets .premium-blog-entry-title,.g-projets .premium-blog-entry-title a{margin:14px 0 4px;font-family:var(--g-titre) !important;font-weight:700 !important;font-size:26px !important;line-height:1 !important;text-transform:uppercase;color:var(--g-creme) !important} .g-projets .premium-blog-entry-meta,.g-projets .premium-blog-entry-meta a,.g-projets .premium-blog-post-tags-container{font-family:var(--g-mono) !important;font-size:10px !important;letter-spacing:.14em;text-transform:uppercase;color:var(--g-gris) !important} .g-projets .premium-blog-entry-meta i,.g-projets .premium-blog-meta-separator{display:none} .g-projets .slick-arrow{border-radius:0 !important;background:transparent !important;border:1px solid rgba(243,241,236,.4) !important;color:var(--g-creme) !important} /* Cartes plateaux : conteneur avec image d'arrière-plan, classe « g-plateau-carte » */ .g-plateau-carte{position:relative;overflow:hidden;transition:transform 1.4s var(--g-ease)} .g-plateau-carte::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(10,10,11,.15) 0%,rgba(10,10,11,.25) 45%,rgba(10,10,11,.88) 100%);pointer-events:none} .g-plateau-carte>*{position:relative;z-index:1} /* Méthode en 5 étapes (widget Onglets, classe « g-etapes ») */ .g-etapes .e-n-tabs-heading,.g-etapes .elementor-tabs-wrapper{gap:0;border-bottom:1px solid var(--g-filet)} .g-etapes .e-n-tab-title,.g-etapes .elementor-tab-title{border-radius:0 !important;background:transparent !important;border:0 !important;border-top:2px solid rgba(243,241,236,.18) !important;font-family:var(--g-corps);color:var(--g-creme) !important;padding:18px 20px !important;transition:background .5s,color .5s} .g-etapes .e-n-tab-title[aria-selected="true"],.g-etapes .elementor-tab-title.elementor-active{background:var(--g-creme) !important;color:var(--g-noir) !important;border-top-color:var(--g-accent) !important} .g-etapes .e-n-tab-title-text{font-family:var(--g-titre);font-weight:700;font-size:24px;text-transform:uppercase;line-height:1} .g-etapes .elementor-tabs{border:0} .g-etapes .elementor-tabs-wrapper{display:flex !important;flex-wrap:wrap} .g-etapes .elementor-tabs-wrapper .elementor-tab-title{flex:1 1 0;min-width:180px} .g-etapes .elementor-tabs-content-wrapper,.g-etapes .elementor-tab-content{border:0 !important;background:transparent !important} .g-etapes .elementor-tab-content{padding:40px 0 8px !important;max-width:900px} .g-etapes .elementor-tab-content p{margin:0 0 22px} .g-etapes .g-etape-liens{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0;font-family:var(--g-corps);font-size:16px;font-weight:500;line-height:1.5} .g-etapes .g-etape-liens a{color:var(--g-creme);text-decoration:none;border-bottom:1px solid rgba(243,241,236,.35);padding-bottom:2px;transition:color .4s,border-color .4s} .g-etapes .g-etape-liens a:hover{color:var(--g-accent);border-color:var(--g-accent)} .g-etapes .elementor-tab-mobile-title{border-radius:0 !important;font-family:var(--g-titre);font-weight:700;text-transform:uppercase;color:var(--g-creme)} .g-etapes .elementor-tab-mobile-title.elementor-active{background:var(--g-creme);color:var(--g-noir)} .g-marques .g-tick{font-size:clamp(28px,3.2vw,48px);font-weight:600;color:var(--g-texte);animation-duration:90s} .g-hero-pas-souris .g-frustum-cadre{display:none} /* ---------- Les plateaux en 3D (widget HTML
, construit par vph-g.js) ---------- Option : data-studio="l" pour ouvrir sur Les Lilas ; data-simple pour masquer la ligne « Votre projet ». */ .g-p3d{container-type:inline-size;container-name:p3d;--p3d-angle:-22deg;--p3d-contre:22deg;--p3d-sol:#0F0F11;--p3d-grille:rgba(243,241,236,.07);--p3d-cyclo:#E9E8E3;--p3d-cyclo-haut:#F5F4F0;--p3d-cyclo-clair:#FFFFFF;--p3d-fig:#DEDBD3;--p3d-roue:#9C9A94;--p3d-fig-lib:#F3F1EC;color:var(--g-creme);font-family:var(--g-corps);font-size:17px;line-height:1.55} .g-p3d:not([data-g-pret]){min-height:460px;background:radial-gradient(ellipse at 50% 32%,#18181B 0%,#09090A 72%)} .g-p3d .g-p3d-lib{display:block;font-family:var(--g-mono);font-size:10px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--g-gris);line-height:1.6} .g-p3d .g-p3d-lib-clair{color:var(--g-texte)} /* Boutons : on neutralise les styles de boutons du thème et d'Elementor. */ .vph-g .g-p3d button.g-p3d-opt,.g-p3d button.g-p3d-opt{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:10px;min-height:46px;margin:0;padding:0 !important;border:0 !important;border-bottom:1px solid transparent !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;color:var(--g-gris) !important;font-family:var(--g-corps) !important;font-size:17px !important;font-weight:400 !important;letter-spacing:0 !important;text-transform:none !important;line-height:1.3 !important;cursor:pointer;transition:color .4s,border-color .4s} .g-p3d button.g-p3d-opt:hover,.g-p3d button.g-p3d-opt:focus{background:transparent !important;color:var(--g-creme) !important} .g-p3d button.g-p3d-opt.g-actif{color:var(--g-creme) !important;border-bottom-color:var(--g-creme) !important} .g-p3d button.g-p3d-opt:focus-visible{outline:1px solid var(--g-creme);outline-offset:4px} .g-p3d-besoins{display:flex;flex-wrap:wrap;align-items:center;gap:4px 30px;padding-bottom:2px;border-bottom:1px solid rgba(243,241,236,.1)} .g-p3d-besoins .g-p3d-lib{display:inline} .vph-g .g-p3d button.g-p3d-besoin,.g-p3d button.g-p3d-besoin{min-height:54px;margin-bottom:-3px;font-family:var(--g-titre) !important;font-size:24px !important;text-transform:uppercase !important} .g-p3d-conseil{min-height:1.5em;margin:24px 0 0 !important;font-weight:300;font-size:clamp(21px,2vw,28px);line-height:1.35;color:var(--g-creme);text-wrap:pretty} .g-p3d-conseil-nom{font-family:var(--g-titre);font-weight:500;text-transform:uppercase} .g-p3d-vide{color:var(--g-gris)} /* La vue */ .g-p3d-vue{position:relative;height:clamp(460px,46vw,680px);margin-top:32px;overflow:hidden;perspective:1500px;perspective-origin:50% 30%;background:radial-gradient(ellipse at 50% 32%,#18181B 0%,#09090A 72%);-webkit-user-select:none;user-select:none;cursor:grab;touch-action:pan-y} .g-p3d-glisse .g-p3d-vue{cursor:grabbing} .g-p3d-scene{--k:1;position:absolute;left:50%;top:66%;width:0;height:0;transform-style:preserve-3d;transform:scale(var(--k)) rotateX(-16deg) rotateY(var(--p3d-angle));transition:transform .9s var(--g-ease)} .g-p3d-glisse .g-p3d-scene{transition:none} @container p3d (max-width:1000px){.g-p3d-scene{--k:.8}} @container p3d (max-width:720px){.g-p3d-scene{--k:.6}} @container p3d (max-width:460px){.g-p3d-scene{--k:.42}} .g-p3d-scene>div{position:absolute} .g-p3d-sol{left:-520px;top:-320px;width:1040px;height:640px;transform:rotateX(90deg);background-color:var(--p3d-sol);background-image:linear-gradient(var(--p3d-grille) 1px,transparent 1px),linear-gradient(90deg,var(--p3d-grille) 1px,transparent 1px);background-size:40px 40px;transition:background-color .6s} /* Le mur LED : un paysage virtuel affiché sur les 43 colonnes de dalles. */ .g-p3d-dalle{left:-10px;top:-200px;width:20.6px;height:200px;box-shadow:0 0 40px rgba(217,162,122,.12);background-size:860px 200px;--s1:#10172B;--s2:#2E2B4F;--s3:#9C6460;--s4:#D9A27A;--sun:#F6DDB2;--far:#57475F;--near:#2E2738;--gnd:#141218;--road:#221F28;--lane:#E6DCC2;background-image:conic-gradient(from 179.4deg at 50% 60%,var(--lane) 0 1.2deg,transparent 0),conic-gradient(from 150deg at 50% 60%,var(--road) 0 60deg,transparent 0),linear-gradient(180deg,transparent 60%,var(--gnd) 60%),conic-gradient(from 132deg at 74% 34%,var(--near) 0 96deg,transparent 0),conic-gradient(from 138deg at 22% 40%,var(--near) 0 84deg,transparent 0),conic-gradient(from 128deg at 46% 30%,var(--far) 0 104deg,transparent 0),conic-gradient(from 135deg at 88% 42%,var(--far) 0 90deg,transparent 0),radial-gradient(circle at 50% 56%,var(--sun) 0 5%,rgba(246,221,178,.45) 9%,transparent 30%),linear-gradient(180deg,var(--s1) 0%,var(--s2) 34%,var(--s3) 54%,var(--s4) 60%)} .g-p3d-dalle::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,transparent 1.1px,rgba(10,10,11,.5) 1.7px);background-size:4px 4px} .g-p3d-cote{left:-150px;top:-262px;width:300px;transform:translateZ(-286px);text-align:center} .g-p3d-cote span,.g-p3d-mesure{display:inline-block;padding:3px 10px;background:#09090A;font-family:var(--g-mono);font-size:11px;letter-spacing:.1em;line-height:1.4;color:var(--g-creme);white-space:nowrap} .g-p3d-hauteur{left:-10px;top:-200px;width:20px;height:200px;transform:translate3d(-287.7px,0,-39.1px) rotateY(90deg)} .g-p3d-accolade{position:absolute;right:26px;top:0;bottom:0;width:8px;border:1px solid rgba(243,241,236,.7);border-right:0} .g-p3d-mesure{position:absolute;right:40px;top:50%;transform:translateY(-50%);padding:2px 8px} .g-p3d-cyclo{left:-440px;top:-240px;width:880px;height:240px;transform:translateZ(-300px);background:linear-gradient(180deg,var(--p3d-cyclo-haut) 0%,var(--p3d-cyclo) 70%,var(--p3d-cyclo-clair) 100%);transition:background .6s} /* Repères d'échelle : ils restent face à la caméra. */ .g-p3d-perso{left:-9px;top:-72px;width:18px;height:72px;transform-origin:50% 100%;transform:translate3d(-120px,0,-60px) rotateY(var(--p3d-contre))} .g-p3d-tete{position:absolute;left:3px;top:0;width:12px;height:12px;border-radius:50%;background:var(--p3d-fig)} .g-p3d-corps{position:absolute;left:0;top:14px;width:18px;height:58px;border-radius:7px 7px 3px 3px;background:var(--p3d-fig)} .g-p3d-auto{left:-90px;top:-60px;width:180px;height:60px;transform-origin:50% 100%;transform:translate3d(110px,0,-20px) rotateY(var(--p3d-contre))} .g-p3d-toit{position:absolute;left:44px;bottom:32px;width:92px;height:24px;border-radius:14px 18px 3px 3px;background:var(--p3d-fig)} .g-p3d-caisse{position:absolute;left:0;right:0;bottom:10px;height:26px;border-radius:10px 14px 6px 6px;background:var(--p3d-fig)} .g-p3d-roue{position:absolute;bottom:0;width:26px;height:26px;border-radius:50%;background:#0A0A0B;box-shadow:inset 0 0 0 6px var(--p3d-roue)} .g-p3d-roue-g{left:22px}.g-p3d-roue-d{right:22px} .g-p3d-repere{position:absolute;left:50%;bottom:100%;margin-bottom:8px;transform:translateX(-50%);font-family:var(--g-mono);font-size:10px;letter-spacing:.08em;line-height:1.4;color:var(--p3d-fig-lib);white-space:nowrap} .g-p3d-l,.g-p3d-auto,.g-p3d-est-l .g-p3d-e,.g-p3d-sans-perso .g-p3d-perso{display:none} .g-p3d-est-l .g-p3d-l,.g-p3d-avec-auto .g-p3d-auto{display:block} /* Textes posés sur la vue */ .g-p3d-haut{position:absolute;left:0;right:0;top:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:20px 24px;pointer-events:none} .g-p3d-titre{text-align:right} .g-p3d-nom{display:block;font-family:var(--g-titre);font-weight:700;font-size:clamp(34px,3.2vw,50px);line-height:1;text-transform:uppercase;color:var(--g-creme)} .g-p3d-fait{display:block;margin-top:8px;font-family:var(--g-mono);font-size:10px;letter-spacing:.14em;line-height:1.6;text-transform:uppercase;color:var(--g-texte)} .g-p3d-aide{position:absolute;left:24px;bottom:20px;font-family:var(--g-mono);font-size:10px;letter-spacing:.16em;line-height:1.6;text-transform:uppercase;color:var(--g-gris);pointer-events:none} /* Réglages */ .g-p3d-reglages{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:32px 40px;padding-top:32px} .g-p3d-groupe{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:8px} .g-p3d-pastille{width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 1px rgba(243,241,236,.4)} .g-p3d-angle{display:block;width:100%;margin-top:22px;accent-color:var(--g-creme);background:transparent} @container p3d (max-width:560px){.g-p3d-haut{padding:16px}.g-p3d-titre{text-align:left}.g-p3d-aide{left:16px;bottom:14px}} @media (prefers-reduced-motion:reduce){.g-p3d-scene,.g-p3d-sol,.g-p3d-cyclo,.g-p3d button.g-p3d-opt{transition:none !important}} /* ---------- Barre de chapitres de l'accueil ---------- Conteneur du haut (dernier de la page) : classes « vph-g g-chap-barre ». Dedans, un widget HTML