/* Theme Name: Cleans SARL Theme URI: https://cleans-sarl.com Author: Cleans SARL Description: Thème bloc sur mesure de Cleans SARL — hygiène intérieure, Douala et Yaoundé. Pages en blocs natifs et au format Elementor, catalogue de produits (fiches sur mesure), français et anglais (Polylang), scène 3D d'accueil. Version: 1.0.1 Requires at least: 6.6 Tested up to: 7.1 Requires PHP: 8.0 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: cleans Tags: block-theme, full-site-editing, custom-colors, custom-logo */ /* ========================================================================== Elementor — remise à zéro des éléments convertis (classe « sc ») Placée avant la feuille de la maquette : elle efface les réglages par défaut d'Elementor (flex en colonne, marges intérieures de 10 px, gouttières de 20 px, largeur 100 %, boutons gris), la maquette décide ensuite. Les éléments ajoutés plus tard dans Elementor, sans la classe « sc », gardent ses réglages habituels. Spécificités calées sur celles d'Elementor : à égalité, cette feuille passe après la sienne, et la feuille propre à chaque page (réglages faits dans Elementor) passe après celle-ci (functions.php). ========================================================================== */ @property --sc-direction { syntax: "*"; inherits: false; } @property --sc-grow { syntax: "*"; inherits: false; } @property --sc-shrink { syntax: "*"; inherits: false; } @property --sc-basis { syntax: "*"; inherits: false; } /* --- Conteneurs : de simples blocs, comme les
et
de la maquette */ :where(.e-con).sc { display: block; gap: normal; flex-wrap: nowrap; align-items: normal; align-content: normal; justify-content: normal; width: auto; max-width: none; min-width: auto; margin: 0; padding: 0; position: static; text-align: inherit; z-index: auto; transition: none; } /* flex et flex-direction : imposés par Elementor en (0,2,0), repris ici par ses propres variables, alimentées par les déclarations de la maquette (voir scripts/css-elementor.mjs) */ .sc.e-con.e-flex { --flex-direction: var(--sc-direction, row); --flex-grow: var(--sc-grow, 0); --flex-shrink: var(--sc-shrink, 1); --flex-basis: var(--sc-basis, auto); } /* ::before sert au fond superposé d'Elementor ; la maquette l'utilise pour ses décors */ :where(.e-con).sc::before { position: static; display: inline; top: auto; left: auto; width: auto; height: auto; border: 0 none; border-radius: 0; mix-blend-mode: normal; opacity: 1; transition: none; } /* --- Widgets : l'enveloppe s'efface, le titre, le texte, le bouton ou l'image prend sa place. Dans l'éditeur, elle reste une boîte : Elementor y accroche son cadre de sélection. */ :where(.elementor-widget).sc { gap: normal; flex-direction: row; flex-wrap: nowrap; align-items: normal; align-content: normal; justify-content: normal; } :where(body:not(.elementor-editor-active)) .sc:where(.elementor-widget:not(.sc-boite)), .sc:where(.elementor-widget-shortcode) > .elementor-shortcode { display: contents; } :where(.sc) > .elementor-heading-title:where(:not(h1, h2, h3, h4, h5, h6)) { line-height: inherit; } /* titres : line-height 1 d’Elementor = celui de la maquette */ :where(.sc).elementor-widget-image { text-align: inherit; } .sc:where(.elementor-widget-image) img { display: block; vertical-align: baseline; } .sc > .elementor-button { display: inline; padding: 0; border-radius: 0; background: none; color: inherit; fill: currentColor; font-size: inherit; line-height: inherit; text-align: inherit; transition: none; } .sc > .elementor-button .elementor-button-content-wrapper, .sc > .elementor-button .elementor-button-text { display: contents; } :root { --bleu: #3748a9; --bleu-fonce: #24327f; --orange: #ff5e14; --orange-fonce: #e04c07; --nuit: #06163a; --gris: #f8f8f8; --gris-trait: #e6e8ee; --texte: #4f586b; --texte-doux: #858c9c; --blanc: #fff; --titre: 'Barlow Condensed', 'Arial Narrow', sans-serif; --corps: 'Roboto', system-ui, sans-serif; --largeur: 1240px; --gouttiere: 24px; --ombre: 0 30px 60px -28px rgba(6, 22, 58, .45); --relief: 6px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font: 400 16px/1.7 var(--corps); color: var(--texte); background: var(--blanc); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4 { font-family: var(--titre); font-weight: 600; color: var(--nuit); line-height: 1; margin: 0; hyphens: none; text-wrap: balance; } p { margin: 0 0 1em; } .enveloppe { width: min(var(--largeur), 100% - 2 * var(--gouttiere)); margin-inline: auto; } .visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* --- Titres de section ------------------------------------------------- */ .surtitre:where(:not(.elementor-widget)), .surtitre:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font: 700 13px/1.2 var(--corps); letter-spacing: .2em; text-transform: uppercase; color: var(--orange); } .surtitre:where(:not(.elementor-widget))::before, .surtitre:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle))::before { content: ''; width: 34px; height: 3px; background: currentColor; } .surtitre--centre:where(:not(.elementor-widget)), .surtitre--centre:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { justify-content: center; } .surtitre--centre:where(:not(.elementor-widget))::after, .surtitre--centre:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle))::after { content: ''; width: 34px; height: 3px; background: currentColor; } .titre-section:where(:not(.elementor-widget)), .titre-section:where(.elementor-widget-heading) > :where(.elementor-heading-title) { font-size: clamp(44px, 5.2vw, 76px); text-align: center; letter-spacing: -.005em; } .titre-section--gauche:where(:not(.elementor-widget)), .titre-section--gauche:where(.elementor-widget-heading) > :where(.elementor-heading-title) { text-align: left; } .titre-section--clair:where(:not(.elementor-widget)), .titre-section--clair:where(.elementor-widget-heading) > :where(.elementor-heading-title) { color: var(--blanc); } /* --- Boutons : en relief, ils s'enfoncent au survol et au clic ---------- */ .bouton:where(:not(.elementor-widget)), .bouton:where(.elementor-widget-button) > .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 30px; font: 500 14px/1 var(--corps); letter-spacing: .08em; text-transform: uppercase; color: var(--blanc); background: var(--orange); border: 2px solid var(--orange); cursor: pointer; box-shadow: var(--relief) var(--relief) 0 var(--nuit); transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; } .bouton:hover:where(:not(.elementor-widget)), .bouton:hover:where(.elementor-widget-button) > .elementor-button { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--nuit); background: var(--orange-fonce); border-color: var(--orange-fonce); } .bouton:where(:not(.elementor-widget)):active, .bouton:where(.elementor-widget-button) > .elementor-button:active { transform: translate(var(--relief), var(--relief)); box-shadow: 0 0 0 var(--nuit); } .bouton--contour:where(:not(.elementor-widget)), .bouton--contour:where(.elementor-widget-button) > .elementor-button { background: transparent; border-color: rgba(255, 255, 255, .85); box-shadow: var(--relief) var(--relief) 0 rgba(6, 22, 58, .55); } .bouton--contour:hover:where(:not(.elementor-widget)), .bouton--contour:hover:where(.elementor-widget-button) > .elementor-button { background: var(--blanc); border-color: var(--blanc); color: var(--nuit); box-shadow: 3px 3px 0 rgba(6, 22, 58, .55); } .bouton--blanc { background: var(--blanc); border-color: var(--blanc); color: var(--nuit); box-shadow: var(--relief) var(--relief) 0 var(--orange); } .bouton--blanc:hover { background: var(--blanc); border-color: var(--blanc); box-shadow: 3px 3px 0 var(--orange); } .bouton--petit:where(:not(.elementor-widget)), .bouton--petit:where(.elementor-widget-button) > .elementor-button { min-height: 48px; padding: 0 22px; font-size: 13px; } .boutons { display: flex; flex-wrap: wrap; gap: 22px; } /* --- En-tête ------------------------------------------------------------- */ .entete { position: sticky; top: 0; z-index: 100; background: var(--blanc); transition: box-shadow .3s; } .entete.est-defile { box-shadow: 0 12px 30px -18px rgba(6, 22, 58, .35); } .entete__barre { display: flex; align-items: center; gap: 36px; height: 96px; } .logo { flex: none; display: block; --sc-grow: 0; --sc-shrink: 0; --sc-basis: auto; } .logo img { width: 84px; height: 84px; object-fit: contain; } .entete nav { margin-left: auto; } .menu { display: flex; align-items: center; gap: 28px; } .menu>li { position: relative; } .menu>li>a { display: flex; align-items: center; gap: 6px; padding: 36px 0; font: 500 14px/1 var(--corps); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--nuit); transition: color .2s; } .entete .bouton:where(:not(.elementor-widget)), .entete .bouton:where(.elementor-widget-button) > .elementor-button { white-space: nowrap; } .menu>li>a:hover, .menu>li.actif>a { color: var(--orange); } .menu>li.actif>a { box-shadow: inset 0 -4px 0 var(--orange); } .chevron { width: 10px; height: 6px; } .sous-menu { position: absolute; top: 100%; left: -24px; min-width: 300px; padding: 14px 0; background: var(--blanc); border-top: 4px solid var(--orange); box-shadow: var(--ombre); opacity: 0; visibility: hidden; transform: perspective(800px) rotateX(-14deg) translateY(10px); transform-origin: top; transition: opacity .25s, transform .25s, visibility .25s; } .a-sous-menu:hover .sous-menu, .a-sous-menu:focus-within .sous-menu { opacity: 1; visibility: visible; transform: none; } .sous-menu a { display: block; padding: 10px 26px; font-size: 15px; color: var(--nuit); transition: color .2s, padding .2s; } .sous-menu a:hover { color: var(--orange); padding-left: 32px; } /* sélecteur de langue : drapeaux ; la langue affichée est cerclée d'orange */ .langues { display: flex; align-items: center; gap: 8px; } .langue { display: block; padding: 3px; border: 2px solid transparent; transition: border-color .2s, transform .2s; } .langue img { display: block; width: 30px; height: 20px; object-fit: cover; box-shadow: 0 0 0 1px rgba(6, 22, 58, .15); } .langue:hover { transform: translateY(-2px); } .langue.est-active { border-color: var(--orange); } /* les drapeaux ne prennent pas la marge des liens du menu */ .menu>li.langues>.langue { display: block; padding: 3px; border-bottom: 2px solid transparent; } .menu>li.langues>.langue.est-active { border-color: var(--orange); } .burger { display: none; margin-left: auto; width: 52px; height: 52px; border: 0; background: var(--nuit); color: var(--blanc); cursor: pointer; } /* --- Héros 3D ------------------------------------------------------------ */ .heros { position: relative; isolation: isolate; overflow-x: clip; color: var(--blanc); background: radial-gradient(circle at 76% 44%, rgba(120, 140, 255, .45), transparent 34%), radial-gradient(circle at 12% 110%, rgba(255, 94, 20, .22), transparent 38%), linear-gradient(118deg, var(--nuit) 0%, var(--bleu-fonce) 38%, var(--bleu) 72%, #4557c4 100%); padding-bottom: 0; } .scene3d { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .scene3d canvas { display: block; width: 100%; height: 100%; } .heros__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; min-height: 720px; padding-block: 90px 150px; } .heros__texte { position: relative; z-index: 2; max-width: 600px; } .heros h1 { font-size: clamp(64px, 8.4vw, 124px); line-height: .9; color: var(--blanc); letter-spacing: -.01em; text-shadow: 0 18px 40px rgba(6, 22, 58, .45); } .heros h1 em { font-style: normal; color: var(--orange); display: block; } .heros__intro:where(:not(.elementor-widget)), .heros__intro:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { margin: 30px 0 42px; max-width: 500px; font-size: 18px; line-height: 1.65; color: rgba(255, 255, 255, .86); } .heros .surtitre:where(:not(.elementor-widget)), .heros .surtitre:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { color: #ffb48f; } /* cartes produit flottantes, en perspective, qui suivent la souris (--px, --py posés par le script) */ .heros__vitrine { position: relative; height: 560px; perspective: 1100px; transform-style: preserve-3d; } .flottant { --tx: 0px; --ty: 0px; --ry: -16deg; --rx: 6deg; --prof: 60px; position: absolute; margin: 0; width: 176px; padding: 12px 12px 14px; background: var(--blanc); box-shadow: 0 40px 70px -24px rgba(3, 10, 30, .7), 0 0 0 1px rgba(255, 255, 255, .6); transform: translate3d(calc(var(--tx) + var(--px, 0) * var(--prof)), calc(var(--ty) + var(--py, 0) * var(--prof)), 0) rotateY(var(--ry)) rotateX(var(--rx)); transition: transform .5s cubic-bezier(.2, .7, .3, 1); animation: flotter 7s ease-in-out infinite alternate; } .flottant img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--blanc); } .flottant__legende:where(:not(.elementor-widget)), .flottant__legende:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { margin: 8px 0 0; font: 600 17px/1.1 var(--titre); color: var(--nuit); letter-spacing: .01em; } .flottant::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--orange); } .flottant--1 { top: -2%; left: -6%; --ry: 18deg; --rx: 8deg; --prof: 40px; } .flottant--2 { bottom: -4%; left: 2%; --ry: 14deg; --rx: -8deg; --prof: 80px; animation-delay: -2.5s; } .flottant--3 { top: 36%; right: -6%; --ry: -20deg; --rx: 4deg; --prof: 55px; animation-delay: -4.5s; width: 160px; } @keyframes flotter { from { translate: 0 -10px; } to { translate: 0 12px; } } /* sans 3D : trois cartes à plat suffisent. Avec 3D (.a-3d posé par scene3d.js) : les cartes deviennent des objets de la scène (anneau autour de la goutte) ; les figures restent dans la page, invisibles. */ .flottant:nth-child(n + 4) { display: none; } .heros.a-3d .flottant { visibility: hidden; animation: none; } /* chiffres : bande blanche posée à cheval sur le bas du héros */ .chiffres { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: -80px; background: var(--blanc); box-shadow: var(--ombre); transform: translateY(80px); } .chiffre { display: flex; align-items: center; gap: 16px; padding: 34px 32px; border-left: 1px solid var(--gris-trait); } .chiffre:first-child { border-left: 0; } .chiffre__nombre { margin: 0; font: 600 64px/.9 var(--titre); color: var(--nuit); white-space: nowrap; } .chiffre__nombre em { font-style: normal; color: var(--orange); } .chiffre__libelle { margin: 0; font-size: 15px; line-height: 1.35; color: var(--texte); max-width: 130px; } /* --- Effet 3D des cartes : inclinaison sous la souris -------------------- */ .tilt { --rx: 0deg; --ry: 0deg; transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s; will-change: transform; } .tilt.est-incline { transition-duration: .08s; } /* --- Gammes ---------------------------------------------------------------- */ .gammes { padding: 210px 0 130px; } .gammes__grille { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; margin-top: 64px; } .carte-gamme { display: flex; flex-direction: column; height: 100%; background: var(--blanc); border: 1px solid var(--gris-trait); --sc-direction: column; } .carte-gamme:hover { box-shadow: 0 40px 60px -30px rgba(6, 22, 58, .45); border-color: transparent; } .carte-gamme__visuel { position: relative; aspect-ratio: 1; background: var(--gris); transform-style: preserve-3d; } .carte-gamme__visuel img { position: absolute; inset: 22px; width: calc(100% - 44px); height: calc(100% - 44px); object-fit: contain; mix-blend-mode: multiply; transform: translateZ(0); transition: transform .35s cubic-bezier(.2, .7, .3, 1); } .carte-gamme:hover .carte-gamme__visuel img { transform: translateZ(50px) scale(1.04); } .carte-gamme__nom { padding: 20px 20px 4px; font: 600 23px/1.05 var(--titre); color: var(--nuit); transform: translateZ(20px); } .carte-gamme__nombre { margin-top: auto; padding: 0 20px 20px; font-size: 14px; color: var(--orange); font-weight: 500; } /* --- Qui sommes-nous --------------------------------------------------------- */ .apropos { padding: 60px 0 150px; } .apropos__grille { display: grid; grid-template-columns: 1.05fr 1fr; gap: 90px; align-items: center; } .apropos__visuel { position: relative; padding: 0 40px 60px 0; } .apropos__visuel::before { content: ""; position: absolute; inset: 60px 0 0 60px; background: var(--bleu); } /* recadrage : écarte le filigrane de la photo d'origine (coin inférieur gauche) */ .apropos__photo:where(:not(.elementor-widget)), .apropos__photo:where(.elementor-widget-image) > img { position: relative; width: 100%; aspect-ratio: 11 / 10; object-fit: cover; object-position: 80% 50%; box-shadow: var(--ombre); } .apropos__badge { position: absolute; right: 0; bottom: 20px; display: flex; flex-direction: column; justify-content: center; width: 190px; height: 170px; padding: 24px; margin: 0; background: var(--orange); color: var(--blanc); box-shadow: 14px 14px 0 var(--nuit); --sc-direction: column; } .apropos__badge p { margin: 0; } .apropos__badge-nombre:where(:not(.elementor-widget)), .apropos__badge-nombre:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { font: 600 76px/.85 var(--titre); } .apropos__badge-nombre em { font-style: normal; } .apropos__badge-texte:where(:not(.elementor-widget)), .apropos__badge-texte:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { font: 600 20px/1.1 var(--titre); letter-spacing: .02em; } .apropos__texte .titre-section:where(:not(.elementor-widget)), .apropos__texte .titre-section:where(.elementor-widget-heading) > :where(.elementor-heading-title) { margin-bottom: 26px; } .apropos__accroche:where(:not(.elementor-widget)), .apropos__accroche:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { font-size: 19px; line-height: 1.6; color: var(--nuit); } .agences:where(:not(.elementor-widget)), .agences:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 34px 0 44px; } /* agences : une liste simple (ville en gras) — liste native dans WordPress */ .agences li { padding: 20px 22px; border-left: 4px solid var(--orange); background: var(--gris); font-size: 14px; line-height: 1.5; } .agences strong { display: block; margin-bottom: 4px; font: 600 26px/1 var(--titre); color: var(--nuit); } /* --- Vitrine : carrousel 3D ---------------------------------------------------- */ .vitrine { position: relative; isolation: isolate; overflow: hidden; padding: 120px 0 110px; background: linear-gradient(180deg, var(--bleu) 0%, var(--bleu-fonce) 100%); } .vitrine .surtitre:where(:not(.elementor-widget)), .vitrine .surtitre:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { color: #ffb48f; } .carrousel { position: relative; margin-top: 50px; } .carrousel__piste { position: relative; height: 470px; perspective: 1500px; transform-style: preserve-3d; } .carrousel__item { --d: 0; --a: 0; position: absolute; top: 20px; left: 50%; width: 300px; margin-left: -150px; transform: translateX(calc(var(--d) * 250px)) translateZ(calc(var(--a) * -190px)) rotateY(calc(var(--d) * -32deg)); z-index: calc(20 - var(--a)); filter: brightness(calc(1 - var(--a) * .16)); transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .8s, opacity .8s; } .carrousel__item[data-cache] { opacity: 0; pointer-events: none; } .carte-produit { display: flex; flex-direction: column; background: var(--blanc); box-shadow: 0 50px 80px -30px rgba(3, 10, 30, .75); --sc-direction: column; } .carte-produit__visuel { position: relative; aspect-ratio: 1; background: var(--blanc); border-bottom: 1px solid var(--gris-trait); } .carte-produit__visuel img { position: absolute; inset: 26px; width: calc(100% - 52px); height: calc(100% - 52px); object-fit: contain; } .carte-produit__gamme { padding: 18px 22px 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); } .carte-produit__nom { padding: 6px 22px 24px; font: 600 23px/1.08 var(--titre); color: var(--nuit); min-height: 2.16em; box-sizing: content-box; } .carrousel__item.est-centre .carte-produit { outline: 4px solid var(--orange); outline-offset: -4px; } .carrousel__commandes { display: flex; justify-content: center; align-items: center; gap: 26px; margin-top: 30px; } .carrousel__fleche { width: 58px; height: 58px; display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, .7); background: transparent; color: var(--blanc); cursor: pointer; transition: background .2s, color .2s; } .carrousel__fleche:hover { background: var(--blanc); color: var(--nuit); } .carrousel__fleche svg { width: 24px; height: 24px; } /* --- Atouts ------------------------------------------------------------------------ */ .atouts { padding: 130px 0; background: var(--gris); } .atouts__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 64px; } .atout { position: relative; padding: 48px 40px 44px; background: var(--blanc); border-top: 5px solid var(--orange); box-shadow: 0 30px 50px -36px rgba(6, 22, 58, .35); } .atout:hover { box-shadow: 0 50px 70px -34px rgba(6, 22, 58, .5); } .atout .atout__numero:where(:not(.elementor-widget)), .atout .atout__numero:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { margin: 0; position: absolute; top: 18px; right: 28px; font: 700 96px/1 var(--titre); color: transparent; -webkit-text-stroke: 2px var(--gris-trait); transform: translateZ(30px); } .atout::before { content: ""; display: block; width: 58px; height: 58px; background: var(--bleu) var(--icone) center / 34px no-repeat; box-shadow: 8px 8px 0 var(--orange); transform: translateZ(60px); } .atout--etoile { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 4l5.6 11.4L42 17.2l-9 8.8 2.1 12.4L24 32.6l-11.1 5.8L15 26l-9-8.8 12.4-1.8z' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E"); } .atout--goutte { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 4c7 9 14 16.4 14 24a14 14 0 0 1-28 0C10 20.4 17 13 24 4z' fill='none' stroke='%23fff' stroke-width='3'/%3E%3Cpath d='M18 29a6 6 0 0 0 6 6' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E"); } .atout--oeil { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M4 24s7-12 20-12 20 12 20 12-7 12-20 12S4 24 4 24z' fill='none' stroke='%23fff' stroke-width='3'/%3E%3Ccircle cx='24' cy='24' r='6' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E"); } .atout--cible { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='18' fill='none' stroke='%23fff' stroke-width='3'/%3E%3Ccircle cx='24' cy='24' r='10' fill='none' stroke='%23fff' stroke-width='3'/%3E%3Ccircle cx='24' cy='24' r='3' fill='%23fff'/%3E%3C/svg%3E"); } .atout--coche { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M10 25l9 9 19-20' fill='none' stroke='%23fff' stroke-width='3.4'/%3E%3C/svg%3E"); } .atout h3 { margin: 34px 0 14px; font-size: 36px; transform: translateZ(40px); } .atout p { margin: 0; font-size: 15.5px; transform: translateZ(20px); } /* --- Partenaires : logos défilants --------------------------------------------------- */ .partenaires { padding: 130px 0 120px; } .partenaires__entete { display: grid; justify-items: center; gap: 40px; } .partenaires__entete .titre-section:where(:not(.elementor-widget)), .partenaires__entete .titre-section:where(.elementor-widget-heading) > :where(.elementor-heading-title) { font-size: clamp(40px, 4.4vw, 62px); } .partenaires__fournisseur { display: flex; gap: 22px; align-items: center; max-width: 660px; padding: 22px 26px; background: var(--gris); border-left: 4px solid var(--bleu); } .partenaires__fournisseur img { width: 110px; flex: none; --sc-grow: 0; --sc-shrink: 0; --sc-basis: auto; } .partenaires__fournisseur p { margin: 0; font-size: 15px; line-height: 1.55; } .logos-defilant { --ecart: 26px; margin-top: 70px; } .logos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ecart); } .logos__item { display: grid; place-items: center; width: 190px; height: 110px; padding: 18px 22px; background: var(--blanc); border: 1px solid var(--gris-trait); } /* logos en couleurs d'origine (demande du client) ; léger zoom au survol */ .logos__item img { max-height: 70px; width: auto; object-fit: contain; transition: transform .3s; } .logos__item:hover img { transform: scale(1.06); } .logos-defilant.est-anime { display: flex; gap: var(--ecart); overflow: hidden; padding-block: 16px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .logos-defilant.est-anime .logos { flex: none; flex-wrap: nowrap; min-width: 100%; animation: defiler-logos var(--duree, 60s) linear infinite; --sc-grow: 0; --sc-shrink: 0; --sc-basis: auto; } .logos-defilant.est-anime:hover .logos { animation-play-state: paused; } .logos-defilant.est-anime .logos__item { flex: none; --sc-grow: 0; --sc-shrink: 0; --sc-basis: auto; } @keyframes defiler-logos { to { transform: translateX(calc(-100% - var(--ecart))); } } /* --- Bandeau d'appel ---------------------------------------------------------------- */ .appel { position: relative; isolation: isolate; overflow: hidden; padding: 110px 0; background: radial-gradient(circle at 85% 50%, rgba(55, 72, 169, .6), transparent 55%), var(--nuit); color: var(--blanc); } .appel__grille { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; } .appel h2 { font-size: clamp(48px, 5.6vw, 84px); color: var(--blanc); } .appel__texte:where(:not(.elementor-widget)), .appel__texte:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { margin: 24px 0 0; max-width: 520px; color: rgba(255, 255, 255, .75); font-size: 17px; } .appel .surtitre:where(:not(.elementor-widget)), .appel .surtitre:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { color: #ffb48f; } .appel__actions { display: grid; gap: 16px; justify-items: start; } .appel__tel:where(:not(.elementor-widget)), .appel__tel:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { display: flex; align-items: baseline; gap: 16px; margin: 0; font: 600 40px/1 var(--titre); color: var(--blanc); } .appel__tel em { flex: none; width: 90px; font: normal 700 12px/1 var(--corps); letter-spacing: .2em; text-transform: uppercase; color: #ffb48f; --sc-grow: 0; --sc-shrink: 0; --sc-basis: auto; } .appel__tel a { transition: color .2s; } .appel__tel a:hover { color: var(--orange); } .appel .bouton:where(:not(.elementor-widget)), .appel .bouton:where(.elementor-widget-button) > .elementor-button { margin-top: 18px; box-shadow: var(--relief) var(--relief) 0 var(--bleu); } .appel .bouton:hover:where(:not(.elementor-widget)), .appel .bouton:hover:where(.elementor-widget-button) > .elementor-button { box-shadow: 3px 3px 0 var(--bleu); } /* --- Pied de page ---------------------------------------------------------------------- */ .pied { background: var(--nuit); color: rgba(255, 255, 255, .7); font-size: 15px; } .pied__grille { display: grid; grid-template-columns: 1.3fr .8fr 1fr 1.1fr; gap: 50px; padding: 100px 0 70px; } .logo--pied img { width: 130px; height: 130px; } .pied__apropos p { margin: 22px 0 26px; line-height: 1.7; } .pied h4 { margin: 10px 0 26px; font-size: 26px; color: var(--blanc); } .pied h4::after { content: '.'; color: var(--orange); } .pied__liens:where(:not(.elementor-widget)), .pied__liens:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { display: grid; gap: 12px; } .pied__liens a { transition: color .2s, padding .2s; } .pied__liens a:hover { color: var(--orange); padding-left: 6px; } .pied__contact:where(:not(.elementor-widget)), .pied__contact:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { display: grid; gap: 14px; } .pied__contact li { display: flex; gap: 12px; align-items: flex-start; } .pied__contact li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; background: var(--orange); -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat; --sc-grow: 0; --sc-shrink: 0; --sc-basis: auto; } .pied__contact li:nth-child(1) { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h20v14H2zm2 2v.5l8 5 8-5V7l-8 5z'/%3E%3C/svg%3E"); } .pied__contact li:nth-child(2), .pied__contact li:nth-child(3) { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E"); } .pied__contact li:nth-child(n + 4) { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); } .pied__contact a:hover { color: var(--blanc); } .reseaux { display: flex; gap: 12px; } .reseaux a { display: grid; place-items: center; width: 44px; height: 44px; background: rgba(255, 255, 255, .08); color: var(--blanc); transition: background .2s, transform .2s; } .reseaux a:hover { background: var(--orange); transform: translate(-2px, -2px); box-shadow: 2px 2px 0 var(--bleu); } .reseaux svg { width: 20px; height: 20px; } .pied__bas { display: flex; justify-content: space-between; gap: 20px; padding: 26px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; } .pied__bas p { margin: 0; } /* --- Bandeau des pages intérieures ------------------------------------------------------ */ .bandeau-page { position: relative; isolation: isolate; overflow: hidden; padding: 120px var(--gouttiere) 110px; text-align: center; color: var(--blanc); background: linear-gradient(118deg, var(--bleu-fonce), var(--bleu) 60%, #4557c4); } .bandeau-page h1 { font-size: clamp(56px, 7vw, 100px); color: var(--blanc); } .fil:where(:not(.elementor-widget)), .fil:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin: 18px 0 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); } .fil [aria-current] { color: var(--blanc); } .bandeau-page__intro:where(:not(.elementor-widget)), .bandeau-page__intro:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { max-width: 640px; margin: 22px auto 0; color: rgba(255, 255, 255, .8); } /* --- Retour en haut --------------------------------------------------------------------- */ .retour-haut { position: fixed; right: 26px; bottom: 26px; z-index: 90; display: grid; place-items: center; width: 52px; height: 52px; background: var(--orange); color: var(--blanc); box-shadow: 4px 4px 0 var(--nuit); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s, transform .3s, visibility .3s; } .retour-haut.est-visible { opacity: 1; visibility: visible; transform: none; } .retour-haut svg { width: 24px; height: 24px; } /* --- Apparition en profondeur au défilement (posée par le script) ------------------------- */ .anime { opacity: 0; transform: perspective(1200px) rotateX(16deg) translate3d(0, 50px, -60px); transform-origin: 50% 100%; } .anime.est-visible { opacity: 1; transform: none; transition: opacity .9s ease var(--anime-delai, 0s), transform 1s cubic-bezier(.2, .7, .2, 1) var(--anime-delai, 0s); } @media (prefers-reduced-motion: reduce) { .anime, .anime.est-visible { opacity: 1; transform: none; transition: none; } } /* ========================================================================== Pages intérieures ========================================================================== */ /* --- Catalogue : filtres par gamme, recherche, grille de cartes ------------------------------- */ .catalogue { padding: 90px 0 110px; } .catalogue__outils { display: grid; grid-template-columns: 1fr 320px; gap: 30px; align-items: start; } .filtres { display: flex; flex-wrap: wrap; gap: 10px; } .filtre { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; font: 500 14px/1 var(--corps); color: var(--nuit); background: var(--blanc); border: 1px solid var(--gris-trait); cursor: pointer; transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s; } .filtre span { font-size: 12px; color: var(--texte-doux); } .filtre:hover { border-color: var(--nuit); } .filtre.est-actif { background: var(--nuit); border-color: var(--nuit); color: var(--blanc); box-shadow: 4px 4px 0 var(--orange); transform: translate(-2px, -2px); } .filtre.est-actif span { color: #ffb48f; } .recherche { position: relative; display: block; } .recherche svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--texte-doux); pointer-events: none; } .recherche input { width: 100%; height: 52px; padding: 0 16px 0 48px; font: 400 15px var(--corps); color: var(--nuit); background: var(--gris); border: 1px solid var(--gris-trait); border-radius: 0; outline: none; transition: border-color .2s, background .2s; } .recherche input:focus { border-color: var(--bleu); background: var(--blanc); } .catalogue__compte { margin: 34px 0 22px; font-size: 15px; } .catalogue__compte strong { font: 600 26px var(--titre); color: var(--nuit); } .catalogue__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } .catalogue__item[hidden] { display: none; } .catalogue__vide { margin: 40px 0 0; padding: 30px; text-align: center; background: var(--gris); } .catalogue__vide a { color: var(--orange); font-weight: 500; } .carte-produit--catalogue { height: 100%; border: 1px solid var(--gris-trait); box-shadow: none; } .carte-produit--catalogue:hover { border-color: transparent; box-shadow: 0 40px 60px -30px rgba(6, 22, 58, .45); } .carte-produit--catalogue .carte-produit__visuel { background: var(--gris); transform-style: preserve-3d; } .carte-produit--catalogue .carte-produit__visuel img { mix-blend-mode: multiply; transition: transform .35s cubic-bezier(.2, .7, .3, 1); } .carte-produit--catalogue:hover .carte-produit__visuel img { transform: translateZ(40px) scale(1.04); } .carte-produit--catalogue .carte-produit__nom { font-size: 21px; padding-bottom: 12px; min-height: 0; } .carte-produit__lien { margin-top: auto; padding: 0 22px 22px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bleu); } .carte-produit__lien::after { content: ' →'; transition: margin .2s; } .carte-produit:hover .carte-produit__lien::after { margin-left: 6px; } .avantages { padding: 0 0 120px; } .avantages__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--nuit); box-shadow: 14px 14px 0 var(--orange); } .avantage { padding: 44px 40px; color: rgba(255, 255, 255, .75); border-left: 1px solid rgba(255, 255, 255, .1); } .avantage:first-child { border-left: 0; } .avantage::before { content: ""; display: block; width: 48px; height: 48px; background: var(--orange); -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat; } .avantage--livraison { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M4 14h24v18H4zM28 20h9l7 7v5H28z' fill='none' stroke='%23000' stroke-width='3'/%3E%3Ccircle cx='12' cy='36' r='4' fill='none' stroke='%23000' stroke-width='3'/%3E%3Ccircle cx='36' cy='36' r='4' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E"); } .avantage--installation { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M30 6l12 12-20 20H10V26z' fill='none' stroke='%23000' stroke-width='3'/%3E%3Cpath d='M26 10l12 12' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E"); } .avantage--reassort { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M8 24a16 16 0 1 1 6 12.5' fill='none' stroke='%23000' stroke-width='3'/%3E%3Cpath d='M8 38v-8h8' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E"); } .avantage h3 { margin: 18px 0 10px; font-size: 30px; color: var(--blanc); } .avantage p { margin: 0; font-size: 15px; } /* --- Fiche produit ----------------------------------------------------------------------------- */ .fiche { padding: 50px 0 110px; background: var(--gris); } .description { background: var(--blanc); } .fil--sombre { justify-content: flex-start; margin: 0 0 40px; color: var(--texte-doux); } .fil--sombre a:hover { color: var(--orange); } .fil--sombre [aria-current] { color: var(--nuit); } .fiche__grille { display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: start; } .galerie__scene { position: relative; aspect-ratio: 1; background: var(--blanc); box-shadow: var(--ombre); border-top: 5px solid var(--orange); transform-style: preserve-3d; } .galerie__vue { position: absolute; inset: 44px; width: calc(100% - 88px); height: calc(100% - 88px); object-fit: contain; opacity: 0; transform: translateZ(0) scale(.96); transition: opacity .45s, transform .6s cubic-bezier(.2, .7, .3, 1); } .galerie__vue.est-active { opacity: 1; transform: translateZ(50px); } .galerie__vignettes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 18px; } .galerie__vignettes button { display: block; width: 100%; aspect-ratio: 1; padding: 6px; background: var(--blanc); border: 2px solid var(--gris-trait); cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; } .galerie__vignettes button:hover { border-color: var(--bleu); } .galerie__vignettes button.est-active { border-color: var(--orange); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--nuit); } .galerie__vignettes img { width: 100%; height: 100%; object-fit: contain; } .fiche__gamme { display: inline-block; margin-bottom: 18px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); } .fiche h1 { font-size: clamp(44px, 4.4vw, 64px); line-height: .98; } .fiche__resume { margin: 26px 0 28px; font-size: 18px; line-height: 1.65; color: var(--nuit); } .points-forts { display: grid; gap: 12px; margin: 0 0 38px; } .points-forts li { position: relative; padding-left: 34px; font-size: 15.5px; line-height: 1.5; } .points-forts li::before { content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background: var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E") center/contain no-repeat; box-shadow: 3px 3px 0 var(--orange); } .bouton--sombre { background: var(--nuit); border-color: var(--nuit); box-shadow: var(--relief) var(--relief) 0 var(--orange); } .bouton--sombre:hover { background: var(--bleu); border-color: var(--bleu); box-shadow: 3px 3px 0 var(--orange); } .fiche__services { display: grid; gap: 10px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--gris-trait); font-size: 14.5px; } .fiche__services li { padding-left: 26px; position: relative; } .fiche__services li::before { content: ''; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border: 3px solid var(--orange); } .description { padding: 30px 0 120px; } .description__grille { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; border-top: 5px solid var(--nuit); padding-top: 60px; } .description__texte { font-size: 16.5px; } .description__texte h3 { margin: 34px 0 12px; font-size: 32px; } .description__texte ul { display: grid; gap: 8px; padding-left: 0; } .description__texte li { padding-left: 22px; position: relative; } .description__texte li::before { content: ''; position: absolute; left: 0; top: 11px; width: 10px; height: 3px; background: var(--orange); } .similaires { padding: 110px 0; background: var(--gris); } .catalogue__grille--similaires { margin-top: 60px; } /* --- Qui sommes-nous ----------------------------------------------------------------------------- */ .histoire { padding: 120px 0 90px; } .histoire__grille { display: grid; grid-template-columns: 1fr 1.05fr; gap: 80px; align-items: center; } .histoire__texte .titre-section:where(:not(.elementor-widget)), .histoire__texte .titre-section:where(.elementor-widget-heading) > :where(.elementor-heading-title) { margin-bottom: 26px; } .histoire__visuel { position: relative; padding: 40px 0 40px 40px; } .histoire__visuel::before { content: ""; position: absolute; inset: 0 60px 0 0; background: var(--bleu); transform: translateZ(-30px); } .histoire__visuel img { position: relative; width: 100%; background: var(--blanc); box-shadow: var(--ombre); transform: translateZ(40px); } .chiffres-bande { padding: 0 0 120px; } .chiffres--bande { margin-top: 0; margin-bottom: 0; transform: none; } .atouts--blanc { background: var(--gris); } .agences-bloc { padding: 120px 0; } .agences-bloc__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 980px; margin: 60px auto 0; } .carte-agence { display: flex; flex-direction: column; gap: 6px; padding: 44px 44px 40px; background: var(--nuit); color: rgba(255, 255, 255, .75); box-shadow: 12px 12px 0 var(--orange); --sc-direction: column; } .carte-agence .carte-agence__ville:where(:not(.elementor-widget)), .carte-agence .carte-agence__ville:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { margin: 0 0 8px; font: 600 54px/1 var(--titre); color: var(--blanc); transform: translateZ(40px); } .carte-agence p { margin: 0 0 14px; } .carte-agence__tels:where(:not(.elementor-widget)), .carte-agence__tels:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { display: grid; gap: 6px; } .carte-agence__tels a { display: block; font: 600 26px/1.3 var(--titre); color: var(--blanc); transition: color .2s; } .carte-agence a:hover { color: var(--orange); } /* --- Partenaires ------------------------------------------------------------------------------------ */ .fournisseur { padding: 120px 0; } .fournisseur__grille { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; } .fournisseur__logo { display: grid; place-items: center; aspect-ratio: 1.15; padding: 60px; background: var(--gris); border-top: 5px solid var(--orange); box-shadow: 16px 16px 0 var(--bleu); } .fournisseur__logo img { width: 80%; transform: translateZ(60px); } .fournisseur .titre-section:where(:not(.elementor-widget)), .fournisseur .titre-section:where(.elementor-widget-heading) > :where(.elementor-heading-title) { margin-bottom: 26px; } .fournisseur .bouton:where(:not(.elementor-widget)), .fournisseur .bouton:where(.elementor-widget-button) > .elementor-button { margin-top: 16px; } .clients { padding: 110px 0 130px; background: var(--gris); } .clients__grille { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 60px; } .client { display: grid; place-items: center; aspect-ratio: 1.5; padding: 18px; background: var(--blanc); border: 1px solid var(--gris-trait); } .client:hover { border-color: transparent; box-shadow: 0 30px 50px -28px rgba(6, 22, 58, .45); } .client img { max-height: 76px; width: auto; object-fit: contain; transform: translateZ(30px); } /* --- Prestations ------------------------------------------------------------------------------------- */ .prestations { padding: 120px 0; } .prestation { display: grid; grid-template-columns: 1.1fr 1fr; gap: 90px; align-items: center; margin-bottom: 130px; } .prestation--inverse .prestation__visuel { order: 2; } .prestation__visuel { position: relative; box-shadow: 18px 18px 0 var(--bleu); } .prestation--inverse .prestation__visuel { box-shadow: -18px 18px 0 var(--orange); } .prestation__visuel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .prestation__numero:where(:not(.elementor-widget)), .prestation__numero:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { margin: 0; position: absolute; top: -40px; right: 30px; font: 700 120px/1 var(--titre); color: var(--blanc); -webkit-text-stroke: 2px var(--nuit); transform: translateZ(70px); } .prestation h2 { font-size: clamp(40px, 4vw, 58px); margin-bottom: 22px; } .prestation__description:where(:not(.elementor-widget)), .prestation__description:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { margin: 0; font-size: 17px; } .prestations__encore:where(:not(.elementor-widget)), .prestations__encore:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { margin: 0; padding: 40px; text-align: center; font: 600 36px/1.2 var(--titre); color: var(--nuit); background: var(--gris); } .prestations__encore a { color: var(--orange); box-shadow: inset 0 -3px 0 var(--orange); } /* --- Contact ----------------------------------------------------------------------------------------- */ .coordonnees { padding: 110px 0 60px; } .coordonnees__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; } .agence-carte { background: var(--blanc); box-shadow: var(--ombre); border-top: 5px solid var(--orange); } .agence-carte__plan { aspect-ratio: 16 / 10; background: var(--gris); } .agence-carte__plan iframe { display: block; width: 100%; height: 100%; border: 0; } .agence-carte__texte { padding: 32px 36px 36px; } .agence-carte__ville:where(:not(.elementor-widget)), .agence-carte__ville:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { display: block; margin-bottom: 10px; font: 600 44px/1 var(--titre); color: var(--nuit); } .agence-carte__tels:where(:not(.elementor-widget)), .agence-carte__tels:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; } .agence-carte__tels a { font: 600 24px/1.3 var(--titre); color: var(--bleu); transition: color .2s; } .agence-carte__tels a:hover { color: var(--orange); } .ecrire { padding: 60px 0 130px; } .ecrire__grille { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; } .ecrire__intro .titre-section:where(:not(.elementor-widget)), .ecrire__intro .titre-section:where(.elementor-widget-heading) > :where(.elementor-heading-title) { margin-bottom: 22px; } .ecrire__mail:where(:not(.elementor-widget)), .ecrire__mail:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { margin: 12px 0 0; font: 600 30px var(--titre); color: var(--nuit); } .ecrire__mail a { box-shadow: inset 0 -3px 0 var(--orange); } .formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; padding: 44px; background: var(--gris); border-top: 5px solid var(--bleu); } .champ { display: grid; gap: 8px; font-size: 14px; font-weight: 500; color: var(--nuit); } .champ--large { grid-column: 1 / -1; } .champ input, .champ textarea { width: 100%; padding: 14px 16px; font: 400 16px var(--corps); color: var(--nuit); background: var(--blanc); border: 1px solid var(--gris-trait); border-radius: 0; outline: none; transition: border-color .2s, box-shadow .2s; } .champ input:focus, .champ textarea:focus { border-color: var(--bleu); box-shadow: 4px 4px 0 var(--bleu); } .champ textarea { resize: vertical; } .formulaire .bouton:where(:not(.elementor-widget)), .formulaire .bouton:where(.elementor-widget-button) > .elementor-button { justify-self: start; } /* ========================================================================== Adaptation aux écrans ========================================================================== */ @media (max-width: 1280px) { .menu { gap: 20px; } .menu>li>a { font-size: 13px; } .gammes__grille { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 1200px) { .entete nav { position: fixed; inset: 96px 0 0; margin: 0; padding: 20px var(--gouttiere) 40px; background: var(--blanc); overflow-y: auto; transform: translateX(100%); transition: transform .35s; } .entete.menu-ouvert nav { transform: none; } .menu { flex-direction: column; align-items: stretch; gap: 0; --sc-direction: column; } .menu>li>a { padding: 18px 0; border-bottom: 1px solid var(--gris-trait); font-size: 15px; } .langues { padding: 18px 0; gap: 14px; } .menu>li.langues>.langue { padding: 3px; border-bottom-width: 2px; } .langue img { width: 36px; height: 24px; } .menu>li.actif>a { box-shadow: none; } .sous-menu { position: static; min-width: 0; padding: 4px 0 10px 12px; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; } .burger { display: grid; place-items: center; } .entete__barre>.bouton:where(:not(.elementor-widget)), .entete__barre>.bouton:where(.elementor-widget-button) > .elementor-button { margin-left: auto; } .entete__barre>.bouton+.burger { margin-left: 0; } } @media (max-width: 1024px) { .heros__grille { grid-template-columns: 1fr; min-height: 0; padding-block: 80px 140px; } .heros__vitrine { height: 480px; max-width: 620px; width: 100%; margin: 40px auto 0; } .chiffres { grid-template-columns: repeat(2, 1fr); } .chiffre:nth-child(3) { border-left: 0; } .chiffre:nth-child(n + 3) { border-top: 1px solid var(--gris-trait); } .gammes { padding-top: 250px; } .gammes__grille { grid-template-columns: repeat(3, 1fr); } .apropos__grille, .partenaires__entete, .appel__grille { grid-template-columns: 1fr; gap: 50px; } .atouts__grille { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; } .pied__grille { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { :root { --gouttiere: 18px; } .entete__barre { height: 78px; gap: 14px; } .entete nav { inset: 78px 0 0; } .logo img { width: 64px; height: 64px; } .entete__barre>.bouton:where(:not(.elementor-widget)), .entete__barre>.bouton:where(.elementor-widget-button) > .elementor-button { display: none; } .burger { margin-left: auto !important; } .heros h1 { font-size: 64px; } .heros__intro:where(:not(.elementor-widget)), .heros__intro:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { font-size: 16px; } .heros__vitrine { height: 400px; } .flottant { width: 130px; } .flottant--1 { left: 0; top: 0; } .flottant--2 { left: 6%; bottom: 0; } .flottant--3 { right: 0; } .flottant--3 { width: 120px; } .flottant__legende:where(:not(.elementor-widget)), .flottant__legende:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { font-size: 14px; } .boutons .bouton:where(:not(.elementor-widget)), .boutons .bouton:where(.elementor-widget-button) > .elementor-button { width: 100%; } .chiffres { grid-template-columns: 1fr 1fr; } .chiffre { flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px 18px; --sc-direction: column; } .chiffre__nombre { font-size: 48px; } .gammes { padding: 230px 0 90px; } .gammes__grille { grid-template-columns: repeat(2, 1fr); gap: 14px; } .carte-gamme__nom { font-size: 19px; padding: 14px 14px 4px; } .carte-gamme__nombre { padding: 0 14px 14px; } .apropos { padding-bottom: 100px; } .apropos__visuel { padding: 0 20px 50px 0; } .apropos__visuel::before { inset: 40px 0 0 40px; } .apropos__badge { width: 150px; height: 130px; padding: 18px; } .apropos__badge-nombre:where(:not(.elementor-widget)), .apropos__badge-nombre:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { font-size: 56px; } .agences:where(:not(.elementor-widget)), .agences:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { grid-template-columns: 1fr; } .vitrine, .atouts, .partenaires { padding-block: 90px; } .carrousel__piste { height: 430px; } .carrousel__item { width: 250px; margin-left: -125px; transform: translateX(calc(var(--d) * 200px)) translateZ(calc(var(--a) * -200px)) rotateY(calc(var(--d) * -36deg)); } .carrousel__commandes .bouton:where(:not(.elementor-widget)), .carrousel__commandes .bouton:where(.elementor-widget-button) > .elementor-button { display: none; } .atout { padding: 40px 28px; } .appel { padding: 90px 0; } .appel__tel:where(:not(.elementor-widget)), .appel__tel:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { font-size: 32px; } .pied__grille { grid-template-columns: 1fr; gap: 36px; padding: 80px 0 50px; } .pied__bas { flex-direction: column; --sc-direction: column; } } /* --- Pages intérieures : tablette et mobile ------------------------------------------------------- */ @media (max-width: 1100px) { .catalogue__outils { grid-template-columns: 1fr; } .catalogue__grille { grid-template-columns: repeat(3, 1fr); } .clients__grille { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 1024px) { .fiche__grille, .description__grille, .histoire__grille, .fournisseur__grille, .prestation, .coordonnees__grille, .ecrire__grille { grid-template-columns: 1fr; gap: 50px; } .prestation--inverse .prestation__visuel { order: 0; } .prestation { margin-bottom: 100px; } .avantages__grille { grid-template-columns: 1fr; } .avantage { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .1); } .avantage:first-child { border-top: 0; } .agences-bloc__grille { grid-template-columns: 1fr; } } @media (max-width: 640px) { .bandeau-page { padding: 80px var(--gouttiere) 70px; } .catalogue { padding: 60px 0 80px; } .filtres { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gouttiere)); padding: 4px var(--gouttiere) 10px; scrollbar-width: none; } .filtre { flex: none; --sc-grow: 0; --sc-shrink: 0; --sc-basis: auto; } .catalogue__grille { grid-template-columns: repeat(2, 1fr); gap: 14px; } .carte-produit--catalogue .carte-produit__nom { font-size: 17px; padding: 6px 12px 10px; } .carte-produit--catalogue .carte-produit__gamme { padding: 12px 12px 0; font-size: 10px; } .carte-produit__lien { padding: 0 12px 14px; font-size: 11px; } .avantages { padding-bottom: 80px; } .avantage { padding: 34px 26px; } .fiche { padding: 34px 0 80px; } .galerie__vue { inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); } .galerie__vignettes { gap: 8px; } .description { padding-bottom: 80px; } .similaires, .agences-bloc, .clients, .fournisseur, .prestations, .histoire { padding-block: 80px; } .clients__grille { grid-template-columns: repeat(2, 1fr); gap: 12px; } .carte-agence { padding: 34px 28px; } .carte-agence .carte-agence__ville:where(:not(.elementor-widget)), .carte-agence .carte-agence__ville:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { font-size: 44px; } .prestation__numero:where(:not(.elementor-widget)), .prestation__numero:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { font-size: 84px; top: -28px; } .prestations__encore:where(:not(.elementor-widget)), .prestations__encore:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { font-size: 28px; padding: 30px 20px; } .formulaire { grid-template-columns: 1fr; padding: 28px 22px; } .agence-carte__texte { padding: 26px 22px 28px; } .ecrire__mail:where(:not(.elementor-widget)), .ecrire__mail:where(.elementor-widget-text-editor) > :where(:not(.elementor-element-overlay, .ui-resizable-handle)) { font-size: 24px; } } /* --- Fiche produit : caractéristiques et produit associé --------------------------------------------- */ .caracteristiques { width: 100%; margin-top: 6px; border-collapse: collapse; font-size: 15px; } .caracteristiques th, .caracteristiques td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--gris-trait); } .caracteristiques tr:nth-child(odd) { background: var(--gris); } .caracteristiques th { width: 38%; font-weight: 500; color: var(--nuit); } .description__associe { margin: 26px 0 0; padding: 18px 22px; background: var(--gris); border-left: 4px solid var(--orange); font-weight: 500; color: var(--nuit); } .description__associe a { color: var(--bleu); box-shadow: inset 0 -2px 0 var(--orange); } @media (max-width: 640px) { .caracteristiques th, .caracteristiques td { padding: 11px 12px; font-size: 14px; } .caracteristiques th { width: 44%; } } /* ========================================================================== Adaptations Gutenberg Tout ce qui précède est la feuille de la maquette, reprise telle quelle. Ici : ce que change le passage en blocs natifs (DOM des blocs, formulaires Contact Form 7, codes courts). ========================================================================== */ /* --- Espacement automatique : coupé dans theme.json (blockGap null), filet à spécificité nulle */ :where(.wp-block-group)>:where(*), :where(.wp-block-buttons) { margin-block: 0; } :where(figure.wp-block-image) { margin: 0; } :where(.wp-block-image) img { height: auto; } .wp-site-blocks { overflow-x: clip; } /* --- Boutons (éditeur de blocs) : la classe du bloc est sur le conteneur div.wp-block-button ; le lien, neutralisé, couvre sa surface pour que tout le bouton reste cliquable. */ .wp-block-buttons>.wp-block-button.bouton:where(:not(.elementor-widget)), .wp-block-buttons>.wp-block-button.bouton:where(.elementor-widget-button) > .elementor-button { position: relative; } .wp-block-buttons.is-layout-flex { flex-wrap: wrap; } .wp-block-button.bouton .wp-block-button__link { all: unset; cursor: pointer; } .wp-block-button.bouton .wp-block-button__link::before { content: ""; position: absolute; inset: 0; } /* --- Formulaire Contact Form 7 : la grille de la maquette passe du cadre (.formulaire) au formulaire lui-même */ .formulaire .wpcf7 { grid-column: 1 / -1; } .formulaire .wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; } .formulaire .wpcf7-form>.hidden-fields-container, .formulaire .wpcf7-form>fieldset.hidden-fields-container { display: none; } .formulaire .wpcf7-form-control-wrap { display: grid; } /* champ = élément de grille, comme dans le