/* ========================================================= DERICE — v14 « DEUX PÔLES » Refonte — ATOM Services Direction : le site est STRUCTURÉ PAR LES DEUX PÔLES. - Accueil : hero en écran partagé, moitié sombre « DERICE Bâtiment » / moitié claire « DERICE Industrie », séparées par une couture diagonale. Deux moitiés entièrement cliquables. - Pôle Bâtiment (index, réalisations, à propos, recrutement, contact, mentions) = thème SOMBRE CHARBON → - Pôle Industrie (industrie.html) = thème CLAIR RAL 7035 → - Le header rappelle le pôle actif : commutateur « Bâtiment | Industrie » (.poleswitch) + liseré .polebar sous la barre de nav. COULEUR D'IDENTITÉ = RAL 7035 (#d7d7d7) DANS LES DEUX THÈMES : - thème sombre : RAL 7035 est l'ACCENT (logo, boutons, filets) ; - thème clair : RAL 7035 est le FOND de page (l'aplat porte la marque), l'encre charbon assurant le contraste des textes et des boutons. La variable --ral vaut #d7d7d7 dans les deux thèmes et ne doit pas bouger. Les variables --teal* sont conservées comme ALIAS de --accent* pour ne pas toucher aux sélecteurs historiques (.text-teal, .tealtile…). ========================================================= */ :root { --ral: #d7d7d7; /* RAL 7035 — couleur d'identité, invariante */ --charcoal: #14181a; --charcoal-2: #1c2226; --steel: #2a3338; --steel-light: #39454b; --line: #2c353a; --accent: #d7d7d7; /* RAL 7035 */ --accent-hi: #f2f2f2; --accent-deep: #8a9095; --on-accent: #14181a; /* encre posée SUR un aplat d'accent */ --teal: var(--accent); --teal-hi: var(--accent-hi); --teal-deep: var(--accent-deep); --white: #f4f7f7; --gray: #aeb9bd; --gray-dim: #76858b; --surface-hi: #1f272b; /* survol des tuiles / cartes */ --footer-bg: #0d1113; --header-bg: rgba(15, 19, 21, 0.92); --field-bg: var(--charcoal); --icon-filter: brightness(0) invert(1) opacity(0.85); --maxw: 1240px; --gut: clamp(1.1rem, 4vw, 2.4rem); --radius: 4px; --t: 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); --display: "Oswald", "Arial Narrow", sans-serif; --body: "Barlow", system-ui, sans-serif; } /* ========================================================= THÈME CLAIR — PÔLE INDUSTRIE (industrie.html) Le fond de page EST le RAL 7035 ; les panneaux montent vers le blanc cassé, les textes descendent vers le charbon. ========================================================= */ body.theme-industrie { --charcoal: #d7d7d7; /* fond de page = RAL 7035 */ --charcoal-2: #ecedee; /* panneaux / sections alternées */ --steel: #c3c6c8; --steel-light: #a4abae; --line: #b9bec1; --accent: #171c1f; /* encre charbon = couleur d'interaction */ --accent-hi: #05080a; --accent-deep: #6f787c; --on-accent: #f2f3f3; /* Les alias sont résolus à l'élément qui les déclare : sans cette redéclaration, --teal* garderait les valeurs sombres de :root. */ --teal: var(--accent); --teal-hi: var(--accent-hi); --teal-deep: var(--accent-deep); --white: #14181a; /* titres : charbon sur clair */ --gray: #4a5257; --gray-dim: #737d82; --surface-hi: #ffffff; --footer-bg: #c6c8c9; --header-bg: rgba(233, 234, 234, 0.93); --field-bg: #ffffff; --icon-filter: brightness(0) opacity(0.78); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--body); background: var(--charcoal); color: var(--gray); line-height: 1.6; font-size: 1.02rem; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* ---------- Typo helpers ---------- */ .display, h1, h2, h3, .h { font-family: var(--display); color: var(--white); text-transform: uppercase; font-weight: 700; line-height: 1.08; letter-spacing: 0.01em; } h1 { font-size: clamp(2.7rem, 9vw, 6.4rem); } h2 { font-size: clamp(2rem, 5.5vw, 3.6rem); } h3 { font-size: clamp(1.2rem, 2.4vw, 1.55rem); } .eyebrow { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.32em; font-weight: 600; font-size: 0.78rem; color: var(--teal-hi); display: inline-flex; align-items: center; gap: 0.7rem; } .eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--teal); } .lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--gray); } .text-teal { color: var(--teal-hi); } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); } .section { padding: clamp(4rem, 9vw, 7.5rem) 0; position: relative; } .section--alt { background: var(--charcoal-2); } .section-head { max-width: 720px; margin-bottom: clamp(2rem, 5vw, 3.2rem); } .section-head h2 { margin: 0.8rem 0 0.9rem; } /* diagonal cuts between sections */ .cut-top { clip-path: polygon(0 3.5vw, 100% 0, 100% 100%, 0 100%); } .cut-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5vw), 0 100%); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; font-size: 0.95rem; padding: 0.95rem 1.7rem; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: var(--t); line-height: 1; white-space: nowrap; } .btn--primary { background: var(--teal); color: var(--on-accent); } .btn--primary:hover { background: var(--teal-hi); transform: translateY(-2px); box-shadow: 0 12px 30px -12px var(--teal); } .btn--ghost { background: transparent; color: var(--white); border-color: var(--steel-light); } .btn--ghost:hover { border-color: var(--teal); color: var(--teal-hi); transform: translateY(-2px); } .btn .arrow { transition: transform var(--t); } .btn:hover .arrow { transform: translateX(4px); } /* ---------- Header ---------- */ .header { position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 1.1rem 0; transition: var(--t); border-bottom: 1px solid transparent; } .header.scrolled { background: var(--header-bg); backdrop-filter: blur(10px); border-bottom-color: var(--line); padding: 0.65rem 0; } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; } .brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--accent); } .brand__mark { width: 38px; height: 38px; flex: none; fill: var(--accent); transition: var(--t); } .brand:hover .brand__mark { fill: var(--accent-hi); transform: rotate(30deg); } .brand__text { display: flex; flex-direction: column; line-height: 1; } .brand__word { font-family: var(--display); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); } .brand__sub { font-family: var(--display); font-weight: 500; font-size: 0.6rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gray); margin-top: 0.22rem; padding-left: 0.1em; } /* Le sous-titre du pôle est mis en cartouche : c'est lui qui nomme le pôle. */ .header .brand__sub { align-self: flex-start; color: var(--on-accent); background: var(--accent); letter-spacing: 0.3em; padding: 0.16rem 0.42rem 0.12rem 0.5rem; border-radius: 2px; } .brand--industrie .brand__sub { color: var(--accent-hi); } .header .brand--industrie .brand__sub { color: var(--on-accent); } .header.scrolled .brand__mark { width: 32px; height: 32px; } .brand--lg .brand__mark { width: 60px; height: 60px; } .brand--lg .brand__word { font-size: 2.3rem; } .brand--lg .brand__sub { font-size: 0.85rem; } /* ---------- Commutateur de pôle (rappel du pôle actif) ---------- */ .poleswitch { display: inline-flex; align-items: stretch; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--charcoal-2); flex: none; } .poleswitch a { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; font-size: 0.68rem; color: var(--gray-dim); padding: 0.45rem 0.95rem; border-radius: 999px; transition: var(--t); white-space: nowrap; } .poleswitch__dot { width: 7px; height: 7px; flex: none; background: currentColor; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); opacity: 0.55; transition: var(--t); } .poleswitch a:hover { color: var(--white); } .poleswitch a:hover .poleswitch__dot { opacity: 1; } .poleswitch a.is-active { background: var(--accent); color: var(--on-accent); } .poleswitch a.is-active .poleswitch__dot { opacity: 1; } /* Liseré de pôle sous le header : sombre = Bâtiment, clair = Industrie */ .polebar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 101; pointer-events: none; background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 46%, var(--steel-light) 46%, var(--steel-light) 100%); } body.theme-industrie .polebar { background: linear-gradient(90deg, var(--steel-light) 0%, var(--steel-light) 54%, var(--accent) 54%, var(--accent) 100%); } .nav { display: flex; align-items: center; gap: 0.3rem; } .nav a { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; font-size: 0.92rem; color: var(--gray); padding: 0.5rem 0.95rem; position: relative; white-space: nowrap; transition: color var(--t); } .nav a::after { content: ""; position: absolute; left: 0.95rem; right: 0.95rem; bottom: 0.2rem; height: 2px; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform var(--t); } .nav a:hover, .nav a.active { color: var(--white); } .nav a:hover::after, .nav a.active::after { transform: scaleX(1); } .nav .btn { margin-left: 0.8rem; padding: 0.7rem 1.2rem; } .burger { display: none; background: none; border: 1px solid var(--steel-light); border-radius: var(--radius); width: 46px; height: 42px; cursor: pointer; position: relative; flex: none; } .burger span, .burger span::before, .burger span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; background: var(--white); transform: translate(-50%, -50%); transition: var(--t); } .burger span::before { top: -7px; } .burger span::after { top: 7px; } .burger.open span { background: transparent; } .burger.open span::before { top: 0; transform: translate(-50%, -50%) rotate(45deg); } .burger.open span::after { top: 0; transform: translate(-50%, -50%) rotate(-45deg); } /* Entre 901 et 1340 px, le commutateur de pôle serre la nav : on resserre */ @media (min-width: 901px) and (max-width: 1340px) { .nav a { padding: 0.5rem 0.62rem; font-size: 0.85rem; } .nav a::after { left: 0.62rem; right: 0.62rem; } .nav .btn { margin-left: 0.5rem; padding: 0.65rem 0.9rem; font-size: 0.82rem; } .poleswitch a { font-size: 0.62rem; padding: 0.42rem 0.75rem; letter-spacing: 0.12em; } } /* ========================================================= HERO EN ÉCRAN PARTAGÉ — LES DEUX PÔLES (accueil) ========================================================= */ .splithero { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding-top: clamp(5.8rem, 9vw, 6.4rem); background: radial-gradient(120% 90% at 8% 0%, var(--charcoal-2) 0%, var(--charcoal) 62%); overflow: hidden; } .splithero__intro { position: relative; padding-bottom: clamp(1.1rem, 2.6vw, 1.9rem); max-width: 1060px; } .splithero__intro h1 { font-size: clamp(2.3rem, 6vw, 3.9rem); margin: 0.7rem 0 0.8rem; } .splithero h1 .accent { color: var(--teal-hi); display: block; } .splithero__intro .lead { max-width: 680px; margin-bottom: 1.15rem; color: var(--white); opacity: 0.92; } .splithero .hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; } .splithero .hero__scroll { position: static; writing-mode: horizontal-tb; width: fit-content; margin-top: 0.9rem; } .splithero .hero__scroll::after { width: 54px; height: 1px; background: linear-gradient(90deg, var(--teal), transparent); } .splithero__grid { flex: 1; display: grid; grid-template-columns: 1fr; gap: 2px; min-height: min(50svh, 440px); } @media (min-width: 900px) { .splithero__grid { grid-template-columns: 1fr 1fr; gap: 0; } } .phalf { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.95rem; padding: clamp(1.7rem, 3.4vw, 3rem); min-height: 330px; transition: var(--t); } .phalf__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transform: scale(1.05); transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); } .phalf:hover .phalf__bg { transform: scale(1.12); } .phalf__veil { position: absolute; inset: 0; z-index: -1; transition: var(--t); } .phalf__tag { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.7rem; font-weight: 600; align-self: flex-start; padding: 0.3rem 0.7rem; border: 1px solid currentColor; border-radius: 2px; opacity: 0.75; } .phalf .brand { pointer-events: none; } .phalf__line { font-size: 1rem; max-width: 46ch; } .phalf__go { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.3rem; } .phalf__go .arrow { transition: transform var(--t); } .phalf:hover .phalf__go .arrow { transform: translateX(6px); } /* Moitié SOMBRE — pôle Bâtiment */ .phalf--bat { color: #b9c3c7; } .phalf--bat .phalf__veil { background: linear-gradient(0deg, rgba(10, 13, 14, 0.95) 34%, rgba(13, 18, 20, 0.6) 76%, rgba(13, 18, 20, 0.34) 100%); } .phalf--bat .phalf__bg { filter: saturate(0.72) contrast(1.08); } .phalf--bat .brand__word { color: var(--ral); } .phalf--bat .brand__mark { fill: var(--ral); } .phalf--bat .brand__sub { color: #e9eaea; } .phalf--bat .phalf__tag { color: #8d989d; } .phalf--bat:hover .phalf__veil { background: linear-gradient(0deg, rgba(10, 13, 14, 0.95) 30%, rgba(13, 18, 20, 0.46) 80%, rgba(13, 18, 20, 0.24) 100%); } /* Moitié CLAIRE — pôle Industrie (avant-goût du thème clair RAL 7035) */ .phalf--ind { color: #464e53; background: var(--ral); } .phalf--ind .phalf__veil { background: linear-gradient(0deg, rgba(215, 215, 215, 0.96) 34%, rgba(222, 222, 222, 0.72) 76%, rgba(230, 230, 230, 0.44) 100%); } .phalf--ind .phalf__bg { filter: grayscale(1) brightness(1.28) contrast(1.02); } .phalf--ind .brand__word { color: #14181a; } .phalf--ind .brand__mark { fill: #14181a; } .phalf--ind .brand__sub { color: #14181a; } .phalf--ind .phalf__tag { color: #6f787c; } .phalf--ind:hover .phalf__veil { background: linear-gradient(0deg, rgba(215, 215, 215, 0.96) 30%, rgba(222, 222, 222, 0.56) 80%, rgba(232, 232, 232, 0.32) 100%); } /* Couture diagonale entre les deux pôles (desktop) */ @media (min-width: 900px) { .phalf--bat { clip-path: polygon(0 0, 100% 0, calc(100% - 5vw) 100%, 0 100%); padding-right: 7vw; } .phalf--ind { clip-path: polygon(5vw 0, 100% 0, 100% 100%, 0 100%); margin-left: -5vw; padding-left: 8vw; } .phalf--ind::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 5vw; background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--ral) 50%, transparent calc(50% + 1px)); opacity: 0.55; z-index: 1; pointer-events: none; } } /* ---------- Hero (conservé pour compat) ---------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding-bottom: clamp(3rem, 8vw, 6rem); padding-top: 7rem; isolation: isolate; overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: -2; background: url("/assets/dr2025.jpg") center 30% / cover no-repeat; transform: scale(1.05); } .hero__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, rgba(11,15,16,0.92) 0%, rgba(13,18,20,0.72) 42%, rgba(110,116,120,0.28) 100%), linear-gradient(0deg, rgba(11,14,15,0.95) 0%, rgba(11,14,15,0) 55%); } .hero__inner { max-width: 900px; } .hero h1 { margin: 1rem 0 1.3rem; } .hero h1 .accent { color: var(--teal-hi); display: block; } .hero p { max-width: 560px; margin-bottom: 2rem; color: var(--white); opacity: 0.92; } .hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; } .hero__scroll { position: absolute; right: var(--gut); bottom: 2rem; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.25em; font-size: 0.7rem; color: var(--gray-dim); writing-mode: vertical-rl; display: flex; align-items: center; gap: 0.7rem; } .hero__scroll::after { content: ""; width: 1px; height: 50px; background: linear-gradient(var(--teal), transparent); } /* page hero (interior) */ .pagehero { position: relative; padding: 11rem 0 4.5rem; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line); } .pagehero__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transform: scale(1.05); } .pagehero__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(11,15,16,0.94) 30%, rgba(110,116,120,0.4) 100%); } .pagehero h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); margin: 0.9rem 0 0.6rem; } .pagehero p { max-width: 600px; color: var(--white); opacity: 0.9; } .crumb { font-size: 0.85rem; color: var(--gray-dim); letter-spacing: 0.05em; } .crumb a:hover { color: var(--teal-hi); } /* ---------- Intro / présentation ---------- */ .split { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (min-width: 920px) { .split { grid-template-columns: 1.05fr 0.95fr; } .split--rev > :first-child { order: 2; } } .media-frame { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); } .media-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.05); } .media-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(13,18,20,0.25), rgba(215,215,215,0.18)); mix-blend-mode: multiply; } .media-frame__tag { position: absolute; left: 0; bottom: 0; z-index: 2; background: var(--teal); color: var(--on-accent); font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; font-size: 0.78rem; padding: 0.5rem 1rem; } .feature-list { margin-top: 1.6rem; display: grid; gap: 1rem; } .feature-list li { display: flex; gap: 0.9rem; align-items: flex-start; } .feature-list .mark { color: var(--teal-hi); font-family: var(--display); font-weight: 700; flex: none; margin-top: 0.1rem; } .feature-list strong { color: var(--white); font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; display: block; font-weight: 600; } /* ---------- Métiers grid ---------- */ .metiers { display: grid; gap: 1.1rem; grid-template-columns: repeat(1, 1fr); } @media (min-width: 560px) { .metiers { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 920px) { .metiers { grid-template-columns: repeat(3, 1fr); } } .tile { position: relative; background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem 1.6rem 1.7rem; overflow: hidden; transition: var(--t); display: flex; flex-direction: column; min-height: 220px; } .tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--teal); transform: scaleY(0); transform-origin: top; transition: transform var(--t); } .tile::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; background: radial-gradient(circle, rgba(242,242,242,0.16), transparent 70%); opacity: 0; transition: opacity var(--t); } .tile:hover { transform: translateY(-5px); border-color: var(--teal-deep); background: var(--surface-hi); } .tile:hover::before { transform: scaleY(1); } .tile:hover::after { opacity: 1; } .tile__icon { width: 56px; height: 56px; margin-bottom: 1.1rem; filter: var(--icon-filter); transition: var(--t); } .tile:hover .tile__icon { filter: none; transform: scale(1.06); } .tile h3 { margin-bottom: 0.5rem; } .tile p { font-size: 0.94rem; } .tile .num { position: absolute; right: 1.2rem; top: 1rem; font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--steel-light); transition: color var(--t); } .tile:hover .num { color: var(--teal); } /* ---------- Stats band ---------- */ .stats { background: linear-gradient(rgba(11,15,16,0.86), rgba(11,15,16,0.9)), url("/assets/derice0561.png") center / cover fixed no-repeat; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; } @media (min-width: 800px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } } .stat { text-align: center; position: relative; } .stat__num { font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 6vw, 4rem); color: var(--white); line-height: 1; } .stat__num .text-teal { color: var(--teal-hi); } .stat__label { text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.75rem; color: var(--gray-dim); margin-top: 0.6rem; font-family: var(--display); } /* ---------- Bureau étude / blocs image ---------- */ .bandblock { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); min-height: 360px; display: flex; align-items: flex-end; padding: clamp(1.6rem, 4vw, 3rem); } .bandblock__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; } .bandblock__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,15,16,0.92) 10%, rgba(110,116,120,0.35) 100%); } .bandblock__inner { max-width: 560px; } /* ---------- Galerie réalisations ---------- */ .filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.4rem; } .filters button { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; font-weight: 500; color: var(--gray); background: var(--charcoal-2); border: 1px solid var(--line); padding: 0.55rem 1.1rem; border-radius: var(--radius); cursor: pointer; transition: var(--t); } .filters button:hover { color: var(--white); border-color: var(--steel-light); } .filters button.active { background: var(--teal); color: var(--on-accent); border-color: var(--teal); } .gallery { display: grid; gap: 1.1rem; grid-template-columns: repeat(1, 1fr); } @media (min-width: 600px) { .gallery { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .gallery { grid-template-columns: repeat(3, 1fr); } } .card { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); min-height: 280px; display: flex; align-items: flex-end; isolation: isolate; transition: var(--t); } .card.big { min-height: 360px; } @media (min-width: 600px) { .card.big { grid-column: span 2; } } .card__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transition: transform 0.6s ease; } .card.photo .card__bg { filter: saturate(0.9) contrast(1.05); } .card.tealtile .card__bg { background: linear-gradient(135deg, var(--steel) 0%, var(--charcoal-2) 100%); } .card__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11,14,15,0.94) 5%, rgba(11,14,15,0.15) 70%, rgba(215,215,215,0.18) 100%); transition: var(--t); } .card:hover { border-color: var(--teal-deep); } .card:hover .card__bg { transform: scale(1.07); } .card:hover .card__overlay { background: linear-gradient(0deg, rgba(20,24,26,0.92) 5%, rgba(215,215,215,0.32) 100%); } .card__body { padding: 1.4rem; width: 100%; } .card__cat { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.7rem; color: var(--teal-hi); } .card__title { font-family: var(--display); text-transform: uppercase; color: var(--white); font-weight: 700; font-size: 1.3rem; line-height: 1.05; margin-top: 0.3rem; } .card__icon { position: absolute; right: 1.2rem; top: 1.2rem; width: 40px; height: 40px; filter: var(--icon-filter); opacity: 0.8; z-index: 1; transition: var(--t); } .card:hover .card__icon { opacity: 1; } .is-hidden { display: none; } /* ---------- Values / steps ---------- */ .steps { display: grid; gap: 1.1rem; grid-template-columns: 1fr; counter-reset: step; } @media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } } .step { background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.6rem; position: relative; transition: var(--t); } .step:hover { border-color: var(--teal-deep); transform: translateY(-4px); } .step__n { font-family: var(--display); font-weight: 700; font-size: 2.4rem; color: var(--teal); line-height: 1; } .step h3 { margin: 0.7rem 0 0.5rem; } /* ---------- Recrutement / postes ---------- */ .jobs { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 720px) { .jobs { grid-template-columns: repeat(2, 1fr); } } .job { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--charcoal-2); border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: var(--radius); padding: 1.3rem 1.5rem; transition: var(--t); } .job:hover { background: var(--surface-hi); transform: translateX(4px); } .job h3 { font-size: 1.15rem; } .job span { font-size: 0.85rem; color: var(--gray-dim); } .job .chev { color: var(--teal-hi); font-size: 1.3rem; } /* ---------- Contact / form ---------- */ .contact-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; } @media (min-width: 940px) { .contact-grid { grid-template-columns: 1.1fr 0.9fr; } } .form { background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 2.6rem); } .field { margin-bottom: 1.2rem; } .field label { display: block; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; color: var(--gray); margin-bottom: 0.45rem; } .field label .req { color: var(--teal-hi); } .field input, .field select, .field textarea { width: 100%; background: var(--field-bg); border: 1px solid var(--line); border-radius: var(--radius); color: var(--white); font-family: var(--body); font-size: 1rem; padding: 0.85rem 1rem; transition: var(--t); } .field textarea { resize: vertical; min-height: 130px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(215,215,215,0.18); } .field input::placeholder, .field textarea::placeholder { color: var(--gray-dim); } .form-row { display: grid; gap: 1.2rem; grid-template-columns: 1fr; } @media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } } .form .btn { width: 100%; justify-content: center; margin-top: 0.4rem; } .form-success { display: none; align-items: center; gap: 0.9rem; background: rgba(215,215,215,0.12); border: 1px solid var(--teal-deep); border-radius: var(--radius); padding: 1.1rem 1.3rem; color: var(--white); margin-bottom: 1.3rem; } .form-success.show { display: flex; animation: pop 0.4s ease; } .form-success .dot { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--teal); color: var(--on-accent); display: grid; place-items: center; font-weight: 700; } @keyframes pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Message d'erreur du formulaire (même gabarit que .form-success, teinte alerte) */ .form-error { display: none; align-items: center; gap: 0.9rem; background: rgba(214, 90, 60, 0.14); border: 1px solid #a8452c; border-radius: var(--radius); padding: 1.1rem 1.3rem; color: var(--white); margin-bottom: 1.3rem; } .form-error.show { display: flex; animation: pop 0.4s ease; } .form-error .dot { width: 34px; height: 34px; flex: none; border-radius: 50%; background: #d65a3c; color: #1b0703; display: grid; place-items: center; font-weight: 700; } /* Pot de miel anti-robots : invisible pour l'humain, présent pour les bots */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } button[disabled] { opacity: 0.6; cursor: progress; } .info-block { display: grid; gap: 1.4rem; } .info-item { display: flex; gap: 1rem; align-items: flex-start; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); } .info-item:last-child { border-bottom: 0; } .info-item .ico { width: 42px; height: 42px; flex: none; border-radius: var(--radius); background: rgba(215,215,215,0.12); color: var(--teal-hi); display: grid; place-items: center; font-size: 1.2rem; border: 1px solid var(--teal-deep); } .info-item h3 { font-size: 1rem; margin-bottom: 0.2rem; } .info-item a:hover { color: var(--teal-hi); } .map-frame { margin-top: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .map-frame iframe { width: 100%; height: 260px; border: 0; filter: grayscale(0.5) contrast(1.1) brightness(0.85); } /* ---------- Qualibat banner ---------- */ .qualibat { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.9rem; } .qualibat img { background: #ffffff; padding: 0.5rem 0.7rem; border-radius: var(--radius); height: 60px; width: auto; } .qualibat p { margin: 0; } /* ---------- CTA band ---------- */ .ctaband { text-align: center; background: linear-gradient(120deg, var(--teal-deep), var(--charcoal-2)); border-top: 1px solid var(--teal-deep); } .ctaband h2 { margin-bottom: 1rem; } .ctaband .hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .ctaband p { max-width: 620px; margin: 0 auto 2rem; color: var(--white); opacity: 0.9; } /* ---------- Footer ---------- */ .footer { background: var(--footer-bg); border-top: 1px solid var(--line); padding-top: clamp(3rem, 6vw, 4.5rem); } .footer__grid { display: grid; gap: 2.4rem; grid-template-columns: 1fr; } @media (min-width: 720px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } } .footer h4 { font-family: var(--display); text-transform: uppercase; color: var(--white); letter-spacing: 0.1em; font-size: 0.95rem; margin-bottom: 1.1rem; } .footer p, .footer a, .footer li { font-size: 0.95rem; color: var(--gray); } .footer a:hover { color: var(--teal-hi); } .footer__brand .brand { margin-bottom: 1.1rem; } .footer ul { display: grid; gap: 0.55rem; } .footer__bottom { margin-top: 2.8rem; padding: 1.4rem 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--gray-dim); } .footer__bottom a:hover { color: var(--teal-hi); } .tag-qualibat { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--teal-hi); font-family: var(--display); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.8rem; } /* ---------- Reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2,0.7,0.2,1); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ---------- Mobile nav ---------- */ @media (max-width: 900px) { .burger { display: inline-flex; } .nav { position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px); background: var(--charcoal-2); border-left: 1px solid var(--line); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0.2rem; padding: 6rem 1.6rem 2rem; transform: translateX(100%); transition: transform var(--t); z-index: 90; } .nav.open { transform: translateX(0); box-shadow: -30px 0 60px -20px rgba(0, 0, 0, 0.75); } .nav a { padding: 0.9rem 0.4rem; font-size: 1.05rem; border-bottom: 1px solid var(--line); } .nav a::after { display: none; } .nav .btn { margin: 0.8rem 0 0; justify-content: center; } .nav-backdrop { position: fixed; inset: 0; background: rgba(8,11,12,0.6); z-index: 80; opacity: 0; pointer-events: none; transition: opacity var(--t); } .nav-backdrop.show { opacity: 1; pointer-events: auto; } body.theme-industrie .nav.open { box-shadow: -30px 0 60px -24px rgba(0, 0, 0, 0.35); } body.theme-industrie .nav-backdrop { background: rgba(70, 78, 83, 0.45); } } /* Header compact : le commutateur de pôle reste visible sur mobile */ @media (max-width: 900px) { .header__inner { gap: 0.5rem; } .poleswitch a { font-size: 0.6rem; letter-spacing: 0.1em; padding: 0.4rem 0.7rem; gap: 0.35rem; } .poleswitch__dot { width: 6px; height: 6px; } } @media (max-width: 620px) { .brand__mark, .header.scrolled .brand__mark { width: 30px; height: 30px; } .header .brand__word { font-size: 1.15rem; } .header .brand__sub { font-size: 0.5rem; letter-spacing: 0.2em; padding: 0.14rem 0.3rem 0.1rem 0.34rem; } .header .brand { gap: 0.5rem; } .poleswitch a { font-size: 0.55rem; padding: 0.38rem 0.55rem; } .poleswitch a .poleswitch__dot { display: none; } } @media (max-width: 340px) { .header .brand__text { display: none; } } /* ---------- Page mentions légales ---------- */ .legal { max-width: 820px; } .legal h2 { font-size: 1.35rem; margin: 2.4rem 0 0.8rem; color: var(--teal-hi); } .legal h2:first-child { margin-top: 0; } .legal p { color: var(--gray); line-height: 1.75; margin-bottom: 1rem; } .legal a { color: var(--teal-hi); text-decoration: underline; text-underline-offset: 3px; } .legal .todo { color: #d6a13c; font-style: italic; } /* ---------- Deux pôles : Bâtiment / Industrie (accueil) ---------- */ /* v14 : les deux cartes portent la bichromie du site (sombre / clair). */ .poles { display: grid; gap: 1.1rem; grid-template-columns: 1fr; } @media (min-width: 760px) { .poles { grid-template-columns: 1fr 1fr; } } .pole { position: relative; display: flex; flex-direction: column; gap: 0.9rem; padding: clamp(1.6rem, 3vw, 2.4rem); background: var(--charcoal-2); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius); overflow: hidden; transition: var(--t); } .pole:hover { transform: translateY(-5px); border-color: var(--accent-deep); border-top-color: var(--accent-hi); background: var(--surface-hi); } .pole .brand { pointer-events: none; } .pole p { font-size: 0.98rem; } .pole ul { display: grid; gap: 0.35rem; font-size: 0.92rem; } .pole li { display: flex; gap: 0.6rem; } .pole li::before { content: "◆"; color: var(--accent-hi); font-size: 0.65em; line-height: 2.1; flex: none; } .pole .btn { align-self: flex-start; margin-top: auto; } /* Carte sombre — pôle Bâtiment */ .pole--bat { background: #171d20; } .pole--bat:hover { background: var(--surface-hi); } /* Carte claire — pôle Industrie : elle annonce le thème clair de l'onglet */ .pole--ind { background: var(--ral); border-color: #bcc0c2; border-top-color: #14181a; color: #4a5257; } .pole--ind:hover { background: #e6e7e7; border-color: #9aa1a4; border-top-color: #14181a; } .pole--ind h1, .pole--ind h2, .pole--ind h3 { color: #14181a; } .pole--ind .brand__word { color: #14181a; } .pole--ind .brand__mark { fill: #14181a; } .pole--ind .brand__sub { color: #14181a; } .pole--ind li::before { color: #14181a; } .pole--ind .btn--ghost { color: #14181a; border-color: #9aa1a4; } .pole--ind .btn--ghost:hover { color: #000; border-color: #14181a; } /* ---------- Certifications (QUALIBAT + ISO 9001) ---------- */ .certs { display: grid; gap: 1.1rem; grid-template-columns: 1fr; } @media (min-width: 760px) { .certs { grid-template-columns: 1fr 1fr; } } .cert { background: var(--charcoal-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 1.8rem 1.7rem; } .cert__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 64px; padding: 0 0.9rem; margin-bottom: 1rem; border-radius: var(--radius); background: var(--ral); color: #14181a; font-family: var(--display); font-weight: 700; letter-spacing: 0.04em; font-size: 1.05rem; } .cert__badge img { height: 44px; width: auto; } .cert h3 { margin-bottom: 0.5rem; } .cert p + p { margin-top: 0.7rem; } .cert ul { margin-top: 0.9rem; display: grid; gap: 0.4rem; font-size: 0.94rem; } .cert li { display: flex; gap: 0.6rem; } .cert li::before { content: "—"; color: var(--accent-hi); flex: none; } /* ---------- Spécifications (page industrie) ---------- */ .specs { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .specs { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .specs { grid-template-columns: repeat(3, 1fr); } } .spec { background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.5rem; transition: var(--t); } .spec:hover { border-color: var(--accent-deep); transform: translateY(-4px); } .spec__k { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.72rem; color: var(--accent-hi); } .spec h3 { margin: 0.5rem 0; font-size: 1.25rem; } .spec p { font-size: 0.94rem; } /* ---------- Chaîne numérique de fabrication (BE → atelier) ---------- */ .chain { display: grid; gap: 0.8rem; grid-template-columns: 1fr; counter-reset: chain; } @media (min-width: 760px) { .chain { grid-template-columns: repeat(4, 1fr); } } .chain__step { position: relative; background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.3rem 1.4rem; } .chain__step::before { counter-increment: chain; content: "0" counter(chain); display: block; margin-bottom: 0.6rem; font-family: var(--display); font-weight: 700; font-size: 1.9rem; line-height: 1; color: var(--accent); } @media (min-width: 760px) { .chain__step:not(:last-child)::after { content: "→"; position: absolute; right: -0.95rem; top: 50%; transform: translateY(-50%); color: var(--accent-deep); font-size: 1.2rem; z-index: 1; } } .chain__step h3 { font-size: 1.1rem; margin-bottom: 0.4rem; } .chain__step p { font-size: 0.9rem; } /* ========================================================= THÈME CLAIR — reprises des couleurs CODÉES EN DUR (les variables ne suffisent pas : tous les dégradés, voiles et filtres écrits en dur ci-dessus sont ré-écrits ici.) ========================================================= */ /* Boutons & aplats d'accent : encre charbon, texte clair */ body.theme-industrie .btn--primary { background: #171c1f; color: #f2f3f3; } body.theme-industrie .btn--primary:hover { background: #05080a; color: #ffffff; box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.55); } body.theme-industrie .btn--ghost { color: #14181a; border-color: #9aa1a4; } body.theme-industrie .btn--ghost:hover { border-color: #14181a; color: #000000; } /* Header / commutateur */ body.theme-industrie .poleswitch { background: rgba(255, 255, 255, 0.5); border-color: #b9bec1; } body.theme-industrie .poleswitch a.is-active { background: #171c1f; color: #f2f3f3; } body.theme-industrie .burger { border-color: #9aa1a4; } /* Hero de page : lavis clair sur la photo au lieu du voile charbon */ body.theme-industrie .pagehero__bg { filter: grayscale(1) brightness(1.24) contrast(1.03); } body.theme-industrie .pagehero__overlay { background: linear-gradient(100deg, rgba(228, 228, 228, 0.96) 40%, rgba(213, 213, 213, 0.78) 100%); } body.theme-industrie .pagehero p { opacity: 1; } body.theme-industrie .hero__overlay { background: linear-gradient(110deg, rgba(228,228,228,0.94) 0%, rgba(222,222,222,0.76) 42%, rgba(200,200,200,0.3) 100%), linear-gradient(0deg, rgba(215,215,215,0.96) 0%, rgba(215,215,215,0) 55%); } body.theme-industrie .hero p, body.theme-industrie .splithero__intro .lead { opacity: 1; } /* Cadres photo : plus de multiply sombre, un voile clair */ body.theme-industrie .media-frame { border-color: #b9bec1; } body.theme-industrie .media-frame img { filter: grayscale(0.85) brightness(1.12) contrast(1.04); } body.theme-industrie .media-frame::after { background: linear-gradient(120deg, rgba(255, 255, 255, 0.35), rgba(215, 215, 215, 0.28)); mix-blend-mode: screen; } body.theme-industrie .media-frame__tag { background: #171c1f; color: #f2f3f3; } /* Tuiles & cartes */ body.theme-industrie .tile { background: #ffffff; } body.theme-industrie .tile::after { background: radial-gradient(circle, rgba(20, 24, 26, 0.09), transparent 70%); } body.theme-industrie .tile:hover .tile__icon { filter: brightness(0) opacity(1); } body.theme-industrie .card { border-color: #b9bec1; } body.theme-industrie .card.tealtile .card__bg { background: linear-gradient(135deg, #c6c9ca 0%, #f2f3f3 100%); } body.theme-industrie .card.photo .card__bg { filter: grayscale(0.9) brightness(1.14) contrast(1.03); } body.theme-industrie .card__overlay { background: linear-gradient(0deg, rgba(236, 237, 238, 0.96) 5%, rgba(226, 226, 226, 0.5) 70%, rgba(20, 24, 26, 0.06) 100%); } body.theme-industrie .card:hover .card__overlay { background: linear-gradient(0deg, rgba(236, 237, 238, 0.96) 5%, rgba(20, 24, 26, 0.1) 100%); } body.theme-industrie .card__icon { opacity: 0.7; } /* Bandeaux images */ body.theme-industrie .stats { background: linear-gradient(rgba(232, 232, 232, 0.9), rgba(226, 226, 226, 0.93)), url("/assets/derice0561.png") center / cover fixed no-repeat; } body.theme-industrie .bandblock { border-color: #b9bec1; } body.theme-industrie .bandblock__bg { filter: grayscale(1) brightness(1.22); } body.theme-industrie .bandblock__overlay { background: linear-gradient(90deg, rgba(230, 230, 230, 0.95) 10%, rgba(210, 210, 210, 0.58) 100%); } /* Filtres galerie */ body.theme-industrie .filters button { background: #ffffff; } body.theme-industrie .filters button.active { background: #171c1f; color: #f2f3f3; border-color: #171c1f; } /* Postes / offres */ body.theme-industrie .job { background: #ffffff; } /* Formulaires */ body.theme-industrie .form { background: #f4f5f5; } body.theme-industrie .field input:focus, body.theme-industrie .field select:focus, body.theme-industrie .field textarea:focus { box-shadow: 0 0 0 3px rgba(20, 24, 26, 0.14); } body.theme-industrie .form-success { background: rgba(20, 24, 26, 0.07); border-color: #8d9498; color: #14181a; } body.theme-industrie .form-success .dot { background: #171c1f; color: #f2f3f3; } body.theme-industrie .form-error { background: rgba(180, 62, 34, 0.1); border-color: #b4553a; color: #5a1b0c; } /* Blocs contact */ body.theme-industrie .info-item .ico { background: rgba(20, 24, 26, 0.07); color: #14181a; border-color: #9aa1a4; } body.theme-industrie .map-frame iframe { filter: grayscale(0.55) contrast(1.02) brightness(1.03); } body.theme-industrie .qualibat { background: #ffffff; } /* Bandeau CTA & footer */ body.theme-industrie .ctaband { background: linear-gradient(120deg, #c4c6c7 0%, #f0f1f1 100%); border-top-color: #a9afb2; } body.theme-industrie .ctaband p { opacity: 1; } body.theme-industrie .footer { border-top-color: #adb2b5; } /* Encarts / listes */ body.theme-industrie .cert__badge { background: #171c1f; color: #f2f3f3; } body.theme-industrie .cert__badge img { background: #ffffff; padding: 0.2rem 0.4rem; border-radius: 2px; } body.theme-industrie .step { background: #ffffff; } body.theme-industrie .spec { background: #ffffff; } body.theme-industrie .chain__step { background: #ffffff; } body.theme-industrie .legal .todo { color: #96661a; } body.theme-industrie .tile__icon, body.theme-industrie .card__icon { filter: brightness(0) opacity(0.78); } /* Correctifs (relecture v15) : le CTA de la nav héritait de la couleur des liens ; les ancres passaient sous le header fixe */ .nav .btn--primary, .nav .btn--primary:hover { color: var(--on-accent); } [id] { scroll-margin-top: 90px; } /* Espacement titres (retour Larry 04/09) : l'interligne 0.98 faisait mordre l'accent des capitales (É) sur la ligne du dessus et l'eyebrow ; hors .section-head, eyebrow / titre / lead étaient collés. */ .eyebrow + h1, .eyebrow + h2 { margin-top: 0.85rem; } h1 + .lead, h2 + .lead, h1 + p, h2 + p { margin-top: 0.9rem; } /* ---------- Logo réel + certifications (pièces reçues le 04/09) ---------- */ .brand__cartouche { display: inline-flex; align-items: center; justify-content: center; background: #d7d7d7; border-radius: 4px; padding: 3px; flex: none; } .brand__mark, .header.scrolled .brand__mark { width: 44px; height: 44px; object-fit: contain; fill: none; transform: none; } .brand:hover .brand__mark { transform: none; } .brand--lg .brand__mark { width: 64px; height: 64px; } .brand--lg .brand__cartouche { padding: 5px; } .cert__badge--img { padding: 0.35rem 0.5rem; height: auto; background: #fff; } .cert__badge--img img { height: 96px; width: auto; display: block; } .cert__badge--iso img { height: 132px; } .cert-line { margin: 0; } /* Logo sans cartouche (retour Larry 04/09) */ .brand__cartouche, .brand--lg .brand__cartouche { background: transparent; padding: 0; border-radius: 0; } .brand__mark, .header.scrolled .brand__mark { width: 48px; height: 48px; } .brand--lg .brand__mark { width: 68px; height: 68px; }