/** * Cam3D — base styles: design tokens, shared components, header and footer. * Maquette de référence : desktop 1440 px (conteneur 1360 px + 40 px de marge). * Points de rupture : tablette < 1200 px, mobile < 768 px. */ :root { --wcam-bg: #efede8; --wcam-white: #fff; --wcam-line: #e0ddd6; --wcam-ink: #0e1116; --wcam-muted: #5d6470; --wcam-soft: #9aa1ac; --wcam-red: #e1000f; --wcam-navy: #0b1530; --wcam-navy-2: #16213f; --wcam-navy-hover: #1a2952; --wcam-navy-line: #27324f; --wcam-navy-text: #a7afc2; --wcam-navy-bullet: #1c2e63; --wcam-flag-blue: #000091; --wcam-font-title: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif; --wcam-font-text: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif; --wcam-font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --wcam-font-code: 'Space Mono', ui-monospace, Menlo, monospace; --wcam-gutter: 40px; --wcam-max: 1440px; --wcam-radius: 10px; --wcam-section-gap: 120px; /* Hauteur de l'en-tête du site et de la barre d'admin WordPress (connecté). */ --wcam-header-h: 85px; --wcam-adminbar-h: 0px; /* Tailles de titres : exactes à 1440 px, réduites en dessous. */ --wcam-fs-h1: clamp(42px, 5.42vw, 78px); --wcam-fs-h2: clamp(32px, 3.62vw, 52px); --wcam-fs-h2-lg: clamp(34px, 4.03vw, 58px); --wcam-fs-h3: clamp(26px, 2.5vw, 36px); } @media (min-width: 783px) { .admin-bar { --wcam-adminbar-h: 32px; } } @media (max-width: 1199px) { :root { --wcam-header-h: 77px; --wcam-gutter: 32px; --wcam-section-gap: 96px; } } @media (max-width: 767px) { :root { --wcam-gutter: 20px; --wcam-section-gap: 72px; } } /* ---------- Base ---------- */ /* Hauteur d'écran visible sous l'en-tête (sections d'ouverture de page). Déclarée sur pour tenir compte de la barre d'admin, dont la classe est posée sur . */ body.wcam { --wcam-screen: calc(100svh - var(--wcam-header-h) - var(--wcam-adminbar-h)); /* Garde-fou contenu : un mot ou une adresse web plus long que sa colonne passe à la ligne au lieu de déborder (les mots normaux ne sont jamais coupés). */ overflow-wrap: break-word; } /* Titres équilibrés (pas de mot seul sur la dernière ligne) et paragraphes sans ligne orpheline. Sans effet quand le titre tient sur ses lignes (maquette ordinateur). */ :where(body.wcam) :where(h1, h2, h3, h4) { text-wrap: balance; } :where(body.wcam) :where(p, li, dd, figcaption) { text-wrap: pretty; } /* Un titre ne dépasse jamais la largeur de sa colonne (priorité nulle : les largeurs définies ailleurs restent). */ :where(body.wcam) :where(h1, h2, h3, h4, p, li, dd, dt, figcaption, summary) { max-width: 100%; } html body.wcam { background: var(--wcam-bg); color: var(--wcam-ink); font-family: var(--wcam-font-text); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; } html:has(body.wcam) { background: var(--wcam-bg); } :where(.wcam) *, :where(.wcam) *::before, :where(.wcam) *::after { box-sizing: border-box; } :where(.wcam) img { max-width: 100%; height: auto; } :where(.wcam) :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; } :where(.wcam) :where(ul, ol) { padding: 0; list-style: none; } :where(.wcam) a { color: inherit; text-decoration: none; } :where(.wcam) :where(a, button, summary):focus-visible { outline: 2px solid var(--wcam-red); outline-offset: 3px; } .wcam .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .wcam .skip-link { position: absolute; left: 16px; top: -100px; z-index: 1000; background: var(--wcam-navy); color: var(--wcam-white); padding: 12px 16px; border-radius: 4px; } .wcam .skip-link:focus { top: 16px; } .wcam .site-main, .wcam .entry-content, .wcam .flexible-content-wrapper, .wcam .page-content-wrapper { margin: 0; padding: 0; max-width: none; background: transparent; } /* ---------- Layout ---------- */ .wcam-section { width: 100%; max-width: var(--wcam-max); margin-inline: auto; padding: 0 var(--wcam-gutter) var(--wcam-section-gap); } /* Espace sous la section, réglable par bloc. */ .wcam-section.wcam-pb-112 { padding-bottom: min(112px, var(--wcam-section-gap)); } .wcam-section.wcam-pb-96 { padding-bottom: min(96px, var(--wcam-section-gap)); } .wcam-section.wcam-pb-64 { padding-bottom: 64px; } .wcam-section.wcam-pb-0 { padding-bottom: 0; } /* Tablette : espacement entre sections réduit (72 px au lieu de 96), les réglages par bloc suivent. */ @media (min-width: 768px) and (max-width: 1023px) { :root { --wcam-section-gap: 72px; } .wcam-section.wcam-pb-96 { padding-bottom: 56px; } .wcam-section.wcam-pb-64 { padding-bottom: 48px; } } @media (max-width: 767px) { .wcam-section.wcam-pb-64 { padding-bottom: 48px; } } .wcam-title { font-family: var(--wcam-font-title); font-weight: 500; line-height: 1.02; color: var(--wcam-ink); } .wcam-title--h1 { font-size: var(--wcam-fs-h1); letter-spacing: -0.03em; line-height: 1; } .wcam-title--h2 { font-size: var(--wcam-fs-h2); letter-spacing: -0.03em; } .wcam-title--h2-lg { font-size: var(--wcam-fs-h2-lg); letter-spacing: -0.03em; } .wcam-title--h2-sm { font-size: clamp(30px, 3.34vw, 48px); letter-spacing: -0.03em; } .wcam-title--h3 { font-size: var(--wcam-fs-h3); letter-spacing: -0.03em; } .wcam-intro { font-size: 16px; line-height: 1.55; color: var(--wcam-muted); } /* En-tête de section : titre à gauche, introduction et lien à droite. */ .wcam-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 40px; } .wcam-head__main { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; } .wcam-head__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 380px; flex-shrink: 0; } .wcam-head--center { flex-direction: column; align-items: center; text-align: center; gap: 22px; } .wcam-head--center .wcam-head__main { align-items: center; } @media (max-width: 1199px) { :is(.wcam-title, .wcam-page-head__title, .wcam-page-hero__title, .wcam-hero-home__title, .wcam-duo__title, .wcam-plain-head__title) br { display: none; } } @media (max-width: 1023px) { .wcam-head { flex-direction: column; align-items: flex-start; gap: 20px; } /* Tablette et mobile : tous les en-têtes de section sont alignés à gauche, comme le reste de la page. */ .wcam-head--center { align-items: flex-start; text-align: left; } .wcam-head--center .wcam-head__main { align-items: flex-start; } .wcam-head__aside { width: 100%; max-width: 560px; } } @media (max-width: 767px) { :root .wcam-tag { white-space: normal; } .wcam-head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 32px; } .wcam-head__aside { width: 100%; } } /* En-tête « simple » (surtitre mono, titre, texte). */ .wcam-plain-head { display: flex; flex-direction: column; gap: 24px; margin-bottom: 80px; } .wcam-plain-head__tagline { color: #4d4f51; font-family: var(--wcam-font-mono); font-size: 16px; font-weight: 500; line-height: 1.5; text-transform: uppercase; } .wcam-plain-head__title { color: #232425; font-family: var(--wcam-font-title); font-size: clamp(34px, 3.75vw, 54px); font-weight: 500; line-height: 1.02; } .wcam-plain-head__intro { color: #4d4f51; font-size: 18px; line-height: 1.5; } @media (max-width: 767px) { .wcam-plain-head { gap: 16px; margin-bottom: 40px; } } /* ---------- Étiquette (tag) : texte mono souligné d'un trait ---------- */ .wcam-tag { display: inline-flex; flex-direction: column; align-items: stretch; gap: 8px; color: var(--wcam-ink); font-family: var(--wcam-font-mono); font-size: 11px; font-weight: 500; line-height: normal; letter-spacing: 0.03em; text-transform: uppercase; /* Une étiquette plus longue que sa colonne passe à la ligne au lieu de déborder. */ white-space: normal; text-wrap: balance; max-width: 100%; } .wcam-tag::after { content: ''; display: block; height: 1px; background: currentColor; } .wcam-tag--dark { color: var(--wcam-white); } .wcam-tag--dark::after { background: rgba(255, 255, 255, 0.5); } /* Libellé discret (chiffres clés) : sans trait. */ .wcam-tag--bare { color: var(--wcam-muted); } .wcam-tag--bare::after { content: none; } /* ---------- Boutons : toujours pleins, même gabarit que ceux de l'en-tête ---------- Principal : rouge (bleu nuit sur fond rouge). Secondaire : blanc avec bordure. */ .wcam-btn { display: inline-flex; align-items: center; justify-content: center; padding: 15px 16px; border: 1px solid transparent; border-radius: 4px; font-family: var(--wcam-font-text); font-size: 13px; font-weight: 600; line-height: 16px; /* 15 + 16 + 15 + 2 × 1 px de bordure = 48 px, comme sur la maquette */ letter-spacing: 0.03em; text-transform: uppercase; /* Un bouton passe à la ligne entier ; seul un libellé plus large que la colonne est coupé. */ white-space: normal; text-align: center; flex-shrink: 0; max-width: 100%; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .wcam-btn--red { border-color: var(--wcam-red); background: var(--wcam-red); color: var(--wcam-white); } .wcam-btn--red:hover { border-color: #b8000c; background: #b8000c; } .wcam-btn--navy { border-color: var(--wcam-navy); background: var(--wcam-navy); color: var(--wcam-white); } .wcam-btn--navy:hover { border-color: var(--wcam-navy-hover); background: var(--wcam-navy-hover); } .wcam-btn--light { border-color: var(--wcam-line); background: var(--wcam-white); color: var(--wcam-ink); } .wcam-btn--light:hover { border-color: var(--wcam-ink); } /* ---------- Listes « + » ---------- */ .wcam-plus-list { display: flex; flex-direction: column; gap: 12px; } .wcam-plus-list li { display: flex; align-items: flex-start; /* le « + » reste face à la 1re ligne quand le texte passe sur deux lignes */ gap: 12px; font-size: 15.5px; line-height: 20px; color: var(--wcam-ink); } .wcam-plus-list__icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; border: 1px solid var(--wcam-line); border-radius: 3px; background: var(--wcam-white); color: var(--wcam-red); font-size: 15px; line-height: 1; } .wcam-plus-list--dark li { font-size: 15px; color: rgba(255, 255, 255, 0.88); } .wcam-plus-list--dark .wcam-plus-list__icon { background: var(--wcam-navy-2); border-color: var(--wcam-navy-line); } /* ---------- Étiquettes « + LABEL » ---------- */ .wcam-chips { display: flex; flex-wrap: wrap; gap: 8px; } .wcam-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--wcam-navy-line); border-radius: 3px; background: var(--wcam-navy-2); color: var(--wcam-white); font-family: var(--wcam-font-mono); font-size: 11px; font-weight: 500; line-height: normal; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } .wcam-chip__plus { color: var(--wcam-red); font-family: var(--wcam-font-text); font-size: 14px; font-weight: 400; line-height: 1; } .wcam-chips--light .wcam-chip { background: var(--wcam-bg); border-color: var(--wcam-line); color: var(--wcam-ink); } /* ---------- Fond rayé bleu nuit (hero, visuels) ---------- */ .wcam-stripes { position: relative; overflow: hidden; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 15px, transparent 15px 26px), linear-gradient(180deg, #22356b 0%, #0a1330 100%); } .wcam-stripes::before { content: ''; position: absolute; left: 8%; top: -35%; width: 420px; height: 1500px; background: rgba(255, 255, 255, 0.07); filter: blur(30px); transform: rotate(28deg); transform-origin: top left; pointer-events: none; } .wcam-stripes::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0.81deg, rgba(5, 10, 26, 0.35) 46.378%, rgba(25, 49, 128, 0.35) 98.76%); pointer-events: none; } .wcam-nowrap { white-space: nowrap; } /* Mobile : la phrase d'accroche du pied de page s'enchaîne sans retour forcé. */ @media (max-width: 767px) { .wcam-footer__baseline br { display: none; } } /* ---------- Galerie photos (articles, réalisations) ---------- */ .wcam-gallery { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .wcam-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; } .wcam-gallery__item { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 6px; background: #e3e6ec; cursor: zoom-in; } .wcam-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .wcam-gallery__item:hover img { transform: scale(1.04); } .wcam-gallery__item:focus-visible { outline: 2px solid var(--wcam-red); outline-offset: 2px; } /* Agrandissement au clic. */ .wcam-lightbox { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: rgba(8, 12, 26, 0.97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--wcam-white); } .wcam-lightbox::backdrop { background: transparent; } .wcam-lightbox__figure { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 100%; margin: 0; padding: 64px 88px; } .wcam-lightbox__img { display: block; max-width: 100%; max-height: calc(100% - 40px); object-fit: contain; border-radius: 6px; } .wcam-lightbox__caption { color: rgba(255, 255, 255, 0.75); font-size: 15px; text-align: center; } .wcam-lightbox__count { position: absolute; top: 22px; left: 24px; color: rgba(255, 255, 255, 0.7); font-family: var(--wcam-font-mono); font-size: 12px; letter-spacing: 0.04em; } .wcam-lightbox__btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 4px; background: rgba(255, 255, 255, 0.08); color: var(--wcam-white); font-size: 22px; line-height: 1; cursor: pointer; transition: background-color 0.2s ease; } .wcam-lightbox__btn:hover { background: rgba(255, 255, 255, 0.18); } .wcam-lightbox__btn--close { top: 12px; right: 12px; } .wcam-lightbox__btn--prev, .wcam-lightbox__btn--next { top: 50%; transform: translateY(-50%); } .wcam-lightbox__btn--prev { left: 20px; } .wcam-lightbox__btn--next { right: 20px; } @media (max-width: 767px) { .wcam-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .wcam-lightbox__figure { padding: 64px 12px 88px; } .wcam-lightbox__btn--prev, .wcam-lightbox__btn--next { top: auto; bottom: 20px; transform: none; } } /* ---------- En-tête du site ---------- */ .wcam-header { position: sticky; top: 0; z-index: 100; background: var(--wcam-bg); border-bottom: 1px solid var(--wcam-line); } .admin-bar .wcam-header { top: 32px; } .wcam-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: var(--wcam-max); margin-inline: auto; padding: 18px var(--wcam-gutter); } .wcam-header__logo { display: flex; flex-shrink: 0; } .wcam-header__logo img { display: block; width: auto; height: 23px; } .wcam-header__sitename { font-family: var(--wcam-font-title); font-size: 24px; color: var(--wcam-navy); } .wcam-menu { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--wcam-line); border-radius: 6px; background: var(--wcam-white); } .wcam-menu > li { position: relative; } .wcam-menu a { display: block; padding: 9px 16px; border: 1px solid var(--wcam-line); border-radius: 4px; background: var(--wcam-white); color: var(--wcam-ink); font-size: 14px; font-weight: 500; line-height: normal; white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease; } .wcam-menu > li > a:hover { background: var(--wcam-bg); } .wcam-menu > .current-menu-item > a, .wcam-menu > .current-menu-ancestor > a, .wcam-menu > .current-menu-parent > a { background: var(--wcam-navy); border-color: var(--wcam-navy); color: var(--wcam-white); } /* Flèche indiquant le sous-menu (tourne à l'ouverture). */ .wcam-menu > .menu-item-has-children > a { display: flex; align-items: center; gap: 8px; } .wcam-menu > .menu-item-has-children > a::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease; } .wcam-menu > .menu-item-has-children:is(:hover, :focus-within, .is-open) > a::after { transform: translateY(1px) rotate(-135deg); } .wcam-menu .sub-menu { position: absolute; top: calc(100% + 8px); left: -5px; min-width: 260px; display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid var(--wcam-line); border-radius: 6px; background: var(--wcam-white); box-shadow: 0 16px 40px rgba(11, 21, 48, 0.12); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; } .wcam-menu .sub-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } .wcam-menu > li:hover > .sub-menu, .wcam-menu > li:focus-within > .sub-menu, .wcam-menu > li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; } .wcam-menu .sub-menu a { border-color: transparent; } .wcam-menu .sub-menu a:hover, .wcam-menu .sub-menu .current-menu-item > a { background: var(--wcam-bg); } .wcam-header__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .wcam-header__actions--mobile { display: none; } .wcam-header__phone { display: inline-flex; align-items: center; padding: 13px 14px; border: 1px solid var(--wcam-line); border-radius: 4px; background: var(--wcam-white); font-family: var(--wcam-font-mono); font-size: 13px; font-weight: 500; line-height: normal; white-space: nowrap; } .wcam-header__burger { display: none; position: relative; width: 44px; height: 44px; border: 1px solid var(--wcam-line); border-radius: 4px; background: var(--wcam-white); cursor: pointer; } .wcam-header__burger-lines, .wcam-header__burger-lines::before, .wcam-header__burger-lines::after { position: absolute; left: 12px; width: 18px; height: 2px; background: var(--wcam-ink); transition: transform 0.25s ease, opacity 0.2s ease; } .wcam-header__burger-lines { top: 20px; } .wcam-header__burger-lines::before, .wcam-header__burger-lines::after { content: ''; left: 0; } .wcam-header__burger-lines::before { top: -6px; } .wcam-header__burger-lines::after { top: 6px; } .wcam-header.is-open .wcam-header__burger-lines { background: transparent; } .wcam-header.is-open .wcam-header__burger-lines::before { transform: translateY(6px) rotate(45deg); } .wcam-header.is-open .wcam-header__burger-lines::after { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 1199px) { .wcam-header__bar { padding-block: 14px; } .wcam-header__burger { display: block; } .wcam-header__bar > .wcam-header__actions { margin-left: auto; } .wcam-header__bar > .wcam-header__actions .wcam-header__phone { display: none; } /* Menu mobile et tablette : panneau plein écran sous l'en-tête. */ .wcam-header__nav { position: fixed; top: var(--wcam-nav-top, calc(var(--wcam-header-h) + var(--wcam-adminbar-h))); left: 0; right: 0; bottom: 0; z-index: 99; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 24px var(--wcam-gutter) calc(24px + env(safe-area-inset-bottom)); background: var(--wcam-bg); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s; } .wcam-header.is-open .wcam-header__nav { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s; } .wcam-menu { flex-direction: column; gap: 6px; padding: 6px; } .wcam-menu > li { opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease; } .wcam-header.is-open .wcam-menu > li { opacity: 1; transform: none; } .wcam-header.is-open .wcam-menu > li:nth-child(2) { transition-delay: 0.03s; } .wcam-header.is-open .wcam-menu > li:nth-child(3) { transition-delay: 0.06s; } .wcam-header.is-open .wcam-menu > li:nth-child(4) { transition-delay: 0.09s; } .wcam-header.is-open .wcam-menu > li:nth-child(5) { transition-delay: 0.12s; } .wcam-header.is-open .wcam-menu > li:nth-child(n+6) { transition-delay: 0.15s; } .wcam-menu a { padding: 18px 20px; font-family: var(--wcam-font-title); font-size: 20px; letter-spacing: -0.01em; white-space: normal; } .wcam-menu .sub-menu a { padding: 13px 16px; font-family: var(--wcam-font-text); font-size: 16px; letter-spacing: 0; } /* Menu mobile : sous-menu en accordéon, fermé par défaut. */ .wcam-menu .sub-menu { position: static; display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 4px 0 4px 16px; } .wcam-menu > li:hover > .sub-menu, .wcam-menu > li:focus-within > .sub-menu { display: none; } .wcam-menu > li.is-open > .sub-menu { display: flex; } .wcam-menu > .menu-item-has-children > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .wcam-menu > .menu-item-has-children > a::after { content: ''; width: 8px; height: 8px; margin-right: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease; } .wcam-menu > .menu-item-has-children.is-open > a::after { transform: translateY(2px) rotate(-135deg); } .wcam-header__actions--mobile { display: flex; flex-wrap: wrap; margin-top: auto; padding-top: 24px; } .wcam-header__actions--mobile .wcam-btn, .wcam-header__actions--mobile .wcam-header__phone { flex: 1 1 0; justify-content: center; padding-block: 17px; } /* Page figée derrière le menu ouvert. */ html.wcam-nav-open { overflow: hidden; } html.wcam-nav-open #cmplz-manage-consent { display: none; } } /* Tablette : cibles plus grandes, le bouton devis reste dans la barre. */ @media (min-width: 768px) and (max-width: 1199px) { .wcam-header__nav { padding-top: 32px; } .wcam-menu a { padding: 24px 28px; font-size: 26px; } .wcam-menu .sub-menu { padding-left: 24px; } .wcam-menu .sub-menu a { padding: 16px 20px; font-size: 18px; } .wcam-header__actions--mobile .wcam-btn { display: none; } } @media (prefers-reduced-motion: reduce) { .wcam-header__nav, .wcam-menu > li { transition: none !important; } } @media (max-width: 767px) { .wcam-header__bar > .wcam-header__actions { display: none; } .wcam-header__actions--mobile .wcam-btn, .wcam-header__actions--mobile .wcam-header__phone { flex: 1 1 100%; justify-content: center; } } @media (max-width: 782px) { .admin-bar .wcam-header { top: 0; } } /* ---------- Zones de toucher (mobile, tablette) ---------- Liens de petite taille : zone cliquable agrandie à 44 px de haut environ, sans rien changer à l'affichage (marge négative = padding ajouté). */ .wcam-header__logo a, .wcam-footer__logo, .wcam-footer__menu a, .wcam-footer__contact a, .wcam-footer__legal a, .wcam-footer__credit, a.wcam-tag { padding-block: 12px; margin-block: -12px; } .wcam-header__logo a, .wcam-footer__menu a, .wcam-footer__contact a, .wcam-footer__legal a { display: inline-block; } a.wcam-tag { padding-inline: 8px; margin-inline: -8px; } /* ---------- Pied de page ---------- */ .wcam-footer__inner { max-width: var(--wcam-max); margin-inline: auto; padding: 0 var(--wcam-gutter) 40px; } .wcam-footer__cta { display: flex; align-items: flex-end; gap: 40px; padding: 80px 64px; background: var(--wcam-red); color: var(--wcam-white); } .wcam-footer__cta-content { display: flex; flex: 1 1 auto; flex-direction: column; gap: 24px; min-width: 0; } .wcam-footer__cta-surtitle { font-family: var(--wcam-font-mono); font-size: 16px; font-weight: 500; line-height: 1.5; text-transform: uppercase; } .wcam-footer__cta-title { font-family: var(--wcam-font-title); font-size: var(--wcam-fs-h1); font-weight: 500; line-height: 1.02; letter-spacing: -0.038em; } .wcam-footer__cta-text { font-size: 18px; line-height: 1.5; } .wcam-footer__panel { overflow: hidden; background: var(--wcam-navy); border-radius: 0 0 var(--wcam-radius) var(--wcam-radius); color: var(--wcam-white); } .wcam-footer__panel--rounded { border-radius: var(--wcam-radius); } .wcam-footer__main { display: flex; } .wcam-footer__brand { display: flex; flex: 1 1 auto; flex-direction: column; gap: 22px; padding: 48px; } .wcam-footer__logo { display: inline-flex; font-family: var(--wcam-font-title); font-size: 24px; } .wcam-footer__logo-img { display: block; width: auto; height: 23px; } .wcam-footer__baseline { font-family: var(--wcam-font-title); font-size: clamp(26px, 2.5vw, 36px); font-weight: 500; line-height: 1.02; letter-spacing: -0.03em; } .wcam-footer__nav { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 47.06%; /* 640 / 1360 */ flex-shrink: 0; padding: 48px; border-left: 1px solid var(--wcam-navy-line); } .wcam-footer__label { color: var(--wcam-navy-text); font-family: var(--wcam-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; } .wcam-footer__menu { display: flex; flex-wrap: wrap; gap: 20px 24px; max-width: 300px; font-size: 16px; font-weight: 500; line-height: normal; } /* Liste des prestations : deux liens par ligne, comme sur la maquette. */ .wcam-footer__menu + .wcam-footer__label + .wcam-footer__menu { max-width: 500px; row-gap: 24px; } .wcam-footer__menu a:hover, .wcam-footer__contact a:hover, .wcam-footer__legal a:hover { color: var(--wcam-white); text-decoration: underline; text-underline-offset: 3px; } .wcam-footer__legal { display: flex; flex-wrap: wrap; gap: 10px; color: var(--wcam-navy-text); font-size: 13px; line-height: normal; } .wcam-footer__legal li + li::before { content: '·'; margin-right: 10px; } .wcam-footer__divider { width: 100%; height: 1px; margin: 0; border: 0; background: var(--wcam-navy-line); } .wcam-footer__contact { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 17px; font-weight: 500; line-height: normal; } .wcam-footer__address { color: var(--wcam-navy-text); font-size: 14px; line-height: normal; } .wcam-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 22px 48px; border-top: 1px solid var(--wcam-navy-line); color: var(--wcam-navy-text); } .wcam-footer__credit { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; opacity: 0.8; transition: opacity 0.2s ease; } .wcam-footer__credit:hover { opacity: 1; } .wcam-footer__credit img { width: 70px; height: 16px; } @media (max-width: 1199px) { .wcam-footer__cta { padding: 56px 40px; } .wcam-footer__nav { width: 50%; } } @media (max-width: 1023px) { .wcam-footer__main { flex-direction: column; } .wcam-footer__nav { width: auto; border-left: 0; border-top: 1px solid var(--wcam-navy-line); } } @media (max-width: 767px) { .wcam-footer__inner { padding-bottom: 20px; } .wcam-footer__cta { flex-direction: column; align-items: flex-start; gap: 32px; padding: 48px 24px; } .wcam-footer__cta-text br { display: none; } .wcam-footer__brand, .wcam-footer__nav { padding: 32px 24px; } .wcam-footer__bottom { flex-direction: column; align-items: flex-start; padding: 20px 24px; } /* Prestations : une par ligne ; intitulés de liste mieux détachés des liens du dessus. */ .wcam-footer__menu + .wcam-footer__label + .wcam-footer__menu { flex-direction: column; row-gap: 18px; } .wcam-footer__menu + .wcam-footer__label { margin-top: 12px; } /* Liens légaux : sans séparateur « · » (il se retrouvait en début de ligne). */ .wcam-footer__legal { gap: 10px 20px; } .wcam-footer__legal li + li::before { content: none; } } /* ---------- Carte réalisation (accueil, liste, projets voisins) ---------- */ .wcam-project-card__link { display: flex; flex-direction: column; height: 100%; padding: 8px; border-radius: var(--wcam-radius); background: var(--wcam-white); } .wcam-project-card__media { display: block; overflow: hidden; aspect-ratio: 426 / 320; border-radius: 2px; background: #e3e6ec; } .wcam-project-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .wcam-project-card__link:hover .wcam-project-card__media img { transform: scale(1.04); } .wcam-project-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 12px 10px; } .wcam-project-card__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .wcam-project-card__meta { color: var(--wcam-muted); font-family: var(--wcam-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; } .wcam-project-card__title { font-family: var(--wcam-font-title); font-size: 24px; font-weight: 500; line-height: 1.02; letter-spacing: -0.03em; } .wcam-project-card__arrow { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 3px; background: var(--wcam-navy); color: var(--wcam-white); font-size: 24px; line-height: 1; transition: background-color 0.2s ease; } .wcam-project-card__link:hover .wcam-project-card__arrow { background: var(--wcam-red); } @media (max-width: 767px) { .wcam-project-card__title { font-size: 21px; } } /* ---------- Contenu éditeur (politique de cookies Complianz…) ---------- */ .wcam-page-content__card { padding: 48px; border-radius: var(--wcam-radius); background: var(--wcam-white); color: var(--wcam-muted); font-size: 16px; line-height: 1.65; } .wcam-page-content__card :is(h2, h3, h4) { margin: 32px 0 12px; color: var(--wcam-ink); font-family: var(--wcam-font-title); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; } .wcam-page-content__card h2 { font-size: 28px; } .wcam-page-content__card :is(h3, h4) { font-size: 21px; } .wcam-page-content__card > :first-child, .wcam-page-content__card > * > :first-child { margin-top: 0; } .wcam-page-content__card :is(p, ul, ol) { margin: 0 0 14px; } .wcam-page-content__card a { color: var(--wcam-ink); text-decoration: underline; text-underline-offset: 2px; } /* Documents générés (politique de cookies Complianz) : même lecture que les autres pages légales. */ .wcam-page-content__card { color: #3d4450; } .wcam-page-content__card :is(p, ul, ol, h2, h3, h4, table, details) { max-width: 860px; } .wcam-page-content__card ul, .wcam-page-content__card #cmplz-document ul { margin-left: 0; padding-left: 0; list-style: none; } .wcam-page-content__card ul > li { position: relative; padding-left: 24px; } .wcam-page-content__card ul > li + li { margin-top: 6px; } .wcam-page-content__card ul > li::before { content: '+'; position: absolute; left: 2px; top: 0; color: var(--wcam-red); font-family: var(--wcam-font-mono); font-weight: 600; } .wcam-page-content__card table { width: 100%; border-collapse: collapse; font-size: 15px; } .wcam-page-content__card :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--wcam-line); text-align: left; vertical-align: top; } .wcam-page-content__card h2 { padding-top: 24px; border-top: 1px solid var(--wcam-line); } .wcam-page-content__card > :first-child h2:first-of-type, .wcam-page-content__card > h2:first-child { padding-top: 0; border-top: 0; } @media (max-width: 767px) { .wcam-page-content__card { padding: 28px 20px; } .wcam-page-content__card h2 { font-size: 24px; } } /* Apparition douce des sections au défilement (classes posées par webiteasy-site.js). */ @media (prefers-reduced-motion: no-preference) { .wcam-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--wcam-reveal-delay, 0ms); will-change: opacity, transform; } .wcam-reveal.is-visible { opacity: 1; transform: none; } } @media print { .wcam-reveal { opacity: 1; transform: none; } }